diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000000..e21b3f2f2b
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": { "node": "10" }
+      }
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-modules-commonjs",
+    ["@babel/plugin-transform-runtime", { "regenerator": true }],
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
+}
\ No newline at end of file
diff --git a/.cypress/CYPRESS_TESTS.md b/.cypress/CYPRESS_TESTS.md
new file mode 100644
index 0000000000..bba2db259d
--- /dev/null
+++ b/.cypress/CYPRESS_TESTS.md
@@ -0,0 +1,146 @@
+# Observability Cypress Test Cases
+The observability plugin currently has 4 modules in it. Each of the modules have their own cypress tests [here](./integration). 
+
+## 1. Event Analytics
+
+### Home
+
+* Query Search
+    * Type query in search bar then click ‘refresh’ button on date range picker to search would redirect user to explorer page, and display searching results in that page
+    * Click ‘refresh’ button directly without having a query in search bar would redirect user to explorer page with a new empty tab
+* Actions - Event Explorer
+    * Click ‘Event explorer’ in the dropdown list of actions would redirect user to explorer page
+* Actions - Delete
+    * Check saved queries and(or) saved visualizations then click delete in dropdown list of actions is expected to delete selected saved objects’
+* Actions - Add Samples
+    * Click ‘add samples’ in the dropdown list of actions is expected to add 9 sample saved queries and visualizations, the newly added samples is expected to shop up in Queries and Visualizations table
+
+### Explorer
+
+* Add new tabs
+
+    * Click ’add new‘ button is expected to add top level tabs
+    * Redirections from clicking history links is expected to 
+        * create new tab if there’s already tab with searched data
+        * populate the the first empty tab
+    * Redirections from clicking ‘new query’ in home page would always create new tab
+
+* Close tabs
+
+    * Close unselected tab should close that tab only, and not change the current selected tab
+    * Click ‘add new’ to add new tabs and click on any tab before the last created tab, then close that tab. It is expected to close the current tab properly, and newly selected tab is expected to be one tab before it if there’s any existing tabs or the immediate tab comes after the deleted one
+    * It is expected to be not able to close a tab when there’s only one tab left, and user will be prompt with a toast message
+
+* Query Saving
+
+    * Saves a query on event tab of explorer page is expected to create a new saved query. The user should see this new saved query in Queries and Visualizations table.
+    * Saves a visualization on visualization tab of explorer page is expected to create a new saved visualization.  The user should see this new saved Visualization Queries and Visualizations table on event home should display this new saved visualization
+    * Saves a visualization to existing panels
+* Sidebar
+    * Search fields
+    * Toggle fields between selected and available fields categories
+    * Override timestamp
+        * Click on a timestamp field to override timestamp is expected to create a new saved, default timestamp for this index
+* Count distribution
+    * Change time interval
+    * Display event counts
+* Visualization tab
+    * Switch visualizations from dropdown list
+* Data Grid
+    * Expand/collapse a data entry
+
+## 2. Custom panels
+
+### Home Table
+
+* Check panel name validity
+* Create and open a new panel
+* Duplicate and rename a panel
+* Search an existing panel
+* Delete panels
+
+### Create Visualization
+
+* Create two visualizations in events explorer
+
+### Panel View
+
+* Move to test panel
+* Duplicate using panel action
+* Rename using panel action
+* Change date filter 
+* Add existing visualizations
+* Add ppl filter to the panel
+* Drag and Drop Visualization in edit mode 
+* Resize a Visualization in edit mode 
+* Delete a Visualization in edit mode 
+* Duplicate a Visualization
+* Replace a Visualization
+* Create a new Visualization and directly add to an existing panel
+* Edit a Visualization and check the change in panels
+
+### Clean Up
+
+* Add Samples 
+* Verify sample visualization names in sample panel
+* Delete All Visualization from event analytics
+* Delete all Panels 
+
+## 3. Notebooks
+
+* Displays error toast for invalid notebook name
+* Creates a notebook and redirects to the notebook
+* Duplicates and renames a notebook
+* Searches existing notebooks
+* Deletes notebooks
+* Create in-context PDF report from notebook
+* Create in-context PNG report from notebook
+* Create on-demand report definition from context menu
+* Goes into a notebook and creates paragraphs
+* Renders markdown
+* Shows output message
+* Renders input only mode
+* Renders output only mode
+* Duplicates paragraphs
+* Adds a dashboards visualization paragraph
+* Adds an observability visualization paragraph
+* Adds a SQL query paragraph
+* Adds a PPL query paragraph
+* Clears outputs
+* Runs all paragraphs
+* Adds paragraph to top and bottom
+* Moves paragraphs
+* Duplicates and renames the notebook
+* Deletes paragraphs
+* Deletes notebook
+
+## 4. Trace analytics
+
+### Dashboard
+
+* Indexes test data
+* Renders empty state
+* Renders the dashboard table
+* Adds the percentile filters
+* Opens latency trend popover
+* Redirects to traces table with filter
+* Renders service map
+* Renders plots
+
+### Service
+
+* Renders empty state
+* Renders the services table
+* Searches correctly
+* Renders service view empty state
+* Renders service view
+* Renders spans data grid, flyout, filters
+
+### Trace
+
+* Renders empty state
+* Renders the traces table
+* Searches correctly
+* Renders the trace view
+* Renders data grid, flyout and filters
+
diff --git a/.cypress/integration/1_event_analytics.spec.js b/.cypress/integration/1_event_analytics.spec.js
new file mode 100644
index 0000000000..39b207ff9b
--- /dev/null
+++ b/.cypress/integration/1_event_analytics.spec.js
@@ -0,0 +1,1021 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+import {
+  delay,
+  TEST_QUERIES,
+  TESTING_PANEL,
+  SAVE_QUERY1,
+  SAVE_QUERY2,
+  SAVE_QUERY3,
+  SAVE_QUERY4,
+  querySearch,
+  YEAR_TO_DATE_DOM_ID,
+  landOnEventHome,
+  landOnEventExplorer,
+  landOnEventVisualizations,
+  landOnPanels,
+  renderPieChart,
+  renderLineChartForDataConfig,
+  renderDataConfig,
+  aggregationValues,
+  DataConfigLineChart,
+  renderGaugeChart,
+} from '../utils/event_analytics/constants';
+import { supressResizeObserverIssue, COMMAND_TIMEOUT_LONG } from '../utils/constants';
+import { clearQuerySearchBoxText } from '../utils/event_analytics/helpers';
+
+const renderHistogramChart = () => {
+  querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+    .type('Histogram')
+    .type('{enter}');
+  cy.wait(delay);
+  cy.get('g.draglayer.cursor-crosshair').should('exist');
+  cy.get('#configPanel__panelOptions .euiFieldText').click().type('Histogram chart');
+  cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]')
+    .click()
+    .type('This is the description for Histogram chart');
+  cy.get('.euiIEFlexWrapFix').eq(1).contains('Chart Styles').should('exist');
+  cy.get('.euiFormLabel.euiFormRow__label').eq(2).contains('Bucket Size');
+  cy.get('.euiFieldNumber').eq(0).type('4');
+  cy.get('.euiFormLabel.euiFormRow__label').eq(3).contains('Bucket Offset');
+  cy.get('.euiFieldNumber').eq(0).type('6');
+};
+
+const vis_name_sub_string = Math.floor(Math.random() * 100);
+
+const saveVisualizationAndVerify = () => {
+  cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+  cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click();
+  cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click();
+  cy.get(
+    '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]'
+  )
+    .eq(0)
+    .click();
+  cy.get('.euiPopover__panel input')
+    .eq(1)
+    .type(`Test visualization` + vis_name_sub_string);
+  cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+  cy.wait(delay);
+  cy.get('.euiHeaderBreadcrumbs a').eq(1).click();
+  cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input')
+    .eq(0)
+    .type(`Test visualization` + vis_name_sub_string)
+    .type('{enter}');
+  cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click();
+};
+
+const deleteVisualization = () => {
+  cy.get('a[href = "#/event_analytics"]').click();
+  cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input')
+    .eq(0)
+    .type(`Test visualization`)
+    .type('{enter}');
+  cy.get('input[data-test-subj = "checkboxSelectAll"]').click();
+  cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click();
+  cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click();
+  cy.get('input[placeholder = "delete"]').clear().type('delete');
+  cy.get('button[data-test-subj = "popoverModal__deleteButton"]').click();
+  cy.get('.euiToastHeader').should('exist');
+};
+
+describe('Adding sample data and visualization', () => {
+  it('Adds sample flights data for event analytics', () => {
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`);
+    cy.get('div[data-test-subj="sampleDataSetCardflights"]')
+      .contains(/(Add|View) data/)
+      .click();
+    cy.wait(delay);
+  });
+});
+
+describe('Has working breadcrumbs', () => {
+  it('Redirect to correct page on breadcrumb click', () => {
+    landOnEventExplorer();
+    cy.get('.euiBreadcrumb[href="#/event_analytics/explorer"]').contains('Explorer').click();
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('exist');
+    cy.get('.euiBreadcrumb[href="#/event_analytics"]').contains('Event analytics').click();
+    cy.get('.euiTitle').contains('Event analytics').should('exist');
+    cy.get('.euiBreadcrumb[href="observability-dashboards#/"]').contains('Observability').click();
+    cy.get('.euiTitle').contains('Event analytics').should('exist');
+  });
+});
+
+describe('Search a query on event home', () => {
+  it('Search a query and redirect to explorer to display query output', () => {
+    landOnEventHome();
+
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[0].query);
+    cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
+    cy.get('[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]').click();
+    cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click();
+    cy.window()
+      .its('store')
+      .invoke('getState')
+      .then((state) => {
+        expect(Object.values(state.queries)[0]['rawQuery'].trim()).equal(TEST_QUERIES[0].query);
+        expect(Object.values(state.queries)[0]['selectedDateRange'][0]).equal('now/y');
+        expect(Object.values(state.queries)[0]['selectedDateRange'][1]).equal('now');
+      });
+
+    cy.url().should('contain', '#/event_analytics/explorer');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').contains(TEST_QUERIES[0].query);
+  });
+});
+
+describe('Open flyout for a data row to see details', () => {
+  before(() => {
+    landOnEventExplorer();
+    clearQuerySearchBoxText('searchAutocompleteTextArea');
+    querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM);
+  });
+
+  it('Should be able to open flyout and see data, json and traces', () => {
+    cy.get('[data-test-subj="docTable"] tbody tr button.euiButtonIcon').first().click();
+    supressResizeObserverIssue();
+    cy.get('.observability-flyout').should('exist');
+    cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content')
+      .contains('Table')
+      .should('be.visible');
+    cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content')
+      .contains('JSON')
+      .should('be.visible');
+    cy.get('.observability-flyout .osdDocViewer .euiTabs span.euiTab__content')
+      .contains('Traces')
+      .should('be.visible');
+  });
+
+  it('Should be able to see srrounding docs', () => {
+    cy.get('.observability-flyout span.euiButton__text')
+      .contains('View surrounding events')
+      .should('be.visible')
+      .click();
+    cy.get('.observability-flyout #surroundingFyout')
+      .contains('View surrounding events')
+      .should('exist');
+  });
+});
+
+describe('Add/delete/switch explorer top level tabs', () => {
+  before(() => {
+    landOnEventExplorer();
+  });
+
+  it('Add a new tab', () => {
+    cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+      .find('button.euiTab')
+      .then((lists) => {
+        const initialLength = Cypress.$(lists).length;
+        cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
+        cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+          .find('button.euiTab')
+          .should('have.length', initialLength + 1);
+      });
+  });
+
+  it('Click to switch to anther tab', () => {
+    cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
+    cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+      .find('button.euiTab')
+      .first()
+      .click();
+    cy.wait(delay);
+    supressResizeObserverIssue();
+    cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+      .find('button.euiTab')
+      .first()
+      .should('have.class', 'euiTab-isSelected');
+  });
+
+  it('Close a tab', () => {
+    cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
+    cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+      .find('button.euiTab')
+      .then((lists) => {
+        const initialLength = Cypress.$(lists).length;
+        cy.get('[data-test-subj="eventExplorer__topLevelTabbing"] button.euiTab')
+          .first()
+          .find('[data-test-subj="eventExplorer__tabClose"]')
+          .click();
+        cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+          .find('button.euiTab')
+          .should('have.length', initialLength - 1);
+      });
+  });
+
+  it('Close current selected tab', () => {
+    cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
+    cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
+    cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+      .find('button.euiTab')
+      .then((lists) => {
+        const initialLength = Cypress.$(lists).length;
+        cy.get('[data-test-subj="eventExplorer__topLevelTabbing"] button.euiTab').eq(1).click();
+        cy.get('button.euiTab-isSelected [data-test-subj="eventExplorer__tabClose"]').click();
+        cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+          .find('button.euiTab')
+          .should('have.length', initialLength - 1);
+      });
+  });
+
+  it('Close another unselected tab', () => {
+    cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
+    cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
+    cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+      .find('button.euiTab')
+      .then((lists) => {
+        const initialLength = Cypress.$(lists).length;
+        cy.get('button.euiTab').first().find('[data-test-subj="eventExplorer__tabClose"]').click();
+        cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+          .find('button.euiTab')
+          .should('have.length', initialLength - 1);
+      });
+  });
+});
+
+describe('Click actions', () => {
+  beforeEach(() => {
+    landOnEventHome();
+  });
+
+  it('Actions - click event explorer', () => {
+    cy.get('[data-test-subj="eventHomeAction"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="eventHomeAction__explorer"]').click();
+    cy.url().should('contain', '#/event_analytics/explorer');
+  });
+
+  it('Actions - add sample data', () => {
+    cy.get('[data-test-subj="eventHomeAction"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="eventHomeAction__addSamples"]').click();
+    cy.get('[data-test-subj="confirmModalConfirmButton"]').click();
+    cy.wait(delay * 4);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+  });
+
+  it('Actions - delete saved queries', () => {
+    cy.get('[data-test-subj^="checkboxSelectRow"]').first().check();
+    cy.get('[data-test-subj="eventHomeAction"]').click();
+    cy.get('[data-test-subj="eventHomeAction__delete"]').click();
+    cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete');
+    cy.get('[data-test-subj="popoverModal__deleteButton"').click();
+    cy.wait(delay);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+  });
+});
+
+describe('Saves a query on explorer page', () => {
+  it('Saves a visualization on visualization tab of explorer page', () => {
+    landOnEventExplorer();
+    querySearch(TEST_QUERIES[1].query, TEST_QUERIES[1].dateRangeDOM);
+    supressResizeObserverIssue();
+    cy.get('button[id="main-content-vis"]').contains('Visualizations').click();
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]')
+      .focus()
+      .type(SAVE_QUERY2, { force: true });
+
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+    cy.wait(delay * 2);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+
+    landOnEventHome();
+
+    cy.get('[data-test-subj="eventHome__savedQueryTableName"]').first().contains(SAVE_QUERY2);
+  });
+
+  it('Saves a visualization to an existing panel', () => {
+    landOnPanels();
+
+    cy.get('[data-test-subj="customPanels__createNewPanels"]').click();
+    cy.get('input.euiFieldText').type(TESTING_PANEL);
+    cy.get('.euiButton__text')
+      .contains(/^Create$/)
+      .click();
+    cy.wait(delay);
+    landOnEventExplorer();
+    querySearch(TEST_QUERIES[1].query, TEST_QUERIES[1].dateRangeDOM);
+    supressResizeObserverIssue();
+    cy.get('button[id="main-content-vis"]', { timeout: COMMAND_TIMEOUT_LONG })
+      .contains('Visualizations')
+      .click();
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]')
+      .focus()
+      .type(SAVE_QUERY3, { force: true });
+    cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').type(TESTING_PANEL);
+    cy.get(`input[value="${TESTING_PANEL}"]`).click();
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click({ force: true });
+    cy.wait(delay);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+  });
+
+  it('Saves a query on event tab of explorer page', () => {
+    landOnEventExplorer();
+    querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM);
+
+    cy.get('.tab-title').contains('Events').click();
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]').type(SAVE_QUERY1);
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+    cy.wait(delay * 2);
+
+    cy.get('.euiToastHeader__title', { timeout: COMMAND_TIMEOUT_LONG })
+      .contains('successfully')
+      .should('exist');
+
+    landOnEventHome();
+
+    cy.get('[data-test-subj="eventHome__savedQueryTableName"]').first().contains(SAVE_QUERY1);
+  });
+
+  it('Click on a saved query from event analytics home', () => {
+    landOnEventExplorer();
+    querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM);
+
+    cy.get('.tab-title').contains('Events').click();
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]').type(SAVE_QUERY4);
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+    cy.wait(delay * 2);
+    cy.get('.euiToastHeader__title', { timeout: COMMAND_TIMEOUT_LONG })
+      .contains('successfully')
+      .should('exist');
+
+    landOnEventHome();
+
+    cy.get('[data-test-subj="eventHome__savedQueryTableName"]')
+      .first()
+      .contains(SAVE_QUERY4)
+      .click();
+
+    cy.url().should('contain', '#/event_analytics/explorer');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]', {
+      timeout: COMMAND_TIMEOUT_LONG,
+    }).contains(TEST_QUERIES[0].query);
+  });
+});
+
+describe('Override timestamp for an index', () => {
+  it('Click override button to override default timestamp', () => {
+    landOnEventExplorer();
+    clearQuerySearchBoxText('searchAutocompleteTextArea');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[2].query);
+    cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click();
+    cy.get('.tab-title').contains('Events').click();
+    cy.get('[data-test-subj="eventExplorer__overrideDefaultTimestamp"]').click();
+    cy.wait(delay);
+
+    cy.get('[data-attr-field="utc_time"] [data-test-subj="eventFields__default-timestamp-mark"')
+      .contains('Default Timestamp')
+      .should('exist');
+    cy.get(
+      '[data-attr-field="timestamp"] [data-test-subj="eventFields__default-timestamp-mark"'
+    ).should('not.exist');
+  });
+});
+
+describe('Toggle sidebar fields', () => {
+  it('Toggle fields between available and selected section', () => {
+    landOnEventExplorer();
+    querySearch(TEST_QUERIES[0].query, YEAR_TO_DATE_DOM_ID);
+    cy.get('[data-test-subj="fieldToggle-AvgTicketPrice"]').click();
+    cy.get('[data-test-subj="field-AvgTicketPrice"]').should('exist');
+    cy.get('[data-test-subj="docTable"]').find('th').contains('_source').should('not.exist');
+    cy.get('[data-test-subj="fieldToggle-AvgTicketPrice"]').click();
+    cy.get('[data-test-subj="field-AvgTicketPrice"]').should('exist');
+    cy.get('[data-test-subj="docTable"]').find('th').contains('_source').should('exist');
+  });
+});
+
+describe('Search fields in sidebar', () => {
+  it('Search a field', () => {
+    landOnEventExplorer();
+    querySearch(TEST_QUERIES[0].query, YEAR_TO_DATE_DOM_ID);
+    cy.get('[data-test-subj="eventExplorer__sidebarSearch"]').type('A');
+    cy.get('[data-test-subj="field-Cancelled"]').should('not.exist');
+    cy.get('[data-test-subj="field-AvgTicketPrice"]').should('exist');
+    cy.get('[data-test-subj="field-DestAirportID"]').should('exist');
+    cy.get('[data-test-subj="field-OriginAirportID"]').should('exist');
+  });
+});
+
+describe('Delete saved objects', () => {
+  it('Delete visualizations/querys from event analytics', () => {
+    landOnEventHome();
+    cy.get('[data-test-subj="tablePaginationPopoverButton"]').click();
+    cy.get('.euiContextMenuItem__text').contains('50 rows').click();
+    cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').click();
+    cy.get('.euiButton__text').contains('Actions').click();
+    cy.get('.euiContextMenuItem__text').contains('Delete').click();
+    cy.get('button.euiButton--danger').should('be.disabled');
+    cy.get('input.euiFieldText[placeholder="delete"]').type('delete');
+    cy.get('button.euiButton--danger').should('not.be.disabled');
+    cy.get('.euiButton__text').contains('Delete').click();
+    cy.get('.euiTextAlign').contains('No Queries or Visualizations').should('exist');
+  });
+});
+
+describe('Click to view field insights', () => {
+  beforeEach(() => {
+    landOnEventExplorer();
+    querySearch(TEST_QUERIES[2].query, YEAR_TO_DATE_DOM_ID);
+  });
+
+  it('Click a numerical field to view field insights', () => {
+    cy.get('[data-test-subj="field-bytes-showDetails"]').click();
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
+      .contains('Top values')
+      .should('exist');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
+      .contains('Rare values')
+      .should('exist');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
+      .contains('Average overtime')
+      .should('exist');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
+      .contains('Maximum overtime')
+      .should('exist');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
+      .contains('Minimum overtime')
+      .should('exist');
+  });
+
+  it('Click a non-numerical field to view insights', () => {
+    cy.get('[data-test-subj="field-host-showDetails"]').click();
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
+      .contains('Top values')
+      .should('exist');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
+      .contains('Rare values')
+      .should('exist');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
+      .contains('Average overtime')
+      .should('not.exist');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
+      .contains('Maximum overtime')
+      .should('not.exist');
+    cy.get('[data-test-subj="sidebarField__fieldInsights"] button')
+      .contains('Minimum overtime')
+      .should('not.exist');
+  });
+});
+
+describe('Switch on and off livetail', () => {
+  it('Switch on and off in live tail', () => {
+    landOnEventExplorer();
+    cy.wait(delay);
+
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query);
+
+    cy.get('[data-test-subj=eventLiveTail]').click();
+    cy.get('[data-test-subj=eventLiveTail__delay10s]').click();
+    cy.wait(delay * 2);
+    cy.get('.euiToastHeader__title').contains('On').should('exist');
+
+    cy.get('[data-test-subj=eventLiveTail__off').click();
+    cy.wait(delay * 2);
+    cy.get('.euiToastHeader__title').contains('Off').should('exist');
+  });
+});
+
+describe('Live tail stop automatically', () => {
+  it('Moving to other tab should stop live tail automatically', () => {
+    landOnEventExplorer();
+    clearQuerySearchBoxText('searchAutocompleteTextArea');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').type(TEST_QUERIES[1].query);
+    cy.get('[data-test-subj=eventLiveTail]').click();
+    cy.get('[data-test-subj=eventLiveTail__delay10s]').click();
+    cy.get('.euiToastHeader__title').contains('On').should('exist');
+  });
+
+  it('Add a new tab', () => {
+    cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+      .find('button.euiTab')
+      .then((lists) => {
+        const initialLength = Cypress.$(lists).length;
+        cy.get('[data-test-subj="eventExplorer__addNewTab"]').click();
+        cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+          .find('button.euiTab')
+          .should('have.length', initialLength + 1);
+      });
+  });
+
+  it('Click to switch to another tab', () => {
+    cy.get('[data-test-subj="eventExplorer__addNewTab"]', {
+      timeout: COMMAND_TIMEOUT_LONG,
+    }).click();
+    cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]', { timeout: COMMAND_TIMEOUT_LONG })
+      .find('button.euiTab')
+      .first()
+      .click();
+    supressResizeObserverIssue();
+
+    cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+      .find('button.euiTab')
+      .first()
+      .should('have.class', 'euiTab-isSelected');
+  });
+
+  it('Close current selected tab', () => {
+    cy.get('[data-test-subj="eventExplorer__addNewTab"]', {
+      timeout: COMMAND_TIMEOUT_LONG,
+    }).click();
+    cy.get('[data-test-subj="eventExplorer__addNewTab"]', {
+      timeout: COMMAND_TIMEOUT_LONG,
+    }).click();
+    cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+      .find('button.euiTab')
+      .then((lists) => {
+        const initialLength = Cypress.$(lists).length;
+        cy.get('[data-test-subj="eventExplorer__topLevelTabbing"] button.euiTab').eq(1).click();
+        cy.get('button.euiTab-isSelected [data-test-subj="eventExplorer__tabClose"]').click();
+        supressResizeObserverIssue();
+        cy.get('[data-test-subj="eventExplorer__topLevelTabbing"]')
+          .find('button.euiTab')
+          .should('have.length', initialLength - 1);
+      });
+  });
+
+  it('Live tail should be stopped', () => {
+    cy.get('.euiButton__text').contains('Live');
+  });
+});
+
+describe.skip('Renders bar charts', () => {
+  beforeEach(() => {
+    landOnEventVisualizations();
+    clearQuerySearchBoxText('searchAutocompleteTextArea');
+  });
+
+  it('Renders vertical bar chart', () => {
+    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
+    cy.get(
+      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
+    ).click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="comboBoxOptionsList "] span').contains('Bar').click();
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').first().click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('host').click();
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(1).click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click();
+    cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').first().click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Vertical').click();
+    cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').last().click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Group').click();
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.wait(delay * 2);
+    cy.get(
+      'g.xaxislayer-above > g.xtick text[data-unformatted|="artifacts.opensearch.org"]'
+    ).should('exist');
+  });
+
+  it('Renders horiztontal bar chart', () => {
+    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
+    cy.get(
+      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
+    ).click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Bar').click();
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').first().click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click();
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(1).click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('host').click();
+    cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').first().click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Horizontal').click();
+    cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').eq(1).click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Group').click();
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.wait(delay * 2);
+    cy.get(
+      'g.yaxislayer-above > g.ytick text[data-unformatted|="artifacts.opensearch.org"]'
+    ).should('exist');
+  });
+});
+
+describe.skip('Renders line charts', () => {
+  beforeEach(() => {
+    landOnEventVisualizations();
+  });
+
+  it('Renders line chart with threshold', () => {
+    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
+    cy.get(
+      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
+    ).click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Line').click();
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').first().click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('host').click();
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').eq(1).click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click();
+    cy.get('#configPanel__chart_options [data-test-subj="comboBoxInput"]').click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Lines').click();
+    cy.get('#configPanel__Thresholds span').contains('+ Add threadshold').click();
+    cy.get('[data-test-subj="nameFieldText"]').type('Max');
+    cy.get('[data-test-subj="valueFieldNumber"]').type(3800);
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.wait(delay * 2);
+    cy.get('g.text > g.textpoint text[data-unformatted|="Max"]').should('exist');
+    cy.get(
+      'g.xaxislayer-above > g.xtick text[data-unformatted|="artifacts.opensearch.org"]'
+    ).should('exist');
+  });
+});
+
+describe.skip('Renders pie charts', () => {
+  beforeEach(() => {
+    landOnEventVisualizations();
+    clearQuerySearchBoxText('searchAutocompleteTextArea');
+  });
+
+  it('Renders pie chart', () => {
+    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
+    cy.get(
+      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
+    ).click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click();
+    cy.wait(delay);
+    cy.get('g.pielayer').should('exist');
+  });
+});
+
+describe.skip('Renders heatmap chart', () => {
+  beforeEach(() => {
+    landOnEventVisualizations();
+    clearQuerySearchBoxText('searchAutocompleteTextArea');
+  });
+
+  it('Renders heatmap chart with different z-axes', () => {
+    querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
+    cy.get(
+      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
+    ).click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Heatmap').click();
+    cy.wait(delay * 2);
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('count()').click();
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.get('g.g-gtitle text[data-unformatted|="count()"]').should('exist');
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]').click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('avg(bytes)').click();
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.wait(delay * 2);
+    cy.get('g.g-gtitle text[data-unformatted|="avg(bytes)"]').should('exist');
+  });
+});
+
+describe.skip('Renders markdown chart', () => {
+  it('Renders markdown chart with test title', () => {
+    landOnEventVisualizations();
+    clearQuerySearchBoxText('searchAutocompleteTextArea');
+    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
+    cy.get(
+      '[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]'
+    ).click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Text').click();
+    cy.get('[data-test-subj="workspace__viz_markdown"] h2').contains('Text').should('exist');
+    cy.get('textarea.euiMarkdownEditorTextArea').type('## testing title');
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="workspace__viz_markdown"] h2')
+      .contains('testing title')
+      .should('exist');
+  });
+});
+
+describe.skip('Renders data view', () => {
+  it('Switch views between data table and visualization workspace', () => {
+    landOnEventVisualizations();
+    clearQuerySearchBoxText('searchAutocompleteTextArea');
+    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
+    cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click();
+    cy.get('[data-test-subj="workspace__dataTable"]').should('exist');
+    cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click();
+    cy.get('[data-test-subj="workspace__dataTable"]').should('not.exist');
+  });
+});
+
+describe.skip('Renders chart and verify Toast message if X-axis and Y-axis values are empty', () => {
+  beforeEach(() => {
+    landOnEventVisualizations();
+  });
+  it('Renders chart, clear X-axis and Y-axis value and click on Apply button, Toast message should display with error message', () => {
+    querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
+    cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+      .type('Bar')
+      .type('{enter}');
+    cy.wait(delay);
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]')
+      .eq(0)
+      .click({ force: true });
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(0).click();
+    cy.wait(delay);
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]').click({
+      multiple: true,
+    });
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(1).click();
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]')
+      .eq(0)
+      .should('have.value', '');
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]')
+      .eq(1)
+      .should('have.value', '');
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.get('[data-test-subj="euiToastHeader"]')
+      .contains('Invalid value options configuration selected.')
+      .should('exist');
+  });
+
+  it('Renders chart, clear X-axis and Y-axis value and try to save visulization, Toast message should display with error message', () => {
+    querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
+    cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+      .type('Bar')
+      .type('{enter}');
+    cy.wait(delay);
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]')
+      .eq(0)
+      .click({ force: true });
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxToggleListButton"]').eq(0).click();
+    cy.wait(delay);
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxClearButton"]').click({
+      multiple: true,
+    });
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]')
+      .eq(0)
+      .should('have.value', '');
+    cy.get('#configPanel__value_options [data-test-subj="comboBoxInput"]')
+      .eq(1)
+      .should('have.value', '');
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+    cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click();
+    cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click();
+    cy.get(
+      '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]'
+    )
+      .eq(0)
+      .click();
+    cy.get('.euiPopover__panel input').eq(1).type(`Test visulization_`);
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+    cy.get('[data-test-subj="euiToastHeader"]')
+      .contains('Invalid value options configuration selected.')
+      .should('exist');
+  });
+});
+
+describe.skip('Render Table View', () => {
+  before(() => {
+    landOnEventVisualizations();
+    clearQuerySearchBoxText('searchAutocompleteTextArea');
+    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
+    cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').click();
+  });
+
+  it('Switch visualization for table view and verify table data', () => {
+    cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').should('exist');
+    cy.get('.ag-header-cell-text').contains('DestCountry').should('exist');
+    cy.get('.ag-header-cell-text').contains('DestCityName').should('exist');
+    cy.get('.ag-header-cell-text').contains('Carrier').should('exist');
+  });
+
+  it('Switch visualization for table view and change data table density', () => {
+    cy.get('.euiButtonEmpty__text').contains('Density').click();
+    cy.get('.euiButtonIcon.euiButtonIcon--primary.euiButtonIcon--xSmall').eq(1).click();
+    cy.get('.euiButtonIcon.euiButtonIcon--primary.euiButtonIcon--xSmall').eq(2).click();
+  });
+
+  it('Switch visualization for table view and show and hide column', () => {
+    cy.get('.euiButtonEmpty__text').contains('Columns').click();
+    cy.get('.euiSwitch__label').contains('DestCountry').click();
+    cy.get('.ag-header-cell-text').contains('DestCountry').should('not.exist');
+    cy.get('.euiSwitch__label').contains('Carrier').click();
+    cy.get('.ag-header-cell-text').contains('Carrier').should('not.exist');
+    cy.get('.euiSwitch__label').contains('DestCountry').click();
+    cy.get('.ag-header-cell-text').contains('DestCountry').should('exist');
+  });
+
+  it('Switch visualization for table view and see data in full screen', () => {
+    cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').should('exist');
+    cy.get('.ag-header-cell-text').contains('DestCountry').should('exist');
+    cy.get('.ag-header-cell-text').contains('DestCityName').should('exist');
+    cy.get('.ag-header-cell-text').contains('Carrier').should('exist');
+    cy.get('.euiButtonEmpty__text').contains('Full screen').click();
+    cy.wait(delay);
+    cy.get('body').type('{esc}');
+    cy.wait(delay);
+  });
+
+  it('Switch visualization for table view and sort the column data', () => {
+    cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').click();
+    cy.get('.ag-cell-value').contains('125.49737').should('exist');
+    cy.get('.ag-header-cell-text').contains('max(AvgTicketPrice)').click();
+    cy.get('.ag-cell-value').contains('1199.729').should('exist');
+    cy.get('.ag-header-cell-text').contains('DestCountry').click();
+    cy.get('.ag-cell-value').contains('AE').should('exist');
+  });
+
+  it('Switch visualization for table view and verify pagination link', () => {
+    cy.get('[aria-label="Next page"]').click();
+    cy.get('.ag-cell-value').contains('Vienna').should('exist');
+    cy.get('[aria-label="Previous page"]').click();
+    cy.get('.ag-cell-value').contains('Dubai').should('exist');
+    cy.get('[aria-label="Page 4"]').contains('4').click();
+    cy.get('.ag-cell-value').contains('Edmonton').should('exist');
+  });
+
+  it('Switch visualization for table view and rows per page data', () => {
+    cy.get('.euiButtonEmpty__text').eq('6').click();
+    cy.get('.euiContextMenuItem__text').eq(1).click();
+  });
+});
+
+describe.skip('Render Time series chart/Line chart and verify Data configurations UI ', () => {
+  it('Render line chart and verify Data Configuration Panel', () => {
+    renderLineChartForDataConfig();
+    DataConfigLineChart();
+  });
+});
+
+describe.skip('Renders Data Configurations section for Pie chart', () => {
+  beforeEach(() => {
+    landOnEventVisualizations();
+  });
+
+  it('Renders Dimensions and Metrics under Data Configurations for Pie chart', () => {
+    renderPieChart();
+    renderDataConfig();
+  });
+
+  it('Validate "Add" and "X" buttons', () => {
+    renderPieChart();
+    cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
+    cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').click();
+    cy.get('.euiFormRow__fieldWrapper .euiComboBox').eq(3).click();
+    cy.get('.euiComboBoxOption__content').eq(2).click();
+    cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(4).click();
+    cy.get('.euiComboBoxOption__content').eq(1).click();
+    cy.get('.euiFieldText[placeholder="Custom label"]').eq(1).type('Demo field');
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').eq(1).click();
+    cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').should('exist');
+  });
+
+  it('Verify drop down values for Aggregation', () => {
+    renderPieChart();
+    cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
+    cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('Dimensions').should('exist');
+    cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation');
+    cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click();
+    aggregationValues.forEach(function (value) {
+      cy.get('.euiComboBoxOption__content').contains(value);
+    });
+  });
+
+  it('Collapsible mode for Data Configuration panel', () => {
+    renderPieChart();
+    cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
+    cy.get('.euiResizableButton.euiResizableButton--horizontal').eq(1).click();
+    cy.get('[data-test-subj="panel-1-toggle"]').click();
+    cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist');
+  });
+});
+
+describe.skip('Renders Histogram chart', () => {
+  beforeEach(() => {
+    landOnEventVisualizations();
+  });
+
+  it('Renders Histogram chart and save visualization', () => {
+    renderHistogramChart();
+    cy.get('.euiFlexItem.euiFlexItem--flexGrowZero .euiButton__text').eq(2).click();
+    cy.wait(delay);
+    saveVisualizationAndVerify();
+  });
+
+  it('Delete Visualization for Histogram chart from list of saved Visualizations on Event analytics page', () => {
+    deleteVisualization();
+  });
+
+  it('Renders Histogram chart, add value parameters and verify Reset button click is working', () => {
+    renderHistogramChart();
+    cy.get('[data-test-subj="visualizeEditorResetButton"]').click();
+  });
+});
+
+describe.skip('Render Gauge Chart and verify if data gets render', () => {
+  it('Render gauge chart and verify by default no data gets render', () => {
+    renderGaugeChart();
+    cy.get('.main-svg').contains('BeatsWest').should('not.exist');
+  });
+
+  it('Render gauge chart and verify data gets render after click on update chart', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.main-svg').contains('BeatsWest').should('exist');
+  });
+});
+
+describe.skip('Render Gauge Chart and work with chart styles', () => {
+  it('Render gauge chart and change orientation to vertical', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.euiButton__text').contains('Vertical').click();
+    cy.get('.euiButton__text').contains('Preview').click();
+  });
+
+  it('Render gauge chart and change title size then verify the update on chart', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).type('30');
+    cy.get('.euiButton__text').contains('Preview').click();
+  });
+
+  it('Render gauge chart and change value size then verify the update on chart', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type('20');
+    cy.get('.euiButton__text').contains('Preview').click();
+  });
+});
+
+describe.skip('Render Gauge Chart and work with threshold', () => {
+  it('Render gauge chart and add threshold then verify by default the threshold is not seen', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.euiButton__text').contains('+ Add threshold').click();
+    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
+    cy.get('.euiButton__text').contains('Preview').click();
+    cy.get('[data-unformatted="Gauge Threshold"]').should('not.be.visible');
+  });
+
+  it('Render gauge chart and add threshold then verify the threshold label are seen after show threshold button enabled ', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.euiButton__text').contains('+ Add threshold').click();
+    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
+    cy.get('.euiSwitch__label').contains('Show threshold labels').click();
+    cy.get('.euiButton__text').contains('Preview').click();
+    cy.get('[data-unformatted="Gauge Threshold"]').should('be.visible');
+  });
+
+  it('Render gauge chart and add threshold then verify the threshold marker are seen after show threshold button enabled ', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.euiButton__text').contains('+ Add threshold').click();
+    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
+    cy.get('.euiSwitch__label').contains('Show threshold markers').click();
+    cy.get('.euiButton__text').contains('Preview').click();
+    cy.get('path[style*="rgb(252, 5, 5)"]').eq(1).should('exist');
+    cy.get('.bg-arc').find('path[style*="rgb(252, 5, 5)"]').should('have.length', 4);
+  });
+});
+
+describe.skip('Render gauge chart and verify if reset works properly', () => {
+  it('Render gauge chart with all feild data then click on reset and verify reset works properly', () => {
+    renderGaugeChart();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('input[placeholder="Title"]').type('Gauge Chart');
+    cy.get('textarea[placeholder="Description"]').type('Description For Gauge Chart');
+    cy.get('.euiButton__text').contains('Vertical').click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).type('30');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type('20');
+    cy.get('.euiButton__text').contains('+ Add threshold').click();
+    cy.get('[data-test-subj="nameFieldText"]').type('Gauge Threshold');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).type('50');
+    cy.get('.euiSwitch__label').contains('Show threshold labels').click();
+    cy.get('.euiSwitch__label').contains('Show threshold markers').click();
+    cy.get('.euiButton__text').contains('Preview').click();
+    cy.get('.euiButtonEmpty__text').contains('Reset').click();
+    cy.get('input[placeholder="Title"]').should('not.have.value', 'Gauge Chart');
+    cy.get('textarea[placeholder="Description"]').should(
+      'not.have.value',
+      'Description For Gauge Chart'
+    );
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).should('have.value', '');
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).should('have.value', '');
+    cy.get('button.euiSwitch__button[aria-checked="false"]')
+      .should('exist')
+      .should('have.length', 3);
+  });
+});
diff --git a/.cypress/integration/2_notebooks.spec.js b/.cypress/integration/2_notebooks.spec.js
new file mode 100644
index 0000000000..3ba071215e
--- /dev/null
+++ b/.cypress/integration/2_notebooks.spec.js
@@ -0,0 +1,556 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import {
+  delay,
+  TEST_NOTEBOOK,
+  MARKDOWN_TEXT,
+  SAMPLE_URL,
+  SQL_QUERY_TEXT,
+  PPL_QUERY_TEXT,
+  NOTEBOOK_TEXT,
+  OPENSEARCH_URL,
+} from '../utils/constants';
+
+import { SAMPLE_PANEL } from '../utils/panel_constants';
+
+import { skipOn } from '@cypress/skip-test';
+
+const moveToEventsHome = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/`);
+  cy.wait(delay * 3);
+};
+
+const moveToPanelHome = () => {
+  cy.visit(
+    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
+  );
+  cy.wait(delay * 3);
+};
+
+describe('Adding sample data and visualization', () => {
+  it('Adds sample flights data for visualization paragraph', () => {
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`);
+    cy.get('div[data-test-subj="sampleDataSetCardflights"]')
+      .contains(/(Add|View) data/)
+      .click();
+  });
+
+  it('Add sample observability data', () => {
+    moveToPanelHome();
+    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
+    cy.wait(100);
+    cy.get('.euiContextMenuItem__text').contains('Add samples').trigger('mouseover').click();
+    cy.wait(100 * 3);
+    cy.get('.euiModalHeader__title[data-test-subj="confirmModalTitleText"]')
+      .contains('Add samples')
+      .should('exist');
+    cy.wait(100);
+    cy.get('.euiButton__text').contains('Yes').trigger('mouseover').click();
+    cy.wait(100 * 5);
+    cy.route2('POST', '/addSamplePanels').as('addSamples');
+    cy.wait('@addSamples').then(() => {
+      cy.get('.euiTableCellContent').contains(SAMPLE_PANEL).should('exist');
+    });
+    cy.wait(100);
+  });
+});
+
+describe('Testing notebooks table', () => {
+  beforeEach(() => {
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/notebooks`);
+  });
+
+  it('Notebooks table empty state', () => {
+    cy.get('#notebookArea').contains('Notebooks (0)').should('exist');
+    cy.get('.euiTextAlign.euiTextAlign--center').contains('No notebooks');
+    cy.get('.euiButton__text').eq(2).contains('Create notebook');
+    cy.get('.euiButton__text').eq(3).contains('Add samples');
+  });
+
+  it('Displays error toast for invalid notebook name', () => {
+    cy.get('.euiButton__text').contains('Create notebook').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text')
+      .contains(/^Create$/)
+      .click();
+    cy.wait(delay);
+
+    cy.get('.euiToastHeader__title').contains('Invalid notebook name').should('exist');
+  });
+
+  it('Creates a notebook and redirects to the notebook', () => {
+    cy.get('.euiButton__text').contains('Create notebook').click();
+    cy.wait(delay);
+    cy.get('input.euiFieldText').type(TEST_NOTEBOOK);
+    cy.get('.euiButton__text')
+      .contains(/^Create$/)
+      .click();
+    cy.wait(delay);
+
+    cy.contains(TEST_NOTEBOOK).should('exist');
+  });
+
+  it('Duplicates and renames a notebook', () => {
+    cy.get('.euiCheckbox__input[title="Select this row"]').eq(0).click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Actions').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Duplicate').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Duplicate').click();
+    cy.wait(delay);
+
+    cy.get('.euiCheckbox__input[title="Select this row"]').eq(1).click();
+    cy.wait(delay);
+    cy.get('.euiCheckbox__input[title="Select this row"]').eq(0).click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Actions').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Rename').click();
+    cy.wait(delay);
+    cy.get('input.euiFieldText').type(' (rename)');
+    cy.get('.euiButton__text').contains('Rename').click();
+    cy.wait(delay);
+  });
+
+  it('Searches existing notebooks', () => {
+    cy.get('input.euiFieldSearch').type('this notebook should not exist');
+    cy.wait(delay);
+
+    cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
+
+    cy.get('.euiFormControlLayoutClearButton').click();
+    cy.wait(delay);
+    cy.get('input.euiFieldSearch').type(TEST_NOTEBOOK + ' (copy) (rename)');
+    cy.wait(delay);
+
+    cy.get('a.euiLink')
+      .contains(TEST_NOTEBOOK + ' (copy) (rename)')
+      .should('exist');
+  });
+
+  it('Notebooks table columns headers and pagination', () => {
+    cy.get('.euiTitle.euiTitle--small').contains('Notebooks').should('exist');
+    cy.get('.euiTableCellContent__text[title="Name"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Last updated"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Created"]').should('exist');
+    cy.get('[data-test-subj="tablePaginationPopoverButton"]').should('exist');
+  });
+
+  it('"Learn more" link under Notebooks header', () => {
+    cy.get('.euiTitle.euiTitle--small').contains('Notebooks');
+    cy.get('.euiTextColor.euiTextColor--subdued').contains(NOTEBOOK_TEXT);
+    cy.get('a.euiLink.euiLink--primary').contains('Learn more').click();
+    cy.get(`a[href="${OPENSEARCH_URL}"]`).should('exist');
+  });
+
+  it('Deletes notebooks', () => {
+    cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Actions').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Delete').click();
+    cy.wait(delay);
+
+    cy.get('button.euiButton--danger').should('be.disabled');
+
+    cy.get('input.euiFieldText[placeholder="delete"]').type('delete');
+    cy.get('button.euiButton--danger').should('not.be.disabled');
+    cy.get('.euiButton__text').contains('Delete').click();
+
+    cy.get('.euiTextAlign').contains('No notebooks').should('exist');
+
+    // keep a notebook for testing
+    cy.get('.euiButton__text').contains('Create notebook').click();
+    cy.wait(delay);
+    cy.get('input.euiFieldText').type(TEST_NOTEBOOK);
+    cy.get('.euiButton__text')
+      .contains(/^Create$/)
+      .click();
+    cy.wait(delay * 2);
+  });
+});
+
+describe('Test reporting integration if plugin installed', () => {
+  beforeEach(() => {
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/notebooks`);
+    cy.get('.euiTableCellContent').contains(TEST_NOTEBOOK).click();
+    cy.wait(delay * 3);
+    cy.get('body').then(($body) => {
+      skipOn($body.find('#reportingActionsButton').length <= 0);
+    });
+  });
+
+  it('Create in-context PDF report from notebook', () => {
+    cy.get('#reportingActionsButton').click();
+    cy.wait(delay);
+    cy.get('button.euiContextMenuItem:nth-child(1)').contains('Download PDF').click();
+    cy.get('#downloadInProgressLoadingModal').should('exist');
+  });
+
+  it('Create in-context PNG report from notebook', () => {
+    cy.get('#reportingActionsButton').click();
+    cy.wait(delay);
+    cy.get('button.euiContextMenuItem:nth-child(2)').contains('Download PNG').click();
+    cy.get('#downloadInProgressLoadingModal').should('exist');
+  });
+
+  it('Create on-demand report definition from context menu', () => {
+    cy.get('#reportingActionsButton').click();
+    cy.wait(delay);
+    cy.get('button.euiContextMenuItem:nth-child(3)').contains('Create report definition').click();
+    cy.wait(delay);
+    cy.location('pathname', { timeout: 60000 }).should('include', '/reports-dashboards');
+    cy.wait(delay);
+    cy.get('#reportSettingsName').type('Create notebook on-demand report');
+    cy.get('#createNewReportDefinition').click({ force: true });
+  });
+
+  it('View reports homepage from context menu', () => {
+    cy.get('#reportingActionsButton').click();
+    cy.wait(delay);
+    cy.get('button.euiContextMenuItem:nth-child(4)').contains('View reports').click();
+    cy.wait(delay);
+    cy.location('pathname', { timeout: 60000 }).should('include', '/reports-dashboards');
+  });
+});
+
+describe('Testing paragraphs', () => {
+  beforeEach(() => {
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/notebooks`);
+    cy.get('.euiTableCellContent').contains(TEST_NOTEBOOK).click();
+  });
+
+  it('Goes into a notebook and creates paragraphs', () => {
+    cy.get('.euiButton__text').contains('Add').click();
+    cy.wait(delay);
+
+    cy.get('.euiTextArea').should('exist');
+
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+    cy.get('.euiTextColor').contains('Input is required.').should('exist');
+    cy.get('.euiTextArea').clear();
+    cy.get('.euiTextArea').type(MARKDOWN_TEXT);
+    cy.wait(delay);
+
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+  });
+
+  it('Has working breadcrumbs', () => {
+    cy.get('.euiBreadcrumb').contains(TEST_NOTEBOOK).click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains(TEST_NOTEBOOK).should('exist');
+    cy.get('.euiBreadcrumb').contains('Notebooks').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Notebooks').should('exist');
+    cy.get('.euiBreadcrumb').contains('Observability').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Event analytics').should('exist');
+  });
+
+  it('Paragraph actions layout', () => {
+    cy.get('button[data-test-subj="notebook-paragraph-actions-button"]').should('exist').click();
+    cy.get('.euiContextMenuPanelTitle').contains('Actions');
+    cy.get('.euiContextMenuItem__text').eq(0).contains('Add paragraph to top');
+    cy.get('.euiContextMenuItem__text').eq(1).contains('Add paragraph to bottom');
+    cy.get('.euiContextMenuItem__text').eq(2).contains('Run all paragraphs');
+    cy.get('.euiContextMenuItem__text').eq(3).contains('Clear all outputs');
+    cy.get('.euiContextMenuItem__text').eq(4).contains('Delete all paragraphs');
+  });
+
+  it('Renders markdown', () => {
+    cy.get('.euiTextArea').should('not.exist');
+    cy.get(`a[href="${SAMPLE_URL}"]`).should('exist');
+    cy.get('code').contains('POST').should('exist');
+    cy.get('td').contains('b2').should('exist');
+  });
+
+  it('Shows output message', () => {
+    cy.get('button[aria-label="Toggle show input"]').click();
+    cy.wait(delay);
+    cy.get('.euiTextColor').contains('Last successful run').should('exist');
+
+    cy.get('pre.input').eq(0).click();
+    cy.wait(delay);
+    cy.get('.euiTextArea').type('Another text');
+    cy.wait(delay);
+
+    cy.get('.euiTextColor').contains('Last successful run').should('exist');
+  });
+
+  it('Renders input only mode', () => {
+    cy.get('.euiButton__text[title="Input only"]').click();
+    cy.wait(delay);
+
+    cy.get('div.markdown-body').should('not.exist');
+    cy.get('.euiLink').contains('View both').should('exist');
+    cy.get('.euiLink').contains('View both').click();
+    cy.wait(delay);
+
+    cy.get('code').contains('POST').should('exist');
+    cy.get('.euiLink').contains('View both').should('not.exist');
+  });
+
+  it('Renders output only mode', () => {
+    cy.get('.euiButton__text[title="Output only"]').click();
+    cy.wait(delay);
+
+    cy.get('button[aria-label="Open paragraph menu"]').should('not.exist');
+    cy.get('button[aria-label="Toggle show input"]').should('not.exist');
+    cy.get('code').contains('POST').should('exist');
+  });
+
+  it('Duplicates paragraphs', () => {
+    cy.get('.euiButtonIcon[aria-label="Open paragraph menu"]').eq(0).click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Duplicate').eq(0).click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+
+    cy.get(`a[href="${SAMPLE_URL}"]`).should('have.length.gte', 2);
+  });
+
+  it('Adds a dashboards visualization paragraph', () => {
+    cy.contains('Add paragraph').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Visualization').click();
+    cy.wait(delay);
+
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+    cy.get('.euiTextColor').contains('Visualization is required.').should('exist');
+
+    cy.get('.euiButton__text').contains('Browse').click();
+    cy.wait(delay);
+    cy.get('.euiFieldSearch')
+      .focus()
+      .type('[Flights] Flight Count and Average Ticket Price{enter}');
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Select').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+    cy.get('div.visualization').should('exist');
+  });
+
+  it('Adds a SQL query paragraph', () => {
+    cy.contains('Add paragraph').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Code block').click();
+    cy.wait(delay);
+
+    cy.get('.euiTextArea').type(SQL_QUERY_TEXT);
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay * 5);
+
+    cy.get('b').contains('select * from opensearch_dashboards_sample_data_flights limit 20');
+
+    cy.get('.euiDataGrid__overflow').should('exist');
+  });
+
+  it('Adds an observability visualization paragraph', () => {
+    cy.contains('Add paragraph').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Visualization').click();
+    cy.wait(delay);
+
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+    cy.get('.euiTextColor').contains('Visualization is required.').should('exist');
+
+    cy.get('.euiButton__text').contains('Browse').click();
+    cy.wait(delay);
+    cy.get('.euiFieldSearch').focus().type('[Logs] Count total requests by tags{enter}');
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Select').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+    cy.get('h5').contains('[Logs] Count total requests by tags').should('exist');
+  });
+
+  it('Adds a PPL query paragraph', () => {
+    cy.contains('Add paragraph').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Code block').click();
+    cy.wait(delay);
+
+    cy.get('.euiTextArea').type(PPL_QUERY_TEXT);
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay * 5);
+
+    cy.get('b').contains('source=opensearch_dashboards_sample_data_flights');
+
+    cy.get('.euiDataGrid__overflow').should('exist');
+  });
+
+  it('Clears outputs', () => {
+    cy.wait(delay * 3); // need to wait for paragraphs to load first
+    cy.get('[data-test-subj="notebook-paragraph-actions-button"]').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Clear all outputs').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Clear').click();
+    cy.wait(delay);
+
+    cy.get(`a[href="${SAMPLE_URL}"]`).should('not.exist');
+  });
+
+  it('Runs all paragraphs', () => {
+    cy.wait(delay * 3); // need to wait for paragraphs to load first
+    cy.get('[data-test-subj="notebook-paragraph-actions-button"]').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Run all paragraphs').click();
+    cy.wait(delay);
+
+    cy.get(`a[href="${SAMPLE_URL}"]`).should('exist');
+  });
+
+  it('Adds paragraph to top and bottom', () => {
+    cy.wait(delay * 3); // need to wait for paragraphs to load first
+    cy.get('[data-test-subj="notebook-paragraph-actions-button"]').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Add paragraph to top').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Code block').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="notebook-paragraph-actions-button"]').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Add paragraph to bottom').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Code block').click();
+    cy.wait(delay);
+
+    cy.get('.euiText').contains('[4] Visualization').should('exist');
+    cy.get('.euiText').contains('[5] Code block').should('exist');
+  });
+
+  it('Moves paragraphs', () => {
+    cy.get('.euiButtonIcon[aria-label="Open paragraph menu"').eq(0).click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem-isDisabled').should('have.length.gte', 2);
+    cy.get('.euiContextMenuItem__text').contains('Move to bottom').click();
+    cy.wait(delay);
+
+    cy.get('.euiText').contains('[3] Visualization').should('exist');
+  });
+
+  it('Duplicates and renames the notebook', () => {
+    cy.get('[data-test-subj="notebook-notebook-actions-button"]').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Duplicate notebook').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Duplicate').click();
+    cy.wait(delay * 3);
+
+    cy.get('[data-test-subj="notebook-notebook-actions-button"]').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Rename notebook').click();
+    cy.wait(delay);
+    cy.get('input.euiFieldText[data-autofocus="true"]').type(' (rename)');
+    cy.wait(delay);
+    cy.get('.euiButton__text').last().contains('Rename').click();
+    cy.wait(delay);
+    cy.reload();
+    cy.wait(delay * 3);
+
+    cy.get('.euiTitle')
+      .contains(TEST_NOTEBOOK + ' (copy) (rename)')
+      .should('exist');
+    cy.get(`a[href="${SAMPLE_URL}"]`).should('have.length.gte', 2);
+  });
+
+  it('Deletes paragraphs', () => {
+    cy.wait(delay * 3);
+    cy.get('[data-test-subj="notebook-paragraph-actions-button"]').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Delete all paragraphs').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Delete').click();
+    cy.wait(delay);
+
+    cy.get('.euiTextAlign').contains('No paragraphs').should('exist');
+  });
+
+  it('Deletes notebook', () => {
+    cy.get('[data-test-subj="notebook-notebook-actions-button"]').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Delete notebook').click();
+    cy.wait(delay);
+
+    cy.get('button.euiButton--danger').should('be.disabled');
+
+    cy.get('input.euiFieldText[placeholder="delete"]').type('delete');
+    cy.get('button.euiButton--danger').should('not.be.disabled');
+    cy.get('.euiButton__text').contains('Delete').click();
+    cy.wait(delay * 3);
+
+    cy.get('.euiButton__text').contains('Create notebook').should('exist');
+  });
+  
+  it('Cleans up test notebooks', () => {
+    cy.get('[data-test-subj="notebook-notebook-actions-button"]').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Delete notebook').click();
+    cy.wait(delay);
+
+    cy.get('button.euiButton--danger').should('be.disabled');
+
+    cy.get('input.euiFieldText[placeholder="delete"]').type('delete');
+    cy.get('button.euiButton--danger').should('not.be.disabled');
+    cy.get('.euiButton__text').contains('Delete').click();
+    cy.wait(delay * 3);
+
+    cy.get('.euiText').contains('No notebooks').should('exist');
+  });
+});
+
+describe('clean up all test data', () => {
+  it('Delete visualizations from event analytics', () => {
+    moveToEventsHome();
+    cy.get('[data-test-subj="tablePaginationPopoverButton"]').trigger('mouseover').click();
+    cy.get('.euiContextMenuItem__text').contains('50 rows').trigger('mouseover').click();
+    cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Delete').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('button.euiButton--danger').should('be.disabled');
+    cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
+      delay: 50,
+    });
+    cy.get('button.euiButton--danger').should('not.be.disabled');
+    cy.get('.euiButton__text').contains('Delete').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiTextAlign').contains('No Queries or Visualizations').should('exist');
+  });
+
+  it('Deletes test panel', () => {
+    moveToPanelHome();
+    cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Delete').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('button.euiButton--danger').should('be.disabled');
+    cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
+      delay: 50,
+    });
+    cy.get('button.euiButton--danger').should('not.be.disabled');
+    cy.get('.euiButton__text').contains('Delete').trigger('mouseover').click();
+
+    cy.get('.euiTextAlign').contains('No Operational Panels').should('exist');
+  });
+});
diff --git a/.cypress/integration/3_panels.spec.js b/.cypress/integration/3_panels.spec.js
new file mode 100644
index 0000000000..e7b3496330
--- /dev/null
+++ b/.cypress/integration/3_panels.spec.js
@@ -0,0 +1,545 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import {
+  delay,
+  TEST_PANEL,
+  PPL_VISUALIZATIONS,
+  PPL_VISUALIZATIONS_NAMES,
+  NEW_VISUALIZATION_NAME,
+  PPL_FILTER,
+  SAMPLE_PANEL,
+  SAMPLE_VISUALIZATIONS_NAMES,
+} from '../utils/panel_constants';
+
+import { supressResizeObserverIssue } from '../utils/constants';
+
+const moveToEventsHome = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/`);
+  cy.wait(delay * 3);
+};
+
+const moveToPanelHome = () => {
+  cy.visit(
+    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
+  );
+  cy.wait(delay * 3);
+};
+
+const moveToTestPanel = () => {
+  moveToPanelHome();
+  cy.get('.euiTableCellContent').contains(TEST_PANEL).trigger('mouseover').click();
+  cy.wait(delay * 3);
+  cy.get('h1').contains(TEST_PANEL).should('exist');
+  cy.wait(delay);
+};
+
+describe('Adding sample data and visualization', () => {
+  it('Adds sample flights data for visualization paragraph', () => {
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/home#/tutorial_directory/sampleData`);
+    cy.get('div[data-test-subj="sampleDataSetCardflights"]')
+      .contains(/(Add|View) data/)
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay * 3);
+  });
+});
+
+describe('Creating visualizations', () => {
+  beforeEach(() => {
+    moveToEventsHome();
+  });
+
+  it('Create first visualization in event analytics', () => {
+    cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[0], {
+      delay: 50,
+    });
+    cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
+    cy.wait(delay);
+    supressResizeObserverIssue();
+    cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click();
+    cy.wait(1000);
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]')
+      .focus()
+      .type(PPL_VISUALIZATIONS_NAMES[0], {
+        delay: 50,
+      });
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+  });
+
+  it('Create second visualization in event analytics', () => {
+    cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[1], {
+      delay: 50,
+    });
+    cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
+    cy.wait(delay);
+    supressResizeObserverIssue();
+    cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click();
+    cy.wait(1000);
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]')
+      .focus()
+      .type(PPL_VISUALIZATIONS_NAMES[1], {
+        delay: 50,
+      });
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+  });
+});
+
+describe('Testing panels table', () => {
+  beforeEach(() => {
+    moveToPanelHome();
+  });
+
+  it('Displays error toast for invalid panel name', () => {
+    cy.get('.euiButton__text').contains('Create panel').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text')
+      .contains(/^Create$/)
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay);
+
+    cy.get('.euiToastHeader__title').contains('Invalid Operational Panel name').should('exist');
+  });
+
+  it('Creates a panel and redirects to the panel', () => {
+    cy.get('.euiButton__text').contains('Create panel').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('input.euiFieldText').focus().type(TEST_PANEL, {
+      delay: 50,
+    });
+    cy.get('.euiButton__text')
+      .contains(/^Create$/)
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay);
+
+    cy.contains(TEST_PANEL).should('exist');
+  });
+
+  it('Duplicates and renames a panel', () => {
+    cy.get('.euiCheckbox__input[title="Select this row"]').eq(0).trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Duplicate').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Duplicate').trigger('mouseover').click();
+    cy.wait(delay);
+
+    cy.get('.euiCheckbox__input[title="Select this row"]').eq(1).trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiCheckbox__input[title="Select this row"]').eq(0).trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Rename').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('input.euiFieldText').focus().type(' (rename)', {
+      delay: 50,
+    });
+    cy.get('.euiButton__text').contains('Rename').trigger('mouseover').click();
+    cy.wait(delay);
+  });
+
+  it('Searches existing panel', () => {
+    cy.get('input.euiFieldSearch').focus().type('this panel should not exist', {
+      delay: 50,
+    });
+    cy.wait(delay);
+
+    cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
+
+    cy.get('.euiFormControlLayoutClearButton').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('input.euiFieldSearch')
+      .focus()
+      .type(TEST_PANEL + ' (copy) (rename)', {
+        delay: 50,
+      });
+    cy.wait(delay);
+
+    cy.get('a.euiLink')
+      .contains(TEST_PANEL + ' (copy) (rename)')
+      .should('exist');
+  });
+
+  it('Deletes panels', () => {
+    cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Delete').trigger('mouseover').click();
+    cy.wait(delay);
+
+    cy.get('button.euiButton--danger').should('be.disabled');
+
+    cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
+      delay: 50,
+    });
+    cy.get('button.euiButton--danger').should('not.be.disabled');
+    cy.get('.euiButton__text').contains('Delete').trigger('mouseover').click();
+
+    cy.get('.euiTextAlign').contains('No Operational Panels').should('exist');
+
+    // keep a panel for testing
+    cy.get('.euiButton__text').contains('Create panel').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('input.euiFieldText').focus().type(TEST_PANEL, {
+      delay: 50,
+    });
+    cy.get('.euiButton__text')
+      .contains(/^Create$/)
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay * 2);
+  });
+});
+
+describe('Testing a panel', () => {
+  it('Move to test panel', () => {
+    moveToTestPanel();
+  });
+
+  it('Opens visualization flyout from empty panel', () => {
+    cy.get('.euiButton').eq(4).contains('Add visualization').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text')
+      .contains('Select existing visualization')
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay);
+    cy.get('.euiButton').contains('Cancel').trigger('mouseover').click();
+    cy.get('.euiButton').eq(2).contains('Add visualization').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text')
+      .contains('Select existing visualization')
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay);
+    cy.get('.euiButton').contains('Cancel').trigger('mouseover').click();
+    cy.get('.euiButton').contains('Add visualization').first().trigger('mouseover').click();
+    cy.get('.euiContextMenuItem__text')
+      .contains('Create new visualization')
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay);
+    cy.get('.euiBreadcrumb').contains('Explorer').should('exist');
+    cy.get('.euiCallOut').contains('No results match your search criteria').should('exist');
+  });
+
+  it('Redirects to correct page on breadcrumb click', () => {
+    moveToTestPanel();
+    cy.get('.euiBreadcrumb').contains(TEST_PANEL).trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains(TEST_PANEL).should('exist');
+    cy.get('.euiBreadcrumb').contains('Operational panels').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Operational panels').should('exist');
+    cy.get('.euiBreadcrumb').contains('Observability').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Event analytics').should('exist');
+  });
+
+  it('Duplicate the open panel', () => {
+    moveToTestPanel();
+    cy.get('.euiButton__text').contains('Panel actions').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Duplicate panel').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get(`input.euiFieldText[value="${TEST_PANEL} (copy)"]`).should('exist');
+    cy.get('.euiButton__text').contains('Duplicate').trigger('mouseover').click();
+    cy.wait(delay * 3);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+    cy.get('h1')
+      .contains(TEST_PANEL + ' (copy)')
+      .should('exist');
+    cy.wait(delay);
+  });
+
+  it('Rename the open panel', () => {
+    cy.get('.euiButton__text').contains('Panel actions').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Rename panel').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get(`input.euiFieldText[value="${TEST_PANEL} (copy)"]`)
+      .focus()
+      .clear({ force: true })
+      .focus()
+      .type('Renamed Panel', {
+        delay: 200,
+      });
+    cy.get('.euiButton__text').contains('Rename').trigger('mouseover').click();
+    cy.wait(delay * 3);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+    cy.get('h1').contains('Renamed Panel').should('exist');
+    cy.wait(delay);
+  });
+
+  it('Change date filter of the panel', () => {
+    moveToTestPanel();
+    cy.get('.euiButtonEmpty[data-test-subj="superDatePickerToggleQuickMenuButton"]').click({
+      force: true,
+    });
+    cy.get('.euiLink').contains('This year').trigger('mouseover').click();
+    cy.wait(delay * 2);
+    cy.get('.euiSuperDatePicker__prettyFormat[data-test-subj="superDatePickerShowDatesButton"]')
+      .contains('This year')
+      .should('exist');
+    cy.wait(delay);
+  });
+
+  it('Add existing visualization #1', () => {
+    cy.get('.euiButton__text').contains('Add visualization').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text')
+      .contains('Select existing visualization')
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay);
+    cy.get('select').select(PPL_VISUALIZATIONS_NAMES[0]);
+    cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click();
+    cy.wait(delay * 2);
+    cy.get('.plot-container').should('exist');
+    cy.get('.euiButton__text').contains(new RegExp('^Add$', 'g')).trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+  });
+
+  it('Add existing visualization #2', () => {
+    cy.get('.euiButton__text').contains('Add visualization').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text')
+      .contains('Select existing visualization')
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay);
+    cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]);
+    cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click();
+    cy.wait(delay * 2);
+    cy.get('.plot-container').should('exist');
+    cy.get('.euiButton__text').contains(new RegExp('^Add$', 'g')).trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+  });
+
+  it('Add ppl filter to panel', () => {
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]')
+      .trigger('mouseover')
+      .click()
+      .wait(3000)
+      .focus()
+      .type(PPL_FILTER, {
+        delay: 500,
+      });
+
+    cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
+    cy.wait(delay * 3);
+    cy.get('.xtick').should('contain', 'OpenSearch-Air');
+    cy.get('.xtick').should('contain', 'Munich Airport');
+    cy.get('.xtick').contains('Zurich Airport').should('not.exist');
+    cy.get('.xtick').contains('BeatsWest').should('not.exist');
+    cy.get('.xtick').contains('Logstash Airways').should('not.exist');
+    cy.get('.xtick').contains('OpenSearch Dashboards Airlines').should('not.exist');
+    cy.wait(delay);
+  });
+
+  it('Drag and drop a visualization', () => {
+    cy.get('.euiButton__text').contains('Edit').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('h5')
+      .contains(PPL_VISUALIZATIONS_NAMES[1])
+      .trigger('mousedown', { which: 1 })
+      .trigger('mousemove', { clientX: 1100, clientY: 0 })
+      .trigger('mouseup', { force: true });
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Save').trigger('mouseover').click();
+    cy.wait(delay * 3);
+    cy.get('div.react-grid-layout>div')
+      .eq(1)
+      .invoke('attr', 'style')
+      .should('match', new RegExp('(.*)transform: translate((.*)10px)(.*)'));
+    cy.wait(delay);
+  });
+
+  it('Resize a visualization', () => {
+    cy.get('.euiButton__text').contains('Edit').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.react-resizable-handle')
+      .eq(1)
+      .trigger('mousedown', { which: 1 })
+      .trigger('mousemove', { clientX: 2000, clientY: 800 })
+      .trigger('mouseup', { force: true });
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Save').trigger('mouseover').click();
+    cy.wait(delay * 3);
+    cy.get('div.react-grid-layout>div').eq(1).invoke('height').should('match', new RegExp('470'));
+    cy.wait(delay);
+  });
+
+  it('Delete a visualization', () => {
+    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[1]).should('exist');
+    cy.get('.euiButton__text').contains('Edit').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.visualization-action-button > .euiIcon').eq(1).trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Save').trigger('mouseover').click();
+    cy.wait(delay * 3);
+    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[1]).should('not.exist');
+    cy.wait(delay);
+  });
+
+  it('Duplicate a visualization', () => {
+    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
+    cy.get('button[aria-label="actionMenuButton"]').trigger('mouseover').click();
+    cy.get('.euiContextMenu__itemLayout > .euiContextMenuItem__text')
+      .contains('Duplicate')
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay * 2);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+    cy.wait(delay);
+    cy.get('h5').eq(0).contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
+    cy.get('h5').eq(1).contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
+    cy.wait(delay);
+  });
+
+  it('Replace a visualization', () => {
+    cy.get('.visualization-action-button').eq(1).trigger('mouseover').click();
+    cy.get('.euiContextMenu__itemLayout > .euiContextMenuItem__text')
+      .contains('Replace')
+      .trigger('mouseover')
+      .click();
+    cy.get('select').select(PPL_VISUALIZATIONS_NAMES[1]);
+    cy.get('button[aria-label="refreshPreview"]').trigger('mouseover').click();
+    cy.wait(delay * 3);
+    cy.get('.plot-container').should('exist');
+    cy.get('.euiButton__text').contains(new RegExp('^Add$', 'g')).trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+    cy.wait(delay);
+    cy.get('h5').eq(0).contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
+    cy.get('h5').eq(1).contains(PPL_VISUALIZATIONS_NAMES[1]).should('exist');
+    cy.wait(delay);
+  });
+
+  it('Create new visualization and add to panel', () => {
+    cy.get('.euiButton__text').contains('Add visualization').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text')
+      .contains('Create new visualization')
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay * 3);
+    cy.url().should('match', new RegExp('(.*)#/event_analytics/explorer'));
+    cy.get('[id^=autocomplete-textarea]').focus().type(PPL_VISUALIZATIONS[2], {
+      delay: 50,
+    });
+    cy.get('.euiButton__text').contains('Refresh').trigger('mouseover').click();
+
+    supressResizeObserverIssue();
+    cy.get('button[id="main-content-vis"]').contains('Visualizations').trigger('mouseover').click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click();
+    cy.wait(1000);
+    cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').type(TEST_PANEL, {
+      delay: 50,
+    });
+    cy.wait(1000);
+    cy.get(`input[value="${TEST_PANEL}"]`).trigger('mouseover').click();
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]')
+      .focus()
+      .type(PPL_VISUALIZATIONS_NAMES[2], {
+        delay: 50,
+      });
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+    moveToTestPanel();
+    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
+    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[1]).should('exist');
+    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[2]).should('exist');
+  });
+
+  it('Move to test panel and check visualization edit button', () => {
+    moveToTestPanel();
+    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[0]).should('exist');
+    cy.get('button[aria-label="actionMenuButton"]').eq(0).trigger('mouseover').click();
+    supressResizeObserverIssue();
+    cy.get('.euiContextMenu__itemLayout > .euiContextMenuItem__text')
+      .contains('Edit')
+      .trigger('mouseover')
+      .click();
+    cy.wait(delay * 3);
+    cy.url().should('match', new RegExp('(.*)#/event_analytics/explorer'));
+    cy.wait(delay);
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').trigger('mouseover').click();
+    cy.wait(1000);
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]')
+      .clear({ force: true })
+      .type(NEW_VISUALIZATION_NAME, {
+        delay: 200,
+      });
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiToastHeader__title').contains('successfully').should('exist');
+    moveToTestPanel();
+    cy.get('h5').contains(NEW_VISUALIZATION_NAME).should('exist');
+    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[1]).should('exist');
+    cy.get('h5').contains(PPL_VISUALIZATIONS_NAMES[2]).should('exist');
+  });
+});
+
+describe('Clean up all test data', () => {
+
+  it('Delete visualizations from event analytics', () => {
+    moveToEventsHome();
+    cy.get('[data-test-subj="tablePaginationPopoverButton"]').trigger('mouseover').click();
+    cy.get('.euiContextMenuItem__text').contains('50 rows').trigger('mouseover').click();
+    cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Delete').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('button.euiButton--danger').should('be.disabled');
+    cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
+      delay: 50,
+    });
+    cy.get('button.euiButton--danger').should('not.be.disabled');
+    cy.get('.euiButton__text').contains('Delete').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiTextAlign').contains('No Queries or Visualizations').should('exist');
+  });
+
+  it('Deletes test panel', () => {
+    moveToPanelHome();
+    cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Actions').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('.euiContextMenuItem__text').contains('Delete').trigger('mouseover').click();
+    cy.wait(delay);
+    cy.get('button.euiButton--danger').should('be.disabled');
+    cy.get('input.euiFieldText[placeholder="delete"]').focus().type('delete', {
+      delay: 50,
+    });
+    cy.get('button.euiButton--danger').should('not.be.disabled');
+    cy.get('.euiButton__text').contains('Delete').trigger('mouseover').click();
+
+    cy.get('.euiTextAlign').contains('No Operational Panels').should('exist');
+  });
+});
+
diff --git a/.cypress/integration/4_trace_analytics_dashboard.spec.js b/.cypress/integration/4_trace_analytics_dashboard.spec.js
new file mode 100644
index 0000000000..f9bfb57603
--- /dev/null
+++ b/.cypress/integration/4_trace_analytics_dashboard.spec.js
@@ -0,0 +1,294 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import { testDataSet, delay, setTimeFilter } from '../utils/constants';
+
+describe('Dump test data', () => {
+  it('Indexes test data', () => {
+    const dumpDataSet = (mapping_url, data_url, index) => {
+      cy.request({
+        method: 'POST',
+        failOnStatusCode: false,
+        url: 'api/console/proxy',
+        headers: {
+          'content-type': 'application/json;charset=UTF-8',
+          'osd-xsrf': true,
+        },
+        qs: {
+          path: `${index}`,
+          method: 'PUT',
+        },
+      });
+
+      cy.request(mapping_url).then((response) => {
+        cy.request({
+          method: 'POST',
+          form: true,
+          url: 'api/console/proxy',
+          headers: {
+            'content-type': 'application/json;charset=UTF-8',
+            'osd-xsrf': true,
+          },
+          qs: {
+            path: `${index}/_mapping`,
+            method: 'POST',
+          },
+          body: response.body,
+        });
+      });
+
+      cy.request(data_url).then((response) => {
+        cy.request({
+          method: 'POST',
+          form: true,
+          url: 'api/console/proxy',
+          headers: {
+            'content-type': 'application/json;charset=UTF-8',
+            'osd-xsrf': true,
+          },
+          qs: {
+            path: `${index}/_bulk`,
+            method: 'POST',
+          },
+          body: response.body,
+        });
+      });
+    };
+
+    testDataSet.forEach(({ mapping_url, data_url, index }) =>
+      dumpDataSet(mapping_url, data_url, index)
+    );
+  });
+});
+
+describe('Testing dashboard table empty state', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/home', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    cy.wait(delay * 3);
+  });
+
+  it('Renders empty state', () => {
+    cy.contains(' (0)').should('exist');
+    cy.contains('No matches').should('exist');
+  });
+});
+
+describe('Testing dashboard table', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/home', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the dashboard table', () => {
+    cy.contains(' (10)').should('exist');
+    cy.contains('client_cancel_order').should('exist');
+    cy.contains('166.44').should('exist');
+    cy.contains('7.14%').should('exist');
+  });
+
+  it('Has working breadcrumbs', () => {
+    cy.get('.euiBreadcrumb').contains('Dashboard').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Dashboard').should('exist');
+    cy.get('.euiBreadcrumb').contains('Trace analytics').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Dashboard').should('exist');
+    cy.get('.euiBreadcrumb').contains('Observability').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Event analytics').should('exist');
+  });
+
+  it('Adds the percentile filters', () => {
+    cy.contains(' >= 95 percentile').click({ force: true });
+    cy.wait(delay);
+    cy.contains(' >= 95 percentile').click({ force: true });
+    cy.wait(delay);
+
+    cy.contains('Latency percentile within trace group: >= 95th').should('exist');
+    cy.contains(' (7)').should('exist');
+    cy.contains('318.69').should('exist');
+
+    cy.contains(' < 95 percentile').click({ force: true });
+    cy.wait(delay);
+    cy.contains(' < 95 percentile').click({ force: true });
+    cy.wait(delay);
+
+    cy.contains('Latency percentile within trace group: < 95th').should('exist');
+    cy.contains(' (8)').should('exist');
+    cy.contains('383.05').should('exist');
+  });
+
+  it('Opens latency trend popover', () => {
+    setTimeFilter(true);
+    cy.get('.euiButtonIcon[aria-label="Open popover"]').first().click();
+    cy.get('text.ytitle[data-unformatted="Hourly latency (ms)"]').should('exist');
+  });
+
+  it('Redirects to traces table with filter', () => {
+    cy.wait(delay * 5);
+    cy.get('.euiLink').contains('13').click();
+    cy.wait(delay);
+
+    cy.get('h2.euiTitle').contains('Traces').should('exist');
+    cy.contains(' (13)').should('exist');
+    cy.contains('client_create_order').should('exist');
+
+    cy.get('.euiSideNavItemButton__label').contains('Trace analytics').click();
+    cy.wait(delay);
+
+    cy.contains('client_create_order').should('exist');
+  });
+});
+
+describe('Testing plots', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/home', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders service map', () => {
+    // plotly scale texts are in attribute "data-unformatted"
+    cy.get('text.ytitle[data-unformatted="Latency (ms)"]').should('exist');
+    cy.get('text[data-unformatted="200"]').should('exist');
+    cy.get('.vis-network').should('exist');
+
+    cy.get('.euiButton__text[title="Error rate"]').click();
+    cy.get('text.ytitle[data-unformatted="Error rate"]').should('exist');
+    cy.get('text[data-unformatted="10%"]').should('exist');
+
+    cy.get('.euiButton__text[title="Throughput"]').click();
+    cy.get('text.ytitle[data-unformatted="Throughput"]').should('exist');
+    cy.get('text[data-unformatted="50"]').should('exist');
+
+    cy.get('input[type="search"]').eq(1).focus().type('payment{enter}');
+    cy.wait(delay);
+  });
+
+  it('Renders plots', () => {
+    cy.get('text.ytitle[data-unformatted="Error rate (%)"]').should('exist');
+    cy.get('text.annotation-text[data-unformatted="Now: 14.81%"]').should('exist');
+    cy.get('text.ytitle[data-unformatted="Throughput (n)"]').should('exist');
+    cy.get('text.annotation-text[data-unformatted="Now: 108"]').should('exist');
+  });
+});
+
+describe('Latency by trace group table', () =>{
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/home', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Verify columns in Latency by trace group table along with pagination functionality', () => {
+    cy.get('span.panel-title').eq(0).should('exist');
+    cy.wait(delay);
+    cy.get('span[title="Trace group name"]').should('exist');
+    cy.get('span[title="Latency variance (ms)"]').should('exist');
+    cy.get('span[title="Average latency (ms)"]').should('exist');
+    cy.get('span[title="24-hour latency trend"]').should('exist');
+    cy.get('span[title="Error rate"] .euiToolTipAnchor').should('exist');
+    cy.get('span[title="Traces"] .euiToolTipAnchor').should('exist');
+    cy.get('[data-test-subj="tablePaginationPopoverButton"]').click();
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiContextMenu__icon').eq(0).should('exist').click();
+    cy.get('[data-test-subj="pagination-button-next"]').should('exist').click();
+    cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').contains('mysql').should('exist');
+  });
+
+  it('Sorts the Latency by trace group table', () => {
+    cy.get('span[title*="Trace group name"]').click();
+    cy.get('[data-test-subj="dashboard-table-trace-group-name-button"]').eq(0).contains('/**').should('exist');
+    cy.wait(delay);
+  });
+
+  it('Verify tooltips in Latency by trace group table', () => {
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(0).trigger('mouseover');
+    cy.contains('Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.').should('be.visible');
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(1).trigger('mouseover');
+    cy.contains('Range of latencies for traces within a trace group in the selected time range.').should('be.visible');
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(2).trigger('mouseover');
+    cy.contains('Average latency of traces within a trace group in the selected time range.').should('be.visible');
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(3).trigger('mouseover');
+    cy.contains('24 hour time series view of hourly average, hourly percentile, and hourly range of latency for traces within a trace group.').should('be.visible');
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(4).trigger('mouseover');
+    cy.contains('Error rate based on count of trace errors within a trace group in the selected time range.').should('be.visible');
+    cy.get('.euiIcon.euiIcon--small.euiIcon--subdued.euiIcon-isLoaded.eui-alignTop').eq(5).trigger('mouseover');
+    cy.contains('Count of traces with unique trace identifiers in the selected time range.').should('be.visible');
+  });
+
+  it('Verify Search engine on Trace dashboard', () => {
+    cy.get('.euiFieldSearch.euiFieldSearch--fullWidth').click().type('client_pay_order{enter}');
+    cy.wait(delay);
+    cy.get('.euiTableCellContent.euiTableCellContent--alignRight.euiTableCellContent--overflowingContent').contains('211.04').should('exist');
+    cy.get('button[data-test-subj="dashboard-table-trace-group-name-button"]').click();
+    cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
+    cy.get('.euiIcon.euiIcon--medium.euiContextMenu__arrow').click();
+    cy.get('.euiContextMenuPanelTitle').contains('Edit filter').should('exist');
+    cy.get('.euiButton.euiButton--primary.euiButton--fill').click();
+    cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
+    cy.get('.euiContextMenuItem__text').eq(1).contains('Exclude results').click();
+    cy.get('.euiTextColor.euiTextColor--danger').should('exist');
+    cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
+    cy.get('.euiContextMenuItem__text').eq(1).contains('Include results').click();
+    cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
+    cy.get('.euiContextMenuItem__text').eq(2).contains('Temporarily disable').click();
+    cy.get('.euiBadge.euiBadge--iconRight.globalFilterItem.globalFilterItem-isDisabled').should('exist').click();
+    cy.get('.euiContextMenuItem__text').eq(2).contains('Re-enable').click();
+    cy.get('.euiBadge.euiBadge--hollow.euiBadge--iconRight.globalFilterItem').click();
+    cy.get('.euiContextMenuItem__text').eq(3).contains('Delete').click();
+  });
+});
+
+describe('Testing filters on trace analytics page', () =>{
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/home', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Verify Change all filters', () =>{
+    cy.get('.euiButtonIcon.euiButtonIcon--primary.euiButtonIcon--empty.euiButtonIcon--xSmall').click();
+    cy.get('.euiContextMenuPanelTitle').contains('Change all filters').should('exist');
+    cy.get('.euiContextMenuItem__text').eq(0).contains('Enable all');
+    cy.get('.euiContextMenuItem__text').eq(1).contains('Disable all');
+    cy.get('.euiContextMenuItem__text').eq(2).contains('Invert inclusion');
+    cy.get('.euiContextMenuItem__text').eq(3).contains('Invert enabled/disabled');
+    cy.get('.euiContextMenuItem__text').eq(4).contains('Remove all');
+  })
+
+  it('Verify Add filter section', () => {
+    cy.get('.euiPopover.euiPopover--anchorDownLeft').contains('+ Add filter').click();
+    cy.get('.euiPopoverTitle').contains('Add filter').should('exist');
+    cy.wait(delay);
+    cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap').eq(0).trigger('mouseover').click();
+    cy.get('.euiComboBoxOption__content').eq(1).click();
+    cy.get('.euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap').eq(1).trigger('mouseover').click();
+    cy.get('.euiComboBoxOption__content').eq(2).click();
+    cy.get('.euiButton.euiButton--primary.euiButton--fill').contains('Save').click();
+    cy.get('.euiBadge__content').should('exist').click();
+    cy.get('.euiIcon.euiIcon--medium.euiContextMenu__arrow').click();
+    cy.get('[data-test-subj="filter-popover-cancel-button"]').contains('Cancel').click();
+    cy.get('.euiIcon.euiIcon--small.euiIcon--inherit.euiBadge__icon').click();
+  })
+});
diff --git a/.cypress/integration/5_trace_analytics_services.spec.js b/.cypress/integration/5_trace_analytics_services.spec.js
new file mode 100644
index 0000000000..bd2cd4c419
--- /dev/null
+++ b/.cypress/integration/5_trace_analytics_services.spec.js
@@ -0,0 +1,279 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import { delay, SERVICE_NAME, SERVICE_SPAN_ID, setTimeFilter, verify_traces_spans_data_grid_cols_exists, count_table_row } from '../utils/constants';
+
+describe('Testing services table empty state', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    cy.wait(delay * 3);
+  });
+
+  it('Renders empty state', () => {
+    cy.contains(' (0)').should('exist');
+    cy.contains('No matches').should('exist');
+  });
+});
+
+describe('Testing services table', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the services table', () => {
+    cy.contains(' (8)').should('exist');
+    cy.contains('analytics-service, frontend-client, recommendation').should('exist');
+    cy.contains('186.95').should('exist');
+    cy.contains('14.29%').should('exist');
+  });
+
+  it('Searches correctly', () => {
+    cy.get('input[type="search"]').first().focus().type(`${SERVICE_NAME}{enter}`);
+    cy.get('.euiButton__text').contains('Refresh').click();
+    cy.contains(' (1)').should('exist');
+    cy.contains('3.57%').should('exist');
+  });
+
+  it('Verify columns in Services table', () => {
+    cy.get('.euiFlexItem.euiFlexItem--flexGrow10 .panel-title').contains('Services').should('exist');
+    cy.get('.euiTableCellContent__text[title="Name"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Average latency (ms)"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Error rate"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Throughput"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="No. of connected services"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Connected services"]').should('exist');
+    cy.get('.euiTableCellContent__text[title="Traces"]').should('exist');
+    cy.get('[data-test-subj="tablePaginationPopoverButton"]').click();
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiContextMenu__icon').eq(0).should('exist').click();
+    cy.get('[data-test-subj="pagination-button-next"]').should('exist').click();
+    cy.get('.euiLink.euiLink--primary').contains('order').should('exist');
+  })
+
+  it('Navigate from Services to Traces', () => {
+    cy.get('.euiTableCellContent__text[title="Traces"]').should('exist');
+    cy.contains('74').should('exist').click();
+    cy.get('.euiText.euiText--medium .panel-title').should('exist');
+    cy.get('.euiBadge__childButton[data-test-subj="filterBadge"]').should('exist');
+  })
+});
+
+describe('Testing service view empty state', () => {
+  beforeEach(() => {
+    // exception is thrown on loading EuiDataGrid in cypress only, ignore for now
+    cy.on('uncaught:exception', (err, runnable) => {
+      if (err.message.includes('ResizeObserver loop'))
+        return false;
+    });
+    cy.visit(`app/observability-dashboards#/trace_analytics/services/${SERVICE_NAME}`, {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+  });
+
+  it('Renders service view empty state', () => {
+    cy.contains('frontend-client').should('exist');
+    cy.get('.euiText').contains('0').should('exist');
+    cy.get('.euiText').contains('-').should('exist');
+  });
+});
+
+describe('Testing service view', () => {
+  beforeEach(() => {
+    // exception is thrown on loading EuiDataGrid in cypress only, ignore for now
+    cy.on('uncaught:exception', (err, runnable) => {
+      if (err.message.includes('ResizeObserver loop'))
+        return false;
+    });
+    cy.visit(`app/observability-dashboards#/trace_analytics/services/${SERVICE_NAME}`, {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter(undefined, false);
+  });
+
+  it('Renders service view', () => {
+    cy.get('h2.euiTitle').contains(SERVICE_NAME).should('exist');
+    cy.contains('178.6').should('exist');
+    cy.contains('3.57%').should('exist');
+    cy.get('div.vis-network').should('exist');
+  });
+
+  it('Has working breadcrumbs', () => {
+    cy.get('.euiBreadcrumb').contains(SERVICE_NAME).click();
+    cy.wait(delay);
+    cy.get('h2.euiTitle').contains(SERVICE_NAME).should('exist');
+    cy.get('.euiBreadcrumb').contains('Services').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Services').should('exist');
+    cy.get('.euiBreadcrumb').contains('Trace analytics').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Dashboard').should('exist');
+    cy.get('.euiBreadcrumb').contains('Observability').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Event analytics').should('exist');
+  });
+
+  it('Renders spans data grid, flyout, filters', () => {
+    cy.get('.euiLink').contains(SERVICE_SPAN_ID).trigger('mouseover', { force: true });
+    cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
+    cy.wait(delay);
+    cy.contains('Span detail').should('exist');
+    cy.contains('Span attributes').should('exist');
+    cy.get('.euiTextColor').contains('Span ID').trigger('mouseover');
+    cy.get('.euiButtonIcon[aria-label="span-flyout-filter-icon"').click({ force: true });
+    cy.wait(delay);
+    cy.get('.euiBadge__text').contains('spanId: ').should('exist');
+    cy.get('[data-test-subj="euiFlyoutCloseButton"]').click({ force: true });
+    cy.contains('Spans (1)').should('exist');
+  });
+});
+
+describe('Testing Service map', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Render Service map', () => {
+    cy.get('.euiText.euiText--medium .panel-title').contains('Service map');
+    cy.get('[data-test-subj="latency"]').should('exist');
+    cy.get('.ytitle').contains('Latency (ms)');
+    cy.get('[data-text = "Error rate"]').click();
+    cy.contains('60%');
+    cy.get('[data-text = "Throughput"]').click();
+    cy.contains('100');
+    cy.get('.euiText.euiText--medium').contains('Focus on').should('exist');
+    cy.get('[placeholder="Service name"]').focus().type('database{enter}');
+  })
+});
+
+describe('Testing traces Spans table verify table headers functionality', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the spans table and verify columns headers', () => {
+    cy.contains(' (8)').should('exist');
+    cy.contains('analytics-service, frontend-client, recommendation').should('exist');
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    cy.get('.panel-title').contains('Spans').should('exist');
+    cy.get('.panel-title-count').contains('5').should('exist');
+    verify_traces_spans_data_grid_cols_exists();
+  });
+
+  it('Toggle columns and verify the columns hidden text verify rows', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click();
+    cy.get('.euiSwitch.euiSwitch--compressed.euiSwitch--mini .euiSwitch__button').eq(3).click();
+    cy.get('.euiButtonEmpty__text').eq(3).click().should('have.text', '2 columns hidden');
+    count_table_row(5);
+  });
+
+  it('Show all button Spans table', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click();
+    cy.get('.euiPopoverFooter .euiFlexItem.euiFlexItem--flexGrowZero').eq(0).should('have.text', 'Show all').click();
+    cy.get('.euiDataGrid__focusWrap').click().should('exist');
+    verify_traces_spans_data_grid_cols_exists();
+  });
+
+  it('Hide all button Spans table', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    cy.get('[data-test-subj = "dataGridColumnSelectorButton"]').click();
+    cy.get('.euiPopoverFooter .euiFlexItem.euiFlexItem--flexGrowZero').eq(1).should('have.text', 'Hide all').click();
+    cy.get('.euiDataGrid__focusWrap').click().should('exist');
+    cy.get('[data-test-subj="dataGridColumnSelectorPopover"]').should('have.text', '10 columns hidden');
+  });
+
+  it('Render Spans table and change data table Density', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    verify_traces_spans_data_grid_cols_exists();
+    cy.get('.euiButtonEmpty__text').contains('Density').click();
+    cy.get('.euiButtonContent__icon').eq(5).click();
+    cy.get('.euiButtonContent__icon').eq(6).click();
+    cy.get('.euiButtonContent__icon').eq(7).click();
+  });
+
+  it('Render Spans table and and click on sort', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    verify_traces_spans_data_grid_cols_exists();
+    cy.get('[data-test-subj="dataGridColumnSortingButton"]').contains('Sort fields').should('exist').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-spanId').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-parentSpanId"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-traceId"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-traceGroup').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-durationInNanos"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-startTime"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-endTime').click();
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection-status.code"]').click();
+    cy.get('.euiButtonEmpty__text').eq(5).contains('8 fields sorted').should('exist');
+    cy.get('[data-test-subj="dataGridColumnSortingPopoverColumnSelection"]').click();
+    cy.get('[data-test-subj="dataGridColumnSortingButton"]').should('exist').click();
+  });
+});
+
+
+describe('Testing traces Spans table and verify columns functionality', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/services', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the spans table and click on first span to verify details', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    verify_traces_spans_data_grid_cols_exists();
+    cy.get('.euiLink--primary').eq(4).click();
+    cy.get('[data-test-subj="spanDetailFlyout"] .euiTitle.euiTitle--medium').contains('Span detail').should('exist');
+    cy.get('.euiFlyoutBody .panel-title').contains('Overview').should('exist');
+    cy.get('.euiTextColor.euiTextColor--subdued').contains('Span ID').should('exist');
+    cy.get('.euiDescriptionList__description .euiFlexItem').eq(0).contains('d03fecfa0f55b77c').should('exist');
+    cy.get('.euiFlyoutBody__overflowContent .panel-title').contains('Span attributes').should('exist');
+    cy.get('.euiDescriptionList__description .euiFlexItem').eq(0).trigger('mouseover').click();
+    cy.get('[aria-label="span-flyout-filter-icon"]').click();
+    cy.get('.euiFlyout__closeButton.euiFlyout__closeButton--inside').click();
+    cy.get('.euiBadge__content .euiBadge__text').contains('spanId: d03fecfa0f55b77c').should('exist');
+    count_table_row(1);
+    cy.get('[aria-label="remove current filter"]').click();
+    count_table_row(5);
+  });
+
+  it('Render Spans table and verify Column functionality', () => {
+    cy.get('.euiLink.euiLink--primary').contains('authentication').should('exist').click();
+    verify_traces_spans_data_grid_cols_exists();
+    cy.get('.euiDataGridHeaderCell__content').contains('Span ID').click();
+    cy.get('.euiListGroupItem__label').contains('Hide column').click();
+    cy.get('.euiDataGridHeaderCell__content').contains('Trace ID').click();
+    cy.get('.euiListGroupItem__label').contains('Sort A-Z').click();
+    cy.get('.euiDataGridHeaderCell__content').contains('Trace group').click();
+    cy.get('.euiListGroupItem__label').contains('Move left').click();
+  });
+});
diff --git a/.cypress/integration/6_trace_analytics_traces.spec.js b/.cypress/integration/6_trace_analytics_traces.spec.js
new file mode 100644
index 0000000000..14f71ec101
--- /dev/null
+++ b/.cypress/integration/6_trace_analytics_traces.spec.js
@@ -0,0 +1,155 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import { delay, setTimeFilter, SPAN_ID, TRACE_ID } from '../utils/constants';
+
+describe('Testing traces table empty state', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/traces', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    cy.wait(delay * 3);
+  });
+
+  it('Renders empty state', () => {
+    cy.contains(' (0)').should('exist');
+    cy.contains('No matches').should('exist');
+  });
+});
+
+describe('Testing traces table', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/traces', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the traces table', () => {
+    cy.contains(' (108)').should('exist');
+    cy.contains('03/25/2021 10:23:45').should('exist');
+    cy.contains('03f9c770db5ee2f1caac0...').should('exist');
+    cy.contains('224.99').should('exist');
+
+    // test data contains output from data-prepper 0.8, which doesn't have fields denormalized
+    // Trace Analytics should be able to handle the discrepancy if some fields cannot be parsed
+    cy.contains('Invalid date').should('exist');
+    cy.contains('-').should('exist');
+  });
+
+  it('Sorts the traces table', () => {
+    cy.get('.euiTableRow').first().contains('-').should('exist');
+    cy.get('.euiTableCellContent').contains('Trace group').click();
+    cy.get('.euiTableRow').first().contains('/%2A%2A').should('exist');
+  });
+
+  it('Searches correctly', () => {
+    cy.get('input[type="search"]').focus().type(`${TRACE_ID}{enter}`);
+    cy.get('.euiButton__text').contains('Refresh').click();
+    cy.contains(' (1)').should('exist');
+    cy.contains('03/25/2021 10:21:22').should('exist');
+  });
+});
+
+describe('Testing trace view', () => {
+  beforeEach(() => {
+    cy.visit(`app/observability-dashboards#/trace_analytics/traces/${TRACE_ID}`, {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+  });
+
+  it('Renders the trace view', () => {
+    cy.contains('43.75%').should('exist');
+    cy.contains('42.58%').should('exist');
+    cy.contains('03/25/2021 10:21:22').should('exist');
+    cy.contains(TRACE_ID).should('exist');
+
+    cy.get('div.js-plotly-plot').should('have.length.gte', 2);
+    cy.get('text[data-unformatted="database <br>mysql.APM "]').should('exist');
+    cy.contains(`"${SPAN_ID}"`).should('exist');
+  });
+
+  it('Has working breadcrumbs', () => {
+    cy.get(`.euiBreadcrumb[href="#/trace_analytics/traces/${TRACE_ID}"]`).click();
+    cy.wait(delay);
+    cy.get('h2.euiTitle').contains(TRACE_ID).should('exist');
+    cy.get('.euiBreadcrumb[href="#/trace_analytics/traces"]').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Traces').should('exist');
+    cy.get('.euiBreadcrumb[href="#/trace_analytics/home"]').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Dashboard').should('exist');
+    cy.get('.euiBreadcrumb[href="observability-dashboards#/"]').click();
+    cy.wait(delay);
+    cy.get('.euiTitle').contains('Event analytics').should('exist');
+  });
+
+  it('Renders data grid, flyout and filters', () => {
+    cy.get('.euiButton__text[title="Span list"]').click({ force: true });
+    cy.contains('2 columns hidden').should('exist');
+
+    cy.wait(delay);
+    cy.get('.euiLink').contains(SPAN_ID).trigger('mouseover', { force: true });
+    cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true });
+    cy.get('button[data-datagrid-interactable="true"]').eq(0).click({ force: true }); // first click doesn't go through eui data grid
+    cy.wait(delay);
+    cy.contains('Span detail').should('exist');
+    cy.contains('Span attributes').should('exist');
+    cy.get('.euiTextColor').contains('Span ID').trigger('mouseover');
+    cy.get('.euiButtonIcon[aria-label="span-flyout-filter-icon"').click({ force: true });
+    cy.wait(delay);
+
+    cy.get('.euiBadge__text').contains('spanId: ').should('exist');
+    cy.contains('Spans (1)').should('exist');
+  });
+});
+
+describe('Testing traces table', () => {
+  beforeEach(() => {
+    cy.visit('app/observability-dashboards#/trace_analytics/traces', {
+      onBeforeLoad: (win) => {
+        win.sessionStorage.clear();
+      },
+    });
+    setTimeFilter();
+  });
+
+  it('Renders the traces table and verify Table Column, Pagination and Rows Data ', () => {
+    cy.get('.euiTableCellContent__text').contains('Trace ID').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Trace group').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Latency (ms)').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Percentile in trace group').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Errors').should('exist');
+    cy.get('.euiTableCellContent__text').contains('Last updated').should('exist');
+    cy.get('[data-test-subj="pagination-button-next"]').click();
+    cy.contains('client_pay_order').should('exist');
+    cy.get('[data-test-subj="pagination-button-previous"]').click();
+    cy.contains('224.99').should('exist');
+    cy.get('.euiButtonEmpty').contains('5').click();
+    cy.contains('690d3c7af1a78cf89c43e...').should('exist');
+    cy.contains('5be8370207cbb002a165d...').click();
+    cy.contains('client_create_order').should('exist');
+    cy.get('path[style*="rgb(116, 146, 231)"]').should('exist');
+    cy.go('back');
+    cy.wait(delay);
+    cy.get('.euiButtonEmpty__text').contains('Rows per page').click();
+    cy.get('.euiContextMenuItem__text').contains('15 rows').click();
+    let expected_row_count=15;
+    cy.get('.euiTable--auto')
+    .find("tr")
+    .then((row) => {
+      let total=row.length-1;
+      expect(total).to.equal(expected_row_count);
+    });
+  });
+});
diff --git a/.cypress/integration/7_app_analytics.spec.js b/.cypress/integration/7_app_analytics.spec.js
new file mode 100644
index 0000000000..377b2d3237
--- /dev/null
+++ b/.cypress/integration/7_app_analytics.spec.js
@@ -0,0 +1,596 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+
+import {
+  delay,
+  moveToHomePage,
+  moveToCreatePage,
+  moveToApplication,
+  moveToEditPage,
+  changeTimeTo24,
+  expectMessageOnHover,
+  baseQuery,
+  nameOne,
+  nameTwo,
+  nameThree,
+  description,
+  service_one,
+  service_two,
+  trace_one,
+  trace_two,
+  trace_three,
+  query_one,
+  query_two,
+  availability_default,
+  visOneName,
+  visTwoName,
+  composition,
+  newName,
+  TYPING_DELAY,
+  timeoutDelay
+} from '../utils/app_constants';
+import { supressResizeObserverIssue } from '../utils/constants';
+
+describe('Creating application', () => {
+  beforeEach(() => {
+    moveToCreatePage();
+  });
+
+  it('Suggests correct autocompletion', () => {
+    cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').click();
+    cy.get('.aa-List').find('.aa-Item').should('have.length', 1);
+    cy.get('.aa-Item').contains('source').should('exist');
+    cy.focused().type('{enter}');
+    cy.get('.aa-List').find('.aa-Item').should('have.length', 1);
+    cy.get('.aa-Item').contains('=').should('exist');
+    cy.focused().type('{enter}');
+    cy.focused().type('opensearch');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').click();
+    cy.get('.aa-Item').contains('opensearch_dashboards_sample_data_flights').click();
+    cy.focused().clear();
+    cy.get('.aa-List').find('.aa-Item').should('have.length', 1);
+    cy.focused().type('{enter}');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain', 'source ');
+    cy.focused().type('{enter}');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain', 'source = ');
+    cy.focused().type('opensearch');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').click();
+    cy.get('.aa-Item').contains('opensearch_dashboards_sample_data_flights').click();
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain', 'source = opensearch_dashboards_sample_data_flights ');
+    cy.focused().type('{downArrow}');
+    cy.focused().type('{enter}');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain', 'source = opensearch_dashboards_sample_data_flights, ');
+    cy.focused().type('opensearch');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').click();
+    cy.get('.aa-Item').contains('opensearch_dashboards_sample_data_logs').click();
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain', 'source = opensearch_dashboards_sample_data_flights,opensearch_dashboards_sample_data_logs ');
+  });
+
+  it('Creates an application and redirects to application', () => {
+    expectMessageOnHover('createButton', 'Name is required.');
+    cy.get('[data-test-subj="nameFormRow"]').type(nameOne);
+    cy.get('[data-test-subj="descriptionFormRow"]').type('This application is for testing.');
+    expectMessageOnHover('createButton', 'Provide at least one log source, service, entity or trace group.');
+    cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="servicesEntitiesComboBox"]').click();
+    cy.focused().type('{downArrow}');
+    cy.focused().type('{enter}');
+    cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1');
+    cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="createButton"]').should('not.be.disabled');
+    cy.get('[data-test-subj="createAndSetButton"]').should('be.disabled');
+    expectMessageOnHover('createAndSetButton', 'Log source is required to set availability.');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY});
+    cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http');
+    cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click');
+    cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click');
+    cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2');
+    cy.get('[data-test-subj="createButton"]').should('not.be.disabled');
+    cy.get('[data-test-subj="createButton"]').click();
+    cy.wait(delay * 3);
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne);
+    cy.get('[data-test-subj="app-analytics-panelTab"]').click();
+    cy.get('[data-test-subj="addFirstVisualizationText"]').should('exist');
+  });
+
+  it('Redirects to home page on cancel', () => {
+    cy.get('[data-test-subj="cancelCreateButton"]').contains('Cancel').click();
+    cy.get('[data-test-subj="applicationHomePageTitle"]').should('exist');
+  });
+
+  it('Saves current input on reload', () => {
+    cy.get('[data-test-subj="nameFormRow"]').type(nameOne);
+    cy.get('[data-test-subj="descriptionFormRow"]').type(description);
+    cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').click();
+    cy
+      .get('[data-test-subj="searchAutocompleteTextArea"]')
+      .focus()
+      .type(baseQuery, {delay: TYPING_DELAY});
+    cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="servicesEntitiesComboBox"]').scrollIntoView();
+    cy.get('[data-test-subj="servicesEntitiesComboBox"]').trigger('mouseover').click();
+    cy.get('.euiFilterSelectItem').contains(service_one).click({ force: true });
+    cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1');
+    cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http');
+    cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click');
+    cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click');
+    cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2');
+    cy.reload();
+    cy.wait(delay);
+    cy.get('[data-test-subj="nameFormRow"]').find('.euiFieldText').should('contain.value', nameOne);
+    cy.get('[data-test-subj="descriptionFormRow"]').find('.euiFieldText').should('contain.value', description);
+    cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', baseQuery);
+    cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1');
+    cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2');
+  });
+
+  it('Shows clear modals before clearing', () => {
+    cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="clearLogSourceButton"]').should('be.disabled');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY});
+    cy.get('[data-test-subj="clearLogSourceButton"]').click();
+    cy.get('.euiButton--danger').contains('Clear').click();
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', '');
+    cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="servicesEntitiesComboBox"]').trigger('mouseover').click();
+    cy.get('.euiFilterSelectItem').contains(service_one).trigger('click');
+    cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '1');
+    cy.get('[data-test-subj="clearServicesEntitiesButton"]').click();
+    cy.get('.euiButton--danger').contains('Clear all').click();
+    cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '0');
+    cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="traceGroupsComboBox"]').scrollIntoView().type('http');
+    cy.get('.euiFilterSelectItem').contains(trace_one).trigger('click');
+    cy.get('.euiFilterSelectItem').contains(trace_two).trigger('click');
+    cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '2');
+    cy.get('[data-test-subj="clearTraceGroupsButton"]').click();
+    cy.get('.euiButton--danger').contains('Clear all').click();
+    cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '0');
+  });
+
+  it('Saves time range for each application', () => {
+    cy.get('[data-test-subj="nameFormRow"]').type(nameTwo);
+    cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(baseQuery, {delay: TYPING_DELAY});
+    cy.get('[data-test-subj="createButton"]').should('not.be.disabled');
+    cy.get('[data-test-subj="createButton"]').click();
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameTwo);
+    changeTimeTo24('weeks');
+    cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks');
+    cy.get('.euiBreadcrumb[href="#/application_analytics"]').click();
+    cy.wait(delay);
+    cy.get(`[data-test-subj="${nameOne}ApplicationLink"]`).click();
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne);
+    changeTimeTo24('months');
+    cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
+    cy.get('.euiBreadcrumb[href="#/application_analytics"]').click();
+    cy.get(`[data-test-subj="${nameTwo}ApplicationLink"]`).click();
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameTwo);
+    cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 weeks');
+    cy.get('.euiBreadcrumb[href="#/application_analytics"]').click();
+    cy.get(`[data-test-subj="${nameOne}ApplicationLink"]`).click();
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne);
+    cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
+  });
+});
+
+describe('Setting availability', () => {
+  it('Redirects to set availability at three entry points', () => {
+    moveToCreatePage();
+    cy.get('[data-test-subj="nameFormRow"]').type(nameThree);
+    cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus();
+    cy.focused().type('source = ', { delay: TYPING_DELAY });
+    cy.focused().type('{enter}');
+    cy.get('[data-test-subj="createAndSetButton"]').click();
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
+    cy.get('.euiBreadcrumb[href="#/application_analytics"]').click();
+    cy.get('[data-test-subj="setAvailabilityHomePageLink"]').first().click();
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
+    cy.get('.euiTab-isSelected[id="app-analytics-log"]').should('exist', { timeout: timeoutDelay });
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', availability_default);
+    cy.get('[id="explorerPlotComponent"]').should('exist');
+    cy.get('.euiTab-isSelected[id="availability-panel"]').should('exist');
+    cy.get('.euiBreadcrumb[href="#/application_analytics"]').click();
+    cy.get(`[data-test-subj="${nameThree}ApplicationLink"]`).click();
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameThree);
+    cy.get('[data-test-subj="app-analytics-configTab"]').click();
+    cy.get('[data-test-subj="setAvailabilityConfigLink"]').click();
+    cy.get('.euiTab-isSelected[id="app-analytics-log"]').should('exist', { timeout: timeoutDelay });
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('contain.value', availability_default);
+    cy.get('[id="explorerPlotComponent"]').should('exist');
+    cy.get('.euiTab-isSelected[id="availability-panel"]').should('exist');
+  });
+});
+
+describe('Viewing application', () => {
+  beforeEach(() => {
+    moveToApplication(nameOne);
+  });
+
+  it('Has working breadcrumbs', () => {
+    cy.get('.euiBreadcrumb').contains(nameOne).click();
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne);
+    cy.get('.euiBreadcrumb[href="#/application_analytics"]').click();
+    cy.get('[data-test-subj="applicationHomePageTitle"]').should('contain', 'Applications');
+    cy.get('.euiBreadcrumb[href="observability-dashboards#/"]').click();
+    cy.get('[data-test-subj="eventHomePageTitle"]').should('contain', 'Event analytics');
+  });
+
+  it('Shares time range among tabs', () => {
+    changeTimeTo24('months');
+    cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
+    cy.get('[data-test-subj="app-analytics-serviceTab"]').click();
+    cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
+    cy.get('[data-test-subj="app-analytics-traceTab"]').click();
+    supressResizeObserverIssue();
+    cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
+    cy.get('[data-test-subj="app-analytics-logTab"]').click();
+    cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
+    cy.get('[data-test-subj="app-analytics-panelTab"]').click();
+    cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
+  });
+
+  it('Shows latency variance in dashboards table', () => {
+    changeTimeTo24('months');
+    cy.get('[data-test-subj="dashboardTable"]').first().within(($table) => {
+      cy.get('.plot-container').should('have.length.at.least', 1);
+    })
+  });
+
+  it('Adds filter when Trace group name is clicked', () => {
+    cy.get('[data-test-subj="app-analytics-overviewTab"]').click();
+    cy.get('[data-test-subj="dashboard-table-trace-group-name-button"]').contains('client_create_order').click();
+    cy.get('.euiTableRow').should('have.length', 1, { timeout: timeoutDelay });
+    cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('exist');
+    cy.get('[data-test-subj="filterBadge"]').click();
+    cy.get('[data-test-subj="deleteFilterIcon"]').click();
+    cy.get('[data-test-subj="client_create_orderFilterBadge"]').should('not.exist');
+  });
+
+  it('Opens service detail flyout when Service Name is clicked', () => {
+    cy.get('[data-test-subj="app-analytics-serviceTab"]').click();
+    cy.wait(delay);
+    cy.get('.euiLink').contains('authentication').click();
+    supressResizeObserverIssue();
+    cy.get('[data-test-subj="serviceDetailFlyoutTitle"]').should('be.visible');
+    cy.get('[data-test-subj="serviceDetailFlyout"]').within(($flyout) => {
+      cy.get('[data-test-subj="Number of connected servicesDescriptionList"]').should('contain', '3');
+      cy.get('[data-text="Error rate"]').click();
+      cy.get('.ytitle').contains('Error rate').should('exist');
+    });
+    cy.get('[data-test-subj="dataGridRowCell"] button').contains('718dc32a693c8a17').click();
+    cy.get('[data-test-subj="spanDetailFlyout"]').contains('Span detail').should('be.visible');
+    cy.get('[data-test-subj="ServiceDescriptionList"]').should('contain', 'authentication');
+    cy.get('[data-test-subj="euiFlyoutCloseButton"]').click();
+    cy.get('[data-test-subj="serviceDetailFlyout"]').should('not.be.visible');
+    cy.get('[data-test-subj="spanDetailFlyout"]').should('not.be.visible');
+  });
+
+  it('Opens trace detail flyout when Trace ID is clicked', () => {
+    cy.get('[data-test-subj="app-analytics-traceTab"]').click();
+    supressResizeObserverIssue();
+    cy.wait(delay);
+    cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click();
+    cy.get('[data-test-subj="traceDetailFlyoutTitle"]').should('be.visible');
+    cy.get('[data-test-subj="traceDetailFlyout"]').within(($flyout) => {
+      cy.get('[data-test-subj="LatencyDescriptionList"]').should('contain', '224.99');
+    });
+    cy.get('[data-test-subj="euiFlyoutCloseButton"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="traceDetailFlyout"]').should('not.be.visible');
+    cy.get('[title="03f9c770db5ee2f1caac0afc36db49ba"]').click();
+    cy.get('[data-text="Span list"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="dataGridRowCell"] button').contains('d67c5bb617ba9203').click();
+    cy.get('[data-test-subj="spanDetailFlyout"]').should('be.visible');
+    cy.get('[data-test-subj="euiFlyoutCloseButton"]').click();
+    cy.get('[data-test-subj="spanDetailFlyout"]').should('not.be.visible');
+  });
+
+  it('Opens span detail flyout when Span ID is clicked', () => {
+    cy.get('[data-test-subj="app-analytics-traceTab"]').click();
+    supressResizeObserverIssue();
+    cy.wait(delay);
+    cy.get('[data-test-subj="dataGridRowCell"]').contains('5ff3516909562c60').click();
+    cy.get('[data-test-subj="spanDetailFlyout"]').should('be.visible');
+    cy.get('[data-test-subj="spanDetailFlyout"]').within(($flyout) => {
+      cy.get('[data-test-subj="OperationDescriptionList"]').should('contain', 'HTTP GET');
+    });
+    cy.get('.euiText').contains('order').click();
+    cy.get('[aria-label="span-flyout-filter-icon"]').click();
+    cy.focused().blur();
+    cy.get('[data-test-subj="euiFlyoutCloseButton"]').click();
+    cy.get('[data-test-subj="filterBadge"][title="serviceName: order"]').should('exist');
+    cy.get('[aria-label="Remove filter"]').click();
+    cy.get('[data-test-subj="filterBadge"][title="serviceName: order"]').should('not.exist');
+  });
+
+  it('Shows base query', () => {
+    cy.get('[data-test-subj="app-analytics-logTab"]').click();
+    cy.get('.euiBadge[title="Base Query"]').should('exist');
+    cy.get('.euiBadge[title="Base Query"]').trigger('mouseover');
+    cy.get('.euiToolTipPopover').contains('source = opensearch_dashboards_sample_data_flights').should('exist');
+  });
+
+  it('Saves visualization #1 to panel', () => {
+    cy.get('[data-test-subj="app-analytics-panelTab"]').click();
+    cy.get('[data-test-subj="addVisualizationButton"]').first().click();
+    cy.wait(delay);
+    cy.get('[id="explorerPlotComponent"]').should('exist');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').click();
+    cy.get('.aa-List').find('.aa-Item').should('have.length', 11);
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(query_one, {delay: TYPING_DELAY});
+    changeTimeTo24('months');
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="main-content-visTab"]').click();
+    supressResizeObserverIssue();
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]').click().type(visOneName);
+    cy.wait(delay);
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="app-analytics-panelTab"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="Flights to VeniceVisualizationPanel"]').should('exist');
+    cy.get('[id="explorerPlotComponent"]').should('exist');
+    cy.get('[class="trace bars"]').should('exist');
+  });
+
+  it('Adds availability level to visualization #1', () => {
+    cy.get('[data-test-subj="app-analytics-panelTab"]').click();
+    cy.get('[aria-label="actionMenuButton"]').click();
+    cy.get('[data-test-subj="editVizContextMenuItem"]').click();
+    supressResizeObserverIssue();
+    cy.get('[data-test-subj="superDatePickerShowDatesButton"]').should('contain', 'Last 24 months');
+    cy.get('.euiTab[id="availability-panel"]').click();
+    cy.get('[title="Bar"]').click();
+    cy.focused().type('{downArrow}');
+    cy.focused().type('{enter}');
+    cy.get('[data-test-subj="addAvailabilityButton"]').click();
+    cy.get('[data-test-subj="euiColorPickerAnchor"]').click();
+    cy.get('[aria-label="Select #54B399 as the color"]').click();
+    cy.get('[data-test-subj="nameFieldText"]').click().type('Available');
+    cy.get('option').contains('≥').should('exist');
+    cy.get('option').contains('≤').should('exist');
+    cy.get('option').contains('>').should('exist');
+    cy.get('option').contains('<').should('exist');
+    cy.get('option').contains('=').should('exist');
+    cy.get('option').contains('≠').should('exist');
+    cy.get('[data-test-subj="expressionSelect"]').select('>');
+    cy.get('[data-test-subj="valueFieldNumber"]').clear().type('0.5');
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+    cy.get('[data-test-subj="app-analytics-panelTab"]').click();
+    cy.get('[id="explorerPlotComponent"]').should('exist');
+    cy.get('[class="lines"]').should('exist');
+    cy.get('.textpoint').contains('Available').should('exist');
+    cy.get('.euiBreadcrumb[href="#/application_analytics"]').click();
+    cy.get('[data-test-subj="AvailableAvailabilityBadge"]').should('contain', 'Available');
+    cy.get('[data-test-subj="AvailableAvailabilityBadge"][style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('exist');
+  });
+
+  it('Saves visualization #2 to panel with availability level', () => {
+    changeTimeTo24('months');
+    cy.get('[data-test-subj="app-analytics-logTab"]').click();
+    cy.get('[id="explorerPlotComponent"]', { timeout: timeoutDelay }).should('exist');
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').focus().type(query_two, {delay: TYPING_DELAY});
+    cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="main-content-visTab"]').click();
+    supressResizeObserverIssue();
+    cy.get('.euiTab[id="availability-panel"]').click();
+    cy.get('[title="Bar"]').click();
+    cy.focused().type('{downArrow}');
+    cy.focused().type('{enter}');
+    cy.wait(delay);
+    cy.get('[data-test-subj="addAvailabilityButton"]').click();
+    cy.get('[data-test-subj="euiColorPickerAnchor"]').click();
+    cy.get('[aria-label="Select #9170B8 as the color"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="nameFieldText"]').click().type('Super');
+    cy.get('[data-test-subj="expressionSelect"]').select('<');
+    cy.get('[data-test-subj="valueFieldNumber"]').clear().type('5.5');
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="addAvailabilityButton"]').click();
+    cy.get('[data-test-subj="euiColorPickerAnchor"]').first().click();
+    cy.get('[aria-label="Select #CA8EAE as the color"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="nameFieldText"]').first().click().type('Cool');
+    cy.get('[data-test-subj="expressionSelect"]').first().select('>');
+    cy.get('[data-test-subj="valueFieldNumber"]').first().clear().type('0');
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+    cy.get('[data-test-subj="eventExplorer__querySaveName"]').click().type(visTwoName);
+    cy.wait(delay);
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="app-analytics-panelTab"]').click();
+    cy.wait(delay);
+    cy.get('[id="explorerPlotComponent"]').should('have.length', 2);
+    moveToHomePage();
+    cy.get('[data-test-subj="SuperAvailabilityBadge"][style="background-color: rgb(145, 112, 184); color: rgb(0, 0, 0);"]').should('contain', 'Super');
+  });
+
+  it('Configuration tab shows details', () => {
+    cy.get('[data-test-subj="app-analytics-configTab"]').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="configBaseQueryCode"]').should('contain', baseQuery);
+    cy.get('[aria-label="List of services and entities"]').find('li').should('have.length', 1);
+    cy.get('[aria-label="List of trace groups"]').find('li').should('have.length', 2);
+    cy.get('option').should('have.length', 2);
+  });
+
+
+  it('Changes availability visualization', () => {
+    cy.get('[data-test-subj="app-analytics-configTab"]').click();
+    cy.wait(delay);
+    cy.get('select').select(visOneName);
+    cy.wait(delay);
+    moveToHomePage();
+    cy.get('[data-test-subj="AvailableAvailabilityBadge"][style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('contain', 'Available');
+    moveToApplication(nameOne);
+    cy.get('[data-test-subj="app-analytics-configTab"]').click();
+    cy.wait(delay);
+    cy.get('select').find('option:selected').should('have.text', visOneName);
+  })
+});
+
+describe('Separate from other plugins', () => {
+  it('Hides application visualizations in Event Analytics', () => {
+    cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics`);
+    cy.wait(delay * 3);
+    // When there are saved queries or visualizations there are two buttons
+    cy.get('body').then(($body) => {
+      if ($body.find('.euiButton').length == 2) {
+        cy.get('input.euiFieldSearch').type(visOneName, {delay: TYPING_DELAY});
+        cy.wait(delay);
+        cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
+        cy.get('input.euiFieldSearch').clear().type(visTwoName, {delay: TYPING_DELAY});
+        cy.wait(delay);
+        cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
+        cy.get('[class="euiFormControlLayoutClearButton"]').click();
+        cy.wait(delay);
+        cy.get('[data-test-subj="tablePaginationPopoverButton"]').click();
+        cy.get('.euiContextMenuItem__text').contains('50 rows').click();
+        cy.get('.euiCheckbox__input[data-test-subj="checkboxSelectAll"]').click();
+        cy.wait(delay);
+        cy.get('[data-test-subj="eventHomeAction"]').click();
+        cy.wait(delay);
+        cy.get('[data-test-subj="eventHomeAction__delete"]').click();
+        cy.wait(delay);
+        cy.get('[data-test-subj="popoverModal__deleteButton"]').should('be.disabled');
+        cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete');
+        cy.get('[data-test-subj="popoverModal__deleteButton"]').should('not.be.disabled');
+        cy.get('[data-test-subj="popoverModal__deleteButton"]').click();
+        cy.wait(delay);
+      }
+    })
+  });
+
+  it('Hides application visualizations in Operational Panels', () => {
+    cy.visit(
+      `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
+    );
+    cy.get('[data-test-subj="operationalPanelsActionsButton"]', { timeout: timeoutDelay }).click();
+    cy.get('[data-test-subj="addSampleContextMenuItem"]', { timeout: timeoutDelay }).click();
+    cy.get('[data-test-subj="confirmModalConfirmButton"]', { timeout: timeoutDelay }).click();
+    cy.wait(delay * 2);
+    cy.get('.euiLink').contains('[Logs] Web traffic Panel').first().click();
+    cy.wait(delay * 2);
+    cy.get('[data-test-subj="addVisualizationButton"]').click();
+    cy.get('.euiContextMenuItem__text').contains('Select existing visualization').click();
+    cy.get('option').contains(visOneName).should('not.exist');
+    cy.get('option').contains(visTwoName).should('not.exist');
+  });
+
+  it('Hides application panels in Operational Panels', () => {
+    cy.visit(
+      `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
+    );
+    cy.get('[data-test-subj="operationalPanelSearchBar"]', { timeout: timeoutDelay }).type(`${nameOne}'s Panel`, {delay: TYPING_DELAY});
+    cy.get('.euiTableCellContent__text').contains('No items found').should('exist');
+    cy.get('.euiFormControlLayoutClearButton').click();
+    cy.get('[data-test-subj="operationalPanelSearchBar"]').type('[Logs] Web traffic Panel', {delay: TYPING_DELAY});
+    cy.get('.euiTableRow').first().within(($row) => {
+      cy.get('.euiCheckbox').click();
+    });
+    cy.get('[data-test-subj="operationalPanelsActionsButton"]', { timeout: timeoutDelay }).click();
+    cy.get('[data-test-subj="deleteContextMenuItem"]', { timeout: timeoutDelay }).click();
+    cy.get('[data-test-subj="popoverModal__deleteTextInput"]', { timeout: timeoutDelay }).type('delete');
+    cy.get('[data-test-subj="popoverModal__deleteButton"]', { timeout: timeoutDelay }).should('not.be.disabled');
+    cy.get('[data-test-subj="popoverModal__deleteButton"]', { timeout: timeoutDelay }).click();
+  });
+});
+
+describe('Editing application', () => {
+  beforeEach(() => {
+    moveToEditPage();
+  });
+
+  it('Redirects to application after saving changes', () => {
+    cy.get('[data-test-subj="logSourceAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="searchAutocompleteTextArea"]').should('be.disabled');
+    cy.get('[data-test-subj="servicesEntitiesAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="servicesEntitiesComboBox"]').click();
+    cy.get('.euiFilterSelectItem').contains(service_two).click();
+    cy.get('[data-test-subj="servicesEntitiesCountBadge"]').should('contain', '2');
+    cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(1).click();
+    cy.get('.euiFilterSelectItem').contains(trace_three).trigger('click');
+    cy.get('[data-test-subj="traceGroupsCountBadge"]').should('contain', '3');
+    cy.get('[data-test-subj="traceGroupsAccordion"]').trigger('mouseover').click();
+    cy.get('[data-test-subj="createButton"]').click();
+    cy.get('[data-test-subj="app-analytics-configTab"]').click();
+    cy.get('[data-test-subj="configBaseQueryCode"]').should('contain', baseQuery);
+    cy.get('[aria-label="List of services and entities"]').find('li').should('have.length', 2);
+    cy.get('[aria-label="List of trace groups"]').find('li').should('have.length', 3);
+    cy.get('[data-test-subj="applicationTitle"]').should('contain', nameOne);
+  });
+});
+
+describe('Application Analytics home page', () => {
+  beforeEach(() => {
+    moveToHomePage();
+  })
+
+  it('Show correct information in table', () => {
+    cy.get(`[data-test-subj="${nameOne}ApplicationLink"]`).should('exist');
+    cy.get('[data-test-subj="appAnalytics__compositionColumn"]').should('contain', composition);
+    cy.get('[data-test-subj="AvailableAvailabilityBadge"][style="background-color: rgb(84, 179, 153); color: rgb(0, 0, 0);"]').should('contain', 'Available')
+  });
+
+  it('Renames application', () => {
+    cy.get('[data-test-subj="appAnalyticsActionsButton"]').click();
+    cy.get('[data-test-subj="renameApplicationContextMenuItem"]').should('be.disabled');
+    cy.get('[data-test-subj="appAnalyticsActionsButton"]').click();
+    cy.get('.euiTableRow').first().within(($row) => {
+      cy.get('.euiCheckbox').click();
+    });
+    cy.wait(delay);
+    cy.get('[data-test-subj="appAnalyticsActionsButton"]').click();
+    cy.get('[data-test-subj="renameApplicationContextMenuItem"]').click();
+    cy.get('[data-test-subj="customModalFieldText"]').clear().focus().type(newName);
+    cy.get('[data-test-subj="runModalButton"]').click();
+    cy.wait(delay);
+    cy.get('.euiToast').contains(`Application successfully renamed to "${newName}"`);
+    cy.get('.euiTableRow').first().within(($row) => {
+      cy.get('.euiLink').contains(newName).should('exist');
+    });
+  });
+
+  it('Deletes application', () => {
+    cy.get('[data-test-subj="appAnalyticsActionsButton"]').click();
+    cy.get('[data-test-subj="deleteApplicationContextMenuItem"]').should('exist');
+    cy.get('[data-test-subj="appAnalyticsActionsButton"]').click();
+    cy.get('.euiTableRow').first().within(($row) => {
+      cy.get('.euiCheckbox').click();
+    });
+    cy.get('.euiTableRow').eq(1).within(($row) => {
+      cy.get('.euiCheckbox').click();
+    });
+    cy.get('.euiTableRow').eq(2).within(($row) => {
+      cy.get('.euiCheckbox').click();
+    });
+    cy.get('[data-test-subj="appAnalyticsActionsButton"]').click();
+    cy.get('[data-test-subj="deleteApplicationContextMenuItem"]').click();
+    cy.get('[data-test-subj="popoverModal__deleteTextInput"]').type('delete');
+    cy.get('[data-test-subj="popoverModal__deleteButton"').click();
+    cy.wait(delay);
+    cy.get('.euiToast').contains(`Applications successfully deleted!`);
+    cy.get(`[data-test-subj="${newName}ApplicationLink"]`).should('not.exist');
+  });
+});
diff --git a/.cypress/integration/VisualizationCharts/10_scatter_chart.spec.js b/.cypress/integration/VisualizationCharts/10_scatter_chart.spec.js
new file mode 100644
index 0000000000..0c093812e1
--- /dev/null
+++ b/.cypress/integration/VisualizationCharts/10_scatter_chart.spec.js
@@ -0,0 +1,228 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+import {
+    delay,
+    TEST_QUERIES,
+    querySearch,
+    landOnEventVisualizations
+  } from '../../utils/event_analytics/constants';
+  
+  const numberOfWindow = 4;
+  const legendSize = 20;
+  const pointSize = 30;
+  const pointSizeUpdated = 35;
+  const lineWidth = 7;
+  const lineWidthUpdated = 9;
+  const fillOpacity = 10;
+  const fillOpacityUpdated = 50;
+  const rotateLevel = 45;
+  const thresholdValue = 50;
+
+  const renderScatterChart = () => {
+    landOnEventVisualizations();
+    querySearch(TEST_QUERIES[6].query, TEST_QUERIES[6].dateRangeDOM);
+    cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('scatter').type('{enter}');
+  };
+  
+  describe('Render scatter chart and verify default behaviour ', () => {
+    beforeEach(() => {
+      renderScatterChart();
+    });
+  
+    it('Render scatter chart and verify by default the data gets render', () => {
+      cy.get('.xy').should('exist');
+    });
+  
+    it('Render scatter chart and verify you see data configuration panel and chart panel', () => {
+      cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow);
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist');
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist');
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist');
+      cy.get('.euiIEFlexWrapFix').contains('Panel options').click();
+      cy.get('.euiIEFlexWrapFix').contains('Legend').click();
+      cy.get('.euiIEFlexWrapFix').contains('Chart styles').click();
+      cy.get('.euiIEFlexWrapFix').contains('Color theme').click();
+      cy.get('.euiIEFlexWrapFix').contains('Thresholds').click();
+      cy.get('[aria-label="Press to toggle this panel"]').eq(1).click();
+      cy.get('[aria-label="Press to toggle this panel"]').eq(2).click();
+    });
+  
+    it('Render scatter chart and verify the data configuration panel and chart panel are collapsable', () => {
+      cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow);
+      cy.get('[aria-label="Press to toggle this panel"]').eq(1).click();
+      cy.get('[aria-label="Press to toggle this panel"]').eq(2).click();
+    });
+  });
+  
+  describe('Render scatter chart for data configuration panel', () => {
+    beforeEach(() => {
+      renderScatterChart();
+    });
+  
+    it('Render scatter chart and verify data config panel', () => {
+      cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'span(timestamp,1d)');
+      cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()');
+    });
+  
+    it('Render scatter chart and verify data config panel no result found if metric is missing', () => {
+      cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click();
+      cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist');
+      cy.get('.euiComboBoxOption__content').contains('count()').click();
+      cy.get('.main-svg').contains('No results found').should('not.exist');
+    });
+  });
+  
+  describe('Render scatter chart for panel options', () => {
+    beforeEach(() => {
+      renderScatterChart();
+    });
+  
+    it('Render scatter chart and verify the title gets updated according to user input ', () => {
+      cy.get('input[name="title"]').type("scatter Chart");
+      cy.get('textarea[name="description"]').should('exist').click();
+      cy.get('.gtitle').contains('scatter Chart').should('exist');
+    });
+  });
+  
+  describe('Render scatter chart for legend', () => {
+    beforeEach(() => {
+      renderScatterChart();
+    });
+  
+    it('Render scatter chart and verify legends for Show and Hidden', () => {
+      cy.get('[data-text="Show"]').should('have.text', 'Show');
+      cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked');
+      cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click();
+      cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked');
+      cy.get('[data-unformatted="max(bytes)"]').should('not.exist');
+    });
+  
+    it('Render scatter chart and verify legends for position Right and Bottom', () => {
+      cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked');
+      cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click();
+      cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked');
+    });
+  
+    it('Render scatter chart and increase Legend Size', () => {
+      cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(legendSize);
+      cy.get('textarea[name="description"]').should('exist').click();
+      cy.get('.legendtext').should('have.css', 'font-size', '20px');
+    });
+  });
+  
+  describe('Render scatter chart for Chart Styles ', () => {
+    beforeEach(() => {
+      renderScatterChart();
+    });
+  
+    it('Render ltime serires and verify chart style of Marker Mode', () => {
+      cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart');
+      cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Points');
+      cy.get('[data-text="Marker"]').should('have.text', 'Marker').click();
+      cy.get('[data-text="Marker"] [data-test-subj="markers"]').should('have.attr', 'checked');
+  
+    });
+  
+    it('Render scatter chart and verify chart style of Marker Mode with larger Point size', () => {
+      cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart');
+      cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Points');
+      cy.get('[data-text="Marker"]').should('have.text', 'Marker').click();
+      cy.get('[data-text="Marker"] [data-test-subj="markers"]').should('have.attr', 'checked');
+      cy.get('input[type="range"]')
+        .then($el => $el[0].stepUp(pointSize))
+        .trigger('change')
+      cy.get('.euiRangeSlider').should('have.value', pointSizeUpdated)
+  
+    });
+  
+    it('Render scatter chart and verify chart style of Lines+Marker Mode', () => {
+      cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart');
+      cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Lines and Marker');
+      cy.get('[data-text="Lines + Markers"]').should('have.text', 'Lines + Markers').click();
+      cy.get('[data-text="Lines + Markers"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked');
+  
+    });
+  
+    it('Render scatter chart and verify chart style of Lines+Marker Mode with Line Width, Fill Opacity and Point Size', () => {
+      cy.get('#configPanel__panelOptions .euiFieldText').click().type('scatter chart');
+      cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]').click().type('This is the description for scatter chart with chart style of Lines and Marker');
+      cy.get('[data-text="Lines + Markers"]').should('have.text', 'Lines + Markers').click();
+      cy.get('[data-text="Lines + Markers"] [data-test-subj="lines+markers"]').should('not.have.attr', 'checked');
+      cy.get('input[type="range"]').eq(0)
+        .then($el => $el[0].stepUp(lineWidth))
+        .trigger('change')
+      cy.get('.euiRangeSlider').eq(0).should('have.value', lineWidthUpdated)
+      cy.get('input[type="range"]').eq(1)
+        .then($el => $el[0].stepUp(fillOpacity))
+        .trigger('change')
+      cy.get('.euiRangeSlider').eq(1).should('have.value', fillOpacityUpdated)
+      cy.get('input[type="range"]').eq(2)
+        .then($el => $el[0].stepUp(pointSize))
+        .trigger('change')
+      cy.get('.euiRangeSlider').eq(2).should('have.value', pointSizeUpdated)
+      cy.get('input[type="range"]').eq(3)
+      .then($el => $el[0].stepUp(rotateLevel))
+      .trigger('change')
+    cy.get('.euiRangeSlider').eq(3).should('have.value', rotateLevel)
+    });
+  });
+  
+  describe('Render scatter chart for color theme', () => {
+    beforeEach(() => {
+      renderScatterChart();
+    });
+  
+    it('Render scatter chart and "Add Color theme"', () => {
+      cy.get('.euiButton__text').contains('+ Add color theme').click();
+      cy.wait(delay);
+      cy.get('[data-test-subj="comboBoxInput"]').eq(5).click();
+      cy.get('.euiComboBoxOption__content').contains('count()').click();
+      cy.get('path[style*="rgb(252, 5, 5)"]').should('exist');
+  
+    });
+  });
+  
+  describe('Render scatter chart and work with Thresholds', () => {
+    beforeEach(() => {
+      renderScatterChart();
+    });
+  
+    it('Render scatter chart and add threshold', () => {
+      cy.get('.euiButton__text').contains('+ Add threshold').click();
+      cy.get('[data-test-subj="nameFieldText"]').type('scatter chart Threshold');
+      cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type(thresholdValue);
+      cy.get('[data-unformatted="scatter chart Threshold"]').should('be.visible');
+      cy.get('path[style*="rgb(252, 5, 5)"]').should('exist');
+    });
+  });
+  
+  describe('Render scatter chart and verify if reset works properly', () => {
+    beforeEach(() => {
+      renderScatterChart();
+    });
+  
+    it('Render scatter chart with all feild data then click on reset and verify reset works properly', () => {
+      cy.get('input[placeholder="Title"]').type('scatter chart');
+      cy.get('textarea[placeholder="Description"]').type('Description For scatter chart');
+      cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click();
+      cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(legendSize);
+      cy.get('.euiButton__text').contains('+ Add color theme').click();
+      cy.wait(delay);
+      cy.get('[data-test-subj="comboBoxInput"]').eq(5).click();
+      cy.get('.euiComboBoxOption__content').contains('count()').click();
+      cy.get('.euiButton__text').contains('+ Add threshold').click();
+      cy.get('[data-test-subj="nameFieldText"]').type('scatter chart Threshold');
+      cy.get('[data-test-subj="valueFieldNumber"]').eq(1).type(thresholdValue);
+      cy.get('.euiButtonEmpty__text').contains('Reset').click();
+      cy.get('input[placeholder="Title"]').should('not.have.value', 'scatter chart');
+      cy.get('textarea[placeholder="Description"]').should('not.have.value', 'Description For scatter chart')
+      cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked');
+      cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked');
+      cy.get('[data-test-subj="valueFieldNumber"]').eq(0).should('have.value', '');
+    });
+  });
+  
\ No newline at end of file
diff --git a/.cypress/integration/VisualizationCharts/11_horizontalBar_chart.spec.js b/.cypress/integration/VisualizationCharts/11_horizontalBar_chart.spec.js
new file mode 100644
index 0000000000..d8eba981e5
--- /dev/null
+++ b/.cypress/integration/VisualizationCharts/11_horizontalBar_chart.spec.js
@@ -0,0 +1,244 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+import {
+    delay,
+    TEST_QUERIES,
+    querySearch,
+    landOnEventVisualizations,
+  } from '../../utils/event_analytics/constants';
+  
+  const numberOfWindow = 4;
+  const labelSize = 20;
+  const rotateLevel = 45;
+  const groupWidth = 10;
+  const groupWidthUpdated = 0.8;
+  const barWidth = 10;
+  const barWidthUpdated = 80;
+  const lineWidth = 7;
+  const lineWidthUpdated = 8;
+  const fillOpacity = 10;
+  const fillOpacityUpdated = 90;
+  const numberOfColor = 24;
+  
+  const renderHorizontalBarChart = () => {
+    landOnEventVisualizations();
+    querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
+    cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+      .type('Horizontal Bar')
+      .type('{enter}');
+  };
+  
+  describe('Render horizontal bar chart and verify default behaviour ', () => {
+    beforeEach(() => {
+      renderHorizontalBarChart();
+    });
+  
+    it('Render horizontal bar chart and verify by default the data gets render', () => {
+      cy.get('.xy').should('exist');
+    });
+  
+    it('Render horizontal bar chart and verify you see data configuration panel and chart panel', () => {
+      cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow);
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist');
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist');
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist');
+      cy.get('.euiIEFlexWrapFix').contains('Panel options').click();
+      cy.get('.euiIEFlexWrapFix').contains('Legend').click();
+      cy.get('.euiIEFlexWrapFix').contains('Chart styles').click();
+      cy.get('.euiIEFlexWrapFix').contains('Color theme').click();
+      cy.get('[aria-label="Press to toggle this panel"]').eq(1).click();
+      cy.get('[aria-label="Press to toggle this panel"]').eq(2).click();
+    });
+  
+    it('Render horizontal bar chart and verify the data configuration panel and chart panel are collapsable', () => {
+      cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow);
+      cy.get('[aria-label="Press to toggle this panel"]').eq(1).click();
+      cy.get('[aria-label="Press to toggle this panel"]').eq(2).click();
+    });
+  });
+  
+  describe('Render horizontal bar chart for data configuration panel', () => {
+    beforeEach(() => {
+      renderHorizontalBarChart();
+    });
+  
+    it('Render horizontal bar chart and verify data config panel', () => {
+      cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'tags');
+      cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()');
+      cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(2).should('contain', 'avg(bytes)');
+      cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(3).should('contain', 'host');
+    });
+  
+    it('Render horizontal bar chart and verify data config panel restrict user to select a duplicate field on dimension field', () => {
+      cy.get('[data-test-subj="comboBoxInput"]').eq(1).click();
+      cy.get('[data-test-subj="comboBoxClearButton"]').eq(0).click();
+      cy.get('[data-test-subj="comboBoxInput"]').eq(1).click();
+      cy.get('.euiComboBoxOption__content').should('have.length', 1);
+      cy.get('.euiComboBoxOption__content').contains('tags');
+    });
+  
+    it('Render horizontal bar chart and verify data config panel Restrict user to select a duplicate field on Metrics field', () => {
+      cy.get('.euiText.euiText--extraSmall').eq(1).click();
+      cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click();
+      cy.get('[data-test-subj="comboBoxInput"]').eq(3).click();
+      cy.get('.euiComboBoxOption__content').should('not.contain', 'tags');
+      cy.get('.euiComboBoxOption__content').should('have.length', 2);
+    });
+  
+    it('Render horizontal bar chart and verify data config panel no result found if metric is missing', () => {
+      cy.get('.euiText.euiText--extraSmall').eq(0).click();
+      cy.get('.euiText.euiText--extraSmall').eq(1).click();
+      cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click();
+      cy.get('[data-test-subj="comboBoxInput"]').eq(0).click();
+      cy.get('.euiButton__text').contains('Update chart').click();
+      cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist');
+      cy.get('[data-test-subj="comboBoxInput"]').eq(3).click();
+      cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click();
+      cy.get('.euiButton__text').contains('Update chart').click();
+      cy.get('.main-svg').contains('No results found').should('not.exist');
+    });
+  });
+  
+  describe('Render horizontal bar chart for panel options', () => {
+    beforeEach(() => {
+      renderHorizontalBarChart();
+    });
+  
+    it('Render horizontal bar chart and verify the title gets updated according to user input ', () => {
+      cy.get('input[name="title"]').type('horizontal bar chart');
+      cy.get('textarea[name="description"]').should('exist').click();
+      cy.get('.gtitle').contains('horizontal bar chart').should('exist');
+    });
+  });
+  
+  describe('Render horizontal bar chart for legend', () => {
+    beforeEach(() => {
+      renderHorizontalBarChart();
+    });
+  
+    it('Render horizontal bar chart and verify legends for Show and Hidden', () => {
+      cy.get('[data-text="Show"]').should('have.text', 'Show');
+      cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked');
+      cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click();
+      cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked');
+      cy.get('[data-unformatted="max(bytes)"]').should('not.exist');
+    });
+  
+    it('Render horizontal bar chart and verify legends for position Right and Bottom', () => {
+      cy.get('[data-text="Right"]').should('have.text', 'Right');
+      cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked');
+      cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click();
+      cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked');
+    });
+  });
+  
+  describe('Render horizontal bar chart for chart style options', () => {
+    beforeEach(() => {
+      renderHorizontalBarChart();
+    });
+  
+    it('Render horizontal bar chart and increase Label Size ', () => {
+      cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize);
+      cy.get('textarea[name="description"]').should('exist').click();
+      cy.get('[data-unformatted="login"]').should('have.css', 'font-size', '20px');
+    });
+  
+    it('Render horizontal bar chart and "Rotate bar labels"', () => {
+      cy.get('input[type="range"]')
+        .eq(0)
+        .then(($el) => $el[0].stepUp(rotateLevel))
+        .trigger('change');
+      cy.get('.euiRangeSlider').eq(0).should('have.value', rotateLevel);
+    });
+  
+    it('Render horizontal bar chart and change "Group Width"', () => {
+      cy.get('input[type="range"]')
+        .eq(1)
+        .then(($el) => $el[0].stepUp(groupWidth))
+        .trigger('change');
+      cy.get('.euiRangeSlider').eq(1).should('have.value', groupWidthUpdated);
+    });
+  
+    it('Render horizontal bar chart and change "Bar Width"', () => {
+      cy.get('input[type="range"]')
+        .eq(2)
+        .then(($el) => $el[0].stepDown(barWidth))
+        .trigger('change');
+      cy.get('.euiRangeSlider').eq(4).should('have.value', barWidthUpdated);
+    });
+  
+    it('Render horizontal bar chart and change "Line Width"', () => {
+      cy.get('input[type="range"]')
+        .eq(3)
+        .then(($el) => $el[0].stepUp(lineWidth))
+        .trigger('change');
+      cy.get('.euiRangeSlider').eq(3).should('have.value', lineWidthUpdated);
+    });
+  
+    it('Render horizontal bar chart and change "Fill Opacity"', () => {
+      cy.get('input[type="range"]')
+        .eq(4)
+        .then(($el) => $el[0].stepUp(fillOpacity))
+        .trigger('change');
+      cy.get('.euiRangeSlider').eq(4).should('have.value', fillOpacityUpdated);
+    });
+  });
+  
+  describe('Render horizontal bar chart for color theme', () => {
+    beforeEach(() => {
+      renderHorizontalBarChart();
+    });
+  
+    it('Render horizontal bar chart and "Add color theme"', () => {
+      cy.get('.euiButton__text').contains('+ Add color theme').click();
+      cy.wait(delay);
+      cy.get('[data-test-subj="comboBoxInput"]').eq(9).click();
+      cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click();
+      cy.get('.point').find('path[style*="rgb(252, 5, 5)"]').should('have.length', numberOfColor);
+    });
+  });
+  
+  describe('Render horizontal bar chart and verify if reset works properly', () => {
+    beforeEach(() => {
+      renderHorizontalBarChart();
+    });
+  
+    it('Render horizontal bar chart with all feild data then click on reset and verify reset works properly', () => {
+      cy.get('input[placeholder="Title"]').type('horizontal bar chart');
+      cy.get('textarea[placeholder="Description"]').type('Description For horizontal bar chart');
+      cy.get('.euiButton__text').contains('Hidden').click();
+      cy.get('.euiButton__text').contains('Stack').click();
+      cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize);
+      cy.get('input[type="range"]')
+        .eq(0)
+        .then(($el) => $el[0].stepUp(rotateLevel))
+        .trigger('change');
+      cy.get('input[type="range"]')
+        .eq(1)
+        .then(($el) => $el[0].stepUp(groupWidth))
+        .trigger('change');
+      cy.get('input[type="range"]')
+        .eq(2)
+        .then(($el) => $el[0].stepDown(barWidth))
+        .trigger('change');
+      cy.get('input[type="range"]')
+        .eq(3)
+        .then(($el) => $el[0].stepUp(lineWidth))
+        .trigger('change');
+      cy.get('.euiButtonEmpty__text').contains('Reset').click();
+      cy.get('input[placeholder="Title"]').should('not.have.value', 'horizontal bar chart');
+      cy.get('textarea[placeholder="Description"]').should(
+        'not.have.value',
+        'Description For horizontal bar chart'
+      );
+      cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked');
+      cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked');
+      cy.get('[data-text="Vertical"] [data-test-subj="v"]').should('have.attr', 'checked');
+      cy.get('[data-text="Group"] [data-test-subj="group"]').should('have.attr', 'checked');
+      cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', '');
+    });
+  });
diff --git a/.cypress/integration/VisualizationCharts/12_boxPlot_chart.spec.js b/.cypress/integration/VisualizationCharts/12_boxPlot_chart.spec.js
new file mode 100644
index 0000000000..be143450b1
--- /dev/null
+++ b/.cypress/integration/VisualizationCharts/12_boxPlot_chart.spec.js
@@ -0,0 +1,248 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+import {
+  delay,
+  TEST_QUERIES,
+  querySearch,
+  landOnEventVisualizations,
+} from '../../utils/event_analytics/constants';
+
+const numberOfWindow = 4;
+const labelSize = 20;
+const rotateLevel = 45;
+const boxSize = 7;
+const boxSizeUpdated = 1;
+const markerSize = 5;
+const markerSizeUpdated = 1;
+const jitter = 2;
+const jitterUpdated = .1;
+const fillOpacity = 10;
+const fillOpacityUpdated = 50;
+const numberOfColor = 24;
+
+const renderBoxPlot = () => {
+  landOnEventVisualizations();
+  querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+    .type('Box plot')
+    .type('{enter}');
+};
+
+describe('Render box plot and verify default behaviour ', () => {
+  beforeEach(() => {
+    renderBoxPlot();
+  });
+
+  it('Render box plot and verify by default the data gets render', () => {
+    cy.get('.xy').should('exist');
+  });
+
+  it('Render box plot and verify you see data configuration panel and chart panel', () => {
+    cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow);
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist');
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist');
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist');
+    cy.get('.euiIEFlexWrapFix').contains('Panel options').click();
+    cy.get('.euiIEFlexWrapFix').contains('Legend').click();
+    cy.get('.euiIEFlexWrapFix').contains('Chart styles').click();
+    cy.get('.euiIEFlexWrapFix').contains('Color Theme').click();
+    cy.get('[aria-label="Press to toggle this panel"]').eq(1).click();
+    cy.get('[aria-label="Press to toggle this panel"]').eq(2).click();
+  });
+
+  it('Render box plot and verify the data configuration panel and chart panel are collapsable', () => {
+    cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow);
+    cy.get('[aria-label="Press to toggle this panel"]').eq(1).click();
+    cy.get('[aria-label="Press to toggle this panel"]').eq(2).click();
+  });
+});
+
+describe('Render box plot for data configuration panel', () => {
+  beforeEach(() => {
+    renderBoxPlot();
+  });
+
+  it('Render box plot and verify data config panel', () => {
+    cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'tags');
+    cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()');
+    cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(2).should('contain', 'avg(bytes)');
+    cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(3).should('contain', 'host');
+  });
+
+  it('Render box plot and verify data config panel restrict user to select a duplicate field on dimension field', () => {
+    cy.get('[data-test-subj="comboBoxInput"]').eq(1).click();
+    cy.get('[data-test-subj="comboBoxClearButton"]').eq(0).click();
+    cy.get('[data-test-subj="comboBoxInput"]').eq(1).click();
+    cy.get('.euiComboBoxOption__content').should('have.length', 1);
+    cy.get('.euiComboBoxOption__content').contains('tags');
+  });
+
+  it('Render box plot and verify data config panel Restrict user to select a duplicate field on Metrics field', () => {
+    cy.get('.euiText.euiText--extraSmall').eq(1).click();
+    cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click();
+    cy.get('[data-test-subj="comboBoxInput"]').eq(3).click();
+    cy.get('.euiComboBoxOption__content').should('not.contain', 'tags');
+    cy.get('.euiComboBoxOption__content').should('have.length', 2);
+  });
+
+  it('Render box plot and verify data config panel no result found if metric is missing', () => {
+    cy.get('.euiText.euiText--extraSmall').eq(0).click();
+    cy.get('.euiText.euiText--extraSmall').eq(1).click();
+    cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click();
+    cy.get('[data-test-subj="comboBoxInput"]').eq(0).click();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist');
+    cy.get('[data-test-subj="comboBoxInput"]').eq(3).click();
+    cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.main-svg').contains('No results found').should('not.exist');
+  });
+});
+
+describe('Render box plot for panel options', () => {
+  beforeEach(() => {
+    renderBoxPlot();
+  });
+
+  it('Render box plot and verify the title gets updated according to user input ', () => {
+    cy.get('input[name="title"]').type('box plot');
+    cy.get('textarea[name="description"]').should('exist').click();
+    cy.get('.gtitle').contains('box plot').should('exist');
+  });
+});
+
+describe('Render box plot for legend', () => {
+  beforeEach(() => {
+    renderBoxPlot();
+  });
+
+  it('Render box plot and verify legends for Show and Hidden', () => {
+    cy.get('[data-text="Show"]').should('have.text', 'Show');
+    cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked');
+    cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click();
+    cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked');
+    cy.get('[data-unformatted="max(bytes)"]').should('not.exist');
+  });
+
+  it('Render box plot and verify legends for position Right and Bottom', () => {
+    cy.get('[data-text="Right"]').should('have.text', 'Right');
+    cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked');
+    cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click();
+    cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked');
+  });
+});
+
+describe('Render box plot for chart style options', () => {
+  beforeEach(() => {
+    renderBoxPlot();
+  });
+
+  it('Render box plot and increase Label Size ', () => {
+    cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize);
+    cy.get('textarea[name="description"]').should('exist').click();
+    cy.get('[data-unformatted="count()"]').should('have.css', 'font-size', '20px');
+  });
+
+  it('Render box plot and "Rotate box labels"', () => {
+    cy.get('input[type="range"]')
+      .eq(0)
+      .then(($el) => $el[0].stepUp(rotateLevel))
+      .trigger('change');
+    cy.get('.euiRangeSlider').eq(0).should('have.value', rotateLevel);
+  });
+
+  it('Render box plot and change "Box gap"', () => {
+    cy.get('input[type="range"]')
+      .eq(1)
+      .then(($el) => $el[0].stepUp(boxSize))
+      .trigger('change');
+    cy.get('.euiRangeSlider').eq(1).should('have.value', boxSizeUpdated);
+  });
+
+  it('Render box plot and change "Marker size"', () => {
+    cy.get('input[type="range"]')
+      .eq(2)
+      .then(($el) => $el[0].stepDown(markerSize))
+      .trigger('change');
+    cy.get('.euiRangeSlider').eq(2).should('have.value', markerSizeUpdated);
+  });
+
+  it('Render box plot and change "Jitter"', () => {
+    cy.get('input[type="range"]')
+      .eq(3)
+      .then(($el) => $el[0].stepDown(jitter))
+      .trigger('change');
+    cy.get('.euiRangeSlider').eq(3).should('have.value', jitterUpdated);
+  });
+
+  it('Render box plot and change "Fill opacity"', () => {
+    cy.get('input[type="range"]')
+      .eq(4)
+      .then(($el) => $el[0].stepUp(fillOpacity))
+      .trigger('change');
+    cy.get('.euiRangeSlider').eq(4).should('have.value', fillOpacityUpdated);
+  });
+});
+
+describe('Render box plot for color theme', () => {
+  beforeEach(() => {
+    renderBoxPlot();
+  });
+
+  it('Render box plot and "Add color theme"', () => {
+    cy.get('.euiButton__text').contains('+ Add color theme').click();
+    cy.wait(delay);
+    cy.get('[data-test-subj="comboBoxInput"]').eq(9).click();
+    cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click();
+    cy.get('.points').find('path[style*="rgb(252, 5, 5)"]').should('have.length', numberOfColor);
+  });
+});
+
+describe('Render box plot and verify if reset works properly', () => {
+  beforeEach(() => {
+    renderBoxPlot();
+  });
+
+  it('Render box plot with all feild data then click on reset and verify reset works properly', () => {
+    cy.get('input[placeholder="Title"]').type('box plot');
+    cy.get('textarea[placeholder="Description"]').type('Description For box plot');
+    cy.get('.euiButton__text').contains('Hidden').click();
+    cy.get('.euiButton__text').contains('Horizontal').click();
+    cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize);
+    cy.get('input[type="range"]')
+      .eq(0)
+      .then(($el) => $el[0].stepUp(rotateLevel))
+      .trigger('change');
+    cy.get('input[type="range"]')
+      .eq(1)
+      .then(($el) => $el[0].stepUp(boxSize))
+      .trigger('change');
+    cy.get('input[type="range"]')
+      .eq(2)
+      .then(($el) => $el[0].stepDown(markerSize))
+      .trigger('change');
+    cy.get('input[type="range"]')
+      .eq(3)
+      .then(($el) => $el[0].stepUp(jitter))
+      .trigger('change');
+    cy.get('input[type="range"]')
+      .eq(4)
+      .then(($el) => $el[0].stepUp(fillOpacity))
+      .trigger('change');
+    cy.get('.euiButtonEmpty__text').contains('Reset').click();
+    cy.get('input[placeholder="Title"]').should('not.have.value', 'box plot');
+    cy.get('textarea[placeholder="Description"]').should(
+      'not.have.value',
+      'Description For box plot'
+    );
+    cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked');
+    cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked');
+    cy.get('[data-text="Vertical"] [data-test-subj="v"]').should('have.attr', 'checked');
+    cy.get('[data-text="Overlay"] [data-test-subj="overlay"]').should('have.attr', 'checked');
+    cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', '');
+  });
+});
diff --git a/.cypress/integration/VisualizationCharts/13_logsView.spec.js b/.cypress/integration/VisualizationCharts/13_logsView.spec.js
new file mode 100644
index 0000000000..8f8b163dab
--- /dev/null
+++ b/.cypress/integration/VisualizationCharts/13_logsView.spec.js
@@ -0,0 +1,241 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+import {
+  delay,
+  TEST_QUERIES,
+  querySearch,
+  landOnEventVisualizations,
+  saveVisualizationAndVerify,
+  deleteVisualization,
+} from '../../utils/event_analytics/constants';
+
+const renderLogsView = () => {
+  landOnEventVisualizations();
+  querySearch(TEST_QUERIES[8].query, TEST_QUERIES[8].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+    .type('Logs view')
+    .type('{enter}');
+};
+
+const renderLogsViewChart = () => {
+  landOnEventVisualizations();
+  querySearch(TEST_QUERIES[2].query, TEST_QUERIES[2].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+    .type('Logs view')
+    .type('{enter}');
+};
+
+const fieldName = 'host';
+
+describe('Render Logs view and verify default behavior', () => {
+  beforeEach(() => {
+    renderLogsView();
+  });
+
+  it('Render Logs view and verify the default data', () => {
+    cy.get('.logs-view-container').should('exist');
+  });
+
+  it('Render Logs view and verify Data Configuration panel default behavior', () => {
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist');
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Columns');
+    cy.get('.euiFormLabel.euiFormRow__label').contains('Field');
+    cy.get('.euiButton.euiButton--primary.euiButton--fullWidth.euiButton-isDisabled').should(
+      'be.disabled'
+    );
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').should('be.disabled');
+  });
+
+  it('Render Logs view and verify Style section for Logs view', () => {
+    cy.get('.vis-config-tabs .euiTab__content').contains('Style').should('exist');
+    cy.get('.euiAccordion__triggerWrapper').contains('Panel options').should('exist');
+    cy.get('#configPanel__panelOptions .euiFormRow__labelWrapper')
+      .contains('Title')
+      .should('exist');
+    cy.get('#configPanel__panelOptions .euiFormRow__labelWrapper')
+      .contains('Description')
+      .should('exist');
+  });
+
+  it('Table view should be enabled for Logs view', () => {
+    cy.get('.euiSwitch__label').contains('Table view').should('exist');
+    cy.get('[data-test-subj="workspace__dataTableViewSwitch"][aria-checked="false"]').click();
+    cy.get('.ag-header.ag-pivot-off').should('exist');
+  });
+
+  it('Verify Style section for Logs view', () => {
+    cy.get('#data-panel').contains('Style').should('exist');
+    cy.get('.euiAccordion__button').contains('Panel options').should('exist');
+    cy.get('#configPanel__panelOptions').contains('Title').should('exist');
+    cy.get('.euiFormHelpText.euiFormRow__text').contains('Name your visualization').should('exist');
+    cy.get('#configPanel__panelOptions').contains('Description').should('exist');
+  });
+
+  it('Add and Remove toggle buttons for fields section', () => {
+    cy.get('#available_fields').contains('Available Fields').should('exist');
+    cy.get('[aria-label="Add agent to table"]').should('be.disabled');
+    cy.get('#selected_fields').contains('Query fields').should('exist');
+    cy.get('[aria-label="Remove clientip from table"]').should('be.disabled');
+  });
+});
+
+describe('Save and Delete Visualization', () => {
+  beforeEach(() => {
+    renderLogsView();
+  });
+
+  it('Render Logs view, Save and Delete Visualization', () => {
+    saveVisualizationAndVerify();
+    deleteVisualization();
+  });
+});
+
+describe('Render Logs view with no stats section in the query', () => {
+  beforeEach(() => {
+    renderLogsViewChart();
+  });
+
+  it('Disabled Table view toogle button', () => {
+    cy.get('[data-test-subj="workspace__dataTableViewSwitch"]').should('be.disabled');
+  });
+
+  it('Save toast message', () => {
+    const vis_name_sub_string = Math.floor(Math.random() * 100);
+    cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+    cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click();
+    cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click();
+    cy.get(
+      '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]'
+    )
+      .eq(0)
+      .click();
+    cy.get('.euiPopover__panel input')
+      .eq(1)
+      .type(`Test visualization` + vis_name_sub_string);
+    cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+    cy.get('[data-test-subj="euiToastHeader"]')
+      .contains('There is no query or(and) visualization to save')
+      .should('exist');
+  });
+
+  it('Verify Logs view details when PPL query does not have stats section ', () => {
+    cy.get('[data-test-subj="docTable"]').should('exist');
+    cy.get('.osdDocTableHeader').contains('Time').should('exist');
+    cy.get('.osdDocTableHeader').contains('_source').should('exist');
+  });
+
+  it('Add and Remove toggle buttons for fields section should be enabled', () => {
+    //Add field
+    cy.get('[data-test-subj="fieldToggle-agent"]').click();
+    cy.get('[data-test-subj="field-agent"]').should('exist');
+    //Remove field
+    cy.get('[data-test-subj="fieldToggle-agent"]').click();
+    cy.get('[aria-labelledby="selected_fields"] [data-test-subj="field-agent-showDetails"]').should(
+      'not.exist'
+    );
+  });
+
+  it('Search engine for fields under Visualizations', () => {
+    cy.get('[data-test-subj="eventExplorer__sidebarSearch"]').should('exist').type(fieldName);
+    cy.get('[data-test-subj="fieldToggle-host"]').click();
+    cy.get('[data-test-subj="fieldList-selected"]').should('exist');
+  });
+
+  it('View surrounding events button enabled', () => {
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon')
+      .eq(2)
+      .click({ force: true });
+    cy.get('#eventsDocFyout').contains('Event Details').should('exist');
+    cy.get('.euiButton__text').eq(4).should('not.be.disabled');
+  });
+});
+
+describe('Event Details overlay', () => {
+  beforeEach(() => {
+    renderLogsView();
+  });
+
+  it('Verify Event Details overaly should get opened after clicking on details toggle button', () => {
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon')
+      .eq(2)
+      .click({ force: true });
+    cy.get('#eventsDocFyout').contains('Event Details').should('exist');
+  });
+
+  it('Options in Event Details overlay', () => {
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon')
+      .eq(2)
+      .click({ force: true });
+    cy.get('#eventsDocFyout').contains('Event Details').should('exist');
+    cy.get('.euiTabs .euiTab__content').contains('Table');
+    cy.get('.table.table-condensed.osdDocViewerTable').should('exist');
+    cy.get('.euiTabs .euiTab__content').contains('JSON').click();
+    cy.get('.euiCodeBlock__code.json').should('exist');
+    cy.get('.euiTabs .euiTab__content').contains('Traces').click();
+    cy.get('.euiCallOutHeader__title').contains('No Trace Id found in the event.').should('exist');
+    cy.get('.euiLink.euiLink--primary').contains('Trace Analytics').click();
+    cy.get('#trace-analytics').contains('Trace Analytics').should('exist');
+    cy.get('.euiLink.euiLink--primary').contains('Log Correlation').click();
+    cy.get('#log-correlation').contains('Log Correlation').should('exist');
+  });
+
+  it('View surrounding events button disabled', () => {
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon')
+      .eq(2)
+      .click({ force: true });
+    cy.get('#eventsDocFyout').contains('Event Details').should('exist');
+    cy.get('.euiButton.euiButton--primary.euiButton-isDisabled.header-button')
+      .contains('View surrounding events')
+      .should('be.disabled');
+  });
+
+  it('Event Details overlay resizable and "X" buttons', () => {
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon')
+      .eq(2)
+      .click({ force: true });
+    cy.get('#eventsDocFyout').contains('Event Details').should('exist');
+    cy.get('[title="Resize"]').click();
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon')
+      .eq(2)
+      .click({ force: true });
+    cy.get('#eventsDocFyout').contains('Event Details').should('exist');
+    cy.get('[data-test-subj="euiFlyoutCloseButton"]').should('exist').click();
+  });
+
+  it('Table details on Event Details overlay', () => {
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--inherit.euiButtonIcon__icon')
+      .eq(2)
+      .click({ force: true });
+    cy.get('#eventsDocFyout').contains('Event Details').should('exist');
+    cy.get('[data-test-subj="docTable"]').should('exist');
+  });
+});
+
+describe('Data Configuration panel when no stats in the query', () => {
+  beforeEach(() => {
+    renderLogsViewChart();
+  });
+
+  it('Data Configuration panel default behavior', () => {
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist');
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Columns').should('exist');
+    cy.get('.euiButton__text').eq(2).contains('Add').should('not.be.disabled');
+    cy.get('.euiButton__text').eq(3).contains('Update Chart').should('not.be.disabled');
+  });
+
+  it('Add button in Data Configuration panel', () => {
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist');
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Columns').should('exist');
+    cy.get('.euiButton__text').eq(2).contains('Add').should('not.be.disabled').click();
+    cy.get('.euiFormLabel.euiFormRow__label').contains('Field');
+    cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').should('exist');
+    cy.get('[data-test-subj="comboBoxToggleListButton"]').eq(0).click();
+    cy.get('.euiFlexItem.euiFilterSelectItem__content').eq(1).click();
+    cy.get('.euiButton__text').contains('Update Chart').should('not.be.disabled').click();
+    cy.get('[data-test-subj="docTable"]').should('exist');
+  });
+});
diff --git a/.cypress/integration/VisualizationCharts/13_stats_chart.spec.js b/.cypress/integration/VisualizationCharts/13_stats_chart.spec.js
new file mode 100644
index 0000000000..f3c6c561af
--- /dev/null
+++ b/.cypress/integration/VisualizationCharts/13_stats_chart.spec.js
@@ -0,0 +1,211 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+import {
+  delay,
+  TEST_QUERIES,
+  querySearch,
+  landOnEventVisualizations
+} from '../../utils/event_analytics/constants';
+
+const numberOfWindow = 4;
+const metricsPrecisionUpdated = 2;
+const metricUnit = 'cm' ;
+const titleSize = '25.5px';
+const titleSizeUpdated = '40px';
+const valueSize = '60.8px';
+const valueSizeUpdated = '73.0px';
+
+const renderStatsChart = () => {
+  landOnEventVisualizations();
+  querySearch(TEST_QUERIES[4].query, TEST_QUERIES[4].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Stats').type('{enter}');
+};
+
+describe('Render stats chart and verify default behaviour ', () => {
+  beforeEach(() => {
+    renderStatsChart();
+  });
+
+  it('Render stats chart and verify by default the data gets render', () => {
+    cy.get('.xy').should('exist');
+  });
+
+  it('Render scatter chart and verify you see data configuration panel and chart panel', () => {
+    cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow);
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist');
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist');
+    cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist');
+    cy.get('.euiIEFlexWrapFix').contains('Panel options').click();
+    cy.get('.euiIEFlexWrapFix').contains('Chart styles').click();
+    cy.get('.euiIEFlexWrapFix').contains('Thresholds').click();
+    cy.get('[aria-label="Press to toggle this panel"]').eq(1).click();
+    cy.get('[aria-label="Press to toggle this panel"]').eq(2).click();
+  });
+
+  it('Render stats chart and verify the data configuration panel and chart panel are collapsable', () => {
+    cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow);
+    cy.get('[aria-label="Press to toggle this panel"]').eq(1).click();
+    cy.get('[aria-label="Press to toggle this panel"]').eq(2).click();
+  });
+});
+
+describe('Render stats chart for data configuration panel', () => {
+  beforeEach(() => {
+    renderStatsChart();
+  });
+
+  it('Render stats chart and verify data config panel', () => {
+    cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(0).should('contain', 'tags');
+    cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(1).should('contain', 'count()');
+    cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(2).should('contain', 'avg(bytes)');
+    cy.get('.euiComboBoxPill.euiComboBoxPill--plainText').eq(3).should('contain', 'host');
+  });
+
+  it('Render stats chart and verify no result found message if the dimension is removed' , () => {
+    cy.get('[data-test-subj="comboBoxClearButton"]').eq(0).click();
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist');
+    cy.get('[data-test-subj="comboBoxInput"]').eq(1).click();
+    cy.get('.euiComboBoxOption__content').click();
+    cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+    cy.get('.main-svg').contains('No results found').should('not.exist');
+  });
+
+  it('Render stats chart and verify data config panel no result found if metric is missing', () => {
+      cy.get('.euiText.euiText--extraSmall').eq(0).click();
+      cy.get('.euiText.euiText--extraSmall').eq(1).click();
+      cy.get('[data-test-subj="comboBoxClearButton"]').eq(1).click();
+      cy.get('[data-test-subj="comboBoxInput"]').eq(0).click();
+      cy.get('.euiButton__text').contains('Update chart').click();
+      cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist');
+      cy.get('[data-test-subj="comboBoxInput"]').eq(3).click();
+      cy.get('.euiComboBoxOption__content').contains('avg(bytes)').click();
+      cy.get('.euiButton__text').contains('Update chart').click();
+      cy.get('.main-svg').contains('No results found').should('not.exist');
+    });
+});
+
+describe('Render stats chart for panel options', () => {
+  beforeEach(() => {
+    renderStatsChart();
+  });
+
+  it('Render stats chart and verify the title gets updated according to user input ', () => {
+    cy.get('input[name="title"]').type("stats chart");
+    cy.get('textarea[name="description"]').should('exist').click();
+    cy.get('.gtitle').contains('stats chart').should('exist');
+  });
+});
+
+describe('Render stats chart verfiy functionality for Tooltip mode', () => {
+  beforeEach(() => {
+    renderStatsChart();
+  });
+  
+  it('Render stats chart and verfiy the Show and Hidden Tooltip modes', () => {
+    cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(0).should('have.text', 'Show');
+    cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(1).should('have.text', 'Hidden')
+    .click();
+  });
+});
+
+describe('Render stats chart verfiy functionality for Tooltip text', () => {
+  beforeEach(() => {
+    renderStatsChart();
+  });
+
+  it('Render stats chart and verfiy the Tootltip text -> All , Dimension , Metric', () => {
+    cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(2).should('have.text', 'All');
+    cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(3).should('have.text', 'Dimension')
+    .click();
+    cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(4).should('have.text', 'Series')
+    .click();
+  });
+});
+
+describe('Render stats chart for Chart Styles ', () => {
+  beforeEach(() => {
+    renderStatsChart();
+  });
+
+  it('Render stats chart and verify the various chart type selected', () => {
+    cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(5).should('have.text', 'Auto');
+    cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(6).should('have.text', 'Horizontal').click();
+    cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(7).should('have.text', 'Text mode').click();
+  });
+
+  it('Render stats chart and verify the various chart orientation selected', () => {
+    cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(8).should('have.text', 'Auto');
+    cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(9).should('have.text', 'Horizontal').click();
+    cy.get('.euiButton__text.euiButtonGroupButton__textShift').eq(10).should('have.text', 'Vertical').click();
+  });
+
+  it('Render stats chart and verify Metric unit and Metric Precision on chart ', () => {
+    cy.get('[data-test-subj="valueFieldText"]').click().type(metricUnit);
+    cy.get('.euiSpacer.euiSpacer--s').eq(12).click();
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(metricsPrecisionUpdated);
+    cy.get('.euiSpacer.euiSpacer--s').eq(12).click();
+  });
+
+  it('Render stats chart and verify behaviour for Title size and Value size on chart ', () => {
+    cy.get('.annotation-text').eq(0).should('have.css', 'font-size', titleSize);
+    cy.get('.annotation-text').eq(2).should('have.css', 'font-size', titleSize);
+    cy.get('.annotation-text').eq(4).should('have.css', 'font-size', titleSize);
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(titleSizeUpdated);
+    cy.get('.euiSpacer.euiSpacer--s').eq(12).click();
+    cy.get('.annotation-text').eq(1).should('have.css', 'font-size', valueSize);
+    cy.get('.annotation-text').eq(3).should('have.css', 'font-size', valueSize);
+    cy.get('.annotation-text').eq(5).should('have.css', 'font-size', valueSize);
+    cy.get('[data-test-subj="valueFieldNumber"]').eq(2).click().type(valueSizeUpdated);
+    cy.get('.euiSpacer.euiSpacer--s').eq(12).click();
+  });
+});
+
+describe('Render stats chart and verify the Text Mode options' , () => {
+  beforeEach(() => {
+      renderStatsChart();
+  });
+
+  it('Render stats chart and verify text modes ', () => {
+      cy.get('[data-text="Names"]').should('have.text', 'Names').click();
+      cy.get('[data-text="Values"]').should('have.text', 'Values').click();
+      cy.get('[data-text="Values + Names"]').should('have.text', 'Values + Names').click();
+      cy.wait(delay);
+  });
+});
+
+describe('Render stats chart and verify the +add threshold button option' , () => {
+  beforeEach(() => {
+      renderStatsChart();
+  });
+
+  it('Render stats chart and verify the +Add Threshold button for color picker' , () => {
+      cy.get('[data-test-subj="euiColorPickerAnchor"]').click();
+      cy.get('.euiColorPickerSwatch.euiColorPicker__swatchSelect').eq(5).click();
+      cy.wait(delay);
+  });
+});
+
+describe('Render stats chart and verify the reset button' , () => {
+  beforeEach(() => {
+      renderStatsChart();
+  });
+
+  it('Render stats chart and test the Reset button functionality' , () => {
+      cy.get('[data-test-subj="valueFieldText"]').click().type(metricUnit);
+      cy.get('.euiSpacer.euiSpacer--s').eq(12).click();
+      cy.get('[data-test-subj="valueFieldNumber"]').eq(0).click().type(metricsPrecisionUpdated);
+      cy.get('.euiSpacer.euiSpacer--s').eq(12).click();
+      cy.get('[data-test-subj="valueFieldNumber"]').eq(1).click().type(titleSizeUpdated);
+      cy.get('.euiSpacer.euiSpacer--s').eq(12).click();
+      cy.get('[data-test-subj="valueFieldNumber"]').eq(2).click().type(valueSizeUpdated);
+      cy.get('.euiSpacer.euiSpacer--s').eq(12).click();
+      cy.get('[data-test-subj="euiColorPickerAnchor"]').click();
+      cy.get('.euiColorPickerSwatch.euiColorPicker__swatchSelect').eq(5).click();
+      cy.get('[data-test-subj="visualizeEditorResetButton"]').click();
+  });
+});
\ No newline at end of file
diff --git a/.cypress/integration/VisualizationCharts/7_pie_chart.spec.js b/.cypress/integration/VisualizationCharts/7_pie_chart.spec.js
new file mode 100644
index 0000000000..0167f6059f
--- /dev/null
+++ b/.cypress/integration/VisualizationCharts/7_pie_chart.spec.js
@@ -0,0 +1,202 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+import {
+    delay,
+    TEST_QUERIES,
+    querySearch,
+    landOnEventVisualizations,
+    renderDataConfig,
+    saveVisualizationAndVerify,
+    deleteVisualization,
+  } from '../../utils/event_analytics/constants';
+  
+  const renderPieChart = () => {
+    landOnEventVisualizations();
+    querySearch(TEST_QUERIES[3].query, TEST_QUERIES[3].dateRangeDOM);
+    cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').click();
+    cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click();
+  };
+  
+  const aggregationValues = [
+    'COUNT',
+    'SUM',
+    'AVERAGE',
+    'MAX',
+    'MIN',
+    'VAR_SAMP',
+    'VAR_POP',
+    'STDDEV_SAMP',
+    'STDDEV_POP',
+  ];
+  
+  describe.only('Render Pie chart and verify default behavior', () => {
+    beforeEach(() => {
+      renderPieChart();
+    });
+  
+    it('Render Pie chart and verify the default data', () => {
+      cy.get('.plot-container.plotly').should('exist');
+    });
+  
+    it('Render Pie chart and verify Data Configuration panel default behavior', () => {
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist');
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist');
+      cy.get('.first-division .euiFormRow__labelWrapper').contains('Aggregation').should('exist');
+      cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Field').should('exist');
+      cy.get('.first-division .euiFormLabel.euiFormRow__label')
+        .contains('Custom label')
+        .should('exist');
+      cy.get('.first-division .euiButton__text').contains('Add').should('exist');
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist');
+      cy.get('.euiButton__text').contains('Update chart').should('exist');
+    });
+  
+    it('Render Pie chart and verify Style section for Pie chart', () => {
+      cy.get('#data-panel').contains('Style').should('exist');
+      cy.get('[aria-controls="configPanel__panelOptions"]').contains('Panel options').should('exist');
+      cy.get('[aria-controls="configPanel__legend"]').contains('Legend').should('exist');
+      cy.get('.euiForm.visEditorSidebar__form .euiIEFlexWrapFix')
+        .contains('Tooltip options')
+        .should('exist');
+      cy.get('[aria-controls="configPanel__chartStyles"]').contains('Chart styles').should('exist');
+    });
+  
+    it('Options under Legend section', () => {
+      cy.get('#configPanel__legend').contains('Legend');
+      cy.get('.euiTitle.euiTitle--xxsmall').eq(3).contains('Show legend');
+      cy.get('[data-text="Show"]').eq(0).contains('Show');
+      cy.get('[data-text="Hidden"]').eq(0).contains('Hidden');
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Position');
+      cy.get('[data-text="Right"]').contains('Right');
+      cy.get('[data-text="Bottom"]').contains('Bottom');
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Legend size').should('exist');
+    });
+  
+    it('Options under Tooltip options section', () => {
+      cy.get('.euiIEFlexWrapFix').contains('Tooltip options').should('exist');
+      cy.get('[data-text="Show"]').eq(1).contains('Show');
+      cy.get('[data-text="Hidden"]').eq(1).contains('Hidden');
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Tooltip text');
+      cy.get('[data-text="All"]').contains('All');
+      cy.get('[data-text="Label"]').contains('Label');
+      cy.get('[data-text="Value"]').contains('Value');
+      cy.get('[data-text="Percent"]').contains('Percent');
+    });
+  
+    it('Options under Chart Styles section', () => {
+      cy.get('.euiIEFlexWrapFix').contains('Chart styles').should('exist');
+      cy.get('#configPanel__chartStyles').contains('Mode');
+      cy.get('.euiTitle.euiTitle--xxsmall').eq(9).contains('Label size');
+      cy.get('.euiTitle.euiTitle--xxsmall').contains('Color theme');
+    });
+  
+    it('Table view should be enabled for Pie chart', () => {
+      cy.get('.euiSwitch__label').contains('Table view').should('exist');
+      cy.get('[data-test-subj="workspace__dataTableViewSwitch"][aria-checked="false"]').click();
+      cy.get('.ag-header.ag-pivot-off').should('exist');
+    });
+  
+    it('Render Pie chart and verify legends for Position Right and Bottom', () => {
+      cy.get('[data-text="Right"]').should('have.text', 'Right');
+      cy.get('[data-text="Right"] [data-test-subj="v"]').should('have.attr', 'checked');
+      cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click();
+      cy.get('[data-text="Bottom"] [data-test-subj="h"]').should('not.have.attr', 'checked');
+      cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true, multiple: true });
+    });
+  
+    it('Render Pie chart and verify legends for Show and Hidden', () => {
+      cy.get('[data-text="Show"]').eq(0).should('have.text', 'Show');
+      cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked');
+      cy.get('[data-text="Hidden"]').eq(0).should('have.text', 'Hidden').click();
+      cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked');
+      cy.get('[data-test-subj="visualizeEditorRenderButton"]').click({ force: true, multiple: true });
+    });
+  });
+  
+  describe('Save and Delete Visualization', () => {
+    beforeEach(() => {
+      renderPieChart();
+    });
+  
+    it('Render Pie chart, Save and Delete Visualization', () => {
+      saveVisualizationAndVerify();
+      deleteVisualization();
+    });
+  });
+  
+  describe('Color Theme section', () => {
+    beforeEach(() => {
+      renderPieChart();
+    });
+  
+    it('Default option in Color Theme', () => {
+      cy.get('.euiTitle.euiTitle--xxsmall')
+        .contains('Color Theme')
+        .scrollIntoView()
+        .should('be.visible');
+      cy.get('.euiSuperSelectControl').contains('Default').should('exist');
+    });
+  
+    it('Render pie chart with single color option', () => {
+      cy.get('.euiTitle.euiTitle--xxsmall')
+        .contains('Color Theme')
+        .scrollIntoView()
+        .should('be.visible');
+      cy.get('.euiSuperSelectControl').contains('Default').click();
+      cy.get('.euiColorPalettePicker__item').contains('Single Color').click();
+      cy.get('[data-test-subj="euiColorPickerAnchor"]').click();
+      cy.get('.euiColorPickerSwatch.euiColorPicker__swatchSelect').eq(2).click();
+      cy.get('.pielayer').should('exist');
+    });
+  });
+  
+  describe('Renders Pie chart and Data Configurations section for Pie chart', () => {
+    beforeEach(() => {
+      landOnEventVisualizations();
+      renderPieChart();
+    });
+  
+    it('Renders Dimensions and Metrics under Data Configurations for Pie chart', () => {
+      renderDataConfig();
+    });
+  
+    it('Validate "Add" and "X" buttons', () => {
+      cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
+      cy.get('.euiText.euiText--extraSmall').eq(0).click();
+      cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').click();
+      cy.get('[data-test-subj="comboBoxInput"]').eq(2).click();
+      cy.get('.euiComboBoxOption__content').eq(0).click();
+      cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').eq(1).click();
+      cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(4).click();
+      cy.get('.euiComboBoxOption__content').eq(1).click();
+      cy.get('.euiFieldText[placeholder="Custom label"]').eq(1).type('Demo field');
+      cy.get('.euiIcon.euiIcon--medium.euiIcon--danger').eq(1).click();
+      cy.get('.euiButton.euiButton--primary.euiButton--fullWidth').contains('Add').should('exist');
+    });
+  
+    it('Verify drop down values for Aggregation', () => {
+      cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
+      cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('Dimensions').should('exist');
+      cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation');
+      cy.get('.euiText.euiText--extraSmall').eq(0).click();
+      cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click();
+      aggregationValues.forEach(function (value) {
+        cy.get('.euiComboBoxOption__content').contains(value);
+      });
+    });
+  
+    it('Collapsible mode for Data Configuration panel', () => {
+      cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Configurations');
+      cy.get('.euiResizableButton.euiResizableButton--horizontal').eq(1).click();
+      cy.get('[data-test-subj="panel-1-toggle"]').click();
+      cy.get('[class*="euiResizableToggleButton-isCollapsed"]').eq(1).should('exist');
+      cy.get('.euiResizablePanel.euiResizablePanel--middle')
+        .contains('Data Configurations')
+        .should('not.be.focused');
+    });
+  });
+  
\ No newline at end of file
diff --git a/.cypress/integration/VisualizationCharts/9_coordinateMap_chart.spec.js b/.cypress/integration/VisualizationCharts/9_coordinateMap_chart.spec.js
new file mode 100644
index 0000000000..10569fe038
--- /dev/null
+++ b/.cypress/integration/VisualizationCharts/9_coordinateMap_chart.spec.js
@@ -0,0 +1,195 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+import {
+    TEST_QUERIES,
+    querySearch,
+    landOnEventVisualizations
+} from '../../utils/event_analytics/constants';
+
+const numberOfWindow = 4;
+const labelSize = 20;
+const latitudeRangeMin = 40;
+const latitudeRangeMax = 70;
+const longitudeRangeMin = -130;
+const longitudeRangeMax = -55;
+
+const renderCoordinateMap = () => {
+    landOnEventVisualizations();
+    querySearch(TEST_QUERIES[0].query, TEST_QUERIES[0].dateRangeDOM);
+    cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').type('Coordinate Map').type('{enter}');
+};
+
+const renderDataForCoordinateMap = () => {
+    cy.get('[data-test-subj="comboBoxInput"]').eq(1).click();
+    cy.get('.euiComboBoxOption__content').contains('DestLocation').click();
+    cy.get('[data-test-subj="comboBoxInput"]').eq(3).click();
+    cy.get('.euiComboBoxOption__content').contains('AvgTicketPrice').click();
+    cy.get('[data-test-subj="comboBoxInput"]').eq(4).click();
+    cy.get('.euiComboBoxOption__content').contains('Dest').click();
+    cy.get('.euiButton__text').contains('Update chart').click();
+    cy.get('.layer.land').should('exist');
+    cy.get('stop[stop-color="rgb(5, 10, 172)"]').should('exist');
+}
+
+describe('Render coordinate map and verify default behaviour ', () => {
+    beforeEach(() => {
+        renderCoordinateMap();
+    });
+
+    it('Render coordinate map and verify by default the data dont gets render', () => {
+        cy.get('.layer.land').should('not.exist');
+        cy.get('.euiTextColor.euiTextColor--subdued').contains('No results found').should('exist');
+    });
+
+    it('Render coordinate map and verify you see data configuration panel and chart panel', () => {
+        cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow);
+        cy.get('.euiTitle.euiTitle--xxsmall').contains('Data Configurations').should('exist');
+        cy.get('.euiTitle.euiTitle--xxsmall').contains('Dimensions').should('exist');
+        cy.get('.euiTitle.euiTitle--xxsmall').contains('Metrics').should('exist');
+        cy.get('.euiIEFlexWrapFix').contains('Panel options').click();
+        cy.get('.euiIEFlexWrapFix').contains('Text').click();
+        cy.get('.euiIEFlexWrapFix').contains('Chart styles').click();
+        cy.get('[aria-label="Press to toggle this panel"]').eq(1).click();
+        cy.get('[aria-label="Press to toggle this panel"]').eq(2).click();
+    });
+
+    it('Render coordinate map and verify the data configuration panel and chart panel are collapsable', () => {
+        cy.get('.euiPanel.euiPanel--paddingSmall').should('have.length', numberOfWindow);
+        cy.get('[aria-label="Press to toggle this panel"]').eq(1).click();
+        cy.get('[aria-label="Press to toggle this panel"]').eq(2).click();
+    });
+});
+
+describe('Render coordinate map for data configuration panel', () => {
+    beforeEach(() => {
+        renderCoordinateMap();
+    });
+
+    it('Render coordinate map and verify data config panel', () => {
+        cy.get('[data-test-subj="comboBoxInput"]').eq(1).contains('Select a field').should('exist');
+        cy.get('[data-test-subj="comboBoxInput"]').eq(3).contains('Select a field').should('exist');
+        cy.get('[data-test-subj="comboBoxInput"]').eq(4).contains('Select a field').should('exist');
+    });
+
+    it('Render coordinate map and verify data gets render only after selecting the field value in data configuration panel', () => {
+        renderDataForCoordinateMap();
+    });
+
+    it('Render coordinate map and verify data config dimensions panel "Field" contains only location', () => {
+        cy.get('[data-test-subj="comboBoxInput"]').eq(1).click();
+        cy.get('.euiComboBoxOption__content').contains('DestLocation').should('exist');
+        cy.get('.euiComboBoxOption__content').contains('OriginLocation').should('exist');
+    });
+
+    it('Render coordinate map and verify data config metrics panel "Field" contains only value which return either integer or float value', () => {
+        cy.get('[data-test-subj="comboBoxInput"]').eq(3).click();
+        cy.get('.euiComboBoxOption__content').contains('AvgTicketPrice').should('exist');
+        cy.get('.euiComboBoxOption__content').contains('DistanceMiles').should('exist');
+        cy.get('.euiComboBoxOption__content').should('not.contain', 'DestLocation');
+        cy.get('.euiComboBoxOption__content').should('have.length', 6);
+    });
+
+    it('Render coordinate map and verify data config metric panel "Plot Label" contains a combination of string value and integer value', () => {
+        cy.get('[data-test-subj="comboBoxInput"]').eq(4).click();
+        cy.get('.euiComboBoxOption__content').contains('AvgTicketPrice').should('exist');
+        cy.get('.euiComboBoxOption__content').contains('Dest').should('exist');
+        cy.get('.euiComboBoxOption__content').contains('DestLocation').should('exist');
+    });
+});
+
+describe('Render coordinate map for panel options', () => {
+    beforeEach(() => {
+        renderCoordinateMap();
+        renderDataForCoordinateMap();
+    });
+
+    it('Render coordinate map and verify the title gets updated according to user input ', () => {
+        cy.get('input[name="title"]').type("coordinate map");
+        cy.get('textarea[name="description"]').should('exist').click();
+        cy.get('.gtitle').contains('coordinate map').should('exist');
+    });
+});
+
+describe('Render coordinate map for text', () => {
+    beforeEach(() => {
+        renderCoordinateMap();
+        renderDataForCoordinateMap();
+    });
+
+    it('Render coordinate map and verify by default the "Show" is enabled for "Show Text"', () => {
+        cy.get('[data-text="Show"]').should('have.text', 'Show');
+        cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked');
+        cy.get('[data-unformatted="Duluth International Airport"]').should('exist');
+    });
+
+    it('Render coordinate map and change "Show Text" to "Hidden"', () => {
+        cy.get('[data-text="Hidden"]').should('have.text', 'Hidden').click();
+        cy.get('[data-text="Hidden"] [data-test-subj="hidden"]').should('not.have.attr', 'checked');
+        cy.get('[data-unformatted="Duluth International Airport"]').should('not.exist');
+    });
+
+    it('Render coordinate map and verify by default the "Top" is enabled for "Position"', () => {
+        cy.get('[data-text="Top"]').should('have.text', 'Top');
+        cy.get('[data-text="Top"] [data-test-subj="top center"]').should('have.attr', 'checked');
+    });
+
+    it('Render coordinate map and change "Position" to "Right", "Bottom" and "Left"', () => {
+        cy.get('[data-text="Right"]').should('have.text', 'Right').click();
+        cy.get('[data-text="Right"] [data-test-subj="middle right"]').should('not.have.attr', 'checked');
+        cy.get('[data-text="Bottom"]').should('have.text', 'Bottom').click();
+        cy.get('[data-text="Bottom"] [data-test-subj="bottom center"]').should('not.have.attr', 'checked');
+        cy.get('[data-text="Left"]').should('have.text', 'Left').click();
+        cy.get('[data-text="Left"] [data-test-subj="middle left"]').should('not.have.attr', 'checked');
+    });
+});
+
+describe('Render coordinate map for chart style options', () => {
+    beforeEach(() => {
+        renderCoordinateMap();
+        renderDataForCoordinateMap();
+    });
+
+    it('Render coordinate map and change Label Size ', () => {
+        cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize);
+        cy.get('textarea[name="description"]').should('exist').click();
+        cy.get('[data-unformatted="Duluth International Airport"]').should('have.css', 'font-size', '20px');
+        cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', labelSize)
+    });
+
+    it('Render coordinate map and change "Latitude Range"', () => {
+        cy.get('input[type="number"]').eq(1).should('have.value', latitudeRangeMin);
+        cy.get('input[type="number"]').eq(2).should('have.value', latitudeRangeMax);
+        cy.get('input[type="number"]').eq(1).click().clear().type(30);
+    });
+
+    it('Render coordinate map and change "Longitude Range"', () => {
+        cy.get('input[type="number"]').eq(3).should('have.value', longitudeRangeMin);
+        cy.get('input[type="number"]').eq(4).should('have.value', longitudeRangeMax);
+        cy.get('input[type="number"]').eq(4).click().clear().type(40);
+    });
+});
+
+describe('Render coordinate map and verify if reset works properly', () => {
+    beforeEach(() => {
+        renderCoordinateMap();
+        renderDataForCoordinateMap();
+    });
+
+    it('Render coordinate map with all feild data then click on reset and verify reset works properly', () => {
+        cy.get('input[placeholder="Title"]').type('coordinate map');
+        cy.get('textarea[placeholder="Description"]').type('Description For coordinate map');
+        cy.get('.euiButton__text').contains('Hidden').click();
+        cy.get('.euiButton__text').contains('Right').click();
+        cy.get('[data-test-subj="valueFieldNumber"]').click().type(labelSize);
+        cy.get('.euiButtonEmpty__text').contains('Reset').click();
+        cy.get('input[placeholder="Title"]').should('not.have.value', 'coordinate map');
+        cy.get('textarea[placeholder="Description"]').should('not.have.value', 'Description For coordinate map');
+        cy.get('[data-text="Show"] [data-test-subj="show"]').should('have.attr', 'checked');
+        cy.get('[data-text="Top"] [data-test-subj="top center"]').should('have.attr', 'checked');
+        cy.get('[data-test-subj="valueFieldNumber"]').should('have.value', '');
+    });
+});
diff --git a/.cypress/plugins/index.js b/.cypress/plugins/index.js
new file mode 100644
index 0000000000..8ac1f10667
--- /dev/null
+++ b/.cypress/plugins/index.js
@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}
diff --git a/.cypress/support/commands.js b/.cypress/support/commands.js
new file mode 100644
index 0000000000..fd4a5a0632
--- /dev/null
+++ b/.cypress/support/commands.js
@@ -0,0 +1,71 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+const { ADMIN_AUTH } = require('./constants');
+
+Cypress.Commands.overwrite('visit', (originalFn, url, options) => {
+  // Add the basic auth header when security enabled in the OpenSearch cluster
+  // https://github.com/cypress-io/cypress/issues/1288
+  if (Cypress.env('security_enabled')) {
+    if (options) {
+      options.auth = ADMIN_AUTH;
+    } else {
+      options = { auth: ADMIN_AUTH };
+    }
+    // Add query parameters - select the default OpenSearch Dashboards tenant
+    options.qs = { security_tenant: 'private' };
+    return originalFn(url, options);
+  } else {
+    return originalFn(url, options);
+  }
+});
+
+// Be able to add default options to cy.request(), https://github.com/cypress-io/cypress/issues/726
+Cypress.Commands.overwrite('request', (originalFn, ...args) => {
+  let defaults = {};
+  // Add the basic authentication header when security enabled in the OpenSearch cluster
+  if (Cypress.env('security_enabled')) {
+    defaults.auth = ADMIN_AUTH;
+  }
+
+  let options = {};
+  if (typeof args[0] === 'object' && args[0] !== null) {
+    options = Object.assign({}, args[0]);
+  } else if (args.length === 1) {
+    [options.url] = args;
+  } else if (args.length === 2) {
+    [options.method, options.url] = args;
+  } else if (args.length === 3) {
+    [options.method, options.url, options.body] = args;
+  }
+
+  return originalFn(Object.assign({}, defaults, options));
+});
diff --git a/.cypress/support/constants.js b/.cypress/support/constants.js
new file mode 100644
index 0000000000..d7978c222b
--- /dev/null
+++ b/.cypress/support/constants.js
@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const ADMIN_AUTH = {
+  username: 'admin',
+  password: 'admin',
+};
+
diff --git a/.cypress/support/index.js b/.cypress/support/index.js
new file mode 100644
index 0000000000..6b25b7b27e
--- /dev/null
+++ b/.cypress/support/index.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+// Switch the base URL of OpenSearch when security enabled in the cluster
+if (Cypress.env('security_enabled')) {
+  Cypress.env('opensearch', 'https://localhost:9200');
+}
+
diff --git a/.cypress/tsconfig.json b/.cypress/tsconfig.json
new file mode 100644
index 0000000000..36de33deef
--- /dev/null
+++ b/.cypress/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": "../node_modules",
+    "types": ["cypress"]
+  },
+  "include": ["**/*.*"]
+}
diff --git a/.cypress/utils/app_constants.js b/.cypress/utils/app_constants.js
new file mode 100644
index 0000000000..f874324097
--- /dev/null
+++ b/.cypress/utils/app_constants.js
@@ -0,0 +1,90 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { supressResizeObserverIssue } from './constants';
+
+export const delay = 1000;
+export const timeoutDelay = 30000;
+export const TYPING_DELAY = 500;
+
+export const moveToHomePage = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`);
+  cy.wait(delay * 3);
+  cy.get('.euiTitle').contains('Applications').should('exist');
+};
+
+export const moveToCreatePage = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`);
+  cy.get('.euiButton[href="#/application_analytics/create"]').eq(0).click();
+  supressResizeObserverIssue();
+  cy.get('[data-test-subj="createPageTitle"]').should('contain', 'Create application');
+};
+
+export const moveToApplication = (name) => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/application_analytics/`);
+  supressResizeObserverIssue();
+  cy.wait(delay * 6);
+  cy.get(`[data-test-subj="${name}ApplicationLink"]`).click();
+  cy.wait(delay);
+  cy.get('[data-test-subj="applicationTitle"]').should('contain', name);
+  changeTimeTo24('years');
+};
+
+export const moveToEditPage = () => {
+  moveToApplication(nameOne);
+  cy.get('[data-test-subj="app-analytics-configTab"]').click();
+  cy.get('[data-test-subj="editApplicationButton"]').click();
+  supressResizeObserverIssue();
+  cy.wait(delay);
+  cy.get('[data-test-subj="createPageTitle"]').should('contain', 'Edit application');
+};
+
+export const changeTimeTo24 = (timeUnit) => {
+  cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').trigger('mouseover').click();
+  cy.wait(delay);
+  cy.get('[aria-label="Time unit"]').select(timeUnit);
+  cy.get('.euiButton').contains('Apply').click();
+  cy.wait(delay);
+  cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').click();
+};
+
+export const expectMessageOnHover = (button, message) => {
+  cy.get(`[data-test-subj="${button}"]`).click({ force: true });
+  cy.get('.euiToolTipPopover').contains(message).should('exist');
+};
+
+export const moveToPanelHome = () => {
+  cy.visit(
+    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels/`
+  );
+  cy.wait(delay * 3);
+};
+
+export const deleteAllSavedApplications = () => {
+  moveToHomePage();
+  cy.get('[data-test-subj="checkboxSelectAll"]').click();
+  cy.get('.euiPopover').contains('Actions').click();
+  cy.get('.euiContextMenuItem').contains('Delete').click();
+  cy.get('.euiButton__text').contains('Delete').click();
+};
+
+export const uniqueId = Date.now();
+export const baseQuery = 'source = opensearch_dashboards_sample_data_flights';
+export const nameOne = `Cypress-${uniqueId}`;
+export const nameTwo = `Pine-${uniqueId}`;
+export const nameThree = `Cedar-${uniqueId}`;
+export const description = 'This is my application for cypress testing.';
+export const service_one = 'order';
+export const service_two = 'payment';
+export const trace_one = 'HTTP POST';
+export const trace_two = 'HTTP GET';
+export const trace_three = 'client_pay_order';
+export const query_one = 'where DestCityName = "Venice" | stats count() by span( timestamp , 6h )';
+export const query_two = 'where OriginCityName = "Seoul" | stats count() by span( timestamp , 6h )';
+export const availability_default = 'stats count() by span( timestamp, 1h )';
+export const visOneName = 'Flights to Venice';
+export const visTwoName = 'Flights from Seoul';
+export const composition = 'order, payment, HTTP POST, HTTP GET, client_pay_order'
+export const newName = `Monterey Cypress-${uniqueId}`;
diff --git a/.cypress/utils/constants.js b/.cypress/utils/constants.js
new file mode 100644
index 0000000000..415679aba7
--- /dev/null
+++ b/.cypress/utils/constants.js
@@ -0,0 +1,124 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const delay = 1500;
+export const COMMAND_TIMEOUT_LONG = 10000;
+
+// trace analytics
+export const TRACE_ID = '8832ed6abbb2a83516461960c89af49d';
+export const SPAN_ID = 'a673bc074b438374';
+export const SERVICE_NAME = 'frontend-client';
+export const SERVICE_SPAN_ID = '7df5609a6d104736';
+
+export const testDataSet = [
+  {
+    mapping_url: 'https://raw.githubusercontent.com/opensearch-project/observability/main/dashboards-observability/.cypress/utils/otel-v1-apm-service-map-mappings.json',
+    data_url: 'https://raw.githubusercontent.com/opensearch-project/observability/main/dashboards-observability/.cypress/utils/otel-v1-apm-service-map.json',
+    index: 'otel-v1-apm-service-map',
+  },
+  {
+    mapping_url: 'https://raw.githubusercontent.com/opensearch-project/observability/main/dashboards-observability/.cypress/utils/otel-v1-apm-span-000001-mappings.json',
+    data_url: 'https://raw.githubusercontent.com/opensearch-project/observability/main/dashboards-observability/.cypress/utils/otel-v1-apm-span-000001.json',
+    index: 'otel-v1-apm-span-000001',
+  },
+  {
+    mapping_url: 'https://raw.githubusercontent.com/opensearch-project/observability/main/dashboards-observability/.cypress/utils/otel-v1-apm-span-000001-mappings.json',
+    data_url: 'https://raw.githubusercontent.com/opensearch-project/observability/main/dashboards-observability/.cypress/utils/otel-v1-apm-span-000002.json',
+    index: 'otel-v1-apm-span-000002',
+  },
+]
+
+export const setTimeFilter = (setEndTime = false, refresh = true) => {
+  const startTime = 'Mar 25, 2021 @ 10:00:00.000';
+  const endTime = 'Mar 25, 2021 @ 11:00:00.000';
+  cy.get('button.euiButtonEmpty[aria-label="Date quick select"]').click();
+  cy.get('.euiQuickSelect__applyButton').click();
+  cy.get('.euiSuperDatePicker__prettyFormatLink').click();
+  cy.get(
+    'button.euiDatePopoverButton--start[data-test-subj="superDatePickerstartDatePopoverButton"]'
+  ).click();
+  cy.get('.euiTab__content').contains('Absolute').click();
+  cy.get('input[data-test-subj="superDatePickerAbsoluteDateInput"]')
+    .focus()
+    .type('{selectall}' + startTime, { force: true });
+  if (setEndTime) {
+    cy.wait(delay);
+    cy.get(
+      'button.euiDatePopoverButton--end[data-test-subj="superDatePickerendDatePopoverButton"]'
+    ).click();
+    cy.wait(delay);
+    cy.get('.euiTab__content').contains('Absolute').click();
+    cy.get('input[data-test-subj="superDatePickerAbsoluteDateInput"]')
+      .focus()
+      .type('{selectall}' + endTime, { force: true });
+  }
+  if (refresh) cy.get('.euiButton__text').contains('Refresh').click();
+  cy.wait(delay);
+};
+
+// notebooks
+export const TEST_NOTEBOOK = 'Test Notebook';
+export const SAMPLE_URL = 'https://github.com/opensearch-project/sql/tree/main/sql-jdbc';
+export const NOTEBOOK_TEXT = 'Use Notebooks to interactively and collaboratively develop rich reports backed by live data. Common use cases for notebooks includes creating postmortem reports, designing run books, building live infrastructure reports, or even documentation.';
+export const OPENSEARCH_URL = 'https://opensearch.org/docs/latest/observability-plugin/notebooks/';
+export const MARKDOWN_TEXT = `%md
+# Heading 1
+
+#### List and links
+
+* 1
+* 2
+* [SQL JDBC](${SAMPLE_URL})
+
+---
+#### Code block
+* Explain SQL
+\`\`\`
+POST _plugins/_sql/_explain
+{
+  "query": "SELECT * FROM my-index LIMIT 50"
+}
+\`\`\`
+
+#### Table
+| a1 | b1 | c1 | d1 |
+|----|----|----|----|
+| a2 | b2 | c2 | d2 |
+| a3 | b3 | c3 | d3 |
+`
+
+export const SQL_QUERY_TEXT = `%sql
+select * from opensearch_dashboards_sample_data_flights limit 20
+`
+
+export const PPL_QUERY_TEXT = `%ppl
+source=opensearch_dashboards_sample_data_flights
+`
+
+export const supressResizeObserverIssue = () => {
+  // exception is thrown on loading EuiDataGrid in cypress only, ignore for now
+  cy.on('uncaught:exception', (err, runnable) => {
+    if (err.message.includes('ResizeObserver loop')) return false;
+  });
+};
+
+export const verify_traces_spans_data_grid_cols_exists = () => {
+  cy.get('.euiDataGridHeaderCell__content').contains('Span ID').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('Trace ID').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('Operation').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('Duration').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('Start time').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('End time').should('exist');
+  cy.get('.euiDataGridHeaderCell__content').contains('Errors').should('exist');
+}
+
+export const count_table_row = (expected_row_count) => {
+  cy.get('.euiDataGridHeader [role="columnheader"]').then($el => {
+    let colmun_header_count = Cypress.$($el).length;
+    let table_grid_cell_count = Cypress.$('[data-test-subj="dataGridRowCell"]').length;
+    const total_row_count = table_grid_cell_count / colmun_header_count;
+    expect(total_row_count).to.equal(expected_row_count)
+  });
+}
diff --git a/.cypress/utils/event_analytics/constants.js b/.cypress/utils/event_analytics/constants.js
new file mode 100644
index 0000000000..8a996fd12d
--- /dev/null
+++ b/.cypress/utils/event_analytics/constants.js
@@ -0,0 +1,254 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { COMMAND_TIMEOUT_LONG, supressResizeObserverIssue, TIMEOUT_DELAY } from '../constants';
+
+export const delay = 1000;
+export const YEAR_TO_DATE_DOM_ID = '[data-test-subj="superDatePickerCommonlyUsed_Year_to date"]';
+
+export const TEST_QUERIES = [
+  {
+    query: 'source = opensearch_dashboards_sample_data_flights',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID,
+  },
+  {
+    query:
+      'source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID,
+  },
+  {
+    query: 'source = opensearch_dashboards_sample_data_logs',
+  },
+  {
+    query:
+      'source=opensearch_dashboards_sample_data_flights | stats max(AvgTicketPrice) by DestCountry, DestCityName, Carrier',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID,
+  },
+  {
+    query:
+      'source = opensearch_dashboards_sample_data_logs | stats count(), avg(bytes) by host, tags',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID,
+  },
+  {
+    query:
+      'source=opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by DestCountry, DestCityName',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID,
+  },
+  {
+    query:
+      "source = opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count() by span(timestamp,1d)",
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID,
+  },
+  {
+    query:
+      'source=opensearch_dashboards_sample_data_flights |where FlightDelayMin > 0 | stats sum(FlightDelayMin) as total_delay_min, count() as total_delayed by Carrier |eval avg_delay=total_delay_min / total_delayed | sort - avg_delay',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID,
+  },
+  {
+    query:
+      'source = opensearch_dashboards_sample_data_logs | stats count(), max(bytes) by span(timestamp,1d), clientip, host',
+    dateRangeDOM: YEAR_TO_DATE_DOM_ID,
+  },
+];
+
+export const TESTING_PANEL = 'Mock Testing Panels';
+export const SAVE_QUERY1 = 'Mock Flight Events Overview';
+export const SAVE_QUERY2 = 'Mock Flight count by destination';
+export const SAVE_QUERY3 = 'Mock Flight count by destination save to panel';
+export const SAVE_QUERY4 = 'Mock Flight peek';
+
+export const aggregationValues = [
+  'COUNT',
+  'SUM',
+  'AVERAGE',
+  'MAX',
+  'MIN',
+  'VAR_SAMP',
+  'VAR_POP',
+  'STDDEV_SAMP',
+  'STDDEV_POP',
+];
+
+export const querySearch = (query, rangeSelected) => {
+  cy.get('[data-test-subj="searchAutocompleteTextArea"]', { timeout: COMMAND_TIMEOUT_LONG })
+    .clear()
+    .focus()
+    .type(query, { delay: 50 });
+  cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
+  cy.get(rangeSelected).click();
+  cy.wait(delay * 2);
+  cy.get('[data-test-subj="superDatePickerApplyTimeButton"]').contains('Refresh').click();
+};
+
+export const landOnEventHome = () => {
+  cy.visit(`${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics`);
+  cy.wait(delay);
+};
+
+export const landOnEventExplorer = () => {
+  cy.visit(
+    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`
+  );
+  supressResizeObserverIssue();
+  cy.wait(delay);
+};
+
+export const landOnEventVisualizations = () => {
+  cy.visit(
+    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/event_analytics/explorer`
+  );
+  cy.get('button[id="main-content-vis"]').contains('Visualizations').click();
+  supressResizeObserverIssue();
+  cy.wait(delay);
+};
+
+export const landOnPanels = () => {
+  cy.visit(
+    `${Cypress.env('opensearchDashboards')}/app/observability-dashboards#/operational_panels`
+  );
+  cy.wait(delay);
+};
+
+const vis_name_sub_string = Math.floor(Math.random() * 100);
+export const saveVisualizationAndVerify = () => {
+  cy.get('[data-test-subj="eventExplorer__saveManagementPopover"]').click();
+  cy.get('[data-test-subj="eventExplorer__querySaveComboBox"]').click();
+  cy.get('.euiComboBoxOptionsList__rowWrap .euiFilterSelectItem').eq(0).click();
+  cy.get(
+    '.euiPopover__panel .euiFormControlLayoutIcons [data-test-subj="comboBoxToggleListButton"]'
+  )
+    .eq(0)
+    .click();
+  cy.get('.euiPopover__panel input')
+    .eq(1)
+    .type(`Test visualization` + vis_name_sub_string);
+  cy.get('[data-test-subj="eventExplorer__querySaveConfirm"]').click();
+  cy.wait(delay);
+  cy.get('.euiHeaderBreadcrumbs a').eq(1).click();
+  cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input')
+    .eq(0)
+    .type(`Test visualization` + vis_name_sub_string)
+    .type('{enter}');
+  cy.get('.euiBasicTable .euiTableCellContent button').eq(0).click();
+};
+
+export const deleteVisualization = () => {
+  cy.get('a[href = "#/event_analytics"]').click();
+  cy.get('.euiFlexGroup .euiFormControlLayout__childrenWrapper input')
+    .eq(0)
+    .type(`Test visualization` + vis_name_sub_string)
+    .type('{enter}');
+  cy.get('input[data-test-subj = "checkboxSelectAll"]').click();
+  cy.get('.euiButtonContent.euiButtonContent--iconRight.euiButton__content').click();
+  cy.get('.euiContextMenuItem .euiContextMenuItem__text').eq(0).click();
+  cy.get('input[placeholder = "delete"]').clear().type('delete');
+  cy.get('button[data-test-subj = "popoverModal__deleteButton"]').click();
+  cy.get('.euiToastHeader').should('exist');
+};
+
+export const renderTreeMapchart = () => {
+  querySearch(TEST_QUERIES[7].query, TEST_QUERIES[7].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+    .type('Tree Map')
+    .type('{enter}');
+  cy.get('#configPanel__panelOptions .euiFieldText').click().type('Tree Map');
+  cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]')
+    .click()
+    .type('This is the description for Tree Map');
+  cy.get('.euiIEFlexWrapFix').eq(1).contains('Treemap').should('exist');
+  cy.get('#configPanel__treemap_options').contains('Tiling Algorithm').should('exist');
+  cy.get('[data-test-subj = "comboBoxInput"]').eq(3).click();
+  cy.get('button[name="Slice Dice"]').click();
+};
+
+export const renderPieChart = () => {
+  querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]').click();
+  cy.get('[data-test-subj="comboBoxOptionsList "] button span').contains('Pie').click();
+  cy.wait(delay);
+  cy.get('#configPanel__panelOptions .euiFieldText').click().type('Pie chart');
+  cy.get('.euiFlexItem .euiFormRow [placeholder="Description"]')
+    .click()
+    .type('This is the description for Pie chart');
+  cy.get('[aria-controls="configPanel__legend"]').contains('Legend').should('exist');
+  cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(0).contains('Show Legend');
+  cy.get('span[data-text="Show"]').contains('Show').should('exist');
+  cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(1).contains('Position');
+  cy.get('span[data-text="Right"]').contains('Right').should('exist');
+  cy.get('#configPanel__legend .euiTitle.euiTitle--xxsmall').eq(2).contains('Legend Size');
+  cy.get('[aria-controls="configPanel__chartStyles"]').contains('Chart Styles').should('exist');
+  cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(0).contains('Mode').click();
+  cy.get(
+    '#configPanel__chartStyles .euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap.euiComboBox__inputWrap-isClearable'
+  ).click();
+  cy.get('.euiComboBoxOption__content').contains('Donut').click();
+  cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(1).contains('Label Size');
+  cy.get('#configPanel__chartStyles input[type="number"]').click().type('10');
+  cy.get('#configPanel__chartStyles .euiTitle.euiTitle--xxsmall').eq(2).contains('Color Theme');
+  cy.get('.euiSuperSelectControl').click();
+  cy.get('.euiColorPalettePicker__item').eq(1).contains('Single Color').click();
+  cy.get('.euiFieldText.euiColorPicker__input.euiFieldText--withIcon').click();
+  cy.get('[aria-label="Select #D36086 as the color"]').click();
+  cy.get('.visEditorSidebar__controls [data-test-subj="visualizeEditorRenderButton"]')
+    .contains('Preview')
+    .click();
+  cy.get('.plot-container.plotly').should('exist');
+};
+
+export const renderDataConfig = () => {
+  cy.get('.euiResizablePanel.euiResizablePanel--middle').contains('Data Cofigurations');
+  cy.get('.euiTitle.euiTitle--xxsmall').eq(1).contains('Dimensions').should('exist');
+  cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation');
+  cy.get('[data-test-subj="comboBoxSearchInput"]').eq(0).click();
+  cy.get('.euiComboBoxOption__content').eq(2).click();
+  cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(1).contains('Field');
+  cy.get('[data-test-subj="comboBoxSearchInput"]').eq(1).click();
+  cy.get('.euiComboBoxOption__content').eq(1).click();
+  cy.get('.euiFieldText[placeholder="Custom label"]').eq(0).type('Average field');
+  cy.get('.euiTitle.euiTitle--xxsmall').eq(2).contains('Metrics').should('exist');
+  cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(0).contains('Aggregation');
+  cy.get('.euiFormRow__fieldWrapper .euiComboBox').eq(2).click();
+  cy.get('.euiComboBoxOption__content').eq(4).click();
+  cy.get('.first-division .euiFormLabel.euiFormRow__label').eq(4).click();
+  cy.get('.euiComboBoxOption__content').eq(0).click();
+  cy.get('.euiFieldText[placeholder="Custom label"]').eq(1).type('Min field');
+  cy.get('.euiButton__text').contains('Right').click();
+  cy.get('[data-test-subj="visualizeEditorRenderButton"]').contains('Update chart').click();
+  cy.get('.js-plotly-plot').should('exist');
+};
+
+export const renderLineChart = () => {
+  landOnEventVisualizations();
+  querySearch(TEST_QUERIES[5].query, TEST_QUERIES[5].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+    .type('Line')
+    .type('{enter}');
+};
+
+export const renderAddParent = () => {
+  cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click();
+  cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 1').should('exist');
+  cy.get('p.euiComboBoxPlaceholder').eq(0).click({ force: true });
+  cy.get('.euiComboBoxOption__content').eq(0).click();
+  cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click();
+  cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 2').should('exist');
+  cy.get('p.euiComboBoxPlaceholder').click({ force: true });
+  cy.get('.euiComboBoxOption__content').eq(1).click();
+  cy.get(' [data-test-subj="addParentButton"] .euiButton__text').contains('+ Add Parent').click();
+  cy.get('.first-division .euiFormLabel.euiFormRow__label').contains('Parent 3').should('exist');
+  cy.get('p.euiComboBoxPlaceholder').click({ force: true });
+  cy.get('.euiComboBoxOption__content').eq(2).click();
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+    .type('Line')
+    .type('{enter}');
+};
+
+export const renderGaugeChart = () => {
+  landOnEventVisualizations();
+  querySearch(TEST_QUERIES[1].query, TEST_QUERIES[1].dateRangeDOM);
+  cy.get('[data-test-subj="configPane__vizTypeSelector"] [data-test-subj="comboBoxInput"]')
+    .type('Gauge')
+    .type('{enter}');
+};
diff --git a/.cypress/utils/event_analytics/helpers.js b/.cypress/utils/event_analytics/helpers.js
new file mode 100644
index 0000000000..32944db75c
--- /dev/null
+++ b/.cypress/utils/event_analytics/helpers.js
@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { COMMAND_TIMEOUT_LONG } from '../constants';
+
+export const clearQuerySearchBoxText = (testSubjectName) => {
+  cy.get(`[data-test-subj="${testSubjectName}"]`, {
+    timeout: COMMAND_TIMEOUT_LONG,
+  }).clear({ force: true });
+};
diff --git a/.cypress/utils/otel-v1-apm-service-map-mappings.json b/.cypress/utils/otel-v1-apm-service-map-mappings.json
new file mode 100644
index 0000000000..cd578eed49
--- /dev/null
+++ b/.cypress/utils/otel-v1-apm-service-map-mappings.json
@@ -0,0 +1,20 @@
+{
+  "properties": {
+    "destination": {
+      "properties": {
+        "domain": { "type": "keyword", "ignore_above": 1024 },
+        "resource": { "type": "keyword", "ignore_above": 1024 }
+      }
+    },
+    "hashId": { "type": "keyword", "ignore_above": 1024 },
+    "kind": { "type": "keyword", "ignore_above": 1024 },
+    "serviceName": { "type": "keyword", "ignore_above": 1024 },
+    "target": {
+      "properties": {
+        "domain": { "type": "keyword", "ignore_above": 1024 },
+        "resource": { "type": "keyword", "ignore_above": 1024 }
+      }
+    },
+    "traceGroupName": { "type": "keyword", "ignore_above": 1024 }
+  }
+}
diff --git a/.cypress/utils/otel-v1-apm-service-map.json b/.cypress/utils/otel-v1-apm-service-map.json
new file mode 100644
index 0000000000..72a7014024
--- /dev/null
+++ b/.cypress/utils/otel-v1-apm-service-map.json
@@ -0,0 +1,90 @@
+{"index":{"_id":"nHcC8xTV8traJL3W2zDPww=="}}
+{"serviceName":"authentication","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"server_request_login","domain":"authentication"},"traceGroupName":"load_main_screen","hashId":"nHcC8xTV8traJL3W2zDPww=="}
+{"index":{"_id":"6Rx2pb/AtLKLR4KnHh+Aog=="}}
+{"serviceName":"payment","kind":"SPAN_KIND_CLIENT","destination":{"resource":"/logs","domain":"analytics-service"},"target":null,"traceGroupName":"client_checkout","hashId":"6Rx2pb/AtLKLR4KnHh+Aog=="}
+{"index":{"_id":"tXEh3symNDTITnb/JtgUAQ=="}}
+{"serviceName":"analytics-service","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"/logs","domain":"analytics-service"},"traceGroupName":"client_create_order","hashId":"tXEh3symNDTITnb/JtgUAQ=="}
+{"index":{"_id":"kSY6gLrGOBh8YX3cEDCndg=="}}
+{"serviceName":"recommendation","kind":"SPAN_KIND_CLIENT","destination":{"resource":"/logs","domain":"analytics-service"},"target":null,"traceGroupName":"load_main_screen","hashId":"kSY6gLrGOBh8YX3cEDCndg=="}
+{"index":{"_id":"roX6tGXvCJeZW7SFJMBFKA=="}}
+{"serviceName":"analytics-service","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"/logs","domain":"analytics-service"},"traceGroupName":"load_main_screen","hashId":"roX6tGXvCJeZW7SFJMBFKA=="}
+{"index":{"_id":"md6PmbxmuV4WOmVVdqkP0w=="}}
+{"serviceName":"analytics-service","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"/logs","domain":"analytics-service"},"traceGroupName":"client_pay_order","hashId":"md6PmbxmuV4WOmVVdqkP0w=="}
+{"index":{"_id":"vVC4U6JrIz9uyZseTPb4YQ=="}}
+{"serviceName":"authentication","kind":"SPAN_KIND_CLIENT","destination":{"resource":"/logs","domain":"analytics-service"},"target":null,"traceGroupName":"load_main_screen","hashId":"vVC4U6JrIz9uyZseTPb4YQ=="}
+{"index":{"_id":"5aShvpERPjuk2dXmfYPeGw=="}}
+{"serviceName":"frontend-client","kind":"SPAN_KIND_CLIENT","destination":{"resource":"payment","domain":"payment"},"target":null,"traceGroupName":"client_checkout","hashId":"5aShvpERPjuk2dXmfYPeGw=="}
+{"index":{"_id":"5LTSGQfic2RYHvrURmIDew=="}}
+{"serviceName":"database","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"getIntentory","domain":"database"},"traceGroupName":"load_main_screen","hashId":"5LTSGQfic2RYHvrURmIDew=="}
+{"index":{"_id":"n+JXabfCcrIeMP691QwcpA=="}}
+{"serviceName":"payment","kind":"SPAN_KIND_CLIENT","destination":{"resource":"update_inventory","domain":"inventory"},"target":null,"traceGroupName":"client_checkout","hashId":"n+JXabfCcrIeMP691QwcpA=="}
+{"index":{"_id":"ftn94Oe1mZwUMyvg2+V8MA=="}}
+{"serviceName":"database","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"getCart","domain":"database"},"traceGroupName":"client_delivery_status","hashId":"ftn94Oe1mZwUMyvg2+V8MA=="}
+{"index":{"_id":"uXkISg6U505anMl1tck75Q=="}}
+{"serviceName":"inventory","kind":"SPAN_KIND_CLIENT","destination":{"resource":"/logs","domain":"analytics-service"},"target":null,"traceGroupName":"load_main_screen","hashId":"uXkISg6U505anMl1tck75Q=="}
+{"index":{"_id":"IBLMEZli7Q3BJTBMmjynDg=="}}
+{"serviceName":"analytics-service","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"/logs","domain":"analytics-service"},"traceGroupName":"client_delivery_status","hashId":"IBLMEZli7Q3BJTBMmjynDg=="}
+{"index":{"_id":"smEM+A4secOk8FOTDhrqOg=="}}
+{"serviceName":"order","kind":"SPAN_KIND_CLIENT","destination":{"resource":"cartEmpty","domain":"database"},"target":null,"traceGroupName":"client_cancel_order","hashId":"smEM+A4secOk8FOTDhrqOg=="}
+{"index":{"_id":"G92mlRHfmMvQD2lArmh0Zw=="}}
+{"serviceName":"order","kind":"SPAN_KIND_CLIENT","destination":{"resource":"/logs","domain":"analytics-service"},"target":null,"traceGroupName":"client_pay_order","hashId":"G92mlRHfmMvQD2lArmh0Zw=="}
+{"index":{"_id":"qEMd88Fa9974qME14b7Kow=="}}
+{"serviceName":"order","kind":"SPAN_KIND_CLIENT","destination":{"resource":"addItemToCart","domain":"database"},"target":null,"traceGroupName":"client_create_order","hashId":"qEMd88Fa9974qME14b7Kow=="}
+{"index":{"_id":"mpTVw7lUu8Up9GtBUSELzw=="}}
+{"serviceName":"frontend-client","kind":"SPAN_KIND_CLIENT","destination":{"resource":"get_order","domain":"order"},"target":null,"traceGroupName":"client_delivery_status","hashId":"mpTVw7lUu8Up9GtBUSELzw=="}
+{"index":{"_id":"vgoAV/423h26Su5VKVCrHA=="}}
+{"serviceName":"frontend-client","kind":"SPAN_KIND_CLIENT","destination":{"resource":"server_request_login","domain":"authentication"},"target":null,"traceGroupName":"load_main_screen","hashId":"vgoAV/423h26Su5VKVCrHA=="}
+{"index":{"_id":"tH75FnJ4hXfERLahbk67NA=="}}
+{"serviceName":"order","kind":"SPAN_KIND_CLIENT","destination":{"resource":"getCart","domain":"database"},"target":null,"traceGroupName":"client_delivery_status","hashId":"tH75FnJ4hXfERLahbk67NA=="}
+{"index":{"_id":"zA5g821XNTNVGjL2Re+T/w=="}}
+{"serviceName":"payment","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"payment","domain":"payment"},"traceGroupName":"client_checkout","hashId":"zA5g821XNTNVGjL2Re+T/w=="}
+{"index":{"_id":"JoFoNWxblmsk90V3KAC6Mw=="}}
+{"serviceName":"frontend-client","kind":"SPAN_KIND_CLIENT","destination":{"resource":"update_order","domain":"order"},"target":null,"traceGroupName":"client_create_order","hashId":"JoFoNWxblmsk90V3KAC6Mw=="}
+{"index":{"_id":"bG/EgRvp5yWM8S/ewA7CeA=="}}
+{"serviceName":"frontend-client","kind":"SPAN_KIND_CLIENT","destination":{"resource":"pay_order","domain":"order"},"target":null,"traceGroupName":"client_pay_order","hashId":"bG/EgRvp5yWM8S/ewA7CeA=="}
+{"index":{"_id":"82uLVoVcdLutBGhi8GcehQ=="}}
+{"serviceName":"database","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"cartSold","domain":"database"},"traceGroupName":"client_pay_order","hashId":"82uLVoVcdLutBGhi8GcehQ=="}
+{"index":{"_id":"+EtgSBZbmVZY9fAqD+mJVQ=="}}
+{"serviceName":"database","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"cartEmpty","domain":"database"},"traceGroupName":"client_cancel_order","hashId":"+EtgSBZbmVZY9fAqD+mJVQ=="}
+{"index":{"_id":"lZcUyuhGYfnaQqt+r73njA=="}}
+{"serviceName":"database","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"updateItem","domain":"database"},"traceGroupName":"client_checkout","hashId":"lZcUyuhGYfnaQqt+r73njA=="}
+{"index":{"_id":"4/dbUR9mx3HxFrBOZtP6Lw=="}}
+{"serviceName":"database","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"addItemToCart","domain":"database"},"traceGroupName":"client_create_order","hashId":"4/dbUR9mx3HxFrBOZtP6Lw=="}
+{"index":{"_id":"7/jRp2VF7544pBN6+mK2vw=="}}
+{"serviceName":"inventory","kind":"SPAN_KIND_CLIENT","destination":{"resource":"updateItem","domain":"database"},"target":null,"traceGroupName":"client_checkout","hashId":"7/jRp2VF7544pBN6+mK2vw=="}
+{"index":{"_id":"VGkxs9ySDsQKAaXlf7tFdg=="}}
+{"serviceName":"order","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"get_order","domain":"order"},"traceGroupName":"client_delivery_status","hashId":"VGkxs9ySDsQKAaXlf7tFdg=="}
+{"index":{"_id":"zT64jAt7FIedXfhiKIKNsg=="}}
+{"serviceName":"order","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"update_order","domain":"order"},"traceGroupName":"client_create_order","hashId":"zT64jAt7FIedXfhiKIKNsg=="}
+{"index":{"_id":"xw6RCawB/rzbZ6kv0D4x0w=="}}
+{"serviceName":"order","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"clear_order","domain":"order"},"traceGroupName":"client_cancel_order","hashId":"xw6RCawB/rzbZ6kv0D4x0w=="}
+{"index":{"_id":"Vp+wn6ysuN+c0dyioFZjRg=="}}
+{"serviceName":"order","kind":"SPAN_KIND_CLIENT","destination":{"resource":"/logs","domain":"analytics-service"},"target":null,"traceGroupName":"client_create_order","hashId":"Vp+wn6ysuN+c0dyioFZjRg=="}
+{"index":{"_id":"2/jQH927AMtF2WZMylDMDQ=="}}
+{"serviceName":"inventory","kind":"SPAN_KIND_CLIENT","destination":{"resource":"/logs","domain":"analytics-service"},"target":null,"traceGroupName":"client_checkout","hashId":"2/jQH927AMtF2WZMylDMDQ=="}
+{"index":{"_id":"mZYvSouwJIYzb/YHHR/0Mg=="}}
+{"serviceName":"inventory","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"update_inventory","domain":"inventory"},"traceGroupName":"client_checkout","hashId":"mZYvSouwJIYzb/YHHR/0Mg=="}
+{"index":{"_id":"AU3Kn8HEG52uXVpmo0IK2g=="}}
+{"serviceName":"inventory","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"read_inventory","domain":"inventory"},"traceGroupName":"load_main_screen","hashId":"AU3Kn8HEG52uXVpmo0IK2g=="}
+{"index":{"_id":"jVBZpblgxVXEDfBo0JQX6A=="}}
+{"serviceName":"order","kind":"SPAN_KIND_CLIENT","destination":{"resource":"/logs","domain":"analytics-service"},"target":null,"traceGroupName":"client_delivery_status","hashId":"jVBZpblgxVXEDfBo0JQX6A=="}
+{"index":{"_id":"LaIlCIqcSBujD6E7HP3PTQ=="}}
+{"serviceName":"order","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"pay_order","domain":"order"},"traceGroupName":"client_pay_order","hashId":"LaIlCIqcSBujD6E7HP3PTQ=="}
+{"index":{"_id":"yzLB0GSsao4dvqVkR2zmYA=="}}
+{"serviceName":"recommendation","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"recommend","domain":"recommendation"},"traceGroupName":"load_main_screen","hashId":"yzLB0GSsao4dvqVkR2zmYA=="}
+{"index":{"_id":"8JvOMXSL6Hvf9C2jhum5sA=="}}
+{"serviceName":"order","kind":"SPAN_KIND_CLIENT","destination":{"resource":"/logs","domain":"analytics-service"},"target":null,"traceGroupName":"client_cancel_order","hashId":"8JvOMXSL6Hvf9C2jhum5sA=="}
+{"index":{"_id":"k/XY09UW54o31tkx3+rCRw=="}}
+{"serviceName":"authentication","kind":"SPAN_KIND_CLIENT","destination":{"resource":"recommend","domain":"recommendation"},"target":null,"traceGroupName":"load_main_screen","hashId":"k/XY09UW54o31tkx3+rCRw=="}
+{"index":{"_id":"5zJU9hp/t1AdgblDfFDOXQ=="}}
+{"serviceName":"analytics-service","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"/logs","domain":"analytics-service"},"traceGroupName":"client_checkout","hashId":"5zJU9hp/t1AdgblDfFDOXQ=="}
+{"index":{"_id":"KIySJpq7dvvDj5nofZ7tqw=="}}
+{"serviceName":"analytics-service","kind":"SPAN_KIND_SERVER","destination":null,"target":{"resource":"/logs","domain":"analytics-service"},"traceGroupName":"client_cancel_order","hashId":"KIySJpq7dvvDj5nofZ7tqw=="}
+{"index":{"_id":"1MEZjF+x1T015XUk5Tjbuw=="}}
+{"serviceName":"inventory","kind":"SPAN_KIND_CLIENT","destination":{"resource":"getIntentory","domain":"database"},"target":null,"traceGroupName":"load_main_screen","hashId":"1MEZjF+x1T015XUk5Tjbuw=="}
+{"index":{"_id":"zIYLVbtNe1bnfLhCk3BbOw=="}}
+{"serviceName":"order","kind":"SPAN_KIND_CLIENT","destination":{"resource":"cartSold","domain":"database"},"target":null,"traceGroupName":"client_pay_order","hashId":"zIYLVbtNe1bnfLhCk3BbOw=="}
+{"index":{"_id":"00aTIGyGNbec9vfKsJkHMA=="}}
+{"serviceName":"frontend-client","kind":"SPAN_KIND_CLIENT","destination":{"resource":"clear_order","domain":"order"},"target":null,"traceGroupName":"client_cancel_order","hashId":"00aTIGyGNbec9vfKsJkHMA=="}
+{"index":{"_id":"2hnSYfBfhz/0R9wDYJsqUg=="}}
+{"serviceName":"recommendation","kind":"SPAN_KIND_CLIENT","destination":{"resource":"read_inventory","domain":"inventory"},"target":null,"traceGroupName":"load_main_screen","hashId":"2hnSYfBfhz/0R9wDYJsqUg=="}
diff --git a/.cypress/utils/otel-v1-apm-span-000001-mappings.json b/.cypress/utils/otel-v1-apm-span-000001-mappings.json
new file mode 100644
index 0000000000..1288c0f638
--- /dev/null
+++ b/.cypress/utils/otel-v1-apm-span-000001-mappings.json
@@ -0,0 +1,74 @@
+{
+  "properties": {
+    "traceId": {
+      "ignore_above": 256,
+      "type": "keyword"
+    },
+    "spanId": {
+      "ignore_above": 256,
+      "type": "keyword"
+    },
+    "parentSpanId": {
+      "ignore_above": 256,
+      "type": "keyword"
+    },
+    "name": {
+      "ignore_above": 1024,
+      "type": "keyword"
+    },
+    "traceGroup": {
+      "ignore_above": 1024,
+      "type": "keyword"
+    },
+    "traceGroupFields": {
+      "properties": {
+        "endTime": {
+          "type": "date_nanos"
+        },
+        "durationInNanos": {
+          "type": "long"
+        },
+        "statusCode": {
+          "type": "integer"
+        }
+      }
+    },
+    "kind": {
+      "ignore_above": 128,
+      "type": "keyword"
+    },
+    "startTime": {
+      "type": "date_nanos"
+    },
+    "endTime": {
+      "type": "date_nanos"
+    },
+    "status": {
+      "properties": {
+        "code": {
+          "type": "integer"
+        },
+        "message": {
+          "type": "keyword"
+        }
+      }
+    },
+    "serviceName": {
+      "type": "keyword"
+    },
+    "durationInNanos": {
+      "type": "long"
+    },
+    "events": {
+      "type": "nested",
+      "properties": {
+        "time": {
+          "type": "date_nanos"
+        }
+      }
+    },
+    "links": {
+      "type": "nested"
+    }
+  }
+}
diff --git a/.cypress/utils/otel-v1-apm-span-000001.json b/.cypress/utils/otel-v1-apm-span-000001.json
new file mode 100644
index 0000000000..1c6fcbbf71
--- /dev/null
+++ b/.cypress/utils/otel-v1-apm-span-000001.json
@@ -0,0 +1,1000 @@
+{"index":{"_id":"e275ac9d21929e9b"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"e275ac9d21929e9b","traceState":"","parentSpanId":"","name":"client_checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:30.088478464Z","endTime":"2021-03-25T17:23:30.481628416Z","durationInNanos":393149952,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"77f5fa8273184c40"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"77f5fa8273184c40","traceState":"","parentSpanId":"927d2469efed5531","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:30.224065280Z","endTime":"2021-03-25T17:23:30.302305280Z","durationInNanos":78240000,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"fe059cf714e8e915"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"fe059cf714e8e915","traceState":"","parentSpanId":"0bc22062693f08eb","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:30.315486720Z","endTime":"2021-03-25T17:23:30.360892672Z","durationInNanos":45405952,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55868,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"1d4ac48e0dd1df50"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"1d4ac48e0dd1df50","traceState":"","parentSpanId":"fe059cf714e8e915","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:30.316961280Z","endTime":"2021-03-25T17:23:30.353545728Z","durationInNanos":36584448,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"2a0f9f783ac62bc4"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"2a0f9f783ac62bc4","traceState":"","parentSpanId":"77f5fa8273184c40","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:30.227811584Z","endTime":"2021-03-25T17:23:30.283355136Z","durationInNanos":55543552,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55864,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"0de86f454dd43352"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"0de86f454dd43352","traceState":"","parentSpanId":"e275ac9d21929e9b","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:30.088787968Z","endTime":"2021-03-25T17:23:30.458000640Z","durationInNanos":369212672,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.http@url":"http://localhost:8084/checkout","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"59680d06f2fe59a9"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"59680d06f2fe59a9","traceState":"","parentSpanId":"dceae5ba953b44f8","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:30.158086144Z","endTime":"2021-03-25T17:23:30.194613760Z","durationInNanos":36527616,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"3f579ac135ffee68"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"3f579ac135ffee68","traceState":"","parentSpanId":"0d67b27c714b026b","name":"checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:30.092352256Z","endTime":"2021-03-25T17:23:30.441958144Z","durationInNanos":349605888,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"f6a14e0c8213862d"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"f6a14e0c8213862d","traceState":"","parentSpanId":"01c87a25f18fb004","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:30.096681472Z","endTime":"2021-03-25T17:23:30.110944768Z","durationInNanos":14263296,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"684e00b74392b8c6"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"684e00b74392b8c6","traceState":"","parentSpanId":"f6a14e0c8213862d","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:30.101003010Z","endTime":"2021-03-25T17:23:30.105259791Z","durationInNanos":4256781,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-4","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56574,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"c0b1d9dbb89786a2"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"c0b1d9dbb89786a2","traceState":"","parentSpanId":"38f1a1108569130d","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:30.254752Z","endTime":"2021-03-25T17:23:30.255640064Z","durationInNanos":888064,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': 3}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"a178d4084436e2ba"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"a178d4084436e2ba","traceState":"","parentSpanId":"3f579ac135ffee68","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:30.092835072Z","endTime":"2021-03-25T17:23:30.415470336Z","durationInNanos":322635264,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.http@url":"http://localhost:8082/update_inventory","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"f224b7718d28dcb6"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"f224b7718d28dcb6","traceState":"","parentSpanId":"3f579ac135ffee68","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:30.422688512Z","endTime":"2021-03-25T17:23:30.433830656Z","durationInNanos":11142144,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"780ac0205eee0281"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"780ac0205eee0281","traceState":"","parentSpanId":"a28b32a24ed2b94a","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:30.384634213Z","endTime":"2021-03-25T17:23:30.386278811Z","durationInNanos":1644598,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.thread@name":"http-nio-8087-exec-6","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"ec11e2136b66d7a9"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"ec11e2136b66d7a9","traceState":"","parentSpanId":"a178d4084436e2ba","name":"update_inventory","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:30.149690368Z","endTime":"2021-03-25T17:23:30.403485184Z","durationInNanos":253794816,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8082,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":45724,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_inventory","span.attributes.http@host":"localhost:8082","span.attributes.http@target":"/update_inventory","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"dceae5ba953b44f8"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"dceae5ba953b44f8","traceState":"","parentSpanId":"5b7ebc3b9a56dd8e","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:30.156352768Z","endTime":"2021-03-25T17:23:30.202127616Z","durationInNanos":45774848,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55860,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"0d67b27c714b026b"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"0d67b27c714b026b","traceState":"","parentSpanId":"0de86f454dd43352","name":"payment","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:30.091403776Z","endTime":"2021-03-25T17:23:30.446498816Z","durationInNanos":355095040,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8084,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":50460,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/checkout","span.attributes.http@host":"localhost:8084","span.attributes.http@target":"/checkout","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"5b7ebc3b9a56dd8e"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"5b7ebc3b9a56dd8e","traceState":"","parentSpanId":"927d2469efed5531","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:30.151849984Z","endTime":"2021-03-25T17:23:30.215842816Z","durationInNanos":63992832,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"38f1a1108569130d"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"38f1a1108569130d","traceState":"","parentSpanId":"2a0f9f783ac62bc4","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:30.228819968Z","endTime":"2021-03-25T17:23:30.274412544Z","durationInNanos":45592576,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"01c87a25f18fb004"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"01c87a25f18fb004","traceState":"","parentSpanId":"a178d4084436e2ba","name":"update_inventory","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:30.095432704Z","endTime":"2021-03-25T17:23:30.125712640Z","durationInNanos":30279936,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8082,"span.attributes.http@status_text":"SERVICE UNAVAILABLE","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":45720,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_inventory","span.attributes.http@host":"localhost:8082","span.attributes.http@target":"/update_inventory","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":503}
+{"index":{"_id":"a28b32a24ed2b94a"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"a28b32a24ed2b94a","traceState":"","parentSpanId":"e2901228ca3b80b6","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:30.384003598Z","endTime":"2021-03-25T17:23:30.386471230Z","durationInNanos":2467632,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-6","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56590,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"9043250a4d19bab2"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"9043250a4d19bab2","traceState":"","parentSpanId":"1d4ac48e0dd1df50","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:30.341936128Z","endTime":"2021-03-25T17:23:30.342908928Z","durationInNanos":972800,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': 1}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"e2901228ca3b80b6"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"e2901228ca3b80b6","traceState":"","parentSpanId":"927d2469efed5531","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:30.381153024Z","endTime":"2021-03-25T17:23:30.388188416Z","durationInNanos":7035392,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"e5e29b75177318a4"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"e5e29b75177318a4","traceState":"","parentSpanId":"59680d06f2fe59a9","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:30.181832960Z","endTime":"2021-03-25T17:23:30.182824192Z","durationInNanos":991232,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': 2}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"0bc22062693f08eb"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"0bc22062693f08eb","traceState":"","parentSpanId":"927d2469efed5531","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:30.312822784Z","endTime":"2021-03-25T17:23:30.372530176Z","durationInNanos":59707392,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"6f543d74cf9ab42f"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"6f543d74cf9ab42f","traceState":"","parentSpanId":"ee476840b78b6b64","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:30.430701513Z","endTime":"2021-03-25T17:23:30.431879792Z","durationInNanos":1178279,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.thread@name":"http-nio-8087-exec-8","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"ee476840b78b6b64"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"ee476840b78b6b64","traceState":"","parentSpanId":"f224b7718d28dcb6","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:30.430003216Z","endTime":"2021-03-25T17:23:30.432007390Z","durationInNanos":2004174,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-8","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56592,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"3d6c88ccfe463625"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"3d6c88ccfe463625","traceState":"","parentSpanId":"684e00b74392b8c6","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:30.101806858Z","endTime":"2021-03-25T17:23:30.105081805Z","durationInNanos":3274947,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"span.attributes.thread@name":"http-nio-8087-exec-4","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"927d2469efed5531"}}
+{"traceId":"4fa04f117be100f476b175e41096e736","spanId":"927d2469efed5531","traceState":"","parentSpanId":"ec11e2136b66d7a9","name":"update_inventory","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:30.151124480Z","endTime":"2021-03-25T17:23:30.394688768Z","durationInNanos":243564288,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:30.481628416Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":393149952,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"1d2c0f411e8ee2f8"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"1d2c0f411e8ee2f8","traceState":"","parentSpanId":"","name":"client_create_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:31.152335104Z","endTime":"2021-03-25T17:23:31.468260096Z","durationInNanos":315924992,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"a91d84e8178f1fd8"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"a91d84e8178f1fd8","traceState":"","parentSpanId":"eeaa622f88fe207c","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:31.303123712Z","endTime":"2021-03-25T17:23:31.304368896Z","durationInNanos":1245184,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': '3'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"4d1c65495ff29c6d"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"4d1c65495ff29c6d","traceState":"","parentSpanId":"7238b78b0ed71521","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:31.353071360Z","endTime":"2021-03-25T17:23:31.409542656Z","durationInNanos":56471296,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55886,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"d9ee030e0d08690e"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"d9ee030e0d08690e","traceState":"","parentSpanId":"28262a4233f0588c","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:31.431002978Z","endTime":"2021-03-25T17:23:31.434517936Z","durationInNanos":3514958,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-10","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56608,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"b3752b14ed618509"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"b3752b14ed618509","traceState":"","parentSpanId":"2bd2af19d4a54899","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:31.254661632Z","endTime":"2021-03-25T17:23:31.343596800Z","durationInNanos":88935168,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"b445c2d1b93f0221"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"b445c2d1b93f0221","traceState":"","parentSpanId":"72c5af1d1df82890","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:31.377131776Z","endTime":"2021-03-25T17:23:31.378107648Z","durationInNanos":975872,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': '2'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"7238b78b0ed71521"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"7238b78b0ed71521","traceState":"","parentSpanId":"2bd2af19d4a54899","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:31.350046208Z","endTime":"2021-03-25T17:23:31.422569728Z","durationInNanos":72523520,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"e6b4ab74f8b80f4e"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"e6b4ab74f8b80f4e","traceState":"","parentSpanId":"e241b0e785a3c575","name":"update_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:31.155295232Z","endTime":"2021-03-25T17:23:31.449997056Z","durationInNanos":294701824,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56862,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/update_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"dcb75802cdd2df95"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"dcb75802cdd2df95","traceState":"","parentSpanId":"5a4c439943652ab5","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:31.203629568Z","endTime":"2021-03-25T17:23:31.209441792Z","durationInNanos":5812224,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': '1'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"2bd2af19d4a54899"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"2bd2af19d4a54899","traceState":"","parentSpanId":"e6b4ab74f8b80f4e","name":"update_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:31.156228352Z","endTime":"2021-03-25T17:23:31.444213504Z","durationInNanos":287985152,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"5a4c439943652ab5"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"5a4c439943652ab5","traceState":"","parentSpanId":"78043dd3210ad09c","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:31.160545792Z","endTime":"2021-03-25T17:23:31.219949056Z","durationInNanos":59403264,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"eeaa622f88fe207c"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"eeaa622f88fe207c","traceState":"","parentSpanId":"474586f3bebe59ed","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:31.266703616Z","endTime":"2021-03-25T17:23:31.316477184Z","durationInNanos":49773568,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"72c5af1d1df82890"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"72c5af1d1df82890","traceState":"","parentSpanId":"4d1c65495ff29c6d","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:31.353989888Z","endTime":"2021-03-25T17:23:31.399032832Z","durationInNanos":45042944,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"474586f3bebe59ed"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"474586f3bebe59ed","traceState":"","parentSpanId":"b3752b14ed618509","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:31.265601280Z","endTime":"2021-03-25T17:23:31.324172544Z","durationInNanos":58571264,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55882,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"1e468dfafa2cbf01"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"1e468dfafa2cbf01","traceState":"","parentSpanId":"2bd2af19d4a54899","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:31.156710912Z","endTime":"2021-03-25T17:23:31.242307072Z","durationInNanos":85596160,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"51c30794d41a0e90"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"51c30794d41a0e90","traceState":"","parentSpanId":"5a4c439943652ab5","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:31.193952256Z","endTime":"2021-03-25T17:23:31.195421440Z","durationInNanos":1469184,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': '1'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"28262a4233f0588c"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"28262a4233f0588c","traceState":"","parentSpanId":"2bd2af19d4a54899","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:31.428226560Z","endTime":"2021-03-25T17:23:31.436708352Z","durationInNanos":8481792,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"78043dd3210ad09c"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"78043dd3210ad09c","traceState":"","parentSpanId":"1e468dfafa2cbf01","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:31.159513088Z","endTime":"2021-03-25T17:23:31.228904448Z","durationInNanos":69391360,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55878,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"f7e912b3aad7acba"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"f7e912b3aad7acba","traceState":"","parentSpanId":"d9ee030e0d08690e","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:31.431638466Z","endTime":"2021-03-25T17:23:31.434321227Z","durationInNanos":2682761,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.thread@name":"http-nio-8087-exec-10","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"965cedf647f21b1a"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"965cedf647f21b1a","traceState":"","parentSpanId":"eeaa622f88fe207c","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:31.294086656Z","endTime":"2021-03-25T17:23:31.295151104Z","durationInNanos":1064448,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': '3'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"917c94fc2ae3b411"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"917c94fc2ae3b411","traceState":"","parentSpanId":"72c5af1d1df82890","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:31.384803328Z","endTime":"2021-03-25T17:23:31.385842432Z","durationInNanos":1039104,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': '2'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"e241b0e785a3c575"}}
+{"traceId":"44e8643dd4b770a492e0556c3c3105e2","spanId":"e241b0e785a3c575","traceState":"","parentSpanId":"1d2c0f411e8ee2f8","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:31.152645120Z","endTime":"2021-03-25T17:23:31.462845440Z","durationInNanos":310200320,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:31.468260096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":315924992,"span.attributes.http@url":"http://localhost:8088/update_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"dbc247c510f8fa6c"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"dbc247c510f8fa6c","traceState":"","parentSpanId":"","name":"client_checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:47.606902016Z","endTime":"2021-03-25T17:21:47.984790016Z","durationInNanos":377888000,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"d5aaa3543c196a7a"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"d5aaa3543c196a7a","traceState":"","parentSpanId":"6860e98ae999b587","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:47.643833856Z","endTime":"2021-03-25T17:21:47.645221376Z","durationInNanos":1387520,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': 2}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"2e6de774f1e5e5c7"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"2e6de774f1e5e5c7","traceState":"","parentSpanId":"b2c8e3bea8c0c6da","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:47.611379968Z","endTime":"2021-03-25T17:21:47.911320576Z","durationInNanos":299940608,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.http@url":"http://localhost:8082/update_inventory","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"b2c8e3bea8c0c6da"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"b2c8e3bea8c0c6da","traceState":"","parentSpanId":"ac6ee7fdcf4b98a3","name":"checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:47.610896128Z","endTime":"2021-03-25T17:21:47.951144448Z","durationInNanos":340248320,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"e0a50216313cc1e6"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"e0a50216313cc1e6","traceState":"","parentSpanId":"6c91acd65cba9a6d","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:47.766609408Z","endTime":"2021-03-25T17:21:47.827251968Z","durationInNanos":60642560,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"34f833b94123fbe2"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"34f833b94123fbe2","traceState":"","parentSpanId":"bf3e3de22bfb1397","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:47.796408320Z","endTime":"2021-03-25T17:21:47.797313536Z","durationInNanos":905216,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': 1}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"0acc5f8c05209119"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"0acc5f8c05209119","traceState":"","parentSpanId":"e0a50216313cc1e6","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:47.771975936Z","endTime":"2021-03-25T17:21:47.816274688Z","durationInNanos":44298752,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55782,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"42e7d4b396e9803b"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"42e7d4b396e9803b","traceState":"","parentSpanId":"d00e0bf784079e5f","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:47.927003691Z","endTime":"2021-03-25T17:21:47.935461246Z","durationInNanos":8457555,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-2","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56506,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"bf3e3de22bfb1397"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"bf3e3de22bfb1397","traceState":"","parentSpanId":"0acc5f8c05209119","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:47.773264640Z","endTime":"2021-03-25T17:21:47.808190976Z","durationInNanos":34926336,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"6860e98ae999b587"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"6860e98ae999b587","traceState":"","parentSpanId":"b7fa039966521399","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:47.619275264Z","endTime":"2021-03-25T17:21:47.664597760Z","durationInNanos":45322496,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"a5d5a43a5ca42d60"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"a5d5a43a5ca42d60","traceState":"","parentSpanId":"091b784a264d8a54","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:47.707945472Z","endTime":"2021-03-25T17:21:47.742619136Z","durationInNanos":34673664,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"48ae0737dcc3a439"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"48ae0737dcc3a439","traceState":"","parentSpanId":"2e6de774f1e5e5c7","name":"update_inventory","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:47.613990912Z","endTime":"2021-03-25T17:21:47.897009920Z","durationInNanos":283019008,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8082,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":45638,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_inventory","span.attributes.http@host":"localhost:8082","span.attributes.http@target":"/update_inventory","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"e8c880db1b019137"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"e8c880db1b019137","traceState":"","parentSpanId":"4db977971d810987","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:47.854917010Z","endTime":"2021-03-25T17:21:47.866128201Z","durationInNanos":11211191,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.thread@name":"http-nio-8087-exec-10","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"ac6ee7fdcf4b98a3"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"ac6ee7fdcf4b98a3","traceState":"","parentSpanId":"21f66a4f7501d0ed","name":"payment","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:47.609924608Z","endTime":"2021-03-25T17:21:47.959924224Z","durationInNanos":349999616,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8084,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":50378,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/checkout","span.attributes.http@host":"localhost:8084","span.attributes.http@target":"/checkout","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"21f66a4f7501d0ed"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"21f66a4f7501d0ed","traceState":"","parentSpanId":"dbc247c510f8fa6c","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:47.607205632Z","endTime":"2021-03-25T17:21:47.976232192Z","durationInNanos":369026560,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.http@url":"http://localhost:8084/checkout","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"091b784a264d8a54"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"091b784a264d8a54","traceState":"","parentSpanId":"afabcf304a619d61","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:47.707056384Z","endTime":"2021-03-25T17:21:47.748450816Z","durationInNanos":41394432,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55778,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"b7fa039966521399"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"b7fa039966521399","traceState":"","parentSpanId":"c4a09da623eb1ecb","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:47.618215680Z","endTime":"2021-03-25T17:21:47.675187200Z","durationInNanos":56971520,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55774,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"c4a09da623eb1ecb"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"c4a09da623eb1ecb","traceState":"","parentSpanId":"6c91acd65cba9a6d","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:47.615485952Z","endTime":"2021-03-25T17:21:47.693196288Z","durationInNanos":77710336,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"51b550897e8d5b54"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"51b550897e8d5b54","traceState":"","parentSpanId":"6c91acd65cba9a6d","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:47.838560512Z","endTime":"2021-03-25T17:21:47.858291712Z","durationInNanos":19731200,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"6c91acd65cba9a6d"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"6c91acd65cba9a6d","traceState":"","parentSpanId":"48ae0737dcc3a439","name":"update_inventory","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:47.614964224Z","endTime":"2021-03-25T17:21:47.890344192Z","durationInNanos":275379968,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"4db977971d810987"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"4db977971d810987","traceState":"","parentSpanId":"51b550897e8d5b54","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:47.854003483Z","endTime":"2021-03-25T17:21:47.866331785Z","durationInNanos":12328302,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-10","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56504,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"3e9ba08b87cc6da9"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"3e9ba08b87cc6da9","traceState":"","parentSpanId":"42e7d4b396e9803b","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:47.927846737Z","endTime":"2021-03-25T17:21:47.935255710Z","durationInNanos":7408973,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.thread@name":"http-nio-8087-exec-2","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"d00e0bf784079e5f"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"d00e0bf784079e5f","traceState":"","parentSpanId":"b2c8e3bea8c0c6da","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:47.919819264Z","endTime":"2021-03-25T17:21:47.937713920Z","durationInNanos":17894656,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"c077e0796515ec33"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"c077e0796515ec33","traceState":"","parentSpanId":"a5d5a43a5ca42d60","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:47.730230528Z","endTime":"2021-03-25T17:21:47.731288832Z","durationInNanos":1058304,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': 3}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"afabcf304a619d61"}}
+{"traceId":"1fc75f4679fb60382b8394405f1d3206","spanId":"afabcf304a619d61","traceState":"","parentSpanId":"6c91acd65cba9a6d","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:47.700137728Z","endTime":"2021-03-25T17:21:47.758095104Z","durationInNanos":57957376,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:47.984790016Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":377888000,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"54035ed549d99079"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"54035ed549d99079","traceState":"","parentSpanId":"","name":"client_cancel_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:48.574600192Z","endTime":"2021-03-25T17:21:48.745840640Z","durationInNanos":171240448,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"7325aeb5cd30c014"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"7325aeb5cd30c014","traceState":"","parentSpanId":"5a71901ca81287ec","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:48.676800988Z","endTime":"2021-03-25T17:21:48.679158178Z","durationInNanos":2357190,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"span.attributes.thread@name":"http-nio-8087-exec-4","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"28463ae48643c8b7"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"28463ae48643c8b7","traceState":"","parentSpanId":"e25c7f0bee0fdc57","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:48.604971776Z","endTime":"2021-03-25T17:21:48.607241728Z","durationInNanos":2269952,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT ItemId, TotalQty FROM User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"b3f658afbe6f7ccf"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"b3f658afbe6f7ccf","traceState":"","parentSpanId":"fbfe826f4c2c3bd2","name":"clear_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:48.577446144Z","endTime":"2021-03-25T17:21:48.695392512Z","durationInNanos":117946368,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56776,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/clear_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/clear_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"e25c7f0bee0fdc57"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"e25c7f0bee0fdc57","traceState":"","parentSpanId":"9274f8881cde156e","name":"cart_empty","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:48.582540032Z","endTime":"2021-03-25T17:21:48.642361600Z","durationInNanos":59821568,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"5a71901ca81287ec"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"5a71901ca81287ec","traceState":"","parentSpanId":"271acd6e6d28e189","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:48.676003585Z","endTime":"2021-03-25T17:21:48.679356137Z","durationInNanos":3352552,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-4","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56514,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"6cb05117cdb01f88"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"6cb05117cdb01f88","traceState":"","parentSpanId":"48ccdcea24b8a347","name":"HTTP PUT","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:48.578734592Z","endTime":"2021-03-25T17:21:48.664337408Z","durationInNanos":85602816,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"span.attributes.http@url":"http://localhost:8083/cart_empty","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"PUT","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"271acd6e6d28e189"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"271acd6e6d28e189","traceState":"","parentSpanId":"48ccdcea24b8a347","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:48.672167936Z","endTime":"2021-03-25T17:21:48.681381632Z","durationInNanos":9213696,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"9274f8881cde156e"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"9274f8881cde156e","traceState":"","parentSpanId":"6cb05117cdb01f88","name":"cartEmpty","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:48.581450752Z","endTime":"2021-03-25T17:21:48.651885056Z","durationInNanos":70434304,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"PUT","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55792,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/cart_empty","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/cart_empty","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"fbfe826f4c2c3bd2"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"fbfe826f4c2c3bd2","traceState":"","parentSpanId":"54035ed549d99079","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:48.574898432Z","endTime":"2021-03-25T17:21:48.737892096Z","durationInNanos":162993664,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"span.attributes.http@url":"http://localhost:8088/clear_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"7ec1853748fda8ff"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"7ec1853748fda8ff","traceState":"","parentSpanId":"e25c7f0bee0fdc57","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:48.614138368Z","endTime":"2021-03-25T17:21:48.636585728Z","durationInNanos":22447360,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"TRUNCATE TABLE User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"48ccdcea24b8a347"}}
+{"traceId":"76064f11707d1e0718b0b02a77bff58d","spanId":"48ccdcea24b8a347","traceState":"","parentSpanId":"b3f658afbe6f7ccf","name":"clear_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:48.578475264Z","endTime":"2021-03-25T17:21:48.688380928Z","durationInNanos":109905664,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:48.745840640Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":171240448,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"c31fccfac7074ab0"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"c31fccfac7074ab0","traceState":"","parentSpanId":"","name":"client_create_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:49.258101504Z","endTime":"2021-03-25T17:21:49.531125504Z","durationInNanos":273024000,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"4ecdda1d6bd123a5"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"4ecdda1d6bd123a5","traceState":"","parentSpanId":"2d8bb1f183215851","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.440151040Z","endTime":"2021-03-25T17:21:49.441044224Z","durationInNanos":893184,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': '2'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"93cf47c8e681c60f"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"93cf47c8e681c60f","traceState":"","parentSpanId":"e2811a70a83b29da","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.487172608Z","endTime":"2021-03-25T17:21:49.497463552Z","durationInNanos":10290944,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"a0e52e16bb92338c"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"a0e52e16bb92338c","traceState":"","parentSpanId":"c31fccfac7074ab0","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.258438144Z","endTime":"2021-03-25T17:21:49.524093952Z","durationInNanos":265655808,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.http@url":"http://localhost:8088/update_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"f0b38747a78a5590"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"f0b38747a78a5590","traceState":"","parentSpanId":"a0e52e16bb92338c","name":"update_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:49.261078528Z","endTime":"2021-03-25T17:21:49.510315008Z","durationInNanos":249236480,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56784,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/update_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"309f43ae9cab572b"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"309f43ae9cab572b","traceState":"","parentSpanId":"e2811a70a83b29da","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.412836352Z","endTime":"2021-03-25T17:21:49.476348928Z","durationInNanos":63512576,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"e2811a70a83b29da"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"e2811a70a83b29da","traceState":"","parentSpanId":"f0b38747a78a5590","name":"update_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:49.262012416Z","endTime":"2021-03-25T17:21:49.504557312Z","durationInNanos":242544896,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"0e369cfafd635987"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"0e369cfafd635987","traceState":"","parentSpanId":"d6e195ff0adc561a","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:49.266362880Z","endTime":"2021-03-25T17:21:49.313359104Z","durationInNanos":46996224,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"52ce5eedf9f848fd"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"52ce5eedf9f848fd","traceState":"","parentSpanId":"0e369cfafd635987","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.298149376Z","endTime":"2021-03-25T17:21:49.300026112Z","durationInNanos":1876736,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': '1'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"d6e195ff0adc561a"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"d6e195ff0adc561a","traceState":"","parentSpanId":"a70984b8c786c65b","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:49.265307648Z","endTime":"2021-03-25T17:21:49.321311488Z","durationInNanos":56003840,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55800,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"a70984b8c786c65b"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"a70984b8c786c65b","traceState":"","parentSpanId":"e2811a70a83b29da","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.262542080Z","endTime":"2021-03-25T17:21:49.332455424Z","durationInNanos":69913344,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"675650382e9c1c68"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"675650382e9c1c68","traceState":"","parentSpanId":"005c234e8b2d4a9e","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:49.343079424Z","endTime":"2021-03-25T17:21:49.387046656Z","durationInNanos":43967232,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"2d8bb1f183215851"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"2d8bb1f183215851","traceState":"","parentSpanId":"f03815533b30bc89","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:49.417788160Z","endTime":"2021-03-25T17:21:49.459834880Z","durationInNanos":42046720,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"1b4b9bcc546ab0c0"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"1b4b9bcc546ab0c0","traceState":"","parentSpanId":"93cf47c8e681c60f","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:49.492002870Z","endTime":"2021-03-25T17:21:49.500860714Z","durationInNanos":8857844,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-6","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56530,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"f03815533b30bc89"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"f03815533b30bc89","traceState":"","parentSpanId":"309f43ae9cab572b","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:49.416881152Z","endTime":"2021-03-25T17:21:49.466066688Z","durationInNanos":49185536,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55808,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"d8f75a62dc93bb44"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"d8f75a62dc93bb44","traceState":"","parentSpanId":"0e369cfafd635987","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.288495616Z","endTime":"2021-03-25T17:21:49.289379840Z","durationInNanos":884224,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': '1'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"3886c807af86de35"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"3886c807af86de35","traceState":"","parentSpanId":"675650382e9c1c68","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.374640128Z","endTime":"2021-03-25T17:21:49.375667968Z","durationInNanos":1027840,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': '3'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"1f635f8d3eaabed5"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"1f635f8d3eaabed5","traceState":"","parentSpanId":"1b4b9bcc546ab0c0","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:49.493967540Z","endTime":"2021-03-25T17:21:49.500642788Z","durationInNanos":6675248,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.thread@name":"http-nio-8087-exec-6","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"005c234e8b2d4a9e"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"005c234e8b2d4a9e","traceState":"","parentSpanId":"fc28883b621642e2","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:49.342033664Z","endTime":"2021-03-25T17:21:49.396767744Z","durationInNanos":54734080,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55804,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"b845c9f96d0ff1f3"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"b845c9f96d0ff1f3","traceState":"","parentSpanId":"675650382e9c1c68","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.365459968Z","endTime":"2021-03-25T17:21:49.366375936Z","durationInNanos":915968,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': '3'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"fc28883b621642e2"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"fc28883b621642e2","traceState":"","parentSpanId":"e2811a70a83b29da","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.339384576Z","endTime":"2021-03-25T17:21:49.406950656Z","durationInNanos":67566080,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"5ce303d8b91011bc"}}
+{"traceId":"e5ca67df0bbdb779bd1846f138439bce","spanId":"5ce303d8b91011bc","traceState":"","parentSpanId":"2d8bb1f183215851","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.447627776Z","endTime":"2021-03-25T17:21:49.449848064Z","durationInNanos":2220288,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:49.531125504Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":273024000,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': '2'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"8a854623f90fb54f"}}
+{"traceId":"5ee77a65f251ed8600371446157e70dc","spanId":"8a854623f90fb54f","traceState":"","parentSpanId":"","name":"client_delivery_status","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:49.845881856Z","endTime":"2021-03-25T17:21:49.984027648Z","durationInNanos":138145792,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:49.984027648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":138145792,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"d57cf256040644f3"}}
+{"traceId":"5ee77a65f251ed8600371446157e70dc","spanId":"d57cf256040644f3","traceState":"","parentSpanId":"8a854623f90fb54f","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.846182912Z","endTime":"2021-03-25T17:21:49.952503296Z","durationInNanos":106320384,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:49.984027648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":138145792,"span.attributes.http@url":"http://localhost:8088/get_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"7a2a0ca635baf4db"}}
+{"traceId":"5ee77a65f251ed8600371446157e70dc","spanId":"7a2a0ca635baf4db","traceState":"","parentSpanId":"500db987681d8ede","name":"get_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:49.849632768Z","endTime":"2021-03-25T17:21:49.926034688Z","durationInNanos":76401920,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:49.984027648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":138145792,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"5653e07ba17cbd8b"}}
+{"traceId":"5ee77a65f251ed8600371446157e70dc","spanId":"5653e07ba17cbd8b","traceState":"","parentSpanId":"7a2a0ca635baf4db","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.912790272Z","endTime":"2021-03-25T17:21:49.920825088Z","durationInNanos":8034816,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:49.984027648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":138145792,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"5bf67d699fe6d247"}}
+{"traceId":"5ee77a65f251ed8600371446157e70dc","spanId":"5bf67d699fe6d247","traceState":"","parentSpanId":"1d505c87dea42700","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:49.915879531Z","endTime":"2021-03-25T17:21:49.918056080Z","durationInNanos":2176549,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:49.984027648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":138145792,"span.attributes.thread@name":"http-nio-8087-exec-8","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"1d505c87dea42700"}}
+{"traceId":"5ee77a65f251ed8600371446157e70dc","spanId":"1d505c87dea42700","traceState":"","parentSpanId":"5653e07ba17cbd8b","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:49.915003530Z","endTime":"2021-03-25T17:21:49.918236011Z","durationInNanos":3232481,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:49.984027648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":138145792,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-8","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56538,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"caee48dba4382c02"}}
+{"traceId":"5ee77a65f251ed8600371446157e70dc","spanId":"caee48dba4382c02","traceState":"","parentSpanId":"52fa1c07d9e504c9","name":"getCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:49.852563456Z","endTime":"2021-03-25T17:21:49.889665792Z","durationInNanos":37102336,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:49.984027648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":138145792,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55816,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/get_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"6ddf636a43d5d36d"}}
+{"traceId":"5ee77a65f251ed8600371446157e70dc","spanId":"6ddf636a43d5d36d","traceState":"","parentSpanId":"235766a9328bb23e","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.875479296Z","endTime":"2021-03-25T17:21:49.876210944Z","durationInNanos":731648,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:49.984027648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":138145792,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT * FROM User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"52fa1c07d9e504c9"}}
+{"traceId":"5ee77a65f251ed8600371446157e70dc","spanId":"52fa1c07d9e504c9","traceState":"","parentSpanId":"7a2a0ca635baf4db","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:49.849892608Z","endTime":"2021-03-25T17:21:49.903207168Z","durationInNanos":53314560,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:49.984027648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":138145792,"span.attributes.http@url":"http://localhost:8083/get_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"500db987681d8ede"}}
+{"traceId":"5ee77a65f251ed8600371446157e70dc","spanId":"500db987681d8ede","traceState":"","parentSpanId":"d57cf256040644f3","name":"get_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:49.848685312Z","endTime":"2021-03-25T17:21:49.932677376Z","durationInNanos":83992064,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:49.984027648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":138145792,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56800,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/get_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"235766a9328bb23e"}}
+{"traceId":"5ee77a65f251ed8600371446157e70dc","spanId":"235766a9328bb23e","traceState":"","parentSpanId":"caee48dba4382c02","name":"get_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:49.853675520Z","endTime":"2021-03-25T17:21:49.883213056Z","durationInNanos":29537536,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:49.984027648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":138145792,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"6b14ed5be4c88e99"}}
+{"traceId":"ba3c828db75aee377b6fbebb58d6b6d3","spanId":"6b14ed5be4c88e99","traceState":"","parentSpanId":"","name":"mysql","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:02.990599936Z","endTime":"2021-03-25T17:21:02.991838464Z","durationInNanos":1238528,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"mysql","traceGroupFields.endTime":"2021-03-25T17:21:02.991838464Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":1238528,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"","span.attributes.db@statement":"USE APM","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"55a698828fe06a42"}}
+{"traceId":"c1d985bd02e1dbb85b444011f19a1ecc","spanId":"55a698828fe06a42","traceState":"","parentSpanId":"","name":"mysql","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:03.000792576Z","endTime":"2021-03-25T17:21:03.023983360Z","durationInNanos":23190784,"serviceName":"database","events":[{"time":"2021-03-25T17:21:03.023934720Z","name":"exception","attributes":{"exception@message":"1050 (42S01): Table 'Inventory_Items' already exists","exception@type":"ProgrammingError","exception@stacktrace":"Traceback (most recent call last):\n  File \"/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py\", line 804, in use_span\n    yield span\n  File \"/usr/lib/python3.6/site-packages/opentelemetry/instrumentation/dbapi/__init__.py\", line 354, in traced_execution\n    raise ex\n  File \"/usr/lib/python3.6/site-packages/opentelemetry/instrumentation/dbapi/__init__.py\", line 345, in traced_execution\n    result = query_method(*args, **kwargs)\n  File \"/usr/lib/python3.6/site-packages/mysql/connector/cursor.py\", line 577, in execute\n    self._handle_result(self._connection.cmd_query(stmt))\n  File \"/usr/lib/python3.6/site-packages/mysql/connector/connection.py\", line 695, in cmd_query\n    result = self._handle_result(self._send_cmd(ServerCmd.QUERY, query))\n  File \"/usr/lib/python3.6/site-packages/mysql/connector/connection.py\", line 582, in _handle_result\n    raise errors.get_exception(packet)\nmysql.connector.errors.ProgrammingError: 1050 (42S01): Table 'Inventory_Items' already exists\n"},"droppedAttributesCount":0}],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"mysql","traceGroupFields.endTime":"2021-03-25T17:21:03.023983360Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":23190784,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","status.message":"1050 (42S01): Table 'Inventory_Items' already exists","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"","span.attributes.db@statement":"CREATE TABLE `Inventory_Items` (  `ItemId` varchar(16) NOT NULL,  `TotalQty` int(11) NOT NULL,  PRIMARY KEY (`ItemId`)) ENGINE=InnoDB","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"5bcca8ba513bb54a"}}
+{"traceId":"15d30e4d211d79e10fcaeab97015c90d","spanId":"5bcca8ba513bb54a","traceState":"","parentSpanId":"","name":"mysql","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:03.038618112Z","endTime":"2021-03-25T17:21:03.041571328Z","durationInNanos":2953216,"serviceName":"database","events":[{"time":"2021-03-25T17:21:03.041542912Z","name":"exception","attributes":{"exception@message":"1050 (42S01): Table 'User_Carts' already exists","exception@type":"ProgrammingError","exception@stacktrace":"Traceback (most recent call last):\n  File \"/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py\", line 804, in use_span\n    yield span\n  File \"/usr/lib/python3.6/site-packages/opentelemetry/instrumentation/dbapi/__init__.py\", line 354, in traced_execution\n    raise ex\n  File \"/usr/lib/python3.6/site-packages/opentelemetry/instrumentation/dbapi/__init__.py\", line 345, in traced_execution\n    result = query_method(*args, **kwargs)\n  File \"/usr/lib/python3.6/site-packages/mysql/connector/cursor.py\", line 577, in execute\n    self._handle_result(self._connection.cmd_query(stmt))\n  File \"/usr/lib/python3.6/site-packages/mysql/connector/connection.py\", line 695, in cmd_query\n    result = self._handle_result(self._send_cmd(ServerCmd.QUERY, query))\n  File \"/usr/lib/python3.6/site-packages/mysql/connector/connection.py\", line 582, in _handle_result\n    raise errors.get_exception(packet)\nmysql.connector.errors.ProgrammingError: 1050 (42S01): Table 'User_Carts' already exists\n"},"droppedAttributesCount":0}],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"mysql","traceGroupFields.endTime":"2021-03-25T17:21:03.041571328Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":2953216,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","status.message":"1050 (42S01): Table 'User_Carts' already exists","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"","span.attributes.db@statement":"CREATE TABLE `User_Carts` (  `ItemId` varchar(16) NOT NULL,  `TotalQty` int(11) NOT NULL,  PRIMARY KEY (`ItemId`)) ENGINE=InnoDB","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"8ee1d294e46f34bf"}}
+{"traceId":"b207e9bcd70e5b49daea3a40e0c60e4c","spanId":"8ee1d294e46f34bf","traceState":"","parentSpanId":"","name":"HTTP GET","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:03.304552704Z","endTime":"2021-03-25T17:21:03.307507968Z","durationInNanos":2955264,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"HTTP GET","traceGroupFields.endTime":"2021-03-25T17:21:03.307507968Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":2955264,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"NOT FOUND","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"curl/7.61.1","span.attributes.net@peer@port":55638,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":404}
+{"index":{"_id":"5ff3516909562c60"}}
+{"traceId":"d5409f0d4ed15dfe47afe24d4988d078","spanId":"5ff3516909562c60","traceState":"","parentSpanId":"","name":"HTTP GET","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:04.377200384Z","endTime":"2021-03-25T17:21:04.381007104Z","durationInNanos":3806720,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"HTTP GET","traceGroupFields.endTime":"2021-03-25T17:21:04.381007104Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":3806720,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"NOT FOUND","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"curl/7.61.1","span.attributes.net@peer@port":56628,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":404}
+{"index":{"_id":"72ee42547c5c5125"}}
+{"traceId":"3cacf76df174d71c19a5ff78248cd490","spanId":"72ee42547c5c5125","traceState":"","parentSpanId":"","name":"HTTP GET","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:05.416123648Z","endTime":"2021-03-25T17:21:05.419973376Z","durationInNanos":3849728,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"HTTP GET","traceGroupFields.endTime":"2021-03-25T17:21:05.419973376Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":3849728,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8082,"span.attributes.http@status_text":"NOT FOUND","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"curl/7.61.1","span.attributes.net@peer@port":45514,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@host":"localhost:8082","span.attributes.http@target":"/","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":404}
+{"index":{"_id":"1bcd486350ea581e"}}
+{"traceId":"29158720fe1cf7db0a8c45067945d94d","spanId":"1bcd486350ea581e","traceState":"","parentSpanId":"","name":"HTTP GET","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:06.498122240Z","endTime":"2021-03-25T17:21:06.514853888Z","durationInNanos":16731648,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"HTTP GET","traceGroupFields.endTime":"2021-03-25T17:21:06.514853888Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":16731648,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8084,"span.attributes.http@status_text":"NOT FOUND","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"curl/7.61.1","span.attributes.net@peer@port":50262,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@host":"localhost:8084","span.attributes.http@target":"/","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":404}
+{"index":{"_id":"e1ba7015b9194eba"}}
+{"traceId":"648058570b784b90c1c596d7a6d14c54","spanId":"e1ba7015b9194eba","traceState":"","parentSpanId":"","name":"/**","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:01.992579399Z","endTime":"2021-03-25T17:21:02.049460860Z","durationInNanos":56881461,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"/**","traceGroupFields.endTime":"2021-03-25T17:21:02.049460860Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":56881461,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/","span.attributes.thread@name":"http-nio-8087-exec-1","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":128,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":2,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"GET","span.attributes.http@user_agent":"curl/7.61.1","span.attributes.net@peer@port":56348,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":404,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"1eaf4782819b853d"}}
+{"traceId":"648058570b784b90c1c596d7a6d14c54","spanId":"1eaf4782819b853d","traceState":"","parentSpanId":"5494c2e7d070507f","name":"ResponseFacade.sendError","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:02.045710038Z","endTime":"2021-03-25T17:21:02.045931096Z","durationInNanos":221058,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"/**","traceGroupFields.endTime":"2021-03-25T17:21:02.049460860Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":56881461,"span.attributes.thread@name":"http-nio-8087-exec-1","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":128,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet"}
+{"index":{"_id":"0c71ce2f032ad48e"}}
+{"traceId":"648058570b784b90c1c596d7a6d14c54","spanId":"0c71ce2f032ad48e","traceState":"","parentSpanId":"e1ba7015b9194eba","name":"ApplicationDispatcher.forward","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:02.053502985Z","endTime":"2021-03-25T17:21:02.262349094Z","durationInNanos":208846109,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"/**","traceGroupFields.endTime":"2021-03-25T17:21:02.049460860Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":56881461,"span.attributes.thread@name":"http-nio-8087-exec-1","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":128,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet"}
+{"index":{"_id":"5494c2e7d070507f"}}
+{"traceId":"648058570b784b90c1c596d7a6d14c54","spanId":"5494c2e7d070507f","traceState":"","parentSpanId":"e1ba7015b9194eba","name":"ResourceHttpRequestHandler.handleRequest","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:02.043354145Z","endTime":"2021-03-25T17:21:02.048099869Z","durationInNanos":4745724,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"/**","traceGroupFields.endTime":"2021-03-25T17:21:02.049460860Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":56881461,"span.attributes.thread@name":"http-nio-8087-exec-1","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":128,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"3ce2f80841493cbb"}}
+{"traceId":"450905d31307509532d9e2db7460fcb6","spanId":"3ce2f80841493cbb","traceState":"","parentSpanId":"","name":"HTTP GET","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:07.595561728Z","endTime":"2021-03-25T17:21:07.599333376Z","durationInNanos":3771648,"serviceName":"recommendation","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"HTTP GET","traceGroupFields.endTime":"2021-03-25T17:21:07.599333376Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":3771648,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8086,"span.attributes.http@status_text":"NOT FOUND","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140465266593744","resource.attributes.service@name":"recommendation","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"curl/7.61.1","span.attributes.net@peer@port":51118,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@host":"localhost:8086","span.attributes.http@target":"/","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":404}
+{"index":{"_id":"718dc32a693c8a17"}}
+{"traceId":"c81499c3007a8532a987c27047bb9cdd","spanId":"718dc32a693c8a17","traceState":"","parentSpanId":"","name":"HTTP GET","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:08.627664384Z","endTime":"2021-03-25T17:21:08.631421696Z","durationInNanos":3757312,"serviceName":"authentication","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"HTTP GET","traceGroupFields.endTime":"2021-03-25T17:21:08.631421696Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":3757312,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8085,"span.attributes.http@status_text":"NOT FOUND","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140122129537568","resource.attributes.service@name":"authentication","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"curl/7.61.1","span.attributes.net@peer@port":44150,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@host":"localhost:8085","span.attributes.http@target":"/","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":404}
+{"index":{"_id":"28f096bc84619ef2"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"28f096bc84619ef2","traceState":"","parentSpanId":"","name":"load_main_screen","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:14.559582720Z","endTime":"2021-03-25T17:21:15.017436928Z","durationInNanos":457854208,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"69a2949c11c65a77"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"69a2949c11c65a77","traceState":"","parentSpanId":"48ab433d50014cbe","name":"recommend","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:14.581978880Z","endTime":"2021-03-25T17:21:14.920316160Z","durationInNanos":338337280,"serviceName":"recommendation","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8086,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140465266593744","resource.attributes.service@name":"recommendation","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":51138,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/recommend","span.attributes.http@host":"localhost:8086","span.attributes.http@target":"/recommend","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"3cec59b11f5d84fa"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"3cec59b11f5d84fa","traceState":"","parentSpanId":"4c9af7d9bc4961cc","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:14.678003676Z","endTime":"2021-03-25T17:21:14.815579605Z","durationInNanos":137575929,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-2","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56408,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"277a5934acf55dcf"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"277a5934acf55dcf","traceState":"","parentSpanId":"d03fecfa0f55b77c","name":"verify_login","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:14.566578432Z","endTime":"2021-03-25T17:21:14.566626304Z","durationInNanos":47872,"serviceName":"authentication","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140122129537568","resource.attributes.service@name":"authentication","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"59182c75e7b7289a"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"59182c75e7b7289a","traceState":"","parentSpanId":"1aef01694e12e529","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:14.618924032Z","endTime":"2021-03-25T17:21:14.619691008Z","durationInNanos":766976,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT * FROM Inventory_Items","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"b57ce805362f7790"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"b57ce805362f7790","traceState":"","parentSpanId":"0b62a0dc48347737","name":"getIntentory","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:14.594951168Z","endTime":"2021-03-25T17:21:14.646179072Z","durationInNanos":51227904,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55686,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_inventory","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/get_inventory","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"01c9ce32ee706927"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"01c9ce32ee706927","traceState":"","parentSpanId":"69a2949c11c65a77","name":"recommend","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:14.583037440Z","endTime":"2021-03-25T17:21:14.908792576Z","durationInNanos":325755136,"serviceName":"recommendation","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140465266593744","resource.attributes.service@name":"recommendation","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"5e94ade6b01c39ab"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"5e94ade6b01c39ab","traceState":"","parentSpanId":"01c9ce32ee706927","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:14.851265024Z","endTime":"2021-03-25T17:21:14.896640512Z","durationInNanos":45375488,"serviceName":"recommendation","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140465266593744","resource.attributes.service@name":"recommendation","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"f666a1d3fbbe538f"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"f666a1d3fbbe538f","traceState":"","parentSpanId":"68a74776159d7f19","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:14.960927106Z","endTime":"2021-03-25T17:21:14.963257076Z","durationInNanos":2329970,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.thread@name":"http-nio-8087-exec-6","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"8a6144390c29b1ec"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"8a6144390c29b1ec","traceState":"","parentSpanId":"d99fac2b5eb511e4","name":"read_inventory","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:14.589584640Z","endTime":"2021-03-25T17:21:14.823812608Z","durationInNanos":234227968,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"48ab433d50014cbe"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"48ab433d50014cbe","traceState":"","parentSpanId":"d03fecfa0f55b77c","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:14.576976128Z","endTime":"2021-03-25T17:21:14.945266432Z","durationInNanos":368290304,"serviceName":"authentication","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.http@url":"http://localhost:8086/recommend","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140122129537568","resource.attributes.service@name":"authentication","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"68a74776159d7f19"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"68a74776159d7f19","traceState":"","parentSpanId":"6af54de5eb15c6da","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:14.960003661Z","endTime":"2021-03-25T17:21:14.963455163Z","durationInNanos":3451502,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-6","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56412,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"d99fac2b5eb511e4"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"d99fac2b5eb511e4","traceState":"","parentSpanId":"cc62f643157da23b","name":"read_inventory","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:14.588622080Z","endTime":"2021-03-25T17:21:14.829069056Z","durationInNanos":240446976,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8082,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":45550,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/read_inventory","span.attributes.http@host":"localhost:8082","span.attributes.http@target":"/read_inventory","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"6af54de5eb15c6da"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"6af54de5eb15c6da","traceState":"","parentSpanId":"d03fecfa0f55b77c","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:14.957758976Z","endTime":"2021-03-25T17:21:14.967944448Z","durationInNanos":10185472,"serviceName":"authentication","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140122129537568","resource.attributes.service@name":"authentication","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"69a731074a9bdf13"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"69a731074a9bdf13","traceState":"","parentSpanId":"f62cd2694115a885","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:14.856992146Z","endTime":"2021-03-25T17:21:14.900501999Z","durationInNanos":43509853,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.thread@name":"http-nio-8087-exec-4","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"f62cd2694115a885"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"f62cd2694115a885","traceState":"","parentSpanId":"5e94ade6b01c39ab","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:14.856003651Z","endTime":"2021-03-25T17:21:14.901306943Z","durationInNanos":45303292,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-4","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56410,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"0b62a0dc48347737"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"0b62a0dc48347737","traceState":"","parentSpanId":"8a6144390c29b1ec","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:14.589961984Z","endTime":"2021-03-25T17:21:14.658458368Z","durationInNanos":68496384,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.http@url":"http://localhost:8083/get_inventory","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"4c9af7d9bc4961cc"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"4c9af7d9bc4961cc","traceState":"","parentSpanId":"8a6144390c29b1ec","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:14.672780544Z","endTime":"2021-03-25T17:21:14.816105216Z","durationInNanos":143324672,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"e9e09c3ce939b488"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"e9e09c3ce939b488","traceState":"","parentSpanId":"28f096bc84619ef2","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:14.560204544Z","endTime":"2021-03-25T17:21:15.010031360Z","durationInNanos":449826816,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.http@url":"http://localhost:8085/server_request_login","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"e258f824e8f8bcb4"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"e258f824e8f8bcb4","traceState":"","parentSpanId":"3cec59b11f5d84fa","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:14.679095501Z","endTime":"2021-03-25T17:21:14.815378442Z","durationInNanos":136282941,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.thread@name":"http-nio-8087-exec-2","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"cc62f643157da23b"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"cc62f643157da23b","traceState":"","parentSpanId":"01c9ce32ee706927","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:14.583482368Z","endTime":"2021-03-25T17:21:14.843803648Z","durationInNanos":260321280,"serviceName":"recommendation","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.http@url":"http://localhost:8082/read_inventory","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140465266593744","resource.attributes.service@name":"recommendation","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"1aef01694e12e529"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"1aef01694e12e529","traceState":"","parentSpanId":"b57ce805362f7790","name":"get_inventory","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:14.595916544Z","endTime":"2021-03-25T17:21:14.627271680Z","durationInNanos":31355136,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"d03fecfa0f55b77c"}}
+{"traceId":"4cb0014c4d311691da84b0fcbb649796","spanId":"d03fecfa0f55b77c","traceState":"","parentSpanId":"e9e09c3ce939b488","name":"server_request_login","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:14.565522176Z","endTime":"2021-03-25T17:21:14.992583936Z","durationInNanos":427061760,"serviceName":"authentication","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"load_main_screen","traceGroupFields.endTime":"2021-03-25T17:21:15.017436928Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":457854208,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8085,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140122129537568","resource.attributes.service@name":"authentication","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":44162,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/server_request_login","span.attributes.http@host":"localhost:8085","span.attributes.http@target":"/server_request_login","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"62debfbb65838232"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"62debfbb65838232","traceState":"","parentSpanId":"","name":"client_cancel_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:28.897886464Z","endTime":"2021-03-25T17:23:29.051137792Z","durationInNanos":153251328,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"9ba2105853a19123"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"9ba2105853a19123","traceState":"","parentSpanId":"1d4345e2a25404e1","name":"HTTP PUT","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:28.901952512Z","endTime":"2021-03-25T17:23:28.987020544Z","durationInNanos":85068032,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"span.attributes.http@url":"http://localhost:8083/cart_empty","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"PUT","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"7836e3dc48047a34"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"7836e3dc48047a34","traceState":"","parentSpanId":"9ba2105853a19123","name":"cartEmpty","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:28.904730112Z","endTime":"2021-03-25T17:23:28.977625088Z","durationInNanos":72894976,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"PUT","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55846,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/cart_empty","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/cart_empty","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"694c40a049b6bb75"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"694c40a049b6bb75","traceState":"","parentSpanId":"a949e38f139e5367","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:28.937193728Z","endTime":"2021-03-25T17:23:28.959799040Z","durationInNanos":22605312,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"TRUNCATE TABLE User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"e9196d0973d34783"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"e9196d0973d34783","traceState":"","parentSpanId":"1d4345e2a25404e1","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:28.996000512Z","endTime":"2021-03-25T17:23:29.007382272Z","durationInNanos":11381760,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"1d4345e2a25404e1"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"1d4345e2a25404e1","traceState":"","parentSpanId":"acac8cf2cd25bdca","name":"clear_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:28.901695488Z","endTime":"2021-03-25T17:23:29.014134784Z","durationInNanos":112439296,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"acac8cf2cd25bdca"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"acac8cf2cd25bdca","traceState":"","parentSpanId":"a43d5066600179db","name":"clear_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:28.900759296Z","endTime":"2021-03-25T17:23:29.032418816Z","durationInNanos":131659520,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56830,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/clear_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/clear_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"a43d5066600179db"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"a43d5066600179db","traceState":"","parentSpanId":"62debfbb65838232","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:28.898195200Z","endTime":"2021-03-25T17:23:29.043842304Z","durationInNanos":145647104,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"span.attributes.http@url":"http://localhost:8088/clear_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"02f0ed503fa076d2"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"02f0ed503fa076d2","traceState":"","parentSpanId":"a949e38f139e5367","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:28.927772928Z","endTime":"2021-03-25T17:23:28.930001920Z","durationInNanos":2228992,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT ItemId, TotalQty FROM User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"6ddb545e34349c2e"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"6ddb545e34349c2e","traceState":"","parentSpanId":"e9196d0973d34783","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:28.999003355Z","endTime":"2021-03-25T17:23:29.003272166Z","durationInNanos":4268811,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-2","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56568,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"0b3a8cf9058f1a24"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"0b3a8cf9058f1a24","traceState":"","parentSpanId":"6ddb545e34349c2e","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:28.999920538Z","endTime":"2021-03-25T17:23:29.003108996Z","durationInNanos":3188458,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"span.attributes.thread@name":"http-nio-8087-exec-2","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"a949e38f139e5367"}}
+{"traceId":"ae9f8814e541d128c01662da42cbb4e5","spanId":"a949e38f139e5367","traceState":"","parentSpanId":"7836e3dc48047a34","name":"cart_empty","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:28.905807616Z","endTime":"2021-03-25T17:23:28.966087424Z","durationInNanos":60279808,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:29.051137792Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":153251328,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"f6f9645fcad95fd6"}}
+{"traceId":"f0068334415fc4ef70c2a19edaef9573","spanId":"f6f9645fcad95fd6","traceState":"","parentSpanId":"","name":"client_pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:50.460224768Z","endTime":"2021-03-25T17:21:50.927259648Z","durationInNanos":467034880,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:50.927259648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":467034880,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"b1c3ea856510a6a1"}}
+{"traceId":"f0068334415fc4ef70c2a19edaef9573","spanId":"b1c3ea856510a6a1","traceState":"","parentSpanId":"0ab2072b5fd96775","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:50.466888192Z","endTime":"2021-03-25T17:21:50.709159168Z","durationInNanos":242270976,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:50.927259648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":467034880,"span.attributes.http@url":"http://localhost:8083/cart_sold","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"9099440984e79531"}}
+{"traceId":"f0068334415fc4ef70c2a19edaef9573","spanId":"9099440984e79531","traceState":"","parentSpanId":"f6f9645fcad95fd6","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:50.460729344Z","endTime":"2021-03-25T17:21:50.917506304Z","durationInNanos":456776960,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:50.927259648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":467034880,"span.attributes.http@url":"http://localhost:8088/pay_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"0ab2072b5fd96775"}}
+{"traceId":"f0068334415fc4ef70c2a19edaef9573","spanId":"0ab2072b5fd96775","traceState":"","parentSpanId":"60829ac6236571df","name":"pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:50.466437120Z","endTime":"2021-03-25T17:21:50.847299584Z","durationInNanos":380862464,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:50.927259648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":467034880,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"ff47096ac1c2981c"}}
+{"traceId":"f0068334415fc4ef70c2a19edaef9573","spanId":"ff47096ac1c2981c","traceState":"","parentSpanId":"27deb6b75cd58962","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:50.762004687Z","endTime":"2021-03-25T17:21:50.788365631Z","durationInNanos":26360944,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:50.927259648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":467034880,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-10","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56546,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"60829ac6236571df"}}
+{"traceId":"f0068334415fc4ef70c2a19edaef9573","spanId":"60829ac6236571df","traceState":"","parentSpanId":"9099440984e79531","name":"pay_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:50.464929280Z","endTime":"2021-03-25T17:21:50.863437568Z","durationInNanos":398508288,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:50.927259648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":467034880,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56808,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/pay_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/pay_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"74feec0d3dfacd42"}}
+{"traceId":"f0068334415fc4ef70c2a19edaef9573","spanId":"74feec0d3dfacd42","traceState":"","parentSpanId":"ff47096ac1c2981c","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:50.764756104Z","endTime":"2021-03-25T17:21:50.788130297Z","durationInNanos":23374193,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:50.927259648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":467034880,"span.attributes.thread@name":"http-nio-8087-exec-10","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"2b6ee7267bce731a"}}
+{"traceId":"f0068334415fc4ef70c2a19edaef9573","spanId":"2b6ee7267bce731a","traceState":"","parentSpanId":"b1c3ea856510a6a1","name":"cartSold","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:50.479571456Z","endTime":"2021-03-25T17:21:50.664975872Z","durationInNanos":185404416,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:50.927259648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":467034880,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55824,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/cart_sold","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/cart_sold","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"27deb6b75cd58962"}}
+{"traceId":"f0068334415fc4ef70c2a19edaef9573","spanId":"27deb6b75cd58962","traceState":"","parentSpanId":"0ab2072b5fd96775","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:50.747032064Z","endTime":"2021-03-25T17:21:50.803802624Z","durationInNanos":56770560,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:50.927259648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":467034880,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"5bb3c3c798268415"}}
+{"traceId":"f0068334415fc4ef70c2a19edaef9573","spanId":"5bb3c3c798268415","traceState":"","parentSpanId":"2b6ee7267bce731a","name":"cart_sold","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:50.481354496Z","endTime":"2021-03-25T17:21:50.646046208Z","durationInNanos":164691712,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:50.927259648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":467034880,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"bcc6b3a35599f34b"}}
+{"traceId":"f0068334415fc4ef70c2a19edaef9573","spanId":"bcc6b3a35599f34b","traceState":"","parentSpanId":"5bb3c3c798268415","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:50.604473600Z","endTime":"2021-03-25T17:21:50.634389504Z","durationInNanos":29915904,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:50.927259648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":467034880,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"TRUNCATE TABLE User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"5166c25a1f6839c7"}}
+{"traceId":"2b4f29e4aef9b3838a7d1b83aab7c1bb","spanId":"5166c25a1f6839c7","traceState":"","parentSpanId":"","name":"client_pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:33.062937600Z","endTime":"2021-03-25T17:23:33.194503936Z","durationInNanos":131566336,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:33.194503936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131566336,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"0802f5f8939438a8"}}
+{"traceId":"2b4f29e4aef9b3838a7d1b83aab7c1bb","spanId":"0802f5f8939438a8","traceState":"","parentSpanId":"2de7f35b0a1524cf","name":"pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:33.070421504Z","endTime":"2021-03-25T17:23:33.169714432Z","durationInNanos":99292928,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:33.194503936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131566336,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"3b6de35d9794266b"}}
+{"traceId":"2b4f29e4aef9b3838a7d1b83aab7c1bb","spanId":"3b6de35d9794266b","traceState":"","parentSpanId":"0802f5f8939438a8","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:33.070677248Z","endTime":"2021-03-25T17:23:33.145324544Z","durationInNanos":74647296,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:33.194503936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131566336,"span.attributes.http@url":"http://localhost:8083/cart_sold","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"3050c75e2891cbd0"}}
+{"traceId":"2b4f29e4aef9b3838a7d1b83aab7c1bb","spanId":"3050c75e2891cbd0","traceState":"","parentSpanId":"5965aa92f19c1bc9","name":"cart_sold","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:33.074232064Z","endTime":"2021-03-25T17:23:33.127093504Z","durationInNanos":52861440,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:33.194503936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131566336,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"184f2999b0681993"}}
+{"traceId":"2b4f29e4aef9b3838a7d1b83aab7c1bb","spanId":"184f2999b0681993","traceState":"","parentSpanId":"3050c75e2891cbd0","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:33.096890368Z","endTime":"2021-03-25T17:23:33.120715776Z","durationInNanos":23825408,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:33.194503936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131566336,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"TRUNCATE TABLE User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"5965aa92f19c1bc9"}}
+{"traceId":"2b4f29e4aef9b3838a7d1b83aab7c1bb","spanId":"5965aa92f19c1bc9","traceState":"","parentSpanId":"3b6de35d9794266b","name":"cartSold","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:33.073208576Z","endTime":"2021-03-25T17:23:33.135783936Z","durationInNanos":62575360,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:33.194503936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131566336,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55902,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/cart_sold","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/cart_sold","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"8f5082aa40f09354"}}
+{"traceId":"2b4f29e4aef9b3838a7d1b83aab7c1bb","spanId":"8f5082aa40f09354","traceState":"","parentSpanId":"0802f5f8939438a8","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:33.151627008Z","endTime":"2021-03-25T17:23:33.159618816Z","durationInNanos":7991808,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:33.194503936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131566336,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"0629395312373daa"}}
+{"traceId":"2b4f29e4aef9b3838a7d1b83aab7c1bb","spanId":"0629395312373daa","traceState":"","parentSpanId":"5166c25a1f6839c7","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:33.063244288Z","endTime":"2021-03-25T17:23:33.186777600Z","durationInNanos":123533312,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:33.194503936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131566336,"span.attributes.http@url":"http://localhost:8088/pay_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"beff2516bad059a3"}}
+{"traceId":"2b4f29e4aef9b3838a7d1b83aab7c1bb","spanId":"beff2516bad059a3","traceState":"","parentSpanId":"8f5082aa40f09354","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:33.154003504Z","endTime":"2021-03-25T17:23:33.157467694Z","durationInNanos":3464190,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:33.194503936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131566336,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-4","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56624,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"d6b227e0493d3a65"}}
+{"traceId":"2b4f29e4aef9b3838a7d1b83aab7c1bb","spanId":"d6b227e0493d3a65","traceState":"","parentSpanId":"beff2516bad059a3","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:33.155245470Z","endTime":"2021-03-25T17:23:33.157299627Z","durationInNanos":2054157,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:33.194503936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131566336,"span.attributes.thread@name":"http-nio-8087-exec-4","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"2de7f35b0a1524cf"}}
+{"traceId":"2b4f29e4aef9b3838a7d1b83aab7c1bb","spanId":"2de7f35b0a1524cf","traceState":"","parentSpanId":"0629395312373daa","name":"pay_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:33.069435392Z","endTime":"2021-03-25T17:23:33.177286656Z","durationInNanos":107851264,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:33.194503936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131566336,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56886,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/pay_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/pay_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"1f4b8b2d230554f4"}}
+{"traceId":"9f010d58eed9c6ac836e0a0c3cce4789","spanId":"1f4b8b2d230554f4","traceState":"","parentSpanId":"","name":"client_pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:23.448014336Z","endTime":"2021-03-25T17:21:23.592395776Z","durationInNanos":144381440,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:23.592395776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":144381440,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"11a4519551fd38a8"}}
+{"traceId":"9f010d58eed9c6ac836e0a0c3cce4789","spanId":"11a4519551fd38a8","traceState":"","parentSpanId":"1f4b8b2d230554f4","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:23.448317952Z","endTime":"2021-03-25T17:21:23.571843328Z","durationInNanos":123525376,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:23.592395776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":144381440,"span.attributes.http@url":"http://localhost:8088/pay_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"60f93b7e6a56fd63"}}
+{"traceId":"9f010d58eed9c6ac836e0a0c3cce4789","spanId":"60f93b7e6a56fd63","traceState":"","parentSpanId":"829f37cd0aec9b9f","name":"cart_sold","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:23.455743744Z","endTime":"2021-03-25T17:21:23.508082688Z","durationInNanos":52338944,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:23.592395776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":144381440,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"1f79b3db744fc299"}}
+{"traceId":"9f010d58eed9c6ac836e0a0c3cce4789","spanId":"1f79b3db744fc299","traceState":"","parentSpanId":"11a4519551fd38a8","name":"pay_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:23.450850304Z","endTime":"2021-03-25T17:21:23.558318336Z","durationInNanos":107468032,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:23.592395776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":144381440,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56746,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/pay_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/pay_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"829f37cd0aec9b9f"}}
+{"traceId":"9f010d58eed9c6ac836e0a0c3cce4789","spanId":"829f37cd0aec9b9f","traceState":"","parentSpanId":"e011610aab3da935","name":"cartSold","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:23.454716928Z","endTime":"2021-03-25T17:21:23.518616320Z","durationInNanos":63899392,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:23.592395776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":144381440,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55762,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/cart_sold","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/cart_sold","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"0de97e875579dd04"}}
+{"traceId":"9f010d58eed9c6ac836e0a0c3cce4789","spanId":"0de97e875579dd04","traceState":"","parentSpanId":"60f93b7e6a56fd63","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:23.477390336Z","endTime":"2021-03-25T17:21:23.499967488Z","durationInNanos":22577152,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:23.592395776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":144381440,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"TRUNCATE TABLE User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"909eed2e2f3a94ef"}}
+{"traceId":"9f010d58eed9c6ac836e0a0c3cce4789","spanId":"909eed2e2f3a94ef","traceState":"","parentSpanId":"86b718226b9dbdbd","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:23.538002935Z","endTime":"2021-03-25T17:21:23.541793241Z","durationInNanos":3790306,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:23.592395776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":144381440,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-8","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56484,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"6069aba83fa49e72"}}
+{"traceId":"9f010d58eed9c6ac836e0a0c3cce4789","spanId":"6069aba83fa49e72","traceState":"","parentSpanId":"909eed2e2f3a94ef","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:23.539599594Z","endTime":"2021-03-25T17:21:23.541647117Z","durationInNanos":2047523,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:23.592395776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":144381440,"span.attributes.thread@name":"http-nio-8087-exec-8","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"86b718226b9dbdbd"}}
+{"traceId":"9f010d58eed9c6ac836e0a0c3cce4789","spanId":"86b718226b9dbdbd","traceState":"","parentSpanId":"6823703aa507463c","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:23.535015680Z","endTime":"2021-03-25T17:21:23.546532608Z","durationInNanos":11516928,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:23.592395776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":144381440,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"e011610aab3da935"}}
+{"traceId":"9f010d58eed9c6ac836e0a0c3cce4789","spanId":"e011610aab3da935","traceState":"","parentSpanId":"6823703aa507463c","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:23.452033280Z","endTime":"2021-03-25T17:21:23.528720384Z","durationInNanos":76687104,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:23.592395776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":144381440,"span.attributes.http@url":"http://localhost:8083/cart_sold","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"6823703aa507463c"}}
+{"traceId":"9f010d58eed9c6ac836e0a0c3cce4789","spanId":"6823703aa507463c","traceState":"","parentSpanId":"1f79b3db744fc299","name":"pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:23.451779840Z","endTime":"2021-03-25T17:21:23.551823872Z","durationInNanos":100044032,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:21:23.592395776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":144381440,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"8070bc776d7b3fdf"}}
+{"traceId":"55cfebc5c8c42e2b92e1731c71f65aa6","spanId":"8070bc776d7b3fdf","traceState":"","parentSpanId":"","name":"client_delivery_status","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:32.123475712Z","endTime":"2021-03-25T17:23:32.254567424Z","durationInNanos":131091712,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:32.254567424Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131091712,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"0bae057bc46bf20d"}}
+{"traceId":"55cfebc5c8c42e2b92e1731c71f65aa6","spanId":"0bae057bc46bf20d","traceState":"","parentSpanId":"8040060a8677541b","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:32.153403904Z","endTime":"2021-03-25T17:23:32.154142720Z","durationInNanos":738816,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:32.254567424Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131091712,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT * FROM User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"b0aecf48b3d1cdd2"}}
+{"traceId":"55cfebc5c8c42e2b92e1731c71f65aa6","spanId":"b0aecf48b3d1cdd2","traceState":"","parentSpanId":"6b69e82cbc53b10a","name":"getCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:32.130227200Z","endTime":"2021-03-25T17:23:32.175308032Z","durationInNanos":45080832,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:32.254567424Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131091712,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55894,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/get_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"db16bff78edeb4e2"}}
+{"traceId":"55cfebc5c8c42e2b92e1731c71f65aa6","spanId":"db16bff78edeb4e2","traceState":"","parentSpanId":"451a52b4b1ad6937","name":"get_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:32.126292480Z","endTime":"2021-03-25T17:23:32.236474624Z","durationInNanos":110182144,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:32.254567424Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131091712,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56878,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/get_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"4916a83e6a831cc0"}}
+{"traceId":"55cfebc5c8c42e2b92e1731c71f65aa6","spanId":"4916a83e6a831cc0","traceState":"","parentSpanId":"6c4c5b024b202730","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:32.203003771Z","endTime":"2021-03-25T17:23:32.206036233Z","durationInNanos":3032462,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:32.254567424Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131091712,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-2","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56616,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"451a52b4b1ad6937"}}
+{"traceId":"55cfebc5c8c42e2b92e1731c71f65aa6","spanId":"451a52b4b1ad6937","traceState":"","parentSpanId":"8070bc776d7b3fdf","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:32.123781120Z","endTime":"2021-03-25T17:23:32.246547712Z","durationInNanos":122766592,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:32.254567424Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131091712,"span.attributes.http@url":"http://localhost:8088/get_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"9bb1cb211a2c96d9"}}
+{"traceId":"55cfebc5c8c42e2b92e1731c71f65aa6","spanId":"9bb1cb211a2c96d9","traceState":"","parentSpanId":"4916a83e6a831cc0","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:32.203886974Z","endTime":"2021-03-25T17:23:32.205898014Z","durationInNanos":2011040,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:32.254567424Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131091712,"span.attributes.thread@name":"http-nio-8087-exec-2","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"6c4c5b024b202730"}}
+{"traceId":"55cfebc5c8c42e2b92e1731c71f65aa6","spanId":"6c4c5b024b202730","traceState":"","parentSpanId":"e7ce1695e61e91e3","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:32.199425024Z","endTime":"2021-03-25T17:23:32.209982208Z","durationInNanos":10557184,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:32.254567424Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131091712,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"6b69e82cbc53b10a"}}
+{"traceId":"55cfebc5c8c42e2b92e1731c71f65aa6","spanId":"6b69e82cbc53b10a","traceState":"","parentSpanId":"e7ce1695e61e91e3","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:32.127502080Z","endTime":"2021-03-25T17:23:32.190182656Z","durationInNanos":62680576,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:32.254567424Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131091712,"span.attributes.http@url":"http://localhost:8083/get_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"8040060a8677541b"}}
+{"traceId":"55cfebc5c8c42e2b92e1731c71f65aa6","spanId":"8040060a8677541b","traceState":"","parentSpanId":"b0aecf48b3d1cdd2","name":"get_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:32.131343360Z","endTime":"2021-03-25T17:23:32.162667520Z","durationInNanos":31324160,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:32.254567424Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131091712,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"e7ce1695e61e91e3"}}
+{"traceId":"55cfebc5c8c42e2b92e1731c71f65aa6","spanId":"e7ce1695e61e91e3","traceState":"","parentSpanId":"db16bff78edeb4e2","name":"get_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:32.127243776Z","endTime":"2021-03-25T17:23:32.231066368Z","durationInNanos":103822592,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:32.254567424Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":131091712,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"e6ced0ee51a5e024"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"e6ced0ee51a5e024","traceState":"","parentSpanId":"","name":"client_checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:38.695432960Z","endTime":"2021-03-25T17:24:39.071426816Z","durationInNanos":375993856,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"06832e96addf20f3"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"06832e96addf20f3","traceState":"","parentSpanId":"3e40e04d328f2a0a","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:38.868930560Z","endTime":"2021-03-25T17:24:38.870375936Z","durationInNanos":1445376,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': 1}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"72c34e7343e6509a"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"72c34e7343e6509a","traceState":"","parentSpanId":"76ba99744a401f21","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:38.707735040Z","endTime":"2021-03-25T17:24:38.744882176Z","durationInNanos":37147136,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"c64650fb3e55152c"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"c64650fb3e55152c","traceState":"","parentSpanId":"21de487dcbd508b2","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:38.920792255Z","endTime":"2021-03-25T17:24:38.922798175Z","durationInNanos":2005920,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.thread@name":"http-nio-8087-exec-10","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"b13470a2bba1d4b2"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"b13470a2bba1d4b2","traceState":"","parentSpanId":"97faa65422f03e15","name":"payment","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:38.698324480Z","endTime":"2021-03-25T17:24:39.044744192Z","durationInNanos":346419712,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8084,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":50628,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/checkout","span.attributes.http@host":"localhost:8084","span.attributes.http@target":"/checkout","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"e9215f70dc3df982"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"e9215f70dc3df982","traceState":"","parentSpanId":"8b44f219d62e0a15","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:38.772626176Z","endTime":"2021-03-25T17:24:38.832209408Z","durationInNanos":59583232,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"2a59f4370347c6e9"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"2a59f4370347c6e9","traceState":"","parentSpanId":"c641adcb80f8c7ab","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:38.995855360Z","endTime":"2021-03-25T17:24:39.012676864Z","durationInNanos":16821504,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"3e40e04d328f2a0a"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"3e40e04d328f2a0a","traceState":"","parentSpanId":"7034699ebd9affd5","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:38.844057344Z","endTime":"2021-03-25T17:24:38.882541568Z","durationInNanos":38484224,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"8d52dbf2ce18447b"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"8d52dbf2ce18447b","traceState":"","parentSpanId":"819176f60584727b","name":"update_inventory","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:38.702367232Z","endTime":"2021-03-25T17:24:38.966861824Z","durationInNanos":264494592,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8082,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":45888,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_inventory","span.attributes.http@host":"localhost:8082","span.attributes.http@target":"/update_inventory","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"819176f60584727b"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"819176f60584727b","traceState":"","parentSpanId":"c641adcb80f8c7ab","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:38.699733504Z","endTime":"2021-03-25T17:24:38.983250944Z","durationInNanos":283517440,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.http@url":"http://localhost:8082/update_inventory","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"5a19345c46d15c91"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"5a19345c46d15c91","traceState":"","parentSpanId":"54b68480d4a455c4","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:39.000786325Z","endTime":"2021-03-25T17:24:39.010878319Z","durationInNanos":10091994,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.thread@name":"http-nio-8087-exec-2","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"c00c4de722cc894a"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"c00c4de722cc894a","traceState":"","parentSpanId":"8b44f219d62e0a15","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:38.703847936Z","endTime":"2021-03-25T17:24:38.766967296Z","durationInNanos":63119360,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"08c2ba1f92ec53e6"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"08c2ba1f92ec53e6","traceState":"","parentSpanId":"e9215f70dc3df982","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:38.776030208Z","endTime":"2021-03-25T17:24:38.821522176Z","durationInNanos":45491968,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56028,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"76ba99744a401f21"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"76ba99744a401f21","traceState":"","parentSpanId":"c00c4de722cc894a","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:38.706701312Z","endTime":"2021-03-25T17:24:38.757098240Z","durationInNanos":50396928,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56024,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"c641adcb80f8c7ab"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"c641adcb80f8c7ab","traceState":"","parentSpanId":"b13470a2bba1d4b2","name":"checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:38.699252224Z","endTime":"2021-03-25T17:24:39.036041984Z","durationInNanos":336789760,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"2d31e874898dba36"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"2d31e874898dba36","traceState":"","parentSpanId":"08c2ba1f92ec53e6","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:38.777075968Z","endTime":"2021-03-25T17:24:38.815331328Z","durationInNanos":38255360,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"56e7709900b0ca90"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"56e7709900b0ca90","traceState":"","parentSpanId":"8b44f219d62e0a15","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:38.916526592Z","endTime":"2021-03-25T17:24:38.925087232Z","durationInNanos":8560640,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"21de487dcbd508b2"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"21de487dcbd508b2","traceState":"","parentSpanId":"56e7709900b0ca90","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:38.920004214Z","endTime":"2021-03-25T17:24:38.923003040Z","durationInNanos":2998826,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-10","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56754,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"97faa65422f03e15"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"97faa65422f03e15","traceState":"","parentSpanId":"e6ced0ee51a5e024","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:38.695734016Z","endTime":"2021-03-25T17:24:39.062184704Z","durationInNanos":366450688,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.http@url":"http://localhost:8084/checkout","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"54b68480d4a455c4"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"54b68480d4a455c4","traceState":"","parentSpanId":"2a59f4370347c6e9","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:39.000003640Z","endTime":"2021-03-25T17:24:39.011020618Z","durationInNanos":11016978,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-2","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56756,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"74bd9e337e04fe80"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"74bd9e337e04fe80","traceState":"","parentSpanId":"72c34e7343e6509a","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:38.730163712Z","endTime":"2021-03-25T17:24:38.731151872Z","durationInNanos":988160,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': 2}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"7034699ebd9affd5"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"7034699ebd9affd5","traceState":"","parentSpanId":"0a73ecf1c5fc2220","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:38.843072256Z","endTime":"2021-03-25T17:24:38.890055936Z","durationInNanos":46983680,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56032,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"bc3986c93afde351"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"bc3986c93afde351","traceState":"","parentSpanId":"2d31e874898dba36","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:38.803536384Z","endTime":"2021-03-25T17:24:38.804492032Z","durationInNanos":955648,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': 3}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"0a73ecf1c5fc2220"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"0a73ecf1c5fc2220","traceState":"","parentSpanId":"8b44f219d62e0a15","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:38.840366080Z","endTime":"2021-03-25T17:24:38.905483776Z","durationInNanos":65117696,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"8b44f219d62e0a15"}}
+{"traceId":"83e711a859fde181df3d4398cda11405","spanId":"8b44f219d62e0a15","traceState":"","parentSpanId":"8d52dbf2ce18447b","name":"update_inventory","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:38.703366144Z","endTime":"2021-03-25T17:24:38.943165696Z","durationInNanos":239799552,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:39.071426816Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":375993856,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"3359ca1b6d6db780"}}
+{"traceId":"bc84e238fc20f480738b7733b1aa8331","spanId":"3359ca1b6d6db780","traceState":"","parentSpanId":"","name":"client_cancel_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:39.768194304Z","endTime":"2021-03-25T17:24:39.806145280Z","durationInNanos":37950976,"serviceName":"frontend-client","events":[{"time":"2021-03-25T17:24:39.806087680Z","name":"exception","attributes":{"exception@message":"","exception@type":"AssertionError","exception@stacktrace":"Traceback (most recent call last):\n  File \"/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py\", line 804, in use_span\n    yield span\n  File \"/app/client.py\", line 209, in cancelOrder\n    assert cancelOrderAPIRequest.status_code == 200\nAssertionError\n"},"droppedAttributesCount":0}],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:39.806145280Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":37950976,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","status.message":"AssertionError: ","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":2,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"40366bdbbe7a647c"}}
+{"traceId":"bc84e238fc20f480738b7733b1aa8331","spanId":"40366bdbbe7a647c","traceState":"","parentSpanId":"3359ca1b6d6db780","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:39.768545024Z","endTime":"2021-03-25T17:24:39.800680704Z","durationInNanos":32135680,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:39.806145280Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":37950976,"span.attributes.http@url":"http://localhost:8088/clear_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"SERVICE UNAVAILABLE","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":503}
+{"index":{"_id":"301185ff94eed72d"}}
+{"traceId":"bc84e238fc20f480738b7733b1aa8331","spanId":"301185ff94eed72d","traceState":"","parentSpanId":"d39ada3ebb20031d","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:39.772635648Z","endTime":"2021-03-25T17:24:39.779730688Z","durationInNanos":7095040,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:39.806145280Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":37950976,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"1b8bfeb41c684ad8"}}
+{"traceId":"bc84e238fc20f480738b7733b1aa8331","spanId":"1b8bfeb41c684ad8","traceState":"","parentSpanId":"0217c79f64c43d16","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:39.775682302Z","endTime":"2021-03-25T17:24:39.777381896Z","durationInNanos":1699594,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:39.806145280Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":37950976,"span.attributes.thread@name":"http-nio-8087-exec-4","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"0217c79f64c43d16"}}
+{"traceId":"bc84e238fc20f480738b7733b1aa8331","spanId":"0217c79f64c43d16","traceState":"","parentSpanId":"301185ff94eed72d","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:39.775003883Z","endTime":"2021-03-25T17:24:39.777547574Z","durationInNanos":2543691,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:39.806145280Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":37950976,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-4","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56760,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"d39ada3ebb20031d"}}
+{"traceId":"bc84e238fc20f480738b7733b1aa8331","spanId":"d39ada3ebb20031d","traceState":"","parentSpanId":"40366bdbbe7a647c","name":"clear_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:39.771380736Z","endTime":"2021-03-25T17:24:39.788654080Z","durationInNanos":17273344,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:39.806145280Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":37950976,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"SERVICE UNAVAILABLE","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":57026,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/clear_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/clear_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":503}
+{"index":{"_id":"909eca7a01416520"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"909eca7a01416520","traceState":"","parentSpanId":"","name":"client_create_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:40.674289152Z","endTime":"2021-03-25T17:24:40.938973184Z","durationInNanos":264684032,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"623f8925e9ed74be"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"623f8925e9ed74be","traceState":"","parentSpanId":"740200d311a15cbc","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:40.746123776Z","endTime":"2021-03-25T17:24:40.819686656Z","durationInNanos":73562880,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"150e2d39d592096a"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"150e2d39d592096a","traceState":"","parentSpanId":"740200d311a15cbc","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:40.678726656Z","endTime":"2021-03-25T17:24:40.739863808Z","durationInNanos":61137152,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"9fbb9a88883f3dac"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"9fbb9a88883f3dac","traceState":"","parentSpanId":"dfd44641cfa1c3e2","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:40.783504896Z","endTime":"2021-03-25T17:24:40.784676608Z","durationInNanos":1171712,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': '3'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"cde1a819e0978d4b"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"cde1a819e0978d4b","traceState":"","parentSpanId":"61c8c5a6c6fec6f6","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:40.900667958Z","endTime":"2021-03-25T17:24:40.906771544Z","durationInNanos":6103586,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.thread@name":"http-nio-8087-exec-6","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"1e2d414d8ed0baf6"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"1e2d414d8ed0baf6","traceState":"","parentSpanId":"0d5b9fc9b7839fa9","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:40.704969216Z","endTime":"2021-03-25T17:24:40.705938176Z","durationInNanos":968960,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': '1'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"86775de8fd79c391"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"86775de8fd79c391","traceState":"","parentSpanId":"0d5b9fc9b7839fa9","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:40.712461824Z","endTime":"2021-03-25T17:24:40.714333440Z","durationInNanos":1871616,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': '1'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"83324bea415aeb42"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"83324bea415aeb42","traceState":"","parentSpanId":"a5b31343288f51a9","name":"update_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:40.677266688Z","endTime":"2021-03-25T17:24:40.915795200Z","durationInNanos":238528512,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":57030,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/update_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"adc427aef5411564"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"adc427aef5411564","traceState":"","parentSpanId":"67d5cbbdae2849bd","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:40.863040768Z","endTime":"2021-03-25T17:24:40.864137472Z","durationInNanos":1096704,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': '2'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"0ebb517eba85341f"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"0ebb517eba85341f","traceState":"","parentSpanId":"8341f145a8322596","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:40.828758016Z","endTime":"2021-03-25T17:24:40.880685056Z","durationInNanos":51927040,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56054,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"a5b31343288f51a9"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"a5b31343288f51a9","traceState":"","parentSpanId":"909eca7a01416520","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:40.674618880Z","endTime":"2021-03-25T17:24:40.930931712Z","durationInNanos":256312832,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.http@url":"http://localhost:8088/update_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"61c8c5a6c6fec6f6"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"61c8c5a6c6fec6f6","traceState":"","parentSpanId":"032930bf72e67fd1","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:40.900003887Z","endTime":"2021-03-25T17:24:40.907163154Z","durationInNanos":7159267,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-6","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56776,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"bf900401c19b870f"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"bf900401c19b870f","traceState":"","parentSpanId":"dfd44641cfa1c3e2","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:40.775589632Z","endTime":"2021-03-25T17:24:40.776550400Z","durationInNanos":960768,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': '3'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"032930bf72e67fd1"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"032930bf72e67fd1","traceState":"","parentSpanId":"740200d311a15cbc","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:40.897000192Z","endTime":"2021-03-25T17:24:40.903326208Z","durationInNanos":6326016,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"0d5b9fc9b7839fa9"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"0d5b9fc9b7839fa9","traceState":"","parentSpanId":"72a8313ee5905897","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:40.682670080Z","endTime":"2021-03-25T17:24:40.722864128Z","durationInNanos":40194048,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"dfd44641cfa1c3e2"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"dfd44641cfa1c3e2","traceState":"","parentSpanId":"74bd0a2b1c535dee","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:40.750823936Z","endTime":"2021-03-25T17:24:40.795968768Z","durationInNanos":45144832,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"72a8313ee5905897"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"72a8313ee5905897","traceState":"","parentSpanId":"150e2d39d592096a","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:40.681532160Z","endTime":"2021-03-25T17:24:40.730191872Z","durationInNanos":48659712,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56046,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"da703626231e808a"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"da703626231e808a","traceState":"","parentSpanId":"67d5cbbdae2849bd","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:40.853131008Z","endTime":"2021-03-25T17:24:40.854102272Z","durationInNanos":971264,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': '2'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"740200d311a15cbc"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"740200d311a15cbc","traceState":"","parentSpanId":"83324bea415aeb42","name":"update_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:40.678199040Z","endTime":"2021-03-25T17:24:40.910448128Z","durationInNanos":232249088,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"74bd0a2b1c535dee"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"74bd0a2b1c535dee","traceState":"","parentSpanId":"623f8925e9ed74be","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:40.749567488Z","endTime":"2021-03-25T17:24:40.803897600Z","durationInNanos":54330112,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56050,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"8341f145a8322596"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"8341f145a8322596","traceState":"","parentSpanId":"740200d311a15cbc","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:40.825348864Z","endTime":"2021-03-25T17:24:40.891079680Z","durationInNanos":65730816,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"67d5cbbdae2849bd"}}
+{"traceId":"386d26555771f39c0caafdaf16739d9f","spanId":"67d5cbbdae2849bd","traceState":"","parentSpanId":"0ebb517eba85341f","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:40.829851904Z","endTime":"2021-03-25T17:24:40.874339840Z","durationInNanos":44487936,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:40.938973184Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":264684032,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"9b0ca0be3f3afeb5"}}
+{"traceId":"bf6b86edbb7810a0b69a435676483a21","spanId":"9b0ca0be3f3afeb5","traceState":"","parentSpanId":"","name":"client_delivery_status","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:41.379599616Z","endTime":"2021-03-25T17:24:41.486852608Z","durationInNanos":107252992,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:41.486852608Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":107252992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"52d6f6459801a501"}}
+{"traceId":"bf6b86edbb7810a0b69a435676483a21","spanId":"52d6f6459801a501","traceState":"","parentSpanId":"d4da0d84ed0f398d","name":"get_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:41.388732160Z","endTime":"2021-03-25T17:24:41.419036672Z","durationInNanos":30304512,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:41.486852608Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":107252992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"5d4fdf19cc933a1c"}}
+{"traceId":"bf6b86edbb7810a0b69a435676483a21","spanId":"5d4fdf19cc933a1c","traceState":"","parentSpanId":"4dd32ba418f528c3","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:41.457002970Z","endTime":"2021-03-25T17:24:41.459454427Z","durationInNanos":2451457,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:41.486852608Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":107252992,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-8","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56784,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"56e05d7fa868a1c1"}}
+{"traceId":"bf6b86edbb7810a0b69a435676483a21","spanId":"56e05d7fa868a1c1","traceState":"","parentSpanId":"c7287204c63d5fad","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:41.383910400Z","endTime":"2021-03-25T17:24:41.445765888Z","durationInNanos":61855488,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:41.486852608Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":107252992,"span.attributes.http@url":"http://localhost:8083/get_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"234e172a980209ad"}}
+{"traceId":"bf6b86edbb7810a0b69a435676483a21","spanId":"234e172a980209ad","traceState":"","parentSpanId":"52d6f6459801a501","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:41.411823616Z","endTime":"2021-03-25T17:24:41.412596480Z","durationInNanos":772864,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:41.486852608Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":107252992,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT * FROM User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"d4da0d84ed0f398d"}}
+{"traceId":"bf6b86edbb7810a0b69a435676483a21","spanId":"d4da0d84ed0f398d","traceState":"","parentSpanId":"56e05d7fa868a1c1","name":"getCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:41.387030784Z","endTime":"2021-03-25T17:24:41.425407488Z","durationInNanos":38376704,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:41.486852608Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":107252992,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56062,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/get_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"02d6391c11b5bef0"}}
+{"traceId":"bf6b86edbb7810a0b69a435676483a21","spanId":"02d6391c11b5bef0","traceState":"","parentSpanId":"33e36a09b147701a","name":"get_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:41.382713344Z","endTime":"2021-03-25T17:24:41.471790080Z","durationInNanos":89076736,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:41.486852608Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":107252992,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":57046,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/get_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"c7287204c63d5fad"}}
+{"traceId":"bf6b86edbb7810a0b69a435676483a21","spanId":"c7287204c63d5fad","traceState":"","parentSpanId":"02d6391c11b5bef0","name":"get_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:41.383650304Z","endTime":"2021-03-25T17:24:41.466961152Z","durationInNanos":83310848,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:41.486852608Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":107252992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"4dd32ba418f528c3"}}
+{"traceId":"bf6b86edbb7810a0b69a435676483a21","spanId":"4dd32ba418f528c3","traceState":"","parentSpanId":"c7287204c63d5fad","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:41.455014144Z","endTime":"2021-03-25T17:24:41.460891904Z","durationInNanos":5877760,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:41.486852608Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":107252992,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"33e36a09b147701a"}}
+{"traceId":"bf6b86edbb7810a0b69a435676483a21","spanId":"33e36a09b147701a","traceState":"","parentSpanId":"9b0ca0be3f3afeb5","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:41.379963136Z","endTime":"2021-03-25T17:24:41.481062656Z","durationInNanos":101099520,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:41.486852608Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":107252992,"span.attributes.http@url":"http://localhost:8088/get_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"ed1c40ba8f5c3ca1"}}
+{"traceId":"bf6b86edbb7810a0b69a435676483a21","spanId":"ed1c40ba8f5c3ca1","traceState":"","parentSpanId":"5d4fdf19cc933a1c","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:41.457727404Z","endTime":"2021-03-25T17:24:41.459309570Z","durationInNanos":1582166,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:41.486852608Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":107252992,"span.attributes.thread@name":"http-nio-8087-exec-8","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"87cec809f399dc30"}}
+{"traceId":"aa546c8539ad5cb0ee6d456c5072b1ec","spanId":"87cec809f399dc30","traceState":"","parentSpanId":"","name":"client_pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:42.199765504Z","endTime":"2021-03-25T17:24:42.321604096Z","durationInNanos":121838592,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:24:42.321604096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":121838592,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"b1cf7ec42c1b633d"}}
+{"traceId":"aa546c8539ad5cb0ee6d456c5072b1ec","spanId":"b1cf7ec42c1b633d","traceState":"","parentSpanId":"d7aee4db1f6e5763","name":"pay_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:42.202723072Z","endTime":"2021-03-25T17:24:42.300398336Z","durationInNanos":97675264,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:24:42.321604096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":121838592,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":57054,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/pay_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/pay_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"d7aee4db1f6e5763"}}
+{"traceId":"aa546c8539ad5cb0ee6d456c5072b1ec","spanId":"d7aee4db1f6e5763","traceState":"","parentSpanId":"87cec809f399dc30","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:42.200078848Z","endTime":"2021-03-25T17:24:42.312237568Z","durationInNanos":112158720,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:24:42.321604096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":121838592,"span.attributes.http@url":"http://localhost:8088/pay_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"6ec093eb614de902"}}
+{"traceId":"aa546c8539ad5cb0ee6d456c5072b1ec","spanId":"6ec093eb614de902","traceState":"","parentSpanId":"181fdbbc87ece9f3","name":"cartSold","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:42.206539008Z","endTime":"2021-03-25T17:24:42.265985280Z","durationInNanos":59446272,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:24:42.321604096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":121838592,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56070,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/cart_sold","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/cart_sold","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"c097b32c179cd05b"}}
+{"traceId":"aa546c8539ad5cb0ee6d456c5072b1ec","spanId":"c097b32c179cd05b","traceState":"","parentSpanId":"b1cf7ec42c1b633d","name":"pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:42.203660288Z","endTime":"2021-03-25T17:24:42.295044096Z","durationInNanos":91383808,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:24:42.321604096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":121838592,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"8f8941685de6c284"}}
+{"traceId":"aa546c8539ad5cb0ee6d456c5072b1ec","spanId":"8f8941685de6c284","traceState":"","parentSpanId":"6ec093eb614de902","name":"cart_sold","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:42.207574272Z","endTime":"2021-03-25T17:24:42.255295744Z","durationInNanos":47721472,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:24:42.321604096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":121838592,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"5427cbedc82d9a86"}}
+{"traceId":"aa546c8539ad5cb0ee6d456c5072b1ec","spanId":"5427cbedc82d9a86","traceState":"","parentSpanId":"8ca74d2bb426df6b","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:42.285735214Z","endTime":"2021-03-25T17:24:42.287341397Z","durationInNanos":1606183,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:24:42.321604096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":121838592,"span.attributes.thread@name":"http-nio-8087-exec-10","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"181fdbbc87ece9f3"}}
+{"traceId":"aa546c8539ad5cb0ee6d456c5072b1ec","spanId":"181fdbbc87ece9f3","traceState":"","parentSpanId":"c097b32c179cd05b","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:42.203917056Z","endTime":"2021-03-25T17:24:42.276364032Z","durationInNanos":72446976,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:24:42.321604096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":121838592,"span.attributes.http@url":"http://localhost:8083/cart_sold","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"8ca74d2bb426df6b"}}
+{"traceId":"aa546c8539ad5cb0ee6d456c5072b1ec","spanId":"8ca74d2bb426df6b","traceState":"","parentSpanId":"daf3d5e227d66b44","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:42.285003743Z","endTime":"2021-03-25T17:24:42.287789648Z","durationInNanos":2785905,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:24:42.321604096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":121838592,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-10","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56792,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"4c9fd6c35e7a0496"}}
+{"traceId":"aa546c8539ad5cb0ee6d456c5072b1ec","spanId":"4c9fd6c35e7a0496","traceState":"","parentSpanId":"8f8941685de6c284","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:42.230315008Z","endTime":"2021-03-25T17:24:42.248354560Z","durationInNanos":18039552,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:24:42.321604096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":121838592,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"TRUNCATE TABLE User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"daf3d5e227d66b44"}}
+{"traceId":"aa546c8539ad5cb0ee6d456c5072b1ec","spanId":"daf3d5e227d66b44","traceState":"","parentSpanId":"c097b32c179cd05b","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:42.282489344Z","endTime":"2021-03-25T17:24:42.289478912Z","durationInNanos":6989568,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:24:42.321604096Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":121838592,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"fc2889232f6bfee2"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"fc2889232f6bfee2","traceState":"","parentSpanId":"","name":"client_checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:20.387353600Z","endTime":"2021-03-25T17:21:20.759999232Z","durationInNanos":372645632,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"9c3f9115f871f5a0"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"9c3f9115f871f5a0","traceState":"","parentSpanId":"935cbd34eb35e840","name":"payment","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:20.390497024Z","endTime":"2021-03-25T17:21:20.739962624Z","durationInNanos":349465600,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8084,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":50316,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/checkout","span.attributes.http@host":"localhost:8084","span.attributes.http@target":"/checkout","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"81aca34992c3bb9a"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"81aca34992c3bb9a","traceState":"","parentSpanId":"2e0bcc35b46cdc58","name":"update_inventory","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:20.398322432Z","endTime":"2021-03-25T17:21:20.681257728Z","durationInNanos":282935296,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"0438f00bd05a7b08"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"0438f00bd05a7b08","traceState":"","parentSpanId":"81aca34992c3bb9a","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:20.493850624Z","endTime":"2021-03-25T17:21:20.565137920Z","durationInNanos":71287296,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"3365305ba3a4b271"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"3365305ba3a4b271","traceState":"","parentSpanId":"81aca34992c3bb9a","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:20.575116544Z","endTime":"2021-03-25T17:21:20.642036992Z","durationInNanos":66920448,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"232c0433f6087a19"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"232c0433f6087a19","traceState":"","parentSpanId":"81aca34992c3bb9a","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:20.398961920Z","endTime":"2021-03-25T17:21:20.482841600Z","durationInNanos":83879680,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"c1222bbdfe51df89"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"c1222bbdfe51df89","traceState":"","parentSpanId":"42ca61064e4fbbf8","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:20.497675776Z","endTime":"2021-03-25T17:21:20.546634496Z","durationInNanos":48958720,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"9b9d9e6b892056b6"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"9b9d9e6b892056b6","traceState":"","parentSpanId":"7cae58d0f53be574","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:20.604836864Z","endTime":"2021-03-25T17:21:20.605860864Z","durationInNanos":1024000,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': 1}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"ef20fcde9dee603a"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"ef20fcde9dee603a","traceState":"","parentSpanId":"3365305ba3a4b271","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:20.580970240Z","endTime":"2021-03-25T17:21:20.629545984Z","durationInNanos":48575744,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55720,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"42ca61064e4fbbf8"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"42ca61064e4fbbf8","traceState":"","parentSpanId":"0438f00bd05a7b08","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:20.496719104Z","endTime":"2021-03-25T17:21:20.552507648Z","durationInNanos":55788544,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55716,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"501798d3b0cd3ec2"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"501798d3b0cd3ec2","traceState":"","parentSpanId":"c1222bbdfe51df89","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:20.528640512Z","endTime":"2021-03-25T17:21:20.530060032Z","durationInNanos":1419520,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': 3}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"97d426646346ed30"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"97d426646346ed30","traceState":"","parentSpanId":"dd1b6c64e71d0aeb","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:20.663003872Z","endTime":"2021-03-25T17:21:20.666492686Z","durationInNanos":3488814,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-8","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56442,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"e8f02bb624820c79"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"e8f02bb624820c79","traceState":"","parentSpanId":"002e214c71f9ddc3","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:20.723720232Z","endTime":"2021-03-25T17:21:20.727648Z","durationInNanos":3927768,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.thread@name":"http-nio-8087-exec-10","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"935cbd34eb35e840"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"935cbd34eb35e840","traceState":"","parentSpanId":"fc2889232f6bfee2","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:20.387662336Z","endTime":"2021-03-25T17:21:20.751462144Z","durationInNanos":363799808,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.http@url":"http://localhost:8084/checkout","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"002e214c71f9ddc3"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"002e214c71f9ddc3","traceState":"","parentSpanId":"6c8bd4a85a24b5dd","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:20.723002893Z","endTime":"2021-03-25T17:21:20.727804967Z","durationInNanos":4802074,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-10","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56444,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"53192fff614154f8"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"53192fff614154f8","traceState":"","parentSpanId":"97d426646346ed30","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:20.664003863Z","endTime":"2021-03-25T17:21:20.666249710Z","durationInNanos":2245847,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.thread@name":"http-nio-8087-exec-8","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"1a7b014c9c7784d1"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"1a7b014c9c7784d1","traceState":"","parentSpanId":"232c0433f6087a19","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:20.402530816Z","endTime":"2021-03-25T17:21:20.469684480Z","durationInNanos":67153664,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55712,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"daf8c1b89ef0f46e"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"daf8c1b89ef0f46e","traceState":"","parentSpanId":"9c3f9115f871f5a0","name":"checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:20.391448832Z","endTime":"2021-03-25T17:21:20.735637760Z","durationInNanos":344188928,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"9670897539aa3cb5"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"9670897539aa3cb5","traceState":"","parentSpanId":"1a7b014c9c7784d1","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:20.403919104Z","endTime":"2021-03-25T17:21:20.462452224Z","durationInNanos":58533120,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"aebd856791d9f772"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"aebd856791d9f772","traceState":"","parentSpanId":"daf8c1b89ef0f46e","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:20.392236032Z","endTime":"2021-03-25T17:21:20.712580096Z","durationInNanos":320344064,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.http@url":"http://localhost:8082/update_inventory","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"7cae58d0f53be574"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"7cae58d0f53be574","traceState":"","parentSpanId":"ef20fcde9dee603a","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:20.582309632Z","endTime":"2021-03-25T17:21:20.620422912Z","durationInNanos":38113280,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"fbf637162922440c"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"fbf637162922440c","traceState":"","parentSpanId":"9670897539aa3cb5","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:20.446543616Z","endTime":"2021-03-25T17:21:20.448027904Z","durationInNanos":1484288,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': 2}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"6c8bd4a85a24b5dd"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"6c8bd4a85a24b5dd","traceState":"","parentSpanId":"daf8c1b89ef0f46e","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:20.718433536Z","endTime":"2021-03-25T17:21:20.726854400Z","durationInNanos":8420864,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"dd1b6c64e71d0aeb"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"dd1b6c64e71d0aeb","traceState":"","parentSpanId":"81aca34992c3bb9a","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:20.654946048Z","endTime":"2021-03-25T17:21:20.668436736Z","durationInNanos":13490688,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"2e0bcc35b46cdc58"}}
+{"traceId":"aff58b618d5b6da700692607df9343ff","spanId":"2e0bcc35b46cdc58","traceState":"","parentSpanId":"aebd856791d9f772","name":"update_inventory","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:20.397296128Z","endTime":"2021-03-25T17:21:20.690810368Z","durationInNanos":293514240,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:21:20.759999232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":372645632,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8082,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":45576,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_inventory","span.attributes.http@host":"localhost:8082","span.attributes.http@target":"/update_inventory","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"6192513130aabc9d"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"6192513130aabc9d","traceState":"","parentSpanId":"","name":"client_cancel_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:21.093042176Z","endTime":"2021-03-25T17:21:21.259883776Z","durationInNanos":166841600,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"e04e28e719caa00a"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"e04e28e719caa00a","traceState":"","parentSpanId":"cebae850c737e427","name":"HTTP PUT","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:21.097510912Z","endTime":"2021-03-25T17:21:21.193844224Z","durationInNanos":96333312,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"span.attributes.http@url":"http://localhost:8083/cart_empty","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"PUT","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"d843bf25bc4af127"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"d843bf25bc4af127","traceState":"","parentSpanId":"cebae850c737e427","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:21.208868352Z","endTime":"2021-03-25T17:21:21.215510272Z","durationInNanos":6641920,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"65ed1b5a900339c5"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"65ed1b5a900339c5","traceState":"","parentSpanId":"5780e7b8b048541d","name":"clear_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:21.096129280Z","endTime":"2021-03-25T17:21:21.237169920Z","durationInNanos":141040640,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56714,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/clear_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/clear_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"f2f19e080c89a0af"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"f2f19e080c89a0af","traceState":"","parentSpanId":"89ad4518c6e570fa","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:21.133353984Z","endTime":"2021-03-25T17:21:21.158749696Z","durationInNanos":25395712,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"TRUNCATE TABLE User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"248105a4690d9618"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"248105a4690d9618","traceState":"","parentSpanId":"89ad4518c6e570fa","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:21.125742592Z","endTime":"2021-03-25T17:21:21.126652672Z","durationInNanos":910080,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT ItemId, TotalQty FROM User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"1089af99926957e9"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"1089af99926957e9","traceState":"","parentSpanId":"5e6b5840fee372df","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:21.212668467Z","endTime":"2021-03-25T17:21:21.215023834Z","durationInNanos":2355367,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"span.attributes.thread@name":"http-nio-8087-exec-2","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"89ad4518c6e570fa"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"89ad4518c6e570fa","traceState":"","parentSpanId":"65579ac39ed78e8b","name":"cart_empty","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:21.103709696Z","endTime":"2021-03-25T17:21:21.167925248Z","durationInNanos":64215552,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"65579ac39ed78e8b"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"65579ac39ed78e8b","traceState":"","parentSpanId":"e04e28e719caa00a","name":"cartEmpty","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:21.102652160Z","endTime":"2021-03-25T17:21:21.180791296Z","durationInNanos":78139136,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"PUT","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55730,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/cart_empty","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/cart_empty","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"5780e7b8b048541d"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"5780e7b8b048541d","traceState":"","parentSpanId":"6192513130aabc9d","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:21.093342976Z","endTime":"2021-03-25T17:21:21.252124160Z","durationInNanos":158781184,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"span.attributes.http@url":"http://localhost:8088/clear_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"cebae850c737e427"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"cebae850c737e427","traceState":"","parentSpanId":"65ed1b5a900339c5","name":"clear_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:21.097151232Z","endTime":"2021-03-25T17:21:21.229582080Z","durationInNanos":132430848,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"5e6b5840fee372df"}}
+{"traceId":"1e50a1c7c8d61d5a68331cb6c1c40a8f","spanId":"5e6b5840fee372df","traceState":"","parentSpanId":"d843bf25bc4af127","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:21.212002796Z","endTime":"2021-03-25T17:21:21.215186829Z","durationInNanos":3184033,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:21:21.259883776Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":166841600,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-2","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56452,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"519210d2f0b16de7"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"519210d2f0b16de7","traceState":"","parentSpanId":"","name":"client_create_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:22.074882304Z","endTime":"2021-03-25T17:21:22.504287232Z","durationInNanos":429404928,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"0a8f2a5406669cd0"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"0a8f2a5406669cd0","traceState":"","parentSpanId":"6b49c6cd47144cf4","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.208856576Z","endTime":"2021-03-25T17:21:22.319724032Z","durationInNanos":110867456,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"74f8214ff6302bb4"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"74f8214ff6302bb4","traceState":"","parentSpanId":"9d884fe648f374c0","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:22.086813440Z","endTime":"2021-03-25T17:21:22.174243840Z","durationInNanos":87430400,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55738,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"a8c838c3e428ec44"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"a8c838c3e428ec44","traceState":"","parentSpanId":"4fe61f4c204b8b85","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.389894400Z","endTime":"2021-03-25T17:21:22.391394816Z","durationInNanos":1500416,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': '2'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"9c777ee6c23a6cf7"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"9c777ee6c23a6cf7","traceState":"","parentSpanId":"74f8214ff6302bb4","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:22.088591872Z","endTime":"2021-03-25T17:21:22.161988608Z","durationInNanos":73396736,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"2fc3bd8e2583c489"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"2fc3bd8e2583c489","traceState":"","parentSpanId":"8ae8de0ae53b16a0","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:22.465665661Z","endTime":"2021-03-25T17:21:22.467963673Z","durationInNanos":2298012,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.thread@name":"http-nio-8087-exec-4","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"bc33c3276d43f701"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"bc33c3276d43f701","traceState":"","parentSpanId":"ed1a28b5e8524ce0","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:22.214860544Z","endTime":"2021-03-25T17:21:22.281757952Z","durationInNanos":66897408,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"4fe61f4c204b8b85"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"4fe61f4c204b8b85","traceState":"","parentSpanId":"e63d9d3690995252","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:22.342049792Z","endTime":"2021-03-25T17:21:22.428568576Z","durationInNanos":86518784,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"56a9aa15eb2b729e"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"56a9aa15eb2b729e","traceState":"","parentSpanId":"519210d2f0b16de7","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.075364352Z","endTime":"2021-03-25T17:21:22.497611776Z","durationInNanos":422247424,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.http@url":"http://localhost:8088/update_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"ae0d8f806540d5cd"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"ae0d8f806540d5cd","traceState":"","parentSpanId":"bc33c3276d43f701","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.265683712Z","endTime":"2021-03-25T17:21:22.266774784Z","durationInNanos":1091072,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': '3'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"6be54c09fc04ece0"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"6be54c09fc04ece0","traceState":"","parentSpanId":"bc33c3276d43f701","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.254548992Z","endTime":"2021-03-25T17:21:22.255910400Z","durationInNanos":1361408,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': '3'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"4777fe10370f3cf5"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"4777fe10370f3cf5","traceState":"","parentSpanId":"9c777ee6c23a6cf7","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.142497280Z","endTime":"2021-03-25T17:21:22.146615296Z","durationInNanos":4118016,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': '1'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"6b49c6cd47144cf4"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"6b49c6cd47144cf4","traceState":"","parentSpanId":"28bd75c7fb12f4cc","name":"update_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:22.081343488Z","endTime":"2021-03-25T17:21:22.479796992Z","durationInNanos":398453504,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"8ae8de0ae53b16a0"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"8ae8de0ae53b16a0","traceState":"","parentSpanId":"a0ec3edc57edd84b","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:22.465003056Z","endTime":"2021-03-25T17:21:22.468122481Z","durationInNanos":3119425,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-4","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56468,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"e63d9d3690995252"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"e63d9d3690995252","traceState":"","parentSpanId":"d33f2167a6bd28bc","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:22.340552960Z","endTime":"2021-03-25T17:21:22.440836864Z","durationInNanos":100283904,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55746,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"9d884fe648f374c0"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"9d884fe648f374c0","traceState":"","parentSpanId":"6b49c6cd47144cf4","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.082465024Z","endTime":"2021-03-25T17:21:22.200846592Z","durationInNanos":118381568,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"a0ec3edc57edd84b"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"a0ec3edc57edd84b","traceState":"","parentSpanId":"6b49c6cd47144cf4","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.459736064Z","endTime":"2021-03-25T17:21:22.469625344Z","durationInNanos":9889280,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"28bd75c7fb12f4cc"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"28bd75c7fb12f4cc","traceState":"","parentSpanId":"56a9aa15eb2b729e","name":"update_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:22.079751168Z","endTime":"2021-03-25T17:21:22.484825600Z","durationInNanos":405074432,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56722,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/update_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"ed1a28b5e8524ce0"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"ed1a28b5e8524ce0","traceState":"","parentSpanId":"0a8f2a5406669cd0","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:22.213234688Z","endTime":"2021-03-25T17:21:22.294454528Z","durationInNanos":81219840,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55742,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"9d041fbb4e4f72c1"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"9d041fbb4e4f72c1","traceState":"","parentSpanId":"4fe61f4c204b8b85","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.414493952Z","endTime":"2021-03-25T17:21:22.415668736Z","durationInNanos":1174784,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': '2'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"d33f2167a6bd28bc"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"d33f2167a6bd28bc","traceState":"","parentSpanId":"6b49c6cd47144cf4","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.336448256Z","endTime":"2021-03-25T17:21:22.453875968Z","durationInNanos":117427712,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"04a010f9ee8bf16b"}}
+{"traceId":"c9c0606c8671aee3e4eaf7b908c2df03","spanId":"04a010f9ee8bf16b","traceState":"","parentSpanId":"9c777ee6c23a6cf7","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.130534656Z","endTime":"2021-03-25T17:21:22.132026624Z","durationInNanos":1491968,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:21:22.504287232Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":429404928,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': '1'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"76cbcf558cf04819"}}
+{"traceId":"8832ed6abbb2a83516461960c89af49d","spanId":"76cbcf558cf04819","traceState":"","parentSpanId":"","name":"client_delivery_status","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:22.748892160Z","endTime":"2021-03-25T17:21:22.896669696Z","durationInNanos":147777536,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:22.896669696Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":147777536,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"e5c083f49dd5a05e"}}
+{"traceId":"8832ed6abbb2a83516461960c89af49d","spanId":"e5c083f49dd5a05e","traceState":"","parentSpanId":"1813e6ceecb24033","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:22.834003336Z","endTime":"2021-03-25T17:21:22.837250561Z","durationInNanos":3247225,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:22.896669696Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":147777536,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-6","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56476,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"a5ac11f134ed6971"}}
+{"traceId":"8832ed6abbb2a83516461960c89af49d","spanId":"a5ac11f134ed6971","traceState":"","parentSpanId":"aebfec9be2f4514f","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.781006848Z","endTime":"2021-03-25T17:21:22.781871616Z","durationInNanos":864768,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:22.896669696Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":147777536,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT * FROM User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"1097a86537c3c79b"}}
+{"traceId":"8832ed6abbb2a83516461960c89af49d","spanId":"1097a86537c3c79b","traceState":"","parentSpanId":"76cbcf558cf04819","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.749218816Z","endTime":"2021-03-25T17:21:22.886730240Z","durationInNanos":137511424,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:22.896669696Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":147777536,"span.attributes.http@url":"http://localhost:8088/get_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"c3fe7416eeb8c884"}}
+{"traceId":"8832ed6abbb2a83516461960c89af49d","spanId":"c3fe7416eeb8c884","traceState":"","parentSpanId":"3856bdf927e7242e","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.753215232Z","endTime":"2021-03-25T17:21:22.817274624Z","durationInNanos":64059392,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:22.896669696Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":147777536,"span.attributes.http@url":"http://localhost:8083/get_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"a673bc074b438374"}}
+{"traceId":"8832ed6abbb2a83516461960c89af49d","spanId":"a673bc074b438374","traceState":"","parentSpanId":"e5c083f49dd5a05e","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:22.834954238Z","endTime":"2021-03-25T17:21:22.837060125Z","durationInNanos":2105887,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:22.896669696Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":147777536,"span.attributes.thread@name":"http-nio-8087-exec-6","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"aebfec9be2f4514f"}}
+{"traceId":"8832ed6abbb2a83516461960c89af49d","spanId":"aebfec9be2f4514f","traceState":"","parentSpanId":"b704dc75f3ea9c1f","name":"get_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:22.757242880Z","endTime":"2021-03-25T17:21:22.791789056Z","durationInNanos":34546176,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:22.896669696Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":147777536,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"3856bdf927e7242e"}}
+{"traceId":"8832ed6abbb2a83516461960c89af49d","spanId":"3856bdf927e7242e","traceState":"","parentSpanId":"3cc0a046c424c986","name":"get_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:21:22.752957440Z","endTime":"2021-03-25T17:21:22.854703360Z","durationInNanos":101745920,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:22.896669696Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":147777536,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"3cc0a046c424c986"}}
+{"traceId":"8832ed6abbb2a83516461960c89af49d","spanId":"3cc0a046c424c986","traceState":"","parentSpanId":"1097a86537c3c79b","name":"get_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:22.751980544Z","endTime":"2021-03-25T17:21:22.869998848Z","durationInNanos":118018304,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:22.896669696Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":147777536,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56738,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/get_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"b704dc75f3ea9c1f"}}
+{"traceId":"8832ed6abbb2a83516461960c89af49d","spanId":"b704dc75f3ea9c1f","traceState":"","parentSpanId":"c3fe7416eeb8c884","name":"getCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:21:22.756071680Z","endTime":"2021-03-25T17:21:22.806841344Z","durationInNanos":50769664,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:22.896669696Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":147777536,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55754,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/get_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"1813e6ceecb24033"}}
+{"traceId":"8832ed6abbb2a83516461960c89af49d","spanId":"1813e6ceecb24033","traceState":"","parentSpanId":"3856bdf927e7242e","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:21:22.830035200Z","endTime":"2021-03-25T17:21:22.839351296Z","durationInNanos":9316096,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:21:22.896669696Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":147777536,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"67c279e1100d75c3"}}
+{"traceId":"03f9c770db5ee2f1caac0afc36db49ba","spanId":"67c279e1100d75c3","traceState":"","parentSpanId":"","name":"client_pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:45.724285696Z","endTime":"2021-03-25T17:23:45.949285120Z","durationInNanos":224999424,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:45.949285120Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":224999424,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"d67c5bb617ba9203"}}
+{"traceId":"03f9c770db5ee2f1caac0afc36db49ba","spanId":"d67c5bb617ba9203","traceState":"","parentSpanId":"421660af43ed2f96","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:45.786072576Z","endTime":"2021-03-25T17:23:45.809853952Z","durationInNanos":23781376,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:45.949285120Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":224999424,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"TRUNCATE TABLE User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"c54e1c2f383b1462"}}
+{"traceId":"03f9c770db5ee2f1caac0afc36db49ba","spanId":"c54e1c2f383b1462","traceState":"","parentSpanId":"918b5d6cac30fa13","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:45.863757056Z","endTime":"2021-03-25T17:23:45.879998720Z","durationInNanos":16241664,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:45.949285120Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":224999424,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"d35fa1184168044c"}}
+{"traceId":"03f9c770db5ee2f1caac0afc36db49ba","spanId":"d35fa1184168044c","traceState":"","parentSpanId":"72b91b096fe15a7e","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:45.874673885Z","endTime":"2021-03-25T17:23:45.876600285Z","durationInNanos":1926400,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:45.949285120Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":224999424,"span.attributes.thread@name":"http-nio-8087-exec-6","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"a4869b984bdcdb69"}}
+{"traceId":"03f9c770db5ee2f1caac0afc36db49ba","spanId":"a4869b984bdcdb69","traceState":"","parentSpanId":"a08a8a483b30d818","name":"cartSold","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:45.743732992Z","endTime":"2021-03-25T17:23:45.832090368Z","durationInNanos":88357376,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:45.949285120Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":224999424,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55910,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/cart_sold","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/cart_sold","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"e8e61cf518ff0d47"}}
+{"traceId":"03f9c770db5ee2f1caac0afc36db49ba","spanId":"e8e61cf518ff0d47","traceState":"","parentSpanId":"67c279e1100d75c3","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:45.724760576Z","endTime":"2021-03-25T17:23:45.940549888Z","durationInNanos":215789312,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:45.949285120Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":224999424,"span.attributes.http@url":"http://localhost:8088/pay_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"72b91b096fe15a7e"}}
+{"traceId":"03f9c770db5ee2f1caac0afc36db49ba","spanId":"72b91b096fe15a7e","traceState":"","parentSpanId":"c54e1c2f383b1462","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:45.871003680Z","endTime":"2021-03-25T17:23:45.877972732Z","durationInNanos":6969052,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:45.949285120Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":224999424,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-6","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56632,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"918b5d6cac30fa13"}}
+{"traceId":"03f9c770db5ee2f1caac0afc36db49ba","spanId":"918b5d6cac30fa13","traceState":"","parentSpanId":"11c4d645b0b6544a","name":"pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:45.730200832Z","endTime":"2021-03-25T17:23:45.895294208Z","durationInNanos":165093376,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:45.949285120Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":224999424,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"11c4d645b0b6544a"}}
+{"traceId":"03f9c770db5ee2f1caac0afc36db49ba","spanId":"11c4d645b0b6544a","traceState":"","parentSpanId":"e8e61cf518ff0d47","name":"pay_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:45.728619520Z","endTime":"2021-03-25T17:23:45.909096192Z","durationInNanos":180476672,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:45.949285120Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":224999424,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56894,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/pay_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/pay_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"421660af43ed2f96"}}
+{"traceId":"03f9c770db5ee2f1caac0afc36db49ba","spanId":"421660af43ed2f96","traceState":"","parentSpanId":"a4869b984bdcdb69","name":"cart_sold","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:45.745376768Z","endTime":"2021-03-25T17:23:45.819226880Z","durationInNanos":73850112,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:45.949285120Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":224999424,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"a08a8a483b30d818"}}
+{"traceId":"03f9c770db5ee2f1caac0afc36db49ba","spanId":"a08a8a483b30d818","traceState":"","parentSpanId":"918b5d6cac30fa13","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:45.730639872Z","endTime":"2021-03-25T17:23:45.853490432Z","durationInNanos":122850560,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:45.949285120Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":224999424,"span.attributes.http@url":"http://localhost:8083/cart_sold","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"9c09591194d5d102"}}
+{"traceId":"9cce3149f673950c9ccb0b2e104e730d","spanId":"9c09591194d5d102","traceState":"","parentSpanId":"","name":"client_delivery_status","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:46.998478592Z","endTime":"2021-03-25T17:23:47.113243648Z","durationInNanos":114765056,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:47.113243648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":114765056,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"68cb40977bd6eab8"}}
+{"traceId":"9cce3149f673950c9ccb0b2e104e730d","spanId":"68cb40977bd6eab8","traceState":"","parentSpanId":"3221fd7e7e20755a","name":"get_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:47.002198528Z","endTime":"2021-03-25T17:23:47.087424256Z","durationInNanos":85225728,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:47.113243648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":114765056,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"e3f874297f242418"}}
+{"traceId":"9cce3149f673950c9ccb0b2e104e730d","spanId":"e3f874297f242418","traceState":"","parentSpanId":"68cb40977bd6eab8","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:47.002505216Z","endTime":"2021-03-25T17:23:47.057874688Z","durationInNanos":55369472,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:47.113243648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":114765056,"span.attributes.http@url":"http://localhost:8083/get_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"1f0bc3af282b41e9"}}
+{"traceId":"9cce3149f673950c9ccb0b2e104e730d","spanId":"1f0bc3af282b41e9","traceState":"","parentSpanId":"cfa977442e9ff51c","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:47.068743984Z","endTime":"2021-03-25T17:23:47.070433471Z","durationInNanos":1689487,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:47.113243648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":114765056,"span.attributes.thread@name":"http-nio-8087-exec-8","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"cfa977442e9ff51c"}}
+{"traceId":"9cce3149f673950c9ccb0b2e104e730d","spanId":"cfa977442e9ff51c","traceState":"","parentSpanId":"47cdf0730792e64c","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:47.068003332Z","endTime":"2021-03-25T17:23:47.075911172Z","durationInNanos":7907840,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:47.113243648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":114765056,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-8","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56640,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"4e2b9046e9942e2b"}}
+{"traceId":"9cce3149f673950c9ccb0b2e104e730d","spanId":"4e2b9046e9942e2b","traceState":"","parentSpanId":"e3f874297f242418","name":"getCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:47.005123328Z","endTime":"2021-03-25T17:23:47.047171072Z","durationInNanos":42047744,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:47.113243648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":114765056,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55918,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/get_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"df58ebf17b36f970"}}
+{"traceId":"9cce3149f673950c9ccb0b2e104e730d","spanId":"df58ebf17b36f970","traceState":"","parentSpanId":"4e2b9046e9942e2b","name":"get_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:47.006217472Z","endTime":"2021-03-25T17:23:47.037839104Z","durationInNanos":31621632,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:47.113243648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":114765056,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"3221fd7e7e20755a"}}
+{"traceId":"9cce3149f673950c9ccb0b2e104e730d","spanId":"3221fd7e7e20755a","traceState":"","parentSpanId":"77555840320cb81d","name":"get_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:47.001265408Z","endTime":"2021-03-25T17:23:47.093001472Z","durationInNanos":91736064,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:47.113243648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":114765056,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56902,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/get_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"888acd07415400a1"}}
+{"traceId":"9cce3149f673950c9ccb0b2e104e730d","spanId":"888acd07415400a1","traceState":"","parentSpanId":"df58ebf17b36f970","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:47.028200960Z","endTime":"2021-03-25T17:23:47.029597696Z","durationInNanos":1396736,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:47.113243648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":114765056,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT * FROM User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"47cdf0730792e64c"}}
+{"traceId":"9cce3149f673950c9ccb0b2e104e730d","spanId":"47cdf0730792e64c","traceState":"","parentSpanId":"68cb40977bd6eab8","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:47.066144256Z","endTime":"2021-03-25T17:23:47.072265728Z","durationInNanos":6121472,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:47.113243648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":114765056,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"77555840320cb81d"}}
+{"traceId":"9cce3149f673950c9ccb0b2e104e730d","spanId":"77555840320cb81d","traceState":"","parentSpanId":"9c09591194d5d102","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:46.998782208Z","endTime":"2021-03-25T17:23:47.104758528Z","durationInNanos":105976320,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:23:47.113243648Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":114765056,"span.attributes.http@url":"http://localhost:8088/get_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"1a0cb28940f561a8"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"1a0cb28940f561a8","traceState":"","parentSpanId":"","name":"client_create_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:48.084371456Z","endTime":"2021-03-25T17:23:48.359975936Z","durationInNanos":275604480,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"8066b9d09b81c92f"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"8066b9d09b81c92f","traceState":"","parentSpanId":"831080abac6795cf","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:48.115765504Z","endTime":"2021-03-25T17:23:48.116704Z","durationInNanos":938496,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': '1'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"fd68372fc1dd1373"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"fd68372fc1dd1373","traceState":"","parentSpanId":"a43a68ba4dec877d","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:48.163528704Z","endTime":"2021-03-25T17:23:48.214047232Z","durationInNanos":50518528,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"a95608b807c2c60f"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"a95608b807c2c60f","traceState":"","parentSpanId":"a8209b6ba0064d37","name":"update_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:48.088389888Z","endTime":"2021-03-25T17:23:48.337500416Z","durationInNanos":249110528,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"b51ce57104b3621c"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"b51ce57104b3621c","traceState":"","parentSpanId":"fd68372fc1dd1373","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:48.197120768Z","endTime":"2021-03-25T17:23:48.198455552Z","durationInNanos":1334784,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': '3'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"a8209b6ba0064d37"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"a8209b6ba0064d37","traceState":"","parentSpanId":"2a58f381f8c70e2e","name":"update_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:48.087305728Z","endTime":"2021-03-25T17:23:48.343833088Z","durationInNanos":256527360,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56910,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/update_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"1c6cd3e12182ed11"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"1c6cd3e12182ed11","traceState":"","parentSpanId":"36e00b610031f457","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:48.246038272Z","endTime":"2021-03-25T17:23:48.286460928Z","durationInNanos":40422656,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"b83e713b3a5f444f"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"b83e713b3a5f444f","traceState":"","parentSpanId":"fd68372fc1dd1373","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:48.185838592Z","endTime":"2021-03-25T17:23:48.186730752Z","durationInNanos":892160,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': '3'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"a43a68ba4dec877d"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"a43a68ba4dec877d","traceState":"","parentSpanId":"29873549e67f2556","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:48.162587648Z","endTime":"2021-03-25T17:23:48.220827904Z","durationInNanos":58240256,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55930,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"36e00b610031f457"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"36e00b610031f457","traceState":"","parentSpanId":"83de8102e998c5f6","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:48.245083392Z","endTime":"2021-03-25T17:23:48.293122560Z","durationInNanos":48039168,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55934,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"c2a85c2dc054a8fe"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"c2a85c2dc054a8fe","traceState":"","parentSpanId":"831080abac6795cf","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:48.125617152Z","endTime":"2021-03-25T17:23:48.126324224Z","durationInNanos":707072,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': '1'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"83de8102e998c5f6"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"83de8102e998c5f6","traceState":"","parentSpanId":"a95608b807c2c60f","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:48.240862464Z","endTime":"2021-03-25T17:23:48.308264192Z","durationInNanos":67401728,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"d606d3dd283b20c5"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"d606d3dd283b20c5","traceState":"","parentSpanId":"b492c94dcd1b6a4d","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:48.324002749Z","endTime":"2021-03-25T17:23:48.327644015Z","durationInNanos":3641266,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-10","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56656,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"29873549e67f2556"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"29873549e67f2556","traceState":"","parentSpanId":"a95608b807c2c60f","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:48.159489536Z","endTime":"2021-03-25T17:23:48.233933312Z","durationInNanos":74443776,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"831080abac6795cf"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"831080abac6795cf","traceState":"","parentSpanId":"0fb86f8c49324042","name":"add_item_to_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:48.092900864Z","endTime":"2021-03-25T17:23:48.137275392Z","durationInNanos":44374528,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"6b2ede68bc8fa5f4"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"6b2ede68bc8fa5f4","traceState":"","parentSpanId":"1c6cd3e12182ed11","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:48.275602688Z","endTime":"2021-03-25T17:23:48.276599040Z","durationInNanos":996352,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': '2'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"bfe27ce19f70e729"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"bfe27ce19f70e729","traceState":"","parentSpanId":"1c6cd3e12182ed11","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:48.268308736Z","endTime":"2021-03-25T17:23:48.269206272Z","durationInNanos":897536,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': '2'}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"6dc05e88f4467863"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"6dc05e88f4467863","traceState":"","parentSpanId":"d606d3dd283b20c5","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:48.324561176Z","endTime":"2021-03-25T17:23:48.327441217Z","durationInNanos":2880041,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.thread@name":"http-nio-8087-exec-10","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"c42df275e25b0e8f"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"c42df275e25b0e8f","traceState":"","parentSpanId":"a95608b807c2c60f","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:48.088905472Z","endTime":"2021-03-25T17:23:48.153333504Z","durationInNanos":64428032,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.http@url":"http://localhost:8083/add_item_to_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"2a58f381f8c70e2e"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"2a58f381f8c70e2e","traceState":"","parentSpanId":"1a0cb28940f561a8","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:48.084678144Z","endTime":"2021-03-25T17:23:48.353726976Z","durationInNanos":269048832,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.http@url":"http://localhost:8088/update_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"0fb86f8c49324042"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"0fb86f8c49324042","traceState":"","parentSpanId":"c42df275e25b0e8f","name":"addItemToCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:48.091877632Z","endTime":"2021-03-25T17:23:48.143332864Z","durationInNanos":51455232,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55926,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/add_item_to_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/add_item_to_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"b492c94dcd1b6a4d"}}
+{"traceId":"e991d404ff13b33caafd240b9afba158","spanId":"b492c94dcd1b6a4d","traceState":"","parentSpanId":"a95608b807c2c60f","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:48.318687232Z","endTime":"2021-03-25T17:23:48.327306496Z","durationInNanos":8619264,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:23:48.359975936Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":275604480,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"577a7fd9713d82e3"}}
+{"traceId":"eeef72a379b08acc21a7a1da140b496f","spanId":"577a7fd9713d82e3","traceState":"","parentSpanId":"","name":"client_delivery_status","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:00.337438720Z","endTime":"2021-03-25T17:24:00.443709952Z","durationInNanos":106271232,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:00.443709952Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":106271232,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"ee14230a7bf6a820"}}
+{"traceId":"eeef72a379b08acc21a7a1da140b496f","spanId":"ee14230a7bf6a820","traceState":"","parentSpanId":"3bbfbbb8b5ccdca9","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:00.341403648Z","endTime":"2021-03-25T17:24:00.396574208Z","durationInNanos":55170560,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:00.443709952Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":106271232,"span.attributes.http@url":"http://localhost:8083/get_cart","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"4d51ee300ffdafab"}}
+{"traceId":"eeef72a379b08acc21a7a1da140b496f","spanId":"4d51ee300ffdafab","traceState":"","parentSpanId":"ee14230a7bf6a820","name":"getCart","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:00.344109824Z","endTime":"2021-03-25T17:24:00.386901504Z","durationInNanos":42791680,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:00.443709952Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":106271232,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55978,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_cart","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/get_cart","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"3e3c69d965b84c07"}}
+{"traceId":"eeef72a379b08acc21a7a1da140b496f","spanId":"3e3c69d965b84c07","traceState":"","parentSpanId":"9776392cce908429","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:00.367306496Z","endTime":"2021-03-25T17:24:00.369491712Z","durationInNanos":2185216,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:00.443709952Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":106271232,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT * FROM User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"0fb4d938a4db181b"}}
+{"traceId":"eeef72a379b08acc21a7a1da140b496f","spanId":"0fb4d938a4db181b","traceState":"","parentSpanId":"3bbfbbb8b5ccdca9","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:00.403020288Z","endTime":"2021-03-25T17:24:00.408785408Z","durationInNanos":5765120,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:00.443709952Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":106271232,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"3bbfbbb8b5ccdca9"}}
+{"traceId":"eeef72a379b08acc21a7a1da140b496f","spanId":"3bbfbbb8b5ccdca9","traceState":"","parentSpanId":"1c599f19b10082a4","name":"get_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:00.341143552Z","endTime":"2021-03-25T17:24:00.415056384Z","durationInNanos":73912832,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:00.443709952Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":106271232,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"1c599f19b10082a4"}}
+{"traceId":"eeef72a379b08acc21a7a1da140b496f","spanId":"1c599f19b10082a4","traceState":"","parentSpanId":"458c486c6a8e9527","name":"get_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:00.340208128Z","endTime":"2021-03-25T17:24:00.420619008Z","durationInNanos":80410880,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:00.443709952Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":106271232,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56962,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/get_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/get_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"9776392cce908429"}}
+{"traceId":"eeef72a379b08acc21a7a1da140b496f","spanId":"9776392cce908429","traceState":"","parentSpanId":"4d51ee300ffdafab","name":"get_cart","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:00.345138944Z","endTime":"2021-03-25T17:24:00.379310336Z","durationInNanos":34171392,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:00.443709952Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":106271232,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"35baa091df01834e"}}
+{"traceId":"eeef72a379b08acc21a7a1da140b496f","spanId":"35baa091df01834e","traceState":"","parentSpanId":"37729eb1aa61f9a2","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:00.406588562Z","endTime":"2021-03-25T17:24:00.409684446Z","durationInNanos":3095884,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:00.443709952Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":106271232,"span.attributes.thread@name":"http-nio-8087-exec-10","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"37729eb1aa61f9a2"}}
+{"traceId":"eeef72a379b08acc21a7a1da140b496f","spanId":"37729eb1aa61f9a2","traceState":"","parentSpanId":"0fb4d938a4db181b","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:00.406003034Z","endTime":"2021-03-25T17:24:00.409877327Z","durationInNanos":3874293,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:00.443709952Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":106271232,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-10","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":137,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56700,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"458c486c6a8e9527"}}
+{"traceId":"eeef72a379b08acc21a7a1da140b496f","spanId":"458c486c6a8e9527","traceState":"","parentSpanId":"577a7fd9713d82e3","name":"HTTP GET","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:00.337747200Z","endTime":"2021-03-25T17:24:00.432306176Z","durationInNanos":94558976,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_delivery_status","traceGroupFields.endTime":"2021-03-25T17:24:00.443709952Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":106271232,"span.attributes.http@url":"http://localhost:8088/get_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"GET","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"44875f61ade8d4d1"}}
+{"traceId":"852a3fa441c2dd319d94be4e90cdc593","spanId":"44875f61ade8d4d1","traceState":"","parentSpanId":"","name":"client_create_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:01.302660864Z","endTime":"2021-03-25T17:24:01.342219776Z","durationInNanos":39558912,"serviceName":"frontend-client","events":[{"time":"2021-03-25T17:24:01.342160896Z","name":"exception","attributes":{"exception@message":"","exception@type":"AssertionError","exception@stacktrace":"Traceback (most recent call last):\n  File \"/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py\", line 804, in use_span\n    yield span\n  File \"/app/client.py\", line 198, in createOrder\n    assert updateOrderAPIRequest.status_code == 200\nAssertionError\n"},"droppedAttributesCount":0}],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:01.342219776Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":39558912,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","status.message":"AssertionError: ","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":2,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"1dcf16c24109157c"}}
+{"traceId":"852a3fa441c2dd319d94be4e90cdc593","spanId":"1dcf16c24109157c","traceState":"","parentSpanId":"c762ea561c90bacc","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:01.309003470Z","endTime":"2021-03-25T17:24:01.311803818Z","durationInNanos":2800348,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:01.342219776Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":39558912,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-2","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56704,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"f90e7d8e2be7ed42"}}
+{"traceId":"852a3fa441c2dd319d94be4e90cdc593","spanId":"f90e7d8e2be7ed42","traceState":"","parentSpanId":"44875f61ade8d4d1","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:01.302975744Z","endTime":"2021-03-25T17:24:01.333780224Z","durationInNanos":30804480,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:01.342219776Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":39558912,"span.attributes.http@url":"http://localhost:8088/update_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"SERVICE UNAVAILABLE","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":503}
+{"index":{"_id":"b8c7c406109e6853"}}
+{"traceId":"852a3fa441c2dd319d94be4e90cdc593","spanId":"b8c7c406109e6853","traceState":"","parentSpanId":"f90e7d8e2be7ed42","name":"update_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:01.305604608Z","endTime":"2021-03-25T17:24:01.322971904Z","durationInNanos":17367296,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:01.342219776Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":39558912,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"SERVICE UNAVAILABLE","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56970,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/update_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":503}
+{"index":{"_id":"c762ea561c90bacc"}}
+{"traceId":"852a3fa441c2dd319d94be4e90cdc593","spanId":"c762ea561c90bacc","traceState":"","parentSpanId":"b8c7c406109e6853","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:01.306888704Z","endTime":"2021-03-25T17:24:01.314155008Z","durationInNanos":7266304,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:01.342219776Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":39558912,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"c04780a1b5dfb8db"}}
+{"traceId":"852a3fa441c2dd319d94be4e90cdc593","spanId":"c04780a1b5dfb8db","traceState":"","parentSpanId":"1dcf16c24109157c","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:01.309685404Z","endTime":"2021-03-25T17:24:01.311637506Z","durationInNanos":1952102,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_create_order","traceGroupFields.endTime":"2021-03-25T17:24:01.342219776Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":39558912,"span.attributes.thread@name":"http-nio-8087-exec-2","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"9e00987a5ddb1389"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"9e00987a5ddb1389","traceState":"","parentSpanId":"","name":"client_cancel_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:02.180425472Z","endTime":"2021-03-25T17:24:02.499118080Z","durationInNanos":318692608,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"df08a6411e1e1320"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"df08a6411e1e1320","traceState":"","parentSpanId":"00dbedd07cdc6605","name":"HTTP PUT","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:02.184506880Z","endTime":"2021-03-25T17:24:02.340449536Z","durationInNanos":155942656,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"span.attributes.http@url":"http://localhost:8083/cart_empty","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"PUT","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"c55168f05f4c0788"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"c55168f05f4c0788","traceState":"","parentSpanId":"6a1caed3da777ed1","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:02.218972672Z","endTime":"2021-03-25T17:24:02.244534528Z","durationInNanos":25561856,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"TRUNCATE TABLE User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"c9b1c98d861a21ad"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"c9b1c98d861a21ad","traceState":"","parentSpanId":"df08a6411e1e1320","name":"cartEmpty","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:02.187168768Z","endTime":"2021-03-25T17:24:02.259351040Z","durationInNanos":72182272,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"PUT","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55990,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/cart_empty","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/cart_empty","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"6a1caed3da777ed1"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"6a1caed3da777ed1","traceState":"","parentSpanId":"c9b1c98d861a21ad","name":"cart_empty","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:02.188187392Z","endTime":"2021-03-25T17:24:02.252571136Z","durationInNanos":64383744,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"105e06978064066e"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"105e06978064066e","traceState":"","parentSpanId":"7db6b40beda6e9f5","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:02.371685355Z","endTime":"2021-03-25T17:24:02.387731715Z","durationInNanos":16046360,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"span.attributes.thread@name":"http-nio-8087-exec-4","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"db71b12b5a3048a7"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"db71b12b5a3048a7","traceState":"","parentSpanId":"00dbedd07cdc6605","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:02.362716160Z","endTime":"2021-03-25T17:24:02.389943040Z","durationInNanos":27226880,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"980fd01685cf617b"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"980fd01685cf617b","traceState":"","parentSpanId":"6a1caed3da777ed1","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:02.211183360Z","endTime":"2021-03-25T17:24:02.211932416Z","durationInNanos":749056,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT ItemId, TotalQty FROM User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"7db6b40beda6e9f5"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"7db6b40beda6e9f5","traceState":"","parentSpanId":"db71b12b5a3048a7","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:02.371004080Z","endTime":"2021-03-25T17:24:02.387975467Z","durationInNanos":16971387,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-4","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56712,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"fbd7035fb360050b"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"fbd7035fb360050b","traceState":"","parentSpanId":"9e00987a5ddb1389","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:02.180734208Z","endTime":"2021-03-25T17:24:02.483553280Z","durationInNanos":302819072,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"span.attributes.http@url":"http://localhost:8088/clear_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"00dbedd07cdc6605"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"00dbedd07cdc6605","traceState":"","parentSpanId":"f9698d94a2bc5e93","name":"clear_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:02.184233216Z","endTime":"2021-03-25T17:24:02.435438592Z","durationInNanos":251205376,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"f9698d94a2bc5e93"}}
+{"traceId":"61e206cdf99796bd5d0d6660fafeaa13","spanId":"f9698d94a2bc5e93","traceState":"","parentSpanId":"fbd7035fb360050b","name":"clear_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:02.183235584Z","endTime":"2021-03-25T17:24:02.459529472Z","durationInNanos":276293888,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:24:02.499118080Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":318692608,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56974,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/clear_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/clear_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"e41a501e2b463e4f"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"e41a501e2b463e4f","traceState":"","parentSpanId":"","name":"client_checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:02.873396736Z","endTime":"2021-03-25T17:24:03.338473728Z","durationInNanos":465076992,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"2ab2346b8a2256ec"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"2ab2346b8a2256ec","traceState":"","parentSpanId":"83c126b28a4e3ba1","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:03.022118656Z","endTime":"2021-03-25T17:24:03.106782976Z","durationInNanos":84664320,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"68e7c47304e4e3b7"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"68e7c47304e4e3b7","traceState":"","parentSpanId":"2f9dedfb4a0ce070","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:02.950728448Z","endTime":"2021-03-25T17:24:02.992670464Z","durationInNanos":41942016,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56004,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"6bf83533c911fa84"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"6bf83533c911fa84","traceState":"","parentSpanId":"8f46983d67cbfb08","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:02.974441472Z","endTime":"2021-03-25T17:24:02.975385344Z","durationInNanos":943872,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': 3}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"8f46983d67cbfb08"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"8f46983d67cbfb08","traceState":"","parentSpanId":"68e7c47304e4e3b7","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:02.951733248Z","endTime":"2021-03-25T17:24:02.986525952Z","durationInNanos":34792704,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"71eb12de1c6f0856"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"71eb12de1c6f0856","traceState":"","parentSpanId":"68757226266da9fb","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:02.885796608Z","endTime":"2021-03-25T17:24:02.920141824Z","durationInNanos":34345216,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"40490d98955d0ee8"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"40490d98955d0ee8","traceState":"","parentSpanId":"6a721b1de414f8ea","name":"checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:02.877249280Z","endTime":"2021-03-25T17:24:03.263083264Z","durationInNanos":385833984,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"af0ac45bddb77682"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"af0ac45bddb77682","traceState":"","parentSpanId":"ca2bbe96720126cd","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:03.155657816Z","endTime":"2021-03-25T17:24:03.157957035Z","durationInNanos":2299219,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.thread@name":"http-nio-8087-exec-6","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"88b577c6de6a1a0c"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"88b577c6de6a1a0c","traceState":"","parentSpanId":"71eb12de1c6f0856","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:02.908273152Z","endTime":"2021-03-25T17:24:02.909201664Z","durationInNanos":928512,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': 2}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"04715e4b7c6c8c67"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"04715e4b7c6c8c67","traceState":"","parentSpanId":"1b922c46eca3681a","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:03.229519732Z","endTime":"2021-03-25T17:24:03.231141820Z","durationInNanos":1622088,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.thread@name":"http-nio-8087-exec-8","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"482f5d2e5d2e01a5"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"482f5d2e5d2e01a5","traceState":"","parentSpanId":"40490d98955d0ee8","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:02.877730560Z","endTime":"2021-03-25T17:24:03.218989568Z","durationInNanos":341259008,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.http@url":"http://localhost:8082/update_inventory","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"6a721b1de414f8ea"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"6a721b1de414f8ea","traceState":"","parentSpanId":"1e69dea1cc3bb675","name":"payment","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:02.876323072Z","endTime":"2021-03-25T17:24:03.275425024Z","durationInNanos":399101952,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8084,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":50604,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/checkout","span.attributes.http@host":"localhost:8084","span.attributes.http@target":"/checkout","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"a40b2ee1ad083444"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"a40b2ee1ad083444","traceState":"","parentSpanId":"544d4016f47447db","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:02.881920768Z","endTime":"2021-03-25T17:24:02.937480192Z","durationInNanos":55559424,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"83c126b28a4e3ba1"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"83c126b28a4e3ba1","traceState":"","parentSpanId":"bace8af7ec6dcea1","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:03.020527872Z","endTime":"2021-03-25T17:24:03.125422848Z","durationInNanos":104894976,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56008,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"544d4016f47447db"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"544d4016f47447db","traceState":"","parentSpanId":"6a5c44f70df8ba60","name":"update_inventory","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:24:02.881451264Z","endTime":"2021-03-25T17:24:03.184011776Z","durationInNanos":302560512,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"c5583c927c0eaa55"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"c5583c927c0eaa55","traceState":"","parentSpanId":"2ab2346b8a2256ec","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:03.082126592Z","endTime":"2021-03-25T17:24:03.090554112Z","durationInNanos":8427520,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': 1}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"68757226266da9fb"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"68757226266da9fb","traceState":"","parentSpanId":"a40b2ee1ad083444","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:02.884764672Z","endTime":"2021-03-25T17:24:02.926254336Z","durationInNanos":41489664,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56000,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"fd6830be1f9eb762"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"fd6830be1f9eb762","traceState":"","parentSpanId":"544d4016f47447db","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:03.152131584Z","endTime":"2021-03-25T17:24:03.160588288Z","durationInNanos":8456704,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"bace8af7ec6dcea1"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"bace8af7ec6dcea1","traceState":"","parentSpanId":"544d4016f47447db","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:03.011334400Z","endTime":"2021-03-25T17:24:03.140665088Z","durationInNanos":129330688,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"9072fd63220b9e78"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"9072fd63220b9e78","traceState":"","parentSpanId":"40490d98955d0ee8","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:03.225950976Z","endTime":"2021-03-25T17:24:03.232076800Z","durationInNanos":6125824,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"6a5c44f70df8ba60"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"6a5c44f70df8ba60","traceState":"","parentSpanId":"482f5d2e5d2e01a5","name":"update_inventory","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:02.880508160Z","endTime":"2021-03-25T17:24:03.195376128Z","durationInNanos":314867968,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8082,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":45864,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_inventory","span.attributes.http@host":"localhost:8082","span.attributes.http@target":"/update_inventory","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"1b922c46eca3681a"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"1b922c46eca3681a","traceState":"","parentSpanId":"9072fd63220b9e78","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:03.229002687Z","endTime":"2021-03-25T17:24:03.231262707Z","durationInNanos":2260020,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-8","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56732,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"1e69dea1cc3bb675"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"1e69dea1cc3bb675","traceState":"","parentSpanId":"e41a501e2b463e4f","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:02.873706752Z","endTime":"2021-03-25T17:24:03.313766144Z","durationInNanos":440059392,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.http@url":"http://localhost:8084/checkout","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"ca2bbe96720126cd"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"ca2bbe96720126cd","traceState":"","parentSpanId":"fd6830be1f9eb762","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:24:03.155003840Z","endTime":"2021-03-25T17:24:03.158155250Z","durationInNanos":3151410,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-6","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56730,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"2f9dedfb4a0ce070"}}
+{"traceId":"7c2bfe48d13025cbe3de0d1e679110b3","spanId":"2f9dedfb4a0ce070","traceState":"","parentSpanId":"544d4016f47447db","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:24:02.947977728Z","endTime":"2021-03-25T17:24:03.002557696Z","durationInNanos":54579968,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:24:03.338473728Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":465076992,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"332629e923ac50db"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"332629e923ac50db","traceState":"","parentSpanId":"","name":"client_checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:50.139097856Z","endTime":"2021-03-25T17:23:50.452619520Z","durationInNanos":313521664,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"890da55b4bf3f689"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"890da55b4bf3f689","traceState":"","parentSpanId":"6d13264d84ba303a","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:50.147685888Z","endTime":"2021-03-25T17:23:50.208268032Z","durationInNanos":60582144,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"4581bfcf161daadf"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"4581bfcf161daadf","traceState":"","parentSpanId":"6f3f0792cb8e496b","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:50.174119680Z","endTime":"2021-03-25T17:23:50.175104256Z","durationInNanos":984576,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': 2}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"6d13264d84ba303a"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"6d13264d84ba303a","traceState":"","parentSpanId":"de75ad62453ecad2","name":"update_inventory","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:50.147162880Z","endTime":"2021-03-25T17:23:50.376714496Z","durationInNanos":229551616,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"7f42156901df64b2"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"7f42156901df64b2","traceState":"","parentSpanId":"d5d6ed934d615c30","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:50.366125705Z","endTime":"2021-03-25T17:23:50.367776649Z","durationInNanos":1650944,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.thread@name":"http-nio-8087-exec-4","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"d62eadcb8d597bc8"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"d62eadcb8d597bc8","traceState":"","parentSpanId":"6d13264d84ba303a","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:50.363076352Z","endTime":"2021-03-25T17:23:50.370151936Z","durationInNanos":7075584,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"21189f9303855cfa"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"21189f9303855cfa","traceState":"","parentSpanId":"66ddc3bd5b8d66de","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:50.415933995Z","endTime":"2021-03-25T17:23:50.417755384Z","durationInNanos":1821389,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.thread@name":"http-nio-8087-exec-6","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"28e67bf8b11bb104"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"28e67bf8b11bb104","traceState":"","parentSpanId":"7fd52e0343db5fbb","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:50.410137856Z","endTime":"2021-03-25T17:23:50.420290048Z","durationInNanos":10152192,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"5bd5bd45f33b2b21"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"5bd5bd45f33b2b21","traceState":"","parentSpanId":"453806261422f6ca","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:50.242040576Z","endTime":"2021-03-25T17:23:50.243015680Z","durationInNanos":975104,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': 3}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"d5d6ed934d615c30"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"d5d6ed934d615c30","traceState":"","parentSpanId":"d62eadcb8d597bc8","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:50.365003562Z","endTime":"2021-03-25T17:23:50.367971850Z","durationInNanos":2968288,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-4","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":131,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56682,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"45f70d65167608fc"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"45f70d65167608fc","traceState":"","parentSpanId":"4327f98275af2884","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:50.327499008Z","endTime":"2021-03-25T17:23:50.328442112Z","durationInNanos":943104,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': 1}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"de75ad62453ecad2"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"de75ad62453ecad2","traceState":"","parentSpanId":"2e7c2bbadd552e62","name":"update_inventory","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:50.146197248Z","endTime":"2021-03-25T17:23:50.384520192Z","durationInNanos":238322944,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8082,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":45816,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_inventory","span.attributes.http@host":"localhost:8082","span.attributes.http@target":"/update_inventory","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"b543ad1e5818e7d1"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"b543ad1e5818e7d1","traceState":"","parentSpanId":"332629e923ac50db","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:50.139403520Z","endTime":"2021-03-25T17:23:50.446737664Z","durationInNanos":307334144,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.http@url":"http://localhost:8084/checkout","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"66ddc3bd5b8d66de"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"66ddc3bd5b8d66de","traceState":"","parentSpanId":"28e67bf8b11bb104","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:50.415003489Z","endTime":"2021-03-25T17:23:50.417955096Z","durationInNanos":2951607,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-6","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":133,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56684,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"2e7c2bbadd552e62"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"2e7c2bbadd552e62","traceState":"","parentSpanId":"7fd52e0343db5fbb","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:50.143588096Z","endTime":"2021-03-25T17:23:50.400794624Z","durationInNanos":257206528,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.http@url":"http://localhost:8082/update_inventory","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"528b94722fcafb8b"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"528b94722fcafb8b","traceState":"","parentSpanId":"6d13264d84ba303a","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:50.214470400Z","endTime":"2021-03-25T17:23:50.290921216Z","durationInNanos":76450816,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"453806261422f6ca"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"453806261422f6ca","traceState":"","parentSpanId":"a82da103bfa98cda","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:50.219420416Z","endTime":"2021-03-25T17:23:50.262448640Z","durationInNanos":43028224,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"4327f98275af2884"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"4327f98275af2884","traceState":"","parentSpanId":"20fb32e5166673b1","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:50.303989760Z","endTime":"2021-03-25T17:23:50.339736832Z","durationInNanos":35747072,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"a82da103bfa98cda"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"a82da103bfa98cda","traceState":"","parentSpanId":"528b94722fcafb8b","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:50.218430976Z","endTime":"2021-03-25T17:23:50.273203200Z","durationInNanos":54772224,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55956,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"dadacac33c3d835d"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"dadacac33c3d835d","traceState":"","parentSpanId":"b543ad1e5818e7d1","name":"payment","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:50.142040576Z","endTime":"2021-03-25T17:23:50.434752512Z","durationInNanos":292711936,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8084,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":50556,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/checkout","span.attributes.http@host":"localhost:8084","span.attributes.http@target":"/checkout","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"20fb32e5166673b1"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"20fb32e5166673b1","traceState":"","parentSpanId":"7a5e15e7fcb71763","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:50.302988288Z","endTime":"2021-03-25T17:23:50.345838848Z","durationInNanos":42850560,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55960,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"7fd52e0343db5fbb"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"7fd52e0343db5fbb","traceState":"","parentSpanId":"dadacac33c3d835d","name":"checkout","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:50.143095296Z","endTime":"2021-03-25T17:23:50.428341504Z","durationInNanos":285246208,"serviceName":"payment","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140260160921552","resource.attributes.service@name":"payment","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"69969783a0394304"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"69969783a0394304","traceState":"","parentSpanId":"890da55b4bf3f689","name":"updateItem","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:50.150543360Z","endTime":"2021-03-25T17:23:50.194194432Z","durationInNanos":43651072,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55952,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/update_item","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/update_item","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"7a5e15e7fcb71763"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"7a5e15e7fcb71763","traceState":"","parentSpanId":"6d13264d84ba303a","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:50.300090112Z","endTime":"2021-03-25T17:23:50.356072192Z","durationInNanos":55982080,"serviceName":"inventory","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"span.attributes.http@url":"http://localhost:8083/update_item","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140016202633168","resource.attributes.service@name":"inventory","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"6f3f0792cb8e496b"}}
+{"traceId":"ce6b3fddebc63e2a83f8a08fd51afae7","spanId":"6f3f0792cb8e496b","traceState":"","parentSpanId":"69969783a0394304","name":"update_item","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:50.151575808Z","endTime":"2021-03-25T17:23:50.187208448Z","durationInNanos":35632640,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_checkout","traceGroupFields.endTime":"2021-03-25T17:23:50.452619520Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":313521664,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"bb5241efad532b9d"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"bb5241efad532b9d","traceState":"","parentSpanId":"","name":"client_cancel_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:49.098619648Z","endTime":"2021-03-25T17:23:49.249286144Z","durationInNanos":150666496,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"7a9aabaff1af2284"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"7a9aabaff1af2284","traceState":"","parentSpanId":"bb5241efad532b9d","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:49.098923264Z","endTime":"2021-03-25T17:23:49.242379520Z","durationInNanos":143456256,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.http@url":"http://localhost:8088/clear_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"7a20276ff8152236"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"7a20276ff8152236","traceState":"","parentSpanId":"212b18ede97b3928","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:49.128396800Z","endTime":"2021-03-25T17:23:49.129145600Z","durationInNanos":748800,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"SELECT ItemId, TotalQty FROM User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"f37a027ee2c9d0a5"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"f37a027ee2c9d0a5","traceState":"","parentSpanId":"5a4ab4679e300a34","name":"clear_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:49.102409728Z","endTime":"2021-03-25T17:23:49.227282944Z","durationInNanos":124873216,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"403d9c331fda4328"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"403d9c331fda4328","traceState":"","parentSpanId":"1e774d246aa3c5c4","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:49.218892812Z","endTime":"2021-03-25T17:23:49.220353279Z","durationInNanos":1460467,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.thread@name":"http-nio-8087-exec-2","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"2be6a1c0faa8107a"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"2be6a1c0faa8107a","traceState":"","parentSpanId":"212b18ede97b3928","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:49.138344448Z","endTime":"2021-03-25T17:23:49.139050496Z","durationInNanos":706048,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'apple', 'Qty': 1}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO Inventory_Items (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"21437513f7184a58"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"21437513f7184a58","traceState":"","parentSpanId":"212b18ede97b3928","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:49.152794368Z","endTime":"2021-03-25T17:23:49.154668800Z","durationInNanos":1874432,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'orange', 'Qty': 3}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO Inventory_Items (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"012e590c33c1c603"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"012e590c33c1c603","traceState":"","parentSpanId":"212b18ede97b3928","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:49.162752Z","endTime":"2021-03-25T17:23:49.184285184Z","durationInNanos":21533184,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"TRUNCATE TABLE User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"120b3c8a3f7590ce"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"120b3c8a3f7590ce","traceState":"","parentSpanId":"f37a027ee2c9d0a5","name":"HTTP PUT","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:49.102667776Z","endTime":"2021-03-25T17:23:49.209395200Z","durationInNanos":106727424,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.http@url":"http://localhost:8083/cart_empty","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"PUT","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"212b18ede97b3928"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"212b18ede97b3928","traceState":"","parentSpanId":"378d0aa862c77ae8","name":"cart_empty","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:49.106436352Z","endTime":"2021-03-25T17:23:49.192958976Z","durationInNanos":86522624,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"2c1783219ee685be"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"2c1783219ee685be","traceState":"","parentSpanId":"212b18ede97b3928","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:49.144996096Z","endTime":"2021-03-25T17:23:49.146592768Z","durationInNanos":1596672,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.db@statement@parameters":"{'ItemId': 'banana', 'Qty': 2}","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"INSERT INTO Inventory_Items (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"378d0aa862c77ae8"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"378d0aa862c77ae8","traceState":"","parentSpanId":"120b3c8a3f7590ce","name":"cartEmpty","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:49.105362944Z","endTime":"2021-03-25T17:23:49.199950592Z","durationInNanos":94587648,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"PUT","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55942,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/cart_empty","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/cart_empty","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"6ffca6d4aff16069"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"6ffca6d4aff16069","traceState":"","parentSpanId":"f37a027ee2c9d0a5","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:49.215243008Z","endTime":"2021-03-25T17:23:49.221854208Z","durationInNanos":6611200,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"1e774d246aa3c5c4"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"1e774d246aa3c5c4","traceState":"","parentSpanId":"6ffca6d4aff16069","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:49.218005395Z","endTime":"2021-03-25T17:23:49.220497993Z","durationInNanos":2492598,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-2","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":129,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56664,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"5a4ab4679e300a34"}}
+{"traceId":"cb65f65f84de2ead8c9b85304d654983","spanId":"5a4ab4679e300a34","traceState":"","parentSpanId":"7a9aabaff1af2284","name":"clear_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:49.101421568Z","endTime":"2021-03-25T17:23:49.232189440Z","durationInNanos":130767872,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_cancel_order","traceGroupFields.endTime":"2021-03-25T17:23:49.249286144Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":150666496,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56926,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/clear_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/clear_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"542385797ac7122c"}}
+{"traceId":"690d3c7af1a78cf89c43ef4b07c05b43","spanId":"542385797ac7122c","traceState":"","parentSpanId":"","name":"client_pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:59.321163264Z","endTime":"2021-03-25T17:23:59.497588224Z","durationInNanos":176424960,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:59.497588224Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":176424960,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"f9d9427c810291d8"}}
+{"traceId":"690d3c7af1a78cf89c43ef4b07c05b43","spanId":"f9d9427c810291d8","traceState":"","parentSpanId":"7df5609a6d104736","name":"pay_order","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:59.323977728Z","endTime":"2021-03-25T17:23:59.480053760Z","durationInNanos":156076032,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:59.497588224Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":176424960,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56954,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/pay_order","span.attributes.http@host":"localhost:8088","span.attributes.http@target":"/pay_order","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"c8fff65b158a58b0"}}
+{"traceId":"690d3c7af1a78cf89c43ef4b07c05b43","spanId":"c8fff65b158a58b0","traceState":"","parentSpanId":"303b76b989099bb5","name":"cartSold","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:59.327906816Z","endTime":"2021-03-25T17:23:59.409421568Z","durationInNanos":81514752,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:59.497588224Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":176424960,"span.attributes.net@peer@ip":"127.0.0.1","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8083,"span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"DELETE","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":55970,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@route":"/cart_sold","span.attributes.http@host":"localhost:8083","span.attributes.http@target":"/cart_sold","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":200}
+{"index":{"_id":"303b76b989099bb5"}}
+{"traceId":"690d3c7af1a78cf89c43ef4b07c05b43","spanId":"303b76b989099bb5","traceState":"","parentSpanId":"e2ab54f8e8a03c99","name":"HTTP DELETE","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:59.325160960Z","endTime":"2021-03-25T17:23:59.430193920Z","durationInNanos":105032960,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:59.497588224Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":176424960,"span.attributes.http@url":"http://localhost:8083/cart_sold","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"DELETE","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
diff --git a/.cypress/utils/otel-v1-apm-span-000002.json b/.cypress/utils/otel-v1-apm-span-000002.json
new file mode 100644
index 0000000000..9166e0e682
--- /dev/null
+++ b/.cypress/utils/otel-v1-apm-span-000002.json
@@ -0,0 +1,968 @@
+{"index":{"_id":"ba677184b5efee9c"}}
+{"traceId":"690d3c7af1a78cf89c43ef4b07c05b43","spanId":"ba677184b5efee9c","traceState":"","parentSpanId":"05d70136fe1f5159","name":"/logs","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:23:59.461002874Z","endTime":"2021-03-25T17:23:59.463725749Z","durationInNanos":2722875,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:59.497588224Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":176424960,"span.attributes.net@peer@ip":"127.0.0.1","span.attributes.http@url":"http://localhost:8087/logs","span.attributes.thread@name":"http-nio-8087-exec-8","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.servlet","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.25.1","span.attributes.net@peer@port":56692,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@auto@version":"0.10.1","span.attributes.http@flavor":"HTTP/1.1","span.attributes.http@status_code":200,"span.attributes.http@client_ip":"127.0.0.1"}
+{"index":{"_id":"3ed514d3a35fcf2f"}}
+{"traceId":"690d3c7af1a78cf89c43ef4b07c05b43","spanId":"3ed514d3a35fcf2f","traceState":"","parentSpanId":"c8fff65b158a58b0","name":"cart_sold","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:59.328946176Z","endTime":"2021-03-25T17:23:59.396863488Z","durationInNanos":67917312,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:59.497588224Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":176424960,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"a1464485edf9588e"}}
+{"traceId":"690d3c7af1a78cf89c43ef4b07c05b43","spanId":"a1464485edf9588e","traceState":"","parentSpanId":"3ed514d3a35fcf2f","name":"mysql.APM","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:59.351120384Z","endTime":"2021-03-25T17:23:59.381280256Z","durationInNanos":30159872,"serviceName":"database","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:59.497588224Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":176424960,"span.attributes.db@user":"root","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.net@peer@name":"localhost","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140307275923408","resource.attributes.service@name":"database","span.attributes.component":"mysql","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.mysql","span.attributes.db@type":"sql","span.attributes.net@peer@port":3306,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.db@instance":"APM","span.attributes.db@statement":"TRUNCATE TABLE User_Carts","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal"}
+{"index":{"_id":"05d70136fe1f5159"}}
+{"traceId":"690d3c7af1a78cf89c43ef4b07c05b43","spanId":"05d70136fe1f5159","traceState":"","parentSpanId":"e2ab54f8e8a03c99","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:59.447067904Z","endTime":"2021-03-25T17:23:59.466000896Z","durationInNanos":18932992,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:59.497588224Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":176424960,"span.attributes.http@url":"http://localhost:8087/logs","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"e2ab54f8e8a03c99"}}
+{"traceId":"690d3c7af1a78cf89c43ef4b07c05b43","spanId":"e2ab54f8e8a03c99","traceState":"","parentSpanId":"f9d9427c810291d8","name":"pay_order","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:59.324906496Z","endTime":"2021-03-25T17:23:59.473705472Z","durationInNanos":148798976,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:59.497588224Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":176424960,"resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.telemetry@sdk@language":"python","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","status.code":0,"instrumentationLibrary.name":"__main__"}
+{"index":{"_id":"7df5609a6d104736"}}
+{"traceId":"690d3c7af1a78cf89c43ef4b07c05b43","spanId":"7df5609a6d104736","traceState":"","parentSpanId":"542385797ac7122c","name":"HTTP POST","kind":"SPAN_KIND_CLIENT","startTime":"2021-03-25T17:23:59.321473280Z","endTime":"2021-03-25T17:23:59.490911488Z","durationInNanos":169438208,"serviceName":"frontend-client","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:59.497588224Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":176424960,"span.attributes.http@url":"http://localhost:8088/pay_order","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.http@status_text":"OK","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@name":"frontend-client","span.attributes.component":"http","status.code":0,"instrumentationLibrary.name":"opentelemetry.instrumentation.requests","span.attributes.http@method":"POST","resource.attributes.telemetry@sdk@name":"opentelemetry","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@status_code":200}
+{"index":{"_id":"05ef9498724dc42f"}}
+{"traceId":"690d3c7af1a78cf89c43ef4b07c05b43","spanId":"05ef9498724dc42f","traceState":"","parentSpanId":"ba677184b5efee9c","name":"LoggingController.save","kind":"SPAN_KIND_INTERNAL","startTime":"2021-03-25T17:23:59.461838595Z","endTime":"2021-03-25T17:23:59.463482824Z","durationInNanos":1644229,"serviceName":"analytics-service","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"client_pay_order","traceGroupFields.endTime":"2021-03-25T17:23:59.497588224Z","traceGroupFields.statusCode":0,"traceGroupFields.durationInNanos":176424960,"span.attributes.thread@name":"http-nio-8087-exec-8","resource.attributes.telemetry@sdk@name":"opentelemetry","instrumentationLibrary.version":"0.10.1","resource.attributes.telemetry@sdk@language":"java","span.attributes.thread@id":135,"resource.attributes.telemetry@auto@version":"0.10.1","resource.attributes.telemetry@sdk@version":"0.10.0","resource.attributes.service@name":"analytics-service","status.code":0,"instrumentationLibrary.name":"io.opentelemetry.auto.spring-webmvc"}
+{"index":{"_id":"eea507e2c1767a48"}}
+{"traceId":"24112fdc5dfb6886638e64458220b1c8","spanId":"eea507e2c1767a48","traceState":"","parentSpanId":"","name":"HTTP POST","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:42:17.381757696Z","endTime":"2021-03-25T17:42:17.383773440Z","durationInNanos":2015744,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"HTTP POST","traceGroupFields.endTime":"2021-03-25T17:42:17.383773440Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":2015744,"span.attributes.net@peer@ip":"165.232.135.114","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"NOT FOUND","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.6.0 CPython/2.7.5 Linux/3.10.0-1160.15.2.el7.x86_64","span.attributes.net@peer@port":37610,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@host":"54.202.237.120:8088","span.attributes.http@target":"/ws/v1/cluster/apps/new-application","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":404}
+{"index":{"_id":"a32571a7f379563e"}}
+{"traceId":"f9389809a15b165300bf99ca10c1d094","spanId":"a32571a7f379563e","traceState":"","parentSpanId":"","name":"HTTP GET","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:42:42.526520320Z","endTime":"2021-03-25T17:42:42.527678720Z","durationInNanos":1158400,"serviceName":"recommendation","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"HTTP GET","traceGroupFields.endTime":"2021-03-25T17:42:42.527678720Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":1158400,"span.attributes.net@peer@ip":"139.162.75.102","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8086,"span.attributes.http@status_text":"NOT FOUND","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"140465266593744","resource.attributes.service@name":"recommendation","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"GET","span.attributes.http@user_agent":"HTTP Banner Detection (https://security.ipip.net)","span.attributes.net@peer@port":43096,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@host":"54.202.237.120:8086","span.attributes.http@target":"/","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":404}
+{"index":{"_id":"fc11194d7d60a403"}}
+{"traceId":"5c8f22e7dce504a5b7610590d5426b16","spanId":"fc11194d7d60a403","traceState":"","parentSpanId":"","name":"HTTP POST","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:25:41.732983296Z","endTime":"2021-03-25T17:25:41.734188544Z","durationInNanos":1205248,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"HTTP POST","traceGroupFields.endTime":"2021-03-25T17:25:41.734188544Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":1205248,"span.attributes.net@peer@ip":"128.199.87.139","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"NOT FOUND","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.12.4","span.attributes.net@peer@port":59096,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@host":"54.202.237.120:8088","span.attributes.http@target":"/ws/v1/cluster/apps/new-application","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":404}
+{"index":{"_id":"8f0e5fd10849cc70"}}
+{"traceId":"f151842ced0cd956ec005da199424336","spanId":"8f0e5fd10849cc70","traceState":"","parentSpanId":"","name":"HTTP POST","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:48:05.517435904Z","endTime":"2021-03-25T17:48:05.518697728Z","durationInNanos":1261824,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"HTTP POST","traceGroupFields.endTime":"2021-03-25T17:48:05.518697728Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":1261824,"span.attributes.net@peer@ip":"165.232.135.114","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"NOT FOUND","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.6.0 CPython/2.7.5 Linux/3.10.0-1160.15.2.el7.x86_64","span.attributes.net@peer@port":59430,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@host":"54.202.237.120:8088","span.attributes.http@target":"/ws/v1/cluster/apps/new-application","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":404}
+{"index":{"_id":"244bc4ca978dd618"}}
+{"traceId":"be0a3dceda2ecf601fd2e476fef3ee07","spanId":"244bc4ca978dd618","traceState":"","parentSpanId":"","name":"HTTP POST","kind":"SPAN_KIND_SERVER","startTime":"2021-03-25T17:55:12.854892800Z","endTime":"2021-03-25T17:55:12.856072192Z","durationInNanos":1179392,"serviceName":"order","events":[],"links":[],"droppedAttributesCount":0,"droppedEventsCount":0,"droppedLinksCount":0,"traceGroup":"HTTP POST","traceGroupFields.endTime":"2021-03-25T17:55:12.856072192Z","traceGroupFields.statusCode":2,"traceGroupFields.durationInNanos":1179392,"span.attributes.net@peer@ip":"165.232.135.114","instrumentationLibrary.version":"0.14b0","resource.attributes.telemetry@sdk@language":"python","span.attributes.host@port":8088,"span.attributes.http@status_text":"NOT FOUND","resource.attributes.telemetry@sdk@version":"0.14b0","resource.attributes.service@instance@id":"139858677314952","resource.attributes.service@name":"order","span.attributes.component":"http","status.code":2,"instrumentationLibrary.name":"opentelemetry.instrumentation.flask","span.attributes.http@method":"POST","span.attributes.http@user_agent":"python-requests/2.6.0 CPython/2.7.5 Linux/3.10.0-1160.15.2.el7.x86_64","span.attributes.net@peer@port":35686,"resource.attributes.telemetry@sdk@name":"opentelemetry","span.attributes.http@server_name":"0.0.0.0","span.attributes.http@host":"54.202.237.120:8088","span.attributes.http@target":"/ws/v1/cluster/apps/new-application","span.attributes.http@scheme":"http","resource.attributes.host@hostname":"ip-172-31-10-8.us-west-2.compute.internal","span.attributes.http@flavor":"1.1","span.attributes.http@status_code":404}
+{ "index":{"_id": "fe945197d943bda9"}}
+{ "traceId": "552aa3363bf275a248b131406edf735d", "spanId": "fe945197d943bda9", "traceState": "", "parentSpanId": "2bdbeb0df10ab869", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:42.022309888Z", "endTime": "2021-04-20T20:33:42.047018752Z", "durationInNanos": 24708864, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "2bdbeb0df10ab869"}}
+{ "traceId": "552aa3363bf275a248b131406edf735d", "spanId": "2bdbeb0df10ab869", "traceState": "", "parentSpanId": "7a5994c2d61252d8", "name": "cart_sold", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:42.002375424Z", "endTime": "2021-04-20T20:33:42.050758400Z", "durationInNanos": 48382976, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "bae5c2ac73588d38"}}
+{ "traceId": "552aa3363bf275a248b131406edf735d", "spanId": "bae5c2ac73588d38", "traceState": "", "parentSpanId": "d6668b8cd17b28aa", "name": "pay_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:41.999037184Z", "endTime": "2021-04-20T20:33:42.070543360Z", "durationInNanos": 71506176, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "d6668b8cd17b28aa"}}
+{ "traceId": "552aa3363bf275a248b131406edf735d", "spanId": "d6668b8cd17b28aa", "traceState": "", "parentSpanId": "2786ea5cfba1d51c", "name": "pay_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:41.998258944Z", "endTime": "2021-04-20T20:33:42.073518592Z", "durationInNanos": 75259648, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60962, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/pay_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/pay_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "de34ef4183a4705b"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "de34ef4183a4705b", "traceState": "", "parentSpanId": "1e0ea651a120db7b", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:42.502849536Z", "endTime": "2021-04-20T20:33:42.529717248Z", "durationInNanos": 26867712, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "cdf9197db50c18a4"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "cdf9197db50c18a4", "traceState": "", "parentSpanId": "baa1e8371ec989bd", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:42.543471872Z", "endTime": "2021-04-20T20:33:42.573529344Z", "durationInNanos": 30057472, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58602, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "baa1e8371ec989bd"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "baa1e8371ec989bd", "traceState": "", "parentSpanId": "0791aa225a461844", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:42.541210624Z", "endTime": "2021-04-20T20:33:42.578594816Z", "durationInNanos": 37384192, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "a545017537d582f9"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "a545017537d582f9", "traceState": "", "parentSpanId": "48ab22a6aa9ead3d", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:42.583665664Z", "endTime": "2021-04-20T20:33:42.615355392Z", "durationInNanos": 31689728, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58606, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "868f60191f3524c9"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "868f60191f3524c9", "traceState": "", "parentSpanId": "007459ff1ddd5dfb", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:42.496294144Z", "endTime": "2021-04-20T20:33:42.638115584Z", "durationInNanos": 141821440, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8082/update_inventory", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "5e7bc4f9aae01a8f"}}
+{ "traceId": "c5eabf09201ab4df116e1881d0756035", "spanId": "5e7bc4f9aae01a8f", "traceState": "", "parentSpanId": "", "name": "client_cancel_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:43.385450240Z", "endTime": "2021-04-20T20:33:43.469037824Z", "durationInNanos": 83587584, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_cancel_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "5d8912365e6688f3"}}
+{ "traceId": "1ca5c1d52ca730f16872553cde6933c0", "spanId": "5d8912365e6688f3", "traceState": "", "parentSpanId": "e272f67b8738c361", "name": "cart_empty", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:43.826181376Z", "endTime": "2021-04-20T20:33:43.875000320Z", "durationInNanos": 48818944, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "7e35eb6c56afcde0"}}
+{ "traceId": "1ca5c1d52ca730f16872553cde6933c0", "spanId": "7e35eb6c56afcde0", "traceState": "", "parentSpanId": "5b366e385260a8f1", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:43.822093312Z", "endTime": "2021-04-20T20:33:43.896168448Z", "durationInNanos": 74075136, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32772, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "5b366e385260a8f1"}}
+{ "traceId": "1ca5c1d52ca730f16872553cde6933c0", "spanId": "5b366e385260a8f1", "traceState": "", "parentSpanId": "c785f8a4fa3c337f", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:43.819960576Z", "endTime": "2021-04-20T20:33:43.900840704Z", "durationInNanos": 80880128, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/clear_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c785f8a4fa3c337f"}}
+{ "traceId": "1ca5c1d52ca730f16872553cde6933c0", "spanId": "c785f8a4fa3c337f", "traceState": "", "parentSpanId": "", "name": "client_cancel_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:43.819711488Z", "endTime": "2021-04-20T20:33:43.903628288Z", "durationInNanos": 83916800, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_cancel_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "959d996c94b64416"}}
+{ "traceId": "b23c2f42f054fd2e3bd6602318e609ed", "spanId": "959d996c94b64416", "traceState": "", "parentSpanId": "4ed24722154a0621", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:39.000507533Z", "endTime": "2021-04-20T20:33:39.001814067Z", "durationInNanos": 1306534, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-4", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "b04dd1440b46ea4a"}}
+{ "traceId": "56280de557e9fa891bb6289d2fd53c8d", "spanId": "b04dd1440b46ea4a", "traceState": "", "parentSpanId": "1fbcd1691508fa92", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:40.859492193Z", "endTime": "2021-04-20T20:33:40.860705473Z", "durationInNanos": 1213280, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-3", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 133, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "4ed24722154a0621"}}
+{ "traceId": "b23c2f42f054fd2e3bd6602318e609ed", "spanId": "4ed24722154a0621", "traceState": "", "parentSpanId": "62acd7c17a0ba6b5", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:39.000001917Z", "endTime": "2021-04-20T20:33:39.001944606Z", "durationInNanos": 1942689, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-4", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57758, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "6dcf6a50115bf9bf"}}
+{ "traceId": "10b1ec1196741c85609a43ce435cdece", "spanId": "6dcf6a50115bf9bf", "traceState": "", "parentSpanId": "7052b8e18f95d355", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:40.293001852Z", "endTime": "2021-04-20T20:33:40.294769849Z", "durationInNanos": 1767997, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-10", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 140, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57788, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "a981fd033e3a7491"}}
+{ "traceId": "259a8226fae090c7dff75784fc8c7b17", "spanId": "a981fd033e3a7491", "traceState": "", "parentSpanId": "3d3423c981805776", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:41.248002296Z", "endTime": "2021-04-20T20:33:41.250091967Z", "durationInNanos": 2089671, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-4", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57808, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "c2bf96e64de1f749"}}
+{ "traceId": "552aa3363bf275a248b131406edf735d", "spanId": "c2bf96e64de1f749", "traceState": "", "parentSpanId": "82f2995c402620bf", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:42.064002408Z", "endTime": "2021-04-20T20:33:42.066510378Z", "durationInNanos": 2507970, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-8", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57830, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "7d14b353b41504e2"}}
+{ "traceId": "1ca5c1d52ca730f16872553cde6933c0", "spanId": "7d14b353b41504e2", "traceState": "", "parentSpanId": "66305d54c87ada37", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:43.888001836Z", "endTime": "2021-04-20T20:33:43.889846781Z", "durationInNanos": 1844945, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-6", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57872, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "638057deacc19370"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "638057deacc19370", "traceState": "", "parentSpanId": "570073e77e68be9d", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.210460160Z", "endTime": "2021-04-20T20:33:44.211786496Z", "durationInNanos": 1326336, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': '1'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "72fd9aa427e26550"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "72fd9aa427e26550", "traceState": "", "parentSpanId": "63b924688fd8e338", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:44.184596992Z", "endTime": "2021-04-20T20:33:44.221891840Z", "durationInNanos": 37294848, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58638, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "74a72003d10b4891"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "74a72003d10b4891", "traceState": "", "parentSpanId": "9d74d751ce8f5632", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.298237184Z", "endTime": "2021-04-20T20:33:44.299052800Z", "durationInNanos": 815616, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': '2'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "9d74d751ce8f5632"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "9d74d751ce8f5632", "traceState": "", "parentSpanId": "2311bcf70d68331c", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:44.278095616Z", "endTime": "2021-04-20T20:33:44.309211392Z", "durationInNanos": 31115776, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "d45da7dee8c886ed"}}
+{ "traceId": "c0ef65e0d991727dbe26a071fd10e407", "spanId": "d45da7dee8c886ed", "traceState": "", "parentSpanId": "8fb23e8fa1ec36c4", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.578994944Z", "endTime": "2021-04-20T20:33:44.579650560Z", "durationInNanos": 655616, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT * FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "10c91a64a809f0f9"}}
+{ "traceId": "c0ef65e0d991727dbe26a071fd10e407", "spanId": "10c91a64a809f0f9", "traceState": "", "parentSpanId": "", "name": "client_delivery_status", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:44.552633344Z", "endTime": "2021-04-20T20:33:44.611744256Z", "durationInNanos": 59110912, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_delivery_status", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "7359981596903c3f"}}
+{ "traceId": "70a3f615a998b76cd973d87710572913", "spanId": "7359981596903c3f", "traceState": "", "parentSpanId": "61aa3d8d2d402633", "name": "cart_sold", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:44.946950400Z", "endTime": "2021-04-20T20:33:44.993092352Z", "durationInNanos": 46141952, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "61aa3d8d2d402633"}}
+{ "traceId": "70a3f615a998b76cd973d87710572913", "spanId": "61aa3d8d2d402633", "traceState": "", "parentSpanId": "0fcb489ad5418516", "name": "cartSold", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:44.946038528Z", "endTime": "2021-04-20T20:33:44.996396288Z", "durationInNanos": 50357760, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58668, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/cart_sold", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/cart_sold", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "6f35a199b046be10"}}
+{ "traceId": "65e793c50b861f00c1534090639dd7c3", "spanId": "6f35a199b046be10", "traceState": "", "parentSpanId": "83e66a83f1a293d1", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:45.283089152Z", "endTime": "2021-04-20T20:33:45.284170496Z", "durationInNanos": 1081344, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT * FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "5205b0912292faea"}}
+{ "traceId": "65e793c50b861f00c1534090639dd7c3", "spanId": "5205b0912292faea", "traceState": "", "parentSpanId": "61e11870abc59f27", "name": "getCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:45.262661120Z", "endTime": "2021-04-20T20:33:45.291168768Z", "durationInNanos": 28507648, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58678, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/get_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "3cf94093fb7bea7c"}}
+{ "traceId": "65e793c50b861f00c1534090639dd7c3", "spanId": "3cf94093fb7bea7c", "traceState": "", "parentSpanId": "075721f8c8fe8187", "name": "get_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:45.260254208Z", "endTime": "2021-04-20T20:33:45.306146816Z", "durationInNanos": 45892608, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "075721f8c8fe8187"}}
+{ "traceId": "65e793c50b861f00c1534090639dd7c3", "spanId": "075721f8c8fe8187", "traceState": "", "parentSpanId": "6164378b120c9a33", "name": "get_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:45.259456Z", "endTime": "2021-04-20T20:33:45.308376320Z", "durationInNanos": 48920320, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32822, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/get_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "fe4076542b41d40b"}}
+{ "traceId": "02feb3a4f611abd81f2a53244d1278ae", "spanId": "fe4076542b41d40b", "traceState": "", "parentSpanId": "68d63100ba9ee351", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:45.613371648Z", "endTime": "2021-04-20T20:33:45.614105088Z", "durationInNanos": 733440, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': '1'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "4cc7f89e7a456e50"}}
+{ "traceId": "02feb3a4f611abd81f2a53244d1278ae", "spanId": "4cc7f89e7a456e50", "traceState": "", "parentSpanId": "8cf5c6a43ee7642e", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:45.672583936Z", "endTime": "2021-04-20T20:33:45.701916160Z", "durationInNanos": 29332224, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58696, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "ded3687b9758bf59"}}
+{ "traceId": "02feb3a4f611abd81f2a53244d1278ae", "spanId": "ded3687b9758bf59", "traceState": "", "parentSpanId": "8ca1e3b61d66dac5", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:45.582414080Z", "endTime": "2021-04-20T20:33:45.724472064Z", "durationInNanos": 142057984, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/update_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "9a880188bcb44cda"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "9a880188bcb44cda", "traceState": "", "parentSpanId": "22b1d496a103d5d4", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.193865472Z", "endTime": "2021-04-20T20:33:46.233754624Z", "durationInNanos": 39889152, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "Not enough storage for itemId orange", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "211e3fa733083be7"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "211e3fa733083be7", "traceState": "", "parentSpanId": "6f7eafee7d68115c", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.259891200Z", "endTime": "2021-04-20T20:33:46.260595456Z", "durationInNanos": 704256, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': 1}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "203faf4d95696dc4"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "203faf4d95696dc4", "traceState": "", "parentSpanId": "01e2845682343300", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:46.239240960Z", "endTime": "2021-04-20T20:33:46.270526720Z", "durationInNanos": 31285760, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58726, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "30652f6f8b511470"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "30652f6f8b511470", "traceState": "", "parentSpanId": "6abbf17273b9d804", "name": "update_inventory", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:46.151000320Z", "endTime": "2021-04-20T20:33:46.280569856Z", "durationInNanos": 129569536, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8082, "span.attributes.http@status_text": "Update inventory response contains failed items.", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 48470, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_inventory", "span.attributes.http@host": "localhost:8082", "span.attributes.http@target": "/update_inventory", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "6abbf17273b9d804"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "6abbf17273b9d804", "traceState": "", "parentSpanId": "cadc045e30deb39c", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.148769024Z", "endTime": "2021-04-20T20:33:46.285116928Z", "durationInNanos": 136347904, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8082/update_inventory", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "Update inventory response contains failed items.", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "86582d579095a4b2"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "86582d579095a4b2", "traceState": "", "parentSpanId": "", "name": "client_checkout", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:46.145158144Z", "endTime": "2021-04-20T20:33:46.297544448Z", "durationInNanos": 152386304, "serviceName": "frontend-client", "events": [ { "time": "2021-04-20T20:33:46.297516032Z", "name": "exception", "attributes": { "exception@message": "", "exception@type": "AssertionError", "exception@stacktrace": """Traceback (most recent call last): File "/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py", line 804, in use_span yield span File "/app/client.py", line 179, in checkout assert checkoutAPIRequest.status_code == 200 AssertionError """ }, "droppedAttributesCount": 0 } ], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_checkout", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "status.message": "AssertionError: ", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 2, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "733fc257ce126bd9"}}
+{ "traceId": "ba5a69d5dfd1eaa4077451d452ba473b", "spanId": "733fc257ce126bd9", "traceState": "", "parentSpanId": "e270a32c23bb3d64", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.530245888Z", "endTime": "2021-04-20T20:33:46.552403200Z", "durationInNanos": 22157312, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "d3e652fe39797f07"}}
+{ "traceId": "ba5a69d5dfd1eaa4077451d452ba473b", "spanId": "d3e652fe39797f07", "traceState": "", "parentSpanId": "e35c1a3d860c70aa", "name": "HTTP PUT", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.501878016Z", "endTime": "2021-04-20T20:33:46.563703296Z", "durationInNanos": 61825280, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/cart_empty", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "PUT", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "93a311e112248f38"}}
+{ "traceId": "ba5a69d5dfd1eaa4077451d452ba473b", "spanId": "93a311e112248f38", "traceState": "", "parentSpanId": "7d9e1df2e1915cb1", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.498651904Z", "endTime": "2021-04-20T20:33:46.581459456Z", "durationInNanos": 82807552, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/clear_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "13738600ae869fe9"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "13738600ae869fe9", "traceState": "", "parentSpanId": "7c37927033d44c5c", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.905734912Z", "endTime": "2021-04-20T20:33:46.906381056Z", "durationInNanos": 646144, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': '2'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "7c37927033d44c5c"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "7c37927033d44c5c", "traceState": "", "parentSpanId": "704ecef0adc44ed2", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:46.885713920Z", "endTime": "2021-04-20T20:33:46.910141696Z", "durationInNanos": 24427776, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "4bac6e5bfd5892b4"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "4bac6e5bfd5892b4", "traceState": "", "parentSpanId": "51c0b6f4525f8ce7", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.921752064Z", "endTime": "2021-04-20T20:33:46.926354688Z", "durationInNanos": 4602624, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "ceb7f50ca3f6e4d8"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "ceb7f50ca3f6e4d8", "traceState": "", "parentSpanId": "5f0f95a6e744be7f", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:47.191190528Z", "endTime": "2021-04-20T20:33:47.221020672Z", "durationInNanos": 29830144, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "Not enough storage for itemId banana", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58764, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "5f0f95a6e744be7f"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "5f0f95a6e744be7f", "traceState": "", "parentSpanId": "3e1ca23a1316a089", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:47.188976640Z", "endTime": "2021-04-20T20:33:47.225834496Z", "durationInNanos": 36857856, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "Not enough storage for itemId banana", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "c321930cea7a01b8"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "c321930cea7a01b8", "traceState": "", "parentSpanId": "45b57a8187c98ac7", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:47.285538560Z", "endTime": "2021-04-20T20:33:47.310507008Z", "durationInNanos": 24968448, "serviceName": "database", "events": [ { "time": "2021-04-20T20:33:47.310474496Z", "name": "exception", "attributes": { "exception@message": "", "exception@type": "InvalidItemUpdate", "exception@stacktrace": """Traceback (most recent call last): File "/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py", line 804, in use_span yield span File "databaseService.py", line 162, in updateItem raise InvalidItemUpdate("Not enough storage for itemId {}".format(data[ "ItemId" ])) InvalidItemUpdate """ }, "droppedAttributesCount": 0 } ], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "status.message": "InvalidItemUpdate: ", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 2, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "f707df9bafaf7974"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "f707df9bafaf7974", "traceState": "", "parentSpanId": "1d9787eae41fc84d", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:47.182018048Z", "endTime": "2021-04-20T20:33:47.339902976Z", "durationInNanos": 157884928, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8084/checkout", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "PARTIAL CONTENT", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "1d9787eae41fc84d"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "1d9787eae41fc84d", "traceState": "", "parentSpanId": "", "name": "client_checkout", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:47.181764352Z", "endTime": "2021-04-20T20:33:47.342982400Z", "durationInNanos": 161218048, "serviceName": "frontend-client", "events": [ { "time": "2021-04-20T20:33:47.342953472Z", "name": "exception", "attributes": { "exception@message": "", "exception@type": "AssertionError", "exception@stacktrace": """Traceback (most recent call last): File "/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py", line 804, in use_span yield span File "/app/client.py", line 179, in checkout assert checkoutAPIRequest.status_code == 200 AssertionError """ }, "droppedAttributesCount": 0 } ], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_checkout", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "status.message": "AssertionError: ", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 2, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "ad97f94c920dd63a"}}
+{ "traceId": "e48a85b3dc34426059aa1347ea4171a5", "spanId": "ad97f94c920dd63a", "traceState": "", "parentSpanId": "5b03c5aa49169de7", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:47.481642240Z", "endTime": "2021-04-20T20:33:47.486791168Z", "durationInNanos": 5148928, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "526236d61de39741"}}
+{ "traceId": "16f5176887289baa94c27f12604b5163", "spanId": "526236d61de39741", "traceState": "", "parentSpanId": "556b9dbb760a1f55", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:47.798135808Z", "endTime": "2021-04-20T20:33:47.798772480Z", "durationInNanos": 636672, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': '1'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "556b9dbb760a1f55"}}
+{ "traceId": "16f5176887289baa94c27f12604b5163", "spanId": "556b9dbb760a1f55", "traceState": "", "parentSpanId": "a0333ab0c0fb425e", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:47.778251008Z", "endTime": "2021-04-20T20:33:47.802673152Z", "durationInNanos": 24422144, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "48c5f132edd1dce1"}}
+{ "traceId": "16f5176887289baa94c27f12604b5163", "spanId": "48c5f132edd1dce1", "traceState": "", "parentSpanId": "8d13c5fb5cb910ab", "name": "update_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:47.773860864Z", "endTime": "2021-04-20T20:33:47.903245568Z", "durationInNanos": 129384704, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32932, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/update_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "f4fb15e340c39da3"}}
+{ "traceId": "2aa556a9a859155d7f578aacf259588f", "spanId": "f4fb15e340c39da3", "traceState": "", "parentSpanId": "36362df397ac500d", "name": "getCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:48.095176192Z", "endTime": "2021-04-20T20:33:48.123719936Z", "durationInNanos": 28543744, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58806, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/get_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "9a8427df12be8522"}}
+{ "traceId": "2aa556a9a859155d7f578aacf259588f", "spanId": "9a8427df12be8522", "traceState": "", "parentSpanId": "60b801fae48abf9b", "name": "get_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:48.091967488Z", "endTime": "2021-04-20T20:33:48.140747776Z", "durationInNanos": 48780288, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32950, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/get_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "a23201e2aa2bf778"}}
+{ "traceId": "ecfe3ff116a31b4c5ec107289b615ff3", "spanId": "a23201e2aa2bf778", "traceState": "", "parentSpanId": "e2ce196e32791fa8", "name": "cartSold", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:48.390765568Z", "endTime": "2021-04-20T20:33:48.446376192Z", "durationInNanos": 55610624, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58816, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/cart_sold", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/cart_sold", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e2ce196e32791fa8"}}
+{ "traceId": "ecfe3ff116a31b4c5ec107289b615ff3", "spanId": "e2ce196e32791fa8", "traceState": "", "parentSpanId": "33de151285a224b8", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:48.388591104Z", "endTime": "2021-04-20T20:33:48.451160064Z", "durationInNanos": 62568960, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/cart_sold", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "5d15d016d2efc520"}}
+{ "traceId": "a7e35e333fe32a4fa0448bf258fff8e9", "spanId": "5d15d016d2efc520", "traceState": "", "parentSpanId": "", "name": "client_delivery_status", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:48.724736768Z", "endTime": "2021-04-20T20:33:48.783604992Z", "durationInNanos": 58868224, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_delivery_status", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "1ceb1ee0c0c5a3d7"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "1ceb1ee0c0c5a3d7", "traceState": "", "parentSpanId": "81de5d2c6aa0859e", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:49.042982400Z", "endTime": "2021-04-20T20:33:49.067498752Z", "durationInNanos": 24516352, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "8397412a4368c536"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "8397412a4368c536", "traceState": "", "parentSpanId": "b3e2c3a351f4d833", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:44.322510254Z", "endTime": "2021-04-20T20:33:44.323607252Z", "durationInNanos": 1096998, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-8", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "1b7829585cbc0b01"}}
+{ "traceId": "c0ef65e0d991727dbe26a071fd10e407", "spanId": "1b7829585cbc0b01", "traceState": "", "parentSpanId": "552e8512fb52ccb5", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:44.596480225Z", "endTime": "2021-04-20T20:33:44.597655556Z", "durationInNanos": 1175331, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-10", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 140, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "5610211164d655f6"}}
+{ "traceId": "70a3f615a998b76cd973d87710572913", "spanId": "5610211164d655f6", "traceState": "", "parentSpanId": "d2025fa5bde68d4c", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:45.006493344Z", "endTime": "2021-04-20T20:33:45.007802848Z", "durationInNanos": 1309504, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-3", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 133, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "e8af87596517f6bf"}}
+{ "traceId": "e48a85b3dc34426059aa1347ea4171a5", "spanId": "e8af87596517f6bf", "traceState": "", "parentSpanId": "934a3522bd05ed13", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:47.484509396Z", "endTime": "2021-04-20T20:33:47.485676993Z", "durationInNanos": 1167597, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-4", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "d2025fa5bde68d4c"}}
+{ "traceId": "70a3f615a998b76cd973d87710572913", "spanId": "d2025fa5bde68d4c", "traceState": "", "parentSpanId": "5ce9b5237f2b2bbd", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:45.006001630Z", "endTime": "2021-04-20T20:33:45.007923360Z", "durationInNanos": 1921730, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-3", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 133, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57912, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "fec494ea1cd015e3"}}
+{ "traceId": "65e793c50b861f00c1534090639dd7c3", "spanId": "fec494ea1cd015e3", "traceState": "", "parentSpanId": "04f07ddda2ec832d", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:45.301002074Z", "endTime": "2021-04-20T20:33:45.302720699Z", "durationInNanos": 1718625, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-4", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57922, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "2ac8b4cda3c0f1f9"}}
+{ "traceId": "02feb3a4f611abd81f2a53244d1278ae", "spanId": "2ac8b4cda3c0f1f9", "traceState": "", "parentSpanId": "d7ae88514a0b9617", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:45.711001942Z", "endTime": "2021-04-20T20:33:45.712721718Z", "durationInNanos": 1719776, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-6", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57940, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "e4f2d38e4f128be7"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "e4f2d38e4f128be7", "traceState": "", "parentSpanId": "4bac6e5bfd5892b4", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:46.924001969Z", "endTime": "2021-04-20T20:33:46.925747176Z", "durationInNanos": 1745207, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-3", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 133, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57996, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "74dbc2be658b50d8"}}
+{ "traceId": "ecfe3ff116a31b4c5ec107289b615ff3", "spanId": "74dbc2be658b50d8", "traceState": "", "parentSpanId": "d3bce0f9acda8b4e", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:48.456001869Z", "endTime": "2021-04-20T20:33:48.457554150Z", "durationInNanos": 1552281, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-10", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 140, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58060, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "0c1e1c234af592e4"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "0c1e1c234af592e4", "traceState": "", "parentSpanId": "c6c238ba3d8255f4", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.039726592Z", "endTime": "2021-04-20T20:33:49.077204224Z", "durationInNanos": 37477632, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c6c238ba3d8255f4"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "c6c238ba3d8255f4", "traceState": "", "parentSpanId": "27d4fe07134ea308", "name": "update_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:49.000050176Z", "endTime": "2021-04-20T20:33:49.130614784Z", "durationInNanos": 130564608, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "fb628320c3bd92c1"}}
+{ "traceId": "da0666d73c1645d392576e56619d8c6e", "spanId": "fb628320c3bd92c1", "traceState": "", "parentSpanId": "c7c175f4366ce130", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.312768512Z", "endTime": "2021-04-20T20:33:49.313572864Z", "durationInNanos": 804352, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT ItemId, TotalQty FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "d03fde256c0d5e87"}}
+{ "traceId": "da0666d73c1645d392576e56619d8c6e", "spanId": "d03fde256c0d5e87", "traceState": "", "parentSpanId": "1e3aecf00776002e", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.354710528Z", "endTime": "2021-04-20T20:33:49.359258880Z", "durationInNanos": 4548352, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "8979ca2f03690516"}}
+{ "traceId": "da0666d73c1645d392576e56619d8c6e", "spanId": "8979ca2f03690516", "traceState": "", "parentSpanId": "f79bee55c88da9dd", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.282687488Z", "endTime": "2021-04-20T20:33:49.369189632Z", "durationInNanos": 86502144, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/clear_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "b5e9c2df83b5c950"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "b5e9c2df83b5c950", "traceState": "", "parentSpanId": "28991f1d3a174ce4", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.604470016Z", "endTime": "2021-04-20T20:33:49.642110208Z", "durationInNanos": 37640192, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "Not enough storage for itemId apple", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "4167f155e728b1bf"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "4167f155e728b1bf", "traceState": "", "parentSpanId": "bb41f245f32492e4", "name": "payment", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:49.519380224Z", "endTime": "2021-04-20T20:33:49.656816384Z", "durationInNanos": 137436160, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8084, "span.attributes.http@status_text": "PARTIAL CONTENT", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60116, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/checkout", "span.attributes.http@host": "localhost:8084", "span.attributes.http@target": "/checkout", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "5175f8f67d791920"}}
+{ "traceId": "7a3182e62d533fa1e0617f21f5681a37", "spanId": "5175f8f67d791920", "traceState": "", "parentSpanId": "cc39a5b2d98e4127", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.871913728Z", "endTime": "2021-04-20T20:33:49.873131008Z", "durationInNanos": 1217280, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT ItemId, TotalQty FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "ecc02e73350ce790"}}
+{ "traceId": "7a3182e62d533fa1e0617f21f5681a37", "spanId": "ecc02e73350ce790", "traceState": "", "parentSpanId": "de9f1128bf12b7b9", "name": "HTTP PUT", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.848557312Z", "endTime": "2021-04-20T20:33:49.907510272Z", "durationInNanos": 58952960, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/cart_empty", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "PUT", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "1861602b0fed74c0"}}
+{ "traceId": "7a3182e62d533fa1e0617f21f5681a37", "spanId": "1861602b0fed74c0", "traceState": "", "parentSpanId": "a9019c51b85c9ac6", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:49.847567872Z", "endTime": "2021-04-20T20:33:49.920374784Z", "durationInNanos": 72806912, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 33026, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "a9019c51b85c9ac6"}}
+{ "traceId": "7a3182e62d533fa1e0617f21f5681a37", "spanId": "a9019c51b85c9ac6", "traceState": "", "parentSpanId": "034ed8cfb8ba682a", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.845530624Z", "endTime": "2021-04-20T20:33:49.925377792Z", "durationInNanos": 79847168, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/clear_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "d6737261234573e3"}}
+{ "traceId": "247d610dcbd05da1c7902081b6bec1f6", "spanId": "d6737261234573e3", "traceState": "", "parentSpanId": "0fa03fca5ea8c051", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:50.143993600Z", "endTime": "2021-04-20T20:33:50.172754688Z", "durationInNanos": 28761088, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58892, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e684414d71481506"}}
+{ "traceId": "247d610dcbd05da1c7902081b6bec1f6", "spanId": "e684414d71481506", "traceState": "", "parentSpanId": "55b6879fed1f14b7", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:50.242910208Z", "endTime": "2021-04-20T20:33:50.243621632Z", "durationInNanos": 711424, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': '2'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "25d2d59e3e627ee7"}}
+{ "traceId": "eef4554373e188267b38928e2dabeab4", "spanId": "25d2d59e3e627ee7", "traceState": "", "parentSpanId": "6a539e36635daed1", "name": "get_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:50.481526016Z", "endTime": "2021-04-20T20:33:50.506380544Z", "durationInNanos": 24854528, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "13bed71d66dcc038"}}
+{ "traceId": "eef4554373e188267b38928e2dabeab4", "spanId": "13bed71d66dcc038", "traceState": "", "parentSpanId": "9232ae83ea33fee8", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:50.478371840Z", "endTime": "2021-04-20T20:33:50.514467584Z", "durationInNanos": 36095744, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/get_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c29268a1fd31d7d1"}}
+{ "traceId": "eef4554373e188267b38928e2dabeab4", "spanId": "c29268a1fd31d7d1", "traceState": "", "parentSpanId": "9232ae83ea33fee8", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:50.517328128Z", "endTime": "2021-04-20T20:33:50.522111488Z", "durationInNanos": 4783360, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "7ca71ea50061e17a"}}
+{ "traceId": "20eabd650f3a068d9f590786f56885e7", "spanId": "7ca71ea50061e17a", "traceState": "", "parentSpanId": "2e36371a9ffe2dc0", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:50.751403008Z", "endTime": "2021-04-20T20:33:50.752038912Z", "durationInNanos": 635904, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': '1'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "c7c7d4012d81b142"}}
+{ "traceId": "20eabd650f3a068d9f590786f56885e7", "spanId": "c7c7d4012d81b142", "traceState": "", "parentSpanId": "e7287e116f07049d", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:50.792653056Z", "endTime": "2021-04-20T20:33:50.793349632Z", "durationInNanos": 696576, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': '3'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "ecc0e3f8be5250dd"}}
+{ "traceId": "20eabd650f3a068d9f590786f56885e7", "spanId": "ecc0e3f8be5250dd", "traceState": "", "parentSpanId": "cebaa948cfa4cc19", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:50.811156480Z", "endTime": "2021-04-20T20:33:50.840189440Z", "durationInNanos": 29032960, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58930, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "534023ef492ea75d"}}
+{ "traceId": "c48260d3774d6c2d4ba77c9e813eadec", "spanId": "534023ef492ea75d", "traceState": "", "parentSpanId": "c5ab512bce3105ef", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:51.158956032Z", "endTime": "2021-04-20T20:33:51.159533568Z", "durationInNanos": 577536, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT * FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "e9893407bba95bf0"}}
+{ "traceId": "c48260d3774d6c2d4ba77c9e813eadec", "spanId": "e9893407bba95bf0", "traceState": "", "parentSpanId": "76dfb45c3ba7873f", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:51.136340992Z", "endTime": "2021-04-20T20:33:51.171475200Z", "durationInNanos": 35134208, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/get_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "608bd5e547e88e3e"}}
+{ "traceId": "56127a0a4f362cfb605a907e6c419c6e", "spanId": "608bd5e547e88e3e", "traceState": "", "parentSpanId": "2b7af871bd8cd43f", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:51.475266048Z", "endTime": "2021-04-20T20:33:51.480210688Z", "durationInNanos": 4944640, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "bd638d2bf13e4f41"}}
+{ "traceId": "56127a0a4f362cfb605a907e6c419c6e", "spanId": "bd638d2bf13e4f41", "traceState": "", "parentSpanId": "8defb053817ab655", "name": "pay_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:51.412930816Z", "endTime": "2021-04-20T20:33:51.485616640Z", "durationInNanos": 72685824, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 33094, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/pay_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/pay_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "dcab66f931f7fc5b"}}
+{ "traceId": "56127a0a4f362cfb605a907e6c419c6e", "spanId": "dcab66f931f7fc5b", "traceState": "", "parentSpanId": "", "name": "client_pay_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:51.410483968Z", "endTime": "2021-04-20T20:33:51.493332480Z", "durationInNanos": 82848512, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_pay_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "9b81a0201a53b84c"}}
+{ "traceId": "7f63958e2172b12500e40eed557a31c7", "spanId": "9b81a0201a53b84c", "traceState": "", "parentSpanId": "de85f1e0d746da28", "name": "getCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:51.682416128Z", "endTime": "2021-04-20T20:33:51.712218624Z", "durationInNanos": 29802496, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58960, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/get_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e2a28bb8e6bf64ca"}}
+{ "traceId": "7f63958e2172b12500e40eed557a31c7", "spanId": "e2a28bb8e6bf64ca", "traceState": "", "parentSpanId": "3301dd384d83dc66", "name": "get_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:51.680000512Z", "endTime": "2021-04-20T20:33:51.727677440Z", "durationInNanos": 47676928, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "9de35fba7cb7c4a3"}}
+{ "traceId": "7f63958e2172b12500e40eed557a31c7", "spanId": "9de35fba7cb7c4a3", "traceState": "", "parentSpanId": "637cedb12aa88454", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:51.677016320Z", "endTime": "2021-04-20T20:33:51.734535680Z", "durationInNanos": 57519360, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/get_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "637cedb12aa88454"}}
+{ "traceId": "7f63958e2172b12500e40eed557a31c7", "spanId": "637cedb12aa88454", "traceState": "", "parentSpanId": "", "name": "client_delivery_status", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:51.676719872Z", "endTime": "2021-04-20T20:33:51.737385984Z", "durationInNanos": 60666112, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_delivery_status", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "06f27e83cdad4af6"}}
+{ "traceId": "340a6c6f70a21d1bc8456dbbe5c79929", "spanId": "06f27e83cdad4af6", "traceState": "", "parentSpanId": "439eff3f753e8e67", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:51.995934208Z", "endTime": "2021-04-20T20:33:52.024369152Z", "durationInNanos": 28434944, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58974, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "1fdfb0d6a0c76960"}}
+{ "traceId": "261f4f9f6d49c04588ddfc0b22d167c6", "spanId": "1fdfb0d6a0c76960", "traceState": "", "parentSpanId": "a748c29eeb1d7e59", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.231162624Z", "endTime": "2021-04-20T20:33:52.231785216Z", "durationInNanos": 622592, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT ItemId, TotalQty FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "18172e3a91f55d39"}}
+{ "traceId": "261f4f9f6d49c04588ddfc0b22d167c6", "spanId": "18172e3a91f55d39", "traceState": "", "parentSpanId": "a748c29eeb1d7e59", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.235772416Z", "endTime": "2021-04-20T20:33:52.256177152Z", "durationInNanos": 20404736, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "a748c29eeb1d7e59"}}
+{ "traceId": "261f4f9f6d49c04588ddfc0b22d167c6", "spanId": "a748c29eeb1d7e59", "traceState": "", "parentSpanId": "adbedfaf38a87985", "name": "cart_empty", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.211242240Z", "endTime": "2021-04-20T20:33:52.259230720Z", "durationInNanos": 47988480, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "adbedfaf38a87985"}}
+{ "traceId": "261f4f9f6d49c04588ddfc0b22d167c6", "spanId": "adbedfaf38a87985", "traceState": "", "parentSpanId": "ba003d4618b074f7", "name": "cartEmpty", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:52.210340352Z", "endTime": "2021-04-20T20:33:52.262700032Z", "durationInNanos": 52359680, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "PUT", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58988, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/cart_empty", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/cart_empty", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "66dd3959b912162c"}}
+{ "traceId": "261f4f9f6d49c04588ddfc0b22d167c6", "spanId": "66dd3959b912162c", "traceState": "", "parentSpanId": "", "name": "client_cancel_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.204713472Z", "endTime": "2021-04-20T20:33:52.288004096Z", "durationInNanos": 83290624, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_cancel_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "4543b1bfbb5964c3"}}
+{ "traceId": "5be8370207cbb002a165d369fbc57b57", "spanId": "4543b1bfbb5964c3", "traceState": "", "parentSpanId": "702250f453a02be6", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.497326080Z", "endTime": "2021-04-20T20:33:52.532990720Z", "durationInNanos": 35664640, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "45c65220620defaf"}}
+{ "traceId": "5be8370207cbb002a165d369fbc57b57", "spanId": "45c65220620defaf", "traceState": "", "parentSpanId": "b4e1a6127d470651", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.539106304Z", "endTime": "2021-04-20T20:33:52.563575552Z", "durationInNanos": 24469248, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "179c014a060ab428"}}
+{ "traceId": "5be8370207cbb002a165d369fbc57b57", "spanId": "179c014a060ab428", "traceState": "", "parentSpanId": "f6691ab391b0e350", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.598380800Z", "endTime": "2021-04-20T20:33:52.599080704Z", "durationInNanos": 699904, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': '2'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "f6691ab391b0e350"}}
+{ "traceId": "5be8370207cbb002a165d369fbc57b57", "spanId": "f6691ab391b0e350", "traceState": "", "parentSpanId": "f3dc908cffab10fe", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.578200832Z", "endTime": "2021-04-20T20:33:52.603235328Z", "durationInNanos": 25034496, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "6a8149f2f3269df9"}}
+{ "traceId": "5be8370207cbb002a165d369fbc57b57", "spanId": "6a8149f2f3269df9", "traceState": "", "parentSpanId": "702250f453a02be6", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.614755328Z", "endTime": "2021-04-20T20:33:52.619177472Z", "durationInNanos": 4422144, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c52d1f54270c1a88"}}
+{ "traceId": "5be8370207cbb002a165d369fbc57b57", "spanId": "c52d1f54270c1a88", "traceState": "", "parentSpanId": "", "name": "client_create_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.493635840Z", "endTime": "2021-04-20T20:33:52.632568064Z", "durationInNanos": 138932224, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_create_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "5b1ed6116a19ebcc"}}
+{ "traceId": "4216a647a4396e50fc12cc78d571557e", "spanId": "5b1ed6116a19ebcc", "traceState": "", "parentSpanId": "14148032cdebd6e5", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.698918400Z", "endTime": "2021-04-20T20:33:52.699564800Z", "durationInNanos": 646400, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': '1'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "680639d2b7681a2a"}}
+{ "traceId": "4216a647a4396e50fc12cc78d571557e", "spanId": "680639d2b7681a2a", "traceState": "", "parentSpanId": "d85ef60c6b05ea1e", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.675642368Z", "endTime": "2021-04-20T20:33:52.711814144Z", "durationInNanos": 36171776, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "f30e9c92926901d9"}}
+{ "traceId": "4216a647a4396e50fc12cc78d571557e", "spanId": "f30e9c92926901d9", "traceState": "", "parentSpanId": "70e7adcb0023b919", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:52.756263936Z", "endTime": "2021-04-20T20:33:52.785140224Z", "durationInNanos": 28876288, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 59024, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "1aa4ab0af82bbbb2"}}
+{ "traceId": "e447ed617aa651a7593c720d7e976625", "spanId": "1aa4ab0af82bbbb2", "traceState": "", "parentSpanId": "b6b76ad0ea7a18e0", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.954985472Z", "endTime": "2021-04-20T20:33:52.978256896Z", "durationInNanos": 23271424, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "b6b76ad0ea7a18e0"}}
+{ "traceId": "e447ed617aa651a7593c720d7e976625", "spanId": "b6b76ad0ea7a18e0", "traceState": "", "parentSpanId": "bffbe84728e92b6d", "name": "cart_empty", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.930167040Z", "endTime": "2021-04-20T20:33:52.981641472Z", "durationInNanos": 51474432, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "68f6536a0523f7f3"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "68f6536a0523f7f3", "traceState": "", "parentSpanId": "2badcc8448bd5c5b", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:53.215277568Z", "endTime": "2021-04-20T20:33:53.253143808Z", "durationInNanos": 37866240, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "Not enough storage for itemId banana", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "a4030e9ad85b2a92"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "a4030e9ad85b2a92", "traceState": "", "parentSpanId": "057ca06095200357", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:53.259318272Z", "endTime": "2021-04-20T20:33:53.284444928Z", "durationInNanos": 25126656, "serviceName": "database", "events": [ { "time": "2021-04-20T20:33:53.284412416Z", "name": "exception", "attributes": { "exception@message": "", "exception@type": "InvalidItemUpdate", "exception@stacktrace": """Traceback (most recent call last): File "/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py", line 804, in use_span yield span File "databaseService.py", line 162, in updateItem raise InvalidItemUpdate("Not enough storage for itemId {}".format(data[ "ItemId" ])) InvalidItemUpdate """ }, "droppedAttributesCount": 0 } ], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "status.message": "InvalidItemUpdate: ", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 2, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "4244f688b5a95a26"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "4244f688b5a95a26", "traceState": "", "parentSpanId": "49bd0e3a571e477d", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:53.301197056Z", "endTime": "2021-04-20T20:33:53.326327296Z", "durationInNanos": 25130240, "serviceName": "database", "events": [ { "time": "2021-04-20T20:33:53.326294016Z", "name": "exception", "attributes": { "exception@message": "", "exception@type": "InvalidItemUpdate", "exception@stacktrace": """Traceback (most recent call last): File "/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py", line 804, in use_span yield span File "databaseService.py", line 162, in updateItem raise InvalidItemUpdate("Not enough storage for itemId {}".format(data[ "ItemId" ])) InvalidItemUpdate """ }, "droppedAttributesCount": 0 } ], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "status.message": "InvalidItemUpdate: ", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 2, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "49bd0e3a571e477d"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "49bd0e3a571e477d", "traceState": "", "parentSpanId": "06d1242a51405187", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:53.300201216Z", "endTime": "2021-04-20T20:33:53.330773248Z", "durationInNanos": 30572032, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "Not enough storage for itemId apple", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 59056, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "a03d0ff09010abc3"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "a03d0ff09010abc3", "traceState": "", "parentSpanId": "66a2144a58008463", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:53.211857408Z", "endTime": "2021-04-20T20:33:53.345646848Z", "durationInNanos": 133789440, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8082/update_inventory", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "Update inventory response contains failed items.", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "1baf1e42d2eaae2a"}}
+{ "traceId": "d5bc99166e521eec173bcb7f9b0d3c43", "spanId": "1baf1e42d2eaae2a", "traceState": "", "parentSpanId": "cefea796ccf54813", "name": "HTTP PUT", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:53.429764096Z", "endTime": "2021-04-20T20:33:53.493248256Z", "durationInNanos": 63484160, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/cart_empty", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "PUT", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "1dc7b46c2357c388"}}
+{ "traceId": "d5bc99166e521eec173bcb7f9b0d3c43", "spanId": "1dc7b46c2357c388", "traceState": "", "parentSpanId": "2aec9c6345d7c6b3", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:53.426487808Z", "endTime": "2021-04-20T20:33:53.509910016Z", "durationInNanos": 83422208, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/clear_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "86b490f5558fa709"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "86b490f5558fa709", "traceState": "", "parentSpanId": "32c7b65db72d6298", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:49.125418594Z", "endTime": "2021-04-20T20:33:49.126411716Z", "durationInNanos": 993122, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-4", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "f8d135e17dd59043"}}
+{ "traceId": "7f63958e2172b12500e40eed557a31c7", "spanId": "f8d135e17dd59043", "traceState": "", "parentSpanId": "1fe046d4f9f3bd13", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:51.722447259Z", "endTime": "2021-04-20T20:33:51.723605629Z", "durationInNanos": 1158370, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-10", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 140, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "32c7b65db72d6298"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "32c7b65db72d6298", "traceState": "", "parentSpanId": "d74d48bf3431c487", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:49.125001550Z", "endTime": "2021-04-20T20:33:49.126513995Z", "durationInNanos": 1512445, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-4", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58088, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "50347b6be84490e4"}}
+{ "traceId": "da0666d73c1645d392576e56619d8c6e", "spanId": "50347b6be84490e4", "traceState": "", "parentSpanId": "d03fde256c0d5e87", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:49.356001691Z", "endTime": "2021-04-20T20:33:49.357803832Z", "durationInNanos": 1802141, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-6", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58098, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "d0c7228a8eb81715"}}
+{ "traceId": "20eabd650f3a068d9f590786f56885e7", "spanId": "d0c7228a8eb81715", "traceState": "", "parentSpanId": "268c00835c4cc7ac", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:50.850001822Z", "endTime": "2021-04-20T20:33:50.851659846Z", "durationInNanos": 1658024, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-4", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58174, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "0f929cd09feb717a"}}
+{ "traceId": "4216a647a4396e50fc12cc78d571557e", "spanId": "0f929cd09feb717a", "traceState": "", "parentSpanId": "84584d9e50950ea5", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:52.818001824Z", "endTime": "2021-04-20T20:33:52.819591628Z", "durationInNanos": 1589804, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-8", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58268, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "b272143e732a91e9"}}
+{ "traceId": "e447ed617aa651a7593c720d7e976625", "spanId": "b272143e732a91e9", "traceState": "", "parentSpanId": "477408f3368f28af", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:52.995002208Z", "endTime": "2021-04-20T20:33:52.996554316Z", "durationInNanos": 1552108, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-10", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 140, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58278, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "06e4387a53eec8ae"}}
+{ "traceId": "4626b16656c8131c17bef721f94f39d0", "spanId": "06e4387a53eec8ae", "traceState": "", "parentSpanId": "", "name": "HTTP GET", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:19.541728768Z", "endTime": "2021-04-20T20:33:19.544739584Z", "durationInNanos": 3010816, "serviceName": "recommendation", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "HTTP GET", "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8086, "span.attributes.http@status_text": "NOT FOUND", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140018306314192", "resource.attributes.service@name": "recommendation", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "curl/7.61.1", "span.attributes.net@peer@port": 42362, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@host": "localhost:8086", "span.attributes.http@target": "/", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 404 }
+{ "index":{"_id": "60393741cd2ba5da"}}
+{ "traceId": "5a551c574ba60b0fddee0a98150ad7c6", "spanId": "60393741cd2ba5da", "traceState": "", "parentSpanId": "", "name": "HTTP GET", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:20.558674688Z", "endTime": "2021-04-20T20:33:20.561958656Z", "durationInNanos": 3283968, "serviceName": "authentication", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "HTTP GET", "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8085, "span.attributes.http@status_text": "NOT FOUND", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139949516139040", "resource.attributes.service@name": "authentication", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "curl/7.61.1", "span.attributes.net@peer@port": 37624, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@host": "localhost:8085", "span.attributes.http@target": "/", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 404 }
+{ "index":{"_id": "840eaf798fcd7d6a"}}
+{ "traceId": "513e4f752e4411aa6d4b6b35878172f3", "spanId": "840eaf798fcd7d6a", "traceState": "", "parentSpanId": "d3c888f442bdf005", "name": "payment", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:29.225169408Z", "endTime": "2021-04-20T20:33:29.237534464Z", "durationInNanos": 12365056, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8084, "span.attributes.http@status_text": "SERVICE UNAVAILABLE", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 59546, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/checkout", "span.attributes.http@host": "localhost:8084", "span.attributes.http@target": "/checkout", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 503 }
+{ "index":{"_id": "647e42f1b60baba6"}}
+{ "traceId": "d37d709d5695f213e4ca41ac874c00bc", "spanId": "647e42f1b60baba6", "traceState": "", "parentSpanId": "8e7e103a2e3a040f", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:32.582873344Z", "endTime": "2021-04-20T20:33:32.583549440Z", "durationInNanos": 676096, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT * FROM Inventory_Items", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "519baeb3e108614d"}}
+{ "traceId": "d37d709d5695f213e4ca41ac874c00bc", "spanId": "519baeb3e108614d", "traceState": "", "parentSpanId": "65bcaf9c16235fec", "name": "getIntentory", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:32.557999360Z", "endTime": "2021-04-20T20:33:32.590999808Z", "durationInNanos": 33000448, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58316, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_inventory", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/get_inventory", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "caed30931d6c8826"}}
+{ "traceId": "d37d709d5695f213e4ca41ac874c00bc", "spanId": "caed30931d6c8826", "traceState": "", "parentSpanId": "88484a1ee3c170cd", "name": "recommend", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:32.547260416Z", "endTime": "2021-04-20T20:33:32.628968960Z", "durationInNanos": 81708544, "serviceName": "recommendation", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8086, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140018306314192", "resource.attributes.service@name": "recommendation", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 42416, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/recommend", "span.attributes.http@host": "localhost:8086", "span.attributes.http@target": "/recommend", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "40c037eaae087000"}}
+{ "traceId": "509da2ddfc1a3d9fc88ed4b62f3cd079", "spanId": "40c037eaae087000", "traceState": "", "parentSpanId": "55d7f80c6aff4ec7", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:34.314483968Z", "endTime": "2021-04-20T20:33:34.349315328Z", "durationInNanos": 34831360, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58344, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "ec44bfc9b38f6faf"}}
+{ "traceId": "c17023ed734d4daa5f97bb7972f0c935", "spanId": "ec44bfc9b38f6faf", "traceState": "", "parentSpanId": "ab460c6800da22bf", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:34.727146240Z", "endTime": "2021-04-20T20:33:34.727824384Z", "durationInNanos": 678144, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT * FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "ab460c6800da22bf"}}
+{ "traceId": "c17023ed734d4daa5f97bb7972f0c935", "spanId": "ab460c6800da22bf", "traceState": "", "parentSpanId": "066eee06004804d5", "name": "get_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:34.707429632Z", "endTime": "2021-04-20T20:33:34.731620608Z", "durationInNanos": 24190976, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "066eee06004804d5"}}
+{ "traceId": "c17023ed734d4daa5f97bb7972f0c935", "spanId": "066eee06004804d5", "traceState": "", "parentSpanId": "bb8e3a8935263a0e", "name": "getCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:34.706544640Z", "endTime": "2021-04-20T20:33:34.734942208Z", "durationInNanos": 28397568, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58354, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/get_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "bb8e3a8935263a0e"}}
+{ "traceId": "c17023ed734d4daa5f97bb7972f0c935", "spanId": "bb8e3a8935263a0e", "traceState": "", "parentSpanId": "60845ba7d8c2aaf0", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:34.704376320Z", "endTime": "2021-04-20T20:33:34.739784704Z", "durationInNanos": 35408384, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/get_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "99d7b8673d19932d"}}
+{ "traceId": "c17023ed734d4daa5f97bb7972f0c935", "spanId": "99d7b8673d19932d", "traceState": "", "parentSpanId": "60845ba7d8c2aaf0", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:34.742878464Z", "endTime": "2021-04-20T20:33:34.748727296Z", "durationInNanos": 5848832, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "174b6e4f69dd2d18"}}
+{ "traceId": "9cc5c0acce9b9acc05b1c8d082709609", "spanId": "174b6e4f69dd2d18", "traceState": "", "parentSpanId": "9b3c0b3ed5c876e6", "name": "cart_sold", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:35.171959296Z", "endTime": "2021-04-20T20:33:35.219812352Z", "durationInNanos": 47853056, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "6f9eca809cfd10f4"}}
+{ "traceId": "7df67f7205abe19319bad85babb04ca9", "spanId": "6f9eca809cfd10f4", "traceState": "", "parentSpanId": "1cfde34b0e64708d", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:35.738551040Z", "endTime": "2021-04-20T20:33:35.739376640Z", "durationInNanos": 825600, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': '3'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "cc1bd6dba046b476"}}
+{ "traceId": "7df67f7205abe19319bad85babb04ca9", "spanId": "cc1bd6dba046b476", "traceState": "", "parentSpanId": "bb9e8ac613f9c314", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:35.783496704Z", "endTime": "2021-04-20T20:33:35.784163328Z", "durationInNanos": 666624, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': '2'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "17573d14a639e1d1"}}
+{ "traceId": "7df67f7205abe19319bad85babb04ca9", "spanId": "17573d14a639e1d1", "traceState": "", "parentSpanId": "285b2f9d476d9a6f", "name": "update_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:35.663353600Z", "endTime": "2021-04-20T20:33:35.810676480Z", "durationInNanos": 147322880, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60752, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/update_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c2340bad2c8d7620"}}
+{ "traceId": "7df67f7205abe19319bad85babb04ca9", "spanId": "c2340bad2c8d7620", "traceState": "", "parentSpanId": "", "name": "client_create_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:35.660813824Z", "endTime": "2021-04-20T20:33:35.818663168Z", "durationInNanos": 157849344, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_create_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "7fe759e9e512c8ff"}}
+{ "traceId": "19b592faebd7e10a4824b919bcd3bd89", "spanId": "7fe759e9e512c8ff", "traceState": "", "parentSpanId": "42b721754a8f6168", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.099666432Z", "endTime": "2021-04-20T20:33:36.100590592Z", "durationInNanos": 924160, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': 1}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "INSERT INTO Inventory_Items (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "3c71472fb76ad5e6"}}
+{ "traceId": "19b592faebd7e10a4824b919bcd3bd89", "spanId": "3c71472fb76ad5e6", "traceState": "", "parentSpanId": "42b721754a8f6168", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.107451904Z", "endTime": "2021-04-20T20:33:36.108079616Z", "durationInNanos": 627712, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': 3}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "INSERT INTO Inventory_Items (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "8e2e0e3da163fc3b"}}
+{ "traceId": "19b592faebd7e10a4824b919bcd3bd89", "spanId": "8e2e0e3da163fc3b", "traceState": "", "parentSpanId": "42b721754a8f6168", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.113731328Z", "endTime": "2021-04-20T20:33:36.139224064Z", "durationInNanos": 25492736, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "42b721754a8f6168"}}
+{ "traceId": "19b592faebd7e10a4824b919bcd3bd89", "spanId": "42b721754a8f6168", "traceState": "", "parentSpanId": "cb2b82acca479730", "name": "cart_empty", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:36.074103296Z", "endTime": "2021-04-20T20:33:36.142439680Z", "durationInNanos": 68336384, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "ad7845eabc7145cd"}}
+{ "traceId": "19b592faebd7e10a4824b919bcd3bd89", "spanId": "ad7845eabc7145cd", "traceState": "", "parentSpanId": "db173bc10299861f", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.155145984Z", "endTime": "2021-04-20T20:33:36.160770816Z", "durationInNanos": 5624832, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "ac0d61f7be00cc09"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "ac0d61f7be00cc09", "traceState": "", "parentSpanId": "4f70367bf3c97d0e", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:36.574601472Z", "endTime": "2021-04-20T20:33:36.606697728Z", "durationInNanos": 32096256, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58414, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "4f70367bf3c97d0e"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "4f70367bf3c97d0e", "traceState": "", "parentSpanId": "b5eb104616d427e5", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.572322816Z", "endTime": "2021-04-20T20:33:36.611627264Z", "durationInNanos": 39304448, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "375cb3ef27c46997"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "375cb3ef27c46997", "traceState": "", "parentSpanId": "b5ef9ef1ecddda5e", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.485675264Z", "endTime": "2021-04-20T20:33:36.629994496Z", "durationInNanos": 144319232, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8082/update_inventory", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "60019ca1c2f5ab8e"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "60019ca1c2f5ab8e", "traceState": "", "parentSpanId": "d3911d8b057539bb", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.481851648Z", "endTime": "2021-04-20T20:33:36.647876864Z", "durationInNanos": 166025216, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8084/checkout", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "a7fcdbe2bf6d6d75"}}
+{ "traceId": "ec830c13f81efb5082f6e40b4dedce71", "spanId": "a7fcdbe2bf6d6d75", "traceState": "", "parentSpanId": "7c058c08a86fc5a8", "name": "clear_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:36.996497920Z", "endTime": "2021-04-20T20:33:37.070610176Z", "durationInNanos": 74112256, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "7c058c08a86fc5a8"}}
+{ "traceId": "ec830c13f81efb5082f6e40b4dedce71", "spanId": "7c058c08a86fc5a8", "traceState": "", "parentSpanId": "68cf95323b3af152", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:36.995693312Z", "endTime": "2021-04-20T20:33:37.072949248Z", "durationInNanos": 77255936, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60802, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "68cf95323b3af152"}}
+{ "traceId": "ec830c13f81efb5082f6e40b4dedce71", "spanId": "68cf95323b3af152", "traceState": "", "parentSpanId": "bfcda24f22004149", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.993572608Z", "endTime": "2021-04-20T20:33:37.077576704Z", "durationInNanos": 84004096, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/clear_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "bfcda24f22004149"}}
+{ "traceId": "ec830c13f81efb5082f6e40b4dedce71", "spanId": "bfcda24f22004149", "traceState": "", "parentSpanId": "", "name": "client_cancel_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:36.993322752Z", "endTime": "2021-04-20T20:33:37.080295680Z", "durationInNanos": 86972928, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_cancel_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "8fd6fd77a11f4983"}}
+{ "traceId": "1730cc8687cb4b504cd934560111d5a1", "spanId": "8fd6fd77a11f4983", "traceState": "", "parentSpanId": "b4f529ee6fed4e49", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:37.408389376Z", "endTime": "2021-04-20T20:33:37.443986176Z", "durationInNanos": 35596800, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58436, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "71529953e9aa20e1"}}
+{ "traceId": "1730cc8687cb4b504cd934560111d5a1", "spanId": "71529953e9aa20e1", "traceState": "", "parentSpanId": "67a615bb3d2aef86", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:37.544745216Z", "endTime": "2021-04-20T20:33:37.549624064Z", "durationInNanos": 4878848, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "523a0808d6e0be58"}}
+{ "traceId": "c9f83a98e8f1826c3a822eeb7b85a9d6", "spanId": "523a0808d6e0be58", "traceState": "", "parentSpanId": "", "name": "client_cancel_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:37.780772864Z", "endTime": "2021-04-20T20:33:37.882267392Z", "durationInNanos": 101494528, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_cancel_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "aaa95e9f50a4baa3"}}
+{ "traceId": "22bdfd493901782340e7eea9e077acb9", "spanId": "aaa95e9f50a4baa3", "traceState": "", "parentSpanId": "7bc2fe0a60e01dba", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:38.200260352Z", "endTime": "2021-04-20T20:33:38.226785024Z", "durationInNanos": 26524672, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "56925faca063f848"}}
+{ "traceId": "22bdfd493901782340e7eea9e077acb9", "spanId": "56925faca063f848", "traceState": "", "parentSpanId": "1b26c8058d3cd7b6", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:38.240576512Z", "endTime": "2021-04-20T20:33:38.272510720Z", "durationInNanos": 31934208, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58474, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "36883585e85d1b73"}}
+{ "traceId": "82c7cf3d3540450a3acc00c41b7a9562", "spanId": "36883585e85d1b73", "traceState": "", "parentSpanId": "0f425b86cb459271", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:38.619970304Z", "endTime": "2021-04-20T20:33:38.653283072Z", "durationInNanos": 33312768, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58498, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e8365c37ca6c41a9"}}
+{ "traceId": "82c7cf3d3540450a3acc00c41b7a9562", "spanId": "e8365c37ca6c41a9", "traceState": "", "parentSpanId": "95441fc1d382e48d", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:38.702615040Z", "endTime": "2021-04-20T20:33:38.707414784Z", "durationInNanos": 4799744, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "cc87be09db83951c"}}
+{ "traceId": "82c7cf3d3540450a3acc00c41b7a9562", "spanId": "cc87be09db83951c", "traceState": "", "parentSpanId": "eb63409f597c3607", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:38.557328128Z", "endTime": "2021-04-20T20:33:38.718940928Z", "durationInNanos": 161612800, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8082/update_inventory", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "eb63409f597c3607"}}
+{ "traceId": "82c7cf3d3540450a3acc00c41b7a9562", "spanId": "eb63409f597c3607", "traceState": "", "parentSpanId": "07b4d48cb660e9cc", "name": "checkout", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:38.556882688Z", "endTime": "2021-04-20T20:33:38.734543616Z", "durationInNanos": 177660928, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "d250018f35242056"}}
+{ "traceId": "ec830c13f81efb5082f6e40b4dedce71", "spanId": "d250018f35242056", "traceState": "", "parentSpanId": "c9b6a51576561f98", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:37.065582317Z", "endTime": "2021-04-20T20:33:37.066913Z", "durationInNanos": 1330683, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-8", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "7b78d2bea411b2fe"}}
+{ "traceId": "509da2ddfc1a3d9fc88ed4b62f3cd079", "spanId": "7b78d2bea411b2fe", "traceState": "", "parentSpanId": "0a9ab07c9f5e7d29", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:34.359002058Z", "endTime": "2021-04-20T20:33:34.361727904Z", "durationInNanos": 2725846, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-4", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57588, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "7145d5e8e15acfb7"}}
+{ "traceId": "c17023ed734d4daa5f97bb7972f0c935", "spanId": "7145d5e8e15acfb7", "traceState": "", "parentSpanId": "99d7b8673d19932d", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:34.745001766Z", "endTime": "2021-04-20T20:33:34.747694532Z", "durationInNanos": 2692766, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-6", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57598, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "474039eb574aec04"}}
+{ "traceId": "19b592faebd7e10a4824b919bcd3bd89", "spanId": "474039eb574aec04", "traceState": "", "parentSpanId": "ad7845eabc7145cd", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:36.157001583Z", "endTime": "2021-04-20T20:33:36.159234806Z", "durationInNanos": 2233223, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-3", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 133, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57638, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "77243c434c2fcb1f"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "77243c434c2fcb1f", "traceState": "", "parentSpanId": "937fb8345b252adb", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:36.617002014Z", "endTime": "2021-04-20T20:33:36.619561838Z", "durationInNanos": 2559824, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-4", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57658, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "fd955727cb8de558"}}
+{ "traceId": "22bdfd493901782340e7eea9e077acb9", "spanId": "fd955727cb8de558", "traceState": "", "parentSpanId": "f211085459dee231", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:38.284002091Z", "endTime": "2021-04-20T20:33:38.286466012Z", "durationInNanos": 2463921, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-4", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57720, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "c1e60aa906af446c"}}
+{ "traceId": "22bdfd493901782340e7eea9e077acb9", "spanId": "c1e60aa906af446c", "traceState": "", "parentSpanId": "c5280d05b1704e38", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:38.302001808Z", "endTime": "2021-04-20T20:33:38.303866754Z", "durationInNanos": 1864946, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-6", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57722, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "f251b6b23136a553"}}
+{ "traceId": "82c7cf3d3540450a3acc00c41b7a9562", "spanId": "f251b6b23136a553", "traceState": "", "parentSpanId": "76ac0909a315d25c", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:38.726001732Z", "endTime": "2021-04-20T20:33:38.728225906Z", "durationInNanos": 2224174, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-3", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 133, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57748, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "3746bae316ced457"}}
+{ "traceId": "17af7b8dee49e8258b8b5ab82dd0235a", "spanId": "3746bae316ced457", "traceState": "", "parentSpanId": "8eafdbb08ef33fac", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:39.773298688Z", "endTime": "2021-04-20T20:33:39.775022848Z", "durationInNanos": 1724160, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT * FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "0afb5a2b1848c74b"}}
+{ "traceId": "17af7b8dee49e8258b8b5ab82dd0235a", "spanId": "0afb5a2b1848c74b", "traceState": "", "parentSpanId": "", "name": "client_delivery_status", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:39.747136Z", "endTime": "2021-04-20T20:33:39.807513856Z", "durationInNanos": 60377856, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_delivery_status", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "669d2b7892e6854c"}}
+{ "traceId": "10b1ec1196741c85609a43ce435cdece", "spanId": "669d2b7892e6854c", "traceState": "", "parentSpanId": "9253cd2f27e55a6f", "name": "clear_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:40.228339200Z", "endTime": "2021-04-20T20:33:40.299048192Z", "durationInNanos": 70708992, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "59443367c68e77d9"}}
+{ "traceId": "259a8226fae090c7dff75784fc8c7b17", "spanId": "59443367c68e77d9", "traceState": "", "parentSpanId": "c3bb9b0cacfb19ea", "name": "cart_sold", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:41.185568512Z", "endTime": "2021-04-20T20:33:41.234750208Z", "durationInNanos": 49181696, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "3d3423c981805776"}}
+{ "traceId": "259a8226fae090c7dff75784fc8c7b17", "spanId": "3d3423c981805776", "traceState": "", "parentSpanId": "a4ba523cda11d1d3", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:41.246229760Z", "endTime": "2021-04-20T20:33:41.251002880Z", "durationInNanos": 4773120, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e3496923e8587b46"}}
+{ "traceId": "5bf7f62e1215df5526664ec45dd9ad63", "spanId": "e3496923e8587b46", "traceState": "", "parentSpanId": "6b60bf20aca25776", "name": "getCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:41.625234688Z", "endTime": "2021-04-20T20:33:41.654554624Z", "durationInNanos": 29319936, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58576, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/get_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "18af310c32c71ea5"}}
+{ "traceId": "5bf7f62e1215df5526664ec45dd9ad63", "spanId": "18af310c32c71ea5", "traceState": "", "parentSpanId": "915cceedf89bd5f3", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:41.619891200Z", "endTime": "2021-04-20T20:33:41.677285120Z", "durationInNanos": 57393920, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/get_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "7a5994c2d61252d8"}}
+{ "traceId": "552aa3363bf275a248b131406edf735d", "spanId": "7a5994c2d61252d8", "traceState": "", "parentSpanId": "903ebe485e8ce58d", "name": "cartSold", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:42.001465600Z", "endTime": "2021-04-20T20:33:42.054217216Z", "durationInNanos": 52751616, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58586, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/cart_sold", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/cart_sold", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "2786ea5cfba1d51c"}}
+{ "traceId": "552aa3363bf275a248b131406edf735d", "spanId": "2786ea5cfba1d51c", "traceState": "", "parentSpanId": "e8aeb63bfa118068", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:41.996101888Z", "endTime": "2021-04-20T20:33:42.080325120Z", "durationInNanos": 84223232, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/pay_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "694e40f773666591"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "694e40f773666591", "traceState": "", "parentSpanId": "de34ef4183a4705b", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:42.522945280Z", "endTime": "2021-04-20T20:33:42.523687680Z", "durationInNanos": 742400, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': 2}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "7cd34262856a4d72"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "7cd34262856a4d72", "traceState": "", "parentSpanId": "d2b2b41a16075705", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:42.604768512Z", "endTime": "2021-04-20T20:33:42.605615360Z", "durationInNanos": 846848, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': 1}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "5bd2b2161742dcd5"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "5bd2b2161742dcd5", "traceState": "", "parentSpanId": "0791aa225a461844", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:42.623602688Z", "endTime": "2021-04-20T20:33:42.628299008Z", "durationInNanos": 4696320, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "4eaffcf10b0ddc1b"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "4eaffcf10b0ddc1b", "traceState": "", "parentSpanId": "5204fe33a94fc5e5", "name": "payment", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:42.495094784Z", "endTime": "2021-04-20T20:33:42.651653888Z", "durationInNanos": 156559104, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8084, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 59848, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/checkout", "span.attributes.http@host": "localhost:8084", "span.attributes.http@target": "/checkout", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "9645c99068238c29"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "9645c99068238c29", "traceState": "", "parentSpanId": "", "name": "client_checkout", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:42.492572416Z", "endTime": "2021-04-20T20:33:42.660122112Z", "durationInNanos": 167549696, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_checkout", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "080f360f30d5f04d"}}
+{ "traceId": "c5eabf09201ab4df116e1881d0756035", "spanId": "080f360f30d5f04d", "traceState": "", "parentSpanId": "01b11afabc7fdc7f", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:43.411759104Z", "endTime": "2021-04-20T20:33:43.413591296Z", "durationInNanos": 1832192, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT ItemId, TotalQty FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "01b11afabc7fdc7f"}}
+{ "traceId": "c5eabf09201ab4df116e1881d0756035", "spanId": "01b11afabc7fdc7f", "traceState": "", "parentSpanId": "54419fc75e901eee", "name": "cart_empty", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:43.391958528Z", "endTime": "2021-04-20T20:33:43.440197888Z", "durationInNanos": 48239360, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "54419fc75e901eee"}}
+{ "traceId": "c5eabf09201ab4df116e1881d0756035", "spanId": "54419fc75e901eee", "traceState": "", "parentSpanId": "85fb245e31172689", "name": "cartEmpty", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:43.391038976Z", "endTime": "2021-04-20T20:33:43.443544064Z", "durationInNanos": 52505088, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "PUT", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58618, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/cart_empty", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/cart_empty", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "85fb245e31172689"}}
+{ "traceId": "c5eabf09201ab4df116e1881d0756035", "spanId": "85fb245e31172689", "traceState": "", "parentSpanId": "a0bed7d434593b60", "name": "HTTP PUT", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:43.388828416Z", "endTime": "2021-04-20T20:33:43.448487936Z", "durationInNanos": 59659520, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/cart_empty", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "PUT", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "36695d818f9b4e9a"}}
+{ "traceId": "c5eabf09201ab4df116e1881d0756035", "spanId": "36695d818f9b4e9a", "traceState": "", "parentSpanId": "5268497625ace4e0", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:43.387825664Z", "endTime": "2021-04-20T20:33:43.460932608Z", "durationInNanos": 73106944, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60994, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "2bacaf900ae368c7"}}
+{ "traceId": "1ca5c1d52ca730f16872553cde6933c0", "spanId": "2bacaf900ae368c7", "traceState": "", "parentSpanId": "5d8912365e6688f3", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:43.845935616Z", "endTime": "2021-04-20T20:33:43.847112448Z", "durationInNanos": 1176832, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT ItemId, TotalQty FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "cf38f810fff59bb3"}}
+{ "traceId": "1ca5c1d52ca730f16872553cde6933c0", "spanId": "cf38f810fff59bb3", "traceState": "", "parentSpanId": "5d8912365e6688f3", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:43.850872832Z", "endTime": "2021-04-20T20:33:43.871734272Z", "durationInNanos": 20861440, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "37628f7fdcf79dbb"}}
+{ "traceId": "17af7b8dee49e8258b8b5ab82dd0235a", "spanId": "37628f7fdcf79dbb", "traceState": "", "parentSpanId": "cf2a67c23dc23bab", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:39.791471041Z", "endTime": "2021-04-20T20:33:39.792596934Z", "durationInNanos": 1125893, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-8", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "dd0a9b2bcbdcdbb6"}}
+{ "traceId": "259a8226fae090c7dff75784fc8c7b17", "spanId": "dd0a9b2bcbdcdbb6", "traceState": "", "parentSpanId": "a981fd033e3a7491", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:41.248690371Z", "endTime": "2021-04-20T20:33:41.249957195Z", "durationInNanos": 1266824, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-4", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "3230880363166a80"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "3230880363166a80", "traceState": "", "parentSpanId": "f405f62e61d4181f", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:42.643464807Z", "endTime": "2021-04-20T20:33:42.644564500Z", "durationInNanos": 1099693, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-3", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 133, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "1fbcd1691508fa92"}}
+{ "traceId": "56280de557e9fa891bb6289d2fd53c8d", "spanId": "1fbcd1691508fa92", "traceState": "", "parentSpanId": "c519a467435258a0", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:40.859001828Z", "endTime": "2021-04-20T20:33:40.860862299Z", "durationInNanos": 1860471, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-3", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 133, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57798, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "570073e77e68be9d"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "570073e77e68be9d", "traceState": "", "parentSpanId": "72fd9aa427e26550", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:44.185529088Z", "endTime": "2021-04-20T20:33:44.218529024Z", "durationInNanos": 32999936, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "2311bcf70d68331c"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "2311bcf70d68331c", "traceState": "", "parentSpanId": "c63088be2f211cf7", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:44.277222400Z", "endTime": "2021-04-20T20:33:44.312690432Z", "durationInNanos": 35468032, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58648, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "885e54cf2034b9f4"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "885e54cf2034b9f4", "traceState": "", "parentSpanId": "104a8f2719108aaf", "name": "update_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:44.181856512Z", "endTime": "2021-04-20T20:33:44.328167424Z", "durationInNanos": 146310912, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "104a8f2719108aaf"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "104a8f2719108aaf", "traceState": "", "parentSpanId": "c85e5dec4106a06a", "name": "update_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:44.181052672Z", "endTime": "2021-04-20T20:33:44.330511104Z", "durationInNanos": 149458432, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32782, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/update_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "504e26f11e5bb1ae"}}
+{ "traceId": "c0ef65e0d991727dbe26a071fd10e407", "spanId": "504e26f11e5bb1ae", "traceState": "", "parentSpanId": "0ee38170cee8fb5c", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.594721792Z", "endTime": "2021-04-20T20:33:44.599331328Z", "durationInNanos": 4609536, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "93047965b18da903"}}
+{ "traceId": "70a3f615a998b76cd973d87710572913", "spanId": "93047965b18da903", "traceState": "", "parentSpanId": "7359981596903c3f", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.966868736Z", "endTime": "2021-04-20T20:33:44.989101312Z", "durationInNanos": 22232576, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "9ca0bf86196899bc"}}
+{ "traceId": "70a3f615a998b76cd973d87710572913", "spanId": "9ca0bf86196899bc", "traceState": "", "parentSpanId": "ead17a7f0d4e34ed", "name": "pay_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:44.943505664Z", "endTime": "2021-04-20T20:33:45.011987456Z", "durationInNanos": 68481792, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "92e84113ddc59da5"}}
+{ "traceId": "02feb3a4f611abd81f2a53244d1278ae", "spanId": "92e84113ddc59da5", "traceState": "", "parentSpanId": "dcf70445f2a2cd40", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:45.654626048Z", "endTime": "2021-04-20T20:33:45.655334912Z", "durationInNanos": 708864, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': '3'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "dcf70445f2a2cd40"}}
+{ "traceId": "02feb3a4f611abd81f2a53244d1278ae", "spanId": "dcf70445f2a2cd40", "traceState": "", "parentSpanId": "0c64ae315abfd656", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:45.634566144Z", "endTime": "2021-04-20T20:33:45.659138816Z", "durationInNanos": 24572672, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "0c64ae315abfd656"}}
+{ "traceId": "02feb3a4f611abd81f2a53244d1278ae", "spanId": "0c64ae315abfd656", "traceState": "", "parentSpanId": "cf25277706dc2439", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:45.633674752Z", "endTime": "2021-04-20T20:33:45.662507776Z", "durationInNanos": 28833024, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58692, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "9bdbac7482af31f3"}}
+{ "traceId": "02feb3a4f611abd81f2a53244d1278ae", "spanId": "9bdbac7482af31f3", "traceState": "", "parentSpanId": "ded3687b9758bf59", "name": "update_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:45.584570112Z", "endTime": "2021-04-20T20:33:45.719764480Z", "durationInNanos": 135194368, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32832, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/update_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "8e8e5e8bd88c11b5"}}
+{ "traceId": "97551ce4600c334d4ab8fb8725ac1e67", "spanId": "8e8e5e8bd88c11b5", "traceState": "", "parentSpanId": "69af53e3494bca1c", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:45.943921408Z", "endTime": "2021-04-20T20:33:45.965064192Z", "durationInNanos": 21142784, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "69af53e3494bca1c"}}
+{ "traceId": "97551ce4600c334d4ab8fb8725ac1e67", "spanId": "69af53e3494bca1c", "traceState": "", "parentSpanId": "3a025025e0a3b1fa", "name": "cart_empty", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:45.913632256Z", "endTime": "2021-04-20T20:33:45.968429568Z", "durationInNanos": 54797312, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "ea4bcbaf2a9a6fa3"}}
+{ "traceId": "97551ce4600c334d4ab8fb8725ac1e67", "spanId": "ea4bcbaf2a9a6fa3", "traceState": "", "parentSpanId": "", "name": "client_cancel_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:45.907184128Z", "endTime": "2021-04-20T20:33:45.997188352Z", "durationInNanos": 90004224, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_cancel_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "5edd047783ce31e6"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "5edd047783ce31e6", "traceState": "", "parentSpanId": "9a880188bcb44cda", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:46.196210944Z", "endTime": "2021-04-20T20:33:46.228526592Z", "durationInNanos": 32315648, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "Not enough storage for itemId orange", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58722, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "6f7eafee7d68115c"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "6f7eafee7d68115c", "traceState": "", "parentSpanId": "203faf4d95696dc4", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:46.240107008Z", "endTime": "2021-04-20T20:33:46.267194368Z", "durationInNanos": 27087360, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "22b1d496a103d5d4"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "22b1d496a103d5d4", "traceState": "", "parentSpanId": "30652f6f8b511470", "name": "update_inventory", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:46.151774720Z", "endTime": "2021-04-20T20:33:46.278444288Z", "durationInNanos": 126669568, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "e270a32c23bb3d64"}}
+{ "traceId": "ba5a69d5dfd1eaa4077451d452ba473b", "spanId": "e270a32c23bb3d64", "traceState": "", "parentSpanId": "b9eb99e7f12a273f", "name": "cart_empty", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:46.505004800Z", "endTime": "2021-04-20T20:33:46.555533056Z", "durationInNanos": 50528256, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "a3ff3a8683434406"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "a3ff3a8683434406", "traceState": "", "parentSpanId": "c78ae9d1aa24d379", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.821765888Z", "endTime": "2021-04-20T20:33:46.822455808Z", "durationInNanos": 689920, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': '1'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "63f9d7eb1b86d29a"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "63f9d7eb1b86d29a", "traceState": "", "parentSpanId": "43dc7bc2e05bfa0f", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:46.800928512Z", "endTime": "2021-04-20T20:33:46.835864064Z", "durationInNanos": 34935552, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58744, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "43dc7bc2e05bfa0f"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "43dc7bc2e05bfa0f", "traceState": "", "parentSpanId": "51c0b6f4525f8ce7", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.798465280Z", "endTime": "2021-04-20T20:33:46.840932096Z", "durationInNanos": 42466816, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "fddac8b6501344bf"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "fddac8b6501344bf", "traceState": "", "parentSpanId": "3b2b065511029f95", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.866892288Z", "endTime": "2021-04-20T20:33:46.867537408Z", "durationInNanos": 645120, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': '3'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "759ba13f98ab3fc6"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "759ba13f98ab3fc6", "traceState": "", "parentSpanId": "fa4a423fd5b1089d", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:46.846178304Z", "endTime": "2021-04-20T20:33:46.874823424Z", "durationInNanos": 28645120, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58748, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "fa4a423fd5b1089d"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "fa4a423fd5b1089d", "traceState": "", "parentSpanId": "51c0b6f4525f8ce7", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.843851264Z", "endTime": "2021-04-20T20:33:46.879571200Z", "durationInNanos": 35719936, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "f0aeb9700f457880"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "f0aeb9700f457880", "traceState": "", "parentSpanId": "51c0b6f4525f8ce7", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.882574848Z", "endTime": "2021-04-20T20:33:46.918776576Z", "durationInNanos": 36201728, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "51c0b6f4525f8ce7"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "51c0b6f4525f8ce7", "traceState": "", "parentSpanId": "46804b074d510e22", "name": "update_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:46.798070016Z", "endTime": "2021-04-20T20:33:46.929501952Z", "durationInNanos": 131431936, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "4fb9849a6b80b6f2"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "4fb9849a6b80b6f2", "traceState": "", "parentSpanId": "8d4b7a48cb7ee8e9", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:47.263351552Z", "endTime": "2021-04-20T20:33:47.264209664Z", "durationInNanos": 858112, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': 3}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "f78dbd14cda8862e"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "f78dbd14cda8862e", "traceState": "", "parentSpanId": "b974c6840493462f", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:47.230816768Z", "endTime": "2021-04-20T20:33:47.274358784Z", "durationInNanos": 43542016, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "Not enough storage for itemId orange", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58768, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "3e1ca23a1316a089"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "3e1ca23a1316a089", "traceState": "", "parentSpanId": "9995da51cebe7887", "name": "update_inventory", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:47.188528128Z", "endTime": "2021-04-20T20:33:47.323207424Z", "durationInNanos": 134679296, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "35a5641a51a07620"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "35a5641a51a07620", "traceState": "", "parentSpanId": "f707df9bafaf7974", "name": "payment", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:47.184227840Z", "endTime": "2021-04-20T20:33:47.335330816Z", "durationInNanos": 151102976, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8084, "span.attributes.http@status_text": "PARTIAL CONTENT", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60014, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/checkout", "span.attributes.http@host": "localhost:8084", "span.attributes.http@target": "/checkout", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "5b03c5aa49169de7"}}
+{ "traceId": "e48a85b3dc34426059aa1347ea4171a5", "spanId": "5b03c5aa49169de7", "traceState": "", "parentSpanId": "153b191f5bba208f", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:47.480588800Z", "endTime": "2021-04-20T20:33:47.490298112Z", "durationInNanos": 9709312, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "SERVICE UNAVAILABLE", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32926, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 503 }
+{ "index":{"_id": "a0333ab0c0fb425e"}}
+{ "traceId": "16f5176887289baa94c27f12604b5163", "spanId": "a0333ab0c0fb425e", "traceState": "", "parentSpanId": "e36a01c310db6537", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:47.777365760Z", "endTime": "2021-04-20T20:33:47.806075648Z", "durationInNanos": 28709888, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58788, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e36a01c310db6537"}}
+{ "traceId": "16f5176887289baa94c27f12604b5163", "spanId": "e36a01c310db6537", "traceState": "", "parentSpanId": "b7db1195f7777f37", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:47.775088640Z", "endTime": "2021-04-20T20:33:47.810972160Z", "durationInNanos": 35883520, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "246d5a128abc0323"}}
+{ "traceId": "16f5176887289baa94c27f12604b5163", "spanId": "246d5a128abc0323", "traceState": "", "parentSpanId": "0adbc627a3ff01db", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:47.856003328Z", "endTime": "2021-04-20T20:33:47.880837376Z", "durationInNanos": 24834048, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "b7db1195f7777f37"}}
+{ "traceId": "16f5176887289baa94c27f12604b5163", "spanId": "b7db1195f7777f37", "traceState": "", "parentSpanId": "48c5f132edd1dce1", "name": "update_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:47.774677248Z", "endTime": "2021-04-20T20:33:47.900943872Z", "durationInNanos": 126266624, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "8d13c5fb5cb910ab"}}
+{ "traceId": "16f5176887289baa94c27f12604b5163", "spanId": "8d13c5fb5cb910ab", "traceState": "", "parentSpanId": "ebfe1ad9b112ca2a", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:47.771634688Z", "endTime": "2021-04-20T20:33:47.907790080Z", "durationInNanos": 136155392, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/update_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "36362df397ac500d"}}
+{ "traceId": "2aa556a9a859155d7f578aacf259588f", "spanId": "36362df397ac500d", "traceState": "", "parentSpanId": "29749eb615c7cf76", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:48.093012480Z", "endTime": "2021-04-20T20:33:48.128655104Z", "durationInNanos": 35642624, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/get_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "29749eb615c7cf76"}}
+{ "traceId": "2aa556a9a859155d7f578aacf259588f", "spanId": "29749eb615c7cf76", "traceState": "", "parentSpanId": "9a8427df12be8522", "name": "get_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:48.092771840Z", "endTime": "2021-04-20T20:33:48.138572032Z", "durationInNanos": 45800192, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "60b801fae48abf9b"}}
+{ "traceId": "2aa556a9a859155d7f578aacf259588f", "spanId": "60b801fae48abf9b", "traceState": "", "parentSpanId": "3e916e70241c5f31", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:48.089861120Z", "endTime": "2021-04-20T20:33:48.145265920Z", "durationInNanos": 55404800, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/get_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "fc52a63dddb6c78e"}}
+{ "traceId": "a7e35e333fe32a4fa0448bf258fff8e9", "spanId": "fc52a63dddb6c78e", "traceState": "", "parentSpanId": "a7ef8140aea6adc9", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:48.767165440Z", "endTime": "2021-04-20T20:33:48.771305728Z", "durationInNanos": 4140288, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "a7ef8140aea6adc9"}}
+{ "traceId": "a7e35e333fe32a4fa0448bf258fff8e9", "spanId": "a7ef8140aea6adc9", "traceState": "", "parentSpanId": "f0839669f041b029", "name": "get_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:48.727941632Z", "endTime": "2021-04-20T20:33:48.774041600Z", "durationInNanos": 46099968, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "e038c5aba828ea58"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "e038c5aba828ea58", "traceState": "", "parentSpanId": "658da2faba59acd9", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.023798016Z", "endTime": "2021-04-20T20:33:49.024448256Z", "durationInNanos": 650240, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': '1'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "81de5d2c6aa0859e"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "81de5d2c6aa0859e", "traceState": "", "parentSpanId": "0c1e1c234af592e4", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:49.042136064Z", "endTime": "2021-04-20T20:33:49.071018496Z", "durationInNanos": 28882432, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58840, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e25b39ceacb30b75"}}
+{ "traceId": "65e793c50b861f00c1534090639dd7c3", "spanId": "e25b39ceacb30b75", "traceState": "", "parentSpanId": "fec494ea1cd015e3", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:45.301444832Z", "endTime": "2021-04-20T20:33:45.302604111Z", "durationInNanos": 1159279, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-4", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "a1339d62f81ccd32"}}
+{ "traceId": "02feb3a4f611abd81f2a53244d1278ae", "spanId": "a1339d62f81ccd32", "traceState": "", "parentSpanId": "2ac8b4cda3c0f1f9", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:45.711423559Z", "endTime": "2021-04-20T20:33:45.712615012Z", "durationInNanos": 1191453, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-6", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "fdbb1f2f7b488e87"}}
+{ "traceId": "97551ce4600c334d4ab8fb8725ac1e67", "spanId": "fdbb1f2f7b488e87", "traceState": "", "parentSpanId": "75432a4e251c77c6", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:45.982518483Z", "endTime": "2021-04-20T20:33:45.983665774Z", "durationInNanos": 1147291, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-8", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "3ee4a8601f798b23"}}
+{ "traceId": "ecfe3ff116a31b4c5ec107289b615ff3", "spanId": "3ee4a8601f798b23", "traceState": "", "parentSpanId": "74dbc2be658b50d8", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:48.456438616Z", "endTime": "2021-04-20T20:33:48.457460497Z", "durationInNanos": 1021881, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-10", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 140, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "552e8512fb52ccb5"}}
+{ "traceId": "c0ef65e0d991727dbe26a071fd10e407", "spanId": "552e8512fb52ccb5", "traceState": "", "parentSpanId": "504e26f11e5bb1ae", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:44.596001537Z", "endTime": "2021-04-20T20:33:44.597771774Z", "durationInNanos": 1770237, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-10", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 140, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57902, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "11f0fc7fd6fc8ef7"}}
+{ "traceId": "2aa556a9a859155d7f578aacf259588f", "spanId": "11f0fc7fd6fc8ef7", "traceState": "", "parentSpanId": "b45e32302ccd4555", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:48.133001853Z", "endTime": "2021-04-20T20:33:48.134747430Z", "durationInNanos": 1745577, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-8", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58050, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "6436b12426e22058"}}
+{ "traceId": "a7e35e333fe32a4fa0448bf258fff8e9", "spanId": "6436b12426e22058", "traceState": "", "parentSpanId": "fc52a63dddb6c78e", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:48.769001550Z", "endTime": "2021-04-20T20:33:48.770509554Z", "durationInNanos": 1508004, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-3", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 133, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58070, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "be8803ab43db27ca"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "be8803ab43db27ca", "traceState": "", "parentSpanId": "1ca472e346ee563d", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:49.084217344Z", "endTime": "2021-04-20T20:33:49.111971584Z", "durationInNanos": 27754240, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "27d4fe07134ea308"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "27d4fe07134ea308", "traceState": "", "parentSpanId": "6de234553c12cdd0", "name": "update_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:48.999261952Z", "endTime": "2021-04-20T20:33:49.132644864Z", "durationInNanos": 133382912, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32980, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/update_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "7ab01768aa773b1c"}}
+{ "traceId": "da0666d73c1645d392576e56619d8c6e", "spanId": "7ab01768aa773b1c", "traceState": "", "parentSpanId": "c7c175f4366ce130", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.318971392Z", "endTime": "2021-04-20T20:33:49.340009216Z", "durationInNanos": 21037824, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "1e69961f46e59586"}}
+{ "traceId": "da0666d73c1645d392576e56619d8c6e", "spanId": "1e69961f46e59586", "traceState": "", "parentSpanId": "73d85e6251f927f6", "name": "cartEmpty", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:49.288094720Z", "endTime": "2021-04-20T20:33:49.346589952Z", "durationInNanos": 58495232, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "PUT", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58854, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/cart_empty", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/cart_empty", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "a4790e6461fa0d5d"}}
+{ "traceId": "da0666d73c1645d392576e56619d8c6e", "spanId": "a4790e6461fa0d5d", "traceState": "", "parentSpanId": "8979ca2f03690516", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:49.284838912Z", "endTime": "2021-04-20T20:33:49.364374528Z", "durationInNanos": 79535616, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32998, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c4eb12c87b56bbaf"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "c4eb12c87b56bbaf", "traceState": "", "parentSpanId": "b7362733de8bfa9c", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:49.527205120Z", "endTime": "2021-04-20T20:33:49.551947008Z", "durationInNanos": 24741888, "serviceName": "database", "events": [ { "time": "2021-04-20T20:33:49.551908096Z", "name": "exception", "attributes": { "exception@message": "", "exception@type": "InvalidItemUpdate", "exception@stacktrace": """Traceback (most recent call last): File "/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py", line 804, in use_span yield span File "databaseService.py", line 162, in updateItem raise InvalidItemUpdate("Not enough storage for itemId {}".format(data[ "ItemId" ])) InvalidItemUpdate """ }, "droppedAttributesCount": 0 } ], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "status.message": "InvalidItemUpdate: ", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 2, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "b7362733de8bfa9c"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "b7362733de8bfa9c", "traceState": "", "parentSpanId": "9be2ff98ca6d0261", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:49.526326272Z", "endTime": "2021-04-20T20:33:49.556307200Z", "durationInNanos": 29980928, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "Not enough storage for itemId banana", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58866, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "9be2ff98ca6d0261"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "9be2ff98ca6d0261", "traceState": "", "parentSpanId": "28991f1d3a174ce4", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.523984384Z", "endTime": "2021-04-20T20:33:49.561157120Z", "durationInNanos": 37172736, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "Not enough storage for itemId banana", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "bb41f245f32492e4"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "bb41f245f32492e4", "traceState": "", "parentSpanId": "6025c3c1f9ee5054", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.517226496Z", "endTime": "2021-04-20T20:33:49.661549056Z", "durationInNanos": 144322560, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8084/checkout", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "PARTIAL CONTENT", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "2c3fe2ecd7602e0b"}}
+{ "traceId": "7a3182e62d533fa1e0617f21f5681a37", "spanId": "2c3fe2ecd7602e0b", "traceState": "", "parentSpanId": "ecc02e73350ce790", "name": "cartEmpty", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:49.850896896Z", "endTime": "2021-04-20T20:33:49.902683392Z", "durationInNanos": 51786496, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "PUT", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58882, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/cart_empty", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/cart_empty", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "3b0e8b5888901f7b"}}
+{ "traceId": "7a3182e62d533fa1e0617f21f5681a37", "spanId": "3b0e8b5888901f7b", "traceState": "", "parentSpanId": "de9f1128bf12b7b9", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.910390784Z", "endTime": "2021-04-20T20:33:49.915180544Z", "durationInNanos": 4789760, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c6621138316a73b8"}}
+{ "traceId": "247d610dcbd05da1c7902081b6bec1f6", "spanId": "c6621138316a73b8", "traceState": "", "parentSpanId": "6f5a1a55f4c950f0", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:50.221707008Z", "endTime": "2021-04-20T20:33:50.250929920Z", "durationInNanos": 29222912, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58900, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "6f5a1a55f4c950f0"}}
+{ "traceId": "247d610dcbd05da1c7902081b6bec1f6", "spanId": "6f5a1a55f4c950f0", "traceState": "", "parentSpanId": "d18bdbb97967e206", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:50.219329024Z", "endTime": "2021-04-20T20:33:50.255876352Z", "durationInNanos": 36547328, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "d18bdbb97967e206"}}
+{ "traceId": "247d610dcbd05da1c7902081b6bec1f6", "spanId": "d18bdbb97967e206", "traceState": "", "parentSpanId": "3b639def2d6ec40f", "name": "update_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:50.141257984Z", "endTime": "2021-04-20T20:33:50.267165184Z", "durationInNanos": 125907200, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "6a539e36635daed1"}}
+{ "traceId": "eef4554373e188267b38928e2dabeab4", "spanId": "6a539e36635daed1", "traceState": "", "parentSpanId": "13bed71d66dcc038", "name": "getCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:50.480547328Z", "endTime": "2021-04-20T20:33:50.509742080Z", "durationInNanos": 29194752, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58912, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/get_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e282094546b98e61"}}
+{ "traceId": "eef4554373e188267b38928e2dabeab4", "spanId": "e282094546b98e61", "traceState": "", "parentSpanId": "3a565f7129913c17", "name": "get_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:50.477368832Z", "endTime": "2021-04-20T20:33:50.527277568Z", "durationInNanos": 49908736, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 33056, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/get_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c80dc4c948d060d2"}}
+{ "traceId": "20eabd650f3a068d9f590786f56885e7", "spanId": "c80dc4c948d060d2", "traceState": "", "parentSpanId": "7e0f8516534902ba", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:50.727715584Z", "endTime": "2021-04-20T20:33:50.764667904Z", "durationInNanos": 36952320, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e6af061aa53f5621"}}
+{ "traceId": "20eabd650f3a068d9f590786f56885e7", "spanId": "e6af061aa53f5621", "traceState": "", "parentSpanId": "ecc0e3f8be5250dd", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:50.812071936Z", "endTime": "2021-04-20T20:33:50.836778496Z", "durationInNanos": 24706560, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "268c00835c4cc7ac"}}
+{ "traceId": "20eabd650f3a068d9f590786f56885e7", "spanId": "268c00835c4cc7ac", "traceState": "", "parentSpanId": "7e0f8516534902ba", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:50.848304640Z", "endTime": "2021-04-20T20:33:50.852795392Z", "durationInNanos": 4490752, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "aaa75101bed92d1a"}}
+{ "traceId": "c48260d3774d6c2d4ba77c9e813eadec", "spanId": "aaa75101bed92d1a", "traceState": "", "parentSpanId": "e9893407bba95bf0", "name": "getCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:51.138495232Z", "endTime": "2021-04-20T20:33:51.166544384Z", "durationInNanos": 28049152, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58940, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/get_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "bf2482df930950bb"}}
+{ "traceId": "c48260d3774d6c2d4ba77c9e813eadec", "spanId": "bf2482df930950bb", "traceState": "", "parentSpanId": "0068b98ffc99f9ea", "name": "get_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:51.135342336Z", "endTime": "2021-04-20T20:33:51.183588864Z", "durationInNanos": 48246528, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 33084, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/get_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "93330439f7f89167"}}
+{ "traceId": "7f63958e2172b12500e40eed557a31c7", "spanId": "93330439f7f89167", "traceState": "", "parentSpanId": "9b81a0201a53b84c", "name": "get_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:51.683300864Z", "endTime": "2021-04-20T20:33:51.708692992Z", "durationInNanos": 25392128, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "a9ed253bbf36e70e"}}
+{ "traceId": "340a6c6f70a21d1bc8456dbbe5c79929", "spanId": "a9ed253bbf36e70e", "traceState": "", "parentSpanId": "a5a0c83096c8fa20", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.016589056Z", "endTime": "2021-04-20T20:33:52.017283328Z", "durationInNanos": 694272, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': '3'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "6576e80159aee6b8"}}
+{ "traceId": "340a6c6f70a21d1bc8456dbbe5c79929", "spanId": "6576e80159aee6b8", "traceState": "", "parentSpanId": "71e8453fb0ed5faf", "name": "update_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:51.953919744Z", "endTime": "2021-04-20T20:33:52.078983680Z", "durationInNanos": 125063936, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "f8aedbcbab807a78"}}
+{ "traceId": "261f4f9f6d49c04588ddfc0b22d167c6", "spanId": "f8aedbcbab807a78", "traceState": "", "parentSpanId": "ed7415d8c9c25969", "name": "clear_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.207869440Z", "endTime": "2021-04-20T20:33:52.278209280Z", "durationInNanos": 70339840, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "ed7415d8c9c25969"}}
+{ "traceId": "261f4f9f6d49c04588ddfc0b22d167c6", "spanId": "ed7415d8c9c25969", "traceState": "", "parentSpanId": "0db04213ba31cb79", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:52.207073792Z", "endTime": "2021-04-20T20:33:52.280379136Z", "durationInNanos": 73305344, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 33132, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "702250f453a02be6"}}
+{ "traceId": "5be8370207cbb002a165d369fbc57b57", "spanId": "702250f453a02be6", "traceState": "", "parentSpanId": "4acae5e4234f52f8", "name": "update_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.496930560Z", "endTime": "2021-04-20T20:33:52.623046656Z", "durationInNanos": 126116096, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "84584d9e50950ea5"}}
+{ "traceId": "4216a647a4396e50fc12cc78d571557e", "spanId": "84584d9e50950ea5", "traceState": "", "parentSpanId": "d85ef60c6b05ea1e", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.815784192Z", "endTime": "2021-04-20T20:33:52.820143872Z", "durationInNanos": 4359680, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e0514a47c90c0ead"}}
+{ "traceId": "4216a647a4396e50fc12cc78d571557e", "spanId": "e0514a47c90c0ead", "traceState": "", "parentSpanId": "d620278613ba1273", "name": "update_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:52.674479616Z", "endTime": "2021-04-20T20:33:52.825445632Z", "durationInNanos": 150966016, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 33160, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/update_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "dfd4cc33b9f49d74"}}
+{ "traceId": "4216a647a4396e50fc12cc78d571557e", "spanId": "dfd4cc33b9f49d74", "traceState": "", "parentSpanId": "", "name": "client_create_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.672014080Z", "endTime": "2021-04-20T20:33:52.833018624Z", "durationInNanos": 161004544, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_create_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "84e395f144998c01"}}
+{ "traceId": "e447ed617aa651a7593c720d7e976625", "spanId": "84e395f144998c01", "traceState": "", "parentSpanId": "b6b76ad0ea7a18e0", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.949800192Z", "endTime": "2021-04-20T20:33:52.951031040Z", "durationInNanos": 1230848, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT ItemId, TotalQty FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "7e35a93ae1f1d3dc"}}
+{ "traceId": "e447ed617aa651a7593c720d7e976625", "spanId": "7e35a93ae1f1d3dc", "traceState": "", "parentSpanId": "a77612b8a846894a", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:52.926126336Z", "endTime": "2021-04-20T20:33:53.003924224Z", "durationInNanos": 77797888, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 33178, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "a77612b8a846894a"}}
+{ "traceId": "e447ed617aa651a7593c720d7e976625", "spanId": "a77612b8a846894a", "traceState": "", "parentSpanId": "36bf8ffe6bfab949", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.923979776Z", "endTime": "2021-04-20T20:33:53.008655360Z", "durationInNanos": 84675584, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/clear_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "36bf8ffe6bfab949"}}
+{ "traceId": "e447ed617aa651a7593c720d7e976625", "spanId": "36bf8ffe6bfab949", "traceState": "", "parentSpanId": "", "name": "client_cancel_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.923733504Z", "endTime": "2021-04-20T20:33:53.011512832Z", "durationInNanos": 87779328, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_cancel_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "057ca06095200357"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "057ca06095200357", "traceState": "", "parentSpanId": "ab2cfda3f66cd29a", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:53.258444032Z", "endTime": "2021-04-20T20:33:53.288954112Z", "durationInNanos": 30510080, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "Not enough storage for itemId orange", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 59050, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "66a2144a58008463"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "66a2144a58008463", "traceState": "", "parentSpanId": "79e7e8f4a6b9cfd6", "name": "checkout", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:53.211445504Z", "endTime": "2021-04-20T20:33:53.348402432Z", "durationInNanos": 136956928, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "7c1551bf8ecff1e9"}}
+{ "traceId": "d5bc99166e521eec173bcb7f9b0d3c43", "spanId": "7c1551bf8ecff1e9", "traceState": "", "parentSpanId": "1baf1e42d2eaae2a", "name": "cartEmpty", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:53.432177920Z", "endTime": "2021-04-20T20:33:53.488074240Z", "durationInNanos": 55896320, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "PUT", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 59064, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/cart_empty", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/cart_empty", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "d074c89b98685510"}}
+{ "traceId": "7a3182e62d533fa1e0617f21f5681a37", "spanId": "d074c89b98685510", "traceState": "", "parentSpanId": "7b337ab41060959b", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:49.912560857Z", "endTime": "2021-04-20T20:33:49.913841981Z", "durationInNanos": 1281124, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-8", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "8d1a3be816dc5afe"}}
+{ "traceId": "340a6c6f70a21d1bc8456dbbe5c79929", "spanId": "8d1a3be816dc5afe", "traceState": "", "parentSpanId": "391c448e02ace429", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.073446568Z", "endTime": "2021-04-20T20:33:52.074477704Z", "durationInNanos": 1031136, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-3", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 133, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "92b74f59ddd54783"}}
+{ "traceId": "588f0d3438674277899b1f0bf2f2ebf2", "spanId": "92b74f59ddd54783", "traceState": "", "parentSpanId": "", "name": "mysql", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:15.007993856Z", "endTime": "2021-04-20T20:33:15.024957696Z", "durationInNanos": 16963840, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "mysql", "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "", "span.attributes.db@statement": "CREATE TABLE `User_Carts` (  `ItemId` varchar(16) NOT NULL,  `TotalQty` int(11) NOT NULL,  PRIMARY KEY (`ItemId`)) ENGINE=InnoDB", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "25af21b469c032b3"}}
+{ "traceId": "64398afff83d4ce40feb342b493d03cf", "spanId": "25af21b469c032b3", "traceState": "", "parentSpanId": "", "name": "HTTP GET", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:17.441215232Z", "endTime": "2021-04-20T20:33:17.444359680Z", "durationInNanos": 3144448, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "HTTP GET", "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8082, "span.attributes.http@status_text": "NOT FOUND", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "curl/7.61.1", "span.attributes.net@peer@port": 47996, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@host": "localhost:8082", "span.attributes.http@target": "/", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 404 }
+{ "index":{"_id": "6c89443d5e23abf3"}}
+{ "traceId": "df5948afbb8aa0bdd587a5b81d7589da", "spanId": "6c89443d5e23abf3", "traceState": "", "parentSpanId": "c9ffe4c0af278e39", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:28.392941824Z", "endTime": "2021-04-20T20:33:28.467089152Z", "durationInNanos": 74147328, "serviceName": "authentication", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139949516139040", "resource.attributes.service@name": "authentication", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "96e7fdedd82ab53c"}}
+{ "traceId": "d37d709d5695f213e4ca41ac874c00bc", "spanId": "96e7fdedd82ab53c", "traceState": "", "parentSpanId": "2c122c9d8977d38d", "name": "verify_login", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:32.542609152Z", "endTime": "2021-04-20T20:33:32.542644224Z", "durationInNanos": 35072, "serviceName": "authentication", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139949516139040", "resource.attributes.service@name": "authentication", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "71869e6acbd9b84e"}}
+{ "traceId": "d37d709d5695f213e4ca41ac874c00bc", "spanId": "71869e6acbd9b84e", "traceState": "", "parentSpanId": "6921db03f367dc79", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:32.548511744Z", "endTime": "2021-04-20T20:33:32.614019584Z", "durationInNanos": 65507840, "serviceName": "recommendation", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8082/read_inventory", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140018306314192", "resource.attributes.service@name": "recommendation", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "39d9f21d9865f9e6"}}
+{ "traceId": "d37d709d5695f213e4ca41ac874c00bc", "spanId": "39d9f21d9865f9e6", "traceState": "", "parentSpanId": "", "name": "load_main_screen", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:32.538752Z", "endTime": "2021-04-20T20:33:32.652837376Z", "durationInNanos": 114085376, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "load_main_screen", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "2a1b45c16eaad09c"}}
+{ "traceId": "a80cb852f0c27762cfa923836bc5fe88", "spanId": "2a1b45c16eaad09c", "traceState": "", "parentSpanId": "9ba40f97c2ae86a7", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:33.447434240Z", "endTime": "2021-04-20T20:33:33.454592512Z", "durationInNanos": 7158272, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "9ba40f97c2ae86a7"}}
+{ "traceId": "a80cb852f0c27762cfa923836bc5fe88", "spanId": "9ba40f97c2ae86a7", "traceState": "", "parentSpanId": "daf5a14650228970", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:33.446325504Z", "endTime": "2021-04-20T20:33:33.457898240Z", "durationInNanos": 11572736, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "SERVICE UNAVAILABLE", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60706, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 503 }
+{ "index":{"_id": "84fe46385d17b02c"}}
+{ "traceId": "d37d709d5695f213e4ca41ac874c00bc", "spanId": "84fe46385d17b02c", "traceState": "", "parentSpanId": "e1bc8cfc3ceb0aaf", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:32.601002072Z", "endTime": "2021-04-20T20:33:32.603410081Z", "durationInNanos": 2408009, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-6", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57560, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "2a5ae161952463e2"}}
+{ "traceId": "d37d709d5695f213e4ca41ac874c00bc", "spanId": "2a5ae161952463e2", "traceState": "", "parentSpanId": "ff013ccfd9d58cec", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:32.638002124Z", "endTime": "2021-04-20T20:33:32.640473313Z", "durationInNanos": 2471189, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-10", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 140, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57564, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "d4255abf68ac0402"}}
+{ "traceId": "509da2ddfc1a3d9fc88ed4b62f3cd079", "spanId": "d4255abf68ac0402", "traceState": "", "parentSpanId": "31a0c82890fa754b", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:34.222288128Z", "endTime": "2021-04-20T20:33:34.254911488Z", "durationInNanos": 32623360, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "be5b2f7a197c64cf"}}
+{ "traceId": "509da2ddfc1a3d9fc88ed4b62f3cd079", "spanId": "be5b2f7a197c64cf", "traceState": "", "parentSpanId": "97aa186489e038e0", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:34.219140864Z", "endTime": "2021-04-20T20:33:34.263220992Z", "durationInNanos": 44080128, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e46a02e7b9ed8ecf"}}
+{ "traceId": "509da2ddfc1a3d9fc88ed4b62f3cd079", "spanId": "e46a02e7b9ed8ecf", "traceState": "", "parentSpanId": "c17b37664943c0a0", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:34.269251584Z", "endTime": "2021-04-20T20:33:34.300863232Z", "durationInNanos": 31611648, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "c17b37664943c0a0"}}
+{ "traceId": "509da2ddfc1a3d9fc88ed4b62f3cd079", "spanId": "c17b37664943c0a0", "traceState": "", "parentSpanId": "e5fd4823e84df1a0", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:34.268306688Z", "endTime": "2021-04-20T20:33:34.304210944Z", "durationInNanos": 35904256, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58340, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "55d7f80c6aff4ec7"}}
+{ "traceId": "509da2ddfc1a3d9fc88ed4b62f3cd079", "spanId": "55d7f80c6aff4ec7", "traceState": "", "parentSpanId": "97aa186489e038e0", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:34.312219392Z", "endTime": "2021-04-20T20:33:34.354283520Z", "durationInNanos": 42064128, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c0cb4dc5b7b1db59"}}
+{ "traceId": "9cc5c0acce9b9acc05b1c8d082709609", "spanId": "c0cb4dc5b7b1db59", "traceState": "", "parentSpanId": "16d6fb920c980921", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:35.231047680Z", "endTime": "2021-04-20T20:33:35.236322816Z", "durationInNanos": 5275136, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "6f3b8af3574d67d8"}}
+{ "traceId": "7df67f7205abe19319bad85babb04ca9", "spanId": "6f3b8af3574d67d8", "traceState": "", "parentSpanId": "d7d09b29635c42d0", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:35.667787520Z", "endTime": "2021-04-20T20:33:35.699713792Z", "durationInNanos": 31926272, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "1cfde34b0e64708d"}}
+{ "traceId": "7df67f7205abe19319bad85babb04ca9", "spanId": "1cfde34b0e64708d", "traceState": "", "parentSpanId": "16a087ca75a1c1ae", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:35.714154496Z", "endTime": "2021-04-20T20:33:35.744516352Z", "durationInNanos": 30361856, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "c607c3f259c8a65b"}}
+{ "traceId": "7df67f7205abe19319bad85babb04ca9", "spanId": "c607c3f259c8a65b", "traceState": "", "parentSpanId": "bb9e8ac613f9c314", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:35.778753792Z", "endTime": "2021-04-20T20:33:35.779580160Z", "durationInNanos": 826368, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': '2'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "bb9e8ac613f9c314"}}
+{ "traceId": "7df67f7205abe19319bad85babb04ca9", "spanId": "bb9e8ac613f9c314", "traceState": "", "parentSpanId": "f756b2ab52d63952", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:35.758739968Z", "endTime": "2021-04-20T20:33:35.789022208Z", "durationInNanos": 30282240, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "f19d16050494663f"}}
+{ "traceId": "7df67f7205abe19319bad85babb04ca9", "spanId": "f19d16050494663f", "traceState": "", "parentSpanId": "7d7dc4421190f8f1", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:35.755664896Z", "endTime": "2021-04-20T20:33:35.797313792Z", "durationInNanos": 41648896, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "4d9ad162398612ca"}}
+{ "traceId": "19b592faebd7e10a4824b919bcd3bd89", "spanId": "4d9ad162398612ca", "traceState": "", "parentSpanId": "db173bc10299861f", "name": "HTTP PUT", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.071021056Z", "endTime": "2021-04-20T20:33:36.151107328Z", "durationInNanos": 80086272, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/cart_empty", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "PUT", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "de9f05334009f30f"}}
+{ "traceId": "19b592faebd7e10a4824b919bcd3bd89", "spanId": "de9f05334009f30f", "traceState": "", "parentSpanId": "9e8cf0411a1b61f8", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:36.069997312Z", "endTime": "2021-04-20T20:33:36.166950656Z", "durationInNanos": 96953344, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60770, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "7aa2821664832544"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "7aa2821664832544", "traceState": "", "parentSpanId": "bb004c0fd4fe0458", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.512588032Z", "endTime": "2021-04-20T20:33:36.513520384Z", "durationInNanos": 932352, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': 2}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "b515153fd36d853a"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "b515153fd36d853a", "traceState": "", "parentSpanId": "b5eb104616d427e5", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.489266944Z", "endTime": "2021-04-20T20:33:36.528014080Z", "durationInNanos": 38747136, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "41b5cf2346593387"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "41b5cf2346593387", "traceState": "", "parentSpanId": "9835a28e768c1334", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:36.533314304Z", "endTime": "2021-04-20T20:33:36.564330496Z", "durationInNanos": 31016192, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58410, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "937fb8345b252adb"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "937fb8345b252adb", "traceState": "", "parentSpanId": "b5eb104616d427e5", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:36.614607616Z", "endTime": "2021-04-20T20:33:36.620131584Z", "durationInNanos": 5523968, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "b5eb104616d427e5"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "b5eb104616d427e5", "traceState": "", "parentSpanId": "702b587891032394", "name": "update_inventory", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:36.488680960Z", "endTime": "2021-04-20T20:33:36.622967040Z", "durationInNanos": 134286080, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "702b587891032394"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "702b587891032394", "traceState": "", "parentSpanId": "375cb3ef27c46997", "name": "update_inventory", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:36.487866112Z", "endTime": "2021-04-20T20:33:36.625204992Z", "durationInNanos": 137338880, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8082, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 48158, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_inventory", "span.attributes.http@host": "localhost:8082", "span.attributes.http@target": "/update_inventory", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "d3911d8b057539bb"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "d3911d8b057539bb", "traceState": "", "parentSpanId": "", "name": "client_checkout", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:36.481575424Z", "endTime": "2021-04-20T20:33:36.650631936Z", "durationInNanos": 169056512, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_checkout", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "e71642d4deaf046a"}}
+{ "traceId": "ec830c13f81efb5082f6e40b4dedce71", "spanId": "e71642d4deaf046a", "traceState": "", "parentSpanId": "3d1fe27819634f95", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:37.024145664Z", "endTime": "2021-04-20T20:33:37.047470592Z", "durationInNanos": 23324928, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "c978b33c59a54196"}}
+{ "traceId": "ec830c13f81efb5082f6e40b4dedce71", "spanId": "c978b33c59a54196", "traceState": "", "parentSpanId": "a7fcdbe2bf6d6d75", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:37.062592256Z", "endTime": "2021-04-20T20:33:37.067854080Z", "durationInNanos": 5261824, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "a00565be802b54b4"}}
+{ "traceId": "1730cc8687cb4b504cd934560111d5a1", "spanId": "a00565be802b54b4", "traceState": "", "parentSpanId": "dfbc0ecddf9324b7", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:37.480550912Z", "endTime": "2021-04-20T20:33:37.481288960Z", "durationInNanos": 738048, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': '3'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "67e273104da42d94"}}
+{ "traceId": "1730cc8687cb4b504cd934560111d5a1", "spanId": "67e273104da42d94", "traceState": "", "parentSpanId": "e1f71dfda83b894c", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:37.527881984Z", "endTime": "2021-04-20T20:33:37.528583168Z", "durationInNanos": 701184, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': '2'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "INSERT INTO User_Carts (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "965c5d8b0b6276c0"}}
+{ "traceId": "1730cc8687cb4b504cd934560111d5a1", "spanId": "965c5d8b0b6276c0", "traceState": "", "parentSpanId": "67a615bb3d2aef86", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:37.500228096Z", "endTime": "2021-04-20T20:33:37.541810176Z", "durationInNanos": 41582080, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "6bf6fc5237230c42"}}
+{ "traceId": "1730cc8687cb4b504cd934560111d5a1", "spanId": "6bf6fc5237230c42", "traceState": "", "parentSpanId": "1eda1c86b53778f8", "name": "update_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:37.404817152Z", "endTime": "2021-04-20T20:33:37.554722304Z", "durationInNanos": 149905152, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60812, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/update_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "91921c51d51c884f"}}
+{ "traceId": "c9f83a98e8f1826c3a822eeb7b85a9d6", "spanId": "91921c51d51c884f", "traceState": "", "parentSpanId": "fa65816f2428a950", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:37.806868480Z", "endTime": "2021-04-20T20:33:37.807457792Z", "durationInNanos": 589312, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT ItemId, TotalQty FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "8aa7fc60f5c7d6b9"}}
+{ "traceId": "c9f83a98e8f1826c3a822eeb7b85a9d6", "spanId": "8aa7fc60f5c7d6b9", "traceState": "", "parentSpanId": "fa65816f2428a950", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:37.810970624Z", "endTime": "2021-04-20T20:33:37.811611392Z", "durationInNanos": 640768, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': 1}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "INSERT INTO Inventory_Items (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "6e1dcac7d59fac91"}}
+{ "traceId": "c9f83a98e8f1826c3a822eeb7b85a9d6", "spanId": "6e1dcac7d59fac91", "traceState": "", "parentSpanId": "fa65816f2428a950", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:37.823713280Z", "endTime": "2021-04-20T20:33:37.843032832Z", "durationInNanos": 19319552, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "921202e7eca9c5be"}}
+{ "traceId": "c9f83a98e8f1826c3a822eeb7b85a9d6", "spanId": "921202e7eca9c5be", "traceState": "", "parentSpanId": "3b8fd25db26f6336", "name": "HTTP PUT", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:37.784199936Z", "endTime": "2021-04-20T20:33:37.854919424Z", "durationInNanos": 70719488, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/cart_empty", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "PUT", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "d65f4119e3d35c6f"}}
+{ "traceId": "22bdfd493901782340e7eea9e077acb9", "spanId": "d65f4119e3d35c6f", "traceState": "", "parentSpanId": "b8440d5b592650f2", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:38.157860352Z", "endTime": "2021-04-20T20:33:38.185885952Z", "durationInNanos": 28025600, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "1b26c8058d3cd7b6"}}
+{ "traceId": "22bdfd493901782340e7eea9e077acb9", "spanId": "1b26c8058d3cd7b6", "traceState": "", "parentSpanId": "2fa45786a2e85af4", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:38.238149632Z", "endTime": "2021-04-20T20:33:38.277396480Z", "durationInNanos": 39246848, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "952b9f3e06ee5533"}}
+{ "traceId": "22bdfd493901782340e7eea9e077acb9", "spanId": "952b9f3e06ee5533", "traceState": "", "parentSpanId": "45ff7de69dace1d6", "name": "update_inventory", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:38.153484288Z", "endTime": "2021-04-20T20:33:38.292515584Z", "durationInNanos": 139031296, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8082, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 48218, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_inventory", "span.attributes.http@host": "localhost:8082", "span.attributes.http@target": "/update_inventory", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "45ff7de69dace1d6"}}
+{ "traceId": "22bdfd493901782340e7eea9e077acb9", "spanId": "45ff7de69dace1d6", "traceState": "", "parentSpanId": "67c3240b15bfc41a", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:38.151339520Z", "endTime": "2021-04-20T20:33:38.297237504Z", "durationInNanos": 145897984, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8082/update_inventory", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "03699d100410017f"}}
+{ "traceId": "82c7cf3d3540450a3acc00c41b7a9562", "spanId": "03699d100410017f", "traceState": "", "parentSpanId": "e65cbb55e80306bb", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:38.578456320Z", "endTime": "2021-04-20T20:33:38.605642496Z", "durationInNanos": 27186176, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "7d1c23fc87c00b35"}}
+{ "traceId": "82c7cf3d3540450a3acc00c41b7a9562", "spanId": "7d1c23fc87c00b35", "traceState": "", "parentSpanId": "d3449d96433ef65b", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:38.641069568Z", "endTime": "2021-04-20T20:33:38.641892096Z", "durationInNanos": 822528, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': 3}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "07b4d48cb660e9cc"}}
+{ "traceId": "82c7cf3d3540450a3acc00c41b7a9562", "spanId": "07b4d48cb660e9cc", "traceState": "", "parentSpanId": "bde992160f31f631", "name": "payment", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:38.556106240Z", "endTime": "2021-04-20T20:33:38.737072384Z", "durationInNanos": 180966144, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8084, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 59740, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/checkout", "span.attributes.http@host": "localhost:8084", "span.attributes.http@target": "/checkout", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "9aa1509f5e191508"}}
+{ "traceId": "509da2ddfc1a3d9fc88ed4b62f3cd079", "spanId": "9aa1509f5e191508", "traceState": "", "parentSpanId": "7b78d2bea411b2fe", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:34.359700428Z", "endTime": "2021-04-20T20:33:34.361556108Z", "durationInNanos": 1855680, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-4", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "e1dfd31ab1a2b193"}}
+{ "traceId": "c17023ed734d4daa5f97bb7972f0c935", "spanId": "e1dfd31ab1a2b193", "traceState": "", "parentSpanId": "7145d5e8e15acfb7", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:34.745707353Z", "endTime": "2021-04-20T20:33:34.747566050Z", "durationInNanos": 1858697, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-6", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "2751e720b71a60a4"}}
+{ "traceId": "1730cc8687cb4b504cd934560111d5a1", "spanId": "2751e720b71a60a4", "traceState": "", "parentSpanId": "31f5aad7d2ea1fcb", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:37.547512262Z", "endTime": "2021-04-20T20:33:37.548630086Z", "durationInNanos": 1117824, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-10", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 140, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "4b7e5e41b0e7fd04"}}
+{ "traceId": "7df67f7205abe19319bad85babb04ca9", "spanId": "4b7e5e41b0e7fd04", "traceState": "", "parentSpanId": "d11da5c9c394bde8", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:35.802002385Z", "endTime": "2021-04-20T20:33:35.804283108Z", "durationInNanos": 2280723, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-10", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 140, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57628, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "74e54ea9fdbf735f"}}
+{ "traceId": "cb077f0c195ce825befded0fb71c76f1", "spanId": "74e54ea9fdbf735f", "traceState": "", "parentSpanId": "900fb4b6271869ab", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:36.635002138Z", "endTime": "2021-04-20T20:33:36.637319816Z", "durationInNanos": 2317678, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-6", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57660, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "75b7e359c49acf55"}}
+{ "traceId": "82c7cf3d3540450a3acc00c41b7a9562", "spanId": "75b7e359c49acf55", "traceState": "", "parentSpanId": "02d508caf899367c", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:38.562002009Z", "endTime": "2021-04-20T20:33:38.563741689Z", "durationInNanos": 1739680, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-8", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57730, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "e1300ec1802ecc3c"}}
+{ "traceId": "b23c2f42f054fd2e3bd6602318e609ed", "spanId": "e1300ec1802ecc3c", "traceState": "", "parentSpanId": "913de07418b7eed7", "name": "cart_empty", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:38.931558144Z", "endTime": "2021-04-20T20:33:38.984496640Z", "durationInNanos": 52938496, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "8c03b29267586319"}}
+{ "traceId": "b23c2f42f054fd2e3bd6602318e609ed", "spanId": "8c03b29267586319", "traceState": "", "parentSpanId": "a03543bce133747e", "name": "clear_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:38.927511808Z", "endTime": "2021-04-20T20:33:39.006228736Z", "durationInNanos": 78716928, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "f5fe5f65731875d1"}}
+{ "traceId": "a371f923b4967cb722e563725cc2a91d", "spanId": "f5fe5f65731875d1", "traceState": "", "parentSpanId": "3ed24d73086e3a5c", "name": "cartSold", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:39.432419840Z", "endTime": "2021-04-20T20:33:39.482711808Z", "durationInNanos": 50291968, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58524, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/cart_sold", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/cart_sold", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "3ed24d73086e3a5c"}}
+{ "traceId": "a371f923b4967cb722e563725cc2a91d", "spanId": "3ed24d73086e3a5c", "traceState": "", "parentSpanId": "e2ca5dbb18427bbc", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:39.430222336Z", "endTime": "2021-04-20T20:33:39.487606272Z", "durationInNanos": 57383936, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/cart_sold", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "8eafdbb08ef33fac"}}
+{ "traceId": "17af7b8dee49e8258b8b5ab82dd0235a", "spanId": "8eafdbb08ef33fac", "traceState": "", "parentSpanId": "f69d6486408d5ceb", "name": "get_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:39.753607936Z", "endTime": "2021-04-20T20:33:39.778727168Z", "durationInNanos": 25119232, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "6f9b9156dc914a59"}}
+{ "traceId": "10b1ec1196741c85609a43ce435cdece", "spanId": "6f9b9156dc914a59", "traceState": "", "parentSpanId": "027e1f4686076d5e", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:40.251508736Z", "endTime": "2021-04-20T20:33:40.252164096Z", "durationInNanos": 655360, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT ItemId, TotalQty FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "7052b8e18f95d355"}}
+{ "traceId": "10b1ec1196741c85609a43ce435cdece", "spanId": "7052b8e18f95d355", "traceState": "", "parentSpanId": "669d2b7892e6854c", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:40.291585280Z", "endTime": "2021-04-20T20:33:40.296150784Z", "durationInNanos": 4565504, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "9253cd2f27e55a6f"}}
+{ "traceId": "10b1ec1196741c85609a43ce435cdece", "spanId": "9253cd2f27e55a6f", "traceState": "", "parentSpanId": "517b250c6b019d50", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:40.227543040Z", "endTime": "2021-04-20T20:33:40.301341184Z", "durationInNanos": 73798144, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60920, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "517b250c6b019d50"}}
+{ "traceId": "10b1ec1196741c85609a43ce435cdece", "spanId": "517b250c6b019d50", "traceState": "", "parentSpanId": "883dff4473fb6cb2", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:40.225460992Z", "endTime": "2021-04-20T20:33:40.305951232Z", "durationInNanos": 80490240, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/clear_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "883dff4473fb6cb2"}}
+{ "traceId": "10b1ec1196741c85609a43ce435cdece", "spanId": "883dff4473fb6cb2", "traceState": "", "parentSpanId": "", "name": "client_cancel_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:40.225210368Z", "endTime": "2021-04-20T20:33:40.308697600Z", "durationInNanos": 83487232, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_cancel_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "1bf5449206413fa6"}}
+{ "traceId": "56280de557e9fa891bb6289d2fd53c8d", "spanId": "1bf5449206413fa6", "traceState": "", "parentSpanId": "8ac46543c6308b05", "name": "pay_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:40.794464Z", "endTime": "2021-04-20T20:33:40.866789376Z", "durationInNanos": 72325376, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60930, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/pay_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/pay_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "a4ba523cda11d1d3"}}
+{ "traceId": "259a8226fae090c7dff75784fc8c7b17", "spanId": "a4ba523cda11d1d3", "traceState": "", "parentSpanId": "d10b1e24cdce1630", "name": "pay_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:41.182262528Z", "endTime": "2021-04-20T20:33:41.253643520Z", "durationInNanos": 71380992, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "1c5f7bbfcfc2fd9c"}}
+{ "traceId": "259a8226fae090c7dff75784fc8c7b17", "spanId": "1c5f7bbfcfc2fd9c", "traceState": "", "parentSpanId": "", "name": "client_pay_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:41.179067136Z", "endTime": "2021-04-20T20:33:41.262793216Z", "durationInNanos": 83726080, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_pay_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "83033b37b8934e4d"}}
+{ "traceId": "5bf7f62e1215df5526664ec45dd9ad63", "spanId": "83033b37b8934e4d", "traceState": "", "parentSpanId": "74ac44c4e08e204b", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:41.646461440Z", "endTime": "2021-04-20T20:33:41.647615744Z", "durationInNanos": 1154304, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT * FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "6b60bf20aca25776"}}
+{ "traceId": "5bf7f62e1215df5526664ec45dd9ad63", "spanId": "6b60bf20aca25776", "traceState": "", "parentSpanId": "7b17041367225c99", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:41.623079680Z", "endTime": "2021-04-20T20:33:41.659422720Z", "durationInNanos": 36343040, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/get_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "b88a8903d68855ac"}}
+{ "traceId": "5bf7f62e1215df5526664ec45dd9ad63", "spanId": "b88a8903d68855ac", "traceState": "", "parentSpanId": "7b17041367225c99", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:41.662379264Z", "endTime": "2021-04-20T20:33:41.667096576Z", "durationInNanos": 4717312, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "7b17041367225c99"}}
+{ "traceId": "5bf7f62e1215df5526664ec45dd9ad63", "spanId": "7b17041367225c99", "traceState": "", "parentSpanId": "1abf21fef72f18ff", "name": "get_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:41.622877440Z", "endTime": "2021-04-20T20:33:41.669995776Z", "durationInNanos": 47118336, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "1e0ea651a120db7b"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "1e0ea651a120db7b", "traceState": "", "parentSpanId": "46c91104e47a2a43", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:42.501964032Z", "endTime": "2021-04-20T20:33:42.533108224Z", "durationInNanos": 31144192, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58598, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "46c91104e47a2a43"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "46c91104e47a2a43", "traceState": "", "parentSpanId": "0791aa225a461844", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:42.499654144Z", "endTime": "2021-04-20T20:33:42.538212352Z", "durationInNanos": 38558208, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "b1622ef608acbe07"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "b1622ef608acbe07", "traceState": "", "parentSpanId": "0c5d67b81c5daaa1", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:42.564037120Z", "endTime": "2021-04-20T20:33:42.564826880Z", "durationInNanos": 789760, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': 3}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "48ab22a6aa9ead3d"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "48ab22a6aa9ead3d", "traceState": "", "parentSpanId": "0791aa225a461844", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:42.581447424Z", "endTime": "2021-04-20T20:33:42.620536064Z", "durationInNanos": 39088640, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "0791aa225a461844"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "0791aa225a461844", "traceState": "", "parentSpanId": "dd10a56f977e819c", "name": "update_inventory", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:42.499253760Z", "endTime": "2021-04-20T20:33:42.631327232Z", "durationInNanos": 132073472, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "dd10a56f977e819c"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "dd10a56f977e819c", "traceState": "", "parentSpanId": "868f60191f3524c9", "name": "update_inventory", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:42.498470144Z", "endTime": "2021-04-20T20:33:42.633447680Z", "durationInNanos": 134977536, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8082, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 48350, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_inventory", "span.attributes.http@host": "localhost:8082", "span.attributes.http@target": "/update_inventory", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "3121ff83a994e9da"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "3121ff83a994e9da", "traceState": "", "parentSpanId": "007459ff1ddd5dfb", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:42.640867584Z", "endTime": "2021-04-20T20:33:42.645658112Z", "durationInNanos": 4790528, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "007459ff1ddd5dfb"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "007459ff1ddd5dfb", "traceState": "", "parentSpanId": "4eaffcf10b0ddc1b", "name": "checkout", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:42.495881472Z", "endTime": "2021-04-20T20:33:42.649110784Z", "durationInNanos": 153229312, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "11538c0100bd4160"}}
+{ "traceId": "c5eabf09201ab4df116e1881d0756035", "spanId": "11538c0100bd4160", "traceState": "", "parentSpanId": "a0bed7d434593b60", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:43.451381504Z", "endTime": "2021-04-20T20:33:43.455993600Z", "durationInNanos": 4612096, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "a0bed7d434593b60"}}
+{ "traceId": "c5eabf09201ab4df116e1881d0756035", "spanId": "a0bed7d434593b60", "traceState": "", "parentSpanId": "36695d818f9b4e9a", "name": "clear_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:43.388621312Z", "endTime": "2021-04-20T20:33:43.458705664Z", "durationInNanos": 70084352, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "5268497625ace4e0"}}
+{ "traceId": "c5eabf09201ab4df116e1881d0756035", "spanId": "5268497625ace4e0", "traceState": "", "parentSpanId": "5e7bc4f9aae01a8f", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:43.385700864Z", "endTime": "2021-04-20T20:33:43.466258432Z", "durationInNanos": 80557568, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/clear_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e272f67b8738c361"}}
+{ "traceId": "1ca5c1d52ca730f16872553cde6933c0", "spanId": "e272f67b8738c361", "traceState": "", "parentSpanId": "f9e3a2177bd81a72", "name": "cartEmpty", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:43.825311744Z", "endTime": "2021-04-20T20:33:43.878611712Z", "durationInNanos": 53299968, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "PUT", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58628, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/cart_empty", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/cart_empty", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c173a5ab72d12cca"}}
+{ "traceId": "5bf7f62e1215df5526664ec45dd9ad63", "spanId": "c173a5ab72d12cca", "traceState": "", "parentSpanId": "4dc028a0167c3cf2", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:41.664562550Z", "endTime": "2021-04-20T20:33:41.665701036Z", "durationInNanos": 1138486, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-6", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "1d6646d320f46f92"}}
+{ "traceId": "1ca5c1d52ca730f16872553cde6933c0", "spanId": "1d6646d320f46f92", "traceState": "", "parentSpanId": "7d14b353b41504e2", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:43.888482916Z", "endTime": "2021-04-20T20:33:43.889715232Z", "durationInNanos": 1232316, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-6", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "cf2a67c23dc23bab"}}
+{ "traceId": "17af7b8dee49e8258b8b5ab82dd0235a", "spanId": "cf2a67c23dc23bab", "traceState": "", "parentSpanId": "652bc8d3182b25df", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:39.791001724Z", "endTime": "2021-04-20T20:33:39.792709638Z", "durationInNanos": 1707914, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-8", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57778, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "f405f62e61d4181f"}}
+{ "traceId": "52190817d7eb1b6d71e66cc9b0b14124", "spanId": "f405f62e61d4181f", "traceState": "", "parentSpanId": "3121ff83a994e9da", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:42.643002265Z", "endTime": "2021-04-20T20:33:42.644751821Z", "durationInNanos": 1749556, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-3", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 133, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57852, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "87af24ccbde5bc6b"}}
+{ "traceId": "c5eabf09201ab4df116e1881d0756035", "spanId": "87af24ccbde5bc6b", "traceState": "", "parentSpanId": "11538c0100bd4160", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:43.453001888Z", "endTime": "2021-04-20T20:33:43.454676059Z", "durationInNanos": 1674171, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-4", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57862, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "4a2d7a09233223ec"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "4a2d7a09233223ec", "traceState": "", "parentSpanId": "570073e77e68be9d", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.206169856Z", "endTime": "2021-04-20T20:33:44.206994688Z", "durationInNanos": 824832, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': '1'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "c1ae726e0fb621b3"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "c1ae726e0fb621b3", "traceState": "", "parentSpanId": "24d81987a47f33dc", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.252928256Z", "endTime": "2021-04-20T20:33:44.253720576Z", "durationInNanos": 792320, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': '3'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "d87a0a46511625fb"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "d87a0a46511625fb", "traceState": "", "parentSpanId": "7696d367503845f7", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:44.232229376Z", "endTime": "2021-04-20T20:33:44.266917888Z", "durationInNanos": 34688512, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58642, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "7696d367503845f7"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "7696d367503845f7", "traceState": "", "parentSpanId": "885e54cf2034b9f4", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.229940992Z", "endTime": "2021-04-20T20:33:44.272091648Z", "durationInNanos": 42150656, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "01b449260ce334f8"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "01b449260ce334f8", "traceState": "", "parentSpanId": "885e54cf2034b9f4", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.320410368Z", "endTime": "2021-04-20T20:33:44.324994048Z", "durationInNanos": 4583680, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c85e5dec4106a06a"}}
+{ "traceId": "96db5f125cb54111f2a95d7419df8a15", "spanId": "c85e5dec4106a06a", "traceState": "", "parentSpanId": "0b957c5bc548b795", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.178796544Z", "endTime": "2021-04-20T20:33:44.335090176Z", "durationInNanos": 156293632, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/update_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "bd67ffd1aca8ebd9"}}
+{ "traceId": "c0ef65e0d991727dbe26a071fd10e407", "spanId": "bd67ffd1aca8ebd9", "traceState": "", "parentSpanId": "0ee38170cee8fb5c", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.555993344Z", "endTime": "2021-04-20T20:33:44.591705344Z", "durationInNanos": 35712000, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/get_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "0ee38170cee8fb5c"}}
+{ "traceId": "c0ef65e0d991727dbe26a071fd10e407", "spanId": "0ee38170cee8fb5c", "traceState": "", "parentSpanId": "afcb84a35556aad5", "name": "get_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:44.555788544Z", "endTime": "2021-04-20T20:33:44.602074368Z", "durationInNanos": 46285824, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "afcb84a35556aad5"}}
+{ "traceId": "c0ef65e0d991727dbe26a071fd10e407", "spanId": "afcb84a35556aad5", "traceState": "", "parentSpanId": "e53a0ddf08ca7fe4", "name": "get_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:44.554990592Z", "endTime": "2021-04-20T20:33:44.604317184Z", "durationInNanos": 49326592, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32802, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/get_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "2131bd5f7b2bb426"}}
+{ "traceId": "70a3f615a998b76cd973d87710572913", "spanId": "2131bd5f7b2bb426", "traceState": "", "parentSpanId": "d6ed9d2f16247916", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:44.940555776Z", "endTime": "2021-04-20T20:33:45.019118848Z", "durationInNanos": 78563072, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/pay_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "83e66a83f1a293d1"}}
+{ "traceId": "65e793c50b861f00c1534090639dd7c3", "spanId": "83e66a83f1a293d1", "traceState": "", "parentSpanId": "5205b0912292faea", "name": "get_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:45.263542528Z", "endTime": "2021-04-20T20:33:45.287819520Z", "durationInNanos": 24276992, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "61e11870abc59f27"}}
+{ "traceId": "65e793c50b861f00c1534090639dd7c3", "spanId": "61e11870abc59f27", "traceState": "", "parentSpanId": "3cf94093fb7bea7c", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:45.260458752Z", "endTime": "2021-04-20T20:33:45.295847168Z", "durationInNanos": 35388416, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/get_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "80e3c195c1e1eb31"}}
+{ "traceId": "02feb3a4f611abd81f2a53244d1278ae", "spanId": "80e3c195c1e1eb31", "traceState": "", "parentSpanId": "9e64d04e62cd7e86", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:45.693580544Z", "endTime": "2021-04-20T20:33:45.694361344Z", "durationInNanos": 780800, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': '2'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "3f748306070acb27"}}
+{ "traceId": "97551ce4600c334d4ab8fb8725ac1e67", "spanId": "3f748306070acb27", "traceState": "", "parentSpanId": "69af53e3494bca1c", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:45.937683456Z", "endTime": "2021-04-20T20:33:45.938361344Z", "durationInNanos": 677888, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': 1}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "INSERT INTO Inventory_Items (ItemId, TotalQty) VALUES (%(ItemId)s, %(Qty)s) ON DUPLICATE KEY UPDATE TotalQty = TotalQty + %(Qty)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "3a025025e0a3b1fa"}}
+{ "traceId": "97551ce4600c334d4ab8fb8725ac1e67", "spanId": "3a025025e0a3b1fa", "traceState": "", "parentSpanId": "093bfc1b96f299dd", "name": "cartEmpty", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:45.912724480Z", "endTime": "2021-04-20T20:33:45.971964416Z", "durationInNanos": 59239936, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "PUT", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58706, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/cart_empty", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/cart_empty", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "093bfc1b96f299dd"}}
+{ "traceId": "97551ce4600c334d4ab8fb8725ac1e67", "spanId": "093bfc1b96f299dd", "traceState": "", "parentSpanId": "b5ad0d70c2c4c7d6", "name": "HTTP PUT", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:45.910498560Z", "endTime": "2021-04-20T20:33:45.977039104Z", "durationInNanos": 66540544, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/cart_empty", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "PUT", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "b5ad0d70c2c4c7d6"}}
+{ "traceId": "97551ce4600c334d4ab8fb8725ac1e67", "spanId": "b5ad0d70c2c4c7d6", "traceState": "", "parentSpanId": "04f5292ec03f47ff", "name": "clear_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:45.910301952Z", "endTime": "2021-04-20T20:33:45.987429632Z", "durationInNanos": 77127680, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "1abb073eb56f2eea"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "1abb073eb56f2eea", "traceState": "", "parentSpanId": "b2c126fb125a3ec0", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:46.155314688Z", "endTime": "2021-04-20T20:33:46.180148224Z", "durationInNanos": 24833536, "serviceName": "database", "events": [ { "time": "2021-04-20T20:33:46.180106752Z", "name": "exception", "attributes": { "exception@message": "", "exception@type": "InvalidItemUpdate", "exception@stacktrace": """Traceback (most recent call last): File "/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py", line 804, in use_span yield span File "databaseService.py", line 162, in updateItem raise InvalidItemUpdate("Not enough storage for itemId {}".format(data[ "ItemId" ])) InvalidItemUpdate """ }, "droppedAttributesCount": 0 } ], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "status.message": "InvalidItemUpdate: ", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 2, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "140b1c6e07ac7569"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "140b1c6e07ac7569", "traceState": "", "parentSpanId": "5edd047783ce31e6", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:46.197120Z", "endTime": "2021-04-20T20:33:46.223479808Z", "durationInNanos": 26359808, "serviceName": "database", "events": [ { "time": "2021-04-20T20:33:46.223439872Z", "name": "exception", "attributes": { "exception@message": "", "exception@type": "InvalidItemUpdate", "exception@stacktrace": """Traceback (most recent call last): File "/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py", line 804, in use_span yield span File "databaseService.py", line 162, in updateItem raise InvalidItemUpdate("Not enough storage for itemId {}".format(data[ "ItemId" ])) InvalidItemUpdate """ }, "droppedAttributesCount": 0 } ], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "status.message": "InvalidItemUpdate: ", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 2, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "c220b54c4e5447d7"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "c220b54c4e5447d7", "traceState": "", "parentSpanId": "33c6e729ae31cf8e", "name": "payment", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:46.147583744Z", "endTime": "2021-04-20T20:33:46.289920512Z", "durationInNanos": 142336768, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8084, "span.attributes.http@status_text": "PARTIAL CONTENT", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 59968, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/checkout", "span.attributes.http@host": "localhost:8084", "span.attributes.http@target": "/checkout", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "33c6e729ae31cf8e"}}
+{ "traceId": "b450e7770b6bf942d91f238f77311fbe", "spanId": "33c6e729ae31cf8e", "traceState": "", "parentSpanId": "86582d579095a4b2", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.145408256Z", "endTime": "2021-04-20T20:33:46.294403840Z", "durationInNanos": 148995584, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8084/checkout", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "PARTIAL CONTENT", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "cfd7fff669823fd7"}}
+{ "traceId": "ba5a69d5dfd1eaa4077451d452ba473b", "spanId": "cfd7fff669823fd7", "traceState": "", "parentSpanId": "e270a32c23bb3d64", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.524823808Z", "endTime": "2021-04-20T20:33:46.526560Z", "durationInNanos": 1736192, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT ItemId, TotalQty FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "3b2b065511029f95"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "3b2b065511029f95", "traceState": "", "parentSpanId": "759ba13f98ab3fc6", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:46.847089408Z", "endTime": "2021-04-20T20:33:46.871549696Z", "durationInNanos": 24460288, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "3f5318f871490765"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "3f5318f871490765", "traceState": "", "parentSpanId": "b2e9f99896086ca7", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:46.795104512Z", "endTime": "2021-04-20T20:33:46.936029952Z", "durationInNanos": 140925440, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/update_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "b2e9f99896086ca7"}}
+{ "traceId": "95b27b5462c0dccc7e08126a25e64d3f", "spanId": "b2e9f99896086ca7", "traceState": "", "parentSpanId": "", "name": "client_create_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:46.794855168Z", "endTime": "2021-04-20T20:33:46.938890240Z", "durationInNanos": 144035072, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_create_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "ad657e844f30d14a"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "ad657e844f30d14a", "traceState": "", "parentSpanId": "e0e2f20d2c1b7308", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:47.212077312Z", "endTime": "2021-04-20T20:33:47.212736768Z", "durationInNanos": 659456, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': 2}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "8d4b7a48cb7ee8e9"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "8d4b7a48cb7ee8e9", "traceState": "", "parentSpanId": "f78dbd14cda8862e", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:47.231710720Z", "endTime": "2021-04-20T20:33:47.269911552Z", "durationInNanos": 38200832, "serviceName": "database", "events": [ { "time": "2021-04-20T20:33:47.269875456Z", "name": "exception", "attributes": { "exception@message": "", "exception@type": "InvalidItemUpdate", "exception@stacktrace": """Traceback (most recent call last): File "/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py", line 804, in use_span yield span File "databaseService.py", line 162, in updateItem raise InvalidItemUpdate("Not enough storage for itemId {}".format(data[ "ItemId" ])) InvalidItemUpdate """ }, "droppedAttributesCount": 0 } ], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "status.message": "InvalidItemUpdate: ", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 2, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "6b10877e5ed07c99"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "6b10877e5ed07c99", "traceState": "", "parentSpanId": "c321930cea7a01b8", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:47.305689344Z", "endTime": "2021-04-20T20:33:47.306357248Z", "durationInNanos": 667904, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': 1}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "c36ca0e19d93a20e"}}
+{ "traceId": "c0d5be4cfded4677b472caeb6dced6eb", "spanId": "c36ca0e19d93a20e", "traceState": "", "parentSpanId": "1e21d6eba3353211", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:47.185514752Z", "endTime": "2021-04-20T20:33:47.329954560Z", "durationInNanos": 144439808, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8082/update_inventory", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "Update inventory response contains failed items.", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "385cdc02dfbd5f9c"}}
+{ "traceId": "16f5176887289baa94c27f12604b5163", "spanId": "385cdc02dfbd5f9c", "traceState": "", "parentSpanId": "b7db1195f7777f37", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:47.813824Z", "endTime": "2021-04-20T20:33:47.849940480Z", "durationInNanos": 36116480, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "728745836581a137"}}
+{ "traceId": "2aa556a9a859155d7f578aacf259588f", "spanId": "728745836581a137", "traceState": "", "parentSpanId": "f4fb15e340c39da3", "name": "get_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:48.096090880Z", "endTime": "2021-04-20T20:33:48.120184832Z", "durationInNanos": 24093952, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "30bde1e6725bc066"}}
+{ "traceId": "ecfe3ff116a31b4c5ec107289b615ff3", "spanId": "30bde1e6725bc066", "traceState": "", "parentSpanId": "2a4047a9b194cba8", "name": "pay_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:48.387603456Z", "endTime": "2021-04-20T20:33:48.463539712Z", "durationInNanos": 75936256, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32960, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/pay_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/pay_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "f0839669f041b029"}}
+{ "traceId": "a7e35e333fe32a4fa0448bf258fff8e9", "spanId": "f0839669f041b029", "traceState": "", "parentSpanId": "8b858870f3946a12", "name": "get_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:48.727124224Z", "endTime": "2021-04-20T20:33:48.776144128Z", "durationInNanos": 49019904, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 32970, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/get_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "8b858870f3946a12"}}
+{ "traceId": "a7e35e333fe32a4fa0448bf258fff8e9", "spanId": "8b858870f3946a12", "traceState": "", "parentSpanId": "5d15d016d2efc520", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:48.725030144Z", "endTime": "2021-04-20T20:33:48.780702464Z", "durationInNanos": 55672320, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/get_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "7ff60cf452880953"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "7ff60cf452880953", "traceState": "", "parentSpanId": "c6c238ba3d8255f4", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.000432896Z", "endTime": "2021-04-20T20:33:49.036928768Z", "durationInNanos": 36495872, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "17ba287b7e0a55a5"}}
+{ "traceId": "2aa556a9a859155d7f578aacf259588f", "spanId": "17ba287b7e0a55a5", "traceState": "", "parentSpanId": "11f0fc7fd6fc8ef7", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:48.133449435Z", "endTime": "2021-04-20T20:33:48.134655277Z", "durationInNanos": 1205842, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-8", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "75432a4e251c77c6"}}
+{ "traceId": "97551ce4600c334d4ab8fb8725ac1e67", "spanId": "75432a4e251c77c6", "traceState": "", "parentSpanId": "3922ee10e2a02211", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:45.982001755Z", "endTime": "2021-04-20T20:33:45.983769151Z", "durationInNanos": 1767396, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-8", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 57950, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "934a3522bd05ed13"}}
+{ "traceId": "e48a85b3dc34426059aa1347ea4171a5", "spanId": "934a3522bd05ed13", "traceState": "", "parentSpanId": "ad97f94c920dd63a", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:47.484001785Z", "endTime": "2021-04-20T20:33:47.485831317Z", "durationInNanos": 1829532, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-4", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 134, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58022, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "ee28b3abcaca75b1"}}
+{ "traceId": "16f5176887289baa94c27f12604b5163", "spanId": "ee28b3abcaca75b1", "traceState": "", "parentSpanId": "4eeed8358a7d5d30", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:47.894001979Z", "endTime": "2021-04-20T20:33:47.895816736Z", "durationInNanos": 1814757, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-6", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58040, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "362c0d7748107d8f"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "362c0d7748107d8f", "traceState": "", "parentSpanId": "c6c238ba3d8255f4", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.080640768Z", "endTime": "2021-04-20T20:33:49.120250368Z", "durationInNanos": 39609600, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "6de234553c12cdd0"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "6de234553c12cdd0", "traceState": "", "parentSpanId": "7559e66e65139dc8", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:48.997068544Z", "endTime": "2021-04-20T20:33:49.137304320Z", "durationInNanos": 140235776, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/update_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "7559e66e65139dc8"}}
+{ "traceId": "25af475f804ec5edbfab9d1ba4018ce5", "spanId": "7559e66e65139dc8", "traceState": "", "parentSpanId": "", "name": "client_create_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:48.996784896Z", "endTime": "2021-04-20T20:33:49.140167168Z", "durationInNanos": 143382272, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_create_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "fd57eface760a3c2"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "fd57eface760a3c2", "traceState": "", "parentSpanId": "c4eb12c87b56bbaf", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.547070976Z", "endTime": "2021-04-20T20:33:49.547717376Z", "durationInNanos": 646400, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': 2}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "797a61c1556157d8"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "797a61c1556157d8", "traceState": "", "parentSpanId": "5e65bb1294c655ad", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.586952448Z", "endTime": "2021-04-20T20:33:49.587582464Z", "durationInNanos": 630016, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': 3}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "5e65bb1294c655ad"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "5e65bb1294c655ad", "traceState": "", "parentSpanId": "4111fb00ec1efd77", "name": "update_item", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:49.567184128Z", "endTime": "2021-04-20T20:33:49.591741696Z", "durationInNanos": 24557568, "serviceName": "database", "events": [ { "time": "2021-04-20T20:33:49.591707904Z", "name": "exception", "attributes": { "exception@message": "", "exception@type": "InvalidItemUpdate", "exception@stacktrace": """Traceback (most recent call last): File "/usr/lib/python3.6/site-packages/opentelemetry/sdk/trace/__init__.py", line 804, in use_span yield span File "databaseService.py", line 162, in updateItem raise InvalidItemUpdate("Not enough storage for itemId {}".format(data[ "ItemId" ])) InvalidItemUpdate """ }, "droppedAttributesCount": 0 } ], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "status.message": "InvalidItemUpdate: ", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 2, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "4111fb00ec1efd77"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "4111fb00ec1efd77", "traceState": "", "parentSpanId": "977b8ddb69c6d9a7", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:49.566329344Z", "endTime": "2021-04-20T20:33:49.596302592Z", "durationInNanos": 29973248, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "Not enough storage for itemId orange", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58870, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "977b8ddb69c6d9a7"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "977b8ddb69c6d9a7", "traceState": "", "parentSpanId": "28991f1d3a174ce4", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.564026112Z", "endTime": "2021-04-20T20:33:49.601558016Z", "durationInNanos": 37531904, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/update_item", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "Not enough storage for itemId orange", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "704f4cab0d9b5606"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "704f4cab0d9b5606", "traceState": "", "parentSpanId": "bd73a71f8d9cc289", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.627682304Z", "endTime": "2021-04-20T20:33:49.628331008Z", "durationInNanos": 648704, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': 1}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "28991f1d3a174ce4"}}
+{ "traceId": "c1bd83b99e3992292daa0888489e618c", "spanId": "28991f1d3a174ce4", "traceState": "", "parentSpanId": "d0f5f8f6a9167a1c", "name": "update_inventory", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:49.523589632Z", "endTime": "2021-04-20T20:33:49.645100288Z", "durationInNanos": 121510656, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "79a8b5b769a8af40"}}
+{ "traceId": "7a3182e62d533fa1e0617f21f5681a37", "spanId": "79a8b5b769a8af40", "traceState": "", "parentSpanId": "cc39a5b2d98e4127", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:49.876797696Z", "endTime": "2021-04-20T20:33:49.896148736Z", "durationInNanos": 19351040, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "TRUNCATE TABLE User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "cc39a5b2d98e4127"}}
+{ "traceId": "7a3182e62d533fa1e0617f21f5681a37", "spanId": "cc39a5b2d98e4127", "traceState": "", "parentSpanId": "2c3fe2ecd7602e0b", "name": "cart_empty", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:49.851799296Z", "endTime": "2021-04-20T20:33:49.899272448Z", "durationInNanos": 47473152, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "de9f1128bf12b7b9"}}
+{ "traceId": "7a3182e62d533fa1e0617f21f5681a37", "spanId": "de9f1128bf12b7b9", "traceState": "", "parentSpanId": "1861602b0fed74c0", "name": "clear_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:49.848355584Z", "endTime": "2021-04-20T20:33:49.917926400Z", "durationInNanos": 69570816, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "0d15e0e38cc75348"}}
+{ "traceId": "247d610dcbd05da1c7902081b6bec1f6", "spanId": "0d15e0e38cc75348", "traceState": "", "parentSpanId": "0b9642ed51dc4523", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:50.183780864Z", "endTime": "2021-04-20T20:33:50.208142848Z", "durationInNanos": 24361984, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "3b639def2d6ec40f"}}
+{ "traceId": "247d610dcbd05da1c7902081b6bec1f6", "spanId": "3b639def2d6ec40f", "traceState": "", "parentSpanId": "f53b324dd57c0a67", "name": "update_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:50.140426496Z", "endTime": "2021-04-20T20:33:50.269464320Z", "durationInNanos": 129037824, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 33036, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/update_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "f53b324dd57c0a67"}}
+{ "traceId": "247d610dcbd05da1c7902081b6bec1f6", "spanId": "f53b324dd57c0a67", "traceState": "", "parentSpanId": "0721e6662945f8c1", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:50.138248960Z", "endTime": "2021-04-20T20:33:50.274230272Z", "durationInNanos": 135981312, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/update_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "0721e6662945f8c1"}}
+{ "traceId": "247d610dcbd05da1c7902081b6bec1f6", "spanId": "0721e6662945f8c1", "traceState": "", "parentSpanId": "", "name": "client_create_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:50.137996544Z", "endTime": "2021-04-20T20:33:50.276978688Z", "durationInNanos": 138982144, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_create_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "3a565f7129913c17"}}
+{ "traceId": "eef4554373e188267b38928e2dabeab4", "spanId": "3a565f7129913c17", "traceState": "", "parentSpanId": "59ff85f342e07d43", "name": "HTTP GET", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:50.475230464Z", "endTime": "2021-04-20T20:33:50.531948288Z", "durationInNanos": 56717824, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/get_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "GET", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "76d4028a33aa32d4"}}
+{ "traceId": "20eabd650f3a068d9f590786f56885e7", "spanId": "76d4028a33aa32d4", "traceState": "", "parentSpanId": "c80dc4c948d060d2", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:50.730701312Z", "endTime": "2021-04-20T20:33:50.759436800Z", "durationInNanos": 28735488, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58922, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "7e0f8516534902ba"}}
+{ "traceId": "20eabd650f3a068d9f590786f56885e7", "spanId": "7e0f8516534902ba", "traceState": "", "parentSpanId": "815628d64969d668", "name": "update_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:50.727141632Z", "endTime": "2021-04-20T20:33:50.855739904Z", "durationInNanos": 128598272, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "815628d64969d668"}}
+{ "traceId": "20eabd650f3a068d9f590786f56885e7", "spanId": "815628d64969d668", "traceState": "", "parentSpanId": "f16d32410e946012", "name": "update_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:50.725899008Z", "endTime": "2021-04-20T20:33:50.857993472Z", "durationInNanos": 132094464, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 33066, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/update_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "06838c62d1f8fc52"}}
+{ "traceId": "c48260d3774d6c2d4ba77c9e813eadec", "spanId": "06838c62d1f8fc52", "traceState": "", "parentSpanId": "", "name": "client_delivery_status", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:51.133010176Z", "endTime": "2021-04-20T20:33:51.191095040Z", "durationInNanos": 58084864, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_delivery_status", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "c2c0543fe0270e38"}}
+{ "traceId": "56127a0a4f362cfb605a907e6c419c6e", "spanId": "c2c0543fe0270e38", "traceState": "", "parentSpanId": "eb593b21c00b38c7", "name": "cart_sold", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:51.416972800Z", "endTime": "2021-04-20T20:33:51.463561472Z", "durationInNanos": 46588672, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "d9dd1b7eed5760a0"}}
+{ "traceId": "56127a0a4f362cfb605a907e6c419c6e", "spanId": "d9dd1b7eed5760a0", "traceState": "", "parentSpanId": "2b7af871bd8cd43f", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:51.413930240Z", "endTime": "2021-04-20T20:33:51.472114688Z", "durationInNanos": 58184448, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/cart_sold", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "3301dd384d83dc66"}}
+{ "traceId": "7f63958e2172b12500e40eed557a31c7", "spanId": "3301dd384d83dc66", "traceState": "", "parentSpanId": "9de35fba7cb7c4a3", "name": "get_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:51.679142400Z", "endTime": "2021-04-20T20:33:51.729883904Z", "durationInNanos": 50741504, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "GET", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 33104, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/get_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/get_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "c5e70373eb296aff"}}
+{ "traceId": "340a6c6f70a21d1bc8456dbbe5c79929", "spanId": "c5e70373eb296aff", "traceState": "", "parentSpanId": "49bf3ba4725523ca", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:51.977397248Z", "endTime": "2021-04-20T20:33:51.978067200Z", "durationInNanos": 669952, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': '1'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "91b0beabefca51d0"}}
+{ "traceId": "340a6c6f70a21d1bc8456dbbe5c79929", "spanId": "91b0beabefca51d0", "traceState": "", "parentSpanId": "a7accb6ac082369d", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:51.956622336Z", "endTime": "2021-04-20T20:33:51.985689344Z", "durationInNanos": 29067008, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58970, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "a7accb6ac082369d"}}
+{ "traceId": "340a6c6f70a21d1bc8456dbbe5c79929", "spanId": "a7accb6ac082369d", "traceState": "", "parentSpanId": "6576e80159aee6b8", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:51.954316288Z", "endTime": "2021-04-20T20:33:51.990446336Z", "durationInNanos": 36130048, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "439eff3f753e8e67"}}
+{ "traceId": "340a6c6f70a21d1bc8456dbbe5c79929", "spanId": "439eff3f753e8e67", "traceState": "", "parentSpanId": "6576e80159aee6b8", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:51.993564672Z", "endTime": "2021-04-20T20:33:52.029644544Z", "durationInNanos": 36079872, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "e0f5b0c6a6b1bbc2"}}
+{ "traceId": "340a6c6f70a21d1bc8456dbbe5c79929", "spanId": "e0f5b0c6a6b1bbc2", "traceState": "", "parentSpanId": "7b8507bd4a5a909f", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.055813888Z", "endTime": "2021-04-20T20:33:52.056485632Z", "durationInNanos": 671744, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': '2'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "ab4ac8bcf7351137"}}
+{ "traceId": "340a6c6f70a21d1bc8456dbbe5c79929", "spanId": "ab4ac8bcf7351137", "traceState": "", "parentSpanId": "1717b0bbc49c8b5c", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:52.034881024Z", "endTime": "2021-04-20T20:33:52.063697664Z", "durationInNanos": 28816640, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58978, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "0124ac48730385cc"}}
+{ "traceId": "340a6c6f70a21d1bc8456dbbe5c79929", "spanId": "0124ac48730385cc", "traceState": "", "parentSpanId": "", "name": "client_create_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:51.950673408Z", "endTime": "2021-04-20T20:33:52.088491264Z", "durationInNanos": 137817856, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": "client_create_order", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "e978fe4781c7212b"}}
+{ "traceId": "261f4f9f6d49c04588ddfc0b22d167c6", "spanId": "e978fe4781c7212b", "traceState": "", "parentSpanId": "f8aedbcbab807a78", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.270512128Z", "endTime": "2021-04-20T20:33:52.275296512Z", "durationInNanos": 4784384, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "0db04213ba31cb79"}}
+{ "traceId": "261f4f9f6d49c04588ddfc0b22d167c6", "spanId": "0db04213ba31cb79", "traceState": "", "parentSpanId": "66dd3959b912162c", "name": "HTTP DELETE", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.205003776Z", "endTime": "2021-04-20T20:33:52.284966144Z", "durationInNanos": 79962368, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8088/clear_order", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "DELETE", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "f14b6b57d7079a58"}}
+{ "traceId": "5be8370207cbb002a165d369fbc57b57", "spanId": "f14b6b57d7079a58", "traceState": "", "parentSpanId": "9e4947190e28b8f7", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.520363008Z", "endTime": "2021-04-20T20:33:52.521067776Z", "durationInNanos": 704768, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'apple', 'Qty': '1'}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "2c37405ee8325196"}}
+{ "traceId": "5be8370207cbb002a165d369fbc57b57", "spanId": "2c37405ee8325196", "traceState": "", "parentSpanId": "702250f453a02be6", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.535895296Z", "endTime": "2021-04-20T20:33:52.571971584Z", "durationInNanos": 36076288, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/add_item_to_cart", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "14148032cdebd6e5"}}
+{ "traceId": "4216a647a4396e50fc12cc78d571557e", "spanId": "14148032cdebd6e5", "traceState": "", "parentSpanId": "d985b5239c10d8bf", "name": "add_item_to_cart", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.678805504Z", "endTime": "2021-04-20T20:33:52.703546112Z", "durationInNanos": 24740608, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "ec48acd974e4f4ef"}}
+{ "traceId": "4216a647a4396e50fc12cc78d571557e", "spanId": "ec48acd974e4f4ef", "traceState": "", "parentSpanId": "8873f17b55cf568a", "name": "addItemToCart", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:52.717049088Z", "endTime": "2021-04-20T20:33:52.745951744Z", "durationInNanos": 28902656, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 59020, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/add_item_to_cart", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/add_item_to_cart", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "d85ef60c6b05ea1e"}}
+{ "traceId": "4216a647a4396e50fc12cc78d571557e", "spanId": "d85ef60c6b05ea1e", "traceState": "", "parentSpanId": "e0514a47c90c0ead", "name": "update_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.675259392Z", "endTime": "2021-04-20T20:33:52.823244288Z", "durationInNanos": 147984896, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "a9ae73162186cc7f"}}
+{ "traceId": "e447ed617aa651a7593c720d7e976625", "spanId": "a9ae73162186cc7f", "traceState": "", "parentSpanId": "ff285f4458209cf3", "name": "HTTP PUT", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.927145216Z", "endTime": "2021-04-20T20:33:52.990285312Z", "durationInNanos": 63140096, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8083/cart_empty", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "PUT", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "477408f3368f28af"}}
+{ "traceId": "e447ed617aa651a7593c720d7e976625", "spanId": "477408f3368f28af", "traceState": "", "parentSpanId": "ff285f4458209cf3", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:52.993329920Z", "endTime": "2021-04-20T20:33:52.997798144Z", "durationInNanos": 4468224, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8087/logs", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "f45a94f980605697"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "f45a94f980605697", "traceState": "", "parentSpanId": "470ef7b1b1e8c06c", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:53.238649856Z", "endTime": "2021-04-20T20:33:53.239367680Z", "durationInNanos": 717824, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'banana', 'Qty': 2}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "c07900555826d95f"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "c07900555826d95f", "traceState": "", "parentSpanId": "68f6536a0523f7f3", "name": "updateItem", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:53.217669120Z", "endTime": "2021-04-20T20:33:53.248192768Z", "durationInNanos": 30523648, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8083, "span.attributes.http@status_text": "Not enough storage for itemId banana", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "http", "status.code": 2, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 59046, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/update_item", "span.attributes.http@host": "localhost:8083", "span.attributes.http@target": "/update_item", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 422 }
+{ "index":{"_id": "854e04d060d378a8"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "854e04d060d378a8", "traceState": "", "parentSpanId": "a4030e9ad85b2a92", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:53.279769344Z", "endTime": "2021-04-20T20:33:53.280431360Z", "durationInNanos": 662016, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.db@statement@parameters": "{'ItemId': 'orange', 'Qty': 3}", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "UPDATE Inventory_Items SET TotalQty=IF(TotalQty >= %(Qty)s, TotalQty - %(Qty)s, TotalQty) WHERE ItemId=%(ItemId)s", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "2badcc8448bd5c5b"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "2badcc8448bd5c5b", "traceState": "", "parentSpanId": "6dcb9bfdeb68bef1", "name": "update_inventory", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:53.214871808Z", "endTime": "2021-04-20T20:33:53.338653184Z", "durationInNanos": 123781376, "serviceName": "inventory", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140491849416656", "resource.attributes.service@name": "inventory", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "79e7e8f4a6b9cfd6"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "79e7e8f4a6b9cfd6", "traceState": "", "parentSpanId": "b52867ccd766e67b", "name": "payment", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:53.210643200Z", "endTime": "2021-04-20T20:33:53.350407680Z", "durationInNanos": 139764480, "serviceName": "payment", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8084, "span.attributes.http@status_text": "PARTIAL CONTENT", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "139782029922256", "resource.attributes.service@name": "payment", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 60296, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/checkout", "span.attributes.http@host": "localhost:8084", "span.attributes.http@target": "/checkout", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "b52867ccd766e67b"}}
+{ "traceId": "0bda4f69a15675f56069fa7b677f1c74", "spanId": "b52867ccd766e67b", "traceState": "", "parentSpanId": "4c7ff265c1e0c9dc", "name": "HTTP POST", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:53.208381952Z", "endTime": "2021-04-20T20:33:53.354845184Z", "durationInNanos": 146463232, "serviceName": "frontend-client", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.http@url": "http://localhost:8084/checkout", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.http@status_text": "PARTIAL CONTENT", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@name": "frontend-client", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.requests", "span.attributes.http@method": "POST", "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@status_code": 206 }
+{ "index":{"_id": "7745e3605083e150"}}
+{ "traceId": "d5bc99166e521eec173bcb7f9b0d3c43", "spanId": "7745e3605083e150", "traceState": "", "parentSpanId": "f6b9b0130d0a7765", "name": "mysql.APM", "kind": "SPAN_KIND_CLIENT", "startTime": "2021-04-20T20:33:53.454045184Z", "endTime": "2021-04-20T20:33:53.455569152Z", "durationInNanos": 1523968, "serviceName": "database", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.db@user": "root", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.net@peer@name": "localhost", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140009019686864", "resource.attributes.service@name": "database", "span.attributes.component": "mysql", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.mysql", "span.attributes.db@type": "sql", "span.attributes.net@peer@port": 3306, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.db@instance": "APM", "span.attributes.db@statement": "SELECT ItemId, TotalQty FROM User_Carts", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal" }
+{ "index":{"_id": "cefea796ccf54813"}}
+{ "traceId": "d5bc99166e521eec173bcb7f9b0d3c43", "spanId": "cefea796ccf54813", "traceState": "", "parentSpanId": "28b54e1dd64fcf7d", "name": "clear_order", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:53.429565696Z", "endTime": "2021-04-20T20:33:53.503151872Z", "durationInNanos": 73586176, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@sdk@language": "python", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "status.code": 0, "instrumentationLibrary.name": "__main__" }
+{ "index":{"_id": "28b54e1dd64fcf7d"}}
+{ "traceId": "d5bc99166e521eec173bcb7f9b0d3c43", "spanId": "28b54e1dd64fcf7d", "traceState": "", "parentSpanId": "1dc7b46c2357c388", "name": "clear_order", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:53.428727808Z", "endTime": "2021-04-20T20:33:53.505276160Z", "durationInNanos": 76548352, "serviceName": "order", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "instrumentationLibrary.version": "0.14b0", "resource.attributes.telemetry@sdk@language": "python", "span.attributes.host@port": 8088, "span.attributes.http@status_text": "OK", "resource.attributes.telemetry@sdk@version": "0.14b0", "resource.attributes.service@instance@id": "140034008389000", "resource.attributes.service@name": "order", "span.attributes.component": "http", "status.code": 0, "instrumentationLibrary.name": "opentelemetry.instrumentation.flask", "span.attributes.http@method": "DELETE", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 33208, "resource.attributes.telemetry@sdk@name": "opentelemetry", "span.attributes.http@server_name": "0.0.0.0", "span.attributes.http@route": "/clear_order", "span.attributes.http@host": "localhost:8088", "span.attributes.http@target": "/clear_order", "span.attributes.http@scheme": "http", "resource.attributes.host@hostname": "ip-172-31-68-90.ec2.internal", "span.attributes.http@flavor": "1.1", "span.attributes.http@status_code": 200 }
+{ "index":{"_id": "fc1d1ffce95a27aa"}}
+{ "traceId": "4216a647a4396e50fc12cc78d571557e", "spanId": "fc1d1ffce95a27aa", "traceState": "", "parentSpanId": "0f929cd09feb717a", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.818457432Z", "endTime": "2021-04-20T20:33:52.819488855Z", "durationInNanos": 1031423, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-8", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "f44426165fbba4d0"}}
+{ "traceId": "e447ed617aa651a7593c720d7e976625", "spanId": "f44426165fbba4d0", "traceState": "", "parentSpanId": "b272143e732a91e9", "name": "LoggingController.save", "kind": "SPAN_KIND_INTERNAL", "startTime": "2021-04-20T20:33:52.995465166Z", "endTime": "2021-04-20T20:33:52.996460896Z", "durationInNanos": 995730, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.thread@name": "http-nio-8087-exec-10", "resource.attributes.telemetry@sdk@name": "opentelemetry", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 140, "resource.attributes.telemetry@auto@version": "0.10.1", "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.spring-webmvc" }
+{ "index":{"_id": "9fd37843dd616fab"}}
+{ "traceId": "c48260d3774d6c2d4ba77c9e813eadec", "spanId": "9fd37843dd616fab", "traceState": "", "parentSpanId": "3ed06551056e1fa6", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:51.176001692Z", "endTime": "2021-04-20T20:33:51.177560735Z", "durationInNanos": 1559043, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-6", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 136, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58184, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
+{ "index":{"_id": "fce44d7569908ba7"}}
+{ "traceId": "56127a0a4f362cfb605a907e6c419c6e", "spanId": "fce44d7569908ba7", "traceState": "", "parentSpanId": "608bd5e547e88e3e", "name": "/logs", "kind": "SPAN_KIND_SERVER", "startTime": "2021-04-20T20:33:51.477002352Z", "endTime": "2021-04-20T20:33:51.478943130Z", "durationInNanos": 1940778, "serviceName": "analytics-service", "events": [], "links": [], "droppedAttributesCount": 0, "droppedEventsCount": 0, "droppedLinksCount": 0, "traceGroup": null, "span.attributes.net@peer@ip": "127.0.0.1", "span.attributes.http@url": "http://localhost:8087/logs", "span.attributes.thread@name": "http-nio-8087-exec-8", "instrumentationLibrary.version": "0.10.1", "resource.attributes.telemetry@sdk@language": "java", "span.attributes.thread@id": 138, "resource.attributes.telemetry@sdk@version": "0.10.0", "resource.attributes.service@name": "analytics-service", "status.code": 0, "instrumentationLibrary.name": "io.opentelemetry.auto.servlet", "span.attributes.http@method": "POST", "span.attributes.http@user_agent": "python-requests/2.25.1", "span.attributes.net@peer@port": 58194, "resource.attributes.telemetry@sdk@name": "opentelemetry", "resource.attributes.telemetry@auto@version": "0.10.1", "span.attributes.http@flavor": "HTTP/1.1", "span.attributes.http@status_code": 200, "span.attributes.http@client_ip": "127.0.0.1" }
diff --git a/.cypress/utils/panel_constants.js b/.cypress/utils/panel_constants.js
new file mode 100644
index 0000000000..cc173d8076
--- /dev/null
+++ b/.cypress/utils/panel_constants.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const delay = 100;
+
+export const TEST_PANEL = 'Test Panel';
+export const SAMPLE_PANEL = '[Logs] Web traffic Panel';
+
+export const SAMPLE_VISUALIZATIONS_NAMES = [
+  '[Logs] Average ram usage by operating systems',
+  '[Logs] Average ram usage per day by apple os',
+  '[Logs] Average ram usage per day by windows os',
+  '[Logs] Daily count for error response codes',
+  '[Logs] Count requests from US to CN, IN and JP',
+  '[Logs] Max and average bytes by host',
+  '[Logs] Count total requests by tags',
+  '[Logs] Daily average bytes',
+];
+
+export const PPL_VISUALIZATIONS = [
+  'source = opensearch_dashboards_sample_data_flights | stats count() by Dest',
+  'source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier',
+  'source = opensearch_dashboards_sample_data_flights | stats max( DistanceKilometers ) by DestCityName',
+];
+
+export const PPL_VISUALIZATIONS_NAMES = [
+  'Flight count by destination',
+  'Average flight delay minutes',
+  'Max distance by destination city',
+];
+
+export const NEW_VISUALIZATION_NAME = 'Flight count by destination airport';
+
+export const PPL_FILTER = "where Carrier = 'OpenSearch-Air' | where Dest = 'Munich Airport'";
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000000..4d8297eb33
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+module.exports = {
+  root: true,
+  extends: [
+    '@elastic/eslint-config-kibana',
+    'plugin:@elastic/eui/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+};
+
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000..bf5586d642
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,7 @@
+node_modules/
+target/
+build/
+coverage/
+.cypress/screenshots
+.cypress/videos
+common/query_manager/antlr/output
diff --git a/common/constants/application_analytics.ts b/common/constants/application_analytics.ts
new file mode 100644
index 0000000000..df675a7048
--- /dev/null
+++ b/common/constants/application_analytics.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const TAB_OVERVIEW_ID = 'app-analytics-overview';
+export const TAB_SERVICE_ID = 'app-analytics-service';
+export const TAB_TRACE_ID = 'app-analytics-trace';
+export const TAB_LOG_ID = 'app-analytics-log';
+export const TAB_PANEL_ID = 'app-analytics-panel';
+export const TAB_CONFIG_ID = 'app-analytics-config';
+export const TAB_OVERVIEW_TITLE = 'Overview';
+export const TAB_SERVICE_TITLE = 'Services';
+export const TAB_TRACE_TITLE = 'Traces & Spans';
+export const TAB_LOG_TITLE = 'Log Events';
+export const TAB_PANEL_TITLE = 'Panel';
+export const TAB_CONFIG_TITLE = 'Configuration';
+
+export const APP_ANALYTICS_API_PREFIX = '/api/observability/application';
diff --git a/common/constants/autocomplete.ts b/common/constants/autocomplete.ts
new file mode 100644
index 0000000000..b8c1c41b95
--- /dev/null
+++ b/common/constants/autocomplete.ts
@@ -0,0 +1,202 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable prettier/prettier */
+
+import { BaseItem } from '@algolia/autocomplete-core';
+
+export const firstCommand = [{ label: 'source' }];
+
+export const pipeCommands = [
+  { label: 'dedup' },
+  { label: 'eval' },
+  { label: 'fields' },
+  { label: 'head' },
+  { label: 'parse' },
+  { label: 'rare' },
+  { label: 'rename' },
+  { label: 'sort' },
+  { label: 'stats' },
+  { label: 'top' },
+  { label: 'where' },
+];
+
+export const statsCommands = [
+  { label: 'count()' },
+  { label: 'sum(' },
+  { label: 'avg(' },
+  { label: 'max(' },
+  { label: 'min(' },
+  { label: 'var_samp(' },
+  { label: 'var_pop(' },
+  { label: 'stddev_samp(' },
+  { label: 'stddev_pop(' },
+];
+
+export const numberTypes = [
+  'long',
+  'integer',
+  'short',
+  'byte',
+  'double',
+  'float',
+  'half_float',
+  'scaled_float',
+  'unsigned_long',
+];
+
+export interface AutocompleteItem extends BaseItem {
+  input: string;
+  itemName: string;
+  label: string;
+  suggestion: string;
+  __autocomplete_id?: number;
+}
+
+export interface FieldItem {
+  label: string;
+  type: string;
+}
+
+export interface IndexItem {
+  label: string;
+}
+
+export interface DataItem {
+  label: string;
+  doc_count: any;
+}
+
+const JUST_SEARCH_REGEX = /\s*(search\s+source|source|index)\s*=\s*[^\\\/\?\"\<\>\|\s\,\#]*(\s*,\s*[^\\\/\?\"\<\>\|\s\,\#]+)*/;
+const SEARCH_WHERE_REGEX = /\s*(search\s+source|source|index)\s*=\s*[^\\\/\?\"\<\>\|\s\,\#]*(\s*,\s*[^\\\/\?\"\<\>\|\s\,\#]+)*\s*\|\s*where\s+\S+\s*=\s*\S+/;
+const SEARCH_MATCH_REGEX = /\s*(search\s+source|source|index)\s*=\s*[^\\\/\?\"\<\>\|\s\,\#]*(\s*,\s*[^\\\/\?\"\<\>\|\s\,\#]+)*\s*\|\s*where\s+match\(\S+,\s*\S+\)/;
+export const EMPTY_REGEX = /^\s*\S*$/;
+export const FIELD_AFTER_COMMAND = /^\s*(dedup|eval|rare|top|rename|where\s+match\()\s+\S*$/;
+
+// Regex for where command
+export const MATCH_FIELD_AFTER_WHERE = /^\s*where\s+\S*$/;
+export const EQUAL_AFTER_WHERE_FIELD = /^\s*where\s+(\S+)\s+$/;
+export const DATA_AFTER_WHERE_EQUAL = /^\s*where\s+\S+\s*=\s*(("(\w|\s|')*)|(\d*\.?\d*)|\w*)$/;
+export const PIPE_AFTER_WHERE = /^\s*where\s+\S+\s*=\s*(("(\w|\s|')+")|(\d+\.?\d*)|\w+)\s+$/;
+export const COMMA_AFTER_FIELD = /^\s*where\s+match\(\s*([^\s,]+)\s*$/;
+export const DATA_AFTER_COMMA = /^\s*where\s+match\(\s*\S+\s*,\s*(("(\w|\s|')*)|(\d*\.?\d*)|\w*)$/;
+export const CLOSE_AFTER_DATA = /^\s*where\s+match\(\s*\S+\s*,\s*(("(\w|\s|')+")|(\d+\.?\d*)|\w+)\s+$/;
+export const PIPE_AFTER_MATCH = /^\s*where\s+match\(\s*\S+\s*,\s*(("(\w|\s|')+")|(\d+\.?\d*)|\w+)\s*\)\s*$/;
+
+// Regex for dedup command
+export const FIELD_IN_FIELD_LOOP = /^\s*dedup\s*\d*\s+\S+\s*(,\s*\S+\s*)*,\s*([^\s,]*)$/;
+export const COMMA_PIPE_AFTER_FIELD = /^\s*dedup\s*\d*\s+\S+\s*(,\s*\S+\s*)*\s+$/;
+export const PIPE_AFTER_KEEP_EMPTY = /^\s*dedup\s*\d*\s+\S+\s*(,\s*\S+\s*)*\s*keepempty=true\s+$/;
+export const PIPE_AFTER_CONSECUTIVE = /^\s*dedup\s*\d*\s+\S+\s*(,\s*\S+\s*)*\s*consecutive=true\s+$/;
+
+// Regex for eval command
+export const EQUAL_AFTER_EVAL_FIELD = /^\s*eval\s+(\S+)\s+$/;
+export const FIELD_AFTER_EVAL_EQUAL = /^\s*eval\s+\S+\s*=\s*\S*$/;
+export const MATH_AFTER_FIELD = /^\s*eval\s+\S+\s*=\s*\S+\s+$/;
+export const PIPE_MATH_AFTER_EXPRESSIONS = /^\s*eval\s+(\S+\s*=\s*\S+(\s*(\+|\-|\*|\/)\s*\S+)+)+\s+$/;
+
+// Regex for fields command
+export const PLUS_MINUS_FIELD_AFTER_FIELDS = /^\s*fields\s+\S*$/;
+export const FIELD_AFTER_PLUS_MINUS = /^\s*fields\s+(\+|\-)\s*\S*$/;
+export const COMMA_PIPE_AFTER_FIELDS = /^\s*fields\s+((\+|\-)\s+)?\S+\s*(,\s*\S+\s*)*\s+$/;
+export const FIELD_IN_FIELDS_LOOP = /^\s*fields\s+((\+|\-)\s+)?\S+\s*(,\s*\S+\s*)*,\s*\S*$/;
+
+// Regex for rare/top command
+export const COMMA_PIPE_BY_AFTER_FIELD = /^\s*(rare|top(\s+\d+)?)\s+\S+\s*(,\s*\S+\s*)*\s+\S*$/;
+export const RARE_TOP_FIELD_LOOP = /^\s*(rare|top(\s+\d+)?)\s+\S+\s*(,\s*\S+\s*)*,\s*\S*$/;
+export const FIELD_AFTER_BY = /^\s*(rare|top(\s+\d+)?)\s+\S+\s*(,\s*\S+\s*)*\s+by\s+\S*$/;
+export const PIPE_AFTER_GROUP_BY = /^\s*(rare|top(\s+\d+)?)\s+\S+\s*(,\s*\S+\s*)*\s+by\s+\S+\s+$/;
+
+// Regex for rename command
+export const AS_AFTER_FIELD = /^\s*rename\s+((,\s*)?\S+\s+as\s+\S+\s*)*\s*(,\s*)?\S+\s+\S*$/;
+export const COMMA_PIPE_AFTER_RENAME_FIELD = /^\s*rename\s+((,\s*)?\S+\s+as\s+\S+\s*)+$/;
+export const FIELD_AFTER_COMMA = /^\s*rename\s+((,\s*)?\S+\s+as\s+\S+\s*)+\s*,\s+\S*$/;
+
+// Regex for head command
+export const PIPE_AFTER_HEAD = /^\s*head\s+\d+\s+/;
+
+// Regex for sort command
+export const PLUS_MINUS_FIELD_AFTER_SORT = /^\s*sort(\s+\d+)?\s+\S*$/;
+export const FIELD_AFTER_PLUS_MINUS_SORT = /^\s*sort(\s+\d+)?((,\s*)?\s+(\+|\-)?\s*\S+\s*)*\s+(\+|\-)\s*\S*$/;
+export const COMMA_PIPE_AFTER_SORT_FIELD = /^\s*sort(\s+\d+)?((,\s*)?\s+(\+|\-)?\s*\S+\s*)*\s+\S+\s+$/;
+export const PLUS_MINUS_FIELD_IN_FIELDS_LOOP = /^\s*sort(\s+\d+)?((,\s*)?\s+(\+|\-)?\s*\S+\s*)*,\s+\S*$/;
+
+// Regex for stats command
+export const FIELD_SPAN_AFTER_GROUP_BY = /^\s*stats\s+((,\s*)?((sum|avg|max|min|var_samp|var_pop|stddev_samp|stddev_pop)\(\s*\S+\s*\)\s*)|((,\s*)?count\(\)\s*))+\s+by\s+\S*$/;
+export const NUM_FIELD_AFTER_AGGREGATION = /^\s*stats\s+((,\s*)?((sum|avg|max|min|var_samp|var_pop|stddev_samp|stddev_pop)\(\s*\S+\s*\)\s*)|((,\s*)?count\(\)\s*))*(,\s*)?(sum|avg|max|min|var_samp|var_pop|stddev_samp|stddev_pop)\(\s*\S*$/;
+export const FIELD_AFTER_SPAN =  /^\s*stats\s+((,\s*)?((sum|avg|max|min|var_samp|var_pop|stddev_samp|stddev_pop)\(\s*\S+\s*\)\s*)|((,\s*)?count\(\)\s*))+\s+by\s+span\(\s*([^\s,]*)\s*$/;
+export const CLOSE_AFTER_SPAN = /^\s*stats\s+((,\s*)?((sum|avg|max|min|var_samp|var_pop|stddev_samp|stddev_pop)\(\s*\S+\s*\)\s*)|((,\s*)?count\(\)\s*))+\s+by\s+span\(\s*[^\s,]+\s*,\s*(("(\w|\s|')+")|(\d+\.?\d*)|\w+)\s+$/;
+export const PIPE_AFTER_SPAN = /^\s*stats\s+((,\s*)?((sum|avg|max|min|var_samp|var_pop|stddev_samp|stddev_pop)\(\s*\S+\s*\)\s*)|((,\s*)?count\(\)\s*))+\s+by\s+span\(\s*[^\s,]+\s*,\s*(("(\w|\s|')*")|(\d*\.?\d*)|\w*)\s*\)\s*$/;
+export const CLOSE_AFTER_FIELD = /^\s*stats\s+((,\s*)?((sum|avg|max|min|var_samp|var_pop|stddev_samp|stddev_pop)\(\s*\S+\s*\)\s*)|((,\s*)?count\(\)\s*))*(,\s*)?(sum|avg|max|min|var_samp|var_pop|stddev_samp|stddev_pop)\(\s*\S+\s+$/;
+export const COMMA_PIPE_BY_AFTER_AGGREGATION = /^\s*stats\s+((,\s*)?((sum|avg|max|min|var_samp|var_pop|stddev_samp|stddev_pop)\(\s*\S+\s*\)\s*)|((,\s*)?count\(\)\s*))+\s+\S*$/;
+export const PIPE_AFTER_STATS_GROUP_BY = /^\s*stats\s+((,\s*)?((sum|avg|max|min|var_samp|var_pop|stddev_samp|stddev_pop)\(\s*\S+\s*\)\s*)|((,\s*)?count\(\)\s*))+\s+by\s+\S+\s+$/;
+export const AGGREGATION_FOR_STATS= /^\s*stats\s+(((,\s*)?((sum|avg|max|min|var_samp|var_pop|stddev_samp|stddev_pop)\(\s*\S+\s*\)\s*)|((,\s*)?count\(\)\s*))+\s+,\s*)?\S*$/;
+
+// Regex for parse command
+export const STRING_FIELD_AFTER_PARSE = /^\s*parse\s+\S*$/;
+export const PIPE_AFTER_PARSE = /^\s*parse\s+\S+\s+$/;
+
+// Regex for source command
+export const EQUAL_AFTER_SOURCE = /^\s*source\s+$/;
+export const INDEX_AFTER_EQUAL = /^\s*source\s+=\s+[^\\\/\?\"\<\>\|\s\,\#]*$/;
+export const PIPE_COMMA_AFTER_INDEX = /^\s*source\s+=\s+[^\\\/\?\"\<\>\|\s\,\#]+(,[^\\\/\?\"\<\>\|\s\,\#]+)*\s+$/;
+export const MORE_INDEX_AFTER_COMMA = /^\s*source\s+=\s+[^\\\/\?\"\<\>\|\s\,\#]+(,[^\\\/\?\"\<\>\|\s\,\#]+)*,\s*[^\\\/\?\"\<\>\|\s\,\#]*\s*$/;
+
+export const regexForSuggestion = [
+  EMPTY_REGEX,
+  FIELD_AFTER_COMMAND,
+  MATCH_FIELD_AFTER_WHERE,
+  EQUAL_AFTER_WHERE_FIELD,
+  DATA_AFTER_WHERE_EQUAL,
+  PIPE_AFTER_WHERE,
+  COMMA_AFTER_FIELD,
+  DATA_AFTER_COMMA,
+  CLOSE_AFTER_DATA,
+  PIPE_AFTER_MATCH,
+  FIELD_IN_FIELD_LOOP,
+  COMMA_PIPE_AFTER_FIELD,
+  PIPE_AFTER_KEEP_EMPTY,
+  PIPE_AFTER_CONSECUTIVE,
+  EQUAL_AFTER_EVAL_FIELD,
+  FIELD_AFTER_EVAL_EQUAL,
+  MATH_AFTER_FIELD,
+  PIPE_MATH_AFTER_EXPRESSIONS,
+  PLUS_MINUS_FIELD_AFTER_FIELDS,
+  FIELD_AFTER_PLUS_MINUS,
+  COMMA_PIPE_AFTER_FIELDS,
+  FIELD_IN_FIELDS_LOOP,
+  COMMA_PIPE_BY_AFTER_FIELD,
+  RARE_TOP_FIELD_LOOP,
+  FIELD_AFTER_BY,
+  PIPE_AFTER_GROUP_BY,
+  COMMA_PIPE_AFTER_RENAME_FIELD,
+  FIELD_AFTER_COMMA,
+  AS_AFTER_FIELD,
+  PIPE_AFTER_HEAD,
+  PLUS_MINUS_FIELD_AFTER_SORT,
+  FIELD_AFTER_PLUS_MINUS_SORT,
+  PLUS_MINUS_FIELD_IN_FIELDS_LOOP,
+  COMMA_PIPE_AFTER_SORT_FIELD,
+  FIELD_SPAN_AFTER_GROUP_BY,
+  NUM_FIELD_AFTER_AGGREGATION,
+  FIELD_AFTER_SPAN,
+  CLOSE_AFTER_SPAN,
+  PIPE_AFTER_SPAN,
+  CLOSE_AFTER_FIELD,
+  COMMA_PIPE_BY_AFTER_AGGREGATION,
+  PIPE_AFTER_STATS_GROUP_BY,
+  AGGREGATION_FOR_STATS,
+  STRING_FIELD_AFTER_PARSE,
+  PIPE_AFTER_PARSE,
+  EQUAL_AFTER_SOURCE,
+  INDEX_AFTER_EQUAL,
+  PIPE_COMMA_AFTER_INDEX,
+  MORE_INDEX_AFTER_COMMA,
+];
+
+export const regexForIndex = [
+  JUST_SEARCH_REGEX,
+  SEARCH_WHERE_REGEX,
+  SEARCH_MATCH_REGEX,
+];
diff --git a/common/constants/colors.ts b/common/constants/colors.ts
new file mode 100644
index 0000000000..3845e41a00
--- /dev/null
+++ b/common/constants/colors.ts
@@ -0,0 +1,188 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { colorPalette } from '@elastic/eui';
+
+export const BLUES_PALETTE = {
+  name: 'Blues',
+  label: 'Blues',
+  colors: [
+    'rgb(5,10,172)',
+    'rgb(40,60,190)',
+    'rgb(70,100,245)',
+    'rgb(90,120,245)',
+    'rgb(106,137,247)',
+    'rgb(220,220,220)',
+  ],
+};
+
+export const REDS_PALETTE = {
+  name: 'Reds',
+  label: 'Reds',
+  colors: ['rgb(220,220,220)', 'rgb(245,195,157)', 'rgb(245,160,105)', 'rgb(178,10,28)'],
+};
+
+export const GREENS_PALETTE = {
+  name: 'Greens',
+  label: 'Greens',
+  colors: [
+    'rgb(0,68,27)',
+    'rgb(0,109,44)',
+    'rgb(35,139,69)',
+    'rgb(65,171,93)',
+    'rgb(116,196,118)',
+    'rgb(161,217,155)',
+    'rgb(199,233,192)',
+    'rgb(229,245,224)',
+    'rgb(247,252,245)',
+  ],
+};
+
+export const GREYS_PALETTE = {
+  name: 'Greys',
+  label: 'Greys',
+  colors: ['rgb(0,0,0)', 'rgb(255,255,255)'],
+};
+
+export const BLUE_RED_PALETTE = {
+  name: 'Bluered',
+  label: 'Blue-Red',
+  colors: ['rgb(0,0,255)', 'rgb(255,0,0)'],
+};
+
+export const RED_BLUE_PALETTE = {
+  name: 'RdBu',
+  label: 'Red-Blue',
+  colors: [
+    'rgb(5,10,172)',
+    'rgb(106,137,247)',
+    'rgb(190,190,190)',
+    'rgb(220,170,132)',
+    'rgb(230,145,90)',
+    'rgb(178,10,28)',
+  ],
+};
+
+export const YELLOW_ORANGE_RED_PALETTE = {
+  name: 'YlOrRd',
+  label: 'Yellow-Orange-Red',
+  colors: [
+    'rgb(128,0,38)',
+    'rgb(189,0,38)',
+    'rgb(227,26,28)',
+    'rgb(252,78,42)',
+    'rgb(253,141,60)',
+    'rgb(254,178,76)',
+    'rgb(254,217,118)',
+    'rgb(255,237,160)',
+    'rgb(255,255,204)',
+  ],
+};
+
+export const YELLOW_GREEN_BLUE_PALETTE = {
+  name: 'YlGnBu',
+  label: 'Yellow-Green-Blue',
+  colors: [
+    'rgb(8,29,88)',
+    'rgb(37,52,148)',
+    'rgb(34,94,168)',
+    'rgb(29,145,192)',
+    'rgb(65,182,196)',
+    'rgb(127,205,187)',
+    'rgb(199,233,180)',
+    'rgb(237,248,217)',
+    'rgb(255,255,217)',
+  ],
+};
+
+export const DEFAULT_PALETTE = 'default';
+export const SINGLE_COLOR_PALETTE = 'singleColor';
+export const MULTI_COLOR_PALETTE = 'multicolor';
+
+export const COLOR_PALETTES = [
+  {
+    value: DEFAULT_PALETTE,
+    title: 'Default',
+    type: 'text',
+  },
+  {
+    value: SINGLE_COLOR_PALETTE,
+    title: 'Single color',
+    type: 'text',
+  },
+  {
+    value: MULTI_COLOR_PALETTE,
+    title: 'Multicolored',
+    type: 'text',
+  },
+  {
+    value: BLUES_PALETTE.name,
+    title: BLUES_PALETTE.label,
+    palette: colorPalette(BLUES_PALETTE.colors, 20),
+    type: 'gradient',
+  },
+  {
+    value: REDS_PALETTE.name,
+    title: REDS_PALETTE.label,
+    palette: colorPalette(REDS_PALETTE.colors, 20),
+    type: 'gradient',
+  },
+  {
+    value: GREENS_PALETTE.name,
+    title: GREENS_PALETTE.label,
+    palette: colorPalette(GREENS_PALETTE.colors, 20),
+    type: 'gradient',
+  },
+  {
+    value: GREYS_PALETTE.name,
+    title: GREYS_PALETTE.label,
+    palette: colorPalette(GREYS_PALETTE.colors, 20),
+    type: 'gradient',
+  },
+  {
+    value: BLUE_RED_PALETTE.name,
+    title: BLUE_RED_PALETTE.label,
+    palette: colorPalette(BLUE_RED_PALETTE.colors, 20),
+    type: 'gradient',
+  },
+  {
+    value: RED_BLUE_PALETTE.name,
+    title: RED_BLUE_PALETTE.label,
+    palette: colorPalette(RED_BLUE_PALETTE.colors, 20, true),
+    type: 'gradient',
+  },
+  {
+    value: YELLOW_ORANGE_RED_PALETTE.name,
+    title: YELLOW_ORANGE_RED_PALETTE.label,
+    palette: colorPalette(YELLOW_ORANGE_RED_PALETTE.colors, 20),
+    type: 'gradient',
+  },
+  {
+    value: YELLOW_GREEN_BLUE_PALETTE.name,
+    title: YELLOW_GREEN_BLUE_PALETTE.label,
+    palette: colorPalette(YELLOW_GREEN_BLUE_PALETTE.colors, 20),
+    type: 'gradient',
+  },
+];
+export const HEX_CONTRAST_COLOR = 0xffffff;
+export const PIE_PALETTES = [
+  {
+    value: DEFAULT_PALETTE,
+    title: 'Default',
+    type: 'text',
+  },
+  {
+    value: SINGLE_COLOR_PALETTE,
+    title: 'Single Color',
+    type: 'text',
+  },
+];
+
+export const HEATMAP_PALETTE_COLOR = { name: REDS_PALETTE.label, color: REDS_PALETTE.label };
+export const HEATMAP_SINGLE_COLOR = { name: 'singleColor', color: '#000000' };
+export const OPACITY = 'opacity';
+export const SPECTRUM = 'spectrum';
+export const COLOR_BLACK = 'rgb(0,0,0)';
+export const COLOR_WHITE = 'rgb(255,255,255)';
diff --git a/common/constants/custom_panels.ts b/common/constants/custom_panels.ts
new file mode 100644
index 0000000000..0c02b97a29
--- /dev/null
+++ b/common/constants/custom_panels.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const CUSTOM_PANELS_API_PREFIX = '/api/observability/operational_panels';
+export const CUSTOM_PANELS_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/observability-plugin/operational-panels/';
+export const CREATE_PANEL_MESSAGE = 'Enter a name to describe the purpose of this custom panel.';
diff --git a/common/constants/data_table.ts b/common/constants/data_table.ts
new file mode 100644
index 0000000000..bbca653a7a
--- /dev/null
+++ b/common/constants/data_table.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const GRID_HEADER_COLUMN_MAX_WIDTH = '150px';
+export const GRID_PAGE_RANGE_DISPLAY = 5;
+export const COLUMN_DEFAULT_MIN_WIDTH = 100;
+export const GRID_PAGE_SIZES = [10, 50, 100];
+export const ROW_DENSITIES = [
+  { icon: 'tableDensityExpanded', height: 55, selected: false },
+  { icon: 'tableDensityNormal', height: 45, selected: false },
+  { icon: 'tableDensityCompact', height: 35, selected: true },
+];
+
+export const HEADER_HEIGHT = 35;
diff --git a/common/constants/explorer.ts b/common/constants/explorer.ts
new file mode 100644
index 0000000000..75393f1775
--- /dev/null
+++ b/common/constants/explorer.ts
@@ -0,0 +1,301 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { htmlIdGenerator } from '@elastic/eui';
+import { VIS_CHART_TYPES } from './shared';
+import { ThresholdUnitType } from '../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
+
+export const EVENT_ANALYTICS_DOCUMENTATION_URL =
+  'https://opensearch.org/docs/latest/observability-plugin/event-analytics/';
+export const OPEN_TELEMETRY_LOG_CORRELATION_LINK =
+  'https://opentelemetry.io/docs/reference/specification/logs/overview/#log-correlation';
+export const RAW_QUERY = 'rawQuery';
+export const FINAL_QUERY = 'finalQuery';
+export const SELECTED_DATE_RANGE = 'selectedDateRange';
+export const INDEX = 'index';
+export const SELECTED_PATTERN_FIELD = 'selectedPatternField';
+export const PATTERN_REGEX = 'patternRegex';
+export const FILTERED_PATTERN = 'filteredPattern';
+export const SELECTED_TIMESTAMP = 'selectedTimestamp';
+export const SELECTED_FIELDS = 'selectedFields';
+export const UNSELECTED_FIELDS = 'unselectedFields';
+export const AVAILABLE_FIELDS = 'availableFields';
+export const QUERIED_FIELDS = 'queriedFields';
+export const TAB_ID_TXT_PFX = 'query-panel-';
+export const TAB_TITLE = 'New query';
+export const TAB_CHART_TITLE = 'Visualizations';
+export const TAB_EVENT_TITLE = 'Events';
+export const TAB_EVENT_ID_TXT_PFX = 'main-content-events-';
+export const TAB_CHART_ID_TXT_PFX = 'main-content-vis-';
+export const TAB_EVENT_ID = 'main-content-events';
+export const TAB_CHART_ID = 'main-content-vis';
+export const HAS_SAVED_TIMESTAMP = 'hasSavedTimestamp';
+export const FILTER_OPTIONS = ['Visualization', 'Query', 'Metric'];
+export const SAVED_QUERY = 'savedQuery';
+export const SAVED_VISUALIZATION = 'savedVisualization';
+export const SAVED_OBJECT_ID = 'savedObjectId';
+export const SAVED_OBJECT_TYPE = 'objectType';
+export const TAB_CREATED_TYPE = 'tabCreatedType';
+export const NEW_TAB = 'newTab';
+export const REDIRECT_TAB = 'redirect_tab';
+export const PAGE_SIZE = 50;
+export const DEFAULT_COLUMNS = ['', 'Time', '_source'];
+export const OTEL_TRACE_ID = 'traceId';
+export const DATE_PICKER_FORMAT = 'YYYY-MM-DD HH:mm:ss';
+export const TIME_INTERVAL_OPTIONS = [
+  {
+    text: 'Minute',
+    value: 'm',
+  },
+  {
+    text: 'Hour',
+    value: 'h',
+  },
+  {
+    text: 'Day',
+    value: 'd',
+  },
+  {
+    text: 'Week',
+    value: 'w',
+  },
+  {
+    text: 'Month',
+    value: 'M',
+  },
+  {
+    text: 'Year',
+    value: 'y',
+  },
+];
+
+// redux
+export const SELECTED_QUERY_TAB = 'selectedQueryTab';
+export const QUERY_TAB_IDS = 'queryTabIds';
+export const NEW_SELECTED_QUERY_TAB = 'newSelectedQueryTab';
+export const REDUX_EXPL_SLICE_QUERIES = 'queries';
+export const REDUX_EXPL_SLICE_QUERY_RESULT = 'queryResults';
+export const REDUX_EXPL_SLICE_FIELDS = 'fields';
+export const REDUX_EXPL_SLICE_QUERY_TABS = 'queryTabs';
+export const REDUX_EXPL_SLICE_VISUALIZATION = 'explorerVisualization';
+export const REDUX_EXPL_SLICE_COUNT_DISTRIBUTION = 'countDistributionVisualization';
+export const REDUX_EXPL_SLICE_PATTERNS = 'patterns';
+export const PLOTLY_GAUGE_COLUMN_NUMBER = 4;
+export const APP_ANALYTICS_TAB_ID_REGEX = /application-analytics-tab.+/;
+export const DEFAULT_AVAILABILITY_QUERY = 'stats count() by span( timestamp, 1h )';
+export const PPL_DEFAULT_PATTERN_REGEX_FILETER = '[a-zA-Z\\d]';
+// Greedily matches the longest substring for example (patterns referer | patterns pattern='[0-9]' message | where ...) used to modify the query for patterns table
+export const PATTERNS_REGEX = /\|\s*patterns.+?\|.*\s*where\s+patterns_field\s*\=\s*'[^a-zA-Z0-9]+'/;
+// Used to extract the initial pattern applied
+export const PATTERNS_EXTRACTOR_REGEX = /patterns\s+(?<pattern>\S+)/;
+export const ADD_BUTTON_TEXT = '+ Add color theme';
+export const NUMBER_INPUT_MIN_LIMIT = 1;
+
+export const VIZ_CONTAIN_XY_AXIS = [
+  VIS_CHART_TYPES.Bar,
+  VIS_CHART_TYPES.Histogram,
+  VIS_CHART_TYPES.Line,
+  VIS_CHART_TYPES.Pie,
+  VIS_CHART_TYPES.Scatter,
+  VIS_CHART_TYPES.HorizontalBar,
+];
+
+// default ppl aggregation method options
+export const AGGREGATION_OPTIONS = [
+  {
+    label: 'count',
+  },
+  {
+    label: 'sum',
+  },
+  {
+    label: 'avg',
+  },
+  {
+    label: 'max',
+  },
+  {
+    label: 'min',
+  },
+  {
+    label: 'var_samp',
+  },
+  {
+    label: 'var_pop',
+  },
+  {
+    label: 'stddev_samp',
+  },
+  {
+    label: 'stddev_pop',
+  },
+];
+
+// numeric fields type for metrics
+export const NUMERICAL_TYPES = [
+  'float',
+  'double',
+  'bigint',
+  'long',
+  'octet',
+  'short',
+  'byte',
+  'integer',
+];
+// Data table constants
+export const GRID_HEADER_COLUMN_MAX_WIDTH = '150px';
+export const GRID_PAGE_RANGE_DISPLAY = 5;
+export const COLUMN_DEFAULT_MIN_WIDTH = 100;
+export const GRID_PAGE_SIZES = [10, 50, 100];
+export const ROW_DENSITIES = [
+  { icon: 'tableDensityExpanded', height: 55, selected: false },
+  { icon: 'tableDensityNormal', height: 45, selected: false },
+  { icon: 'tableDensityCompact', height: 35, selected: true },
+];
+
+export const HEADER_HEIGHT = 35;
+
+// gauge chart default parameters
+export interface DefaultGaugeChartParametersProps {
+  GaugeTitleSize: number;
+  DisplayDefaultGauges: number;
+  OrientationDefault: string;
+  TickLength: number;
+  LegendPlacement: string;
+  ThresholdsMaxLimit: number;
+}
+
+export const DEFAULT_GAUGE_CHART_PARAMETERS: DefaultGaugeChartParametersProps = {
+  GaugeTitleSize: 14,
+  DisplayDefaultGauges: 1,
+  OrientationDefault: 'h',
+  TickLength: 5,
+  LegendPlacement: 'center',
+  ThresholdsMaxLimit: 1,
+};
+
+// pie chart default parameters
+export const PLOTLY_PIE_COLUMN_NUMBER = 2;
+export const PIE_XAXIS_GAP = 0.2;
+export const PIE_YAXIS_GAP = 0.1;
+export interface DefaultPieChartParameterProps {
+  DefaultMode: string;
+}
+
+export const DEFAULT_PIE_CHART_PARAMETERS: DefaultPieChartParameterProps = {
+  DefaultMode: 'pie',
+};
+export const GROUPBY = 'dimensions';
+export const AGGREGATIONS = 'series';
+export const PARENTFIELDS = 'parentFields';
+export const VALUEFIELD = 'valueField';
+export const CHILDFIELD = 'childField';
+export const TIMESTAMP = 'timestamp';
+
+// metrics constants
+export const METRICS_GRID_SPACE_BETWEEN_X_AXIS = 0.01;
+export const METRICS_GRID_SPACE_BETWEEN_Y_AXIS = 100;
+export const METRICS_REDUCE_VALUE_SIZE_PERCENTAGE = 0.08;
+export const METRICS_REDUCE_TITLE_SIZE_PERCENTAGE = 0.05;
+export const METRICS_REDUCE_SERIES_UNIT_SIZE_PERCENTAGE = 0.2;
+export const METRICS_SERIES_UNIT_SUBSTRING_LENGTH = 3;
+export const METRICS_AXIS_MARGIN = {
+  l: 0,
+  r: 0,
+  b: 0,
+  t: 80,
+};
+
+export const METRICS_ANNOTATION = {
+  xref: 'paper',
+  yref: 'paper',
+  showarrow: false,
+};
+
+export interface DefaultMetricsChartParametersProps {
+  DefaultTextMode: string;
+  DefaultOrientation: string;
+  DefaultTitleSize: number;
+  DefaultChartType: string;
+  TextAlignment: string;
+  DefaultPrecision: number;
+  DefaultValueSize: number;
+  BaseThreshold: ThresholdUnitType;
+  DefaultTextColor: string;
+}
+
+export const DEFAULT_METRICS_CHART_PARAMETERS: DefaultMetricsChartParametersProps = {
+  DefaultTextMode: 'auto',
+  DefaultOrientation: 'auto',
+  DefaultTitleSize: 30,
+  DefaultValueSize: 80,
+  DefaultChartType: 'auto',
+  TextAlignment: 'auto',
+  DefaultPrecision: 1,
+  BaseThreshold: {
+    thid: htmlIdGenerator('thr')(),
+    name: 'Base',
+    color: '#3CA1C7',
+    value: 0,
+    isReadOnly: true,
+  },
+  DefaultTextColor: '#FFFFFF',
+};
+export interface DefaultBarChartStylesProps {
+  BarMode: string;
+  GroupWidth: number;
+  BarWidth: number;
+  LabelSize: number;
+}
+
+export const DEFAULT_BAR_CHART_STYLES: DefaultBarChartStylesProps = {
+  BarMode: 'group',
+  GroupWidth: 0.7,
+  BarWidth: 0.97,
+  LabelSize: 12,
+};
+
+export const SIMILAR_VIZ_TYPES = [
+  VIS_CHART_TYPES.Line,
+  VIS_CHART_TYPES.Scatter,
+  VIS_CHART_TYPES.HorizontalBar,
+  VIS_CHART_TYPES.Bar,
+];
+
+export enum ConfigChartOptionsEnum {
+  palettePicker = 'palettePicker',
+  singleColorPicker = 'singleColorPicker',
+  colorpicker = 'colorpicker',
+  treemapColorPicker = 'treemapColorPicker',
+  input = 'input',
+  textInput = 'textInput',
+  slider = 'slider',
+  switchButton = 'switchButton',
+  buttons = 'buttons',
+}
+
+export const CUSTOM_LABEL = 'customLabel';
+export const BREAKDOWNS = 'breakdowns';
+export const SPAN = 'span';
+export const TIME_FIELD = 'time_field';
+export const DISABLED_COLOUR = '#fafbfd';
+export const DATA_CONFIG_HINTS_INFO = {
+  [AGGREGATIONS]:
+    'Series is an aggregation function (mandatory). The argument of an aggregation must be a field.',
+  [GROUPBY]:
+    "Dimensions are 'by' clauses. They are fields or expressions like scalar and aggregation functions. Besides, the span clause for a dimension can be used to split a specific field into buckets in the same interval, the stats then does the aggregation by these span buckets.",
+  [BREAKDOWNS]:
+    "Defines how each series is broken down. Breakdowns are 'by' clauses that subdivide the existing series.",
+};
+
+// Metrics constants
+export const UNITS_OF_MEASURE = [
+  'seconds (s)',
+  'hours (h)',
+  'celsius (C)',
+  'farenheit (F)',
+  'meters (m)',
+  'kilometers (k)',
+]
diff --git a/common/constants/metrics.ts b/common/constants/metrics.ts
new file mode 100644
index 0000000000..dbe64b88b1
--- /dev/null
+++ b/common/constants/metrics.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// requests constants
+export const VISUALIZATION = 'viz';
+export const SAVED_VISUALIZATION = 'savedVisualization';
+export const PPL_DATASOURCES_REQUEST =
+  'show datasources | where CONNECTOR_TYPE="PROMETHEUS" | fields DATASOURCE_NAME';
+
+// redux
+export const REDUX_SLICE_METRICS = 'metrics';
+
+export const resolutionOptions = [
+  { value: 's', text: 'seconds' },
+  { value: 'm', text: 'minutes' },
+  { value: 'h', text: 'hours' },
+  { value: 'd', text: 'days' },
+  // { value: 'M', text: 'Months' }, // commenting it here as prometheus doesn't have support
+  // { value: 'q', text: 'quarters' },
+  { value: 'y', text: 'years' },
+];
+
+export const DEFAULT_METRIC_HEIGHT = 2;
+export const DEFAULT_METRIC_WIDTH = 12;
diff --git a/common/constants/notebooks.ts b/common/constants/notebooks.ts
new file mode 100644
index 0000000000..c3140792cf
--- /dev/null
+++ b/common/constants/notebooks.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const NOTEBOOKS_API_PREFIX = '/api/observability/notebooks';
+export const NOTEBOOKS_SELECTED_BACKEND = 'DEFAULT'; // ZEPPELIN || DEFAULT
+export const NOTEBOOKS_FETCH_SIZE = 1000;
+export const CREATE_NOTE_MESSAGE = 'Enter a name to describe the purpose of this notebook.';
+export const NOTEBOOKS_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/observability-plugin/notebooks/';
+
+export const zeppelinURL = 'http://localhost:8080';
+
+export const wreckOptions = {
+  baseUrl: zeppelinURL,
+  headers: { 'Content-Type': 'application/json' },
+};
+
+const BASE_NOTEBOOKS_URI = '/_plugins/_notebooks';
+export const OPENSEARCH_NOTEBOOKS_API = {
+  GET_NOTEBOOKS: `${BASE_NOTEBOOKS_URI}/notebooks`,
+  NOTEBOOK: `${BASE_NOTEBOOKS_URI}/notebook`,
+};
diff --git a/common/constants/shared.ts b/common/constants/shared.ts
new file mode 100644
index 0000000000..c24e76fcc0
--- /dev/null
+++ b/common/constants/shared.ts
@@ -0,0 +1,193 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import CSS from 'csstype';
+import { IField } from '../../common/types/explorer';
+
+// Client route
+export const PPL_BASE = '/api/ppl';
+export const PPL_SEARCH = '/search';
+export const DSL_BASE = '/api/dsl';
+export const DSL_SEARCH = '/search';
+export const DSL_CAT = '/cat.indices';
+export const DSL_MAPPING = '/indices.getFieldMapping';
+export const OBSERVABILITY_BASE = '/api/observability';
+export const EVENT_ANALYTICS = '/event_analytics';
+export const SAVED_OBJECTS = '/saved_objects';
+export const SAVED_QUERY = '/query';
+export const SAVED_VISUALIZATION = '/vis';
+
+// Server route
+export const PPL_ENDPOINT = '/_plugins/_ppl';
+export const SQL_ENDPOINT = '/_plugins/_sql';
+export const DSL_ENDPOINT = '/_plugins/_dsl';
+
+export const observabilityID = 'observability-dashboards';
+export const observabilityTitle = 'Observability';
+export const observabilityPluginOrder = 6000;
+
+// Shared Constants
+export const SQL_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest/search-plugins/sql/index/';
+export const PPL_DOCUMENTATION_URL =
+  'https://opensearch.org/docs/latest/observability-plugin/ppl/commands/';
+export const PPL_PATTERNS_DOCUMENTATION_URL =
+  'https://github.com/opensearch-project/sql/blob/2.x/docs/user/ppl/cmd/patterns.rst#description';
+export const UI_DATE_FORMAT = 'MM/DD/YYYY hh:mm A';
+export const PPL_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss.SSSSSS';
+export const SPAN_REGEX = /span/;
+export const PPL_SPAN_REGEX = /by\s*span/i;
+export const PPL_STATS_REGEX = /\|\s*stats/i;
+export const PPL_INDEX_INSERT_POINT_REGEX = /(search source|source|index)\s*=\s*([^|\s]+)(.*)/i;
+export const PPL_INDEX_REGEX = /(search source|source|index)\s*=\s*([^|\s]+)/i;
+export const PPL_NEWLINE_REGEX = /[\n\r]+/g;
+
+// Observability plugin URI
+const BASE_OBSERVABILITY_URI = '/_plugins/_observability';
+export const OPENSEARCH_PANELS_API = {
+  OBJECT: `${BASE_OBSERVABILITY_URI}/object`,
+};
+
+// Saved Objects
+export const SAVED_OBJECT = '/object';
+
+// Color Constants
+export const PLOTLY_COLOR = [
+  '#3CA1C7',
+  '#8C55A3',
+  '#DB748A',
+  '#F2BE4B',
+  '#68CCC2',
+  '#2A7866',
+  '#843769',
+  '#374FB8',
+  '#BD6F26',
+  '#4C636F',
+];
+
+export const LONG_CHART_COLOR = PLOTLY_COLOR[1];
+
+export const pageStyles: CSS.Properties = {
+  float: 'left',
+  width: '100%',
+  maxWidth: '1130px',
+};
+
+export enum VIS_CHART_TYPES {
+  Bar = 'bar',
+  HorizontalBar = 'horizontal_bar',
+  Line = 'line',
+  Pie = 'pie',
+  HeatMap = 'heatmap',
+  Text = 'text',
+}
+
+export const NUMERICAL_FIELDS = ['short', 'integer', 'long', 'float', 'double'];
+
+export const ENABLED_VIS_TYPES = [
+  VIS_CHART_TYPES.Bar,
+  VIS_CHART_TYPES.HorizontalBar,
+  VIS_CHART_TYPES.Line,
+  VIS_CHART_TYPES.Pie,
+  VIS_CHART_TYPES.HeatMap,
+  VIS_CHART_TYPES.Text,
+];
+
+// Live tail constants
+export const LIVE_OPTIONS = [
+  {
+    label: '5s',
+    startTime: 'now-5s',
+    delayTime: 5000,
+  },
+  {
+    label: '10s',
+    startTime: 'now-10s',
+    delayTime: 10000,
+  },
+  {
+    label: '30s',
+    startTime: 'now-30s',
+    delayTime: 30000,
+  },
+  {
+    label: '1m',
+    startTime: 'now-1m',
+    delayTime: 60000,
+  },
+  {
+    label: '5m',
+    startTime: 'now-5m',
+    delayTime: 60000 * 5,
+  },
+  {
+    label: '15m',
+    startTime: 'now-15m',
+    delayTime: 60000 * 15,
+  },
+  {
+    label: '30m',
+    startTime: 'now-30m',
+    delayTime: 60000 * 30,
+  },
+  {
+    label: '1h',
+    startTime: 'now-1h',
+    delayTime: 60000 * 60,
+  },
+  {
+    label: '2h',
+    startTime: 'now-2h',
+    delayTime: 60000 * 120,
+  },
+];
+
+export const LIVE_END_TIME = 'now';
+export interface DefaultChartStylesProps {
+  DefaultModeLine: string;
+  Interpolation: string;
+  LineWidth: number;
+  FillOpacity: number;
+  MarkerSize: number;
+  ShowLegend: string;
+  LegendPosition: string;
+  LabelAngle: number;
+  DefaultSortSectors: string;
+  DefaultModeScatter: string;
+}
+
+export const DEFAULT_CHART_STYLES: DefaultChartStylesProps = {
+  DefaultModeLine: 'lines',
+  Interpolation: 'spline',
+  LineWidth: 2,
+  FillOpacity: 70,
+  MarkerSize: 5,
+  ShowLegend: 'show',
+  LegendPosition: 'v',
+  LabelAngle: 0,
+  DefaultSortSectors: 'largest_to_smallest',
+  DefaultModeScatter: 'markers',
+};
+
+export const FILLOPACITY_DIV_FACTOR = 200;
+export const SLIDER_MIN_VALUE = 0;
+export const SLIDER_MAX_VALUE = 100;
+export const SLIDER_STEP = 1;
+export const THRESHOLD_LINE_WIDTH = 3;
+export const THRESHOLD_LINE_OPACITY = 0.7;
+export const MAX_BUCKET_LENGTH = 16;
+
+export enum BarOrientation {
+  horizontal = 'h',
+  vertical = 'v',
+}
+
+export const PLOT_MARGIN = {
+  l: 30,
+  r: 5,
+  b: 30,
+  t: 50,
+  pad: 4,
+};
+
+export const WAITING_TIME_ON_USER_ACTIONS = 300;
diff --git a/common/constants/trace_analytics.ts b/common/constants/trace_analytics.ts
new file mode 100644
index 0000000000..f480a25f6d
--- /dev/null
+++ b/common/constants/trace_analytics.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const DATA_PREPPER_INDEX_NAME = 'otel-v1-apm-span-*';
+export const DATA_PREPPER_SERVICE_INDEX_NAME = 'otel-v1-apm-service-map*';
+export const TRACE_ANALYTICS_DATE_FORMAT = 'MM/DD/YYYY HH:mm:ss';
+export const TRACE_ANALYTICS_PLOTS_DATE_FORMAT = 'MMM D, YYYY HH:mm:ss';
+export const SERVICE_MAP_MAX_NODES = 500;
+// size limit when requesting edge related queries, not necessarily the number of edges
+export const SERVICE_MAP_MAX_EDGES = 1000;
+export const TRACES_MAX_NUM = 3000;
+export const TRACE_ANALYTICS_DOCUMENTATION_LINK = 'https://opensearch.org/docs/latest/observability-plugin/trace/index/';
+
+export const TRACE_ANALYTICS_INDICES_ROUTE = '/api/observability/trace_analytics/indices';
+export const TRACE_ANALYTICS_DSL_ROUTE = '/api/observability/trace_analytics/query';
diff --git a/common/query_manager/antlr/adaptors/case_insensitive_char_stream.ts b/common/query_manager/antlr/adaptors/case_insensitive_char_stream.ts
new file mode 100644
index 0000000000..6c3414f357
--- /dev/null
+++ b/common/query_manager/antlr/adaptors/case_insensitive_char_stream.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CharStream } from 'antlr4ts';
+
+export class CaseInsensitiveCharStream {
+  private stream: CharStream;
+
+  get index(): number {
+    return this.stream.index;
+  }
+
+  get size(): number {
+    return this.stream.size;
+  }
+
+  get sourceName(): string {
+    return 'pplquery';
+  }
+
+  constructor(stream: CharStream) {
+    this.stream = stream;
+  }
+
+  LA(offset: number): number {
+    const c: number = this.stream.LA(offset);
+    if (c <= 0) {
+      return c;
+    }
+
+    // case insensitivity support for PPL
+    return String.fromCodePoint(c).toUpperCase().codePointAt(0)!;
+  }
+
+  consume(): void {
+    this.stream.consume();
+  }
+
+  mark(): number {
+    return this.stream.mark();
+  }
+
+  release(marker: number): void {
+    this.stream.release(marker);
+  }
+
+  seek(index: number): void {
+    this.stream.seek(index);
+  }
+
+  getText(interval: any): string {
+    return this.stream.getText(interval);
+  }
+
+  toString(): string {
+    return this.stream.toString();
+  }
+}
diff --git a/common/query_manager/antlr/grammar/OpenSearchPPLLexer.g4 b/common/query_manager/antlr/grammar/OpenSearchPPLLexer.g4
new file mode 100644
index 0000000000..f513867964
--- /dev/null
+++ b/common/query_manager/antlr/grammar/OpenSearchPPLLexer.g4
@@ -0,0 +1,371 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+lexer grammar OpenSearchPPLLexer;
+
+channels { WHITESPACE, ERRORCHANNEL }
+
+
+// COMMAND KEYWORDS
+SEARCH:                             'SEARCH';
+DESCRIBE:                           'DESCRIBE';
+SHOW:                               'SHOW';
+FROM:                               'FROM';
+WHERE:                              'WHERE';
+FIELDS:                             'FIELDS';
+RENAME:                             'RENAME';
+STATS:                              'STATS';
+DEDUP:                              'DEDUP';
+SORT:                               'SORT';
+EVAL:                               'EVAL';
+HEAD:                               'HEAD';
+TOP:                                'TOP';
+RARE:                               'RARE';
+PARSE:                              'PARSE';
+METHOD:                             'METHOD';
+REGEX:                              'REGEX';
+PUNCT:                              'PUNCT';
+GROK:                               'GROK';
+PATTERN:                            'PATTERN';
+PATTERNS:                           'PATTERNS';
+NEW_FIELD:                          'NEW_FIELD';
+KMEANS:                             'KMEANS';
+AD:                                 'AD';
+ML:                                 'ML';
+
+// COMMAND ASSIST KEYWORDS
+AS:                                 'AS';
+BY:                                 'BY';
+SOURCE:                             'SOURCE';
+INDEX:                              'INDEX';
+D:                                  'D';
+DESC:                               'DESC';
+CATALOGS:                           'CATALOGS';
+
+// CLAUSE KEYWORDS
+SORTBY:                             'SORTBY';
+
+// FIELD KEYWORDS
+AUTO:                               'AUTO';
+STR:                                'STR';
+IP:                                 'IP';
+NUM:                                'NUM';
+
+// ARGUMENT KEYWORDS
+KEEPEMPTY:                          'KEEPEMPTY';
+CONSECUTIVE:                        'CONSECUTIVE';
+DEDUP_SPLITVALUES:                  'DEDUP_SPLITVALUES';
+PARTITIONS:                         'PARTITIONS';
+ALLNUM:                             'ALLNUM';
+DELIM:                              'DELIM';
+CENTROIDS:                          'CENTROIDS';
+ITERATIONS:                         'ITERATIONS';
+DISTANCE_TYPE:                      'DISTANCE_TYPE';
+NUMBER_OF_TREES:                    'NUMBER_OF_TREES';
+SHINGLE_SIZE:                       'SHINGLE_SIZE';
+SAMPLE_SIZE:                        'SAMPLE_SIZE';
+OUTPUT_AFTER:                       'OUTPUT_AFTER';
+TIME_DECAY:                         'TIME_DECAY';
+ANOMALY_RATE:                       'ANOMALY_RATE';
+CATEGORY_FIELD:                     'CATEGORY_FIELD';
+TIME_FIELD:                         'TIME_FIELD';
+TIME_ZONE:                          'TIME_ZONE';
+TRAINING_DATA_SIZE:                 'TRAINING_DATA_SIZE';
+ANOMALY_SCORE_THRESHOLD:            'ANOMALY_SCORE_THRESHOLD';
+
+// COMPARISON FUNCTION KEYWORDS
+CASE:                               'CASE';
+IN:                                 'IN';
+
+// LOGICAL KEYWORDS
+NOT:                                'NOT';
+OR:                                 'OR';
+AND:                                'AND';
+XOR:                                'XOR';
+TRUE:                               'TRUE';
+FALSE:                              'FALSE';
+REGEXP:                             'REGEXP';
+
+// DATETIME, INTERVAL AND UNIT KEYWORDS
+DATETIME:                           'DATETIME';
+INTERVAL:                           'INTERVAL';
+MICROSECOND:                        'MICROSECOND';
+MILLISECOND:                        'MILLISECOND';
+SECOND:                             'SECOND';
+MINUTE:                             'MINUTE';
+HOUR:                               'HOUR';
+DAY:                                'DAY';
+WEEK:                               'WEEK';
+MONTH:                              'MONTH';
+QUARTER:                            'QUARTER';
+YEAR:                               'YEAR';
+SECOND_MICROSECOND:                 'SECOND_MICROSECOND';
+MINUTE_MICROSECOND:                 'MINUTE_MICROSECOND';
+MINUTE_SECOND:                      'MINUTE_SECOND';
+HOUR_MICROSECOND:                   'HOUR_MICROSECOND';
+HOUR_SECOND:                        'HOUR_SECOND';
+HOUR_MINUTE:                        'HOUR_MINUTE';
+DAY_MICROSECOND:                    'DAY_MICROSECOND';
+DAY_SECOND:                         'DAY_SECOND';
+DAY_MINUTE:                         'DAY_MINUTE';
+DAY_HOUR:                           'DAY_HOUR';
+YEAR_MONTH:                         'YEAR_MONTH';
+CONVERT_TZ:                         'CONVERT_TZ';
+
+// DATASET TYPES
+DATAMODEL:                          'DATAMODEL';
+LOOKUP:                             'LOOKUP';
+SAVEDSEARCH:                        'SAVEDSEARCH';
+
+// CONVERTED DATA TYPES
+INT:                                'INT';
+INTEGER:                            'INTEGER';
+DOUBLE:                             'DOUBLE';
+LONG:                               'LONG';
+FLOAT:                              'FLOAT';
+STRING:                             'STRING';
+BOOLEAN:                            'BOOLEAN';
+
+// SPECIAL CHARACTERS AND OPERATORS
+PIPE:                               '|';
+COMMA:                              ',';
+DOT:                                '.';
+EQUAL:                              '=';
+GREATER:                            '>';
+LESS:                               '<';
+NOT_GREATER:                        '<' '=';
+NOT_LESS:                           '>' '=';
+NOT_EQUAL:                          '!' '=';
+PLUS:                               '+';
+MINUS:                              '-';
+STAR:                               '*';
+DIVIDE:                             '/';
+MODULE:                             '%';
+EXCLAMATION_SYMBOL:                 '!';
+COLON:                              ':';
+LT_PRTHS:                           '(';
+RT_PRTHS:                           ')';
+LT_SQR_PRTHS:                       '[';
+RT_SQR_PRTHS:                       ']';
+SINGLE_QUOTE:                       '\'';
+DOUBLE_QUOTE:                       '"';
+BACKTICK:                           '`';
+
+// Operators. Bit
+
+BIT_NOT_OP:                         '~';
+BIT_AND_OP:                         '&';
+BIT_XOR_OP:                         '^';
+
+// AGGREGATIONS
+AVG:                                'AVG';
+COUNT:                              'COUNT';
+DISTINCT_COUNT:                     'DISTINCT_COUNT';
+ESTDC:                              'ESTDC';
+ESTDC_ERROR:                        'ESTDC_ERROR';
+MAX:                                'MAX';
+MEAN:                               'MEAN';
+MEDIAN:                             'MEDIAN';
+MIN:                                'MIN';
+MODE:                               'MODE';
+RANGE:                              'RANGE';
+STDEV:                              'STDEV';
+STDEVP:                             'STDEVP';
+SUM:                                'SUM';
+SUMSQ:                              'SUMSQ';
+VAR_SAMP:                           'VAR_SAMP';
+VAR_POP:                            'VAR_POP';
+STDDEV_SAMP:                        'STDDEV_SAMP';
+STDDEV_POP:                         'STDDEV_POP';
+PERCENTILE:                         'PERCENTILE';
+TAKE:                               'TAKE';
+FIRST:                              'FIRST';
+LAST:                               'LAST';
+LIST:                               'LIST';
+VALUES:                             'VALUES';
+EARLIEST:                           'EARLIEST';
+EARLIEST_TIME:                      'EARLIEST_TIME';
+LATEST:                             'LATEST';
+LATEST_TIME:                        'LATEST_TIME';
+PER_DAY:                            'PER_DAY';
+PER_HOUR:                           'PER_HOUR';
+PER_MINUTE:                         'PER_MINUTE';
+PER_SECOND:                         'PER_SECOND';
+RATE:                               'RATE';
+SPARKLINE:                          'SPARKLINE';
+C:                                  'C';
+DC:                                 'DC';
+
+// BASIC FUNCTIONS
+ABS:                                'ABS';
+CEIL:                               'CEIL';
+CEILING:                            'CEILING';
+CONV:                               'CONV';
+CRC32:                              'CRC32';
+E:                                  'E';
+EXP:                                'EXP';
+FLOOR:                              'FLOOR';
+LN:                                 'LN';
+LOG:                                'LOG';
+LOG10:                              'LOG10';
+LOG2:                               'LOG2';
+MOD:                                'MOD';
+PI:                                 'PI';
+POW:                                'POW';
+POWER:                              'POWER';
+RAND:                               'RAND';
+ROUND:                              'ROUND';
+SIGN:                               'SIGN';
+SQRT:                               'SQRT';
+TRUNCATE:                           'TRUNCATE';
+
+// TRIGONOMETRIC FUNCTIONS
+ACOS:                               'ACOS';
+ASIN:                               'ASIN';
+ATAN:                               'ATAN';
+ATAN2:                              'ATAN2';
+COS:                                'COS';
+COT:                                'COT';
+DEGREES:                            'DEGREES';
+RADIANS:                            'RADIANS';
+SIN:                                'SIN';
+TAN:                                'TAN';
+
+// DATE AND TIME FUNCTIONS
+ADDDATE:                            'ADDDATE';
+CURDATE:                            'CURDATE';
+CURRENT_DATE:                       'CURRENT_DATE';
+CURRENT_TIME:                       'CURRENT_TIME';
+CURRENT_TIMESTAMP:                  'CURRENT_TIMESTAMP';
+CURTIME:                            'CURTIME';
+DATE:                               'DATE';
+DATE_ADD:                           'DATE_ADD';
+DATE_FORMAT:                        'DATE_FORMAT';
+DATE_SUB:                           'DATE_SUB';
+DAYNAME:                            'DAYNAME';
+DAYOFMONTH:                         'DAYOFMONTH';
+DAYOFWEEK:                          'DAYOFWEEK';
+DAYOFYEAR:                          'DAYOFYEAR';
+FROM_DAYS:                          'FROM_DAYS';
+LOCALTIME:                          'LOCALTIME';
+LOCALTIMESTAMP:                     'LOCALTIMESTAMP';
+FROM_UNIXTIME:                      'FROM_UNIXTIME';
+MAKEDATE:                           'MAKEDATE';
+MAKETIME:                           'MAKETIME';
+MONTHNAME:                          'MONTHNAME';
+NOW:                                'NOW';
+PERIOD_ADD:                         'PERIOD_ADD';
+PERIOD_DIFF:                        'PERIOD_DIFF';
+SUBDATE:                            'SUBDATE';
+SYSDATE:                            'SYSDATE';
+TIME:                               'TIME';
+TIME_TO_SEC:                        'TIME_TO_SEC';
+TIMESTAMP:                          'TIMESTAMP';
+TO_DAYS:                            'TO_DAYS';
+UTC_DATE:                           'UTC_DATE';
+UTC_TIME:                           'UTC_TIME';
+UTC_TIMESTAMP:                      'UTC_TIMESTAMP';
+UNIX_TIMESTAMP:                     'UNIX_TIMESTAMP';
+
+// TEXT FUNCTIONS
+SUBSTR:                             'SUBSTR';
+SUBSTRING:                          'SUBSTRING';
+LTRIM:                              'LTRIM';
+RTRIM:                              'RTRIM';
+TRIM:                               'TRIM';
+TO:                                 'TO';
+LOWER:                              'LOWER';
+UPPER:                              'UPPER';
+CONCAT:                             'CONCAT';
+CONCAT_WS:                          'CONCAT_WS';
+LENGTH:                             'LENGTH';
+STRCMP:                             'STRCMP';
+RIGHT:                              'RIGHT';
+LEFT:                               'LEFT';
+ASCII:                              'ASCII';
+LOCATE:                             'LOCATE';
+REPLACE:                            'REPLACE';
+CAST:                               'CAST';
+
+// BOOL FUNCTIONS
+LIKE:                               'LIKE';
+ISNULL:                             'ISNULL';
+ISNOTNULL:                          'ISNOTNULL';
+
+// FLOWCONTROL FUNCTIONS
+IFNULL:                             'IFNULL';
+NULLIF:                             'NULLIF';
+IF:                                 'IF';
+TYPEOF:                             'TYPEOF';
+
+// RELEVANCE FUNCTIONS AND PARAMETERS
+MATCH:                              'MATCH';
+MATCH_PHRASE:                       'MATCH_PHRASE';
+MATCH_PHRASE_PREFIX:                'MATCH_PHRASE_PREFIX';
+MATCH_BOOL_PREFIX:                  'MATCH_BOOL_PREFIX';
+SIMPLE_QUERY_STRING:                'SIMPLE_QUERY_STRING';
+MULTI_MATCH:                        'MULTI_MATCH';
+QUERY_STRING:                       'QUERY_STRING';
+
+ALLOW_LEADING_WILDCARD:             'ALLOW_LEADING_WILDCARD';
+ANALYZE_WILDCARD:                   'ANALYZE_WILDCARD';
+ANALYZER:                           'ANALYZER';
+AUTO_GENERATE_SYNONYMS_PHRASE_QUERY:'AUTO_GENERATE_SYNONYMS_PHRASE_QUERY';
+BOOST:                              'BOOST';
+CUTOFF_FREQUENCY:                   'CUTOFF_FREQUENCY';
+DEFAULT_FIELD:                      'DEFAULT_FIELD';
+DEFAULT_OPERATOR:                   'DEFAULT_OPERATOR';
+ENABLE_POSITION_INCREMENTS:         'ENABLE_POSITION_INCREMENTS';
+ESCAPE:                             'ESCAPE';
+FLAGS:                              'FLAGS';
+FUZZY_MAX_EXPANSIONS:               'FUZZY_MAX_EXPANSIONS';
+FUZZY_PREFIX_LENGTH:                'FUZZY_PREFIX_LENGTH';
+FUZZY_TRANSPOSITIONS:               'FUZZY_TRANSPOSITIONS';
+FUZZY_REWRITE:                      'FUZZY_REWRITE';
+FUZZINESS:                          'FUZZINESS';
+LENIENT:                            'LENIENT';
+LOW_FREQ_OPERATOR:                  'LOW_FREQ_OPERATOR';
+MAX_DETERMINIZED_STATES:            'MAX_DETERMINIZED_STATES';
+MAX_EXPANSIONS:                     'MAX_EXPANSIONS';
+MINIMUM_SHOULD_MATCH:               'MINIMUM_SHOULD_MATCH';
+OPERATOR:                           'OPERATOR';
+PHRASE_SLOP:                        'PHRASE_SLOP';
+PREFIX_LENGTH:                      'PREFIX_LENGTH';
+QUOTE_ANALYZER:                     'QUOTE_ANALYZER';
+QUOTE_FIELD_SUFFIX:                 'QUOTE_FIELD_SUFFIX';
+REWRITE:                            'REWRITE';
+SLOP:                               'SLOP';
+TIE_BREAKER:                        'TIE_BREAKER';
+TYPE:                               'TYPE';
+ZERO_TERMS_QUERY:                   'ZERO_TERMS_QUERY';
+
+// SPAN KEYWORDS
+SPAN:                               'SPAN';
+MS:                                 'MS';
+S:                                  'S';
+M:                                  'M';
+H:                                  'H';
+W:                                  'W';
+Q:                                  'Q';
+Y:                                  'Y';
+
+
+// LITERALS AND VALUES
+//STRING_LITERAL:                     DQUOTA_STRING | SQUOTA_STRING | BQUOTA_STRING;
+ID:                                 ID_LITERAL;
+INTEGER_LITERAL:                    DEC_DIGIT+;
+DECIMAL_LITERAL:                    (DEC_DIGIT+)? '.' DEC_DIGIT+;
+
+fragment DATE_SUFFIX:               ([\-.][*0-9]+)*;
+fragment ID_LITERAL:                [@*A-Z]+?[*A-Z_\-0-9]*;
+ID_DATE_SUFFIX:                     ID_LITERAL DATE_SUFFIX;
+DQUOTA_STRING:                      '"' ( '\\'. | '""' | ~('"'| '\\') )* '"';
+SQUOTA_STRING:                      '\'' ('\\'. | '\'\'' | ~('\'' | '\\'))* '\'';
+BQUOTA_STRING:                      '`' ( '\\'. | '``' | ~('`'|'\\'))* '`';
+fragment DEC_DIGIT:                 [0-9];
+
+
+ERROR_RECOGNITION:                  .    -> channel(ERRORCHANNEL);
\ No newline at end of file
diff --git a/common/query_manager/antlr/grammar/OpenSearchPPLParser.g4 b/common/query_manager/antlr/grammar/OpenSearchPPLParser.g4
new file mode 100644
index 0000000000..3909cef29d
--- /dev/null
+++ b/common/query_manager/antlr/grammar/OpenSearchPPLParser.g4
@@ -0,0 +1,572 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+
+parser grammar OpenSearchPPLParser;
+options { tokenVocab=OpenSearchPPLLexer; }
+
+root
+    : pplStatement? EOF
+    ;
+
+/** statement */
+pplStatement
+    : pplCommands (PIPE commands)*
+    ;
+
+/** commands */
+pplCommands
+    : searchCommand
+    | describeCommand
+    | showCatalogsCommand
+    ;
+
+commands
+    : whereCommand | fieldsCommand | renameCommand | statsCommand | dedupCommand | sortCommand | evalCommand | headCommand
+    | topCommand | rareCommand | grokCommand | parseCommand | patternsCommand | kmeansCommand | adCommand | mlCommand;
+
+searchCommand
+    : (SEARCH)? fromClause                                          #searchFrom
+    | (SEARCH)? fromClause logicalExpression                        #searchFromFilter
+    | (SEARCH)? logicalExpression fromClause                        #searchFilterFrom
+    ;
+
+describeCommand
+    : DESCRIBE tableSourceClause
+    ;
+
+showCatalogsCommand
+    : SHOW CATALOGS
+    ;
+
+whereCommand
+    : WHERE logicalExpression
+    ;
+
+fieldsCommand
+    : FIELDS (PLUS | MINUS)? fieldList
+    ;
+
+renameCommand
+    : RENAME renameClasue (COMMA renameClasue)*
+    ;
+
+statsCommand
+    : STATS
+    (PARTITIONS EQUAL partitions=integerLiteral)?
+    (ALLNUM EQUAL allnum=booleanLiteral)?
+    (DELIM EQUAL delim=stringLiteral)?
+    statsAggTerm (COMMA statsAggTerm)*
+    (statsByClause)?
+    (DEDUP_SPLITVALUES EQUAL dedupsplit=booleanLiteral)?
+    ;
+
+dedupCommand
+    : DEDUP
+    (number=integerLiteral)?
+    fieldList
+    (KEEPEMPTY EQUAL keepempty=booleanLiteral)?
+    (CONSECUTIVE EQUAL consecutive=booleanLiteral)?
+    ;
+
+sortCommand
+    : SORT sortbyClause
+    ;
+
+evalCommand
+    : EVAL evalClause (COMMA evalClause)*
+    ;
+
+headCommand
+    : HEAD
+    (number=integerLiteral)?
+    (FROM from=integerLiteral)?
+    ;
+    
+topCommand
+    : TOP
+    (number=integerLiteral)?
+    fieldList
+    (byClause)?
+    ;
+
+rareCommand
+    : RARE
+    fieldList
+    (byClause)?
+    ;
+
+grokCommand
+    : GROK (source_field=expression) (pattern=stringLiteral)
+    ;
+
+parseCommand
+    : PARSE (source_field=expression) (pattern=stringLiteral)
+    ;
+
+patternsCommand
+    : PATTERNS (patternsParameter)* (source_field=expression)
+    ;
+
+patternsParameter
+    : (NEW_FIELD EQUAL new_field=stringLiteral)
+    | (PATTERN EQUAL pattern=stringLiteral)
+    ;
+
+patternsMethod
+    : PUNCT | REGEX
+    ;
+
+kmeansCommand
+    : KMEANS (kmeansParameter)*
+    ;
+
+kmeansParameter
+    : (CENTROIDS EQUAL centroids=integerLiteral)
+    | (ITERATIONS EQUAL iterations=integerLiteral)
+    | (DISTANCE_TYPE EQUAL distance_type=stringLiteral)
+    ;
+
+adCommand
+    : AD (adParameter)*
+    ;
+
+adParameter
+    : (NUMBER_OF_TREES EQUAL number_of_trees=integerLiteral)
+    | (SHINGLE_SIZE EQUAL shingle_size=integerLiteral)
+    | (SAMPLE_SIZE EQUAL sample_size=integerLiteral)
+    | (OUTPUT_AFTER EQUAL output_after=integerLiteral)
+    | (TIME_DECAY EQUAL time_decay=decimalLiteral)
+    | (ANOMALY_RATE EQUAL anomaly_rate=decimalLiteral)
+    | (CATEGORY_FIELD EQUAL category_field=stringLiteral)
+    | (TIME_FIELD EQUAL time_field=stringLiteral)
+    | (DATE_FORMAT EQUAL date_format=stringLiteral)
+    | (TIME_ZONE EQUAL time_zone=stringLiteral)
+    | (TRAINING_DATA_SIZE EQUAL training_data_size=integerLiteral)
+    | (ANOMALY_SCORE_THRESHOLD EQUAL anomaly_score_threshold=decimalLiteral)
+    ;
+
+mlCommand
+    : ML (mlArg)*
+    ;
+
+mlArg
+    : (argName=ident EQUAL argValue=literalValue)
+    ;
+
+/** clauses */
+fromClause
+    : SOURCE EQUAL tableSourceClause
+    | INDEX EQUAL tableSourceClause
+    | SOURCE EQUAL tableFunction
+    | INDEX EQUAL tableFunction
+    ;
+
+tableSourceClause
+    : tableSource (COMMA tableSource)*
+    ;
+
+renameClasue
+    : orignalField=wcFieldExpression AS renamedField=wcFieldExpression
+    ;
+
+byClause
+    : BY fieldList
+    ;
+
+statsByClause
+    : BY fieldList
+    | BY bySpanClause
+    | BY bySpanClause COMMA fieldList
+    ;
+
+bySpanClause
+    : spanClause (AS alias=qualifiedName)?
+    ;
+
+spanClause
+    : SPAN LT_PRTHS fieldExpression COMMA value=literalValue (unit=timespanUnit)? RT_PRTHS
+    ;
+
+sortbyClause
+    : sortField (COMMA sortField)*
+    ;
+
+evalClause
+    : fieldExpression EQUAL expression
+    ;
+
+/** aggregation terms */
+statsAggTerm
+    : statsFunction (AS alias=wcFieldExpression)?
+    ;
+
+/** aggregation functions */
+statsFunction
+    : statsFunctionName LT_PRTHS valueExpression RT_PRTHS           #statsFunctionCall
+    | COUNT LT_PRTHS RT_PRTHS                                       #countAllFunctionCall
+    | (DISTINCT_COUNT | DC) LT_PRTHS valueExpression RT_PRTHS       #distinctCountFunctionCall
+    | percentileAggFunction                                         #percentileAggFunctionCall
+    | takeAggFunction                                               #takeAggFunctionCall
+    ;
+
+statsFunctionName
+    : AVG | COUNT | SUM | MIN | MAX | VAR_SAMP | VAR_POP | STDDEV_SAMP | STDDEV_POP
+    ;
+
+takeAggFunction
+    : TAKE LT_PRTHS fieldExpression (COMMA size=integerLiteral)? RT_PRTHS
+    ;
+
+percentileAggFunction
+    : PERCENTILE LESS value=integerLiteral GREATER LT_PRTHS aggField=fieldExpression RT_PRTHS
+    ;
+
+/** expressions */
+expression
+    : logicalExpression
+    | comparisonExpression
+    | valueExpression
+    ;
+
+logicalExpression
+    : comparisonExpression                                          #comparsion
+    | NOT logicalExpression                                         #logicalNot
+    | left=logicalExpression OR right=logicalExpression             #logicalOr
+    | left=logicalExpression (AND)? right=logicalExpression         #logicalAnd
+    | left=logicalExpression XOR right=logicalExpression            #logicalXor
+    | booleanExpression                                             #booleanExpr
+    | relevanceExpression                                           #relevanceExpr
+    ;
+
+comparisonExpression
+    : left=valueExpression comparisonOperator right=valueExpression #compareExpr
+    | valueExpression IN valueList                                  #inExpr
+    ;
+
+valueExpression
+    : left=valueExpression binaryOperator right=valueExpression     #binaryArithmetic
+    | LT_PRTHS left=valueExpression binaryOperator
+    right=valueExpression RT_PRTHS                                  #parentheticBinaryArithmetic
+    | primaryExpression                                             #valueExpressionDefault
+    ;
+
+primaryExpression
+    : evalFunctionCall
+    | dataTypeFunctionCall
+    | fieldExpression
+    | literalValue
+    | constantFunction
+    ;
+
+constantFunction
+    : constantFunctionName LT_PRTHS functionArgs? RT_PRTHS
+    ;
+
+booleanExpression
+    : booleanFunctionCall
+    ;
+
+relevanceExpression
+    : singleFieldRelevanceFunction | multiFieldRelevanceFunction
+    ;
+
+// Field is a single column
+singleFieldRelevanceFunction
+    : singleFieldRelevanceFunctionName LT_PRTHS
+        field=relevanceField COMMA query=relevanceQuery
+        (COMMA relevanceArg)* RT_PRTHS
+    ;
+
+// Field is a list of columns
+multiFieldRelevanceFunction
+    : multiFieldRelevanceFunctionName LT_PRTHS
+        LT_SQR_PRTHS field=relevanceFieldAndWeight (COMMA field=relevanceFieldAndWeight)* RT_SQR_PRTHS
+        COMMA query=relevanceQuery (COMMA relevanceArg)* RT_PRTHS
+    ;
+
+/** tables */
+tableSource
+    : qualifiedName
+    | ID_DATE_SUFFIX
+    ;
+
+tableFunction
+    : qualifiedName LT_PRTHS functionArgs RT_PRTHS
+    ;
+
+/** fields */
+fieldList
+    : fieldExpression (COMMA fieldExpression)*
+    ;
+
+wcFieldList
+    : wcFieldExpression (COMMA wcFieldExpression)*
+    ;
+
+sortField
+    : (PLUS | MINUS)? sortFieldExpression
+    ;
+
+sortFieldExpression
+    : fieldExpression
+    | AUTO LT_PRTHS fieldExpression RT_PRTHS
+    | STR LT_PRTHS fieldExpression RT_PRTHS
+    | IP LT_PRTHS fieldExpression RT_PRTHS
+    | NUM LT_PRTHS fieldExpression RT_PRTHS
+    ;
+
+fieldExpression
+    : qualifiedName
+    ;
+
+wcFieldExpression
+    : wcQualifiedName
+    ;
+
+/** functions */
+evalFunctionCall
+    : evalFunctionName LT_PRTHS functionArgs RT_PRTHS
+    ;
+
+/** cast function */
+dataTypeFunctionCall
+    : CAST LT_PRTHS expression AS convertedDataType RT_PRTHS
+    ;
+
+/** boolean functions */
+booleanFunctionCall
+    : conditionFunctionBase LT_PRTHS functionArgs RT_PRTHS
+    ;
+
+convertedDataType
+    : typeName=DATE
+    | typeName=TIME
+    | typeName=TIMESTAMP
+    | typeName=INT
+    | typeName=INTEGER
+    | typeName=DOUBLE
+    | typeName=LONG
+    | typeName=FLOAT
+    | typeName=STRING
+    | typeName=BOOLEAN
+    ;
+
+evalFunctionName
+    : mathematicalFunctionBase
+    | dateAndTimeFunctionBase
+    | textFunctionBase
+    | conditionFunctionBase
+    | systemFunctionBase
+    ;
+
+functionArgs
+    : (functionArg (COMMA functionArg)*)?
+    ;
+
+functionArg
+    : (ident EQUAL)? valueExpression
+    ;
+
+relevanceArg
+    : relevanceArgName EQUAL relevanceArgValue
+    ;
+
+relevanceArgName
+    : ALLOW_LEADING_WILDCARD | ANALYZER | ANALYZE_WILDCARD | AUTO_GENERATE_SYNONYMS_PHRASE_QUERY
+    | BOOST | CUTOFF_FREQUENCY | DEFAULT_FIELD | DEFAULT_OPERATOR | ENABLE_POSITION_INCREMENTS
+    | ESCAPE | FIELDS | FLAGS | FUZZINESS | FUZZY_MAX_EXPANSIONS | FUZZY_PREFIX_LENGTH
+    | FUZZY_REWRITE | FUZZY_TRANSPOSITIONS | LENIENT | LOW_FREQ_OPERATOR | MAX_DETERMINIZED_STATES
+    | MAX_EXPANSIONS | MINIMUM_SHOULD_MATCH | OPERATOR | PHRASE_SLOP | PREFIX_LENGTH
+    | QUOTE_ANALYZER | QUOTE_FIELD_SUFFIX | REWRITE | SLOP | TIE_BREAKER | TIME_ZONE | TYPE
+    | ZERO_TERMS_QUERY
+    ;
+
+relevanceFieldAndWeight
+    : field=relevanceField
+    | field=relevanceField weight=relevanceFieldWeight
+    | field=relevanceField BIT_XOR_OP weight=relevanceFieldWeight
+    ;
+
+relevanceFieldWeight
+    : integerLiteral
+    | decimalLiteral
+    ;
+
+relevanceField
+    : qualifiedName
+    | stringLiteral
+    ;
+
+relevanceQuery
+    : relevanceArgValue
+    ;
+
+relevanceArgValue
+    : qualifiedName
+    | literalValue
+    ;
+
+mathematicalFunctionBase
+    : ABS | CEIL | CEILING | CONV | CRC32 | E | EXP | FLOOR | LN | LOG | LOG10 | LOG2 | MOD | PI |POW | POWER
+    | RAND | ROUND | SIGN | SQRT | TRUNCATE
+    | trigonometricFunctionName
+    ;
+
+trigonometricFunctionName
+    : ACOS | ASIN | ATAN | ATAN2 | COS | COT | DEGREES | RADIANS | SIN | TAN
+    ;
+
+dateAndTimeFunctionBase
+    : ADDDATE | CONVERT_TZ | DATE | DATE_ADD | DATE_FORMAT | DATE_SUB
+    | DATETIME | DAY | DAYNAME | DAYOFMONTH | DAYOFWEEK | DAYOFYEAR | FROM_DAYS | FROM_UNIXTIME
+    | HOUR | MAKEDATE | MAKETIME | MICROSECOND | MINUTE | MONTH | MONTHNAME | PERIOD_ADD
+    | PERIOD_DIFF | QUARTER | SECOND | SUBDATE | SYSDATE | TIME | TIME_TO_SEC
+    | TIMESTAMP | TO_DAYS | UNIX_TIMESTAMP | WEEK | YEAR
+    ;
+
+// Functions which value could be cached in scope of a single query
+constantFunctionName
+    : CURRENT_DATE | CURRENT_TIME | CURRENT_TIMESTAMP | LOCALTIME | LOCALTIMESTAMP | UTC_TIMESTAMP | UTC_DATE | UTC_TIME
+    | CURDATE | CURTIME | NOW
+    ;
+
+/** condition function return boolean value */
+conditionFunctionBase
+    : LIKE
+    | IF | ISNULL | ISNOTNULL | IFNULL | NULLIF
+    ;
+
+systemFunctionBase
+    : TYPEOF
+    ;
+
+textFunctionBase
+    : SUBSTR | SUBSTRING | TRIM | LTRIM | RTRIM | LOWER | UPPER | CONCAT | CONCAT_WS | LENGTH | STRCMP
+    | RIGHT | LEFT | ASCII | LOCATE | REPLACE
+    ;
+
+/** operators */
+comparisonOperator
+    : EQUAL | NOT_EQUAL | LESS | NOT_LESS | GREATER | NOT_GREATER | REGEXP
+    ;
+
+binaryOperator
+    : PLUS | MINUS | STAR | DIVIDE | MODULE
+    ;
+
+
+singleFieldRelevanceFunctionName
+    : MATCH
+    | MATCH_PHRASE
+    | MATCH_BOOL_PREFIX
+    | MATCH_PHRASE_PREFIX
+    ;
+
+multiFieldRelevanceFunctionName
+    : SIMPLE_QUERY_STRING
+    | MULTI_MATCH
+    | QUERY_STRING
+    ;
+
+/** literals and values*/
+literalValue
+    : intervalLiteral
+    | stringLiteral
+    | integerLiteral
+    | decimalLiteral
+    | booleanLiteral
+    | datetimeLiteral           //#datetime
+    ;
+
+intervalLiteral
+    : INTERVAL valueExpression intervalUnit
+    ;
+
+stringLiteral
+    : DQUOTA_STRING | SQUOTA_STRING
+    ;
+
+integerLiteral
+    : (PLUS | MINUS)? INTEGER_LITERAL
+    ;
+
+decimalLiteral
+    : (PLUS | MINUS)? DECIMAL_LITERAL
+    ;
+
+booleanLiteral
+    : TRUE | FALSE
+    ;
+
+// Date and Time Literal, follow ANSI 92
+datetimeLiteral
+    : dateLiteral
+    | timeLiteral
+    | timestampLiteral
+    ;
+
+dateLiteral
+    : DATE date=stringLiteral
+    ;
+
+timeLiteral
+    : TIME time=stringLiteral
+    ;
+
+timestampLiteral
+    : TIMESTAMP timestamp=stringLiteral
+    ;
+
+intervalUnit
+    : MICROSECOND | SECOND | MINUTE | HOUR | DAY | WEEK | MONTH | QUARTER | YEAR | SECOND_MICROSECOND
+    | MINUTE_MICROSECOND | MINUTE_SECOND | HOUR_MICROSECOND | HOUR_SECOND | HOUR_MINUTE | DAY_MICROSECOND
+    | DAY_SECOND | DAY_MINUTE | DAY_HOUR | YEAR_MONTH
+    ;
+
+timespanUnit
+    : MS | S | M | H | D | W | Q | Y
+    | MILLISECOND | SECOND | MINUTE | HOUR | DAY | WEEK | MONTH | QUARTER | YEAR
+    ;
+
+
+valueList
+    : LT_PRTHS literalValue (COMMA literalValue)* RT_PRTHS
+    ;
+
+qualifiedName
+    : ident (DOT ident)*                             #identsAsQualifiedName
+    ;
+
+wcQualifiedName
+    : wildcard (DOT wildcard)*                       #identsAsWildcardQualifiedName
+    ;
+
+ident
+    : (DOT)? ID
+    | BACKTICK ident BACKTICK
+    | BQUOTA_STRING
+    | keywordsCanBeId
+    ;
+
+wildcard
+    : ident (MODULE ident)* (MODULE)?
+    | SINGLE_QUOTE wildcard SINGLE_QUOTE
+    | DOUBLE_QUOTE wildcard DOUBLE_QUOTE
+    | BACKTICK wildcard BACKTICK
+    ;
+
+keywordsCanBeId
+    : D // OD SQL and ODBC special
+    | statsFunctionName
+    | TIMESTAMP | DATE | TIME
+    | FIRST | LAST
+    | timespanUnit | SPAN
+    | constantFunctionName
+    | dateAndTimeFunctionBase
+    | textFunctionBase
+    | mathematicalFunctionBase
+    ;
\ No newline at end of file
diff --git a/common/query_manager/antlr/output/OpenSearchPPLLexer.interp b/common/query_manager/antlr/output/OpenSearchPPLLexer.interp
new file mode 100644
index 0000000000..22eb5e9122
--- /dev/null
+++ b/common/query_manager/antlr/output/OpenSearchPPLLexer.interp
@@ -0,0 +1,945 @@
+token literal names:
+null
+'SEARCH'
+'DESCRIBE'
+'SHOW'
+'FROM'
+'WHERE'
+'FIELDS'
+'RENAME'
+'STATS'
+'DEDUP'
+'SORT'
+'EVAL'
+'HEAD'
+'TOP'
+'RARE'
+'PARSE'
+'METHOD'
+'REGEX'
+'PUNCT'
+'GROK'
+'PATTERN'
+'PATTERNS'
+'NEW_FIELD'
+'KMEANS'
+'AD'
+'ML'
+'AS'
+'BY'
+'SOURCE'
+'INDEX'
+'D'
+'DESC'
+'CATALOGS'
+'SORTBY'
+'AUTO'
+'STR'
+'IP'
+'NUM'
+'KEEPEMPTY'
+'CONSECUTIVE'
+'DEDUP_SPLITVALUES'
+'PARTITIONS'
+'ALLNUM'
+'DELIM'
+'CENTROIDS'
+'ITERATIONS'
+'DISTANCE_TYPE'
+'NUMBER_OF_TREES'
+'SHINGLE_SIZE'
+'SAMPLE_SIZE'
+'OUTPUT_AFTER'
+'TIME_DECAY'
+'ANOMALY_RATE'
+'CATEGORY_FIELD'
+'TIME_FIELD'
+'TIME_ZONE'
+'TRAINING_DATA_SIZE'
+'ANOMALY_SCORE_THRESHOLD'
+'CASE'
+'IN'
+'NOT'
+'OR'
+'AND'
+'XOR'
+'TRUE'
+'FALSE'
+'REGEXP'
+'DATETIME'
+'INTERVAL'
+'MICROSECOND'
+'MILLISECOND'
+'SECOND'
+'MINUTE'
+'HOUR'
+'DAY'
+'WEEK'
+'MONTH'
+'QUARTER'
+'YEAR'
+'SECOND_MICROSECOND'
+'MINUTE_MICROSECOND'
+'MINUTE_SECOND'
+'HOUR_MICROSECOND'
+'HOUR_SECOND'
+'HOUR_MINUTE'
+'DAY_MICROSECOND'
+'DAY_SECOND'
+'DAY_MINUTE'
+'DAY_HOUR'
+'YEAR_MONTH'
+'CONVERT_TZ'
+'DATAMODEL'
+'LOOKUP'
+'SAVEDSEARCH'
+'INT'
+'INTEGER'
+'DOUBLE'
+'LONG'
+'FLOAT'
+'STRING'
+'BOOLEAN'
+'|'
+','
+'.'
+'='
+'>'
+'<'
+null
+null
+null
+'+'
+'-'
+'*'
+'/'
+'%'
+'!'
+':'
+'('
+')'
+'['
+']'
+'\''
+'"'
+'`'
+'~'
+'&'
+'^'
+'AVG'
+'COUNT'
+'DISTINCT_COUNT'
+'ESTDC'
+'ESTDC_ERROR'
+'MAX'
+'MEAN'
+'MEDIAN'
+'MIN'
+'MODE'
+'RANGE'
+'STDEV'
+'STDEVP'
+'SUM'
+'SUMSQ'
+'VAR_SAMP'
+'VAR_POP'
+'STDDEV_SAMP'
+'STDDEV_POP'
+'PERCENTILE'
+'TAKE'
+'FIRST'
+'LAST'
+'LIST'
+'VALUES'
+'EARLIEST'
+'EARLIEST_TIME'
+'LATEST'
+'LATEST_TIME'
+'PER_DAY'
+'PER_HOUR'
+'PER_MINUTE'
+'PER_SECOND'
+'RATE'
+'SPARKLINE'
+'C'
+'DC'
+'ABS'
+'CEIL'
+'CEILING'
+'CONV'
+'CRC32'
+'E'
+'EXP'
+'FLOOR'
+'LN'
+'LOG'
+'LOG10'
+'LOG2'
+'MOD'
+'PI'
+'POW'
+'POWER'
+'RAND'
+'ROUND'
+'SIGN'
+'SQRT'
+'TRUNCATE'
+'ACOS'
+'ASIN'
+'ATAN'
+'ATAN2'
+'COS'
+'COT'
+'DEGREES'
+'RADIANS'
+'SIN'
+'TAN'
+'ADDDATE'
+'CURDATE'
+'CURRENT_DATE'
+'CURRENT_TIME'
+'CURRENT_TIMESTAMP'
+'CURTIME'
+'DATE'
+'DATE_ADD'
+'DATE_FORMAT'
+'DATE_SUB'
+'DAYNAME'
+'DAYOFMONTH'
+'DAYOFWEEK'
+'DAYOFYEAR'
+'FROM_DAYS'
+'LOCALTIME'
+'LOCALTIMESTAMP'
+'FROM_UNIXTIME'
+'MAKEDATE'
+'MAKETIME'
+'MONTHNAME'
+'NOW'
+'PERIOD_ADD'
+'PERIOD_DIFF'
+'SUBDATE'
+'SYSDATE'
+'TIME'
+'TIME_TO_SEC'
+'TIMESTAMP'
+'TO_DAYS'
+'UTC_DATE'
+'UTC_TIME'
+'UTC_TIMESTAMP'
+'UNIX_TIMESTAMP'
+'SUBSTR'
+'SUBSTRING'
+'LTRIM'
+'RTRIM'
+'TRIM'
+'TO'
+'LOWER'
+'UPPER'
+'CONCAT'
+'CONCAT_WS'
+'LENGTH'
+'STRCMP'
+'RIGHT'
+'LEFT'
+'ASCII'
+'LOCATE'
+'REPLACE'
+'CAST'
+'LIKE'
+'ISNULL'
+'ISNOTNULL'
+'IFNULL'
+'NULLIF'
+'IF'
+'TYPEOF'
+'MATCH'
+'MATCH_PHRASE'
+'MATCH_PHRASE_PREFIX'
+'MATCH_BOOL_PREFIX'
+'SIMPLE_QUERY_STRING'
+'MULTI_MATCH'
+'QUERY_STRING'
+'ALLOW_LEADING_WILDCARD'
+'ANALYZE_WILDCARD'
+'ANALYZER'
+'AUTO_GENERATE_SYNONYMS_PHRASE_QUERY'
+'BOOST'
+'CUTOFF_FREQUENCY'
+'DEFAULT_FIELD'
+'DEFAULT_OPERATOR'
+'ENABLE_POSITION_INCREMENTS'
+'ESCAPE'
+'FLAGS'
+'FUZZY_MAX_EXPANSIONS'
+'FUZZY_PREFIX_LENGTH'
+'FUZZY_TRANSPOSITIONS'
+'FUZZY_REWRITE'
+'FUZZINESS'
+'LENIENT'
+'LOW_FREQ_OPERATOR'
+'MAX_DETERMINIZED_STATES'
+'MAX_EXPANSIONS'
+'MINIMUM_SHOULD_MATCH'
+'OPERATOR'
+'PHRASE_SLOP'
+'PREFIX_LENGTH'
+'QUOTE_ANALYZER'
+'QUOTE_FIELD_SUFFIX'
+'REWRITE'
+'SLOP'
+'TIE_BREAKER'
+'TYPE'
+'ZERO_TERMS_QUERY'
+'SPAN'
+'MS'
+'S'
+'M'
+'H'
+'W'
+'Q'
+'Y'
+null
+null
+null
+null
+null
+null
+null
+null
+
+token symbolic names:
+null
+SEARCH
+DESCRIBE
+SHOW
+FROM
+WHERE
+FIELDS
+RENAME
+STATS
+DEDUP
+SORT
+EVAL
+HEAD
+TOP
+RARE
+PARSE
+METHOD
+REGEX
+PUNCT
+GROK
+PATTERN
+PATTERNS
+NEW_FIELD
+KMEANS
+AD
+ML
+AS
+BY
+SOURCE
+INDEX
+D
+DESC
+CATALOGS
+SORTBY
+AUTO
+STR
+IP
+NUM
+KEEPEMPTY
+CONSECUTIVE
+DEDUP_SPLITVALUES
+PARTITIONS
+ALLNUM
+DELIM
+CENTROIDS
+ITERATIONS
+DISTANCE_TYPE
+NUMBER_OF_TREES
+SHINGLE_SIZE
+SAMPLE_SIZE
+OUTPUT_AFTER
+TIME_DECAY
+ANOMALY_RATE
+CATEGORY_FIELD
+TIME_FIELD
+TIME_ZONE
+TRAINING_DATA_SIZE
+ANOMALY_SCORE_THRESHOLD
+CASE
+IN
+NOT
+OR
+AND
+XOR
+TRUE
+FALSE
+REGEXP
+DATETIME
+INTERVAL
+MICROSECOND
+MILLISECOND
+SECOND
+MINUTE
+HOUR
+DAY
+WEEK
+MONTH
+QUARTER
+YEAR
+SECOND_MICROSECOND
+MINUTE_MICROSECOND
+MINUTE_SECOND
+HOUR_MICROSECOND
+HOUR_SECOND
+HOUR_MINUTE
+DAY_MICROSECOND
+DAY_SECOND
+DAY_MINUTE
+DAY_HOUR
+YEAR_MONTH
+CONVERT_TZ
+DATAMODEL
+LOOKUP
+SAVEDSEARCH
+INT
+INTEGER
+DOUBLE
+LONG
+FLOAT
+STRING
+BOOLEAN
+PIPE
+COMMA
+DOT
+EQUAL
+GREATER
+LESS
+NOT_GREATER
+NOT_LESS
+NOT_EQUAL
+PLUS
+MINUS
+STAR
+DIVIDE
+MODULE
+EXCLAMATION_SYMBOL
+COLON
+LT_PRTHS
+RT_PRTHS
+LT_SQR_PRTHS
+RT_SQR_PRTHS
+SINGLE_QUOTE
+DOUBLE_QUOTE
+BACKTICK
+BIT_NOT_OP
+BIT_AND_OP
+BIT_XOR_OP
+AVG
+COUNT
+DISTINCT_COUNT
+ESTDC
+ESTDC_ERROR
+MAX
+MEAN
+MEDIAN
+MIN
+MODE
+RANGE
+STDEV
+STDEVP
+SUM
+SUMSQ
+VAR_SAMP
+VAR_POP
+STDDEV_SAMP
+STDDEV_POP
+PERCENTILE
+TAKE
+FIRST
+LAST
+LIST
+VALUES
+EARLIEST
+EARLIEST_TIME
+LATEST
+LATEST_TIME
+PER_DAY
+PER_HOUR
+PER_MINUTE
+PER_SECOND
+RATE
+SPARKLINE
+C
+DC
+ABS
+CEIL
+CEILING
+CONV
+CRC32
+E
+EXP
+FLOOR
+LN
+LOG
+LOG10
+LOG2
+MOD
+PI
+POW
+POWER
+RAND
+ROUND
+SIGN
+SQRT
+TRUNCATE
+ACOS
+ASIN
+ATAN
+ATAN2
+COS
+COT
+DEGREES
+RADIANS
+SIN
+TAN
+ADDDATE
+CURDATE
+CURRENT_DATE
+CURRENT_TIME
+CURRENT_TIMESTAMP
+CURTIME
+DATE
+DATE_ADD
+DATE_FORMAT
+DATE_SUB
+DAYNAME
+DAYOFMONTH
+DAYOFWEEK
+DAYOFYEAR
+FROM_DAYS
+LOCALTIME
+LOCALTIMESTAMP
+FROM_UNIXTIME
+MAKEDATE
+MAKETIME
+MONTHNAME
+NOW
+PERIOD_ADD
+PERIOD_DIFF
+SUBDATE
+SYSDATE
+TIME
+TIME_TO_SEC
+TIMESTAMP
+TO_DAYS
+UTC_DATE
+UTC_TIME
+UTC_TIMESTAMP
+UNIX_TIMESTAMP
+SUBSTR
+SUBSTRING
+LTRIM
+RTRIM
+TRIM
+TO
+LOWER
+UPPER
+CONCAT
+CONCAT_WS
+LENGTH
+STRCMP
+RIGHT
+LEFT
+ASCII
+LOCATE
+REPLACE
+CAST
+LIKE
+ISNULL
+ISNOTNULL
+IFNULL
+NULLIF
+IF
+TYPEOF
+MATCH
+MATCH_PHRASE
+MATCH_PHRASE_PREFIX
+MATCH_BOOL_PREFIX
+SIMPLE_QUERY_STRING
+MULTI_MATCH
+QUERY_STRING
+ALLOW_LEADING_WILDCARD
+ANALYZE_WILDCARD
+ANALYZER
+AUTO_GENERATE_SYNONYMS_PHRASE_QUERY
+BOOST
+CUTOFF_FREQUENCY
+DEFAULT_FIELD
+DEFAULT_OPERATOR
+ENABLE_POSITION_INCREMENTS
+ESCAPE
+FLAGS
+FUZZY_MAX_EXPANSIONS
+FUZZY_PREFIX_LENGTH
+FUZZY_TRANSPOSITIONS
+FUZZY_REWRITE
+FUZZINESS
+LENIENT
+LOW_FREQ_OPERATOR
+MAX_DETERMINIZED_STATES
+MAX_EXPANSIONS
+MINIMUM_SHOULD_MATCH
+OPERATOR
+PHRASE_SLOP
+PREFIX_LENGTH
+QUOTE_ANALYZER
+QUOTE_FIELD_SUFFIX
+REWRITE
+SLOP
+TIE_BREAKER
+TYPE
+ZERO_TERMS_QUERY
+SPAN
+MS
+S
+M
+H
+W
+Q
+Y
+ID
+INTEGER_LITERAL
+DECIMAL_LITERAL
+ID_DATE_SUFFIX
+DQUOTA_STRING
+SQUOTA_STRING
+BQUOTA_STRING
+ERROR_RECOGNITION
+
+rule names:
+SEARCH
+DESCRIBE
+SHOW
+FROM
+WHERE
+FIELDS
+RENAME
+STATS
+DEDUP
+SORT
+EVAL
+HEAD
+TOP
+RARE
+PARSE
+METHOD
+REGEX
+PUNCT
+GROK
+PATTERN
+PATTERNS
+NEW_FIELD
+KMEANS
+AD
+ML
+AS
+BY
+SOURCE
+INDEX
+D
+DESC
+CATALOGS
+SORTBY
+AUTO
+STR
+IP
+NUM
+KEEPEMPTY
+CONSECUTIVE
+DEDUP_SPLITVALUES
+PARTITIONS
+ALLNUM
+DELIM
+CENTROIDS
+ITERATIONS
+DISTANCE_TYPE
+NUMBER_OF_TREES
+SHINGLE_SIZE
+SAMPLE_SIZE
+OUTPUT_AFTER
+TIME_DECAY
+ANOMALY_RATE
+CATEGORY_FIELD
+TIME_FIELD
+TIME_ZONE
+TRAINING_DATA_SIZE
+ANOMALY_SCORE_THRESHOLD
+CASE
+IN
+NOT
+OR
+AND
+XOR
+TRUE
+FALSE
+REGEXP
+DATETIME
+INTERVAL
+MICROSECOND
+MILLISECOND
+SECOND
+MINUTE
+HOUR
+DAY
+WEEK
+MONTH
+QUARTER
+YEAR
+SECOND_MICROSECOND
+MINUTE_MICROSECOND
+MINUTE_SECOND
+HOUR_MICROSECOND
+HOUR_SECOND
+HOUR_MINUTE
+DAY_MICROSECOND
+DAY_SECOND
+DAY_MINUTE
+DAY_HOUR
+YEAR_MONTH
+CONVERT_TZ
+DATAMODEL
+LOOKUP
+SAVEDSEARCH
+INT
+INTEGER
+DOUBLE
+LONG
+FLOAT
+STRING
+BOOLEAN
+PIPE
+COMMA
+DOT
+EQUAL
+GREATER
+LESS
+NOT_GREATER
+NOT_LESS
+NOT_EQUAL
+PLUS
+MINUS
+STAR
+DIVIDE
+MODULE
+EXCLAMATION_SYMBOL
+COLON
+LT_PRTHS
+RT_PRTHS
+LT_SQR_PRTHS
+RT_SQR_PRTHS
+SINGLE_QUOTE
+DOUBLE_QUOTE
+BACKTICK
+BIT_NOT_OP
+BIT_AND_OP
+BIT_XOR_OP
+AVG
+COUNT
+DISTINCT_COUNT
+ESTDC
+ESTDC_ERROR
+MAX
+MEAN
+MEDIAN
+MIN
+MODE
+RANGE
+STDEV
+STDEVP
+SUM
+SUMSQ
+VAR_SAMP
+VAR_POP
+STDDEV_SAMP
+STDDEV_POP
+PERCENTILE
+TAKE
+FIRST
+LAST
+LIST
+VALUES
+EARLIEST
+EARLIEST_TIME
+LATEST
+LATEST_TIME
+PER_DAY
+PER_HOUR
+PER_MINUTE
+PER_SECOND
+RATE
+SPARKLINE
+C
+DC
+ABS
+CEIL
+CEILING
+CONV
+CRC32
+E
+EXP
+FLOOR
+LN
+LOG
+LOG10
+LOG2
+MOD
+PI
+POW
+POWER
+RAND
+ROUND
+SIGN
+SQRT
+TRUNCATE
+ACOS
+ASIN
+ATAN
+ATAN2
+COS
+COT
+DEGREES
+RADIANS
+SIN
+TAN
+ADDDATE
+CURDATE
+CURRENT_DATE
+CURRENT_TIME
+CURRENT_TIMESTAMP
+CURTIME
+DATE
+DATE_ADD
+DATE_FORMAT
+DATE_SUB
+DAYNAME
+DAYOFMONTH
+DAYOFWEEK
+DAYOFYEAR
+FROM_DAYS
+LOCALTIME
+LOCALTIMESTAMP
+FROM_UNIXTIME
+MAKEDATE
+MAKETIME
+MONTHNAME
+NOW
+PERIOD_ADD
+PERIOD_DIFF
+SUBDATE
+SYSDATE
+TIME
+TIME_TO_SEC
+TIMESTAMP
+TO_DAYS
+UTC_DATE
+UTC_TIME
+UTC_TIMESTAMP
+UNIX_TIMESTAMP
+SUBSTR
+SUBSTRING
+LTRIM
+RTRIM
+TRIM
+TO
+LOWER
+UPPER
+CONCAT
+CONCAT_WS
+LENGTH
+STRCMP
+RIGHT
+LEFT
+ASCII
+LOCATE
+REPLACE
+CAST
+LIKE
+ISNULL
+ISNOTNULL
+IFNULL
+NULLIF
+IF
+TYPEOF
+MATCH
+MATCH_PHRASE
+MATCH_PHRASE_PREFIX
+MATCH_BOOL_PREFIX
+SIMPLE_QUERY_STRING
+MULTI_MATCH
+QUERY_STRING
+ALLOW_LEADING_WILDCARD
+ANALYZE_WILDCARD
+ANALYZER
+AUTO_GENERATE_SYNONYMS_PHRASE_QUERY
+BOOST
+CUTOFF_FREQUENCY
+DEFAULT_FIELD
+DEFAULT_OPERATOR
+ENABLE_POSITION_INCREMENTS
+ESCAPE
+FLAGS
+FUZZY_MAX_EXPANSIONS
+FUZZY_PREFIX_LENGTH
+FUZZY_TRANSPOSITIONS
+FUZZY_REWRITE
+FUZZINESS
+LENIENT
+LOW_FREQ_OPERATOR
+MAX_DETERMINIZED_STATES
+MAX_EXPANSIONS
+MINIMUM_SHOULD_MATCH
+OPERATOR
+PHRASE_SLOP
+PREFIX_LENGTH
+QUOTE_ANALYZER
+QUOTE_FIELD_SUFFIX
+REWRITE
+SLOP
+TIE_BREAKER
+TYPE
+ZERO_TERMS_QUERY
+SPAN
+MS
+S
+M
+H
+W
+Q
+Y
+ID
+INTEGER_LITERAL
+DECIMAL_LITERAL
+DATE_SUFFIX
+ID_LITERAL
+ID_DATE_SUFFIX
+DQUOTA_STRING
+SQUOTA_STRING
+BQUOTA_STRING
+DEC_DIGIT
+ERROR_RECOGNITION
+
+channel names:
+DEFAULT_TOKEN_CHANNEL
+HIDDEN
+null
+null
+WHITESPACE
+ERRORCHANNEL
+
+mode names:
+DEFAULT_MODE
+
+atn:
+[3, 51485, 51898, 1421, 44986, 20307, 1543, 60043, 49729, 2, 309, 3131, 8, 1, 4, 2, 9, 2, 4, 3, 9, 3, 4, 4, 9, 4, 4, 5, 9, 5, 4, 6, 9, 6, 4, 7, 9, 7, 4, 8, 9, 8, 4, 9, 9, 9, 4, 10, 9, 10, 4, 11, 9, 11, 4, 12, 9, 12, 4, 13, 9, 13, 4, 14, 9, 14, 4, 15, 9, 15, 4, 16, 9, 16, 4, 17, 9, 17, 4, 18, 9, 18, 4, 19, 9, 19, 4, 20, 9, 20, 4, 21, 9, 21, 4, 22, 9, 22, 4, 23, 9, 23, 4, 24, 9, 24, 4, 25, 9, 25, 4, 26, 9, 26, 4, 27, 9, 27, 4, 28, 9, 28, 4, 29, 9, 29, 4, 30, 9, 30, 4, 31, 9, 31, 4, 32, 9, 32, 4, 33, 9, 33, 4, 34, 9, 34, 4, 35, 9, 35, 4, 36, 9, 36, 4, 37, 9, 37, 4, 38, 9, 38, 4, 39, 9, 39, 4, 40, 9, 40, 4, 41, 9, 41, 4, 42, 9, 42, 4, 43, 9, 43, 4, 44, 9, 44, 4, 45, 9, 45, 4, 46, 9, 46, 4, 47, 9, 47, 4, 48, 9, 48, 4, 49, 9, 49, 4, 50, 9, 50, 4, 51, 9, 51, 4, 52, 9, 52, 4, 53, 9, 53, 4, 54, 9, 54, 4, 55, 9, 55, 4, 56, 9, 56, 4, 57, 9, 57, 4, 58, 9, 58, 4, 59, 9, 59, 4, 60, 9, 60, 4, 61, 9, 61, 4, 62, 9, 62, 4, 63, 9, 63, 4, 64, 9, 64, 4, 65, 9, 65, 4, 66, 9, 66, 4, 67, 9, 67, 4, 68, 9, 68, 4, 69, 9, 69, 4, 70, 9, 70, 4, 71, 9, 71, 4, 72, 9, 72, 4, 73, 9, 73, 4, 74, 9, 74, 4, 75, 9, 75, 4, 76, 9, 76, 4, 77, 9, 77, 4, 78, 9, 78, 4, 79, 9, 79, 4, 80, 9, 80, 4, 81, 9, 81, 4, 82, 9, 82, 4, 83, 9, 83, 4, 84, 9, 84, 4, 85, 9, 85, 4, 86, 9, 86, 4, 87, 9, 87, 4, 88, 9, 88, 4, 89, 9, 89, 4, 90, 9, 90, 4, 91, 9, 91, 4, 92, 9, 92, 4, 93, 9, 93, 4, 94, 9, 94, 4, 95, 9, 95, 4, 96, 9, 96, 4, 97, 9, 97, 4, 98, 9, 98, 4, 99, 9, 99, 4, 100, 9, 100, 4, 101, 9, 101, 4, 102, 9, 102, 4, 103, 9, 103, 4, 104, 9, 104, 4, 105, 9, 105, 4, 106, 9, 106, 4, 107, 9, 107, 4, 108, 9, 108, 4, 109, 9, 109, 4, 110, 9, 110, 4, 111, 9, 111, 4, 112, 9, 112, 4, 113, 9, 113, 4, 114, 9, 114, 4, 115, 9, 115, 4, 116, 9, 116, 4, 117, 9, 117, 4, 118, 9, 118, 4, 119, 9, 119, 4, 120, 9, 120, 4, 121, 9, 121, 4, 122, 9, 122, 4, 123, 9, 123, 4, 124, 9, 124, 4, 125, 9, 125, 4, 126, 9, 126, 4, 127, 9, 127, 4, 128, 9, 128, 4, 129, 9, 129, 4, 130, 9, 130, 4, 131, 9, 131, 4, 132, 9, 132, 4, 133, 9, 133, 4, 134, 9, 134, 4, 135, 9, 135, 4, 136, 9, 136, 4, 137, 9, 137, 4, 138, 9, 138, 4, 139, 9, 139, 4, 140, 9, 140, 4, 141, 9, 141, 4, 142, 9, 142, 4, 143, 9, 143, 4, 144, 9, 144, 4, 145, 9, 145, 4, 146, 9, 146, 4, 147, 9, 147, 4, 148, 9, 148, 4, 149, 9, 149, 4, 150, 9, 150, 4, 151, 9, 151, 4, 152, 9, 152, 4, 153, 9, 153, 4, 154, 9, 154, 4, 155, 9, 155, 4, 156, 9, 156, 4, 157, 9, 157, 4, 158, 9, 158, 4, 159, 9, 159, 4, 160, 9, 160, 4, 161, 9, 161, 4, 162, 9, 162, 4, 163, 9, 163, 4, 164, 9, 164, 4, 165, 9, 165, 4, 166, 9, 166, 4, 167, 9, 167, 4, 168, 9, 168, 4, 169, 9, 169, 4, 170, 9, 170, 4, 171, 9, 171, 4, 172, 9, 172, 4, 173, 9, 173, 4, 174, 9, 174, 4, 175, 9, 175, 4, 176, 9, 176, 4, 177, 9, 177, 4, 178, 9, 178, 4, 179, 9, 179, 4, 180, 9, 180, 4, 181, 9, 181, 4, 182, 9, 182, 4, 183, 9, 183, 4, 184, 9, 184, 4, 185, 9, 185, 4, 186, 9, 186, 4, 187, 9, 187, 4, 188, 9, 188, 4, 189, 9, 189, 4, 190, 9, 190, 4, 191, 9, 191, 4, 192, 9, 192, 4, 193, 9, 193, 4, 194, 9, 194, 4, 195, 9, 195, 4, 196, 9, 196, 4, 197, 9, 197, 4, 198, 9, 198, 4, 199, 9, 199, 4, 200, 9, 200, 4, 201, 9, 201, 4, 202, 9, 202, 4, 203, 9, 203, 4, 204, 9, 204, 4, 205, 9, 205, 4, 206, 9, 206, 4, 207, 9, 207, 4, 208, 9, 208, 4, 209, 9, 209, 4, 210, 9, 210, 4, 211, 9, 211, 4, 212, 9, 212, 4, 213, 9, 213, 4, 214, 9, 214, 4, 215, 9, 215, 4, 216, 9, 216, 4, 217, 9, 217, 4, 218, 9, 218, 4, 219, 9, 219, 4, 220, 9, 220, 4, 221, 9, 221, 4, 222, 9, 222, 4, 223, 9, 223, 4, 224, 9, 224, 4, 225, 9, 225, 4, 226, 9, 226, 4, 227, 9, 227, 4, 228, 9, 228, 4, 229, 9, 229, 4, 230, 9, 230, 4, 231, 9, 231, 4, 232, 9, 232, 4, 233, 9, 233, 4, 234, 9, 234, 4, 235, 9, 235, 4, 236, 9, 236, 4, 237, 9, 237, 4, 238, 9, 238, 4, 239, 9, 239, 4, 240, 9, 240, 4, 241, 9, 241, 4, 242, 9, 242, 4, 243, 9, 243, 4, 244, 9, 244, 4, 245, 9, 245, 4, 246, 9, 246, 4, 247, 9, 247, 4, 248, 9, 248, 4, 249, 9, 249, 4, 250, 9, 250, 4, 251, 9, 251, 4, 252, 9, 252, 4, 253, 9, 253, 4, 254, 9, 254, 4, 255, 9, 255, 4, 256, 9, 256, 4, 257, 9, 257, 4, 258, 9, 258, 4, 259, 9, 259, 4, 260, 9, 260, 4, 261, 9, 261, 4, 262, 9, 262, 4, 263, 9, 263, 4, 264, 9, 264, 4, 265, 9, 265, 4, 266, 9, 266, 4, 267, 9, 267, 4, 268, 9, 268, 4, 269, 9, 269, 4, 270, 9, 270, 4, 271, 9, 271, 4, 272, 9, 272, 4, 273, 9, 273, 4, 274, 9, 274, 4, 275, 9, 275, 4, 276, 9, 276, 4, 277, 9, 277, 4, 278, 9, 278, 4, 279, 9, 279, 4, 280, 9, 280, 4, 281, 9, 281, 4, 282, 9, 282, 4, 283, 9, 283, 4, 284, 9, 284, 4, 285, 9, 285, 4, 286, 9, 286, 4, 287, 9, 287, 4, 288, 9, 288, 4, 289, 9, 289, 4, 290, 9, 290, 4, 291, 9, 291, 4, 292, 9, 292, 4, 293, 9, 293, 4, 294, 9, 294, 4, 295, 9, 295, 4, 296, 9, 296, 4, 297, 9, 297, 4, 298, 9, 298, 4, 299, 9, 299, 4, 300, 9, 300, 4, 301, 9, 301, 4, 302, 9, 302, 4, 303, 9, 303, 4, 304, 9, 304, 4, 305, 9, 305, 4, 306, 9, 306, 4, 307, 9, 307, 4, 308, 9, 308, 4, 309, 9, 309, 4, 310, 9, 310, 4, 311, 9, 311, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 3, 4, 3, 4, 3, 4, 3, 4, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 6, 3, 6, 3, 6, 3, 6, 3, 6, 3, 6, 3, 7, 3, 7, 3, 7, 3, 7, 3, 7, 3, 7, 3, 7, 3, 8, 3, 8, 3, 8, 3, 8, 3, 8, 3, 8, 3, 8, 3, 9, 3, 9, 3, 9, 3, 9, 3, 9, 3, 9, 3, 10, 3, 10, 3, 10, 3, 10, 3, 10, 3, 10, 3, 11, 3, 11, 3, 11, 3, 11, 3, 11, 3, 12, 3, 12, 3, 12, 3, 12, 3, 12, 3, 13, 3, 13, 3, 13, 3, 13, 3, 13, 3, 14, 3, 14, 3, 14, 3, 14, 3, 15, 3, 15, 3, 15, 3, 15, 3, 15, 3, 16, 3, 16, 3, 16, 3, 16, 3, 16, 3, 16, 3, 17, 3, 17, 3, 17, 3, 17, 3, 17, 3, 17, 3, 17, 3, 18, 3, 18, 3, 18, 3, 18, 3, 18, 3, 18, 3, 19, 3, 19, 3, 19, 3, 19, 3, 19, 3, 19, 3, 20, 3, 20, 3, 20, 3, 20, 3, 20, 3, 21, 3, 21, 3, 21, 3, 21, 3, 21, 3, 21, 3, 21, 3, 21, 3, 22, 3, 22, 3, 22, 3, 22, 3, 22, 3, 22, 3, 22, 3, 22, 3, 22, 3, 23, 3, 23, 3, 23, 3, 23, 3, 23, 3, 23, 3, 23, 3, 23, 3, 23, 3, 23, 3, 24, 3, 24, 3, 24, 3, 24, 3, 24, 3, 24, 3, 24, 3, 25, 3, 25, 3, 25, 3, 26, 3, 26, 3, 26, 3, 27, 3, 27, 3, 27, 3, 28, 3, 28, 3, 28, 3, 29, 3, 29, 3, 29, 3, 29, 3, 29, 3, 29, 3, 29, 3, 30, 3, 30, 3, 30, 3, 30, 3, 30, 3, 30, 3, 31, 3, 31, 3, 32, 3, 32, 3, 32, 3, 32, 3, 32, 3, 33, 3, 33, 3, 33, 3, 33, 3, 33, 3, 33, 3, 33, 3, 33, 3, 33, 3, 34, 3, 34, 3, 34, 3, 34, 3, 34, 3, 34, 3, 34, 3, 35, 3, 35, 3, 35, 3, 35, 3, 35, 3, 36, 3, 36, 3, 36, 3, 36, 3, 37, 3, 37, 3, 37, 3, 38, 3, 38, 3, 38, 3, 38, 3, 39, 3, 39, 3, 39, 3, 39, 3, 39, 3, 39, 3, 39, 3, 39, 3, 39, 3, 39, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 41, 3, 42, 3, 42, 3, 42, 3, 42, 3, 42, 3, 42, 3, 42, 3, 42, 3, 42, 3, 42, 3, 42, 3, 43, 3, 43, 3, 43, 3, 43, 3, 43, 3, 43, 3, 43, 3, 44, 3, 44, 3, 44, 3, 44, 3, 44, 3, 44, 3, 45, 3, 45, 3, 45, 3, 45, 3, 45, 3, 45, 3, 45, 3, 45, 3, 45, 3, 45, 3, 46, 3, 46, 3, 46, 3, 46, 3, 46, 3, 46, 3, 46, 3, 46, 3, 46, 3, 46, 3, 46, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 3, 49, 3, 49, 3, 49, 3, 49, 3, 49, 3, 49, 3, 49, 3, 49, 3, 49, 3, 49, 3, 49, 3, 49, 3, 49, 3, 50, 3, 50, 3, 50, 3, 50, 3, 50, 3, 50, 3, 50, 3, 50, 3, 50, 3, 50, 3, 50, 3, 50, 3, 51, 3, 51, 3, 51, 3, 51, 3, 51, 3, 51, 3, 51, 3, 51, 3, 51, 3, 51, 3, 51, 3, 51, 3, 51, 3, 52, 3, 52, 3, 52, 3, 52, 3, 52, 3, 52, 3, 52, 3, 52, 3, 52, 3, 52, 3, 52, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 3, 54, 3, 54, 3, 54, 3, 54, 3, 54, 3, 54, 3, 54, 3, 54, 3, 54, 3, 54, 3, 54, 3, 54, 3, 54, 3, 54, 3, 54, 3, 55, 3, 55, 3, 55, 3, 55, 3, 55, 3, 55, 3, 55, 3, 55, 3, 55, 3, 55, 3, 55, 3, 56, 3, 56, 3, 56, 3, 56, 3, 56, 3, 56, 3, 56, 3, 56, 3, 56, 3, 56, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 57, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 58, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 60, 3, 60, 3, 60, 3, 61, 3, 61, 3, 61, 3, 61, 3, 62, 3, 62, 3, 62, 3, 63, 3, 63, 3, 63, 3, 63, 3, 64, 3, 64, 3, 64, 3, 64, 3, 65, 3, 65, 3, 65, 3, 65, 3, 65, 3, 66, 3, 66, 3, 66, 3, 66, 3, 66, 3, 66, 3, 67, 3, 67, 3, 67, 3, 67, 3, 67, 3, 67, 3, 67, 3, 68, 3, 68, 3, 68, 3, 68, 3, 68, 3, 68, 3, 68, 3, 68, 3, 68, 3, 69, 3, 69, 3, 69, 3, 69, 3, 69, 3, 69, 3, 69, 3, 69, 3, 69, 3, 70, 3, 70, 3, 70, 3, 70, 3, 70, 3, 70, 3, 70, 3, 70, 3, 70, 3, 70, 3, 70, 3, 70, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 3, 72, 3, 72, 3, 72, 3, 72, 3, 72, 3, 72, 3, 72, 3, 73, 3, 73, 3, 73, 3, 73, 3, 73, 3, 73, 3, 73, 3, 74, 3, 74, 3, 74, 3, 74, 3, 74, 3, 75, 3, 75, 3, 75, 3, 75, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 77, 3, 77, 3, 77, 3, 77, 3, 77, 3, 77, 3, 78, 3, 78, 3, 78, 3, 78, 3, 78, 3, 78, 3, 78, 3, 78, 3, 79, 3, 79, 3, 79, 3, 79, 3, 79, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 80, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 81, 3, 82, 3, 82, 3, 82, 3, 82, 3, 82, 3, 82, 3, 82, 3, 82, 3, 82, 3, 82, 3, 82, 3, 82, 3, 82, 3, 82, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 83, 3, 84, 3, 84, 3, 84, 3, 84, 3, 84, 3, 84, 3, 84, 3, 84, 3, 84, 3, 84, 3, 84, 3, 84, 3, 85, 3, 85, 3, 85, 3, 85, 3, 85, 3, 85, 3, 85, 3, 85, 3, 85, 3, 85, 3, 85, 3, 85, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 86, 3, 87, 3, 87, 3, 87, 3, 87, 3, 87, 3, 87, 3, 87, 3, 87, 3, 87, 3, 87, 3, 87, 3, 88, 3, 88, 3, 88, 3, 88, 3, 88, 3, 88, 3, 88, 3, 88, 3, 88, 3, 88, 3, 88, 3, 89, 3, 89, 3, 89, 3, 89, 3, 89, 3, 89, 3, 89, 3, 89, 3, 89, 3, 90, 3, 90, 3, 90, 3, 90, 3, 90, 3, 90, 3, 90, 3, 90, 3, 90, 3, 90, 3, 90, 3, 91, 3, 91, 3, 91, 3, 91, 3, 91, 3, 91, 3, 91, 3, 91, 3, 91, 3, 91, 3, 91, 3, 92, 3, 92, 3, 92, 3, 92, 3, 92, 3, 92, 3, 92, 3, 92, 3, 92, 3, 92, 3, 93, 3, 93, 3, 93, 3, 93, 3, 93, 3, 93, 3, 93, 3, 94, 3, 94, 3, 94, 3, 94, 3, 94, 3, 94, 3, 94, 3, 94, 3, 94, 3, 94, 3, 94, 3, 94, 3, 95, 3, 95, 3, 95, 3, 95, 3, 96, 3, 96, 3, 96, 3, 96, 3, 96, 3, 96, 3, 96, 3, 96, 3, 97, 3, 97, 3, 97, 3, 97, 3, 97, 3, 97, 3, 97, 3, 98, 3, 98, 3, 98, 3, 98, 3, 98, 3, 99, 3, 99, 3, 99, 3, 99, 3, 99, 3, 99, 3, 100, 3, 100, 3, 100, 3, 100, 3, 100, 3, 100, 3, 100, 3, 101, 3, 101, 3, 101, 3, 101, 3, 101, 3, 101, 3, 101, 3, 101, 3, 102, 3, 102, 3, 103, 3, 103, 3, 104, 3, 104, 3, 105, 3, 105, 3, 106, 3, 106, 3, 107, 3, 107, 3, 108, 3, 108, 3, 108, 3, 109, 3, 109, 3, 109, 3, 110, 3, 110, 3, 110, 3, 111, 3, 111, 3, 112, 3, 112, 3, 113, 3, 113, 3, 114, 3, 114, 3, 115, 3, 115, 3, 116, 3, 116, 3, 117, 3, 117, 3, 118, 3, 118, 3, 119, 3, 119, 3, 120, 3, 120, 3, 121, 3, 121, 3, 122, 3, 122, 3, 123, 3, 123, 3, 124, 3, 124, 3, 125, 3, 125, 3, 126, 3, 126, 3, 127, 3, 127, 3, 128, 3, 128, 3, 128, 3, 128, 3, 129, 3, 129, 3, 129, 3, 129, 3, 129, 3, 129, 3, 130, 3, 130, 3, 130, 3, 130, 3, 130, 3, 130, 3, 130, 3, 130, 3, 130, 3, 130, 3, 130, 3, 130, 3, 130, 3, 130, 3, 130, 3, 131, 3, 131, 3, 131, 3, 131, 3, 131, 3, 131, 3, 132, 3, 132, 3, 132, 3, 132, 3, 132, 3, 132, 3, 132, 3, 132, 3, 132, 3, 132, 3, 132, 3, 132, 3, 133, 3, 133, 3, 133, 3, 133, 3, 134, 3, 134, 3, 134, 3, 134, 3, 134, 3, 135, 3, 135, 3, 135, 3, 135, 3, 135, 3, 135, 3, 135, 3, 136, 3, 136, 3, 136, 3, 136, 3, 137, 3, 137, 3, 137, 3, 137, 3, 137, 3, 138, 3, 138, 3, 138, 3, 138, 3, 138, 3, 138, 3, 139, 3, 139, 3, 139, 3, 139, 3, 139, 3, 139, 3, 140, 3, 140, 3, 140, 3, 140, 3, 140, 3, 140, 3, 140, 3, 141, 3, 141, 3, 141, 3, 141, 3, 142, 3, 142, 3, 142, 3, 142, 3, 142, 3, 142, 3, 143, 3, 143, 3, 143, 3, 143, 3, 143, 3, 143, 3, 143, 3, 143, 3, 143, 3, 144, 3, 144, 3, 144, 3, 144, 3, 144, 3, 144, 3, 144, 3, 144, 3, 145, 3, 145, 3, 145, 3, 145, 3, 145, 3, 145, 3, 145, 3, 145, 3, 145, 3, 145, 3, 145, 3, 145, 3, 146, 3, 146, 3, 146, 3, 146, 3, 146, 3, 146, 3, 146, 3, 146, 3, 146, 3, 146, 3, 146, 3, 147, 3, 147, 3, 147, 3, 147, 3, 147, 3, 147, 3, 147, 3, 147, 3, 147, 3, 147, 3, 147, 3, 148, 3, 148, 3, 148, 3, 148, 3, 148, 3, 149, 3, 149, 3, 149, 3, 149, 3, 149, 3, 149, 3, 150, 3, 150, 3, 150, 3, 150, 3, 150, 3, 151, 3, 151, 3, 151, 3, 151, 3, 151, 3, 152, 3, 152, 3, 152, 3, 152, 3, 152, 3, 152, 3, 152, 3, 153, 3, 153, 3, 153, 3, 153, 3, 153, 3, 153, 3, 153, 3, 153, 3, 153, 3, 154, 3, 154, 3, 154, 3, 154, 3, 154, 3, 154, 3, 154, 3, 154, 3, 154, 3, 154, 3, 154, 3, 154, 3, 154, 3, 154, 3, 155, 3, 155, 3, 155, 3, 155, 3, 155, 3, 155, 3, 155, 3, 156, 3, 156, 3, 156, 3, 156, 3, 156, 3, 156, 3, 156, 3, 156, 3, 156, 3, 156, 3, 156, 3, 156, 3, 157, 3, 157, 3, 157, 3, 157, 3, 157, 3, 157, 3, 157, 3, 157, 3, 158, 3, 158, 3, 158, 3, 158, 3, 158, 3, 158, 3, 158, 3, 158, 3, 158, 3, 159, 3, 159, 3, 159, 3, 159, 3, 159, 3, 159, 3, 159, 3, 159, 3, 159, 3, 159, 3, 159, 3, 160, 3, 160, 3, 160, 3, 160, 3, 160, 3, 160, 3, 160, 3, 160, 3, 160, 3, 160, 3, 160, 3, 161, 3, 161, 3, 161, 3, 161, 3, 161, 3, 162, 3, 162, 3, 162, 3, 162, 3, 162, 3, 162, 3, 162, 3, 162, 3, 162, 3, 162, 3, 163, 3, 163, 3, 164, 3, 164, 3, 164, 3, 165, 3, 165, 3, 165, 3, 165, 3, 166, 3, 166, 3, 166, 3, 166, 3, 166, 3, 167, 3, 167, 3, 167, 3, 167, 3, 167, 3, 167, 3, 167, 3, 167, 3, 168, 3, 168, 3, 168, 3, 168, 3, 168, 3, 169, 3, 169, 3, 169, 3, 169, 3, 169, 3, 169, 3, 170, 3, 170, 3, 171, 3, 171, 3, 171, 3, 171, 3, 172, 3, 172, 3, 172, 3, 172, 3, 172, 3, 172, 3, 173, 3, 173, 3, 173, 3, 174, 3, 174, 3, 174, 3, 174, 3, 175, 3, 175, 3, 175, 3, 175, 3, 175, 3, 175, 3, 176, 3, 176, 3, 176, 3, 176, 3, 176, 3, 177, 3, 177, 3, 177, 3, 177, 3, 178, 3, 178, 3, 178, 3, 179, 3, 179, 3, 179, 3, 179, 3, 180, 3, 180, 3, 180, 3, 180, 3, 180, 3, 180, 3, 181, 3, 181, 3, 181, 3, 181, 3, 181, 3, 182, 3, 182, 3, 182, 3, 182, 3, 182, 3, 182, 3, 183, 3, 183, 3, 183, 3, 183, 3, 183, 3, 184, 3, 184, 3, 184, 3, 184, 3, 184, 3, 185, 3, 185, 3, 185, 3, 185, 3, 185, 3, 185, 3, 185, 3, 185, 3, 185, 3, 186, 3, 186, 3, 186, 3, 186, 3, 186, 3, 187, 3, 187, 3, 187, 3, 187, 3, 187, 3, 188, 3, 188, 3, 188, 3, 188, 3, 188, 3, 189, 3, 189, 3, 189, 3, 189, 3, 189, 3, 189, 3, 190, 3, 190, 3, 190, 3, 190, 3, 191, 3, 191, 3, 191, 3, 191, 3, 192, 3, 192, 3, 192, 3, 192, 3, 192, 3, 192, 3, 192, 3, 192, 3, 193, 3, 193, 3, 193, 3, 193, 3, 193, 3, 193, 3, 193, 3, 193, 3, 194, 3, 194, 3, 194, 3, 194, 3, 195, 3, 195, 3, 195, 3, 195, 3, 196, 3, 196, 3, 196, 3, 196, 3, 196, 3, 196, 3, 196, 3, 196, 3, 197, 3, 197, 3, 197, 3, 197, 3, 197, 3, 197, 3, 197, 3, 197, 3, 198, 3, 198, 3, 198, 3, 198, 3, 198, 3, 198, 3, 198, 3, 198, 3, 198, 3, 198, 3, 198, 3, 198, 3, 198, 3, 199, 3, 199, 3, 199, 3, 199, 3, 199, 3, 199, 3, 199, 3, 199, 3, 199, 3, 199, 3, 199, 3, 199, 3, 199, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 200, 3, 201, 3, 201, 3, 201, 3, 201, 3, 201, 3, 201, 3, 201, 3, 201, 3, 202, 3, 202, 3, 202, 3, 202, 3, 202, 3, 203, 3, 203, 3, 203, 3, 203, 3, 203, 3, 203, 3, 203, 3, 203, 3, 203, 3, 204, 3, 204, 3, 204, 3, 204, 3, 204, 3, 204, 3, 204, 3, 204, 3, 204, 3, 204, 3, 204, 3, 204, 3, 205, 3, 205, 3, 205, 3, 205, 3, 205, 3, 205, 3, 205, 3, 205, 3, 205, 3, 206, 3, 206, 3, 206, 3, 206, 3, 206, 3, 206, 3, 206, 3, 206, 3, 207, 3, 207, 3, 207, 3, 207, 3, 207, 3, 207, 3, 207, 3, 207, 3, 207, 3, 207, 3, 207, 3, 208, 3, 208, 3, 208, 3, 208, 3, 208, 3, 208, 3, 208, 3, 208, 3, 208, 3, 208, 3, 209, 3, 209, 3, 209, 3, 209, 3, 209, 3, 209, 3, 209, 3, 209, 3, 209, 3, 209, 3, 210, 3, 210, 3, 210, 3, 210, 3, 210, 3, 210, 3, 210, 3, 210, 3, 210, 3, 210, 3, 211, 3, 211, 3, 211, 3, 211, 3, 211, 3, 211, 3, 211, 3, 211, 3, 211, 3, 211, 3, 212, 3, 212, 3, 212, 3, 212, 3, 212, 3, 212, 3, 212, 3, 212, 3, 212, 3, 212, 3, 212, 3, 212, 3, 212, 3, 212, 3, 212, 3, 213, 3, 213, 3, 213, 3, 213, 3, 213, 3, 213, 3, 213, 3, 213, 3, 213, 3, 213, 3, 213, 3, 213, 3, 213, 3, 213, 3, 214, 3, 214, 3, 214, 3, 214, 3, 214, 3, 214, 3, 214, 3, 214, 3, 214, 3, 215, 3, 215, 3, 215, 3, 215, 3, 215, 3, 215, 3, 215, 3, 215, 3, 215, 3, 216, 3, 216, 3, 216, 3, 216, 3, 216, 3, 216, 3, 216, 3, 216, 3, 216, 3, 216, 3, 217, 3, 217, 3, 217, 3, 217, 3, 218, 3, 218, 3, 218, 3, 218, 3, 218, 3, 218, 3, 218, 3, 218, 3, 218, 3, 218, 3, 218, 3, 219, 3, 219, 3, 219, 3, 219, 3, 219, 3, 219, 3, 219, 3, 219, 3, 219, 3, 219, 3, 219, 3, 219, 3, 220, 3, 220, 3, 220, 3, 220, 3, 220, 3, 220, 3, 220, 3, 220, 3, 221, 3, 221, 3, 221, 3, 221, 3, 221, 3, 221, 3, 221, 3, 221, 3, 222, 3, 222, 3, 222, 3, 222, 3, 222, 3, 223, 3, 223, 3, 223, 3, 223, 3, 223, 3, 223, 3, 223, 3, 223, 3, 223, 3, 223, 3, 223, 3, 223, 3, 224, 3, 224, 3, 224, 3, 224, 3, 224, 3, 224, 3, 224, 3, 224, 3, 224, 3, 224, 3, 225, 3, 225, 3, 225, 3, 225, 3, 225, 3, 225, 3, 225, 3, 225, 3, 226, 3, 226, 3, 226, 3, 226, 3, 226, 3, 226, 3, 226, 3, 226, 3, 226, 3, 227, 3, 227, 3, 227, 3, 227, 3, 227, 3, 227, 3, 227, 3, 227, 3, 227, 3, 228, 3, 228, 3, 228, 3, 228, 3, 228, 3, 228, 3, 228, 3, 228, 3, 228, 3, 228, 3, 228, 3, 228, 3, 228, 3, 228, 3, 229, 3, 229, 3, 229, 3, 229, 3, 229, 3, 229, 3, 229, 3, 229, 3, 229, 3, 229, 3, 229, 3, 229, 3, 229, 3, 229, 3, 229, 3, 230, 3, 230, 3, 230, 3, 230, 3, 230, 3, 230, 3, 230, 3, 231, 3, 231, 3, 231, 3, 231, 3, 231, 3, 231, 3, 231, 3, 231, 3, 231, 3, 231, 3, 232, 3, 232, 3, 232, 3, 232, 3, 232, 3, 232, 3, 233, 3, 233, 3, 233, 3, 233, 3, 233, 3, 233, 3, 234, 3, 234, 3, 234, 3, 234, 3, 234, 3, 235, 3, 235, 3, 235, 3, 236, 3, 236, 3, 236, 3, 236, 3, 236, 3, 236, 3, 237, 3, 237, 3, 237, 3, 237, 3, 237, 3, 237, 3, 238, 3, 238, 3, 238, 3, 238, 3, 238, 3, 238, 3, 238, 3, 239, 3, 239, 3, 239, 3, 239, 3, 239, 3, 239, 3, 239, 3, 239, 3, 239, 3, 239, 3, 240, 3, 240, 3, 240, 3, 240, 3, 240, 3, 240, 3, 240, 3, 241, 3, 241, 3, 241, 3, 241, 3, 241, 3, 241, 3, 241, 3, 242, 3, 242, 3, 242, 3, 242, 3, 242, 3, 242, 3, 243, 3, 243, 3, 243, 3, 243, 3, 243, 3, 244, 3, 244, 3, 244, 3, 244, 3, 244, 3, 244, 3, 245, 3, 245, 3, 245, 3, 245, 3, 245, 3, 245, 3, 245, 3, 246, 3, 246, 3, 246, 3, 246, 3, 246, 3, 246, 3, 246, 3, 246, 3, 247, 3, 247, 3, 247, 3, 247, 3, 247, 3, 248, 3, 248, 3, 248, 3, 248, 3, 248, 3, 249, 3, 249, 3, 249, 3, 249, 3, 249, 3, 249, 3, 249, 3, 250, 3, 250, 3, 250, 3, 250, 3, 250, 3, 250, 3, 250, 3, 250, 3, 250, 3, 250, 3, 251, 3, 251, 3, 251, 3, 251, 3, 251, 3, 251, 3, 251, 3, 252, 3, 252, 3, 252, 3, 252, 3, 252, 3, 252, 3, 252, 3, 253, 3, 253, 3, 253, 3, 254, 3, 254, 3, 254, 3, 254, 3, 254, 3, 254, 3, 254, 3, 255, 3, 255, 3, 255, 3, 255, 3, 255, 3, 255, 3, 256, 3, 256, 3, 256, 3, 256, 3, 256, 3, 256, 3, 256, 3, 256, 3, 256, 3, 256, 3, 256, 3, 256, 3, 256, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 257, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 258, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 259, 3, 260, 3, 260, 3, 260, 3, 260, 3, 260, 3, 260, 3, 260, 3, 260, 3, 260, 3, 260, 3, 260, 3, 260, 3, 261, 3, 261, 3, 261, 3, 261, 3, 261, 3, 261, 3, 261, 3, 261, 3, 261, 3, 261, 3, 261, 3, 261, 3, 261, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 262, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 263, 3, 264, 3, 264, 3, 264, 3, 264, 3, 264, 3, 264, 3, 264, 3, 264, 3, 264, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 265, 3, 266, 3, 266, 3, 266, 3, 266, 3, 266, 3, 266, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 267, 3, 268, 3, 268, 3, 268, 3, 268, 3, 268, 3, 268, 3, 268, 3, 268, 3, 268, 3, 268, 3, 268, 3, 268, 3, 268, 3, 268, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 269, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 270, 3, 271, 3, 271, 3, 271, 3, 271, 3, 271, 3, 271, 3, 271, 3, 272, 3, 272, 3, 272, 3, 272, 3, 272, 3, 272, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 273, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 274, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 275, 3, 276, 3, 276, 3, 276, 3, 276, 3, 276, 3, 276, 3, 276, 3, 276, 3, 276, 3, 276, 3, 276, 3, 276, 3, 276, 3, 276, 3, 277, 3, 277, 3, 277, 3, 277, 3, 277, 3, 277, 3, 277, 3, 277, 3, 277, 3, 277, 3, 278, 3, 278, 3, 278, 3, 278, 3, 278, 3, 278, 3, 278, 3, 278, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 279, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 280, 3, 281, 3, 281, 3, 281, 3, 281, 3, 281, 3, 281, 3, 281, 3, 281, 3, 281, 3, 281, 3, 281, 3, 281, 3, 281, 3, 281, 3, 281, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 282, 3, 283, 3, 283, 3, 283, 3, 283, 3, 283, 3, 283, 3, 283, 3, 283, 3, 283, 3, 284, 3, 284, 3, 284, 3, 284, 3, 284, 3, 284, 3, 284, 3, 284, 3, 284, 3, 284, 3, 284, 3, 284, 3, 285, 3, 285, 3, 285, 3, 285, 3, 285, 3, 285, 3, 285, 3, 285, 3, 285, 3, 285, 3, 285, 3, 285, 3, 285, 3, 285, 3, 286, 3, 286, 3, 286, 3, 286, 3, 286, 3, 286, 3, 286, 3, 286, 3, 286, 3, 286, 3, 286, 3, 286, 3, 286, 3, 286, 3, 286, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 287, 3, 288, 3, 288, 3, 288, 3, 288, 3, 288, 3, 288, 3, 288, 3, 288, 3, 289, 3, 289, 3, 289, 3, 289, 3, 289, 3, 290, 3, 290, 3, 290, 3, 290, 3, 290, 3, 290, 3, 290, 3, 290, 3, 290, 3, 290, 3, 290, 3, 290, 3, 291, 3, 291, 3, 291, 3, 291, 3, 291, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 292, 3, 293, 3, 293, 3, 293, 3, 293, 3, 293, 3, 294, 3, 294, 3, 294, 3, 295, 3, 295, 3, 296, 3, 296, 3, 297, 3, 297, 3, 298, 3, 298, 3, 299, 3, 299, 3, 300, 3, 300, 3, 301, 3, 301, 3, 302, 6, 302, 3045, 10, 302, 13, 302, 14, 302, 3046, 3, 303, 6, 303, 3050, 10, 303, 13, 303, 14, 303, 3051, 5, 303, 3054, 10, 303, 3, 303, 3, 303, 6, 303, 3058, 10, 303, 13, 303, 14, 303, 3059, 3, 304, 3, 304, 6, 304, 3064, 10, 304, 13, 304, 14, 304, 3065, 7, 304, 3068, 10, 304, 12, 304, 14, 304, 3071, 11, 304, 3, 305, 6, 305, 3074, 10, 305, 13, 305, 14, 305, 3075, 3, 305, 7, 305, 3079, 10, 305, 12, 305, 14, 305, 3082, 11, 305, 3, 306, 3, 306, 3, 306, 3, 307, 3, 307, 3, 307, 3, 307, 3, 307, 3, 307, 7, 307, 3093, 10, 307, 12, 307, 14, 307, 3096, 11, 307, 3, 307, 3, 307, 3, 308, 3, 308, 3, 308, 3, 308, 3, 308, 3, 308, 7, 308, 3106, 10, 308, 12, 308, 14, 308, 3109, 11, 308, 3, 308, 3, 308, 3, 309, 3, 309, 3, 309, 3, 309, 3, 309, 3, 309, 7, 309, 3119, 10, 309, 12, 309, 14, 309, 3122, 11, 309, 3, 309, 3, 309, 3, 310, 3, 310, 3, 311, 3, 311, 3, 311, 3, 311, 3, 3075, 2, 2, 312, 3, 2, 3, 5, 2, 4, 7, 2, 5, 9, 2, 6, 11, 2, 7, 13, 2, 8, 15, 2, 9, 17, 2, 10, 19, 2, 11, 21, 2, 12, 23, 2, 13, 25, 2, 14, 27, 2, 15, 29, 2, 16, 31, 2, 17, 33, 2, 18, 35, 2, 19, 37, 2, 20, 39, 2, 21, 41, 2, 22, 43, 2, 23, 45, 2, 24, 47, 2, 25, 49, 2, 26, 51, 2, 27, 53, 2, 28, 55, 2, 29, 57, 2, 30, 59, 2, 31, 61, 2, 32, 63, 2, 33, 65, 2, 34, 67, 2, 35, 69, 2, 36, 71, 2, 37, 73, 2, 38, 75, 2, 39, 77, 2, 40, 79, 2, 41, 81, 2, 42, 83, 2, 43, 85, 2, 44, 87, 2, 45, 89, 2, 46, 91, 2, 47, 93, 2, 48, 95, 2, 49, 97, 2, 50, 99, 2, 51, 101, 2, 52, 103, 2, 53, 105, 2, 54, 107, 2, 55, 109, 2, 56, 111, 2, 57, 113, 2, 58, 115, 2, 59, 117, 2, 60, 119, 2, 61, 121, 2, 62, 123, 2, 63, 125, 2, 64, 127, 2, 65, 129, 2, 66, 131, 2, 67, 133, 2, 68, 135, 2, 69, 137, 2, 70, 139, 2, 71, 141, 2, 72, 143, 2, 73, 145, 2, 74, 147, 2, 75, 149, 2, 76, 151, 2, 77, 153, 2, 78, 155, 2, 79, 157, 2, 80, 159, 2, 81, 161, 2, 82, 163, 2, 83, 165, 2, 84, 167, 2, 85, 169, 2, 86, 171, 2, 87, 173, 2, 88, 175, 2, 89, 177, 2, 90, 179, 2, 91, 181, 2, 92, 183, 2, 93, 185, 2, 94, 187, 2, 95, 189, 2, 96, 191, 2, 97, 193, 2, 98, 195, 2, 99, 197, 2, 100, 199, 2, 101, 201, 2, 102, 203, 2, 103, 205, 2, 104, 207, 2, 105, 209, 2, 106, 211, 2, 107, 213, 2, 108, 215, 2, 109, 217, 2, 110, 219, 2, 111, 221, 2, 112, 223, 2, 113, 225, 2, 114, 227, 2, 115, 229, 2, 116, 231, 2, 117, 233, 2, 118, 235, 2, 119, 237, 2, 120, 239, 2, 121, 241, 2, 122, 243, 2, 123, 245, 2, 124, 247, 2, 125, 249, 2, 126, 251, 2, 127, 253, 2, 128, 255, 2, 129, 257, 2, 130, 259, 2, 131, 261, 2, 132, 263, 2, 133, 265, 2, 134, 267, 2, 135, 269, 2, 136, 271, 2, 137, 273, 2, 138, 275, 2, 139, 277, 2, 140, 279, 2, 141, 281, 2, 142, 283, 2, 143, 285, 2, 144, 287, 2, 145, 289, 2, 146, 291, 2, 147, 293, 2, 148, 295, 2, 149, 297, 2, 150, 299, 2, 151, 301, 2, 152, 303, 2, 153, 305, 2, 154, 307, 2, 155, 309, 2, 156, 311, 2, 157, 313, 2, 158, 315, 2, 159, 317, 2, 160, 319, 2, 161, 321, 2, 162, 323, 2, 163, 325, 2, 164, 327, 2, 165, 329, 2, 166, 331, 2, 167, 333, 2, 168, 335, 2, 169, 337, 2, 170, 339, 2, 171, 341, 2, 172, 343, 2, 173, 345, 2, 174, 347, 2, 175, 349, 2, 176, 351, 2, 177, 353, 2, 178, 355, 2, 179, 357, 2, 180, 359, 2, 181, 361, 2, 182, 363, 2, 183, 365, 2, 184, 367, 2, 185, 369, 2, 186, 371, 2, 187, 373, 2, 188, 375, 2, 189, 377, 2, 190, 379, 2, 191, 381, 2, 192, 383, 2, 193, 385, 2, 194, 387, 2, 195, 389, 2, 196, 391, 2, 197, 393, 2, 198, 395, 2, 199, 397, 2, 200, 399, 2, 201, 401, 2, 202, 403, 2, 203, 405, 2, 204, 407, 2, 205, 409, 2, 206, 411, 2, 207, 413, 2, 208, 415, 2, 209, 417, 2, 210, 419, 2, 211, 421, 2, 212, 423, 2, 213, 425, 2, 214, 427, 2, 215, 429, 2, 216, 431, 2, 217, 433, 2, 218, 435, 2, 219, 437, 2, 220, 439, 2, 221, 441, 2, 222, 443, 2, 223, 445, 2, 224, 447, 2, 225, 449, 2, 226, 451, 2, 227, 453, 2, 228, 455, 2, 229, 457, 2, 230, 459, 2, 231, 461, 2, 232, 463, 2, 233, 465, 2, 234, 467, 2, 235, 469, 2, 236, 471, 2, 237, 473, 2, 238, 475, 2, 239, 477, 2, 240, 479, 2, 241, 481, 2, 242, 483, 2, 243, 485, 2, 244, 487, 2, 245, 489, 2, 246, 491, 2, 247, 493, 2, 248, 495, 2, 249, 497, 2, 250, 499, 2, 251, 501, 2, 252, 503, 2, 253, 505, 2, 254, 507, 2, 255, 509, 2, 256, 511, 2, 257, 513, 2, 258, 515, 2, 259, 517, 2, 260, 519, 2, 261, 521, 2, 262, 523, 2, 263, 525, 2, 264, 527, 2, 265, 529, 2, 266, 531, 2, 267, 533, 2, 268, 535, 2, 269, 537, 2, 270, 539, 2, 271, 541, 2, 272, 543, 2, 273, 545, 2, 274, 547, 2, 275, 549, 2, 276, 551, 2, 277, 553, 2, 278, 555, 2, 279, 557, 2, 280, 559, 2, 281, 561, 2, 282, 563, 2, 283, 565, 2, 284, 567, 2, 285, 569, 2, 286, 571, 2, 287, 573, 2, 288, 575, 2, 289, 577, 2, 290, 579, 2, 291, 581, 2, 292, 583, 2, 293, 585, 2, 294, 587, 2, 295, 589, 2, 296, 591, 2, 297, 593, 2, 298, 595, 2, 299, 597, 2, 300, 599, 2, 301, 601, 2, 302, 603, 2, 303, 605, 2, 304, 607, 2, 2, 609, 2, 2, 611, 2, 305, 613, 2, 306, 615, 2, 307, 617, 2, 308, 619, 2, 2, 621, 2, 309, 3, 2, 10, 3, 2, 47, 48, 4, 2, 44, 44, 50, 59, 4, 2, 44, 44, 66, 92, 7, 2, 44, 44, 47, 47, 50, 59, 67, 92, 97, 97, 4, 2, 36, 36, 94, 94, 4, 2, 41, 41, 94, 94, 4, 2, 94, 94, 98, 98, 3, 2, 50, 59, 2, 3144, 2, 3, 3, 2, 2, 2, 2, 5, 3, 2, 2, 2, 2, 7, 3, 2, 2, 2, 2, 9, 3, 2, 2, 2, 2, 11, 3, 2, 2, 2, 2, 13, 3, 2, 2, 2, 2, 15, 3, 2, 2, 2, 2, 17, 3, 2, 2, 2, 2, 19, 3, 2, 2, 2, 2, 21, 3, 2, 2, 2, 2, 23, 3, 2, 2, 2, 2, 25, 3, 2, 2, 2, 2, 27, 3, 2, 2, 2, 2, 29, 3, 2, 2, 2, 2, 31, 3, 2, 2, 2, 2, 33, 3, 2, 2, 2, 2, 35, 3, 2, 2, 2, 2, 37, 3, 2, 2, 2, 2, 39, 3, 2, 2, 2, 2, 41, 3, 2, 2, 2, 2, 43, 3, 2, 2, 2, 2, 45, 3, 2, 2, 2, 2, 47, 3, 2, 2, 2, 2, 49, 3, 2, 2, 2, 2, 51, 3, 2, 2, 2, 2, 53, 3, 2, 2, 2, 2, 55, 3, 2, 2, 2, 2, 57, 3, 2, 2, 2, 2, 59, 3, 2, 2, 2, 2, 61, 3, 2, 2, 2, 2, 63, 3, 2, 2, 2, 2, 65, 3, 2, 2, 2, 2, 67, 3, 2, 2, 2, 2, 69, 3, 2, 2, 2, 2, 71, 3, 2, 2, 2, 2, 73, 3, 2, 2, 2, 2, 75, 3, 2, 2, 2, 2, 77, 3, 2, 2, 2, 2, 79, 3, 2, 2, 2, 2, 81, 3, 2, 2, 2, 2, 83, 3, 2, 2, 2, 2, 85, 3, 2, 2, 2, 2, 87, 3, 2, 2, 2, 2, 89, 3, 2, 2, 2, 2, 91, 3, 2, 2, 2, 2, 93, 3, 2, 2, 2, 2, 95, 3, 2, 2, 2, 2, 97, 3, 2, 2, 2, 2, 99, 3, 2, 2, 2, 2, 101, 3, 2, 2, 2, 2, 103, 3, 2, 2, 2, 2, 105, 3, 2, 2, 2, 2, 107, 3, 2, 2, 2, 2, 109, 3, 2, 2, 2, 2, 111, 3, 2, 2, 2, 2, 113, 3, 2, 2, 2, 2, 115, 3, 2, 2, 2, 2, 117, 3, 2, 2, 2, 2, 119, 3, 2, 2, 2, 2, 121, 3, 2, 2, 2, 2, 123, 3, 2, 2, 2, 2, 125, 3, 2, 2, 2, 2, 127, 3, 2, 2, 2, 2, 129, 3, 2, 2, 2, 2, 131, 3, 2, 2, 2, 2, 133, 3, 2, 2, 2, 2, 135, 3, 2, 2, 2, 2, 137, 3, 2, 2, 2, 2, 139, 3, 2, 2, 2, 2, 141, 3, 2, 2, 2, 2, 143, 3, 2, 2, 2, 2, 145, 3, 2, 2, 2, 2, 147, 3, 2, 2, 2, 2, 149, 3, 2, 2, 2, 2, 151, 3, 2, 2, 2, 2, 153, 3, 2, 2, 2, 2, 155, 3, 2, 2, 2, 2, 157, 3, 2, 2, 2, 2, 159, 3, 2, 2, 2, 2, 161, 3, 2, 2, 2, 2, 163, 3, 2, 2, 2, 2, 165, 3, 2, 2, 2, 2, 167, 3, 2, 2, 2, 2, 169, 3, 2, 2, 2, 2, 171, 3, 2, 2, 2, 2, 173, 3, 2, 2, 2, 2, 175, 3, 2, 2, 2, 2, 177, 3, 2, 2, 2, 2, 179, 3, 2, 2, 2, 2, 181, 3, 2, 2, 2, 2, 183, 3, 2, 2, 2, 2, 185, 3, 2, 2, 2, 2, 187, 3, 2, 2, 2, 2, 189, 3, 2, 2, 2, 2, 191, 3, 2, 2, 2, 2, 193, 3, 2, 2, 2, 2, 195, 3, 2, 2, 2, 2, 197, 3, 2, 2, 2, 2, 199, 3, 2, 2, 2, 2, 201, 3, 2, 2, 2, 2, 203, 3, 2, 2, 2, 2, 205, 3, 2, 2, 2, 2, 207, 3, 2, 2, 2, 2, 209, 3, 2, 2, 2, 2, 211, 3, 2, 2, 2, 2, 213, 3, 2, 2, 2, 2, 215, 3, 2, 2, 2, 2, 217, 3, 2, 2, 2, 2, 219, 3, 2, 2, 2, 2, 221, 3, 2, 2, 2, 2, 223, 3, 2, 2, 2, 2, 225, 3, 2, 2, 2, 2, 227, 3, 2, 2, 2, 2, 229, 3, 2, 2, 2, 2, 231, 3, 2, 2, 2, 2, 233, 3, 2, 2, 2, 2, 235, 3, 2, 2, 2, 2, 237, 3, 2, 2, 2, 2, 239, 3, 2, 2, 2, 2, 241, 3, 2, 2, 2, 2, 243, 3, 2, 2, 2, 2, 245, 3, 2, 2, 2, 2, 247, 3, 2, 2, 2, 2, 249, 3, 2, 2, 2, 2, 251, 3, 2, 2, 2, 2, 253, 3, 2, 2, 2, 2, 255, 3, 2, 2, 2, 2, 257, 3, 2, 2, 2, 2, 259, 3, 2, 2, 2, 2, 261, 3, 2, 2, 2, 2, 263, 3, 2, 2, 2, 2, 265, 3, 2, 2, 2, 2, 267, 3, 2, 2, 2, 2, 269, 3, 2, 2, 2, 2, 271, 3, 2, 2, 2, 2, 273, 3, 2, 2, 2, 2, 275, 3, 2, 2, 2, 2, 277, 3, 2, 2, 2, 2, 279, 3, 2, 2, 2, 2, 281, 3, 2, 2, 2, 2, 283, 3, 2, 2, 2, 2, 285, 3, 2, 2, 2, 2, 287, 3, 2, 2, 2, 2, 289, 3, 2, 2, 2, 2, 291, 3, 2, 2, 2, 2, 293, 3, 2, 2, 2, 2, 295, 3, 2, 2, 2, 2, 297, 3, 2, 2, 2, 2, 299, 3, 2, 2, 2, 2, 301, 3, 2, 2, 2, 2, 303, 3, 2, 2, 2, 2, 305, 3, 2, 2, 2, 2, 307, 3, 2, 2, 2, 2, 309, 3, 2, 2, 2, 2, 311, 3, 2, 2, 2, 2, 313, 3, 2, 2, 2, 2, 315, 3, 2, 2, 2, 2, 317, 3, 2, 2, 2, 2, 319, 3, 2, 2, 2, 2, 321, 3, 2, 2, 2, 2, 323, 3, 2, 2, 2, 2, 325, 3, 2, 2, 2, 2, 327, 3, 2, 2, 2, 2, 329, 3, 2, 2, 2, 2, 331, 3, 2, 2, 2, 2, 333, 3, 2, 2, 2, 2, 335, 3, 2, 2, 2, 2, 337, 3, 2, 2, 2, 2, 339, 3, 2, 2, 2, 2, 341, 3, 2, 2, 2, 2, 343, 3, 2, 2, 2, 2, 345, 3, 2, 2, 2, 2, 347, 3, 2, 2, 2, 2, 349, 3, 2, 2, 2, 2, 351, 3, 2, 2, 2, 2, 353, 3, 2, 2, 2, 2, 355, 3, 2, 2, 2, 2, 357, 3, 2, 2, 2, 2, 359, 3, 2, 2, 2, 2, 361, 3, 2, 2, 2, 2, 363, 3, 2, 2, 2, 2, 365, 3, 2, 2, 2, 2, 367, 3, 2, 2, 2, 2, 369, 3, 2, 2, 2, 2, 371, 3, 2, 2, 2, 2, 373, 3, 2, 2, 2, 2, 375, 3, 2, 2, 2, 2, 377, 3, 2, 2, 2, 2, 379, 3, 2, 2, 2, 2, 381, 3, 2, 2, 2, 2, 383, 3, 2, 2, 2, 2, 385, 3, 2, 2, 2, 2, 387, 3, 2, 2, 2, 2, 389, 3, 2, 2, 2, 2, 391, 3, 2, 2, 2, 2, 393, 3, 2, 2, 2, 2, 395, 3, 2, 2, 2, 2, 397, 3, 2, 2, 2, 2, 399, 3, 2, 2, 2, 2, 401, 3, 2, 2, 2, 2, 403, 3, 2, 2, 2, 2, 405, 3, 2, 2, 2, 2, 407, 3, 2, 2, 2, 2, 409, 3, 2, 2, 2, 2, 411, 3, 2, 2, 2, 2, 413, 3, 2, 2, 2, 2, 415, 3, 2, 2, 2, 2, 417, 3, 2, 2, 2, 2, 419, 3, 2, 2, 2, 2, 421, 3, 2, 2, 2, 2, 423, 3, 2, 2, 2, 2, 425, 3, 2, 2, 2, 2, 427, 3, 2, 2, 2, 2, 429, 3, 2, 2, 2, 2, 431, 3, 2, 2, 2, 2, 433, 3, 2, 2, 2, 2, 435, 3, 2, 2, 2, 2, 437, 3, 2, 2, 2, 2, 439, 3, 2, 2, 2, 2, 441, 3, 2, 2, 2, 2, 443, 3, 2, 2, 2, 2, 445, 3, 2, 2, 2, 2, 447, 3, 2, 2, 2, 2, 449, 3, 2, 2, 2, 2, 451, 3, 2, 2, 2, 2, 453, 3, 2, 2, 2, 2, 455, 3, 2, 2, 2, 2, 457, 3, 2, 2, 2, 2, 459, 3, 2, 2, 2, 2, 461, 3, 2, 2, 2, 2, 463, 3, 2, 2, 2, 2, 465, 3, 2, 2, 2, 2, 467, 3, 2, 2, 2, 2, 469, 3, 2, 2, 2, 2, 471, 3, 2, 2, 2, 2, 473, 3, 2, 2, 2, 2, 475, 3, 2, 2, 2, 2, 477, 3, 2, 2, 2, 2, 479, 3, 2, 2, 2, 2, 481, 3, 2, 2, 2, 2, 483, 3, 2, 2, 2, 2, 485, 3, 2, 2, 2, 2, 487, 3, 2, 2, 2, 2, 489, 3, 2, 2, 2, 2, 491, 3, 2, 2, 2, 2, 493, 3, 2, 2, 2, 2, 495, 3, 2, 2, 2, 2, 497, 3, 2, 2, 2, 2, 499, 3, 2, 2, 2, 2, 501, 3, 2, 2, 2, 2, 503, 3, 2, 2, 2, 2, 505, 3, 2, 2, 2, 2, 507, 3, 2, 2, 2, 2, 509, 3, 2, 2, 2, 2, 511, 3, 2, 2, 2, 2, 513, 3, 2, 2, 2, 2, 515, 3, 2, 2, 2, 2, 517, 3, 2, 2, 2, 2, 519, 3, 2, 2, 2, 2, 521, 3, 2, 2, 2, 2, 523, 3, 2, 2, 2, 2, 525, 3, 2, 2, 2, 2, 527, 3, 2, 2, 2, 2, 529, 3, 2, 2, 2, 2, 531, 3, 2, 2, 2, 2, 533, 3, 2, 2, 2, 2, 535, 3, 2, 2, 2, 2, 537, 3, 2, 2, 2, 2, 539, 3, 2, 2, 2, 2, 541, 3, 2, 2, 2, 2, 543, 3, 2, 2, 2, 2, 545, 3, 2, 2, 2, 2, 547, 3, 2, 2, 2, 2, 549, 3, 2, 2, 2, 2, 551, 3, 2, 2, 2, 2, 553, 3, 2, 2, 2, 2, 555, 3, 2, 2, 2, 2, 557, 3, 2, 2, 2, 2, 559, 3, 2, 2, 2, 2, 561, 3, 2, 2, 2, 2, 563, 3, 2, 2, 2, 2, 565, 3, 2, 2, 2, 2, 567, 3, 2, 2, 2, 2, 569, 3, 2, 2, 2, 2, 571, 3, 2, 2, 2, 2, 573, 3, 2, 2, 2, 2, 575, 3, 2, 2, 2, 2, 577, 3, 2, 2, 2, 2, 579, 3, 2, 2, 2, 2, 581, 3, 2, 2, 2, 2, 583, 3, 2, 2, 2, 2, 585, 3, 2, 2, 2, 2, 587, 3, 2, 2, 2, 2, 589, 3, 2, 2, 2, 2, 591, 3, 2, 2, 2, 2, 593, 3, 2, 2, 2, 2, 595, 3, 2, 2, 2, 2, 597, 3, 2, 2, 2, 2, 599, 3, 2, 2, 2, 2, 601, 3, 2, 2, 2, 2, 603, 3, 2, 2, 2, 2, 605, 3, 2, 2, 2, 2, 611, 3, 2, 2, 2, 2, 613, 3, 2, 2, 2, 2, 615, 3, 2, 2, 2, 2, 617, 3, 2, 2, 2, 2, 621, 3, 2, 2, 2, 3, 623, 3, 2, 2, 2, 5, 630, 3, 2, 2, 2, 7, 639, 3, 2, 2, 2, 9, 644, 3, 2, 2, 2, 11, 649, 3, 2, 2, 2, 13, 655, 3, 2, 2, 2, 15, 662, 3, 2, 2, 2, 17, 669, 3, 2, 2, 2, 19, 675, 3, 2, 2, 2, 21, 681, 3, 2, 2, 2, 23, 686, 3, 2, 2, 2, 25, 691, 3, 2, 2, 2, 27, 696, 3, 2, 2, 2, 29, 700, 3, 2, 2, 2, 31, 705, 3, 2, 2, 2, 33, 711, 3, 2, 2, 2, 35, 718, 3, 2, 2, 2, 37, 724, 3, 2, 2, 2, 39, 730, 3, 2, 2, 2, 41, 735, 3, 2, 2, 2, 43, 743, 3, 2, 2, 2, 45, 752, 3, 2, 2, 2, 47, 762, 3, 2, 2, 2, 49, 769, 3, 2, 2, 2, 51, 772, 3, 2, 2, 2, 53, 775, 3, 2, 2, 2, 55, 778, 3, 2, 2, 2, 57, 781, 3, 2, 2, 2, 59, 788, 3, 2, 2, 2, 61, 794, 3, 2, 2, 2, 63, 796, 3, 2, 2, 2, 65, 801, 3, 2, 2, 2, 67, 810, 3, 2, 2, 2, 69, 817, 3, 2, 2, 2, 71, 822, 3, 2, 2, 2, 73, 826, 3, 2, 2, 2, 75, 829, 3, 2, 2, 2, 77, 833, 3, 2, 2, 2, 79, 843, 3, 2, 2, 2, 81, 855, 3, 2, 2, 2, 83, 873, 3, 2, 2, 2, 85, 884, 3, 2, 2, 2, 87, 891, 3, 2, 2, 2, 89, 897, 3, 2, 2, 2, 91, 907, 3, 2, 2, 2, 93, 918, 3, 2, 2, 2, 95, 932, 3, 2, 2, 2, 97, 948, 3, 2, 2, 2, 99, 961, 3, 2, 2, 2, 101, 973, 3, 2, 2, 2, 103, 986, 3, 2, 2, 2, 105, 997, 3, 2, 2, 2, 107, 1010, 3, 2, 2, 2, 109, 1025, 3, 2, 2, 2, 111, 1036, 3, 2, 2, 2, 113, 1046, 3, 2, 2, 2, 115, 1065, 3, 2, 2, 2, 117, 1089, 3, 2, 2, 2, 119, 1094, 3, 2, 2, 2, 121, 1097, 3, 2, 2, 2, 123, 1101, 3, 2, 2, 2, 125, 1104, 3, 2, 2, 2, 127, 1108, 3, 2, 2, 2, 129, 1112, 3, 2, 2, 2, 131, 1117, 3, 2, 2, 2, 133, 1123, 3, 2, 2, 2, 135, 1130, 3, 2, 2, 2, 137, 1139, 3, 2, 2, 2, 139, 1148, 3, 2, 2, 2, 141, 1160, 3, 2, 2, 2, 143, 1172, 3, 2, 2, 2, 145, 1179, 3, 2, 2, 2, 147, 1186, 3, 2, 2, 2, 149, 1191, 3, 2, 2, 2, 151, 1195, 3, 2, 2, 2, 153, 1200, 3, 2, 2, 2, 155, 1206, 3, 2, 2, 2, 157, 1214, 3, 2, 2, 2, 159, 1219, 3, 2, 2, 2, 161, 1238, 3, 2, 2, 2, 163, 1257, 3, 2, 2, 2, 165, 1271, 3, 2, 2, 2, 167, 1288, 3, 2, 2, 2, 169, 1300, 3, 2, 2, 2, 171, 1312, 3, 2, 2, 2, 173, 1328, 3, 2, 2, 2, 175, 1339, 3, 2, 2, 2, 177, 1350, 3, 2, 2, 2, 179, 1359, 3, 2, 2, 2, 181, 1370, 3, 2, 2, 2, 183, 1381, 3, 2, 2, 2, 185, 1391, 3, 2, 2, 2, 187, 1398, 3, 2, 2, 2, 189, 1410, 3, 2, 2, 2, 191, 1414, 3, 2, 2, 2, 193, 1422, 3, 2, 2, 2, 195, 1429, 3, 2, 2, 2, 197, 1434, 3, 2, 2, 2, 199, 1440, 3, 2, 2, 2, 201, 1447, 3, 2, 2, 2, 203, 1455, 3, 2, 2, 2, 205, 1457, 3, 2, 2, 2, 207, 1459, 3, 2, 2, 2, 209, 1461, 3, 2, 2, 2, 211, 1463, 3, 2, 2, 2, 213, 1465, 3, 2, 2, 2, 215, 1467, 3, 2, 2, 2, 217, 1470, 3, 2, 2, 2, 219, 1473, 3, 2, 2, 2, 221, 1476, 3, 2, 2, 2, 223, 1478, 3, 2, 2, 2, 225, 1480, 3, 2, 2, 2, 227, 1482, 3, 2, 2, 2, 229, 1484, 3, 2, 2, 2, 231, 1486, 3, 2, 2, 2, 233, 1488, 3, 2, 2, 2, 235, 1490, 3, 2, 2, 2, 237, 1492, 3, 2, 2, 2, 239, 1494, 3, 2, 2, 2, 241, 1496, 3, 2, 2, 2, 243, 1498, 3, 2, 2, 2, 245, 1500, 3, 2, 2, 2, 247, 1502, 3, 2, 2, 2, 249, 1504, 3, 2, 2, 2, 251, 1506, 3, 2, 2, 2, 253, 1508, 3, 2, 2, 2, 255, 1510, 3, 2, 2, 2, 257, 1514, 3, 2, 2, 2, 259, 1520, 3, 2, 2, 2, 261, 1535, 3, 2, 2, 2, 263, 1541, 3, 2, 2, 2, 265, 1553, 3, 2, 2, 2, 267, 1557, 3, 2, 2, 2, 269, 1562, 3, 2, 2, 2, 271, 1569, 3, 2, 2, 2, 273, 1573, 3, 2, 2, 2, 275, 1578, 3, 2, 2, 2, 277, 1584, 3, 2, 2, 2, 279, 1590, 3, 2, 2, 2, 281, 1597, 3, 2, 2, 2, 283, 1601, 3, 2, 2, 2, 285, 1607, 3, 2, 2, 2, 287, 1616, 3, 2, 2, 2, 289, 1624, 3, 2, 2, 2, 291, 1636, 3, 2, 2, 2, 293, 1647, 3, 2, 2, 2, 295, 1658, 3, 2, 2, 2, 297, 1663, 3, 2, 2, 2, 299, 1669, 3, 2, 2, 2, 301, 1674, 3, 2, 2, 2, 303, 1679, 3, 2, 2, 2, 305, 1686, 3, 2, 2, 2, 307, 1695, 3, 2, 2, 2, 309, 1709, 3, 2, 2, 2, 311, 1716, 3, 2, 2, 2, 313, 1728, 3, 2, 2, 2, 315, 1736, 3, 2, 2, 2, 317, 1745, 3, 2, 2, 2, 319, 1756, 3, 2, 2, 2, 321, 1767, 3, 2, 2, 2, 323, 1772, 3, 2, 2, 2, 325, 1782, 3, 2, 2, 2, 327, 1784, 3, 2, 2, 2, 329, 1787, 3, 2, 2, 2, 331, 1791, 3, 2, 2, 2, 333, 1796, 3, 2, 2, 2, 335, 1804, 3, 2, 2, 2, 337, 1809, 3, 2, 2, 2, 339, 1815, 3, 2, 2, 2, 341, 1817, 3, 2, 2, 2, 343, 1821, 3, 2, 2, 2, 345, 1827, 3, 2, 2, 2, 347, 1830, 3, 2, 2, 2, 349, 1834, 3, 2, 2, 2, 351, 1840, 3, 2, 2, 2, 353, 1845, 3, 2, 2, 2, 355, 1849, 3, 2, 2, 2, 357, 1852, 3, 2, 2, 2, 359, 1856, 3, 2, 2, 2, 361, 1862, 3, 2, 2, 2, 363, 1867, 3, 2, 2, 2, 365, 1873, 3, 2, 2, 2, 367, 1878, 3, 2, 2, 2, 369, 1883, 3, 2, 2, 2, 371, 1892, 3, 2, 2, 2, 373, 1897, 3, 2, 2, 2, 375, 1902, 3, 2, 2, 2, 377, 1907, 3, 2, 2, 2, 379, 1913, 3, 2, 2, 2, 381, 1917, 3, 2, 2, 2, 383, 1921, 3, 2, 2, 2, 385, 1929, 3, 2, 2, 2, 387, 1937, 3, 2, 2, 2, 389, 1941, 3, 2, 2, 2, 391, 1945, 3, 2, 2, 2, 393, 1953, 3, 2, 2, 2, 395, 1961, 3, 2, 2, 2, 397, 1974, 3, 2, 2, 2, 399, 1987, 3, 2, 2, 2, 401, 2005, 3, 2, 2, 2, 403, 2013, 3, 2, 2, 2, 405, 2018, 3, 2, 2, 2, 407, 2027, 3, 2, 2, 2, 409, 2039, 3, 2, 2, 2, 411, 2048, 3, 2, 2, 2, 413, 2056, 3, 2, 2, 2, 415, 2067, 3, 2, 2, 2, 417, 2077, 3, 2, 2, 2, 419, 2087, 3, 2, 2, 2, 421, 2097, 3, 2, 2, 2, 423, 2107, 3, 2, 2, 2, 425, 2122, 3, 2, 2, 2, 427, 2136, 3, 2, 2, 2, 429, 2145, 3, 2, 2, 2, 431, 2154, 3, 2, 2, 2, 433, 2164, 3, 2, 2, 2, 435, 2168, 3, 2, 2, 2, 437, 2179, 3, 2, 2, 2, 439, 2191, 3, 2, 2, 2, 441, 2199, 3, 2, 2, 2, 443, 2207, 3, 2, 2, 2, 445, 2212, 3, 2, 2, 2, 447, 2224, 3, 2, 2, 2, 449, 2234, 3, 2, 2, 2, 451, 2242, 3, 2, 2, 2, 453, 2251, 3, 2, 2, 2, 455, 2260, 3, 2, 2, 2, 457, 2274, 3, 2, 2, 2, 459, 2289, 3, 2, 2, 2, 461, 2296, 3, 2, 2, 2, 463, 2306, 3, 2, 2, 2, 465, 2312, 3, 2, 2, 2, 467, 2318, 3, 2, 2, 2, 469, 2323, 3, 2, 2, 2, 471, 2326, 3, 2, 2, 2, 473, 2332, 3, 2, 2, 2, 475, 2338, 3, 2, 2, 2, 477, 2345, 3, 2, 2, 2, 479, 2355, 3, 2, 2, 2, 481, 2362, 3, 2, 2, 2, 483, 2369, 3, 2, 2, 2, 485, 2375, 3, 2, 2, 2, 487, 2380, 3, 2, 2, 2, 489, 2386, 3, 2, 2, 2, 491, 2393, 3, 2, 2, 2, 493, 2401, 3, 2, 2, 2, 495, 2406, 3, 2, 2, 2, 497, 2411, 3, 2, 2, 2, 499, 2418, 3, 2, 2, 2, 501, 2428, 3, 2, 2, 2, 503, 2435, 3, 2, 2, 2, 505, 2442, 3, 2, 2, 2, 507, 2445, 3, 2, 2, 2, 509, 2452, 3, 2, 2, 2, 511, 2458, 3, 2, 2, 2, 513, 2471, 3, 2, 2, 2, 515, 2491, 3, 2, 2, 2, 517, 2509, 3, 2, 2, 2, 519, 2529, 3, 2, 2, 2, 521, 2541, 3, 2, 2, 2, 523, 2554, 3, 2, 2, 2, 525, 2577, 3, 2, 2, 2, 527, 2594, 3, 2, 2, 2, 529, 2603, 3, 2, 2, 2, 531, 2639, 3, 2, 2, 2, 533, 2645, 3, 2, 2, 2, 535, 2662, 3, 2, 2, 2, 537, 2676, 3, 2, 2, 2, 539, 2693, 3, 2, 2, 2, 541, 2720, 3, 2, 2, 2, 543, 2727, 3, 2, 2, 2, 545, 2733, 3, 2, 2, 2, 547, 2754, 3, 2, 2, 2, 549, 2774, 3, 2, 2, 2, 551, 2795, 3, 2, 2, 2, 553, 2809, 3, 2, 2, 2, 555, 2819, 3, 2, 2, 2, 557, 2827, 3, 2, 2, 2, 559, 2845, 3, 2, 2, 2, 561, 2869, 3, 2, 2, 2, 563, 2884, 3, 2, 2, 2, 565, 2905, 3, 2, 2, 2, 567, 2914, 3, 2, 2, 2, 569, 2926, 3, 2, 2, 2, 571, 2940, 3, 2, 2, 2, 573, 2955, 3, 2, 2, 2, 575, 2974, 3, 2, 2, 2, 577, 2982, 3, 2, 2, 2, 579, 2987, 3, 2, 2, 2, 581, 2999, 3, 2, 2, 2, 583, 3004, 3, 2, 2, 2, 585, 3021, 3, 2, 2, 2, 587, 3026, 3, 2, 2, 2, 589, 3029, 3, 2, 2, 2, 591, 3031, 3, 2, 2, 2, 593, 3033, 3, 2, 2, 2, 595, 3035, 3, 2, 2, 2, 597, 3037, 3, 2, 2, 2, 599, 3039, 3, 2, 2, 2, 601, 3041, 3, 2, 2, 2, 603, 3044, 3, 2, 2, 2, 605, 3053, 3, 2, 2, 2, 607, 3069, 3, 2, 2, 2, 609, 3073, 3, 2, 2, 2, 611, 3083, 3, 2, 2, 2, 613, 3086, 3, 2, 2, 2, 615, 3099, 3, 2, 2, 2, 617, 3112, 3, 2, 2, 2, 619, 3125, 3, 2, 2, 2, 621, 3127, 3, 2, 2, 2, 623, 624, 7, 85, 2, 2, 624, 625, 7, 71, 2, 2, 625, 626, 7, 67, 2, 2, 626, 627, 7, 84, 2, 2, 627, 628, 7, 69, 2, 2, 628, 629, 7, 74, 2, 2, 629, 4, 3, 2, 2, 2, 630, 631, 7, 70, 2, 2, 631, 632, 7, 71, 2, 2, 632, 633, 7, 85, 2, 2, 633, 634, 7, 69, 2, 2, 634, 635, 7, 84, 2, 2, 635, 636, 7, 75, 2, 2, 636, 637, 7, 68, 2, 2, 637, 638, 7, 71, 2, 2, 638, 6, 3, 2, 2, 2, 639, 640, 7, 85, 2, 2, 640, 641, 7, 74, 2, 2, 641, 642, 7, 81, 2, 2, 642, 643, 7, 89, 2, 2, 643, 8, 3, 2, 2, 2, 644, 645, 7, 72, 2, 2, 645, 646, 7, 84, 2, 2, 646, 647, 7, 81, 2, 2, 647, 648, 7, 79, 2, 2, 648, 10, 3, 2, 2, 2, 649, 650, 7, 89, 2, 2, 650, 651, 7, 74, 2, 2, 651, 652, 7, 71, 2, 2, 652, 653, 7, 84, 2, 2, 653, 654, 7, 71, 2, 2, 654, 12, 3, 2, 2, 2, 655, 656, 7, 72, 2, 2, 656, 657, 7, 75, 2, 2, 657, 658, 7, 71, 2, 2, 658, 659, 7, 78, 2, 2, 659, 660, 7, 70, 2, 2, 660, 661, 7, 85, 2, 2, 661, 14, 3, 2, 2, 2, 662, 663, 7, 84, 2, 2, 663, 664, 7, 71, 2, 2, 664, 665, 7, 80, 2, 2, 665, 666, 7, 67, 2, 2, 666, 667, 7, 79, 2, 2, 667, 668, 7, 71, 2, 2, 668, 16, 3, 2, 2, 2, 669, 670, 7, 85, 2, 2, 670, 671, 7, 86, 2, 2, 671, 672, 7, 67, 2, 2, 672, 673, 7, 86, 2, 2, 673, 674, 7, 85, 2, 2, 674, 18, 3, 2, 2, 2, 675, 676, 7, 70, 2, 2, 676, 677, 7, 71, 2, 2, 677, 678, 7, 70, 2, 2, 678, 679, 7, 87, 2, 2, 679, 680, 7, 82, 2, 2, 680, 20, 3, 2, 2, 2, 681, 682, 7, 85, 2, 2, 682, 683, 7, 81, 2, 2, 683, 684, 7, 84, 2, 2, 684, 685, 7, 86, 2, 2, 685, 22, 3, 2, 2, 2, 686, 687, 7, 71, 2, 2, 687, 688, 7, 88, 2, 2, 688, 689, 7, 67, 2, 2, 689, 690, 7, 78, 2, 2, 690, 24, 3, 2, 2, 2, 691, 692, 7, 74, 2, 2, 692, 693, 7, 71, 2, 2, 693, 694, 7, 67, 2, 2, 694, 695, 7, 70, 2, 2, 695, 26, 3, 2, 2, 2, 696, 697, 7, 86, 2, 2, 697, 698, 7, 81, 2, 2, 698, 699, 7, 82, 2, 2, 699, 28, 3, 2, 2, 2, 700, 701, 7, 84, 2, 2, 701, 702, 7, 67, 2, 2, 702, 703, 7, 84, 2, 2, 703, 704, 7, 71, 2, 2, 704, 30, 3, 2, 2, 2, 705, 706, 7, 82, 2, 2, 706, 707, 7, 67, 2, 2, 707, 708, 7, 84, 2, 2, 708, 709, 7, 85, 2, 2, 709, 710, 7, 71, 2, 2, 710, 32, 3, 2, 2, 2, 711, 712, 7, 79, 2, 2, 712, 713, 7, 71, 2, 2, 713, 714, 7, 86, 2, 2, 714, 715, 7, 74, 2, 2, 715, 716, 7, 81, 2, 2, 716, 717, 7, 70, 2, 2, 717, 34, 3, 2, 2, 2, 718, 719, 7, 84, 2, 2, 719, 720, 7, 71, 2, 2, 720, 721, 7, 73, 2, 2, 721, 722, 7, 71, 2, 2, 722, 723, 7, 90, 2, 2, 723, 36, 3, 2, 2, 2, 724, 725, 7, 82, 2, 2, 725, 726, 7, 87, 2, 2, 726, 727, 7, 80, 2, 2, 727, 728, 7, 69, 2, 2, 728, 729, 7, 86, 2, 2, 729, 38, 3, 2, 2, 2, 730, 731, 7, 73, 2, 2, 731, 732, 7, 84, 2, 2, 732, 733, 7, 81, 2, 2, 733, 734, 7, 77, 2, 2, 734, 40, 3, 2, 2, 2, 735, 736, 7, 82, 2, 2, 736, 737, 7, 67, 2, 2, 737, 738, 7, 86, 2, 2, 738, 739, 7, 86, 2, 2, 739, 740, 7, 71, 2, 2, 740, 741, 7, 84, 2, 2, 741, 742, 7, 80, 2, 2, 742, 42, 3, 2, 2, 2, 743, 744, 7, 82, 2, 2, 744, 745, 7, 67, 2, 2, 745, 746, 7, 86, 2, 2, 746, 747, 7, 86, 2, 2, 747, 748, 7, 71, 2, 2, 748, 749, 7, 84, 2, 2, 749, 750, 7, 80, 2, 2, 750, 751, 7, 85, 2, 2, 751, 44, 3, 2, 2, 2, 752, 753, 7, 80, 2, 2, 753, 754, 7, 71, 2, 2, 754, 755, 7, 89, 2, 2, 755, 756, 7, 97, 2, 2, 756, 757, 7, 72, 2, 2, 757, 758, 7, 75, 2, 2, 758, 759, 7, 71, 2, 2, 759, 760, 7, 78, 2, 2, 760, 761, 7, 70, 2, 2, 761, 46, 3, 2, 2, 2, 762, 763, 7, 77, 2, 2, 763, 764, 7, 79, 2, 2, 764, 765, 7, 71, 2, 2, 765, 766, 7, 67, 2, 2, 766, 767, 7, 80, 2, 2, 767, 768, 7, 85, 2, 2, 768, 48, 3, 2, 2, 2, 769, 770, 7, 67, 2, 2, 770, 771, 7, 70, 2, 2, 771, 50, 3, 2, 2, 2, 772, 773, 7, 79, 2, 2, 773, 774, 7, 78, 2, 2, 774, 52, 3, 2, 2, 2, 775, 776, 7, 67, 2, 2, 776, 777, 7, 85, 2, 2, 777, 54, 3, 2, 2, 2, 778, 779, 7, 68, 2, 2, 779, 780, 7, 91, 2, 2, 780, 56, 3, 2, 2, 2, 781, 782, 7, 85, 2, 2, 782, 783, 7, 81, 2, 2, 783, 784, 7, 87, 2, 2, 784, 785, 7, 84, 2, 2, 785, 786, 7, 69, 2, 2, 786, 787, 7, 71, 2, 2, 787, 58, 3, 2, 2, 2, 788, 789, 7, 75, 2, 2, 789, 790, 7, 80, 2, 2, 790, 791, 7, 70, 2, 2, 791, 792, 7, 71, 2, 2, 792, 793, 7, 90, 2, 2, 793, 60, 3, 2, 2, 2, 794, 795, 7, 70, 2, 2, 795, 62, 3, 2, 2, 2, 796, 797, 7, 70, 2, 2, 797, 798, 7, 71, 2, 2, 798, 799, 7, 85, 2, 2, 799, 800, 7, 69, 2, 2, 800, 64, 3, 2, 2, 2, 801, 802, 7, 69, 2, 2, 802, 803, 7, 67, 2, 2, 803, 804, 7, 86, 2, 2, 804, 805, 7, 67, 2, 2, 805, 806, 7, 78, 2, 2, 806, 807, 7, 81, 2, 2, 807, 808, 7, 73, 2, 2, 808, 809, 7, 85, 2, 2, 809, 66, 3, 2, 2, 2, 810, 811, 7, 85, 2, 2, 811, 812, 7, 81, 2, 2, 812, 813, 7, 84, 2, 2, 813, 814, 7, 86, 2, 2, 814, 815, 7, 68, 2, 2, 815, 816, 7, 91, 2, 2, 816, 68, 3, 2, 2, 2, 817, 818, 7, 67, 2, 2, 818, 819, 7, 87, 2, 2, 819, 820, 7, 86, 2, 2, 820, 821, 7, 81, 2, 2, 821, 70, 3, 2, 2, 2, 822, 823, 7, 85, 2, 2, 823, 824, 7, 86, 2, 2, 824, 825, 7, 84, 2, 2, 825, 72, 3, 2, 2, 2, 826, 827, 7, 75, 2, 2, 827, 828, 7, 82, 2, 2, 828, 74, 3, 2, 2, 2, 829, 830, 7, 80, 2, 2, 830, 831, 7, 87, 2, 2, 831, 832, 7, 79, 2, 2, 832, 76, 3, 2, 2, 2, 833, 834, 7, 77, 2, 2, 834, 835, 7, 71, 2, 2, 835, 836, 7, 71, 2, 2, 836, 837, 7, 82, 2, 2, 837, 838, 7, 71, 2, 2, 838, 839, 7, 79, 2, 2, 839, 840, 7, 82, 2, 2, 840, 841, 7, 86, 2, 2, 841, 842, 7, 91, 2, 2, 842, 78, 3, 2, 2, 2, 843, 844, 7, 69, 2, 2, 844, 845, 7, 81, 2, 2, 845, 846, 7, 80, 2, 2, 846, 847, 7, 85, 2, 2, 847, 848, 7, 71, 2, 2, 848, 849, 7, 69, 2, 2, 849, 850, 7, 87, 2, 2, 850, 851, 7, 86, 2, 2, 851, 852, 7, 75, 2, 2, 852, 853, 7, 88, 2, 2, 853, 854, 7, 71, 2, 2, 854, 80, 3, 2, 2, 2, 855, 856, 7, 70, 2, 2, 856, 857, 7, 71, 2, 2, 857, 858, 7, 70, 2, 2, 858, 859, 7, 87, 2, 2, 859, 860, 7, 82, 2, 2, 860, 861, 7, 97, 2, 2, 861, 862, 7, 85, 2, 2, 862, 863, 7, 82, 2, 2, 863, 864, 7, 78, 2, 2, 864, 865, 7, 75, 2, 2, 865, 866, 7, 86, 2, 2, 866, 867, 7, 88, 2, 2, 867, 868, 7, 67, 2, 2, 868, 869, 7, 78, 2, 2, 869, 870, 7, 87, 2, 2, 870, 871, 7, 71, 2, 2, 871, 872, 7, 85, 2, 2, 872, 82, 3, 2, 2, 2, 873, 874, 7, 82, 2, 2, 874, 875, 7, 67, 2, 2, 875, 876, 7, 84, 2, 2, 876, 877, 7, 86, 2, 2, 877, 878, 7, 75, 2, 2, 878, 879, 7, 86, 2, 2, 879, 880, 7, 75, 2, 2, 880, 881, 7, 81, 2, 2, 881, 882, 7, 80, 2, 2, 882, 883, 7, 85, 2, 2, 883, 84, 3, 2, 2, 2, 884, 885, 7, 67, 2, 2, 885, 886, 7, 78, 2, 2, 886, 887, 7, 78, 2, 2, 887, 888, 7, 80, 2, 2, 888, 889, 7, 87, 2, 2, 889, 890, 7, 79, 2, 2, 890, 86, 3, 2, 2, 2, 891, 892, 7, 70, 2, 2, 892, 893, 7, 71, 2, 2, 893, 894, 7, 78, 2, 2, 894, 895, 7, 75, 2, 2, 895, 896, 7, 79, 2, 2, 896, 88, 3, 2, 2, 2, 897, 898, 7, 69, 2, 2, 898, 899, 7, 71, 2, 2, 899, 900, 7, 80, 2, 2, 900, 901, 7, 86, 2, 2, 901, 902, 7, 84, 2, 2, 902, 903, 7, 81, 2, 2, 903, 904, 7, 75, 2, 2, 904, 905, 7, 70, 2, 2, 905, 906, 7, 85, 2, 2, 906, 90, 3, 2, 2, 2, 907, 908, 7, 75, 2, 2, 908, 909, 7, 86, 2, 2, 909, 910, 7, 71, 2, 2, 910, 911, 7, 84, 2, 2, 911, 912, 7, 67, 2, 2, 912, 913, 7, 86, 2, 2, 913, 914, 7, 75, 2, 2, 914, 915, 7, 81, 2, 2, 915, 916, 7, 80, 2, 2, 916, 917, 7, 85, 2, 2, 917, 92, 3, 2, 2, 2, 918, 919, 7, 70, 2, 2, 919, 920, 7, 75, 2, 2, 920, 921, 7, 85, 2, 2, 921, 922, 7, 86, 2, 2, 922, 923, 7, 67, 2, 2, 923, 924, 7, 80, 2, 2, 924, 925, 7, 69, 2, 2, 925, 926, 7, 71, 2, 2, 926, 927, 7, 97, 2, 2, 927, 928, 7, 86, 2, 2, 928, 929, 7, 91, 2, 2, 929, 930, 7, 82, 2, 2, 930, 931, 7, 71, 2, 2, 931, 94, 3, 2, 2, 2, 932, 933, 7, 80, 2, 2, 933, 934, 7, 87, 2, 2, 934, 935, 7, 79, 2, 2, 935, 936, 7, 68, 2, 2, 936, 937, 7, 71, 2, 2, 937, 938, 7, 84, 2, 2, 938, 939, 7, 97, 2, 2, 939, 940, 7, 81, 2, 2, 940, 941, 7, 72, 2, 2, 941, 942, 7, 97, 2, 2, 942, 943, 7, 86, 2, 2, 943, 944, 7, 84, 2, 2, 944, 945, 7, 71, 2, 2, 945, 946, 7, 71, 2, 2, 946, 947, 7, 85, 2, 2, 947, 96, 3, 2, 2, 2, 948, 949, 7, 85, 2, 2, 949, 950, 7, 74, 2, 2, 950, 951, 7, 75, 2, 2, 951, 952, 7, 80, 2, 2, 952, 953, 7, 73, 2, 2, 953, 954, 7, 78, 2, 2, 954, 955, 7, 71, 2, 2, 955, 956, 7, 97, 2, 2, 956, 957, 7, 85, 2, 2, 957, 958, 7, 75, 2, 2, 958, 959, 7, 92, 2, 2, 959, 960, 7, 71, 2, 2, 960, 98, 3, 2, 2, 2, 961, 962, 7, 85, 2, 2, 962, 963, 7, 67, 2, 2, 963, 964, 7, 79, 2, 2, 964, 965, 7, 82, 2, 2, 965, 966, 7, 78, 2, 2, 966, 967, 7, 71, 2, 2, 967, 968, 7, 97, 2, 2, 968, 969, 7, 85, 2, 2, 969, 970, 7, 75, 2, 2, 970, 971, 7, 92, 2, 2, 971, 972, 7, 71, 2, 2, 972, 100, 3, 2, 2, 2, 973, 974, 7, 81, 2, 2, 974, 975, 7, 87, 2, 2, 975, 976, 7, 86, 2, 2, 976, 977, 7, 82, 2, 2, 977, 978, 7, 87, 2, 2, 978, 979, 7, 86, 2, 2, 979, 980, 7, 97, 2, 2, 980, 981, 7, 67, 2, 2, 981, 982, 7, 72, 2, 2, 982, 983, 7, 86, 2, 2, 983, 984, 7, 71, 2, 2, 984, 985, 7, 84, 2, 2, 985, 102, 3, 2, 2, 2, 986, 987, 7, 86, 2, 2, 987, 988, 7, 75, 2, 2, 988, 989, 7, 79, 2, 2, 989, 990, 7, 71, 2, 2, 990, 991, 7, 97, 2, 2, 991, 992, 7, 70, 2, 2, 992, 993, 7, 71, 2, 2, 993, 994, 7, 69, 2, 2, 994, 995, 7, 67, 2, 2, 995, 996, 7, 91, 2, 2, 996, 104, 3, 2, 2, 2, 997, 998, 7, 67, 2, 2, 998, 999, 7, 80, 2, 2, 999, 1000, 7, 81, 2, 2, 1000, 1001, 7, 79, 2, 2, 1001, 1002, 7, 67, 2, 2, 1002, 1003, 7, 78, 2, 2, 1003, 1004, 7, 91, 2, 2, 1004, 1005, 7, 97, 2, 2, 1005, 1006, 7, 84, 2, 2, 1006, 1007, 7, 67, 2, 2, 1007, 1008, 7, 86, 2, 2, 1008, 1009, 7, 71, 2, 2, 1009, 106, 3, 2, 2, 2, 1010, 1011, 7, 69, 2, 2, 1011, 1012, 7, 67, 2, 2, 1012, 1013, 7, 86, 2, 2, 1013, 1014, 7, 71, 2, 2, 1014, 1015, 7, 73, 2, 2, 1015, 1016, 7, 81, 2, 2, 1016, 1017, 7, 84, 2, 2, 1017, 1018, 7, 91, 2, 2, 1018, 1019, 7, 97, 2, 2, 1019, 1020, 7, 72, 2, 2, 1020, 1021, 7, 75, 2, 2, 1021, 1022, 7, 71, 2, 2, 1022, 1023, 7, 78, 2, 2, 1023, 1024, 7, 70, 2, 2, 1024, 108, 3, 2, 2, 2, 1025, 1026, 7, 86, 2, 2, 1026, 1027, 7, 75, 2, 2, 1027, 1028, 7, 79, 2, 2, 1028, 1029, 7, 71, 2, 2, 1029, 1030, 7, 97, 2, 2, 1030, 1031, 7, 72, 2, 2, 1031, 1032, 7, 75, 2, 2, 1032, 1033, 7, 71, 2, 2, 1033, 1034, 7, 78, 2, 2, 1034, 1035, 7, 70, 2, 2, 1035, 110, 3, 2, 2, 2, 1036, 1037, 7, 86, 2, 2, 1037, 1038, 7, 75, 2, 2, 1038, 1039, 7, 79, 2, 2, 1039, 1040, 7, 71, 2, 2, 1040, 1041, 7, 97, 2, 2, 1041, 1042, 7, 92, 2, 2, 1042, 1043, 7, 81, 2, 2, 1043, 1044, 7, 80, 2, 2, 1044, 1045, 7, 71, 2, 2, 1045, 112, 3, 2, 2, 2, 1046, 1047, 7, 86, 2, 2, 1047, 1048, 7, 84, 2, 2, 1048, 1049, 7, 67, 2, 2, 1049, 1050, 7, 75, 2, 2, 1050, 1051, 7, 80, 2, 2, 1051, 1052, 7, 75, 2, 2, 1052, 1053, 7, 80, 2, 2, 1053, 1054, 7, 73, 2, 2, 1054, 1055, 7, 97, 2, 2, 1055, 1056, 7, 70, 2, 2, 1056, 1057, 7, 67, 2, 2, 1057, 1058, 7, 86, 2, 2, 1058, 1059, 7, 67, 2, 2, 1059, 1060, 7, 97, 2, 2, 1060, 1061, 7, 85, 2, 2, 1061, 1062, 7, 75, 2, 2, 1062, 1063, 7, 92, 2, 2, 1063, 1064, 7, 71, 2, 2, 1064, 114, 3, 2, 2, 2, 1065, 1066, 7, 67, 2, 2, 1066, 1067, 7, 80, 2, 2, 1067, 1068, 7, 81, 2, 2, 1068, 1069, 7, 79, 2, 2, 1069, 1070, 7, 67, 2, 2, 1070, 1071, 7, 78, 2, 2, 1071, 1072, 7, 91, 2, 2, 1072, 1073, 7, 97, 2, 2, 1073, 1074, 7, 85, 2, 2, 1074, 1075, 7, 69, 2, 2, 1075, 1076, 7, 81, 2, 2, 1076, 1077, 7, 84, 2, 2, 1077, 1078, 7, 71, 2, 2, 1078, 1079, 7, 97, 2, 2, 1079, 1080, 7, 86, 2, 2, 1080, 1081, 7, 74, 2, 2, 1081, 1082, 7, 84, 2, 2, 1082, 1083, 7, 71, 2, 2, 1083, 1084, 7, 85, 2, 2, 1084, 1085, 7, 74, 2, 2, 1085, 1086, 7, 81, 2, 2, 1086, 1087, 7, 78, 2, 2, 1087, 1088, 7, 70, 2, 2, 1088, 116, 3, 2, 2, 2, 1089, 1090, 7, 69, 2, 2, 1090, 1091, 7, 67, 2, 2, 1091, 1092, 7, 85, 2, 2, 1092, 1093, 7, 71, 2, 2, 1093, 118, 3, 2, 2, 2, 1094, 1095, 7, 75, 2, 2, 1095, 1096, 7, 80, 2, 2, 1096, 120, 3, 2, 2, 2, 1097, 1098, 7, 80, 2, 2, 1098, 1099, 7, 81, 2, 2, 1099, 1100, 7, 86, 2, 2, 1100, 122, 3, 2, 2, 2, 1101, 1102, 7, 81, 2, 2, 1102, 1103, 7, 84, 2, 2, 1103, 124, 3, 2, 2, 2, 1104, 1105, 7, 67, 2, 2, 1105, 1106, 7, 80, 2, 2, 1106, 1107, 7, 70, 2, 2, 1107, 126, 3, 2, 2, 2, 1108, 1109, 7, 90, 2, 2, 1109, 1110, 7, 81, 2, 2, 1110, 1111, 7, 84, 2, 2, 1111, 128, 3, 2, 2, 2, 1112, 1113, 7, 86, 2, 2, 1113, 1114, 7, 84, 2, 2, 1114, 1115, 7, 87, 2, 2, 1115, 1116, 7, 71, 2, 2, 1116, 130, 3, 2, 2, 2, 1117, 1118, 7, 72, 2, 2, 1118, 1119, 7, 67, 2, 2, 1119, 1120, 7, 78, 2, 2, 1120, 1121, 7, 85, 2, 2, 1121, 1122, 7, 71, 2, 2, 1122, 132, 3, 2, 2, 2, 1123, 1124, 7, 84, 2, 2, 1124, 1125, 7, 71, 2, 2, 1125, 1126, 7, 73, 2, 2, 1126, 1127, 7, 71, 2, 2, 1127, 1128, 7, 90, 2, 2, 1128, 1129, 7, 82, 2, 2, 1129, 134, 3, 2, 2, 2, 1130, 1131, 7, 70, 2, 2, 1131, 1132, 7, 67, 2, 2, 1132, 1133, 7, 86, 2, 2, 1133, 1134, 7, 71, 2, 2, 1134, 1135, 7, 86, 2, 2, 1135, 1136, 7, 75, 2, 2, 1136, 1137, 7, 79, 2, 2, 1137, 1138, 7, 71, 2, 2, 1138, 136, 3, 2, 2, 2, 1139, 1140, 7, 75, 2, 2, 1140, 1141, 7, 80, 2, 2, 1141, 1142, 7, 86, 2, 2, 1142, 1143, 7, 71, 2, 2, 1143, 1144, 7, 84, 2, 2, 1144, 1145, 7, 88, 2, 2, 1145, 1146, 7, 67, 2, 2, 1146, 1147, 7, 78, 2, 2, 1147, 138, 3, 2, 2, 2, 1148, 1149, 7, 79, 2, 2, 1149, 1150, 7, 75, 2, 2, 1150, 1151, 7, 69, 2, 2, 1151, 1152, 7, 84, 2, 2, 1152, 1153, 7, 81, 2, 2, 1153, 1154, 7, 85, 2, 2, 1154, 1155, 7, 71, 2, 2, 1155, 1156, 7, 69, 2, 2, 1156, 1157, 7, 81, 2, 2, 1157, 1158, 7, 80, 2, 2, 1158, 1159, 7, 70, 2, 2, 1159, 140, 3, 2, 2, 2, 1160, 1161, 7, 79, 2, 2, 1161, 1162, 7, 75, 2, 2, 1162, 1163, 7, 78, 2, 2, 1163, 1164, 7, 78, 2, 2, 1164, 1165, 7, 75, 2, 2, 1165, 1166, 7, 85, 2, 2, 1166, 1167, 7, 71, 2, 2, 1167, 1168, 7, 69, 2, 2, 1168, 1169, 7, 81, 2, 2, 1169, 1170, 7, 80, 2, 2, 1170, 1171, 7, 70, 2, 2, 1171, 142, 3, 2, 2, 2, 1172, 1173, 7, 85, 2, 2, 1173, 1174, 7, 71, 2, 2, 1174, 1175, 7, 69, 2, 2, 1175, 1176, 7, 81, 2, 2, 1176, 1177, 7, 80, 2, 2, 1177, 1178, 7, 70, 2, 2, 1178, 144, 3, 2, 2, 2, 1179, 1180, 7, 79, 2, 2, 1180, 1181, 7, 75, 2, 2, 1181, 1182, 7, 80, 2, 2, 1182, 1183, 7, 87, 2, 2, 1183, 1184, 7, 86, 2, 2, 1184, 1185, 7, 71, 2, 2, 1185, 146, 3, 2, 2, 2, 1186, 1187, 7, 74, 2, 2, 1187, 1188, 7, 81, 2, 2, 1188, 1189, 7, 87, 2, 2, 1189, 1190, 7, 84, 2, 2, 1190, 148, 3, 2, 2, 2, 1191, 1192, 7, 70, 2, 2, 1192, 1193, 7, 67, 2, 2, 1193, 1194, 7, 91, 2, 2, 1194, 150, 3, 2, 2, 2, 1195, 1196, 7, 89, 2, 2, 1196, 1197, 7, 71, 2, 2, 1197, 1198, 7, 71, 2, 2, 1198, 1199, 7, 77, 2, 2, 1199, 152, 3, 2, 2, 2, 1200, 1201, 7, 79, 2, 2, 1201, 1202, 7, 81, 2, 2, 1202, 1203, 7, 80, 2, 2, 1203, 1204, 7, 86, 2, 2, 1204, 1205, 7, 74, 2, 2, 1205, 154, 3, 2, 2, 2, 1206, 1207, 7, 83, 2, 2, 1207, 1208, 7, 87, 2, 2, 1208, 1209, 7, 67, 2, 2, 1209, 1210, 7, 84, 2, 2, 1210, 1211, 7, 86, 2, 2, 1211, 1212, 7, 71, 2, 2, 1212, 1213, 7, 84, 2, 2, 1213, 156, 3, 2, 2, 2, 1214, 1215, 7, 91, 2, 2, 1215, 1216, 7, 71, 2, 2, 1216, 1217, 7, 67, 2, 2, 1217, 1218, 7, 84, 2, 2, 1218, 158, 3, 2, 2, 2, 1219, 1220, 7, 85, 2, 2, 1220, 1221, 7, 71, 2, 2, 1221, 1222, 7, 69, 2, 2, 1222, 1223, 7, 81, 2, 2, 1223, 1224, 7, 80, 2, 2, 1224, 1225, 7, 70, 2, 2, 1225, 1226, 7, 97, 2, 2, 1226, 1227, 7, 79, 2, 2, 1227, 1228, 7, 75, 2, 2, 1228, 1229, 7, 69, 2, 2, 1229, 1230, 7, 84, 2, 2, 1230, 1231, 7, 81, 2, 2, 1231, 1232, 7, 85, 2, 2, 1232, 1233, 7, 71, 2, 2, 1233, 1234, 7, 69, 2, 2, 1234, 1235, 7, 81, 2, 2, 1235, 1236, 7, 80, 2, 2, 1236, 1237, 7, 70, 2, 2, 1237, 160, 3, 2, 2, 2, 1238, 1239, 7, 79, 2, 2, 1239, 1240, 7, 75, 2, 2, 1240, 1241, 7, 80, 2, 2, 1241, 1242, 7, 87, 2, 2, 1242, 1243, 7, 86, 2, 2, 1243, 1244, 7, 71, 2, 2, 1244, 1245, 7, 97, 2, 2, 1245, 1246, 7, 79, 2, 2, 1246, 1247, 7, 75, 2, 2, 1247, 1248, 7, 69, 2, 2, 1248, 1249, 7, 84, 2, 2, 1249, 1250, 7, 81, 2, 2, 1250, 1251, 7, 85, 2, 2, 1251, 1252, 7, 71, 2, 2, 1252, 1253, 7, 69, 2, 2, 1253, 1254, 7, 81, 2, 2, 1254, 1255, 7, 80, 2, 2, 1255, 1256, 7, 70, 2, 2, 1256, 162, 3, 2, 2, 2, 1257, 1258, 7, 79, 2, 2, 1258, 1259, 7, 75, 2, 2, 1259, 1260, 7, 80, 2, 2, 1260, 1261, 7, 87, 2, 2, 1261, 1262, 7, 86, 2, 2, 1262, 1263, 7, 71, 2, 2, 1263, 1264, 7, 97, 2, 2, 1264, 1265, 7, 85, 2, 2, 1265, 1266, 7, 71, 2, 2, 1266, 1267, 7, 69, 2, 2, 1267, 1268, 7, 81, 2, 2, 1268, 1269, 7, 80, 2, 2, 1269, 1270, 7, 70, 2, 2, 1270, 164, 3, 2, 2, 2, 1271, 1272, 7, 74, 2, 2, 1272, 1273, 7, 81, 2, 2, 1273, 1274, 7, 87, 2, 2, 1274, 1275, 7, 84, 2, 2, 1275, 1276, 7, 97, 2, 2, 1276, 1277, 7, 79, 2, 2, 1277, 1278, 7, 75, 2, 2, 1278, 1279, 7, 69, 2, 2, 1279, 1280, 7, 84, 2, 2, 1280, 1281, 7, 81, 2, 2, 1281, 1282, 7, 85, 2, 2, 1282, 1283, 7, 71, 2, 2, 1283, 1284, 7, 69, 2, 2, 1284, 1285, 7, 81, 2, 2, 1285, 1286, 7, 80, 2, 2, 1286, 1287, 7, 70, 2, 2, 1287, 166, 3, 2, 2, 2, 1288, 1289, 7, 74, 2, 2, 1289, 1290, 7, 81, 2, 2, 1290, 1291, 7, 87, 2, 2, 1291, 1292, 7, 84, 2, 2, 1292, 1293, 7, 97, 2, 2, 1293, 1294, 7, 85, 2, 2, 1294, 1295, 7, 71, 2, 2, 1295, 1296, 7, 69, 2, 2, 1296, 1297, 7, 81, 2, 2, 1297, 1298, 7, 80, 2, 2, 1298, 1299, 7, 70, 2, 2, 1299, 168, 3, 2, 2, 2, 1300, 1301, 7, 74, 2, 2, 1301, 1302, 7, 81, 2, 2, 1302, 1303, 7, 87, 2, 2, 1303, 1304, 7, 84, 2, 2, 1304, 1305, 7, 97, 2, 2, 1305, 1306, 7, 79, 2, 2, 1306, 1307, 7, 75, 2, 2, 1307, 1308, 7, 80, 2, 2, 1308, 1309, 7, 87, 2, 2, 1309, 1310, 7, 86, 2, 2, 1310, 1311, 7, 71, 2, 2, 1311, 170, 3, 2, 2, 2, 1312, 1313, 7, 70, 2, 2, 1313, 1314, 7, 67, 2, 2, 1314, 1315, 7, 91, 2, 2, 1315, 1316, 7, 97, 2, 2, 1316, 1317, 7, 79, 2, 2, 1317, 1318, 7, 75, 2, 2, 1318, 1319, 7, 69, 2, 2, 1319, 1320, 7, 84, 2, 2, 1320, 1321, 7, 81, 2, 2, 1321, 1322, 7, 85, 2, 2, 1322, 1323, 7, 71, 2, 2, 1323, 1324, 7, 69, 2, 2, 1324, 1325, 7, 81, 2, 2, 1325, 1326, 7, 80, 2, 2, 1326, 1327, 7, 70, 2, 2, 1327, 172, 3, 2, 2, 2, 1328, 1329, 7, 70, 2, 2, 1329, 1330, 7, 67, 2, 2, 1330, 1331, 7, 91, 2, 2, 1331, 1332, 7, 97, 2, 2, 1332, 1333, 7, 85, 2, 2, 1333, 1334, 7, 71, 2, 2, 1334, 1335, 7, 69, 2, 2, 1335, 1336, 7, 81, 2, 2, 1336, 1337, 7, 80, 2, 2, 1337, 1338, 7, 70, 2, 2, 1338, 174, 3, 2, 2, 2, 1339, 1340, 7, 70, 2, 2, 1340, 1341, 7, 67, 2, 2, 1341, 1342, 7, 91, 2, 2, 1342, 1343, 7, 97, 2, 2, 1343, 1344, 7, 79, 2, 2, 1344, 1345, 7, 75, 2, 2, 1345, 1346, 7, 80, 2, 2, 1346, 1347, 7, 87, 2, 2, 1347, 1348, 7, 86, 2, 2, 1348, 1349, 7, 71, 2, 2, 1349, 176, 3, 2, 2, 2, 1350, 1351, 7, 70, 2, 2, 1351, 1352, 7, 67, 2, 2, 1352, 1353, 7, 91, 2, 2, 1353, 1354, 7, 97, 2, 2, 1354, 1355, 7, 74, 2, 2, 1355, 1356, 7, 81, 2, 2, 1356, 1357, 7, 87, 2, 2, 1357, 1358, 7, 84, 2, 2, 1358, 178, 3, 2, 2, 2, 1359, 1360, 7, 91, 2, 2, 1360, 1361, 7, 71, 2, 2, 1361, 1362, 7, 67, 2, 2, 1362, 1363, 7, 84, 2, 2, 1363, 1364, 7, 97, 2, 2, 1364, 1365, 7, 79, 2, 2, 1365, 1366, 7, 81, 2, 2, 1366, 1367, 7, 80, 2, 2, 1367, 1368, 7, 86, 2, 2, 1368, 1369, 7, 74, 2, 2, 1369, 180, 3, 2, 2, 2, 1370, 1371, 7, 69, 2, 2, 1371, 1372, 7, 81, 2, 2, 1372, 1373, 7, 80, 2, 2, 1373, 1374, 7, 88, 2, 2, 1374, 1375, 7, 71, 2, 2, 1375, 1376, 7, 84, 2, 2, 1376, 1377, 7, 86, 2, 2, 1377, 1378, 7, 97, 2, 2, 1378, 1379, 7, 86, 2, 2, 1379, 1380, 7, 92, 2, 2, 1380, 182, 3, 2, 2, 2, 1381, 1382, 7, 70, 2, 2, 1382, 1383, 7, 67, 2, 2, 1383, 1384, 7, 86, 2, 2, 1384, 1385, 7, 67, 2, 2, 1385, 1386, 7, 79, 2, 2, 1386, 1387, 7, 81, 2, 2, 1387, 1388, 7, 70, 2, 2, 1388, 1389, 7, 71, 2, 2, 1389, 1390, 7, 78, 2, 2, 1390, 184, 3, 2, 2, 2, 1391, 1392, 7, 78, 2, 2, 1392, 1393, 7, 81, 2, 2, 1393, 1394, 7, 81, 2, 2, 1394, 1395, 7, 77, 2, 2, 1395, 1396, 7, 87, 2, 2, 1396, 1397, 7, 82, 2, 2, 1397, 186, 3, 2, 2, 2, 1398, 1399, 7, 85, 2, 2, 1399, 1400, 7, 67, 2, 2, 1400, 1401, 7, 88, 2, 2, 1401, 1402, 7, 71, 2, 2, 1402, 1403, 7, 70, 2, 2, 1403, 1404, 7, 85, 2, 2, 1404, 1405, 7, 71, 2, 2, 1405, 1406, 7, 67, 2, 2, 1406, 1407, 7, 84, 2, 2, 1407, 1408, 7, 69, 2, 2, 1408, 1409, 7, 74, 2, 2, 1409, 188, 3, 2, 2, 2, 1410, 1411, 7, 75, 2, 2, 1411, 1412, 7, 80, 2, 2, 1412, 1413, 7, 86, 2, 2, 1413, 190, 3, 2, 2, 2, 1414, 1415, 7, 75, 2, 2, 1415, 1416, 7, 80, 2, 2, 1416, 1417, 7, 86, 2, 2, 1417, 1418, 7, 71, 2, 2, 1418, 1419, 7, 73, 2, 2, 1419, 1420, 7, 71, 2, 2, 1420, 1421, 7, 84, 2, 2, 1421, 192, 3, 2, 2, 2, 1422, 1423, 7, 70, 2, 2, 1423, 1424, 7, 81, 2, 2, 1424, 1425, 7, 87, 2, 2, 1425, 1426, 7, 68, 2, 2, 1426, 1427, 7, 78, 2, 2, 1427, 1428, 7, 71, 2, 2, 1428, 194, 3, 2, 2, 2, 1429, 1430, 7, 78, 2, 2, 1430, 1431, 7, 81, 2, 2, 1431, 1432, 7, 80, 2, 2, 1432, 1433, 7, 73, 2, 2, 1433, 196, 3, 2, 2, 2, 1434, 1435, 7, 72, 2, 2, 1435, 1436, 7, 78, 2, 2, 1436, 1437, 7, 81, 2, 2, 1437, 1438, 7, 67, 2, 2, 1438, 1439, 7, 86, 2, 2, 1439, 198, 3, 2, 2, 2, 1440, 1441, 7, 85, 2, 2, 1441, 1442, 7, 86, 2, 2, 1442, 1443, 7, 84, 2, 2, 1443, 1444, 7, 75, 2, 2, 1444, 1445, 7, 80, 2, 2, 1445, 1446, 7, 73, 2, 2, 1446, 200, 3, 2, 2, 2, 1447, 1448, 7, 68, 2, 2, 1448, 1449, 7, 81, 2, 2, 1449, 1450, 7, 81, 2, 2, 1450, 1451, 7, 78, 2, 2, 1451, 1452, 7, 71, 2, 2, 1452, 1453, 7, 67, 2, 2, 1453, 1454, 7, 80, 2, 2, 1454, 202, 3, 2, 2, 2, 1455, 1456, 7, 126, 2, 2, 1456, 204, 3, 2, 2, 2, 1457, 1458, 7, 46, 2, 2, 1458, 206, 3, 2, 2, 2, 1459, 1460, 7, 48, 2, 2, 1460, 208, 3, 2, 2, 2, 1461, 1462, 7, 63, 2, 2, 1462, 210, 3, 2, 2, 2, 1463, 1464, 7, 64, 2, 2, 1464, 212, 3, 2, 2, 2, 1465, 1466, 7, 62, 2, 2, 1466, 214, 3, 2, 2, 2, 1467, 1468, 7, 62, 2, 2, 1468, 1469, 7, 63, 2, 2, 1469, 216, 3, 2, 2, 2, 1470, 1471, 7, 64, 2, 2, 1471, 1472, 7, 63, 2, 2, 1472, 218, 3, 2, 2, 2, 1473, 1474, 7, 35, 2, 2, 1474, 1475, 7, 63, 2, 2, 1475, 220, 3, 2, 2, 2, 1476, 1477, 7, 45, 2, 2, 1477, 222, 3, 2, 2, 2, 1478, 1479, 7, 47, 2, 2, 1479, 224, 3, 2, 2, 2, 1480, 1481, 7, 44, 2, 2, 1481, 226, 3, 2, 2, 2, 1482, 1483, 7, 49, 2, 2, 1483, 228, 3, 2, 2, 2, 1484, 1485, 7, 39, 2, 2, 1485, 230, 3, 2, 2, 2, 1486, 1487, 7, 35, 2, 2, 1487, 232, 3, 2, 2, 2, 1488, 1489, 7, 60, 2, 2, 1489, 234, 3, 2, 2, 2, 1490, 1491, 7, 42, 2, 2, 1491, 236, 3, 2, 2, 2, 1492, 1493, 7, 43, 2, 2, 1493, 238, 3, 2, 2, 2, 1494, 1495, 7, 93, 2, 2, 1495, 240, 3, 2, 2, 2, 1496, 1497, 7, 95, 2, 2, 1497, 242, 3, 2, 2, 2, 1498, 1499, 7, 41, 2, 2, 1499, 244, 3, 2, 2, 2, 1500, 1501, 7, 36, 2, 2, 1501, 246, 3, 2, 2, 2, 1502, 1503, 7, 98, 2, 2, 1503, 248, 3, 2, 2, 2, 1504, 1505, 7, 128, 2, 2, 1505, 250, 3, 2, 2, 2, 1506, 1507, 7, 40, 2, 2, 1507, 252, 3, 2, 2, 2, 1508, 1509, 7, 96, 2, 2, 1509, 254, 3, 2, 2, 2, 1510, 1511, 7, 67, 2, 2, 1511, 1512, 7, 88, 2, 2, 1512, 1513, 7, 73, 2, 2, 1513, 256, 3, 2, 2, 2, 1514, 1515, 7, 69, 2, 2, 1515, 1516, 7, 81, 2, 2, 1516, 1517, 7, 87, 2, 2, 1517, 1518, 7, 80, 2, 2, 1518, 1519, 7, 86, 2, 2, 1519, 258, 3, 2, 2, 2, 1520, 1521, 7, 70, 2, 2, 1521, 1522, 7, 75, 2, 2, 1522, 1523, 7, 85, 2, 2, 1523, 1524, 7, 86, 2, 2, 1524, 1525, 7, 75, 2, 2, 1525, 1526, 7, 80, 2, 2, 1526, 1527, 7, 69, 2, 2, 1527, 1528, 7, 86, 2, 2, 1528, 1529, 7, 97, 2, 2, 1529, 1530, 7, 69, 2, 2, 1530, 1531, 7, 81, 2, 2, 1531, 1532, 7, 87, 2, 2, 1532, 1533, 7, 80, 2, 2, 1533, 1534, 7, 86, 2, 2, 1534, 260, 3, 2, 2, 2, 1535, 1536, 7, 71, 2, 2, 1536, 1537, 7, 85, 2, 2, 1537, 1538, 7, 86, 2, 2, 1538, 1539, 7, 70, 2, 2, 1539, 1540, 7, 69, 2, 2, 1540, 262, 3, 2, 2, 2, 1541, 1542, 7, 71, 2, 2, 1542, 1543, 7, 85, 2, 2, 1543, 1544, 7, 86, 2, 2, 1544, 1545, 7, 70, 2, 2, 1545, 1546, 7, 69, 2, 2, 1546, 1547, 7, 97, 2, 2, 1547, 1548, 7, 71, 2, 2, 1548, 1549, 7, 84, 2, 2, 1549, 1550, 7, 84, 2, 2, 1550, 1551, 7, 81, 2, 2, 1551, 1552, 7, 84, 2, 2, 1552, 264, 3, 2, 2, 2, 1553, 1554, 7, 79, 2, 2, 1554, 1555, 7, 67, 2, 2, 1555, 1556, 7, 90, 2, 2, 1556, 266, 3, 2, 2, 2, 1557, 1558, 7, 79, 2, 2, 1558, 1559, 7, 71, 2, 2, 1559, 1560, 7, 67, 2, 2, 1560, 1561, 7, 80, 2, 2, 1561, 268, 3, 2, 2, 2, 1562, 1563, 7, 79, 2, 2, 1563, 1564, 7, 71, 2, 2, 1564, 1565, 7, 70, 2, 2, 1565, 1566, 7, 75, 2, 2, 1566, 1567, 7, 67, 2, 2, 1567, 1568, 7, 80, 2, 2, 1568, 270, 3, 2, 2, 2, 1569, 1570, 7, 79, 2, 2, 1570, 1571, 7, 75, 2, 2, 1571, 1572, 7, 80, 2, 2, 1572, 272, 3, 2, 2, 2, 1573, 1574, 7, 79, 2, 2, 1574, 1575, 7, 81, 2, 2, 1575, 1576, 7, 70, 2, 2, 1576, 1577, 7, 71, 2, 2, 1577, 274, 3, 2, 2, 2, 1578, 1579, 7, 84, 2, 2, 1579, 1580, 7, 67, 2, 2, 1580, 1581, 7, 80, 2, 2, 1581, 1582, 7, 73, 2, 2, 1582, 1583, 7, 71, 2, 2, 1583, 276, 3, 2, 2, 2, 1584, 1585, 7, 85, 2, 2, 1585, 1586, 7, 86, 2, 2, 1586, 1587, 7, 70, 2, 2, 1587, 1588, 7, 71, 2, 2, 1588, 1589, 7, 88, 2, 2, 1589, 278, 3, 2, 2, 2, 1590, 1591, 7, 85, 2, 2, 1591, 1592, 7, 86, 2, 2, 1592, 1593, 7, 70, 2, 2, 1593, 1594, 7, 71, 2, 2, 1594, 1595, 7, 88, 2, 2, 1595, 1596, 7, 82, 2, 2, 1596, 280, 3, 2, 2, 2, 1597, 1598, 7, 85, 2, 2, 1598, 1599, 7, 87, 2, 2, 1599, 1600, 7, 79, 2, 2, 1600, 282, 3, 2, 2, 2, 1601, 1602, 7, 85, 2, 2, 1602, 1603, 7, 87, 2, 2, 1603, 1604, 7, 79, 2, 2, 1604, 1605, 7, 85, 2, 2, 1605, 1606, 7, 83, 2, 2, 1606, 284, 3, 2, 2, 2, 1607, 1608, 7, 88, 2, 2, 1608, 1609, 7, 67, 2, 2, 1609, 1610, 7, 84, 2, 2, 1610, 1611, 7, 97, 2, 2, 1611, 1612, 7, 85, 2, 2, 1612, 1613, 7, 67, 2, 2, 1613, 1614, 7, 79, 2, 2, 1614, 1615, 7, 82, 2, 2, 1615, 286, 3, 2, 2, 2, 1616, 1617, 7, 88, 2, 2, 1617, 1618, 7, 67, 2, 2, 1618, 1619, 7, 84, 2, 2, 1619, 1620, 7, 97, 2, 2, 1620, 1621, 7, 82, 2, 2, 1621, 1622, 7, 81, 2, 2, 1622, 1623, 7, 82, 2, 2, 1623, 288, 3, 2, 2, 2, 1624, 1625, 7, 85, 2, 2, 1625, 1626, 7, 86, 2, 2, 1626, 1627, 7, 70, 2, 2, 1627, 1628, 7, 70, 2, 2, 1628, 1629, 7, 71, 2, 2, 1629, 1630, 7, 88, 2, 2, 1630, 1631, 7, 97, 2, 2, 1631, 1632, 7, 85, 2, 2, 1632, 1633, 7, 67, 2, 2, 1633, 1634, 7, 79, 2, 2, 1634, 1635, 7, 82, 2, 2, 1635, 290, 3, 2, 2, 2, 1636, 1637, 7, 85, 2, 2, 1637, 1638, 7, 86, 2, 2, 1638, 1639, 7, 70, 2, 2, 1639, 1640, 7, 70, 2, 2, 1640, 1641, 7, 71, 2, 2, 1641, 1642, 7, 88, 2, 2, 1642, 1643, 7, 97, 2, 2, 1643, 1644, 7, 82, 2, 2, 1644, 1645, 7, 81, 2, 2, 1645, 1646, 7, 82, 2, 2, 1646, 292, 3, 2, 2, 2, 1647, 1648, 7, 82, 2, 2, 1648, 1649, 7, 71, 2, 2, 1649, 1650, 7, 84, 2, 2, 1650, 1651, 7, 69, 2, 2, 1651, 1652, 7, 71, 2, 2, 1652, 1653, 7, 80, 2, 2, 1653, 1654, 7, 86, 2, 2, 1654, 1655, 7, 75, 2, 2, 1655, 1656, 7, 78, 2, 2, 1656, 1657, 7, 71, 2, 2, 1657, 294, 3, 2, 2, 2, 1658, 1659, 7, 86, 2, 2, 1659, 1660, 7, 67, 2, 2, 1660, 1661, 7, 77, 2, 2, 1661, 1662, 7, 71, 2, 2, 1662, 296, 3, 2, 2, 2, 1663, 1664, 7, 72, 2, 2, 1664, 1665, 7, 75, 2, 2, 1665, 1666, 7, 84, 2, 2, 1666, 1667, 7, 85, 2, 2, 1667, 1668, 7, 86, 2, 2, 1668, 298, 3, 2, 2, 2, 1669, 1670, 7, 78, 2, 2, 1670, 1671, 7, 67, 2, 2, 1671, 1672, 7, 85, 2, 2, 1672, 1673, 7, 86, 2, 2, 1673, 300, 3, 2, 2, 2, 1674, 1675, 7, 78, 2, 2, 1675, 1676, 7, 75, 2, 2, 1676, 1677, 7, 85, 2, 2, 1677, 1678, 7, 86, 2, 2, 1678, 302, 3, 2, 2, 2, 1679, 1680, 7, 88, 2, 2, 1680, 1681, 7, 67, 2, 2, 1681, 1682, 7, 78, 2, 2, 1682, 1683, 7, 87, 2, 2, 1683, 1684, 7, 71, 2, 2, 1684, 1685, 7, 85, 2, 2, 1685, 304, 3, 2, 2, 2, 1686, 1687, 7, 71, 2, 2, 1687, 1688, 7, 67, 2, 2, 1688, 1689, 7, 84, 2, 2, 1689, 1690, 7, 78, 2, 2, 1690, 1691, 7, 75, 2, 2, 1691, 1692, 7, 71, 2, 2, 1692, 1693, 7, 85, 2, 2, 1693, 1694, 7, 86, 2, 2, 1694, 306, 3, 2, 2, 2, 1695, 1696, 7, 71, 2, 2, 1696, 1697, 7, 67, 2, 2, 1697, 1698, 7, 84, 2, 2, 1698, 1699, 7, 78, 2, 2, 1699, 1700, 7, 75, 2, 2, 1700, 1701, 7, 71, 2, 2, 1701, 1702, 7, 85, 2, 2, 1702, 1703, 7, 86, 2, 2, 1703, 1704, 7, 97, 2, 2, 1704, 1705, 7, 86, 2, 2, 1705, 1706, 7, 75, 2, 2, 1706, 1707, 7, 79, 2, 2, 1707, 1708, 7, 71, 2, 2, 1708, 308, 3, 2, 2, 2, 1709, 1710, 7, 78, 2, 2, 1710, 1711, 7, 67, 2, 2, 1711, 1712, 7, 86, 2, 2, 1712, 1713, 7, 71, 2, 2, 1713, 1714, 7, 85, 2, 2, 1714, 1715, 7, 86, 2, 2, 1715, 310, 3, 2, 2, 2, 1716, 1717, 7, 78, 2, 2, 1717, 1718, 7, 67, 2, 2, 1718, 1719, 7, 86, 2, 2, 1719, 1720, 7, 71, 2, 2, 1720, 1721, 7, 85, 2, 2, 1721, 1722, 7, 86, 2, 2, 1722, 1723, 7, 97, 2, 2, 1723, 1724, 7, 86, 2, 2, 1724, 1725, 7, 75, 2, 2, 1725, 1726, 7, 79, 2, 2, 1726, 1727, 7, 71, 2, 2, 1727, 312, 3, 2, 2, 2, 1728, 1729, 7, 82, 2, 2, 1729, 1730, 7, 71, 2, 2, 1730, 1731, 7, 84, 2, 2, 1731, 1732, 7, 97, 2, 2, 1732, 1733, 7, 70, 2, 2, 1733, 1734, 7, 67, 2, 2, 1734, 1735, 7, 91, 2, 2, 1735, 314, 3, 2, 2, 2, 1736, 1737, 7, 82, 2, 2, 1737, 1738, 7, 71, 2, 2, 1738, 1739, 7, 84, 2, 2, 1739, 1740, 7, 97, 2, 2, 1740, 1741, 7, 74, 2, 2, 1741, 1742, 7, 81, 2, 2, 1742, 1743, 7, 87, 2, 2, 1743, 1744, 7, 84, 2, 2, 1744, 316, 3, 2, 2, 2, 1745, 1746, 7, 82, 2, 2, 1746, 1747, 7, 71, 2, 2, 1747, 1748, 7, 84, 2, 2, 1748, 1749, 7, 97, 2, 2, 1749, 1750, 7, 79, 2, 2, 1750, 1751, 7, 75, 2, 2, 1751, 1752, 7, 80, 2, 2, 1752, 1753, 7, 87, 2, 2, 1753, 1754, 7, 86, 2, 2, 1754, 1755, 7, 71, 2, 2, 1755, 318, 3, 2, 2, 2, 1756, 1757, 7, 82, 2, 2, 1757, 1758, 7, 71, 2, 2, 1758, 1759, 7, 84, 2, 2, 1759, 1760, 7, 97, 2, 2, 1760, 1761, 7, 85, 2, 2, 1761, 1762, 7, 71, 2, 2, 1762, 1763, 7, 69, 2, 2, 1763, 1764, 7, 81, 2, 2, 1764, 1765, 7, 80, 2, 2, 1765, 1766, 7, 70, 2, 2, 1766, 320, 3, 2, 2, 2, 1767, 1768, 7, 84, 2, 2, 1768, 1769, 7, 67, 2, 2, 1769, 1770, 7, 86, 2, 2, 1770, 1771, 7, 71, 2, 2, 1771, 322, 3, 2, 2, 2, 1772, 1773, 7, 85, 2, 2, 1773, 1774, 7, 82, 2, 2, 1774, 1775, 7, 67, 2, 2, 1775, 1776, 7, 84, 2, 2, 1776, 1777, 7, 77, 2, 2, 1777, 1778, 7, 78, 2, 2, 1778, 1779, 7, 75, 2, 2, 1779, 1780, 7, 80, 2, 2, 1780, 1781, 7, 71, 2, 2, 1781, 324, 3, 2, 2, 2, 1782, 1783, 7, 69, 2, 2, 1783, 326, 3, 2, 2, 2, 1784, 1785, 7, 70, 2, 2, 1785, 1786, 7, 69, 2, 2, 1786, 328, 3, 2, 2, 2, 1787, 1788, 7, 67, 2, 2, 1788, 1789, 7, 68, 2, 2, 1789, 1790, 7, 85, 2, 2, 1790, 330, 3, 2, 2, 2, 1791, 1792, 7, 69, 2, 2, 1792, 1793, 7, 71, 2, 2, 1793, 1794, 7, 75, 2, 2, 1794, 1795, 7, 78, 2, 2, 1795, 332, 3, 2, 2, 2, 1796, 1797, 7, 69, 2, 2, 1797, 1798, 7, 71, 2, 2, 1798, 1799, 7, 75, 2, 2, 1799, 1800, 7, 78, 2, 2, 1800, 1801, 7, 75, 2, 2, 1801, 1802, 7, 80, 2, 2, 1802, 1803, 7, 73, 2, 2, 1803, 334, 3, 2, 2, 2, 1804, 1805, 7, 69, 2, 2, 1805, 1806, 7, 81, 2, 2, 1806, 1807, 7, 80, 2, 2, 1807, 1808, 7, 88, 2, 2, 1808, 336, 3, 2, 2, 2, 1809, 1810, 7, 69, 2, 2, 1810, 1811, 7, 84, 2, 2, 1811, 1812, 7, 69, 2, 2, 1812, 1813, 7, 53, 2, 2, 1813, 1814, 7, 52, 2, 2, 1814, 338, 3, 2, 2, 2, 1815, 1816, 7, 71, 2, 2, 1816, 340, 3, 2, 2, 2, 1817, 1818, 7, 71, 2, 2, 1818, 1819, 7, 90, 2, 2, 1819, 1820, 7, 82, 2, 2, 1820, 342, 3, 2, 2, 2, 1821, 1822, 7, 72, 2, 2, 1822, 1823, 7, 78, 2, 2, 1823, 1824, 7, 81, 2, 2, 1824, 1825, 7, 81, 2, 2, 1825, 1826, 7, 84, 2, 2, 1826, 344, 3, 2, 2, 2, 1827, 1828, 7, 78, 2, 2, 1828, 1829, 7, 80, 2, 2, 1829, 346, 3, 2, 2, 2, 1830, 1831, 7, 78, 2, 2, 1831, 1832, 7, 81, 2, 2, 1832, 1833, 7, 73, 2, 2, 1833, 348, 3, 2, 2, 2, 1834, 1835, 7, 78, 2, 2, 1835, 1836, 7, 81, 2, 2, 1836, 1837, 7, 73, 2, 2, 1837, 1838, 7, 51, 2, 2, 1838, 1839, 7, 50, 2, 2, 1839, 350, 3, 2, 2, 2, 1840, 1841, 7, 78, 2, 2, 1841, 1842, 7, 81, 2, 2, 1842, 1843, 7, 73, 2, 2, 1843, 1844, 7, 52, 2, 2, 1844, 352, 3, 2, 2, 2, 1845, 1846, 7, 79, 2, 2, 1846, 1847, 7, 81, 2, 2, 1847, 1848, 7, 70, 2, 2, 1848, 354, 3, 2, 2, 2, 1849, 1850, 7, 82, 2, 2, 1850, 1851, 7, 75, 2, 2, 1851, 356, 3, 2, 2, 2, 1852, 1853, 7, 82, 2, 2, 1853, 1854, 7, 81, 2, 2, 1854, 1855, 7, 89, 2, 2, 1855, 358, 3, 2, 2, 2, 1856, 1857, 7, 82, 2, 2, 1857, 1858, 7, 81, 2, 2, 1858, 1859, 7, 89, 2, 2, 1859, 1860, 7, 71, 2, 2, 1860, 1861, 7, 84, 2, 2, 1861, 360, 3, 2, 2, 2, 1862, 1863, 7, 84, 2, 2, 1863, 1864, 7, 67, 2, 2, 1864, 1865, 7, 80, 2, 2, 1865, 1866, 7, 70, 2, 2, 1866, 362, 3, 2, 2, 2, 1867, 1868, 7, 84, 2, 2, 1868, 1869, 7, 81, 2, 2, 1869, 1870, 7, 87, 2, 2, 1870, 1871, 7, 80, 2, 2, 1871, 1872, 7, 70, 2, 2, 1872, 364, 3, 2, 2, 2, 1873, 1874, 7, 85, 2, 2, 1874, 1875, 7, 75, 2, 2, 1875, 1876, 7, 73, 2, 2, 1876, 1877, 7, 80, 2, 2, 1877, 366, 3, 2, 2, 2, 1878, 1879, 7, 85, 2, 2, 1879, 1880, 7, 83, 2, 2, 1880, 1881, 7, 84, 2, 2, 1881, 1882, 7, 86, 2, 2, 1882, 368, 3, 2, 2, 2, 1883, 1884, 7, 86, 2, 2, 1884, 1885, 7, 84, 2, 2, 1885, 1886, 7, 87, 2, 2, 1886, 1887, 7, 80, 2, 2, 1887, 1888, 7, 69, 2, 2, 1888, 1889, 7, 67, 2, 2, 1889, 1890, 7, 86, 2, 2, 1890, 1891, 7, 71, 2, 2, 1891, 370, 3, 2, 2, 2, 1892, 1893, 7, 67, 2, 2, 1893, 1894, 7, 69, 2, 2, 1894, 1895, 7, 81, 2, 2, 1895, 1896, 7, 85, 2, 2, 1896, 372, 3, 2, 2, 2, 1897, 1898, 7, 67, 2, 2, 1898, 1899, 7, 85, 2, 2, 1899, 1900, 7, 75, 2, 2, 1900, 1901, 7, 80, 2, 2, 1901, 374, 3, 2, 2, 2, 1902, 1903, 7, 67, 2, 2, 1903, 1904, 7, 86, 2, 2, 1904, 1905, 7, 67, 2, 2, 1905, 1906, 7, 80, 2, 2, 1906, 376, 3, 2, 2, 2, 1907, 1908, 7, 67, 2, 2, 1908, 1909, 7, 86, 2, 2, 1909, 1910, 7, 67, 2, 2, 1910, 1911, 7, 80, 2, 2, 1911, 1912, 7, 52, 2, 2, 1912, 378, 3, 2, 2, 2, 1913, 1914, 7, 69, 2, 2, 1914, 1915, 7, 81, 2, 2, 1915, 1916, 7, 85, 2, 2, 1916, 380, 3, 2, 2, 2, 1917, 1918, 7, 69, 2, 2, 1918, 1919, 7, 81, 2, 2, 1919, 1920, 7, 86, 2, 2, 1920, 382, 3, 2, 2, 2, 1921, 1922, 7, 70, 2, 2, 1922, 1923, 7, 71, 2, 2, 1923, 1924, 7, 73, 2, 2, 1924, 1925, 7, 84, 2, 2, 1925, 1926, 7, 71, 2, 2, 1926, 1927, 7, 71, 2, 2, 1927, 1928, 7, 85, 2, 2, 1928, 384, 3, 2, 2, 2, 1929, 1930, 7, 84, 2, 2, 1930, 1931, 7, 67, 2, 2, 1931, 1932, 7, 70, 2, 2, 1932, 1933, 7, 75, 2, 2, 1933, 1934, 7, 67, 2, 2, 1934, 1935, 7, 80, 2, 2, 1935, 1936, 7, 85, 2, 2, 1936, 386, 3, 2, 2, 2, 1937, 1938, 7, 85, 2, 2, 1938, 1939, 7, 75, 2, 2, 1939, 1940, 7, 80, 2, 2, 1940, 388, 3, 2, 2, 2, 1941, 1942, 7, 86, 2, 2, 1942, 1943, 7, 67, 2, 2, 1943, 1944, 7, 80, 2, 2, 1944, 390, 3, 2, 2, 2, 1945, 1946, 7, 67, 2, 2, 1946, 1947, 7, 70, 2, 2, 1947, 1948, 7, 70, 2, 2, 1948, 1949, 7, 70, 2, 2, 1949, 1950, 7, 67, 2, 2, 1950, 1951, 7, 86, 2, 2, 1951, 1952, 7, 71, 2, 2, 1952, 392, 3, 2, 2, 2, 1953, 1954, 7, 69, 2, 2, 1954, 1955, 7, 87, 2, 2, 1955, 1956, 7, 84, 2, 2, 1956, 1957, 7, 70, 2, 2, 1957, 1958, 7, 67, 2, 2, 1958, 1959, 7, 86, 2, 2, 1959, 1960, 7, 71, 2, 2, 1960, 394, 3, 2, 2, 2, 1961, 1962, 7, 69, 2, 2, 1962, 1963, 7, 87, 2, 2, 1963, 1964, 7, 84, 2, 2, 1964, 1965, 7, 84, 2, 2, 1965, 1966, 7, 71, 2, 2, 1966, 1967, 7, 80, 2, 2, 1967, 1968, 7, 86, 2, 2, 1968, 1969, 7, 97, 2, 2, 1969, 1970, 7, 70, 2, 2, 1970, 1971, 7, 67, 2, 2, 1971, 1972, 7, 86, 2, 2, 1972, 1973, 7, 71, 2, 2, 1973, 396, 3, 2, 2, 2, 1974, 1975, 7, 69, 2, 2, 1975, 1976, 7, 87, 2, 2, 1976, 1977, 7, 84, 2, 2, 1977, 1978, 7, 84, 2, 2, 1978, 1979, 7, 71, 2, 2, 1979, 1980, 7, 80, 2, 2, 1980, 1981, 7, 86, 2, 2, 1981, 1982, 7, 97, 2, 2, 1982, 1983, 7, 86, 2, 2, 1983, 1984, 7, 75, 2, 2, 1984, 1985, 7, 79, 2, 2, 1985, 1986, 7, 71, 2, 2, 1986, 398, 3, 2, 2, 2, 1987, 1988, 7, 69, 2, 2, 1988, 1989, 7, 87, 2, 2, 1989, 1990, 7, 84, 2, 2, 1990, 1991, 7, 84, 2, 2, 1991, 1992, 7, 71, 2, 2, 1992, 1993, 7, 80, 2, 2, 1993, 1994, 7, 86, 2, 2, 1994, 1995, 7, 97, 2, 2, 1995, 1996, 7, 86, 2, 2, 1996, 1997, 7, 75, 2, 2, 1997, 1998, 7, 79, 2, 2, 1998, 1999, 7, 71, 2, 2, 1999, 2000, 7, 85, 2, 2, 2000, 2001, 7, 86, 2, 2, 2001, 2002, 7, 67, 2, 2, 2002, 2003, 7, 79, 2, 2, 2003, 2004, 7, 82, 2, 2, 2004, 400, 3, 2, 2, 2, 2005, 2006, 7, 69, 2, 2, 2006, 2007, 7, 87, 2, 2, 2007, 2008, 7, 84, 2, 2, 2008, 2009, 7, 86, 2, 2, 2009, 2010, 7, 75, 2, 2, 2010, 2011, 7, 79, 2, 2, 2011, 2012, 7, 71, 2, 2, 2012, 402, 3, 2, 2, 2, 2013, 2014, 7, 70, 2, 2, 2014, 2015, 7, 67, 2, 2, 2015, 2016, 7, 86, 2, 2, 2016, 2017, 7, 71, 2, 2, 2017, 404, 3, 2, 2, 2, 2018, 2019, 7, 70, 2, 2, 2019, 2020, 7, 67, 2, 2, 2020, 2021, 7, 86, 2, 2, 2021, 2022, 7, 71, 2, 2, 2022, 2023, 7, 97, 2, 2, 2023, 2024, 7, 67, 2, 2, 2024, 2025, 7, 70, 2, 2, 2025, 2026, 7, 70, 2, 2, 2026, 406, 3, 2, 2, 2, 2027, 2028, 7, 70, 2, 2, 2028, 2029, 7, 67, 2, 2, 2029, 2030, 7, 86, 2, 2, 2030, 2031, 7, 71, 2, 2, 2031, 2032, 7, 97, 2, 2, 2032, 2033, 7, 72, 2, 2, 2033, 2034, 7, 81, 2, 2, 2034, 2035, 7, 84, 2, 2, 2035, 2036, 7, 79, 2, 2, 2036, 2037, 7, 67, 2, 2, 2037, 2038, 7, 86, 2, 2, 2038, 408, 3, 2, 2, 2, 2039, 2040, 7, 70, 2, 2, 2040, 2041, 7, 67, 2, 2, 2041, 2042, 7, 86, 2, 2, 2042, 2043, 7, 71, 2, 2, 2043, 2044, 7, 97, 2, 2, 2044, 2045, 7, 85, 2, 2, 2045, 2046, 7, 87, 2, 2, 2046, 2047, 7, 68, 2, 2, 2047, 410, 3, 2, 2, 2, 2048, 2049, 7, 70, 2, 2, 2049, 2050, 7, 67, 2, 2, 2050, 2051, 7, 91, 2, 2, 2051, 2052, 7, 80, 2, 2, 2052, 2053, 7, 67, 2, 2, 2053, 2054, 7, 79, 2, 2, 2054, 2055, 7, 71, 2, 2, 2055, 412, 3, 2, 2, 2, 2056, 2057, 7, 70, 2, 2, 2057, 2058, 7, 67, 2, 2, 2058, 2059, 7, 91, 2, 2, 2059, 2060, 7, 81, 2, 2, 2060, 2061, 7, 72, 2, 2, 2061, 2062, 7, 79, 2, 2, 2062, 2063, 7, 81, 2, 2, 2063, 2064, 7, 80, 2, 2, 2064, 2065, 7, 86, 2, 2, 2065, 2066, 7, 74, 2, 2, 2066, 414, 3, 2, 2, 2, 2067, 2068, 7, 70, 2, 2, 2068, 2069, 7, 67, 2, 2, 2069, 2070, 7, 91, 2, 2, 2070, 2071, 7, 81, 2, 2, 2071, 2072, 7, 72, 2, 2, 2072, 2073, 7, 89, 2, 2, 2073, 2074, 7, 71, 2, 2, 2074, 2075, 7, 71, 2, 2, 2075, 2076, 7, 77, 2, 2, 2076, 416, 3, 2, 2, 2, 2077, 2078, 7, 70, 2, 2, 2078, 2079, 7, 67, 2, 2, 2079, 2080, 7, 91, 2, 2, 2080, 2081, 7, 81, 2, 2, 2081, 2082, 7, 72, 2, 2, 2082, 2083, 7, 91, 2, 2, 2083, 2084, 7, 71, 2, 2, 2084, 2085, 7, 67, 2, 2, 2085, 2086, 7, 84, 2, 2, 2086, 418, 3, 2, 2, 2, 2087, 2088, 7, 72, 2, 2, 2088, 2089, 7, 84, 2, 2, 2089, 2090, 7, 81, 2, 2, 2090, 2091, 7, 79, 2, 2, 2091, 2092, 7, 97, 2, 2, 2092, 2093, 7, 70, 2, 2, 2093, 2094, 7, 67, 2, 2, 2094, 2095, 7, 91, 2, 2, 2095, 2096, 7, 85, 2, 2, 2096, 420, 3, 2, 2, 2, 2097, 2098, 7, 78, 2, 2, 2098, 2099, 7, 81, 2, 2, 2099, 2100, 7, 69, 2, 2, 2100, 2101, 7, 67, 2, 2, 2101, 2102, 7, 78, 2, 2, 2102, 2103, 7, 86, 2, 2, 2103, 2104, 7, 75, 2, 2, 2104, 2105, 7, 79, 2, 2, 2105, 2106, 7, 71, 2, 2, 2106, 422, 3, 2, 2, 2, 2107, 2108, 7, 78, 2, 2, 2108, 2109, 7, 81, 2, 2, 2109, 2110, 7, 69, 2, 2, 2110, 2111, 7, 67, 2, 2, 2111, 2112, 7, 78, 2, 2, 2112, 2113, 7, 86, 2, 2, 2113, 2114, 7, 75, 2, 2, 2114, 2115, 7, 79, 2, 2, 2115, 2116, 7, 71, 2, 2, 2116, 2117, 7, 85, 2, 2, 2117, 2118, 7, 86, 2, 2, 2118, 2119, 7, 67, 2, 2, 2119, 2120, 7, 79, 2, 2, 2120, 2121, 7, 82, 2, 2, 2121, 424, 3, 2, 2, 2, 2122, 2123, 7, 72, 2, 2, 2123, 2124, 7, 84, 2, 2, 2124, 2125, 7, 81, 2, 2, 2125, 2126, 7, 79, 2, 2, 2126, 2127, 7, 97, 2, 2, 2127, 2128, 7, 87, 2, 2, 2128, 2129, 7, 80, 2, 2, 2129, 2130, 7, 75, 2, 2, 2130, 2131, 7, 90, 2, 2, 2131, 2132, 7, 86, 2, 2, 2132, 2133, 7, 75, 2, 2, 2133, 2134, 7, 79, 2, 2, 2134, 2135, 7, 71, 2, 2, 2135, 426, 3, 2, 2, 2, 2136, 2137, 7, 79, 2, 2, 2137, 2138, 7, 67, 2, 2, 2138, 2139, 7, 77, 2, 2, 2139, 2140, 7, 71, 2, 2, 2140, 2141, 7, 70, 2, 2, 2141, 2142, 7, 67, 2, 2, 2142, 2143, 7, 86, 2, 2, 2143, 2144, 7, 71, 2, 2, 2144, 428, 3, 2, 2, 2, 2145, 2146, 7, 79, 2, 2, 2146, 2147, 7, 67, 2, 2, 2147, 2148, 7, 77, 2, 2, 2148, 2149, 7, 71, 2, 2, 2149, 2150, 7, 86, 2, 2, 2150, 2151, 7, 75, 2, 2, 2151, 2152, 7, 79, 2, 2, 2152, 2153, 7, 71, 2, 2, 2153, 430, 3, 2, 2, 2, 2154, 2155, 7, 79, 2, 2, 2155, 2156, 7, 81, 2, 2, 2156, 2157, 7, 80, 2, 2, 2157, 2158, 7, 86, 2, 2, 2158, 2159, 7, 74, 2, 2, 2159, 2160, 7, 80, 2, 2, 2160, 2161, 7, 67, 2, 2, 2161, 2162, 7, 79, 2, 2, 2162, 2163, 7, 71, 2, 2, 2163, 432, 3, 2, 2, 2, 2164, 2165, 7, 80, 2, 2, 2165, 2166, 7, 81, 2, 2, 2166, 2167, 7, 89, 2, 2, 2167, 434, 3, 2, 2, 2, 2168, 2169, 7, 82, 2, 2, 2169, 2170, 7, 71, 2, 2, 2170, 2171, 7, 84, 2, 2, 2171, 2172, 7, 75, 2, 2, 2172, 2173, 7, 81, 2, 2, 2173, 2174, 7, 70, 2, 2, 2174, 2175, 7, 97, 2, 2, 2175, 2176, 7, 67, 2, 2, 2176, 2177, 7, 70, 2, 2, 2177, 2178, 7, 70, 2, 2, 2178, 436, 3, 2, 2, 2, 2179, 2180, 7, 82, 2, 2, 2180, 2181, 7, 71, 2, 2, 2181, 2182, 7, 84, 2, 2, 2182, 2183, 7, 75, 2, 2, 2183, 2184, 7, 81, 2, 2, 2184, 2185, 7, 70, 2, 2, 2185, 2186, 7, 97, 2, 2, 2186, 2187, 7, 70, 2, 2, 2187, 2188, 7, 75, 2, 2, 2188, 2189, 7, 72, 2, 2, 2189, 2190, 7, 72, 2, 2, 2190, 438, 3, 2, 2, 2, 2191, 2192, 7, 85, 2, 2, 2192, 2193, 7, 87, 2, 2, 2193, 2194, 7, 68, 2, 2, 2194, 2195, 7, 70, 2, 2, 2195, 2196, 7, 67, 2, 2, 2196, 2197, 7, 86, 2, 2, 2197, 2198, 7, 71, 2, 2, 2198, 440, 3, 2, 2, 2, 2199, 2200, 7, 85, 2, 2, 2200, 2201, 7, 91, 2, 2, 2201, 2202, 7, 85, 2, 2, 2202, 2203, 7, 70, 2, 2, 2203, 2204, 7, 67, 2, 2, 2204, 2205, 7, 86, 2, 2, 2205, 2206, 7, 71, 2, 2, 2206, 442, 3, 2, 2, 2, 2207, 2208, 7, 86, 2, 2, 2208, 2209, 7, 75, 2, 2, 2209, 2210, 7, 79, 2, 2, 2210, 2211, 7, 71, 2, 2, 2211, 444, 3, 2, 2, 2, 2212, 2213, 7, 86, 2, 2, 2213, 2214, 7, 75, 2, 2, 2214, 2215, 7, 79, 2, 2, 2215, 2216, 7, 71, 2, 2, 2216, 2217, 7, 97, 2, 2, 2217, 2218, 7, 86, 2, 2, 2218, 2219, 7, 81, 2, 2, 2219, 2220, 7, 97, 2, 2, 2220, 2221, 7, 85, 2, 2, 2221, 2222, 7, 71, 2, 2, 2222, 2223, 7, 69, 2, 2, 2223, 446, 3, 2, 2, 2, 2224, 2225, 7, 86, 2, 2, 2225, 2226, 7, 75, 2, 2, 2226, 2227, 7, 79, 2, 2, 2227, 2228, 7, 71, 2, 2, 2228, 2229, 7, 85, 2, 2, 2229, 2230, 7, 86, 2, 2, 2230, 2231, 7, 67, 2, 2, 2231, 2232, 7, 79, 2, 2, 2232, 2233, 7, 82, 2, 2, 2233, 448, 3, 2, 2, 2, 2234, 2235, 7, 86, 2, 2, 2235, 2236, 7, 81, 2, 2, 2236, 2237, 7, 97, 2, 2, 2237, 2238, 7, 70, 2, 2, 2238, 2239, 7, 67, 2, 2, 2239, 2240, 7, 91, 2, 2, 2240, 2241, 7, 85, 2, 2, 2241, 450, 3, 2, 2, 2, 2242, 2243, 7, 87, 2, 2, 2243, 2244, 7, 86, 2, 2, 2244, 2245, 7, 69, 2, 2, 2245, 2246, 7, 97, 2, 2, 2246, 2247, 7, 70, 2, 2, 2247, 2248, 7, 67, 2, 2, 2248, 2249, 7, 86, 2, 2, 2249, 2250, 7, 71, 2, 2, 2250, 452, 3, 2, 2, 2, 2251, 2252, 7, 87, 2, 2, 2252, 2253, 7, 86, 2, 2, 2253, 2254, 7, 69, 2, 2, 2254, 2255, 7, 97, 2, 2, 2255, 2256, 7, 86, 2, 2, 2256, 2257, 7, 75, 2, 2, 2257, 2258, 7, 79, 2, 2, 2258, 2259, 7, 71, 2, 2, 2259, 454, 3, 2, 2, 2, 2260, 2261, 7, 87, 2, 2, 2261, 2262, 7, 86, 2, 2, 2262, 2263, 7, 69, 2, 2, 2263, 2264, 7, 97, 2, 2, 2264, 2265, 7, 86, 2, 2, 2265, 2266, 7, 75, 2, 2, 2266, 2267, 7, 79, 2, 2, 2267, 2268, 7, 71, 2, 2, 2268, 2269, 7, 85, 2, 2, 2269, 2270, 7, 86, 2, 2, 2270, 2271, 7, 67, 2, 2, 2271, 2272, 7, 79, 2, 2, 2272, 2273, 7, 82, 2, 2, 2273, 456, 3, 2, 2, 2, 2274, 2275, 7, 87, 2, 2, 2275, 2276, 7, 80, 2, 2, 2276, 2277, 7, 75, 2, 2, 2277, 2278, 7, 90, 2, 2, 2278, 2279, 7, 97, 2, 2, 2279, 2280, 7, 86, 2, 2, 2280, 2281, 7, 75, 2, 2, 2281, 2282, 7, 79, 2, 2, 2282, 2283, 7, 71, 2, 2, 2283, 2284, 7, 85, 2, 2, 2284, 2285, 7, 86, 2, 2, 2285, 2286, 7, 67, 2, 2, 2286, 2287, 7, 79, 2, 2, 2287, 2288, 7, 82, 2, 2, 2288, 458, 3, 2, 2, 2, 2289, 2290, 7, 85, 2, 2, 2290, 2291, 7, 87, 2, 2, 2291, 2292, 7, 68, 2, 2, 2292, 2293, 7, 85, 2, 2, 2293, 2294, 7, 86, 2, 2, 2294, 2295, 7, 84, 2, 2, 2295, 460, 3, 2, 2, 2, 2296, 2297, 7, 85, 2, 2, 2297, 2298, 7, 87, 2, 2, 2298, 2299, 7, 68, 2, 2, 2299, 2300, 7, 85, 2, 2, 2300, 2301, 7, 86, 2, 2, 2301, 2302, 7, 84, 2, 2, 2302, 2303, 7, 75, 2, 2, 2303, 2304, 7, 80, 2, 2, 2304, 2305, 7, 73, 2, 2, 2305, 462, 3, 2, 2, 2, 2306, 2307, 7, 78, 2, 2, 2307, 2308, 7, 86, 2, 2, 2308, 2309, 7, 84, 2, 2, 2309, 2310, 7, 75, 2, 2, 2310, 2311, 7, 79, 2, 2, 2311, 464, 3, 2, 2, 2, 2312, 2313, 7, 84, 2, 2, 2313, 2314, 7, 86, 2, 2, 2314, 2315, 7, 84, 2, 2, 2315, 2316, 7, 75, 2, 2, 2316, 2317, 7, 79, 2, 2, 2317, 466, 3, 2, 2, 2, 2318, 2319, 7, 86, 2, 2, 2319, 2320, 7, 84, 2, 2, 2320, 2321, 7, 75, 2, 2, 2321, 2322, 7, 79, 2, 2, 2322, 468, 3, 2, 2, 2, 2323, 2324, 7, 86, 2, 2, 2324, 2325, 7, 81, 2, 2, 2325, 470, 3, 2, 2, 2, 2326, 2327, 7, 78, 2, 2, 2327, 2328, 7, 81, 2, 2, 2328, 2329, 7, 89, 2, 2, 2329, 2330, 7, 71, 2, 2, 2330, 2331, 7, 84, 2, 2, 2331, 472, 3, 2, 2, 2, 2332, 2333, 7, 87, 2, 2, 2333, 2334, 7, 82, 2, 2, 2334, 2335, 7, 82, 2, 2, 2335, 2336, 7, 71, 2, 2, 2336, 2337, 7, 84, 2, 2, 2337, 474, 3, 2, 2, 2, 2338, 2339, 7, 69, 2, 2, 2339, 2340, 7, 81, 2, 2, 2340, 2341, 7, 80, 2, 2, 2341, 2342, 7, 69, 2, 2, 2342, 2343, 7, 67, 2, 2, 2343, 2344, 7, 86, 2, 2, 2344, 476, 3, 2, 2, 2, 2345, 2346, 7, 69, 2, 2, 2346, 2347, 7, 81, 2, 2, 2347, 2348, 7, 80, 2, 2, 2348, 2349, 7, 69, 2, 2, 2349, 2350, 7, 67, 2, 2, 2350, 2351, 7, 86, 2, 2, 2351, 2352, 7, 97, 2, 2, 2352, 2353, 7, 89, 2, 2, 2353, 2354, 7, 85, 2, 2, 2354, 478, 3, 2, 2, 2, 2355, 2356, 7, 78, 2, 2, 2356, 2357, 7, 71, 2, 2, 2357, 2358, 7, 80, 2, 2, 2358, 2359, 7, 73, 2, 2, 2359, 2360, 7, 86, 2, 2, 2360, 2361, 7, 74, 2, 2, 2361, 480, 3, 2, 2, 2, 2362, 2363, 7, 85, 2, 2, 2363, 2364, 7, 86, 2, 2, 2364, 2365, 7, 84, 2, 2, 2365, 2366, 7, 69, 2, 2, 2366, 2367, 7, 79, 2, 2, 2367, 2368, 7, 82, 2, 2, 2368, 482, 3, 2, 2, 2, 2369, 2370, 7, 84, 2, 2, 2370, 2371, 7, 75, 2, 2, 2371, 2372, 7, 73, 2, 2, 2372, 2373, 7, 74, 2, 2, 2373, 2374, 7, 86, 2, 2, 2374, 484, 3, 2, 2, 2, 2375, 2376, 7, 78, 2, 2, 2376, 2377, 7, 71, 2, 2, 2377, 2378, 7, 72, 2, 2, 2378, 2379, 7, 86, 2, 2, 2379, 486, 3, 2, 2, 2, 2380, 2381, 7, 67, 2, 2, 2381, 2382, 7, 85, 2, 2, 2382, 2383, 7, 69, 2, 2, 2383, 2384, 7, 75, 2, 2, 2384, 2385, 7, 75, 2, 2, 2385, 488, 3, 2, 2, 2, 2386, 2387, 7, 78, 2, 2, 2387, 2388, 7, 81, 2, 2, 2388, 2389, 7, 69, 2, 2, 2389, 2390, 7, 67, 2, 2, 2390, 2391, 7, 86, 2, 2, 2391, 2392, 7, 71, 2, 2, 2392, 490, 3, 2, 2, 2, 2393, 2394, 7, 84, 2, 2, 2394, 2395, 7, 71, 2, 2, 2395, 2396, 7, 82, 2, 2, 2396, 2397, 7, 78, 2, 2, 2397, 2398, 7, 67, 2, 2, 2398, 2399, 7, 69, 2, 2, 2399, 2400, 7, 71, 2, 2, 2400, 492, 3, 2, 2, 2, 2401, 2402, 7, 69, 2, 2, 2402, 2403, 7, 67, 2, 2, 2403, 2404, 7, 85, 2, 2, 2404, 2405, 7, 86, 2, 2, 2405, 494, 3, 2, 2, 2, 2406, 2407, 7, 78, 2, 2, 2407, 2408, 7, 75, 2, 2, 2408, 2409, 7, 77, 2, 2, 2409, 2410, 7, 71, 2, 2, 2410, 496, 3, 2, 2, 2, 2411, 2412, 7, 75, 2, 2, 2412, 2413, 7, 85, 2, 2, 2413, 2414, 7, 80, 2, 2, 2414, 2415, 7, 87, 2, 2, 2415, 2416, 7, 78, 2, 2, 2416, 2417, 7, 78, 2, 2, 2417, 498, 3, 2, 2, 2, 2418, 2419, 7, 75, 2, 2, 2419, 2420, 7, 85, 2, 2, 2420, 2421, 7, 80, 2, 2, 2421, 2422, 7, 81, 2, 2, 2422, 2423, 7, 86, 2, 2, 2423, 2424, 7, 80, 2, 2, 2424, 2425, 7, 87, 2, 2, 2425, 2426, 7, 78, 2, 2, 2426, 2427, 7, 78, 2, 2, 2427, 500, 3, 2, 2, 2, 2428, 2429, 7, 75, 2, 2, 2429, 2430, 7, 72, 2, 2, 2430, 2431, 7, 80, 2, 2, 2431, 2432, 7, 87, 2, 2, 2432, 2433, 7, 78, 2, 2, 2433, 2434, 7, 78, 2, 2, 2434, 502, 3, 2, 2, 2, 2435, 2436, 7, 80, 2, 2, 2436, 2437, 7, 87, 2, 2, 2437, 2438, 7, 78, 2, 2, 2438, 2439, 7, 78, 2, 2, 2439, 2440, 7, 75, 2, 2, 2440, 2441, 7, 72, 2, 2, 2441, 504, 3, 2, 2, 2, 2442, 2443, 7, 75, 2, 2, 2443, 2444, 7, 72, 2, 2, 2444, 506, 3, 2, 2, 2, 2445, 2446, 7, 86, 2, 2, 2446, 2447, 7, 91, 2, 2, 2447, 2448, 7, 82, 2, 2, 2448, 2449, 7, 71, 2, 2, 2449, 2450, 7, 81, 2, 2, 2450, 2451, 7, 72, 2, 2, 2451, 508, 3, 2, 2, 2, 2452, 2453, 7, 79, 2, 2, 2453, 2454, 7, 67, 2, 2, 2454, 2455, 7, 86, 2, 2, 2455, 2456, 7, 69, 2, 2, 2456, 2457, 7, 74, 2, 2, 2457, 510, 3, 2, 2, 2, 2458, 2459, 7, 79, 2, 2, 2459, 2460, 7, 67, 2, 2, 2460, 2461, 7, 86, 2, 2, 2461, 2462, 7, 69, 2, 2, 2462, 2463, 7, 74, 2, 2, 2463, 2464, 7, 97, 2, 2, 2464, 2465, 7, 82, 2, 2, 2465, 2466, 7, 74, 2, 2, 2466, 2467, 7, 84, 2, 2, 2467, 2468, 7, 67, 2, 2, 2468, 2469, 7, 85, 2, 2, 2469, 2470, 7, 71, 2, 2, 2470, 512, 3, 2, 2, 2, 2471, 2472, 7, 79, 2, 2, 2472, 2473, 7, 67, 2, 2, 2473, 2474, 7, 86, 2, 2, 2474, 2475, 7, 69, 2, 2, 2475, 2476, 7, 74, 2, 2, 2476, 2477, 7, 97, 2, 2, 2477, 2478, 7, 82, 2, 2, 2478, 2479, 7, 74, 2, 2, 2479, 2480, 7, 84, 2, 2, 2480, 2481, 7, 67, 2, 2, 2481, 2482, 7, 85, 2, 2, 2482, 2483, 7, 71, 2, 2, 2483, 2484, 7, 97, 2, 2, 2484, 2485, 7, 82, 2, 2, 2485, 2486, 7, 84, 2, 2, 2486, 2487, 7, 71, 2, 2, 2487, 2488, 7, 72, 2, 2, 2488, 2489, 7, 75, 2, 2, 2489, 2490, 7, 90, 2, 2, 2490, 514, 3, 2, 2, 2, 2491, 2492, 7, 79, 2, 2, 2492, 2493, 7, 67, 2, 2, 2493, 2494, 7, 86, 2, 2, 2494, 2495, 7, 69, 2, 2, 2495, 2496, 7, 74, 2, 2, 2496, 2497, 7, 97, 2, 2, 2497, 2498, 7, 68, 2, 2, 2498, 2499, 7, 81, 2, 2, 2499, 2500, 7, 81, 2, 2, 2500, 2501, 7, 78, 2, 2, 2501, 2502, 7, 97, 2, 2, 2502, 2503, 7, 82, 2, 2, 2503, 2504, 7, 84, 2, 2, 2504, 2505, 7, 71, 2, 2, 2505, 2506, 7, 72, 2, 2, 2506, 2507, 7, 75, 2, 2, 2507, 2508, 7, 90, 2, 2, 2508, 516, 3, 2, 2, 2, 2509, 2510, 7, 85, 2, 2, 2510, 2511, 7, 75, 2, 2, 2511, 2512, 7, 79, 2, 2, 2512, 2513, 7, 82, 2, 2, 2513, 2514, 7, 78, 2, 2, 2514, 2515, 7, 71, 2, 2, 2515, 2516, 7, 97, 2, 2, 2516, 2517, 7, 83, 2, 2, 2517, 2518, 7, 87, 2, 2, 2518, 2519, 7, 71, 2, 2, 2519, 2520, 7, 84, 2, 2, 2520, 2521, 7, 91, 2, 2, 2521, 2522, 7, 97, 2, 2, 2522, 2523, 7, 85, 2, 2, 2523, 2524, 7, 86, 2, 2, 2524, 2525, 7, 84, 2, 2, 2525, 2526, 7, 75, 2, 2, 2526, 2527, 7, 80, 2, 2, 2527, 2528, 7, 73, 2, 2, 2528, 518, 3, 2, 2, 2, 2529, 2530, 7, 79, 2, 2, 2530, 2531, 7, 87, 2, 2, 2531, 2532, 7, 78, 2, 2, 2532, 2533, 7, 86, 2, 2, 2533, 2534, 7, 75, 2, 2, 2534, 2535, 7, 97, 2, 2, 2535, 2536, 7, 79, 2, 2, 2536, 2537, 7, 67, 2, 2, 2537, 2538, 7, 86, 2, 2, 2538, 2539, 7, 69, 2, 2, 2539, 2540, 7, 74, 2, 2, 2540, 520, 3, 2, 2, 2, 2541, 2542, 7, 83, 2, 2, 2542, 2543, 7, 87, 2, 2, 2543, 2544, 7, 71, 2, 2, 2544, 2545, 7, 84, 2, 2, 2545, 2546, 7, 91, 2, 2, 2546, 2547, 7, 97, 2, 2, 2547, 2548, 7, 85, 2, 2, 2548, 2549, 7, 86, 2, 2, 2549, 2550, 7, 84, 2, 2, 2550, 2551, 7, 75, 2, 2, 2551, 2552, 7, 80, 2, 2, 2552, 2553, 7, 73, 2, 2, 2553, 522, 3, 2, 2, 2, 2554, 2555, 7, 67, 2, 2, 2555, 2556, 7, 78, 2, 2, 2556, 2557, 7, 78, 2, 2, 2557, 2558, 7, 81, 2, 2, 2558, 2559, 7, 89, 2, 2, 2559, 2560, 7, 97, 2, 2, 2560, 2561, 7, 78, 2, 2, 2561, 2562, 7, 71, 2, 2, 2562, 2563, 7, 67, 2, 2, 2563, 2564, 7, 70, 2, 2, 2564, 2565, 7, 75, 2, 2, 2565, 2566, 7, 80, 2, 2, 2566, 2567, 7, 73, 2, 2, 2567, 2568, 7, 97, 2, 2, 2568, 2569, 7, 89, 2, 2, 2569, 2570, 7, 75, 2, 2, 2570, 2571, 7, 78, 2, 2, 2571, 2572, 7, 70, 2, 2, 2572, 2573, 7, 69, 2, 2, 2573, 2574, 7, 67, 2, 2, 2574, 2575, 7, 84, 2, 2, 2575, 2576, 7, 70, 2, 2, 2576, 524, 3, 2, 2, 2, 2577, 2578, 7, 67, 2, 2, 2578, 2579, 7, 80, 2, 2, 2579, 2580, 7, 67, 2, 2, 2580, 2581, 7, 78, 2, 2, 2581, 2582, 7, 91, 2, 2, 2582, 2583, 7, 92, 2, 2, 2583, 2584, 7, 71, 2, 2, 2584, 2585, 7, 97, 2, 2, 2585, 2586, 7, 89, 2, 2, 2586, 2587, 7, 75, 2, 2, 2587, 2588, 7, 78, 2, 2, 2588, 2589, 7, 70, 2, 2, 2589, 2590, 7, 69, 2, 2, 2590, 2591, 7, 67, 2, 2, 2591, 2592, 7, 84, 2, 2, 2592, 2593, 7, 70, 2, 2, 2593, 526, 3, 2, 2, 2, 2594, 2595, 7, 67, 2, 2, 2595, 2596, 7, 80, 2, 2, 2596, 2597, 7, 67, 2, 2, 2597, 2598, 7, 78, 2, 2, 2598, 2599, 7, 91, 2, 2, 2599, 2600, 7, 92, 2, 2, 2600, 2601, 7, 71, 2, 2, 2601, 2602, 7, 84, 2, 2, 2602, 528, 3, 2, 2, 2, 2603, 2604, 7, 67, 2, 2, 2604, 2605, 7, 87, 2, 2, 2605, 2606, 7, 86, 2, 2, 2606, 2607, 7, 81, 2, 2, 2607, 2608, 7, 97, 2, 2, 2608, 2609, 7, 73, 2, 2, 2609, 2610, 7, 71, 2, 2, 2610, 2611, 7, 80, 2, 2, 2611, 2612, 7, 71, 2, 2, 2612, 2613, 7, 84, 2, 2, 2613, 2614, 7, 67, 2, 2, 2614, 2615, 7, 86, 2, 2, 2615, 2616, 7, 71, 2, 2, 2616, 2617, 7, 97, 2, 2, 2617, 2618, 7, 85, 2, 2, 2618, 2619, 7, 91, 2, 2, 2619, 2620, 7, 80, 2, 2, 2620, 2621, 7, 81, 2, 2, 2621, 2622, 7, 80, 2, 2, 2622, 2623, 7, 91, 2, 2, 2623, 2624, 7, 79, 2, 2, 2624, 2625, 7, 85, 2, 2, 2625, 2626, 7, 97, 2, 2, 2626, 2627, 7, 82, 2, 2, 2627, 2628, 7, 74, 2, 2, 2628, 2629, 7, 84, 2, 2, 2629, 2630, 7, 67, 2, 2, 2630, 2631, 7, 85, 2, 2, 2631, 2632, 7, 71, 2, 2, 2632, 2633, 7, 97, 2, 2, 2633, 2634, 7, 83, 2, 2, 2634, 2635, 7, 87, 2, 2, 2635, 2636, 7, 71, 2, 2, 2636, 2637, 7, 84, 2, 2, 2637, 2638, 7, 91, 2, 2, 2638, 530, 3, 2, 2, 2, 2639, 2640, 7, 68, 2, 2, 2640, 2641, 7, 81, 2, 2, 2641, 2642, 7, 81, 2, 2, 2642, 2643, 7, 85, 2, 2, 2643, 2644, 7, 86, 2, 2, 2644, 532, 3, 2, 2, 2, 2645, 2646, 7, 69, 2, 2, 2646, 2647, 7, 87, 2, 2, 2647, 2648, 7, 86, 2, 2, 2648, 2649, 7, 81, 2, 2, 2649, 2650, 7, 72, 2, 2, 2650, 2651, 7, 72, 2, 2, 2651, 2652, 7, 97, 2, 2, 2652, 2653, 7, 72, 2, 2, 2653, 2654, 7, 84, 2, 2, 2654, 2655, 7, 71, 2, 2, 2655, 2656, 7, 83, 2, 2, 2656, 2657, 7, 87, 2, 2, 2657, 2658, 7, 71, 2, 2, 2658, 2659, 7, 80, 2, 2, 2659, 2660, 7, 69, 2, 2, 2660, 2661, 7, 91, 2, 2, 2661, 534, 3, 2, 2, 2, 2662, 2663, 7, 70, 2, 2, 2663, 2664, 7, 71, 2, 2, 2664, 2665, 7, 72, 2, 2, 2665, 2666, 7, 67, 2, 2, 2666, 2667, 7, 87, 2, 2, 2667, 2668, 7, 78, 2, 2, 2668, 2669, 7, 86, 2, 2, 2669, 2670, 7, 97, 2, 2, 2670, 2671, 7, 72, 2, 2, 2671, 2672, 7, 75, 2, 2, 2672, 2673, 7, 71, 2, 2, 2673, 2674, 7, 78, 2, 2, 2674, 2675, 7, 70, 2, 2, 2675, 536, 3, 2, 2, 2, 2676, 2677, 7, 70, 2, 2, 2677, 2678, 7, 71, 2, 2, 2678, 2679, 7, 72, 2, 2, 2679, 2680, 7, 67, 2, 2, 2680, 2681, 7, 87, 2, 2, 2681, 2682, 7, 78, 2, 2, 2682, 2683, 7, 86, 2, 2, 2683, 2684, 7, 97, 2, 2, 2684, 2685, 7, 81, 2, 2, 2685, 2686, 7, 82, 2, 2, 2686, 2687, 7, 71, 2, 2, 2687, 2688, 7, 84, 2, 2, 2688, 2689, 7, 67, 2, 2, 2689, 2690, 7, 86, 2, 2, 2690, 2691, 7, 81, 2, 2, 2691, 2692, 7, 84, 2, 2, 2692, 538, 3, 2, 2, 2, 2693, 2694, 7, 71, 2, 2, 2694, 2695, 7, 80, 2, 2, 2695, 2696, 7, 67, 2, 2, 2696, 2697, 7, 68, 2, 2, 2697, 2698, 7, 78, 2, 2, 2698, 2699, 7, 71, 2, 2, 2699, 2700, 7, 97, 2, 2, 2700, 2701, 7, 82, 2, 2, 2701, 2702, 7, 81, 2, 2, 2702, 2703, 7, 85, 2, 2, 2703, 2704, 7, 75, 2, 2, 2704, 2705, 7, 86, 2, 2, 2705, 2706, 7, 75, 2, 2, 2706, 2707, 7, 81, 2, 2, 2707, 2708, 7, 80, 2, 2, 2708, 2709, 7, 97, 2, 2, 2709, 2710, 7, 75, 2, 2, 2710, 2711, 7, 80, 2, 2, 2711, 2712, 7, 69, 2, 2, 2712, 2713, 7, 84, 2, 2, 2713, 2714, 7, 71, 2, 2, 2714, 2715, 7, 79, 2, 2, 2715, 2716, 7, 71, 2, 2, 2716, 2717, 7, 80, 2, 2, 2717, 2718, 7, 86, 2, 2, 2718, 2719, 7, 85, 2, 2, 2719, 540, 3, 2, 2, 2, 2720, 2721, 7, 71, 2, 2, 2721, 2722, 7, 85, 2, 2, 2722, 2723, 7, 69, 2, 2, 2723, 2724, 7, 67, 2, 2, 2724, 2725, 7, 82, 2, 2, 2725, 2726, 7, 71, 2, 2, 2726, 542, 3, 2, 2, 2, 2727, 2728, 7, 72, 2, 2, 2728, 2729, 7, 78, 2, 2, 2729, 2730, 7, 67, 2, 2, 2730, 2731, 7, 73, 2, 2, 2731, 2732, 7, 85, 2, 2, 2732, 544, 3, 2, 2, 2, 2733, 2734, 7, 72, 2, 2, 2734, 2735, 7, 87, 2, 2, 2735, 2736, 7, 92, 2, 2, 2736, 2737, 7, 92, 2, 2, 2737, 2738, 7, 91, 2, 2, 2738, 2739, 7, 97, 2, 2, 2739, 2740, 7, 79, 2, 2, 2740, 2741, 7, 67, 2, 2, 2741, 2742, 7, 90, 2, 2, 2742, 2743, 7, 97, 2, 2, 2743, 2744, 7, 71, 2, 2, 2744, 2745, 7, 90, 2, 2, 2745, 2746, 7, 82, 2, 2, 2746, 2747, 7, 67, 2, 2, 2747, 2748, 7, 80, 2, 2, 2748, 2749, 7, 85, 2, 2, 2749, 2750, 7, 75, 2, 2, 2750, 2751, 7, 81, 2, 2, 2751, 2752, 7, 80, 2, 2, 2752, 2753, 7, 85, 2, 2, 2753, 546, 3, 2, 2, 2, 2754, 2755, 7, 72, 2, 2, 2755, 2756, 7, 87, 2, 2, 2756, 2757, 7, 92, 2, 2, 2757, 2758, 7, 92, 2, 2, 2758, 2759, 7, 91, 2, 2, 2759, 2760, 7, 97, 2, 2, 2760, 2761, 7, 82, 2, 2, 2761, 2762, 7, 84, 2, 2, 2762, 2763, 7, 71, 2, 2, 2763, 2764, 7, 72, 2, 2, 2764, 2765, 7, 75, 2, 2, 2765, 2766, 7, 90, 2, 2, 2766, 2767, 7, 97, 2, 2, 2767, 2768, 7, 78, 2, 2, 2768, 2769, 7, 71, 2, 2, 2769, 2770, 7, 80, 2, 2, 2770, 2771, 7, 73, 2, 2, 2771, 2772, 7, 86, 2, 2, 2772, 2773, 7, 74, 2, 2, 2773, 548, 3, 2, 2, 2, 2774, 2775, 7, 72, 2, 2, 2775, 2776, 7, 87, 2, 2, 2776, 2777, 7, 92, 2, 2, 2777, 2778, 7, 92, 2, 2, 2778, 2779, 7, 91, 2, 2, 2779, 2780, 7, 97, 2, 2, 2780, 2781, 7, 86, 2, 2, 2781, 2782, 7, 84, 2, 2, 2782, 2783, 7, 67, 2, 2, 2783, 2784, 7, 80, 2, 2, 2784, 2785, 7, 85, 2, 2, 2785, 2786, 7, 82, 2, 2, 2786, 2787, 7, 81, 2, 2, 2787, 2788, 7, 85, 2, 2, 2788, 2789, 7, 75, 2, 2, 2789, 2790, 7, 86, 2, 2, 2790, 2791, 7, 75, 2, 2, 2791, 2792, 7, 81, 2, 2, 2792, 2793, 7, 80, 2, 2, 2793, 2794, 7, 85, 2, 2, 2794, 550, 3, 2, 2, 2, 2795, 2796, 7, 72, 2, 2, 2796, 2797, 7, 87, 2, 2, 2797, 2798, 7, 92, 2, 2, 2798, 2799, 7, 92, 2, 2, 2799, 2800, 7, 91, 2, 2, 2800, 2801, 7, 97, 2, 2, 2801, 2802, 7, 84, 2, 2, 2802, 2803, 7, 71, 2, 2, 2803, 2804, 7, 89, 2, 2, 2804, 2805, 7, 84, 2, 2, 2805, 2806, 7, 75, 2, 2, 2806, 2807, 7, 86, 2, 2, 2807, 2808, 7, 71, 2, 2, 2808, 552, 3, 2, 2, 2, 2809, 2810, 7, 72, 2, 2, 2810, 2811, 7, 87, 2, 2, 2811, 2812, 7, 92, 2, 2, 2812, 2813, 7, 92, 2, 2, 2813, 2814, 7, 75, 2, 2, 2814, 2815, 7, 80, 2, 2, 2815, 2816, 7, 71, 2, 2, 2816, 2817, 7, 85, 2, 2, 2817, 2818, 7, 85, 2, 2, 2818, 554, 3, 2, 2, 2, 2819, 2820, 7, 78, 2, 2, 2820, 2821, 7, 71, 2, 2, 2821, 2822, 7, 80, 2, 2, 2822, 2823, 7, 75, 2, 2, 2823, 2824, 7, 71, 2, 2, 2824, 2825, 7, 80, 2, 2, 2825, 2826, 7, 86, 2, 2, 2826, 556, 3, 2, 2, 2, 2827, 2828, 7, 78, 2, 2, 2828, 2829, 7, 81, 2, 2, 2829, 2830, 7, 89, 2, 2, 2830, 2831, 7, 97, 2, 2, 2831, 2832, 7, 72, 2, 2, 2832, 2833, 7, 84, 2, 2, 2833, 2834, 7, 71, 2, 2, 2834, 2835, 7, 83, 2, 2, 2835, 2836, 7, 97, 2, 2, 2836, 2837, 7, 81, 2, 2, 2837, 2838, 7, 82, 2, 2, 2838, 2839, 7, 71, 2, 2, 2839, 2840, 7, 84, 2, 2, 2840, 2841, 7, 67, 2, 2, 2841, 2842, 7, 86, 2, 2, 2842, 2843, 7, 81, 2, 2, 2843, 2844, 7, 84, 2, 2, 2844, 558, 3, 2, 2, 2, 2845, 2846, 7, 79, 2, 2, 2846, 2847, 7, 67, 2, 2, 2847, 2848, 7, 90, 2, 2, 2848, 2849, 7, 97, 2, 2, 2849, 2850, 7, 70, 2, 2, 2850, 2851, 7, 71, 2, 2, 2851, 2852, 7, 86, 2, 2, 2852, 2853, 7, 71, 2, 2, 2853, 2854, 7, 84, 2, 2, 2854, 2855, 7, 79, 2, 2, 2855, 2856, 7, 75, 2, 2, 2856, 2857, 7, 80, 2, 2, 2857, 2858, 7, 75, 2, 2, 2858, 2859, 7, 92, 2, 2, 2859, 2860, 7, 71, 2, 2, 2860, 2861, 7, 70, 2, 2, 2861, 2862, 7, 97, 2, 2, 2862, 2863, 7, 85, 2, 2, 2863, 2864, 7, 86, 2, 2, 2864, 2865, 7, 67, 2, 2, 2865, 2866, 7, 86, 2, 2, 2866, 2867, 7, 71, 2, 2, 2867, 2868, 7, 85, 2, 2, 2868, 560, 3, 2, 2, 2, 2869, 2870, 7, 79, 2, 2, 2870, 2871, 7, 67, 2, 2, 2871, 2872, 7, 90, 2, 2, 2872, 2873, 7, 97, 2, 2, 2873, 2874, 7, 71, 2, 2, 2874, 2875, 7, 90, 2, 2, 2875, 2876, 7, 82, 2, 2, 2876, 2877, 7, 67, 2, 2, 2877, 2878, 7, 80, 2, 2, 2878, 2879, 7, 85, 2, 2, 2879, 2880, 7, 75, 2, 2, 2880, 2881, 7, 81, 2, 2, 2881, 2882, 7, 80, 2, 2, 2882, 2883, 7, 85, 2, 2, 2883, 562, 3, 2, 2, 2, 2884, 2885, 7, 79, 2, 2, 2885, 2886, 7, 75, 2, 2, 2886, 2887, 7, 80, 2, 2, 2887, 2888, 7, 75, 2, 2, 2888, 2889, 7, 79, 2, 2, 2889, 2890, 7, 87, 2, 2, 2890, 2891, 7, 79, 2, 2, 2891, 2892, 7, 97, 2, 2, 2892, 2893, 7, 85, 2, 2, 2893, 2894, 7, 74, 2, 2, 2894, 2895, 7, 81, 2, 2, 2895, 2896, 7, 87, 2, 2, 2896, 2897, 7, 78, 2, 2, 2897, 2898, 7, 70, 2, 2, 2898, 2899, 7, 97, 2, 2, 2899, 2900, 7, 79, 2, 2, 2900, 2901, 7, 67, 2, 2, 2901, 2902, 7, 86, 2, 2, 2902, 2903, 7, 69, 2, 2, 2903, 2904, 7, 74, 2, 2, 2904, 564, 3, 2, 2, 2, 2905, 2906, 7, 81, 2, 2, 2906, 2907, 7, 82, 2, 2, 2907, 2908, 7, 71, 2, 2, 2908, 2909, 7, 84, 2, 2, 2909, 2910, 7, 67, 2, 2, 2910, 2911, 7, 86, 2, 2, 2911, 2912, 7, 81, 2, 2, 2912, 2913, 7, 84, 2, 2, 2913, 566, 3, 2, 2, 2, 2914, 2915, 7, 82, 2, 2, 2915, 2916, 7, 74, 2, 2, 2916, 2917, 7, 84, 2, 2, 2917, 2918, 7, 67, 2, 2, 2918, 2919, 7, 85, 2, 2, 2919, 2920, 7, 71, 2, 2, 2920, 2921, 7, 97, 2, 2, 2921, 2922, 7, 85, 2, 2, 2922, 2923, 7, 78, 2, 2, 2923, 2924, 7, 81, 2, 2, 2924, 2925, 7, 82, 2, 2, 2925, 568, 3, 2, 2, 2, 2926, 2927, 7, 82, 2, 2, 2927, 2928, 7, 84, 2, 2, 2928, 2929, 7, 71, 2, 2, 2929, 2930, 7, 72, 2, 2, 2930, 2931, 7, 75, 2, 2, 2931, 2932, 7, 90, 2, 2, 2932, 2933, 7, 97, 2, 2, 2933, 2934, 7, 78, 2, 2, 2934, 2935, 7, 71, 2, 2, 2935, 2936, 7, 80, 2, 2, 2936, 2937, 7, 73, 2, 2, 2937, 2938, 7, 86, 2, 2, 2938, 2939, 7, 74, 2, 2, 2939, 570, 3, 2, 2, 2, 2940, 2941, 7, 83, 2, 2, 2941, 2942, 7, 87, 2, 2, 2942, 2943, 7, 81, 2, 2, 2943, 2944, 7, 86, 2, 2, 2944, 2945, 7, 71, 2, 2, 2945, 2946, 7, 97, 2, 2, 2946, 2947, 7, 67, 2, 2, 2947, 2948, 7, 80, 2, 2, 2948, 2949, 7, 67, 2, 2, 2949, 2950, 7, 78, 2, 2, 2950, 2951, 7, 91, 2, 2, 2951, 2952, 7, 92, 2, 2, 2952, 2953, 7, 71, 2, 2, 2953, 2954, 7, 84, 2, 2, 2954, 572, 3, 2, 2, 2, 2955, 2956, 7, 83, 2, 2, 2956, 2957, 7, 87, 2, 2, 2957, 2958, 7, 81, 2, 2, 2958, 2959, 7, 86, 2, 2, 2959, 2960, 7, 71, 2, 2, 2960, 2961, 7, 97, 2, 2, 2961, 2962, 7, 72, 2, 2, 2962, 2963, 7, 75, 2, 2, 2963, 2964, 7, 71, 2, 2, 2964, 2965, 7, 78, 2, 2, 2965, 2966, 7, 70, 2, 2, 2966, 2967, 7, 97, 2, 2, 2967, 2968, 7, 85, 2, 2, 2968, 2969, 7, 87, 2, 2, 2969, 2970, 7, 72, 2, 2, 2970, 2971, 7, 72, 2, 2, 2971, 2972, 7, 75, 2, 2, 2972, 2973, 7, 90, 2, 2, 2973, 574, 3, 2, 2, 2, 2974, 2975, 7, 84, 2, 2, 2975, 2976, 7, 71, 2, 2, 2976, 2977, 7, 89, 2, 2, 2977, 2978, 7, 84, 2, 2, 2978, 2979, 7, 75, 2, 2, 2979, 2980, 7, 86, 2, 2, 2980, 2981, 7, 71, 2, 2, 2981, 576, 3, 2, 2, 2, 2982, 2983, 7, 85, 2, 2, 2983, 2984, 7, 78, 2, 2, 2984, 2985, 7, 81, 2, 2, 2985, 2986, 7, 82, 2, 2, 2986, 578, 3, 2, 2, 2, 2987, 2988, 7, 86, 2, 2, 2988, 2989, 7, 75, 2, 2, 2989, 2990, 7, 71, 2, 2, 2990, 2991, 7, 97, 2, 2, 2991, 2992, 7, 68, 2, 2, 2992, 2993, 7, 84, 2, 2, 2993, 2994, 7, 71, 2, 2, 2994, 2995, 7, 67, 2, 2, 2995, 2996, 7, 77, 2, 2, 2996, 2997, 7, 71, 2, 2, 2997, 2998, 7, 84, 2, 2, 2998, 580, 3, 2, 2, 2, 2999, 3000, 7, 86, 2, 2, 3000, 3001, 7, 91, 2, 2, 3001, 3002, 7, 82, 2, 2, 3002, 3003, 7, 71, 2, 2, 3003, 582, 3, 2, 2, 2, 3004, 3005, 7, 92, 2, 2, 3005, 3006, 7, 71, 2, 2, 3006, 3007, 7, 84, 2, 2, 3007, 3008, 7, 81, 2, 2, 3008, 3009, 7, 97, 2, 2, 3009, 3010, 7, 86, 2, 2, 3010, 3011, 7, 71, 2, 2, 3011, 3012, 7, 84, 2, 2, 3012, 3013, 7, 79, 2, 2, 3013, 3014, 7, 85, 2, 2, 3014, 3015, 7, 97, 2, 2, 3015, 3016, 7, 83, 2, 2, 3016, 3017, 7, 87, 2, 2, 3017, 3018, 7, 71, 2, 2, 3018, 3019, 7, 84, 2, 2, 3019, 3020, 7, 91, 2, 2, 3020, 584, 3, 2, 2, 2, 3021, 3022, 7, 85, 2, 2, 3022, 3023, 7, 82, 2, 2, 3023, 3024, 7, 67, 2, 2, 3024, 3025, 7, 80, 2, 2, 3025, 586, 3, 2, 2, 2, 3026, 3027, 7, 79, 2, 2, 3027, 3028, 7, 85, 2, 2, 3028, 588, 3, 2, 2, 2, 3029, 3030, 7, 85, 2, 2, 3030, 590, 3, 2, 2, 2, 3031, 3032, 7, 79, 2, 2, 3032, 592, 3, 2, 2, 2, 3033, 3034, 7, 74, 2, 2, 3034, 594, 3, 2, 2, 2, 3035, 3036, 7, 89, 2, 2, 3036, 596, 3, 2, 2, 2, 3037, 3038, 7, 83, 2, 2, 3038, 598, 3, 2, 2, 2, 3039, 3040, 7, 91, 2, 2, 3040, 600, 3, 2, 2, 2, 3041, 3042, 5, 609, 305, 2, 3042, 602, 3, 2, 2, 2, 3043, 3045, 5, 619, 310, 2, 3044, 3043, 3, 2, 2, 2, 3045, 3046, 3, 2, 2, 2, 3046, 3044, 3, 2, 2, 2, 3046, 3047, 3, 2, 2, 2, 3047, 604, 3, 2, 2, 2, 3048, 3050, 5, 619, 310, 2, 3049, 3048, 3, 2, 2, 2, 3050, 3051, 3, 2, 2, 2, 3051, 3049, 3, 2, 2, 2, 3051, 3052, 3, 2, 2, 2, 3052, 3054, 3, 2, 2, 2, 3053, 3049, 3, 2, 2, 2, 3053, 3054, 3, 2, 2, 2, 3054, 3055, 3, 2, 2, 2, 3055, 3057, 7, 48, 2, 2, 3056, 3058, 5, 619, 310, 2, 3057, 3056, 3, 2, 2, 2, 3058, 3059, 3, 2, 2, 2, 3059, 3057, 3, 2, 2, 2, 3059, 3060, 3, 2, 2, 2, 3060, 606, 3, 2, 2, 2, 3061, 3063, 9, 2, 2, 2, 3062, 3064, 9, 3, 2, 2, 3063, 3062, 3, 2, 2, 2, 3064, 3065, 3, 2, 2, 2, 3065, 3063, 3, 2, 2, 2, 3065, 3066, 3, 2, 2, 2, 3066, 3068, 3, 2, 2, 2, 3067, 3061, 3, 2, 2, 2, 3068, 3071, 3, 2, 2, 2, 3069, 3067, 3, 2, 2, 2, 3069, 3070, 3, 2, 2, 2, 3070, 608, 3, 2, 2, 2, 3071, 3069, 3, 2, 2, 2, 3072, 3074, 9, 4, 2, 2, 3073, 3072, 3, 2, 2, 2, 3074, 3075, 3, 2, 2, 2, 3075, 3076, 3, 2, 2, 2, 3075, 3073, 3, 2, 2, 2, 3076, 3080, 3, 2, 2, 2, 3077, 3079, 9, 5, 2, 2, 3078, 3077, 3, 2, 2, 2, 3079, 3082, 3, 2, 2, 2, 3080, 3078, 3, 2, 2, 2, 3080, 3081, 3, 2, 2, 2, 3081, 610, 3, 2, 2, 2, 3082, 3080, 3, 2, 2, 2, 3083, 3084, 5, 609, 305, 2, 3084, 3085, 5, 607, 304, 2, 3085, 612, 3, 2, 2, 2, 3086, 3094, 7, 36, 2, 2, 3087, 3088, 7, 94, 2, 2, 3088, 3093, 11, 2, 2, 2, 3089, 3090, 7, 36, 2, 2, 3090, 3093, 7, 36, 2, 2, 3091, 3093, 10, 6, 2, 2, 3092, 3087, 3, 2, 2, 2, 3092, 3089, 3, 2, 2, 2, 3092, 3091, 3, 2, 2, 2, 3093, 3096, 3, 2, 2, 2, 3094, 3092, 3, 2, 2, 2, 3094, 3095, 3, 2, 2, 2, 3095, 3097, 3, 2, 2, 2, 3096, 3094, 3, 2, 2, 2, 3097, 3098, 7, 36, 2, 2, 3098, 614, 3, 2, 2, 2, 3099, 3107, 7, 41, 2, 2, 3100, 3101, 7, 94, 2, 2, 3101, 3106, 11, 2, 2, 2, 3102, 3103, 7, 41, 2, 2, 3103, 3106, 7, 41, 2, 2, 3104, 3106, 10, 7, 2, 2, 3105, 3100, 3, 2, 2, 2, 3105, 3102, 3, 2, 2, 2, 3105, 3104, 3, 2, 2, 2, 3106, 3109, 3, 2, 2, 2, 3107, 3105, 3, 2, 2, 2, 3107, 3108, 3, 2, 2, 2, 3108, 3110, 3, 2, 2, 2, 3109, 3107, 3, 2, 2, 2, 3110, 3111, 7, 41, 2, 2, 3111, 616, 3, 2, 2, 2, 3112, 3120, 7, 98, 2, 2, 3113, 3114, 7, 94, 2, 2, 3114, 3119, 11, 2, 2, 2, 3115, 3116, 7, 98, 2, 2, 3116, 3119, 7, 98, 2, 2, 3117, 3119, 10, 8, 2, 2, 3118, 3113, 3, 2, 2, 2, 3118, 3115, 3, 2, 2, 2, 3118, 3117, 3, 2, 2, 2, 3119, 3122, 3, 2, 2, 2, 3120, 3118, 3, 2, 2, 2, 3120, 3121, 3, 2, 2, 2, 3121, 3123, 3, 2, 2, 2, 3122, 3120, 3, 2, 2, 2, 3123, 3124, 7, 98, 2, 2, 3124, 618, 3, 2, 2, 2, 3125, 3126, 9, 9, 2, 2, 3126, 620, 3, 2, 2, 2, 3127, 3128, 11, 2, 2, 2, 3128, 3129, 3, 2, 2, 2, 3129, 3130, 8, 311, 2, 2, 3130, 622, 3, 2, 2, 2, 17, 2, 3046, 3051, 3053, 3059, 3065, 3069, 3075, 3080, 3092, 3094, 3105, 3107, 3118, 3120, 3, 2, 5, 2]
\ No newline at end of file
diff --git a/common/query_manager/antlr/output/OpenSearchPPLLexer.tokens b/common/query_manager/antlr/output/OpenSearchPPLLexer.tokens
new file mode 100644
index 0000000000..303e66c7ad
--- /dev/null
+++ b/common/query_manager/antlr/output/OpenSearchPPLLexer.tokens
@@ -0,0 +1,603 @@
+SEARCH=1
+DESCRIBE=2
+SHOW=3
+FROM=4
+WHERE=5
+FIELDS=6
+RENAME=7
+STATS=8
+DEDUP=9
+SORT=10
+EVAL=11
+HEAD=12
+TOP=13
+RARE=14
+PARSE=15
+METHOD=16
+REGEX=17
+PUNCT=18
+GROK=19
+PATTERN=20
+PATTERNS=21
+NEW_FIELD=22
+KMEANS=23
+AD=24
+ML=25
+AS=26
+BY=27
+SOURCE=28
+INDEX=29
+D=30
+DESC=31
+CATALOGS=32
+SORTBY=33
+AUTO=34
+STR=35
+IP=36
+NUM=37
+KEEPEMPTY=38
+CONSECUTIVE=39
+DEDUP_SPLITVALUES=40
+PARTITIONS=41
+ALLNUM=42
+DELIM=43
+CENTROIDS=44
+ITERATIONS=45
+DISTANCE_TYPE=46
+NUMBER_OF_TREES=47
+SHINGLE_SIZE=48
+SAMPLE_SIZE=49
+OUTPUT_AFTER=50
+TIME_DECAY=51
+ANOMALY_RATE=52
+CATEGORY_FIELD=53
+TIME_FIELD=54
+TIME_ZONE=55
+TRAINING_DATA_SIZE=56
+ANOMALY_SCORE_THRESHOLD=57
+CASE=58
+IN=59
+NOT=60
+OR=61
+AND=62
+XOR=63
+TRUE=64
+FALSE=65
+REGEXP=66
+DATETIME=67
+INTERVAL=68
+MICROSECOND=69
+MILLISECOND=70
+SECOND=71
+MINUTE=72
+HOUR=73
+DAY=74
+WEEK=75
+MONTH=76
+QUARTER=77
+YEAR=78
+SECOND_MICROSECOND=79
+MINUTE_MICROSECOND=80
+MINUTE_SECOND=81
+HOUR_MICROSECOND=82
+HOUR_SECOND=83
+HOUR_MINUTE=84
+DAY_MICROSECOND=85
+DAY_SECOND=86
+DAY_MINUTE=87
+DAY_HOUR=88
+YEAR_MONTH=89
+CONVERT_TZ=90
+DATAMODEL=91
+LOOKUP=92
+SAVEDSEARCH=93
+INT=94
+INTEGER=95
+DOUBLE=96
+LONG=97
+FLOAT=98
+STRING=99
+BOOLEAN=100
+PIPE=101
+COMMA=102
+DOT=103
+EQUAL=104
+GREATER=105
+LESS=106
+NOT_GREATER=107
+NOT_LESS=108
+NOT_EQUAL=109
+PLUS=110
+MINUS=111
+STAR=112
+DIVIDE=113
+MODULE=114
+EXCLAMATION_SYMBOL=115
+COLON=116
+LT_PRTHS=117
+RT_PRTHS=118
+LT_SQR_PRTHS=119
+RT_SQR_PRTHS=120
+SINGLE_QUOTE=121
+DOUBLE_QUOTE=122
+BACKTICK=123
+BIT_NOT_OP=124
+BIT_AND_OP=125
+BIT_XOR_OP=126
+AVG=127
+COUNT=128
+DISTINCT_COUNT=129
+ESTDC=130
+ESTDC_ERROR=131
+MAX=132
+MEAN=133
+MEDIAN=134
+MIN=135
+MODE=136
+RANGE=137
+STDEV=138
+STDEVP=139
+SUM=140
+SUMSQ=141
+VAR_SAMP=142
+VAR_POP=143
+STDDEV_SAMP=144
+STDDEV_POP=145
+PERCENTILE=146
+TAKE=147
+FIRST=148
+LAST=149
+LIST=150
+VALUES=151
+EARLIEST=152
+EARLIEST_TIME=153
+LATEST=154
+LATEST_TIME=155
+PER_DAY=156
+PER_HOUR=157
+PER_MINUTE=158
+PER_SECOND=159
+RATE=160
+SPARKLINE=161
+C=162
+DC=163
+ABS=164
+CEIL=165
+CEILING=166
+CONV=167
+CRC32=168
+E=169
+EXP=170
+FLOOR=171
+LN=172
+LOG=173
+LOG10=174
+LOG2=175
+MOD=176
+PI=177
+POW=178
+POWER=179
+RAND=180
+ROUND=181
+SIGN=182
+SQRT=183
+TRUNCATE=184
+ACOS=185
+ASIN=186
+ATAN=187
+ATAN2=188
+COS=189
+COT=190
+DEGREES=191
+RADIANS=192
+SIN=193
+TAN=194
+ADDDATE=195
+CURDATE=196
+CURRENT_DATE=197
+CURRENT_TIME=198
+CURRENT_TIMESTAMP=199
+CURTIME=200
+DATE=201
+DATE_ADD=202
+DATE_FORMAT=203
+DATE_SUB=204
+DAYNAME=205
+DAYOFMONTH=206
+DAYOFWEEK=207
+DAYOFYEAR=208
+FROM_DAYS=209
+LOCALTIME=210
+LOCALTIMESTAMP=211
+FROM_UNIXTIME=212
+MAKEDATE=213
+MAKETIME=214
+MONTHNAME=215
+NOW=216
+PERIOD_ADD=217
+PERIOD_DIFF=218
+SUBDATE=219
+SYSDATE=220
+TIME=221
+TIME_TO_SEC=222
+TIMESTAMP=223
+TO_DAYS=224
+UTC_DATE=225
+UTC_TIME=226
+UTC_TIMESTAMP=227
+UNIX_TIMESTAMP=228
+SUBSTR=229
+SUBSTRING=230
+LTRIM=231
+RTRIM=232
+TRIM=233
+TO=234
+LOWER=235
+UPPER=236
+CONCAT=237
+CONCAT_WS=238
+LENGTH=239
+STRCMP=240
+RIGHT=241
+LEFT=242
+ASCII=243
+LOCATE=244
+REPLACE=245
+CAST=246
+LIKE=247
+ISNULL=248
+ISNOTNULL=249
+IFNULL=250
+NULLIF=251
+IF=252
+TYPEOF=253
+MATCH=254
+MATCH_PHRASE=255
+MATCH_PHRASE_PREFIX=256
+MATCH_BOOL_PREFIX=257
+SIMPLE_QUERY_STRING=258
+MULTI_MATCH=259
+QUERY_STRING=260
+ALLOW_LEADING_WILDCARD=261
+ANALYZE_WILDCARD=262
+ANALYZER=263
+AUTO_GENERATE_SYNONYMS_PHRASE_QUERY=264
+BOOST=265
+CUTOFF_FREQUENCY=266
+DEFAULT_FIELD=267
+DEFAULT_OPERATOR=268
+ENABLE_POSITION_INCREMENTS=269
+ESCAPE=270
+FLAGS=271
+FUZZY_MAX_EXPANSIONS=272
+FUZZY_PREFIX_LENGTH=273
+FUZZY_TRANSPOSITIONS=274
+FUZZY_REWRITE=275
+FUZZINESS=276
+LENIENT=277
+LOW_FREQ_OPERATOR=278
+MAX_DETERMINIZED_STATES=279
+MAX_EXPANSIONS=280
+MINIMUM_SHOULD_MATCH=281
+OPERATOR=282
+PHRASE_SLOP=283
+PREFIX_LENGTH=284
+QUOTE_ANALYZER=285
+QUOTE_FIELD_SUFFIX=286
+REWRITE=287
+SLOP=288
+TIE_BREAKER=289
+TYPE=290
+ZERO_TERMS_QUERY=291
+SPAN=292
+MS=293
+S=294
+M=295
+H=296
+W=297
+Q=298
+Y=299
+ID=300
+INTEGER_LITERAL=301
+DECIMAL_LITERAL=302
+ID_DATE_SUFFIX=303
+DQUOTA_STRING=304
+SQUOTA_STRING=305
+BQUOTA_STRING=306
+ERROR_RECOGNITION=307
+'SEARCH'=1
+'DESCRIBE'=2
+'SHOW'=3
+'FROM'=4
+'WHERE'=5
+'FIELDS'=6
+'RENAME'=7
+'STATS'=8
+'DEDUP'=9
+'SORT'=10
+'EVAL'=11
+'HEAD'=12
+'TOP'=13
+'RARE'=14
+'PARSE'=15
+'METHOD'=16
+'REGEX'=17
+'PUNCT'=18
+'GROK'=19
+'PATTERN'=20
+'PATTERNS'=21
+'NEW_FIELD'=22
+'KMEANS'=23
+'AD'=24
+'ML'=25
+'AS'=26
+'BY'=27
+'SOURCE'=28
+'INDEX'=29
+'D'=30
+'DESC'=31
+'CATALOGS'=32
+'SORTBY'=33
+'AUTO'=34
+'STR'=35
+'IP'=36
+'NUM'=37
+'KEEPEMPTY'=38
+'CONSECUTIVE'=39
+'DEDUP_SPLITVALUES'=40
+'PARTITIONS'=41
+'ALLNUM'=42
+'DELIM'=43
+'CENTROIDS'=44
+'ITERATIONS'=45
+'DISTANCE_TYPE'=46
+'NUMBER_OF_TREES'=47
+'SHINGLE_SIZE'=48
+'SAMPLE_SIZE'=49
+'OUTPUT_AFTER'=50
+'TIME_DECAY'=51
+'ANOMALY_RATE'=52
+'CATEGORY_FIELD'=53
+'TIME_FIELD'=54
+'TIME_ZONE'=55
+'TRAINING_DATA_SIZE'=56
+'ANOMALY_SCORE_THRESHOLD'=57
+'CASE'=58
+'IN'=59
+'NOT'=60
+'OR'=61
+'AND'=62
+'XOR'=63
+'TRUE'=64
+'FALSE'=65
+'REGEXP'=66
+'DATETIME'=67
+'INTERVAL'=68
+'MICROSECOND'=69
+'MILLISECOND'=70
+'SECOND'=71
+'MINUTE'=72
+'HOUR'=73
+'DAY'=74
+'WEEK'=75
+'MONTH'=76
+'QUARTER'=77
+'YEAR'=78
+'SECOND_MICROSECOND'=79
+'MINUTE_MICROSECOND'=80
+'MINUTE_SECOND'=81
+'HOUR_MICROSECOND'=82
+'HOUR_SECOND'=83
+'HOUR_MINUTE'=84
+'DAY_MICROSECOND'=85
+'DAY_SECOND'=86
+'DAY_MINUTE'=87
+'DAY_HOUR'=88
+'YEAR_MONTH'=89
+'CONVERT_TZ'=90
+'DATAMODEL'=91
+'LOOKUP'=92
+'SAVEDSEARCH'=93
+'INT'=94
+'INTEGER'=95
+'DOUBLE'=96
+'LONG'=97
+'FLOAT'=98
+'STRING'=99
+'BOOLEAN'=100
+'|'=101
+','=102
+'.'=103
+'='=104
+'>'=105
+'<'=106
+'+'=110
+'-'=111
+'*'=112
+'/'=113
+'%'=114
+'!'=115
+':'=116
+'('=117
+')'=118
+'['=119
+']'=120
+'\''=121
+'"'=122
+'`'=123
+'~'=124
+'&'=125
+'^'=126
+'AVG'=127
+'COUNT'=128
+'DISTINCT_COUNT'=129
+'ESTDC'=130
+'ESTDC_ERROR'=131
+'MAX'=132
+'MEAN'=133
+'MEDIAN'=134
+'MIN'=135
+'MODE'=136
+'RANGE'=137
+'STDEV'=138
+'STDEVP'=139
+'SUM'=140
+'SUMSQ'=141
+'VAR_SAMP'=142
+'VAR_POP'=143
+'STDDEV_SAMP'=144
+'STDDEV_POP'=145
+'PERCENTILE'=146
+'TAKE'=147
+'FIRST'=148
+'LAST'=149
+'LIST'=150
+'VALUES'=151
+'EARLIEST'=152
+'EARLIEST_TIME'=153
+'LATEST'=154
+'LATEST_TIME'=155
+'PER_DAY'=156
+'PER_HOUR'=157
+'PER_MINUTE'=158
+'PER_SECOND'=159
+'RATE'=160
+'SPARKLINE'=161
+'C'=162
+'DC'=163
+'ABS'=164
+'CEIL'=165
+'CEILING'=166
+'CONV'=167
+'CRC32'=168
+'E'=169
+'EXP'=170
+'FLOOR'=171
+'LN'=172
+'LOG'=173
+'LOG10'=174
+'LOG2'=175
+'MOD'=176
+'PI'=177
+'POW'=178
+'POWER'=179
+'RAND'=180
+'ROUND'=181
+'SIGN'=182
+'SQRT'=183
+'TRUNCATE'=184
+'ACOS'=185
+'ASIN'=186
+'ATAN'=187
+'ATAN2'=188
+'COS'=189
+'COT'=190
+'DEGREES'=191
+'RADIANS'=192
+'SIN'=193
+'TAN'=194
+'ADDDATE'=195
+'CURDATE'=196
+'CURRENT_DATE'=197
+'CURRENT_TIME'=198
+'CURRENT_TIMESTAMP'=199
+'CURTIME'=200
+'DATE'=201
+'DATE_ADD'=202
+'DATE_FORMAT'=203
+'DATE_SUB'=204
+'DAYNAME'=205
+'DAYOFMONTH'=206
+'DAYOFWEEK'=207
+'DAYOFYEAR'=208
+'FROM_DAYS'=209
+'LOCALTIME'=210
+'LOCALTIMESTAMP'=211
+'FROM_UNIXTIME'=212
+'MAKEDATE'=213
+'MAKETIME'=214
+'MONTHNAME'=215
+'NOW'=216
+'PERIOD_ADD'=217
+'PERIOD_DIFF'=218
+'SUBDATE'=219
+'SYSDATE'=220
+'TIME'=221
+'TIME_TO_SEC'=222
+'TIMESTAMP'=223
+'TO_DAYS'=224
+'UTC_DATE'=225
+'UTC_TIME'=226
+'UTC_TIMESTAMP'=227
+'UNIX_TIMESTAMP'=228
+'SUBSTR'=229
+'SUBSTRING'=230
+'LTRIM'=231
+'RTRIM'=232
+'TRIM'=233
+'TO'=234
+'LOWER'=235
+'UPPER'=236
+'CONCAT'=237
+'CONCAT_WS'=238
+'LENGTH'=239
+'STRCMP'=240
+'RIGHT'=241
+'LEFT'=242
+'ASCII'=243
+'LOCATE'=244
+'REPLACE'=245
+'CAST'=246
+'LIKE'=247
+'ISNULL'=248
+'ISNOTNULL'=249
+'IFNULL'=250
+'NULLIF'=251
+'IF'=252
+'TYPEOF'=253
+'MATCH'=254
+'MATCH_PHRASE'=255
+'MATCH_PHRASE_PREFIX'=256
+'MATCH_BOOL_PREFIX'=257
+'SIMPLE_QUERY_STRING'=258
+'MULTI_MATCH'=259
+'QUERY_STRING'=260
+'ALLOW_LEADING_WILDCARD'=261
+'ANALYZE_WILDCARD'=262
+'ANALYZER'=263
+'AUTO_GENERATE_SYNONYMS_PHRASE_QUERY'=264
+'BOOST'=265
+'CUTOFF_FREQUENCY'=266
+'DEFAULT_FIELD'=267
+'DEFAULT_OPERATOR'=268
+'ENABLE_POSITION_INCREMENTS'=269
+'ESCAPE'=270
+'FLAGS'=271
+'FUZZY_MAX_EXPANSIONS'=272
+'FUZZY_PREFIX_LENGTH'=273
+'FUZZY_TRANSPOSITIONS'=274
+'FUZZY_REWRITE'=275
+'FUZZINESS'=276
+'LENIENT'=277
+'LOW_FREQ_OPERATOR'=278
+'MAX_DETERMINIZED_STATES'=279
+'MAX_EXPANSIONS'=280
+'MINIMUM_SHOULD_MATCH'=281
+'OPERATOR'=282
+'PHRASE_SLOP'=283
+'PREFIX_LENGTH'=284
+'QUOTE_ANALYZER'=285
+'QUOTE_FIELD_SUFFIX'=286
+'REWRITE'=287
+'SLOP'=288
+'TIE_BREAKER'=289
+'TYPE'=290
+'ZERO_TERMS_QUERY'=291
+'SPAN'=292
+'MS'=293
+'S'=294
+'M'=295
+'H'=296
+'W'=297
+'Q'=298
+'Y'=299
diff --git a/common/query_manager/antlr/output/OpenSearchPPLLexer.ts b/common/query_manager/antlr/output/OpenSearchPPLLexer.ts
new file mode 100644
index 0000000000..834c1d59ed
--- /dev/null
+++ b/common/query_manager/antlr/output/OpenSearchPPLLexer.ts
@@ -0,0 +1,2072 @@
+// Generated from ./common/query_manager/antlr/grammar/OpenSearchPPLLexer.g4 by ANTLR 4.9.0-SNAPSHOT
+
+
+import { ATN } from "antlr4ts/atn/ATN";
+import { ATNDeserializer } from "antlr4ts/atn/ATNDeserializer";
+import { CharStream } from "antlr4ts/CharStream";
+import { Lexer } from "antlr4ts/Lexer";
+import { LexerATNSimulator } from "antlr4ts/atn/LexerATNSimulator";
+import { NotNull } from "antlr4ts/Decorators";
+import { Override } from "antlr4ts/Decorators";
+import { RuleContext } from "antlr4ts/RuleContext";
+import { Vocabulary } from "antlr4ts/Vocabulary";
+import { VocabularyImpl } from "antlr4ts/VocabularyImpl";
+
+import * as Utils from "antlr4ts/misc/Utils";
+
+
+export class OpenSearchPPLLexer extends Lexer {
+	public static readonly SEARCH = 1;
+	public static readonly DESCRIBE = 2;
+	public static readonly SHOW = 3;
+	public static readonly FROM = 4;
+	public static readonly WHERE = 5;
+	public static readonly FIELDS = 6;
+	public static readonly RENAME = 7;
+	public static readonly STATS = 8;
+	public static readonly DEDUP = 9;
+	public static readonly SORT = 10;
+	public static readonly EVAL = 11;
+	public static readonly HEAD = 12;
+	public static readonly TOP = 13;
+	public static readonly RARE = 14;
+	public static readonly PARSE = 15;
+	public static readonly METHOD = 16;
+	public static readonly REGEX = 17;
+	public static readonly PUNCT = 18;
+	public static readonly GROK = 19;
+	public static readonly PATTERN = 20;
+	public static readonly PATTERNS = 21;
+	public static readonly NEW_FIELD = 22;
+	public static readonly KMEANS = 23;
+	public static readonly AD = 24;
+	public static readonly ML = 25;
+	public static readonly AS = 26;
+	public static readonly BY = 27;
+	public static readonly SOURCE = 28;
+	public static readonly INDEX = 29;
+	public static readonly D = 30;
+	public static readonly DESC = 31;
+	public static readonly CATALOGS = 32;
+	public static readonly SORTBY = 33;
+	public static readonly AUTO = 34;
+	public static readonly STR = 35;
+	public static readonly IP = 36;
+	public static readonly NUM = 37;
+	public static readonly KEEPEMPTY = 38;
+	public static readonly CONSECUTIVE = 39;
+	public static readonly DEDUP_SPLITVALUES = 40;
+	public static readonly PARTITIONS = 41;
+	public static readonly ALLNUM = 42;
+	public static readonly DELIM = 43;
+	public static readonly CENTROIDS = 44;
+	public static readonly ITERATIONS = 45;
+	public static readonly DISTANCE_TYPE = 46;
+	public static readonly NUMBER_OF_TREES = 47;
+	public static readonly SHINGLE_SIZE = 48;
+	public static readonly SAMPLE_SIZE = 49;
+	public static readonly OUTPUT_AFTER = 50;
+	public static readonly TIME_DECAY = 51;
+	public static readonly ANOMALY_RATE = 52;
+	public static readonly CATEGORY_FIELD = 53;
+	public static readonly TIME_FIELD = 54;
+	public static readonly TIME_ZONE = 55;
+	public static readonly TRAINING_DATA_SIZE = 56;
+	public static readonly ANOMALY_SCORE_THRESHOLD = 57;
+	public static readonly CASE = 58;
+	public static readonly IN = 59;
+	public static readonly NOT = 60;
+	public static readonly OR = 61;
+	public static readonly AND = 62;
+	public static readonly XOR = 63;
+	public static readonly TRUE = 64;
+	public static readonly FALSE = 65;
+	public static readonly REGEXP = 66;
+	public static readonly DATETIME = 67;
+	public static readonly INTERVAL = 68;
+	public static readonly MICROSECOND = 69;
+	public static readonly MILLISECOND = 70;
+	public static readonly SECOND = 71;
+	public static readonly MINUTE = 72;
+	public static readonly HOUR = 73;
+	public static readonly DAY = 74;
+	public static readonly WEEK = 75;
+	public static readonly MONTH = 76;
+	public static readonly QUARTER = 77;
+	public static readonly YEAR = 78;
+	public static readonly SECOND_MICROSECOND = 79;
+	public static readonly MINUTE_MICROSECOND = 80;
+	public static readonly MINUTE_SECOND = 81;
+	public static readonly HOUR_MICROSECOND = 82;
+	public static readonly HOUR_SECOND = 83;
+	public static readonly HOUR_MINUTE = 84;
+	public static readonly DAY_MICROSECOND = 85;
+	public static readonly DAY_SECOND = 86;
+	public static readonly DAY_MINUTE = 87;
+	public static readonly DAY_HOUR = 88;
+	public static readonly YEAR_MONTH = 89;
+	public static readonly CONVERT_TZ = 90;
+	public static readonly DATAMODEL = 91;
+	public static readonly LOOKUP = 92;
+	public static readonly SAVEDSEARCH = 93;
+	public static readonly INT = 94;
+	public static readonly INTEGER = 95;
+	public static readonly DOUBLE = 96;
+	public static readonly LONG = 97;
+	public static readonly FLOAT = 98;
+	public static readonly STRING = 99;
+	public static readonly BOOLEAN = 100;
+	public static readonly PIPE = 101;
+	public static readonly COMMA = 102;
+	public static readonly DOT = 103;
+	public static readonly EQUAL = 104;
+	public static readonly GREATER = 105;
+	public static readonly LESS = 106;
+	public static readonly NOT_GREATER = 107;
+	public static readonly NOT_LESS = 108;
+	public static readonly NOT_EQUAL = 109;
+	public static readonly PLUS = 110;
+	public static readonly MINUS = 111;
+	public static readonly STAR = 112;
+	public static readonly DIVIDE = 113;
+	public static readonly MODULE = 114;
+	public static readonly EXCLAMATION_SYMBOL = 115;
+	public static readonly COLON = 116;
+	public static readonly LT_PRTHS = 117;
+	public static readonly RT_PRTHS = 118;
+	public static readonly LT_SQR_PRTHS = 119;
+	public static readonly RT_SQR_PRTHS = 120;
+	public static readonly SINGLE_QUOTE = 121;
+	public static readonly DOUBLE_QUOTE = 122;
+	public static readonly BACKTICK = 123;
+	public static readonly BIT_NOT_OP = 124;
+	public static readonly BIT_AND_OP = 125;
+	public static readonly BIT_XOR_OP = 126;
+	public static readonly AVG = 127;
+	public static readonly COUNT = 128;
+	public static readonly DISTINCT_COUNT = 129;
+	public static readonly ESTDC = 130;
+	public static readonly ESTDC_ERROR = 131;
+	public static readonly MAX = 132;
+	public static readonly MEAN = 133;
+	public static readonly MEDIAN = 134;
+	public static readonly MIN = 135;
+	public static readonly MODE = 136;
+	public static readonly RANGE = 137;
+	public static readonly STDEV = 138;
+	public static readonly STDEVP = 139;
+	public static readonly SUM = 140;
+	public static readonly SUMSQ = 141;
+	public static readonly VAR_SAMP = 142;
+	public static readonly VAR_POP = 143;
+	public static readonly STDDEV_SAMP = 144;
+	public static readonly STDDEV_POP = 145;
+	public static readonly PERCENTILE = 146;
+	public static readonly TAKE = 147;
+	public static readonly FIRST = 148;
+	public static readonly LAST = 149;
+	public static readonly LIST = 150;
+	public static readonly VALUES = 151;
+	public static readonly EARLIEST = 152;
+	public static readonly EARLIEST_TIME = 153;
+	public static readonly LATEST = 154;
+	public static readonly LATEST_TIME = 155;
+	public static readonly PER_DAY = 156;
+	public static readonly PER_HOUR = 157;
+	public static readonly PER_MINUTE = 158;
+	public static readonly PER_SECOND = 159;
+	public static readonly RATE = 160;
+	public static readonly SPARKLINE = 161;
+	public static readonly C = 162;
+	public static readonly DC = 163;
+	public static readonly ABS = 164;
+	public static readonly CEIL = 165;
+	public static readonly CEILING = 166;
+	public static readonly CONV = 167;
+	public static readonly CRC32 = 168;
+	public static readonly E = 169;
+	public static readonly EXP = 170;
+	public static readonly FLOOR = 171;
+	public static readonly LN = 172;
+	public static readonly LOG = 173;
+	public static readonly LOG10 = 174;
+	public static readonly LOG2 = 175;
+	public static readonly MOD = 176;
+	public static readonly PI = 177;
+	public static readonly POW = 178;
+	public static readonly POWER = 179;
+	public static readonly RAND = 180;
+	public static readonly ROUND = 181;
+	public static readonly SIGN = 182;
+	public static readonly SQRT = 183;
+	public static readonly TRUNCATE = 184;
+	public static readonly ACOS = 185;
+	public static readonly ASIN = 186;
+	public static readonly ATAN = 187;
+	public static readonly ATAN2 = 188;
+	public static readonly COS = 189;
+	public static readonly COT = 190;
+	public static readonly DEGREES = 191;
+	public static readonly RADIANS = 192;
+	public static readonly SIN = 193;
+	public static readonly TAN = 194;
+	public static readonly ADDDATE = 195;
+	public static readonly CURDATE = 196;
+	public static readonly CURRENT_DATE = 197;
+	public static readonly CURRENT_TIME = 198;
+	public static readonly CURRENT_TIMESTAMP = 199;
+	public static readonly CURTIME = 200;
+	public static readonly DATE = 201;
+	public static readonly DATE_ADD = 202;
+	public static readonly DATE_FORMAT = 203;
+	public static readonly DATE_SUB = 204;
+	public static readonly DAYNAME = 205;
+	public static readonly DAYOFMONTH = 206;
+	public static readonly DAYOFWEEK = 207;
+	public static readonly DAYOFYEAR = 208;
+	public static readonly FROM_DAYS = 209;
+	public static readonly LOCALTIME = 210;
+	public static readonly LOCALTIMESTAMP = 211;
+	public static readonly FROM_UNIXTIME = 212;
+	public static readonly MAKEDATE = 213;
+	public static readonly MAKETIME = 214;
+	public static readonly MONTHNAME = 215;
+	public static readonly NOW = 216;
+	public static readonly PERIOD_ADD = 217;
+	public static readonly PERIOD_DIFF = 218;
+	public static readonly SUBDATE = 219;
+	public static readonly SYSDATE = 220;
+	public static readonly TIME = 221;
+	public static readonly TIME_TO_SEC = 222;
+	public static readonly TIMESTAMP = 223;
+	public static readonly TO_DAYS = 224;
+	public static readonly UTC_DATE = 225;
+	public static readonly UTC_TIME = 226;
+	public static readonly UTC_TIMESTAMP = 227;
+	public static readonly UNIX_TIMESTAMP = 228;
+	public static readonly SUBSTR = 229;
+	public static readonly SUBSTRING = 230;
+	public static readonly LTRIM = 231;
+	public static readonly RTRIM = 232;
+	public static readonly TRIM = 233;
+	public static readonly TO = 234;
+	public static readonly LOWER = 235;
+	public static readonly UPPER = 236;
+	public static readonly CONCAT = 237;
+	public static readonly CONCAT_WS = 238;
+	public static readonly LENGTH = 239;
+	public static readonly STRCMP = 240;
+	public static readonly RIGHT = 241;
+	public static readonly LEFT = 242;
+	public static readonly ASCII = 243;
+	public static readonly LOCATE = 244;
+	public static readonly REPLACE = 245;
+	public static readonly CAST = 246;
+	public static readonly LIKE = 247;
+	public static readonly ISNULL = 248;
+	public static readonly ISNOTNULL = 249;
+	public static readonly IFNULL = 250;
+	public static readonly NULLIF = 251;
+	public static readonly IF = 252;
+	public static readonly TYPEOF = 253;
+	public static readonly MATCH = 254;
+	public static readonly MATCH_PHRASE = 255;
+	public static readonly MATCH_PHRASE_PREFIX = 256;
+	public static readonly MATCH_BOOL_PREFIX = 257;
+	public static readonly SIMPLE_QUERY_STRING = 258;
+	public static readonly MULTI_MATCH = 259;
+	public static readonly QUERY_STRING = 260;
+	public static readonly ALLOW_LEADING_WILDCARD = 261;
+	public static readonly ANALYZE_WILDCARD = 262;
+	public static readonly ANALYZER = 263;
+	public static readonly AUTO_GENERATE_SYNONYMS_PHRASE_QUERY = 264;
+	public static readonly BOOST = 265;
+	public static readonly CUTOFF_FREQUENCY = 266;
+	public static readonly DEFAULT_FIELD = 267;
+	public static readonly DEFAULT_OPERATOR = 268;
+	public static readonly ENABLE_POSITION_INCREMENTS = 269;
+	public static readonly ESCAPE = 270;
+	public static readonly FLAGS = 271;
+	public static readonly FUZZY_MAX_EXPANSIONS = 272;
+	public static readonly FUZZY_PREFIX_LENGTH = 273;
+	public static readonly FUZZY_TRANSPOSITIONS = 274;
+	public static readonly FUZZY_REWRITE = 275;
+	public static readonly FUZZINESS = 276;
+	public static readonly LENIENT = 277;
+	public static readonly LOW_FREQ_OPERATOR = 278;
+	public static readonly MAX_DETERMINIZED_STATES = 279;
+	public static readonly MAX_EXPANSIONS = 280;
+	public static readonly MINIMUM_SHOULD_MATCH = 281;
+	public static readonly OPERATOR = 282;
+	public static readonly PHRASE_SLOP = 283;
+	public static readonly PREFIX_LENGTH = 284;
+	public static readonly QUOTE_ANALYZER = 285;
+	public static readonly QUOTE_FIELD_SUFFIX = 286;
+	public static readonly REWRITE = 287;
+	public static readonly SLOP = 288;
+	public static readonly TIE_BREAKER = 289;
+	public static readonly TYPE = 290;
+	public static readonly ZERO_TERMS_QUERY = 291;
+	public static readonly SPAN = 292;
+	public static readonly MS = 293;
+	public static readonly S = 294;
+	public static readonly M = 295;
+	public static readonly H = 296;
+	public static readonly W = 297;
+	public static readonly Q = 298;
+	public static readonly Y = 299;
+	public static readonly ID = 300;
+	public static readonly INTEGER_LITERAL = 301;
+	public static readonly DECIMAL_LITERAL = 302;
+	public static readonly ID_DATE_SUFFIX = 303;
+	public static readonly DQUOTA_STRING = 304;
+	public static readonly SQUOTA_STRING = 305;
+	public static readonly BQUOTA_STRING = 306;
+	public static readonly ERROR_RECOGNITION = 307;
+	public static readonly WHITESPACE = 2;
+	public static readonly ERRORCHANNEL = 3;
+
+	// tslint:disable:no-trailing-whitespace
+	public static readonly channelNames: string[] = [
+		"DEFAULT_TOKEN_CHANNEL", "HIDDEN", "WHITESPACE", "ERRORCHANNEL",
+	];
+
+	// tslint:disable:no-trailing-whitespace
+	public static readonly modeNames: string[] = [
+		"DEFAULT_MODE",
+	];
+
+	public static readonly ruleNames: string[] = [
+		"SEARCH", "DESCRIBE", "SHOW", "FROM", "WHERE", "FIELDS", "RENAME", "STATS", 
+		"DEDUP", "SORT", "EVAL", "HEAD", "TOP", "RARE", "PARSE", "METHOD", "REGEX", 
+		"PUNCT", "GROK", "PATTERN", "PATTERNS", "NEW_FIELD", "KMEANS", "AD", "ML", 
+		"AS", "BY", "SOURCE", "INDEX", "D", "DESC", "CATALOGS", "SORTBY", "AUTO", 
+		"STR", "IP", "NUM", "KEEPEMPTY", "CONSECUTIVE", "DEDUP_SPLITVALUES", "PARTITIONS", 
+		"ALLNUM", "DELIM", "CENTROIDS", "ITERATIONS", "DISTANCE_TYPE", "NUMBER_OF_TREES", 
+		"SHINGLE_SIZE", "SAMPLE_SIZE", "OUTPUT_AFTER", "TIME_DECAY", "ANOMALY_RATE", 
+		"CATEGORY_FIELD", "TIME_FIELD", "TIME_ZONE", "TRAINING_DATA_SIZE", "ANOMALY_SCORE_THRESHOLD", 
+		"CASE", "IN", "NOT", "OR", "AND", "XOR", "TRUE", "FALSE", "REGEXP", "DATETIME", 
+		"INTERVAL", "MICROSECOND", "MILLISECOND", "SECOND", "MINUTE", "HOUR", 
+		"DAY", "WEEK", "MONTH", "QUARTER", "YEAR", "SECOND_MICROSECOND", "MINUTE_MICROSECOND", 
+		"MINUTE_SECOND", "HOUR_MICROSECOND", "HOUR_SECOND", "HOUR_MINUTE", "DAY_MICROSECOND", 
+		"DAY_SECOND", "DAY_MINUTE", "DAY_HOUR", "YEAR_MONTH", "CONVERT_TZ", "DATAMODEL", 
+		"LOOKUP", "SAVEDSEARCH", "INT", "INTEGER", "DOUBLE", "LONG", "FLOAT", 
+		"STRING", "BOOLEAN", "PIPE", "COMMA", "DOT", "EQUAL", "GREATER", "LESS", 
+		"NOT_GREATER", "NOT_LESS", "NOT_EQUAL", "PLUS", "MINUS", "STAR", "DIVIDE", 
+		"MODULE", "EXCLAMATION_SYMBOL", "COLON", "LT_PRTHS", "RT_PRTHS", "LT_SQR_PRTHS", 
+		"RT_SQR_PRTHS", "SINGLE_QUOTE", "DOUBLE_QUOTE", "BACKTICK", "BIT_NOT_OP", 
+		"BIT_AND_OP", "BIT_XOR_OP", "AVG", "COUNT", "DISTINCT_COUNT", "ESTDC", 
+		"ESTDC_ERROR", "MAX", "MEAN", "MEDIAN", "MIN", "MODE", "RANGE", "STDEV", 
+		"STDEVP", "SUM", "SUMSQ", "VAR_SAMP", "VAR_POP", "STDDEV_SAMP", "STDDEV_POP", 
+		"PERCENTILE", "TAKE", "FIRST", "LAST", "LIST", "VALUES", "EARLIEST", "EARLIEST_TIME", 
+		"LATEST", "LATEST_TIME", "PER_DAY", "PER_HOUR", "PER_MINUTE", "PER_SECOND", 
+		"RATE", "SPARKLINE", "C", "DC", "ABS", "CEIL", "CEILING", "CONV", "CRC32", 
+		"E", "EXP", "FLOOR", "LN", "LOG", "LOG10", "LOG2", "MOD", "PI", "POW", 
+		"POWER", "RAND", "ROUND", "SIGN", "SQRT", "TRUNCATE", "ACOS", "ASIN", 
+		"ATAN", "ATAN2", "COS", "COT", "DEGREES", "RADIANS", "SIN", "TAN", "ADDDATE", 
+		"CURDATE", "CURRENT_DATE", "CURRENT_TIME", "CURRENT_TIMESTAMP", "CURTIME", 
+		"DATE", "DATE_ADD", "DATE_FORMAT", "DATE_SUB", "DAYNAME", "DAYOFMONTH", 
+		"DAYOFWEEK", "DAYOFYEAR", "FROM_DAYS", "LOCALTIME", "LOCALTIMESTAMP", 
+		"FROM_UNIXTIME", "MAKEDATE", "MAKETIME", "MONTHNAME", "NOW", "PERIOD_ADD", 
+		"PERIOD_DIFF", "SUBDATE", "SYSDATE", "TIME", "TIME_TO_SEC", "TIMESTAMP", 
+		"TO_DAYS", "UTC_DATE", "UTC_TIME", "UTC_TIMESTAMP", "UNIX_TIMESTAMP", 
+		"SUBSTR", "SUBSTRING", "LTRIM", "RTRIM", "TRIM", "TO", "LOWER", "UPPER", 
+		"CONCAT", "CONCAT_WS", "LENGTH", "STRCMP", "RIGHT", "LEFT", "ASCII", "LOCATE", 
+		"REPLACE", "CAST", "LIKE", "ISNULL", "ISNOTNULL", "IFNULL", "NULLIF", 
+		"IF", "TYPEOF", "MATCH", "MATCH_PHRASE", "MATCH_PHRASE_PREFIX", "MATCH_BOOL_PREFIX", 
+		"SIMPLE_QUERY_STRING", "MULTI_MATCH", "QUERY_STRING", "ALLOW_LEADING_WILDCARD", 
+		"ANALYZE_WILDCARD", "ANALYZER", "AUTO_GENERATE_SYNONYMS_PHRASE_QUERY", 
+		"BOOST", "CUTOFF_FREQUENCY", "DEFAULT_FIELD", "DEFAULT_OPERATOR", "ENABLE_POSITION_INCREMENTS", 
+		"ESCAPE", "FLAGS", "FUZZY_MAX_EXPANSIONS", "FUZZY_PREFIX_LENGTH", "FUZZY_TRANSPOSITIONS", 
+		"FUZZY_REWRITE", "FUZZINESS", "LENIENT", "LOW_FREQ_OPERATOR", "MAX_DETERMINIZED_STATES", 
+		"MAX_EXPANSIONS", "MINIMUM_SHOULD_MATCH", "OPERATOR", "PHRASE_SLOP", "PREFIX_LENGTH", 
+		"QUOTE_ANALYZER", "QUOTE_FIELD_SUFFIX", "REWRITE", "SLOP", "TIE_BREAKER", 
+		"TYPE", "ZERO_TERMS_QUERY", "SPAN", "MS", "S", "M", "H", "W", "Q", "Y", 
+		"ID", "INTEGER_LITERAL", "DECIMAL_LITERAL", "DATE_SUFFIX", "ID_LITERAL", 
+		"ID_DATE_SUFFIX", "DQUOTA_STRING", "SQUOTA_STRING", "BQUOTA_STRING", "DEC_DIGIT", 
+		"ERROR_RECOGNITION",
+	];
+
+	private static readonly _LITERAL_NAMES: Array<string | undefined> = [
+		undefined, "'SEARCH'", "'DESCRIBE'", "'SHOW'", "'FROM'", "'WHERE'", "'FIELDS'", 
+		"'RENAME'", "'STATS'", "'DEDUP'", "'SORT'", "'EVAL'", "'HEAD'", "'TOP'", 
+		"'RARE'", "'PARSE'", "'METHOD'", "'REGEX'", "'PUNCT'", "'GROK'", "'PATTERN'", 
+		"'PATTERNS'", "'NEW_FIELD'", "'KMEANS'", "'AD'", "'ML'", "'AS'", "'BY'", 
+		"'SOURCE'", "'INDEX'", "'D'", "'DESC'", "'CATALOGS'", "'SORTBY'", "'AUTO'", 
+		"'STR'", "'IP'", "'NUM'", "'KEEPEMPTY'", "'CONSECUTIVE'", "'DEDUP_SPLITVALUES'", 
+		"'PARTITIONS'", "'ALLNUM'", "'DELIM'", "'CENTROIDS'", "'ITERATIONS'", 
+		"'DISTANCE_TYPE'", "'NUMBER_OF_TREES'", "'SHINGLE_SIZE'", "'SAMPLE_SIZE'", 
+		"'OUTPUT_AFTER'", "'TIME_DECAY'", "'ANOMALY_RATE'", "'CATEGORY_FIELD'", 
+		"'TIME_FIELD'", "'TIME_ZONE'", "'TRAINING_DATA_SIZE'", "'ANOMALY_SCORE_THRESHOLD'", 
+		"'CASE'", "'IN'", "'NOT'", "'OR'", "'AND'", "'XOR'", "'TRUE'", "'FALSE'", 
+		"'REGEXP'", "'DATETIME'", "'INTERVAL'", "'MICROSECOND'", "'MILLISECOND'", 
+		"'SECOND'", "'MINUTE'", "'HOUR'", "'DAY'", "'WEEK'", "'MONTH'", "'QUARTER'", 
+		"'YEAR'", "'SECOND_MICROSECOND'", "'MINUTE_MICROSECOND'", "'MINUTE_SECOND'", 
+		"'HOUR_MICROSECOND'", "'HOUR_SECOND'", "'HOUR_MINUTE'", "'DAY_MICROSECOND'", 
+		"'DAY_SECOND'", "'DAY_MINUTE'", "'DAY_HOUR'", "'YEAR_MONTH'", "'CONVERT_TZ'", 
+		"'DATAMODEL'", "'LOOKUP'", "'SAVEDSEARCH'", "'INT'", "'INTEGER'", "'DOUBLE'", 
+		"'LONG'", "'FLOAT'", "'STRING'", "'BOOLEAN'", "'|'", "','", "'.'", "'='", 
+		"'>'", "'<'", undefined, undefined, undefined, "'+'", "'-'", "'*'", "'/'", 
+		"'%'", "'!'", "':'", "'('", "')'", "'['", "']'", "'''", "'\"'", "'`'", 
+		"'~'", "'&'", "'^'", "'AVG'", "'COUNT'", "'DISTINCT_COUNT'", "'ESTDC'", 
+		"'ESTDC_ERROR'", "'MAX'", "'MEAN'", "'MEDIAN'", "'MIN'", "'MODE'", "'RANGE'", 
+		"'STDEV'", "'STDEVP'", "'SUM'", "'SUMSQ'", "'VAR_SAMP'", "'VAR_POP'", 
+		"'STDDEV_SAMP'", "'STDDEV_POP'", "'PERCENTILE'", "'TAKE'", "'FIRST'", 
+		"'LAST'", "'LIST'", "'VALUES'", "'EARLIEST'", "'EARLIEST_TIME'", "'LATEST'", 
+		"'LATEST_TIME'", "'PER_DAY'", "'PER_HOUR'", "'PER_MINUTE'", "'PER_SECOND'", 
+		"'RATE'", "'SPARKLINE'", "'C'", "'DC'", "'ABS'", "'CEIL'", "'CEILING'", 
+		"'CONV'", "'CRC32'", "'E'", "'EXP'", "'FLOOR'", "'LN'", "'LOG'", "'LOG10'", 
+		"'LOG2'", "'MOD'", "'PI'", "'POW'", "'POWER'", "'RAND'", "'ROUND'", "'SIGN'", 
+		"'SQRT'", "'TRUNCATE'", "'ACOS'", "'ASIN'", "'ATAN'", "'ATAN2'", "'COS'", 
+		"'COT'", "'DEGREES'", "'RADIANS'", "'SIN'", "'TAN'", "'ADDDATE'", "'CURDATE'", 
+		"'CURRENT_DATE'", "'CURRENT_TIME'", "'CURRENT_TIMESTAMP'", "'CURTIME'", 
+		"'DATE'", "'DATE_ADD'", "'DATE_FORMAT'", "'DATE_SUB'", "'DAYNAME'", "'DAYOFMONTH'", 
+		"'DAYOFWEEK'", "'DAYOFYEAR'", "'FROM_DAYS'", "'LOCALTIME'", "'LOCALTIMESTAMP'", 
+		"'FROM_UNIXTIME'", "'MAKEDATE'", "'MAKETIME'", "'MONTHNAME'", "'NOW'", 
+		"'PERIOD_ADD'", "'PERIOD_DIFF'", "'SUBDATE'", "'SYSDATE'", "'TIME'", "'TIME_TO_SEC'", 
+		"'TIMESTAMP'", "'TO_DAYS'", "'UTC_DATE'", "'UTC_TIME'", "'UTC_TIMESTAMP'", 
+		"'UNIX_TIMESTAMP'", "'SUBSTR'", "'SUBSTRING'", "'LTRIM'", "'RTRIM'", "'TRIM'", 
+		"'TO'", "'LOWER'", "'UPPER'", "'CONCAT'", "'CONCAT_WS'", "'LENGTH'", "'STRCMP'", 
+		"'RIGHT'", "'LEFT'", "'ASCII'", "'LOCATE'", "'REPLACE'", "'CAST'", "'LIKE'", 
+		"'ISNULL'", "'ISNOTNULL'", "'IFNULL'", "'NULLIF'", "'IF'", "'TYPEOF'", 
+		"'MATCH'", "'MATCH_PHRASE'", "'MATCH_PHRASE_PREFIX'", "'MATCH_BOOL_PREFIX'", 
+		"'SIMPLE_QUERY_STRING'", "'MULTI_MATCH'", "'QUERY_STRING'", "'ALLOW_LEADING_WILDCARD'", 
+		"'ANALYZE_WILDCARD'", "'ANALYZER'", "'AUTO_GENERATE_SYNONYMS_PHRASE_QUERY'", 
+		"'BOOST'", "'CUTOFF_FREQUENCY'", "'DEFAULT_FIELD'", "'DEFAULT_OPERATOR'", 
+		"'ENABLE_POSITION_INCREMENTS'", "'ESCAPE'", "'FLAGS'", "'FUZZY_MAX_EXPANSIONS'", 
+		"'FUZZY_PREFIX_LENGTH'", "'FUZZY_TRANSPOSITIONS'", "'FUZZY_REWRITE'", 
+		"'FUZZINESS'", "'LENIENT'", "'LOW_FREQ_OPERATOR'", "'MAX_DETERMINIZED_STATES'", 
+		"'MAX_EXPANSIONS'", "'MINIMUM_SHOULD_MATCH'", "'OPERATOR'", "'PHRASE_SLOP'", 
+		"'PREFIX_LENGTH'", "'QUOTE_ANALYZER'", "'QUOTE_FIELD_SUFFIX'", "'REWRITE'", 
+		"'SLOP'", "'TIE_BREAKER'", "'TYPE'", "'ZERO_TERMS_QUERY'", "'SPAN'", "'MS'", 
+		"'S'", "'M'", "'H'", "'W'", "'Q'", "'Y'",
+	];
+	private static readonly _SYMBOLIC_NAMES: Array<string | undefined> = [
+		undefined, "SEARCH", "DESCRIBE", "SHOW", "FROM", "WHERE", "FIELDS", "RENAME", 
+		"STATS", "DEDUP", "SORT", "EVAL", "HEAD", "TOP", "RARE", "PARSE", "METHOD", 
+		"REGEX", "PUNCT", "GROK", "PATTERN", "PATTERNS", "NEW_FIELD", "KMEANS", 
+		"AD", "ML", "AS", "BY", "SOURCE", "INDEX", "D", "DESC", "CATALOGS", "SORTBY", 
+		"AUTO", "STR", "IP", "NUM", "KEEPEMPTY", "CONSECUTIVE", "DEDUP_SPLITVALUES", 
+		"PARTITIONS", "ALLNUM", "DELIM", "CENTROIDS", "ITERATIONS", "DISTANCE_TYPE", 
+		"NUMBER_OF_TREES", "SHINGLE_SIZE", "SAMPLE_SIZE", "OUTPUT_AFTER", "TIME_DECAY", 
+		"ANOMALY_RATE", "CATEGORY_FIELD", "TIME_FIELD", "TIME_ZONE", "TRAINING_DATA_SIZE", 
+		"ANOMALY_SCORE_THRESHOLD", "CASE", "IN", "NOT", "OR", "AND", "XOR", "TRUE", 
+		"FALSE", "REGEXP", "DATETIME", "INTERVAL", "MICROSECOND", "MILLISECOND", 
+		"SECOND", "MINUTE", "HOUR", "DAY", "WEEK", "MONTH", "QUARTER", "YEAR", 
+		"SECOND_MICROSECOND", "MINUTE_MICROSECOND", "MINUTE_SECOND", "HOUR_MICROSECOND", 
+		"HOUR_SECOND", "HOUR_MINUTE", "DAY_MICROSECOND", "DAY_SECOND", "DAY_MINUTE", 
+		"DAY_HOUR", "YEAR_MONTH", "CONVERT_TZ", "DATAMODEL", "LOOKUP", "SAVEDSEARCH", 
+		"INT", "INTEGER", "DOUBLE", "LONG", "FLOAT", "STRING", "BOOLEAN", "PIPE", 
+		"COMMA", "DOT", "EQUAL", "GREATER", "LESS", "NOT_GREATER", "NOT_LESS", 
+		"NOT_EQUAL", "PLUS", "MINUS", "STAR", "DIVIDE", "MODULE", "EXCLAMATION_SYMBOL", 
+		"COLON", "LT_PRTHS", "RT_PRTHS", "LT_SQR_PRTHS", "RT_SQR_PRTHS", "SINGLE_QUOTE", 
+		"DOUBLE_QUOTE", "BACKTICK", "BIT_NOT_OP", "BIT_AND_OP", "BIT_XOR_OP", 
+		"AVG", "COUNT", "DISTINCT_COUNT", "ESTDC", "ESTDC_ERROR", "MAX", "MEAN", 
+		"MEDIAN", "MIN", "MODE", "RANGE", "STDEV", "STDEVP", "SUM", "SUMSQ", "VAR_SAMP", 
+		"VAR_POP", "STDDEV_SAMP", "STDDEV_POP", "PERCENTILE", "TAKE", "FIRST", 
+		"LAST", "LIST", "VALUES", "EARLIEST", "EARLIEST_TIME", "LATEST", "LATEST_TIME", 
+		"PER_DAY", "PER_HOUR", "PER_MINUTE", "PER_SECOND", "RATE", "SPARKLINE", 
+		"C", "DC", "ABS", "CEIL", "CEILING", "CONV", "CRC32", "E", "EXP", "FLOOR", 
+		"LN", "LOG", "LOG10", "LOG2", "MOD", "PI", "POW", "POWER", "RAND", "ROUND", 
+		"SIGN", "SQRT", "TRUNCATE", "ACOS", "ASIN", "ATAN", "ATAN2", "COS", "COT", 
+		"DEGREES", "RADIANS", "SIN", "TAN", "ADDDATE", "CURDATE", "CURRENT_DATE", 
+		"CURRENT_TIME", "CURRENT_TIMESTAMP", "CURTIME", "DATE", "DATE_ADD", "DATE_FORMAT", 
+		"DATE_SUB", "DAYNAME", "DAYOFMONTH", "DAYOFWEEK", "DAYOFYEAR", "FROM_DAYS", 
+		"LOCALTIME", "LOCALTIMESTAMP", "FROM_UNIXTIME", "MAKEDATE", "MAKETIME", 
+		"MONTHNAME", "NOW", "PERIOD_ADD", "PERIOD_DIFF", "SUBDATE", "SYSDATE", 
+		"TIME", "TIME_TO_SEC", "TIMESTAMP", "TO_DAYS", "UTC_DATE", "UTC_TIME", 
+		"UTC_TIMESTAMP", "UNIX_TIMESTAMP", "SUBSTR", "SUBSTRING", "LTRIM", "RTRIM", 
+		"TRIM", "TO", "LOWER", "UPPER", "CONCAT", "CONCAT_WS", "LENGTH", "STRCMP", 
+		"RIGHT", "LEFT", "ASCII", "LOCATE", "REPLACE", "CAST", "LIKE", "ISNULL", 
+		"ISNOTNULL", "IFNULL", "NULLIF", "IF", "TYPEOF", "MATCH", "MATCH_PHRASE", 
+		"MATCH_PHRASE_PREFIX", "MATCH_BOOL_PREFIX", "SIMPLE_QUERY_STRING", "MULTI_MATCH", 
+		"QUERY_STRING", "ALLOW_LEADING_WILDCARD", "ANALYZE_WILDCARD", "ANALYZER", 
+		"AUTO_GENERATE_SYNONYMS_PHRASE_QUERY", "BOOST", "CUTOFF_FREQUENCY", "DEFAULT_FIELD", 
+		"DEFAULT_OPERATOR", "ENABLE_POSITION_INCREMENTS", "ESCAPE", "FLAGS", "FUZZY_MAX_EXPANSIONS", 
+		"FUZZY_PREFIX_LENGTH", "FUZZY_TRANSPOSITIONS", "FUZZY_REWRITE", "FUZZINESS", 
+		"LENIENT", "LOW_FREQ_OPERATOR", "MAX_DETERMINIZED_STATES", "MAX_EXPANSIONS", 
+		"MINIMUM_SHOULD_MATCH", "OPERATOR", "PHRASE_SLOP", "PREFIX_LENGTH", "QUOTE_ANALYZER", 
+		"QUOTE_FIELD_SUFFIX", "REWRITE", "SLOP", "TIE_BREAKER", "TYPE", "ZERO_TERMS_QUERY", 
+		"SPAN", "MS", "S", "M", "H", "W", "Q", "Y", "ID", "INTEGER_LITERAL", "DECIMAL_LITERAL", 
+		"ID_DATE_SUFFIX", "DQUOTA_STRING", "SQUOTA_STRING", "BQUOTA_STRING", "ERROR_RECOGNITION",
+	];
+	public static readonly VOCABULARY: Vocabulary = new VocabularyImpl(OpenSearchPPLLexer._LITERAL_NAMES, OpenSearchPPLLexer._SYMBOLIC_NAMES, []);
+
+	// @Override
+	// @NotNull
+	public get vocabulary(): Vocabulary {
+		return OpenSearchPPLLexer.VOCABULARY;
+	}
+	// tslint:enable:no-trailing-whitespace
+
+
+	constructor(input: CharStream) {
+		super(input);
+		this._interp = new LexerATNSimulator(OpenSearchPPLLexer._ATN, this);
+	}
+
+	// @Override
+	public get grammarFileName(): string { return "OpenSearchPPLLexer.g4"; }
+
+	// @Override
+	public get ruleNames(): string[] { return OpenSearchPPLLexer.ruleNames; }
+
+	// @Override
+	public get serializedATN(): string { return OpenSearchPPLLexer._serializedATN; }
+
+	// @Override
+	public get channelNames(): string[] { return OpenSearchPPLLexer.channelNames; }
+
+	// @Override
+	public get modeNames(): string[] { return OpenSearchPPLLexer.modeNames; }
+
+	private static readonly _serializedATNSegments: number = 6;
+	private static readonly _serializedATNSegment0: string =
+		"\x03\uC91D\uCABA\u058D\uAFBA\u4F53\u0607\uEA8B\uC241\x02\u0135\u0C3B\b" +
+		"\x01\x04\x02\t\x02\x04\x03\t\x03\x04\x04\t\x04\x04\x05\t\x05\x04\x06\t" +
+		"\x06\x04\x07\t\x07\x04\b\t\b\x04\t\t\t\x04\n\t\n\x04\v\t\v\x04\f\t\f\x04" +
+		"\r\t\r\x04\x0E\t\x0E\x04\x0F\t\x0F\x04\x10\t\x10\x04\x11\t\x11\x04\x12" +
+		"\t\x12\x04\x13\t\x13\x04\x14\t\x14\x04\x15\t\x15\x04\x16\t\x16\x04\x17" +
+		"\t\x17\x04\x18\t\x18\x04\x19\t\x19\x04\x1A\t\x1A\x04\x1B\t\x1B\x04\x1C" +
+		"\t\x1C\x04\x1D\t\x1D\x04\x1E\t\x1E\x04\x1F\t\x1F\x04 \t \x04!\t!\x04\"" +
+		"\t\"\x04#\t#\x04$\t$\x04%\t%\x04&\t&\x04\'\t\'\x04(\t(\x04)\t)\x04*\t" +
+		"*\x04+\t+\x04,\t,\x04-\t-\x04.\t.\x04/\t/\x040\t0\x041\t1\x042\t2\x04" +
+		"3\t3\x044\t4\x045\t5\x046\t6\x047\t7\x048\t8\x049\t9\x04:\t:\x04;\t;\x04" +
+		"<\t<\x04=\t=\x04>\t>\x04?\t?\x04@\t@\x04A\tA\x04B\tB\x04C\tC\x04D\tD\x04" +
+		"E\tE\x04F\tF\x04G\tG\x04H\tH\x04I\tI\x04J\tJ\x04K\tK\x04L\tL\x04M\tM\x04" +
+		"N\tN\x04O\tO\x04P\tP\x04Q\tQ\x04R\tR\x04S\tS\x04T\tT\x04U\tU\x04V\tV\x04" +
+		"W\tW\x04X\tX\x04Y\tY\x04Z\tZ\x04[\t[\x04\\\t\\\x04]\t]\x04^\t^\x04_\t" +
+		"_\x04`\t`\x04a\ta\x04b\tb\x04c\tc\x04d\td\x04e\te\x04f\tf\x04g\tg\x04" +
+		"h\th\x04i\ti\x04j\tj\x04k\tk\x04l\tl\x04m\tm\x04n\tn\x04o\to\x04p\tp\x04" +
+		"q\tq\x04r\tr\x04s\ts\x04t\tt\x04u\tu\x04v\tv\x04w\tw\x04x\tx\x04y\ty\x04" +
+		"z\tz\x04{\t{\x04|\t|\x04}\t}\x04~\t~\x04\x7F\t\x7F\x04\x80\t\x80\x04\x81" +
+		"\t\x81\x04\x82\t\x82\x04\x83\t\x83\x04\x84\t\x84\x04\x85\t\x85\x04\x86" +
+		"\t\x86\x04\x87\t\x87\x04\x88\t\x88\x04\x89\t\x89\x04\x8A\t\x8A\x04\x8B" +
+		"\t\x8B\x04\x8C\t\x8C\x04\x8D\t\x8D\x04\x8E\t\x8E\x04\x8F\t\x8F\x04\x90" +
+		"\t\x90\x04\x91\t\x91\x04\x92\t\x92\x04\x93\t\x93\x04\x94\t\x94\x04\x95" +
+		"\t\x95\x04\x96\t\x96\x04\x97\t\x97\x04\x98\t\x98\x04\x99\t\x99\x04\x9A" +
+		"\t\x9A\x04\x9B\t\x9B\x04\x9C\t\x9C\x04\x9D\t\x9D\x04\x9E\t\x9E\x04\x9F" +
+		"\t\x9F\x04\xA0\t\xA0\x04\xA1\t\xA1\x04\xA2\t\xA2\x04\xA3\t\xA3\x04\xA4" +
+		"\t\xA4\x04\xA5\t\xA5\x04\xA6\t\xA6\x04\xA7\t\xA7\x04\xA8\t\xA8\x04\xA9" +
+		"\t\xA9\x04\xAA\t\xAA\x04\xAB\t\xAB\x04\xAC\t\xAC\x04\xAD\t\xAD\x04\xAE" +
+		"\t\xAE\x04\xAF\t\xAF\x04\xB0\t\xB0\x04\xB1\t\xB1\x04\xB2\t\xB2\x04\xB3" +
+		"\t\xB3\x04\xB4\t\xB4\x04\xB5\t\xB5\x04\xB6\t\xB6\x04\xB7\t\xB7\x04\xB8" +
+		"\t\xB8\x04\xB9\t\xB9\x04\xBA\t\xBA\x04\xBB\t\xBB\x04\xBC\t\xBC\x04\xBD" +
+		"\t\xBD\x04\xBE\t\xBE\x04\xBF\t\xBF\x04\xC0\t\xC0\x04\xC1\t\xC1\x04\xC2" +
+		"\t\xC2\x04\xC3\t\xC3\x04\xC4\t\xC4\x04\xC5\t\xC5\x04\xC6\t\xC6\x04\xC7" +
+		"\t\xC7\x04\xC8\t\xC8\x04\xC9\t\xC9\x04\xCA\t\xCA\x04\xCB\t\xCB\x04\xCC" +
+		"\t\xCC\x04\xCD\t\xCD\x04\xCE\t\xCE\x04\xCF\t\xCF\x04\xD0\t\xD0\x04\xD1" +
+		"\t\xD1\x04\xD2\t\xD2\x04\xD3\t\xD3\x04\xD4\t\xD4\x04\xD5\t\xD5\x04\xD6" +
+		"\t\xD6\x04\xD7\t\xD7\x04\xD8\t\xD8\x04\xD9\t\xD9\x04\xDA\t\xDA\x04\xDB" +
+		"\t\xDB\x04\xDC\t\xDC\x04\xDD\t\xDD\x04\xDE\t\xDE\x04\xDF\t\xDF\x04\xE0" +
+		"\t\xE0\x04\xE1\t\xE1\x04\xE2\t\xE2\x04\xE3\t\xE3\x04\xE4\t\xE4\x04\xE5" +
+		"\t\xE5\x04\xE6\t\xE6\x04\xE7\t\xE7\x04\xE8\t\xE8\x04\xE9\t\xE9\x04\xEA" +
+		"\t\xEA\x04\xEB\t\xEB\x04\xEC\t\xEC\x04\xED\t\xED\x04\xEE\t\xEE\x04\xEF" +
+		"\t\xEF\x04\xF0\t\xF0\x04\xF1\t\xF1\x04\xF2\t\xF2\x04\xF3\t\xF3\x04\xF4" +
+		"\t\xF4\x04\xF5\t\xF5\x04\xF6\t\xF6\x04\xF7\t\xF7\x04\xF8\t\xF8\x04\xF9" +
+		"\t\xF9\x04\xFA\t\xFA\x04\xFB\t\xFB\x04\xFC\t\xFC\x04\xFD\t\xFD\x04\xFE" +
+		"\t\xFE\x04\xFF\t\xFF\x04\u0100\t\u0100\x04\u0101\t\u0101\x04\u0102\t\u0102" +
+		"\x04\u0103\t\u0103\x04\u0104\t\u0104\x04\u0105\t\u0105\x04\u0106\t\u0106" +
+		"\x04\u0107\t\u0107\x04\u0108\t\u0108\x04\u0109\t\u0109\x04\u010A\t\u010A" +
+		"\x04\u010B\t\u010B\x04\u010C\t\u010C\x04\u010D\t\u010D\x04\u010E\t\u010E" +
+		"\x04\u010F\t\u010F\x04\u0110\t\u0110\x04\u0111\t\u0111\x04\u0112\t\u0112" +
+		"\x04\u0113\t\u0113\x04\u0114\t\u0114\x04\u0115\t\u0115\x04\u0116\t\u0116" +
+		"\x04\u0117\t\u0117\x04\u0118\t\u0118\x04\u0119\t\u0119\x04\u011A\t\u011A" +
+		"\x04\u011B\t\u011B\x04\u011C\t\u011C\x04\u011D\t\u011D\x04\u011E\t\u011E" +
+		"\x04\u011F\t\u011F\x04\u0120\t\u0120\x04\u0121\t\u0121\x04\u0122\t\u0122" +
+		"\x04\u0123\t\u0123\x04\u0124\t\u0124\x04\u0125\t\u0125\x04\u0126\t\u0126" +
+		"\x04\u0127\t\u0127\x04\u0128\t\u0128\x04\u0129\t\u0129\x04\u012A\t\u012A" +
+		"\x04\u012B\t\u012B\x04\u012C\t\u012C\x04\u012D\t\u012D\x04\u012E\t\u012E" +
+		"\x04\u012F\t\u012F\x04\u0130\t\u0130\x04\u0131\t\u0131\x04\u0132\t\u0132" +
+		"\x04\u0133\t\u0133\x04\u0134\t\u0134\x04\u0135\t\u0135\x04\u0136\t\u0136" +
+		"\x04\u0137\t\u0137\x03\x02\x03\x02\x03\x02\x03\x02\x03\x02\x03\x02\x03" +
+		"\x02\x03\x03\x03\x03\x03\x03\x03\x03\x03\x03\x03\x03\x03\x03\x03\x03\x03" +
+		"\x03\x03\x04\x03\x04\x03\x04\x03\x04\x03\x04\x03\x05\x03\x05\x03\x05\x03" +
+		"\x05\x03\x05\x03\x06\x03\x06\x03\x06\x03\x06\x03\x06\x03\x06\x03\x07\x03" +
+		"\x07\x03\x07\x03\x07\x03\x07\x03\x07\x03\x07\x03\b\x03\b\x03\b\x03\b\x03" +
+		"\b\x03\b\x03\b\x03\t\x03\t\x03\t\x03\t\x03\t\x03\t\x03\n\x03\n\x03\n\x03" +
+		"\n\x03\n\x03\n\x03\v\x03\v\x03\v\x03\v\x03\v\x03\f\x03\f\x03\f\x03\f\x03" +
+		"\f\x03\r\x03\r\x03\r\x03\r\x03\r\x03\x0E\x03\x0E\x03\x0E\x03\x0E\x03\x0F" +
+		"\x03\x0F\x03\x0F\x03\x0F\x03\x0F\x03\x10\x03\x10\x03\x10\x03\x10\x03\x10" +
+		"\x03\x10\x03\x11\x03\x11\x03\x11\x03\x11\x03\x11\x03\x11\x03\x11\x03\x12" +
+		"\x03\x12\x03\x12\x03\x12\x03\x12\x03\x12\x03\x13\x03\x13\x03\x13\x03\x13" +
+		"\x03\x13\x03\x13\x03\x14\x03\x14\x03\x14\x03\x14\x03\x14\x03\x15\x03\x15" +
+		"\x03\x15\x03\x15\x03\x15\x03\x15\x03\x15\x03\x15\x03\x16\x03\x16\x03\x16" +
+		"\x03\x16\x03\x16\x03\x16\x03\x16\x03\x16\x03\x16\x03\x17\x03\x17\x03\x17" +
+		"\x03\x17\x03\x17\x03\x17\x03\x17\x03\x17\x03\x17\x03\x17\x03\x18\x03\x18" +
+		"\x03\x18\x03\x18\x03\x18\x03\x18\x03\x18\x03\x19\x03\x19\x03\x19\x03\x1A" +
+		"\x03\x1A\x03\x1A\x03\x1B\x03\x1B\x03\x1B\x03\x1C\x03\x1C\x03\x1C\x03\x1D" +
+		"\x03\x1D\x03\x1D\x03\x1D\x03\x1D\x03\x1D\x03\x1D\x03\x1E\x03\x1E\x03\x1E" +
+		"\x03\x1E\x03\x1E\x03\x1E\x03\x1F\x03\x1F\x03 \x03 \x03 \x03 \x03 \x03" +
+		"!\x03!\x03!\x03!\x03!\x03!\x03!\x03!\x03!\x03\"\x03\"\x03\"\x03\"\x03" +
+		"\"\x03\"\x03\"\x03#\x03#\x03#\x03#\x03#\x03$\x03$\x03$\x03$\x03%\x03%" +
+		"\x03%\x03&\x03&\x03&\x03&\x03\'\x03\'\x03\'\x03\'\x03\'\x03\'\x03\'\x03" +
+		"\'\x03\'\x03\'\x03(\x03(\x03(\x03(\x03(\x03(\x03(\x03(\x03(\x03(\x03(" +
+		"\x03(\x03)\x03)\x03)\x03)\x03)\x03)\x03)\x03)\x03)\x03)\x03)\x03)\x03" +
+		")\x03)\x03)\x03)\x03)\x03)\x03*\x03*\x03*\x03*\x03*\x03*\x03*\x03*\x03" +
+		"*\x03*\x03*\x03+\x03+\x03+\x03+\x03+\x03+\x03+\x03,\x03,\x03,\x03,\x03" +
+		",\x03,\x03-\x03-\x03-\x03-\x03-\x03-\x03-\x03-\x03-\x03-\x03.\x03.\x03" +
+		".\x03.\x03.\x03.\x03.\x03.\x03.\x03.\x03.\x03/\x03/\x03/\x03/\x03/\x03" +
+		"/\x03/\x03/\x03/\x03/\x03/\x03/\x03/\x03/\x030\x030\x030\x030\x030\x03" +
+		"0\x030\x030\x030\x030\x030\x030\x030\x030\x030\x030\x031\x031\x031\x03" +
+		"1\x031\x031\x031\x031\x031\x031\x031\x031\x031\x032\x032\x032\x032\x03" +
+		"2\x032\x032\x032\x032\x032\x032\x032\x033\x033\x033\x033\x033\x033\x03" +
+		"3\x033\x033\x033\x033\x033\x033\x034\x034\x034\x034\x034\x034\x034\x03" +
+		"4\x034\x034\x034\x035\x035\x035\x035\x035\x035\x035\x035\x035\x035\x03" +
+		"5\x035\x035\x036\x036\x036\x036\x036\x036\x036\x036\x036\x036\x036\x03" +
+		"6\x036\x036\x036\x037\x037\x037\x037\x037\x037\x037\x037\x037\x037\x03" +
+		"7\x038\x038\x038\x038\x038\x038\x038\x038\x038\x038\x039\x039\x039\x03" +
+		"9\x039\x039\x039\x039\x039\x039\x039\x039\x039\x039\x039\x039\x039\x03" +
+		"9\x039\x03:\x03:\x03:\x03:\x03:\x03:\x03:\x03:\x03:\x03:\x03:\x03:\x03" +
+		":\x03:\x03:\x03:\x03:\x03:\x03:\x03:\x03:\x03:\x03:\x03:\x03;\x03;\x03" +
+		";\x03;\x03;\x03<\x03<\x03<\x03=\x03=\x03=\x03=\x03>\x03>\x03>\x03?\x03" +
+		"?\x03?\x03?\x03@\x03@\x03@\x03@\x03A\x03A\x03A\x03A\x03A\x03B\x03B\x03" +
+		"B\x03B\x03B\x03B\x03C\x03C\x03C\x03C\x03C\x03C\x03C\x03D\x03D\x03D\x03" +
+		"D\x03D\x03D\x03D\x03D\x03D\x03E\x03E\x03E\x03E\x03E\x03E\x03E\x03E\x03" +
+		"E\x03F\x03F\x03F\x03F\x03F\x03F\x03F\x03F\x03F\x03F\x03F\x03F\x03G\x03" +
+		"G\x03G\x03G\x03G\x03G\x03G\x03G\x03G\x03G\x03G\x03G\x03H\x03H\x03H\x03" +
+		"H\x03H\x03H\x03H\x03I\x03I\x03I\x03I\x03I\x03I\x03I\x03J\x03J\x03J\x03" +
+		"J\x03J\x03K\x03K\x03K\x03K\x03L\x03L\x03L\x03L\x03L\x03M\x03M\x03M\x03" +
+		"M\x03M\x03M\x03N\x03N\x03N\x03N\x03N\x03N\x03N\x03N\x03O\x03O\x03O\x03" +
+		"O\x03O\x03P\x03P\x03P\x03P\x03P\x03P\x03P\x03P\x03P\x03P\x03P\x03P\x03" +
+		"P\x03P\x03P\x03P\x03P\x03P\x03P\x03Q\x03Q\x03Q\x03Q\x03Q\x03Q\x03Q\x03" +
+		"Q\x03Q\x03Q\x03Q\x03Q\x03Q\x03Q\x03Q\x03Q\x03Q\x03Q\x03Q\x03R\x03R\x03" +
+		"R\x03R\x03R\x03R\x03R\x03R\x03R\x03R\x03R\x03R\x03R\x03R\x03S\x03S\x03" +
+		"S\x03S\x03S\x03S\x03S\x03S\x03S\x03S\x03S\x03S\x03S\x03S\x03S\x03S\x03" +
+		"S\x03T\x03T\x03T\x03T\x03T\x03T\x03T\x03T\x03T\x03T\x03T\x03T\x03U\x03" +
+		"U\x03U\x03U\x03U\x03U\x03U\x03U\x03U\x03U\x03U\x03U\x03V\x03V\x03V\x03" +
+		"V\x03V\x03V\x03V\x03V\x03V\x03V\x03V\x03V\x03V\x03V\x03V\x03V\x03W\x03" +
+		"W\x03W\x03W\x03W\x03W\x03W\x03W\x03W\x03W\x03W\x03X\x03X\x03X\x03X\x03" +
+		"X\x03X\x03X\x03X\x03X\x03X\x03X\x03Y\x03Y\x03Y\x03Y\x03Y\x03Y\x03Y\x03" +
+		"Y\x03Y\x03Z\x03Z\x03Z\x03Z\x03Z\x03Z\x03Z\x03Z\x03Z\x03Z\x03Z\x03[\x03" +
+		"[\x03[\x03[\x03[\x03[\x03[\x03[\x03[\x03[\x03[\x03\\\x03\\\x03\\\x03\\" +
+		"\x03\\\x03\\\x03\\\x03\\\x03\\\x03\\\x03]\x03]\x03]\x03]\x03]\x03]\x03" +
+		"]\x03^\x03^\x03^\x03^\x03^\x03^\x03^\x03^\x03^\x03^\x03^\x03^\x03_\x03" +
+		"_\x03_\x03_\x03`\x03`\x03`\x03`\x03`\x03`\x03`\x03`\x03a\x03a\x03a\x03" +
+		"a\x03a\x03a\x03a\x03b\x03b\x03b\x03b\x03b\x03c\x03c\x03c\x03c\x03c\x03" +
+		"c\x03d\x03d\x03d\x03d\x03d\x03d\x03d\x03e\x03e\x03e\x03e\x03e\x03e\x03" +
+		"e\x03e\x03f\x03f\x03g\x03g\x03h\x03h\x03i\x03i\x03j\x03j\x03k\x03k\x03" +
+		"l\x03l\x03l\x03m\x03m\x03m\x03n\x03n\x03n\x03o\x03o\x03p\x03p\x03q\x03" +
+		"q\x03r\x03r\x03s\x03s\x03t\x03t\x03u\x03u\x03v\x03v\x03w\x03w\x03x\x03" +
+		"x\x03y\x03y\x03z\x03z\x03{\x03{\x03|\x03|\x03}\x03}\x03~\x03~\x03\x7F" +
+		"\x03\x7F\x03\x80\x03\x80\x03\x80\x03\x80\x03\x81\x03\x81\x03\x81\x03\x81" +
+		"\x03\x81\x03\x81\x03\x82\x03\x82\x03\x82\x03\x82\x03\x82\x03\x82\x03\x82" +
+		"\x03\x82\x03\x82\x03\x82\x03\x82\x03\x82\x03\x82\x03\x82\x03\x82\x03\x83" +
+		"\x03\x83\x03\x83\x03\x83\x03\x83\x03\x83\x03\x84\x03\x84\x03\x84\x03\x84" +
+		"\x03\x84\x03\x84\x03\x84\x03\x84\x03\x84\x03\x84\x03\x84\x03\x84\x03\x85" +
+		"\x03\x85\x03\x85\x03\x85\x03\x86\x03\x86\x03\x86\x03\x86\x03\x86\x03\x87" +
+		"\x03\x87\x03\x87\x03\x87\x03\x87\x03\x87\x03\x87\x03\x88\x03\x88\x03\x88" +
+		"\x03\x88\x03\x89\x03\x89\x03\x89\x03\x89\x03\x89\x03\x8A\x03\x8A\x03\x8A" +
+		"\x03\x8A\x03\x8A\x03\x8A\x03\x8B\x03\x8B\x03\x8B\x03\x8B\x03\x8B\x03\x8B" +
+		"\x03\x8C\x03\x8C\x03\x8C\x03\x8C\x03\x8C\x03\x8C\x03\x8C\x03\x8D\x03\x8D" +
+		"\x03\x8D\x03\x8D\x03\x8E\x03\x8E\x03\x8E\x03\x8E\x03\x8E\x03\x8E\x03\x8F" +
+		"\x03\x8F\x03\x8F\x03\x8F\x03\x8F\x03\x8F\x03\x8F\x03\x8F\x03\x8F\x03\x90" +
+		"\x03\x90\x03\x90\x03\x90\x03\x90\x03\x90\x03\x90\x03\x90\x03\x91\x03\x91" +
+		"\x03\x91\x03\x91\x03\x91\x03\x91\x03\x91\x03\x91\x03\x91\x03\x91\x03\x91" +
+		"\x03\x91\x03\x92\x03\x92\x03\x92\x03\x92\x03\x92\x03\x92\x03\x92\x03\x92" +
+		"\x03\x92\x03\x92\x03\x92\x03\x93\x03\x93\x03\x93\x03\x93\x03\x93\x03\x93" +
+		"\x03\x93\x03\x93\x03\x93\x03\x93\x03\x93\x03\x94\x03\x94\x03\x94\x03\x94" +
+		"\x03\x94\x03\x95\x03\x95\x03\x95\x03\x95\x03\x95\x03\x95\x03\x96\x03\x96" +
+		"\x03\x96\x03\x96\x03\x96\x03\x97\x03\x97\x03\x97\x03\x97\x03\x97\x03\x98" +
+		"\x03\x98\x03\x98\x03\x98\x03\x98\x03\x98\x03\x98\x03\x99\x03\x99\x03\x99" +
+		"\x03\x99\x03\x99\x03\x99\x03\x99\x03\x99\x03\x99\x03\x9A\x03\x9A\x03\x9A" +
+		"\x03\x9A\x03\x9A\x03\x9A\x03\x9A\x03\x9A\x03\x9A\x03\x9A\x03\x9A\x03\x9A" +
+		"\x03\x9A\x03\x9A\x03\x9B\x03\x9B\x03\x9B\x03\x9B\x03\x9B\x03\x9B\x03\x9B" +
+		"\x03\x9C\x03\x9C\x03\x9C\x03\x9C\x03\x9C\x03\x9C\x03\x9C\x03\x9C\x03\x9C" +
+		"\x03\x9C\x03\x9C\x03\x9C\x03\x9D\x03\x9D\x03\x9D\x03\x9D\x03\x9D\x03\x9D" +
+		"\x03\x9D\x03\x9D\x03\x9E\x03\x9E\x03\x9E\x03\x9E\x03\x9E\x03\x9E\x03\x9E" +
+		"\x03\x9E\x03\x9E\x03\x9F\x03\x9F\x03\x9F\x03\x9F\x03\x9F\x03\x9F\x03\x9F" +
+		"\x03\x9F\x03\x9F\x03\x9F\x03\x9F\x03\xA0\x03\xA0\x03\xA0\x03\xA0\x03\xA0" +
+		"\x03\xA0\x03\xA0\x03\xA0\x03\xA0\x03\xA0\x03\xA0\x03\xA1\x03\xA1\x03\xA1" +
+		"\x03\xA1\x03\xA1\x03\xA2\x03\xA2\x03\xA2\x03\xA2\x03\xA2\x03\xA2\x03\xA2" +
+		"\x03\xA2\x03\xA2\x03\xA2\x03\xA3\x03\xA3\x03\xA4\x03\xA4\x03\xA4\x03\xA5" +
+		"\x03\xA5\x03\xA5\x03\xA5\x03\xA6\x03\xA6\x03\xA6\x03\xA6\x03\xA6\x03\xA7" +
+		"\x03\xA7\x03\xA7\x03\xA7\x03\xA7\x03\xA7\x03\xA7\x03\xA7\x03\xA8\x03\xA8" +
+		"\x03\xA8\x03\xA8\x03\xA8\x03\xA9\x03\xA9\x03\xA9\x03\xA9\x03\xA9\x03\xA9" +
+		"\x03\xAA\x03\xAA\x03\xAB\x03\xAB\x03\xAB\x03\xAB\x03\xAC\x03\xAC\x03\xAC" +
+		"\x03\xAC\x03\xAC\x03\xAC\x03\xAD\x03\xAD\x03\xAD\x03\xAE\x03\xAE\x03\xAE" +
+		"\x03\xAE\x03\xAF\x03\xAF\x03\xAF\x03\xAF\x03\xAF\x03\xAF\x03\xB0\x03\xB0" +
+		"\x03\xB0\x03\xB0\x03\xB0\x03\xB1\x03\xB1\x03\xB1\x03\xB1\x03\xB2\x03\xB2" +
+		"\x03\xB2\x03\xB3\x03\xB3\x03\xB3\x03\xB3\x03\xB4\x03\xB4\x03\xB4\x03\xB4" +
+		"\x03\xB4\x03\xB4\x03\xB5\x03\xB5\x03\xB5\x03\xB5\x03\xB5\x03\xB6\x03\xB6" +
+		"\x03\xB6\x03\xB6\x03\xB6\x03\xB6\x03\xB7\x03\xB7\x03\xB7\x03\xB7\x03\xB7" +
+		"\x03\xB8\x03\xB8\x03\xB8\x03\xB8\x03\xB8\x03\xB9\x03\xB9\x03\xB9\x03\xB9" +
+		"\x03\xB9\x03\xB9\x03\xB9\x03\xB9\x03\xB9\x03\xBA\x03\xBA\x03\xBA\x03\xBA" +
+		"\x03\xBA\x03\xBB\x03\xBB\x03\xBB\x03\xBB\x03\xBB\x03\xBC\x03\xBC\x03\xBC" +
+		"\x03\xBC\x03\xBC\x03\xBD\x03\xBD\x03\xBD\x03\xBD\x03\xBD\x03\xBD\x03\xBE" +
+		"\x03\xBE\x03\xBE\x03\xBE\x03\xBF\x03\xBF\x03\xBF\x03\xBF\x03\xC0\x03\xC0" +
+		"\x03\xC0\x03\xC0\x03\xC0\x03\xC0\x03\xC0\x03\xC0\x03\xC1\x03\xC1\x03\xC1" +
+		"\x03\xC1\x03\xC1\x03\xC1\x03\xC1\x03\xC1\x03\xC2\x03\xC2\x03\xC2\x03\xC2" +
+		"\x03\xC3\x03\xC3\x03\xC3\x03\xC3\x03\xC4\x03\xC4\x03\xC4\x03\xC4\x03\xC4" +
+		"\x03\xC4\x03\xC4\x03\xC4\x03\xC5\x03\xC5\x03\xC5\x03\xC5\x03\xC5\x03\xC5" +
+		"\x03\xC5\x03\xC5\x03\xC6\x03\xC6\x03\xC6\x03\xC6\x03\xC6\x03\xC6\x03\xC6" +
+		"\x03\xC6\x03\xC6\x03\xC6\x03\xC6\x03\xC6\x03\xC6\x03\xC7\x03\xC7\x03\xC7" +
+		"\x03\xC7\x03\xC7\x03\xC7\x03\xC7\x03\xC7\x03\xC7\x03\xC7\x03\xC7\x03\xC7" +
+		"\x03\xC7\x03\xC8\x03\xC8\x03\xC8\x03\xC8\x03\xC8\x03\xC8\x03\xC8\x03\xC8" +
+		"\x03\xC8\x03\xC8\x03\xC8\x03\xC8\x03\xC8\x03\xC8\x03\xC8\x03\xC8\x03\xC8" +
+		"\x03\xC8\x03\xC9\x03\xC9\x03\xC9\x03\xC9\x03\xC9\x03\xC9\x03\xC9\x03\xC9" +
+		"\x03\xCA\x03\xCA\x03\xCA\x03\xCA\x03\xCA\x03\xCB\x03\xCB\x03\xCB\x03\xCB" +
+		"\x03\xCB\x03\xCB\x03\xCB\x03\xCB\x03\xCB\x03\xCC\x03\xCC\x03\xCC\x03\xCC" +
+		"\x03\xCC\x03\xCC\x03\xCC\x03\xCC\x03\xCC\x03\xCC\x03\xCC\x03\xCC\x03\xCD" +
+		"\x03\xCD\x03\xCD\x03\xCD\x03\xCD\x03\xCD\x03\xCD\x03\xCD\x03\xCD\x03\xCE" +
+		"\x03\xCE\x03\xCE\x03\xCE\x03\xCE\x03\xCE\x03\xCE\x03\xCE\x03\xCF\x03\xCF" +
+		"\x03\xCF\x03\xCF\x03\xCF\x03\xCF\x03\xCF\x03\xCF\x03\xCF\x03\xCF\x03\xCF" +
+		"\x03\xD0\x03\xD0\x03\xD0\x03\xD0\x03\xD0\x03\xD0\x03\xD0\x03\xD0\x03\xD0" +
+		"\x03\xD0\x03\xD1\x03\xD1\x03\xD1\x03\xD1\x03\xD1\x03\xD1\x03\xD1\x03\xD1" +
+		"\x03\xD1\x03\xD1\x03\xD2\x03\xD2\x03\xD2\x03\xD2\x03\xD2\x03\xD2\x03\xD2" +
+		"\x03\xD2\x03\xD2\x03\xD2\x03\xD3\x03\xD3\x03\xD3\x03\xD3\x03\xD3\x03\xD3" +
+		"\x03\xD3\x03\xD3\x03\xD3\x03\xD3\x03\xD4\x03\xD4\x03\xD4\x03\xD4\x03\xD4" +
+		"\x03\xD4\x03\xD4\x03\xD4\x03\xD4\x03\xD4\x03\xD4\x03\xD4\x03\xD4\x03\xD4" +
+		"\x03\xD4\x03\xD5\x03\xD5\x03\xD5\x03\xD5\x03\xD5\x03\xD5\x03\xD5\x03\xD5" +
+		"\x03\xD5\x03\xD5\x03\xD5\x03\xD5\x03\xD5\x03\xD5\x03\xD6\x03\xD6\x03\xD6" +
+		"\x03\xD6\x03\xD6\x03\xD6\x03\xD6\x03\xD6\x03\xD6\x03\xD7\x03\xD7\x03\xD7" +
+		"\x03\xD7\x03\xD7\x03\xD7\x03\xD7\x03\xD7\x03\xD7\x03\xD8\x03\xD8\x03\xD8" +
+		"\x03\xD8\x03\xD8\x03\xD8\x03\xD8\x03\xD8\x03\xD8\x03\xD8\x03\xD9\x03\xD9" +
+		"\x03\xD9\x03\xD9\x03\xDA\x03\xDA\x03\xDA\x03\xDA\x03\xDA\x03\xDA\x03\xDA" +
+		"\x03\xDA\x03\xDA\x03\xDA\x03\xDA\x03\xDB\x03\xDB\x03\xDB\x03\xDB\x03\xDB" +
+		"\x03\xDB\x03\xDB\x03\xDB\x03\xDB\x03\xDB\x03\xDB\x03\xDB\x03\xDC\x03\xDC" +
+		"\x03\xDC\x03\xDC\x03\xDC\x03\xDC\x03\xDC\x03\xDC\x03\xDD\x03\xDD\x03\xDD" +
+		"\x03\xDD\x03\xDD\x03\xDD\x03\xDD\x03\xDD\x03\xDE\x03\xDE\x03\xDE\x03\xDE" +
+		"\x03\xDE\x03\xDF\x03\xDF\x03\xDF\x03\xDF\x03\xDF\x03\xDF\x03\xDF\x03\xDF" +
+		"\x03\xDF\x03\xDF\x03\xDF\x03\xDF\x03\xE0\x03\xE0\x03\xE0\x03\xE0\x03\xE0" +
+		"\x03\xE0\x03\xE0\x03\xE0\x03\xE0\x03\xE0\x03\xE1\x03\xE1\x03\xE1\x03\xE1" +
+		"\x03\xE1\x03\xE1\x03\xE1\x03\xE1\x03\xE2\x03\xE2\x03\xE2\x03\xE2\x03\xE2" +
+		"\x03\xE2\x03\xE2\x03\xE2\x03\xE2\x03\xE3\x03\xE3\x03\xE3\x03\xE3\x03\xE3" +
+		"\x03\xE3\x03\xE3\x03\xE3\x03\xE3\x03\xE4\x03\xE4\x03\xE4\x03\xE4\x03\xE4" +
+		"\x03\xE4\x03\xE4\x03\xE4\x03\xE4\x03\xE4\x03\xE4\x03\xE4\x03\xE4\x03\xE4" +
+		"\x03\xE5\x03\xE5\x03\xE5\x03\xE5\x03\xE5\x03\xE5\x03\xE5\x03\xE5\x03\xE5" +
+		"\x03\xE5\x03\xE5\x03\xE5\x03\xE5\x03\xE5\x03\xE5\x03\xE6\x03\xE6\x03\xE6" +
+		"\x03\xE6\x03\xE6\x03\xE6\x03\xE6\x03\xE7\x03\xE7\x03\xE7\x03\xE7\x03\xE7" +
+		"\x03\xE7\x03\xE7\x03\xE7\x03\xE7\x03\xE7\x03\xE8\x03\xE8\x03\xE8\x03\xE8" +
+		"\x03\xE8\x03\xE8\x03\xE9\x03\xE9\x03\xE9\x03\xE9\x03\xE9\x03\xE9\x03\xEA" +
+		"\x03\xEA\x03\xEA\x03\xEA\x03\xEA\x03\xEB\x03\xEB\x03\xEB\x03\xEC\x03\xEC" +
+		"\x03\xEC\x03\xEC\x03\xEC\x03\xEC\x03\xED\x03\xED\x03\xED\x03\xED\x03\xED" +
+		"\x03\xED\x03\xEE\x03\xEE\x03\xEE\x03\xEE\x03\xEE\x03\xEE\x03\xEE\x03\xEF" +
+		"\x03\xEF\x03\xEF\x03\xEF\x03\xEF\x03\xEF\x03\xEF\x03\xEF\x03\xEF\x03\xEF" +
+		"\x03\xF0\x03\xF0\x03\xF0\x03\xF0\x03\xF0\x03\xF0\x03\xF0\x03\xF1\x03\xF1" +
+		"\x03\xF1\x03\xF1\x03\xF1\x03\xF1\x03\xF1\x03\xF2\x03\xF2\x03\xF2\x03\xF2" +
+		"\x03\xF2\x03\xF2\x03\xF3\x03\xF3\x03\xF3\x03\xF3\x03\xF3\x03\xF4\x03\xF4" +
+		"\x03\xF4\x03\xF4\x03\xF4\x03\xF4\x03\xF5\x03\xF5\x03\xF5\x03\xF5\x03\xF5" +
+		"\x03\xF5\x03\xF5\x03\xF6\x03\xF6\x03\xF6\x03\xF6\x03\xF6\x03\xF6\x03\xF6" +
+		"\x03\xF6\x03\xF7\x03\xF7\x03\xF7\x03\xF7\x03\xF7\x03\xF8\x03\xF8\x03\xF8" +
+		"\x03\xF8\x03\xF8\x03\xF9\x03\xF9\x03\xF9\x03\xF9\x03\xF9\x03\xF9\x03\xF9" +
+		"\x03\xFA\x03\xFA\x03\xFA\x03\xFA\x03\xFA\x03\xFA\x03\xFA\x03\xFA\x03\xFA" +
+		"\x03\xFA\x03\xFB\x03\xFB\x03\xFB\x03\xFB\x03\xFB\x03\xFB\x03\xFB\x03\xFC" +
+		"\x03\xFC\x03\xFC\x03\xFC\x03\xFC\x03\xFC\x03\xFC\x03\xFD\x03\xFD\x03\xFD" +
+		"\x03\xFE\x03\xFE\x03\xFE\x03\xFE\x03\xFE\x03\xFE\x03\xFE\x03\xFF\x03\xFF" +
+		"\x03\xFF\x03\xFF\x03\xFF\x03\xFF\x03\u0100\x03\u0100\x03\u0100\x03\u0100" +
+		"\x03\u0100\x03\u0100\x03\u0100\x03\u0100\x03\u0100\x03\u0100\x03\u0100" +
+		"\x03\u0100\x03\u0100\x03\u0101\x03\u0101\x03\u0101\x03\u0101\x03\u0101" +
+		"\x03\u0101\x03\u0101\x03\u0101\x03\u0101\x03\u0101\x03\u0101\x03\u0101" +
+		"\x03\u0101\x03\u0101\x03\u0101\x03\u0101\x03\u0101\x03\u0101\x03\u0101" +
+		"\x03\u0101\x03\u0102\x03\u0102\x03\u0102\x03\u0102\x03\u0102";
+	private static readonly _serializedATNSegment1: string =
+		"\x03\u0102\x03\u0102\x03\u0102\x03\u0102\x03\u0102\x03\u0102\x03\u0102" +
+		"\x03\u0102\x03\u0102\x03\u0102\x03\u0102\x03\u0102\x03\u0102\x03\u0103" +
+		"\x03\u0103\x03\u0103\x03\u0103\x03\u0103\x03\u0103\x03\u0103\x03\u0103" +
+		"\x03\u0103\x03\u0103\x03\u0103\x03\u0103\x03\u0103\x03\u0103\x03\u0103" +
+		"\x03\u0103\x03\u0103\x03\u0103\x03\u0103\x03\u0103\x03\u0104\x03\u0104" +
+		"\x03\u0104\x03\u0104\x03\u0104\x03\u0104\x03\u0104\x03\u0104\x03\u0104" +
+		"\x03\u0104\x03\u0104\x03\u0104\x03\u0105\x03\u0105\x03\u0105\x03\u0105" +
+		"\x03\u0105\x03\u0105\x03\u0105\x03\u0105\x03\u0105\x03\u0105\x03\u0105" +
+		"\x03\u0105\x03\u0105\x03\u0106\x03\u0106\x03\u0106\x03\u0106\x03\u0106" +
+		"\x03\u0106\x03\u0106\x03\u0106\x03\u0106\x03\u0106\x03\u0106\x03\u0106" +
+		"\x03\u0106\x03\u0106\x03\u0106\x03\u0106\x03\u0106\x03\u0106\x03\u0106" +
+		"\x03\u0106\x03\u0106\x03\u0106\x03\u0106\x03\u0107\x03\u0107\x03\u0107" +
+		"\x03\u0107\x03\u0107\x03\u0107\x03\u0107\x03\u0107\x03\u0107\x03\u0107" +
+		"\x03\u0107\x03\u0107\x03\u0107\x03\u0107\x03\u0107\x03\u0107\x03\u0107" +
+		"\x03\u0108\x03\u0108\x03\u0108\x03\u0108\x03\u0108\x03\u0108\x03\u0108" +
+		"\x03\u0108\x03\u0108\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109" +
+		"\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109" +
+		"\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109" +
+		"\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109" +
+		"\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109\x03\u0109" +
+		"\x03\u0109\x03\u0109\x03\u0109\x03\u010A\x03\u010A\x03\u010A\x03\u010A" +
+		"\x03\u010A\x03\u010A\x03\u010B\x03\u010B\x03\u010B\x03\u010B\x03\u010B" +
+		"\x03\u010B\x03\u010B\x03\u010B\x03\u010B\x03\u010B\x03\u010B\x03\u010B" +
+		"\x03\u010B\x03\u010B\x03\u010B\x03\u010B\x03\u010B\x03\u010C\x03\u010C" +
+		"\x03\u010C\x03\u010C\x03\u010C\x03\u010C\x03\u010C\x03\u010C\x03\u010C" +
+		"\x03\u010C\x03\u010C\x03\u010C\x03\u010C\x03\u010C\x03\u010D\x03\u010D" +
+		"\x03\u010D\x03\u010D\x03\u010D\x03\u010D\x03\u010D\x03\u010D\x03\u010D" +
+		"\x03\u010D\x03\u010D\x03\u010D\x03\u010D\x03\u010D\x03\u010D\x03\u010D" +
+		"\x03\u010D\x03\u010E\x03\u010E\x03\u010E\x03\u010E\x03\u010E\x03\u010E" +
+		"\x03\u010E\x03\u010E\x03\u010E\x03\u010E\x03\u010E\x03\u010E\x03\u010E" +
+		"\x03\u010E\x03\u010E\x03\u010E\x03\u010E\x03\u010E\x03\u010E\x03\u010E" +
+		"\x03\u010E\x03\u010E\x03\u010E\x03\u010E\x03\u010E\x03\u010E\x03\u010E" +
+		"\x03\u010F\x03\u010F\x03\u010F\x03\u010F\x03\u010F\x03\u010F\x03\u010F" +
+		"\x03\u0110\x03\u0110\x03\u0110\x03\u0110\x03\u0110\x03\u0110\x03\u0111" +
+		"\x03\u0111\x03\u0111\x03\u0111\x03\u0111\x03\u0111\x03\u0111\x03\u0111" +
+		"\x03\u0111\x03\u0111\x03\u0111\x03\u0111\x03\u0111\x03\u0111\x03\u0111" +
+		"\x03\u0111\x03\u0111\x03\u0111\x03\u0111\x03\u0111\x03\u0111\x03\u0112" +
+		"\x03\u0112\x03\u0112\x03\u0112\x03\u0112\x03\u0112\x03\u0112\x03\u0112" +
+		"\x03\u0112\x03\u0112\x03\u0112\x03\u0112\x03\u0112\x03\u0112\x03\u0112" +
+		"\x03\u0112\x03\u0112\x03\u0112\x03\u0112\x03\u0112\x03\u0113\x03\u0113" +
+		"\x03\u0113\x03\u0113\x03\u0113\x03\u0113\x03\u0113\x03\u0113\x03\u0113" +
+		"\x03\u0113\x03\u0113\x03\u0113\x03\u0113\x03\u0113\x03\u0113\x03\u0113" +
+		"\x03\u0113\x03\u0113\x03\u0113\x03\u0113\x03\u0113\x03\u0114\x03\u0114" +
+		"\x03\u0114\x03\u0114\x03\u0114\x03\u0114\x03\u0114\x03\u0114\x03\u0114" +
+		"\x03\u0114\x03\u0114\x03\u0114\x03\u0114\x03\u0114\x03\u0115\x03\u0115" +
+		"\x03\u0115\x03\u0115\x03\u0115\x03\u0115\x03\u0115\x03\u0115\x03\u0115" +
+		"\x03\u0115\x03\u0116\x03\u0116\x03\u0116\x03\u0116\x03\u0116\x03\u0116" +
+		"\x03\u0116\x03\u0116\x03\u0117\x03\u0117\x03\u0117\x03\u0117\x03\u0117" +
+		"\x03\u0117\x03\u0117\x03\u0117\x03\u0117\x03\u0117\x03\u0117\x03\u0117" +
+		"\x03\u0117\x03\u0117\x03\u0117\x03\u0117\x03\u0117\x03\u0117\x03\u0118" +
+		"\x03\u0118\x03\u0118\x03\u0118\x03\u0118\x03\u0118\x03\u0118\x03\u0118" +
+		"\x03\u0118\x03\u0118\x03\u0118\x03\u0118\x03\u0118\x03\u0118\x03\u0118" +
+		"\x03\u0118\x03\u0118\x03\u0118\x03\u0118\x03\u0118\x03\u0118\x03\u0118" +
+		"\x03\u0118\x03\u0118\x03\u0119\x03\u0119\x03\u0119\x03\u0119\x03\u0119" +
+		"\x03\u0119\x03\u0119\x03\u0119\x03\u0119\x03\u0119\x03\u0119\x03\u0119" +
+		"\x03\u0119\x03\u0119\x03\u0119\x03\u011A\x03\u011A\x03\u011A\x03\u011A" +
+		"\x03\u011A\x03\u011A\x03\u011A\x03\u011A\x03\u011A\x03\u011A\x03\u011A" +
+		"\x03\u011A\x03\u011A\x03\u011A\x03\u011A\x03\u011A\x03\u011A\x03\u011A" +
+		"\x03\u011A\x03\u011A\x03\u011A\x03\u011B\x03\u011B\x03\u011B\x03\u011B" +
+		"\x03\u011B\x03\u011B\x03\u011B\x03\u011B\x03\u011B\x03\u011C\x03\u011C" +
+		"\x03\u011C\x03\u011C\x03\u011C\x03\u011C\x03\u011C\x03\u011C\x03\u011C" +
+		"\x03\u011C\x03\u011C\x03\u011C\x03\u011D\x03\u011D\x03\u011D\x03\u011D" +
+		"\x03\u011D\x03\u011D\x03\u011D\x03\u011D\x03\u011D\x03\u011D\x03\u011D" +
+		"\x03\u011D\x03\u011D\x03\u011D\x03\u011E\x03\u011E\x03\u011E\x03\u011E" +
+		"\x03\u011E\x03\u011E\x03\u011E\x03\u011E\x03\u011E\x03\u011E\x03\u011E" +
+		"\x03\u011E\x03\u011E\x03\u011E\x03\u011E\x03\u011F\x03\u011F\x03\u011F" +
+		"\x03\u011F\x03\u011F\x03\u011F\x03\u011F\x03\u011F\x03\u011F\x03\u011F" +
+		"\x03\u011F\x03\u011F\x03\u011F\x03\u011F\x03\u011F\x03\u011F\x03\u011F" +
+		"\x03\u011F\x03\u011F\x03\u0120\x03\u0120\x03\u0120\x03\u0120\x03\u0120" +
+		"\x03\u0120\x03\u0120\x03\u0120\x03\u0121\x03\u0121\x03\u0121\x03\u0121" +
+		"\x03\u0121\x03\u0122\x03\u0122\x03\u0122\x03\u0122\x03\u0122\x03\u0122" +
+		"\x03\u0122\x03\u0122\x03\u0122\x03\u0122\x03\u0122\x03\u0122\x03\u0123" +
+		"\x03\u0123\x03\u0123\x03\u0123\x03\u0123\x03\u0124\x03\u0124\x03\u0124" +
+		"\x03\u0124\x03\u0124\x03\u0124\x03\u0124\x03\u0124\x03\u0124\x03\u0124" +
+		"\x03\u0124\x03\u0124\x03\u0124\x03\u0124\x03\u0124\x03\u0124\x03\u0124" +
+		"\x03\u0125\x03\u0125\x03\u0125\x03\u0125\x03\u0125\x03\u0126\x03\u0126" +
+		"\x03\u0126\x03\u0127\x03\u0127\x03\u0128\x03\u0128\x03\u0129\x03\u0129" +
+		"\x03\u012A\x03\u012A\x03\u012B\x03\u012B\x03\u012C\x03\u012C\x03\u012D" +
+		"\x03\u012D\x03\u012E\x06\u012E\u0BE5\n\u012E\r\u012E\x0E\u012E\u0BE6\x03" +
+		"\u012F\x06\u012F\u0BEA\n\u012F\r\u012F\x0E\u012F\u0BEB\x05\u012F\u0BEE" +
+		"\n\u012F\x03\u012F\x03\u012F\x06\u012F\u0BF2\n\u012F\r\u012F\x0E\u012F" +
+		"\u0BF3\x03\u0130\x03\u0130\x06\u0130\u0BF8\n\u0130\r\u0130\x0E\u0130\u0BF9" +
+		"\x07\u0130\u0BFC\n\u0130\f\u0130\x0E\u0130\u0BFF\v\u0130\x03\u0131\x06" +
+		"\u0131\u0C02\n\u0131\r\u0131\x0E\u0131\u0C03\x03\u0131\x07\u0131\u0C07" +
+		"\n\u0131\f\u0131\x0E\u0131\u0C0A\v\u0131\x03\u0132\x03\u0132\x03\u0132" +
+		"\x03\u0133\x03\u0133\x03\u0133\x03\u0133\x03\u0133\x03\u0133\x07\u0133" +
+		"\u0C15\n\u0133\f\u0133\x0E\u0133\u0C18\v\u0133\x03\u0133\x03\u0133\x03" +
+		"\u0134\x03\u0134\x03\u0134\x03\u0134\x03\u0134\x03\u0134\x07\u0134\u0C22" +
+		"\n\u0134\f\u0134\x0E\u0134\u0C25\v\u0134\x03\u0134\x03\u0134\x03\u0135" +
+		"\x03\u0135\x03\u0135\x03\u0135\x03\u0135\x03\u0135\x07\u0135\u0C2F\n\u0135" +
+		"\f\u0135\x0E\u0135\u0C32\v\u0135\x03\u0135\x03\u0135\x03\u0136\x03\u0136" +
+		"\x03\u0137\x03\u0137\x03\u0137\x03\u0137\x03\u0C03\x02\x02\u0138\x03\x02" +
+		"\x03\x05\x02\x04\x07\x02\x05\t\x02\x06\v\x02\x07\r\x02\b\x0F\x02\t\x11" +
+		"\x02\n\x13\x02\v\x15\x02\f\x17\x02\r\x19\x02\x0E\x1B\x02\x0F\x1D\x02\x10" +
+		"\x1F\x02\x11!\x02\x12#\x02\x13%\x02\x14\'\x02\x15)\x02\x16+\x02\x17-\x02" +
+		"\x18/\x02\x191\x02\x1A3\x02\x1B5\x02\x1C7\x02\x1D9\x02\x1E;\x02\x1F=\x02" +
+		" ?\x02!A\x02\"C\x02#E\x02$G\x02%I\x02&K\x02\'M\x02(O\x02)Q\x02*S\x02+" +
+		"U\x02,W\x02-Y\x02.[\x02/]\x020_\x021a\x022c\x023e\x024g\x025i\x026k\x02" +
+		"7m\x028o\x029q\x02:s\x02;u\x02<w\x02=y\x02>{\x02?}\x02@\x7F\x02A\x81\x02" +
+		"B\x83\x02C\x85\x02D\x87\x02E\x89\x02F\x8B\x02G\x8D\x02H\x8F\x02I\x91\x02" +
+		"J\x93\x02K\x95\x02L\x97\x02M\x99\x02N\x9B\x02O\x9D\x02P\x9F\x02Q\xA1\x02" +
+		"R\xA3\x02S\xA5\x02T\xA7\x02U\xA9\x02V\xAB\x02W\xAD\x02X\xAF\x02Y\xB1\x02" +
+		"Z\xB3\x02[\xB5\x02\\\xB7\x02]\xB9\x02^\xBB\x02_\xBD\x02`\xBF\x02a\xC1" +
+		"\x02b\xC3\x02c\xC5\x02d\xC7\x02e\xC9\x02f\xCB\x02g\xCD\x02h\xCF\x02i\xD1" +
+		"\x02j\xD3\x02k\xD5\x02l\xD7\x02m\xD9\x02n\xDB\x02o\xDD\x02p\xDF\x02q\xE1" +
+		"\x02r\xE3\x02s\xE5\x02t\xE7\x02u\xE9\x02v\xEB\x02w\xED\x02x\xEF\x02y\xF1" +
+		"\x02z\xF3\x02{\xF5\x02|\xF7\x02}\xF9\x02~\xFB\x02\x7F\xFD\x02\x80\xFF" +
+		"\x02\x81\u0101\x02\x82\u0103\x02\x83\u0105\x02\x84\u0107\x02\x85\u0109" +
+		"\x02\x86\u010B\x02\x87\u010D\x02\x88\u010F\x02\x89\u0111\x02\x8A\u0113" +
+		"\x02\x8B\u0115\x02\x8C\u0117\x02\x8D\u0119\x02\x8E\u011B\x02\x8F\u011D" +
+		"\x02\x90\u011F\x02\x91\u0121\x02\x92\u0123\x02\x93\u0125\x02\x94\u0127" +
+		"\x02\x95\u0129\x02\x96\u012B\x02\x97\u012D\x02\x98\u012F\x02\x99\u0131" +
+		"\x02\x9A\u0133\x02\x9B\u0135\x02\x9C\u0137\x02\x9D\u0139\x02\x9E\u013B" +
+		"\x02\x9F\u013D\x02\xA0\u013F\x02\xA1\u0141\x02\xA2\u0143\x02\xA3\u0145" +
+		"\x02\xA4\u0147\x02\xA5\u0149\x02\xA6\u014B\x02\xA7\u014D\x02\xA8\u014F" +
+		"\x02\xA9\u0151\x02\xAA\u0153\x02\xAB\u0155\x02\xAC\u0157\x02\xAD\u0159" +
+		"\x02\xAE\u015B\x02\xAF\u015D\x02\xB0\u015F\x02\xB1\u0161\x02\xB2\u0163" +
+		"\x02\xB3\u0165\x02\xB4\u0167\x02\xB5\u0169\x02\xB6\u016B\x02\xB7\u016D" +
+		"\x02\xB8\u016F\x02\xB9\u0171\x02\xBA\u0173\x02\xBB\u0175\x02\xBC\u0177" +
+		"\x02\xBD\u0179\x02\xBE\u017B\x02\xBF\u017D\x02\xC0\u017F\x02\xC1\u0181" +
+		"\x02\xC2\u0183\x02\xC3\u0185\x02\xC4\u0187\x02\xC5\u0189\x02\xC6\u018B" +
+		"\x02\xC7\u018D\x02\xC8\u018F\x02\xC9\u0191\x02\xCA\u0193\x02\xCB\u0195" +
+		"\x02\xCC\u0197\x02\xCD\u0199\x02\xCE\u019B\x02\xCF\u019D\x02\xD0\u019F" +
+		"\x02\xD1\u01A1\x02\xD2\u01A3\x02\xD3\u01A5\x02\xD4\u01A7\x02\xD5\u01A9" +
+		"\x02\xD6\u01AB\x02\xD7\u01AD\x02\xD8\u01AF\x02\xD9\u01B1\x02\xDA\u01B3" +
+		"\x02\xDB\u01B5\x02\xDC\u01B7\x02\xDD\u01B9\x02\xDE\u01BB\x02\xDF\u01BD" +
+		"\x02\xE0\u01BF\x02\xE1\u01C1\x02\xE2\u01C3\x02\xE3\u01C5\x02\xE4\u01C7" +
+		"\x02\xE5\u01C9\x02\xE6\u01CB\x02\xE7\u01CD\x02\xE8\u01CF\x02\xE9\u01D1" +
+		"\x02\xEA\u01D3\x02\xEB\u01D5\x02\xEC\u01D7\x02\xED\u01D9\x02\xEE\u01DB" +
+		"\x02\xEF\u01DD\x02\xF0\u01DF\x02\xF1\u01E1\x02\xF2\u01E3\x02\xF3\u01E5" +
+		"\x02\xF4\u01E7\x02\xF5\u01E9\x02\xF6\u01EB\x02\xF7\u01ED\x02\xF8\u01EF" +
+		"\x02\xF9\u01F1\x02\xFA\u01F3\x02\xFB\u01F5\x02\xFC\u01F7\x02\xFD\u01F9" +
+		"\x02\xFE\u01FB\x02\xFF\u01FD\x02\u0100\u01FF\x02\u0101\u0201\x02\u0102" +
+		"\u0203\x02\u0103\u0205\x02\u0104\u0207\x02\u0105\u0209\x02\u0106\u020B" +
+		"\x02\u0107\u020D\x02\u0108\u020F\x02\u0109\u0211\x02\u010A\u0213\x02\u010B" +
+		"\u0215\x02\u010C\u0217\x02\u010D\u0219\x02\u010E\u021B\x02\u010F\u021D" +
+		"\x02\u0110\u021F\x02\u0111\u0221\x02\u0112\u0223\x02\u0113\u0225\x02\u0114" +
+		"\u0227\x02\u0115\u0229\x02\u0116\u022B\x02\u0117\u022D\x02\u0118\u022F" +
+		"\x02\u0119\u0231\x02\u011A\u0233\x02\u011B\u0235\x02\u011C\u0237\x02\u011D" +
+		"\u0239\x02\u011E\u023B\x02\u011F\u023D\x02\u0120\u023F\x02\u0121\u0241" +
+		"\x02\u0122\u0243\x02\u0123\u0245\x02\u0124\u0247\x02\u0125\u0249\x02\u0126" +
+		"\u024B\x02\u0127\u024D\x02\u0128\u024F\x02\u0129\u0251\x02\u012A\u0253" +
+		"\x02\u012B\u0255\x02\u012C\u0257\x02\u012D\u0259\x02\u012E\u025B\x02\u012F" +
+		"\u025D\x02\u0130\u025F\x02\x02\u0261\x02\x02\u0263\x02\u0131\u0265\x02" +
+		"\u0132\u0267\x02\u0133\u0269\x02\u0134\u026B\x02\x02\u026D\x02\u0135\x03" +
+		"\x02\n\x03\x02/0\x04\x02,,2;\x04\x02,,B\\\x07\x02,,//2;C\\aa\x04\x02$" +
+		"$^^\x04\x02))^^\x04\x02^^bb\x03\x022;\x02\u0C48\x02\x03\x03\x02\x02\x02" +
+		"\x02\x05\x03\x02\x02\x02\x02\x07\x03\x02\x02\x02\x02\t\x03\x02\x02\x02" +
+		"\x02\v\x03\x02\x02\x02\x02\r\x03\x02\x02\x02\x02\x0F\x03\x02\x02\x02\x02" +
+		"\x11\x03\x02\x02\x02\x02\x13\x03\x02\x02\x02\x02\x15\x03\x02\x02\x02\x02" +
+		"\x17\x03\x02\x02\x02\x02\x19\x03\x02\x02\x02\x02\x1B\x03\x02\x02\x02\x02" +
+		"\x1D\x03\x02\x02\x02\x02\x1F\x03\x02\x02\x02\x02!\x03\x02\x02\x02\x02" +
+		"#\x03\x02\x02\x02\x02%\x03\x02\x02\x02\x02\'\x03\x02\x02\x02\x02)\x03" +
+		"\x02\x02\x02\x02+\x03\x02\x02\x02\x02-\x03\x02\x02\x02\x02/\x03\x02\x02" +
+		"\x02\x021\x03\x02\x02\x02\x023\x03\x02\x02\x02\x025\x03\x02\x02\x02\x02" +
+		"7\x03\x02\x02\x02\x029\x03\x02\x02\x02\x02;\x03\x02\x02\x02\x02=\x03\x02" +
+		"\x02\x02\x02?\x03\x02\x02\x02\x02A\x03\x02\x02\x02\x02C\x03\x02\x02\x02" +
+		"\x02E\x03\x02\x02\x02\x02G\x03\x02\x02\x02\x02I\x03\x02\x02\x02\x02K\x03" +
+		"\x02\x02\x02\x02M\x03\x02\x02\x02\x02O\x03\x02\x02\x02\x02Q\x03\x02\x02" +
+		"\x02\x02S\x03\x02\x02\x02\x02U\x03\x02\x02\x02\x02W\x03\x02\x02\x02\x02" +
+		"Y\x03\x02\x02\x02\x02[\x03\x02\x02\x02\x02]\x03\x02\x02\x02\x02_\x03\x02" +
+		"\x02\x02\x02a\x03\x02\x02\x02\x02c\x03\x02\x02\x02\x02e\x03\x02\x02\x02" +
+		"\x02g\x03\x02\x02\x02\x02i\x03\x02\x02\x02\x02k\x03\x02\x02\x02\x02m\x03" +
+		"\x02\x02\x02\x02o\x03\x02\x02\x02\x02q\x03\x02\x02\x02\x02s\x03\x02\x02" +
+		"\x02\x02u\x03\x02\x02\x02\x02w\x03\x02\x02\x02\x02y\x03\x02\x02\x02\x02" +
+		"{\x03\x02\x02\x02\x02}\x03\x02\x02\x02\x02\x7F\x03\x02\x02\x02\x02\x81" +
+		"\x03\x02\x02\x02\x02\x83\x03\x02\x02\x02\x02\x85\x03\x02\x02\x02\x02\x87" +
+		"\x03\x02\x02\x02\x02\x89\x03\x02\x02\x02\x02\x8B\x03\x02\x02\x02\x02\x8D" +
+		"\x03\x02\x02\x02\x02\x8F\x03\x02\x02\x02\x02\x91\x03\x02\x02\x02\x02\x93" +
+		"\x03\x02\x02\x02\x02\x95\x03\x02\x02\x02\x02\x97\x03\x02\x02\x02\x02\x99" +
+		"\x03\x02\x02\x02\x02\x9B\x03\x02\x02\x02\x02\x9D\x03\x02\x02\x02\x02\x9F" +
+		"\x03\x02\x02\x02\x02\xA1\x03\x02\x02\x02\x02\xA3\x03\x02\x02\x02\x02\xA5" +
+		"\x03\x02\x02\x02\x02\xA7\x03\x02\x02\x02\x02\xA9\x03\x02\x02\x02\x02\xAB" +
+		"\x03\x02\x02\x02\x02\xAD\x03\x02\x02\x02\x02\xAF\x03\x02\x02\x02\x02\xB1" +
+		"\x03\x02\x02\x02\x02\xB3\x03\x02\x02\x02\x02\xB5\x03\x02\x02\x02\x02\xB7" +
+		"\x03\x02\x02\x02\x02\xB9\x03\x02\x02\x02\x02\xBB\x03\x02\x02\x02\x02\xBD" +
+		"\x03\x02\x02\x02\x02\xBF\x03\x02\x02\x02\x02\xC1\x03\x02\x02\x02\x02\xC3" +
+		"\x03\x02\x02\x02\x02\xC5\x03\x02\x02\x02\x02\xC7\x03\x02\x02\x02\x02\xC9" +
+		"\x03\x02\x02\x02\x02\xCB\x03\x02\x02\x02\x02\xCD\x03\x02\x02\x02\x02\xCF" +
+		"\x03\x02\x02\x02\x02\xD1\x03\x02\x02\x02\x02\xD3\x03\x02\x02\x02\x02\xD5" +
+		"\x03\x02\x02\x02\x02\xD7\x03\x02\x02\x02\x02\xD9\x03\x02\x02\x02\x02\xDB" +
+		"\x03\x02\x02\x02\x02\xDD\x03\x02\x02\x02\x02\xDF\x03\x02\x02\x02\x02\xE1" +
+		"\x03\x02\x02\x02\x02\xE3\x03\x02\x02\x02\x02\xE5\x03\x02\x02\x02\x02\xE7" +
+		"\x03\x02\x02\x02\x02\xE9\x03\x02\x02\x02\x02\xEB\x03\x02\x02\x02\x02\xED" +
+		"\x03\x02\x02\x02\x02\xEF\x03\x02\x02\x02\x02\xF1\x03\x02\x02\x02\x02\xF3" +
+		"\x03\x02\x02\x02\x02\xF5\x03\x02\x02\x02\x02\xF7\x03\x02\x02\x02\x02\xF9" +
+		"\x03\x02\x02\x02\x02\xFB\x03\x02\x02\x02\x02\xFD\x03\x02\x02\x02\x02\xFF" +
+		"\x03\x02\x02\x02\x02\u0101\x03\x02\x02\x02\x02\u0103\x03\x02\x02\x02\x02" +
+		"\u0105\x03\x02\x02\x02\x02\u0107\x03\x02\x02\x02\x02\u0109\x03\x02\x02" +
+		"\x02\x02\u010B\x03\x02\x02\x02\x02\u010D\x03\x02\x02\x02\x02\u010F\x03" +
+		"\x02\x02\x02\x02\u0111\x03\x02\x02\x02\x02\u0113\x03\x02\x02\x02\x02\u0115" +
+		"\x03\x02\x02\x02\x02\u0117\x03\x02\x02\x02\x02\u0119\x03\x02\x02\x02\x02" +
+		"\u011B\x03\x02\x02\x02\x02\u011D\x03\x02\x02\x02\x02\u011F\x03\x02\x02" +
+		"\x02\x02\u0121\x03\x02\x02\x02\x02\u0123\x03\x02\x02\x02\x02\u0125\x03" +
+		"\x02\x02\x02\x02\u0127\x03\x02\x02\x02\x02\u0129\x03\x02\x02\x02\x02\u012B" +
+		"\x03\x02\x02\x02\x02\u012D\x03\x02\x02\x02\x02\u012F\x03\x02\x02\x02\x02" +
+		"\u0131\x03\x02\x02\x02\x02\u0133\x03\x02\x02\x02\x02\u0135\x03\x02\x02" +
+		"\x02\x02\u0137\x03\x02\x02\x02\x02\u0139\x03\x02\x02\x02\x02\u013B\x03" +
+		"\x02\x02\x02\x02\u013D\x03\x02\x02\x02\x02\u013F\x03\x02\x02\x02\x02\u0141" +
+		"\x03\x02\x02\x02\x02\u0143\x03\x02\x02\x02\x02\u0145\x03\x02\x02\x02\x02" +
+		"\u0147\x03\x02\x02\x02\x02\u0149\x03\x02\x02\x02\x02\u014B\x03\x02\x02" +
+		"\x02\x02\u014D\x03\x02\x02\x02\x02\u014F\x03\x02\x02\x02\x02\u0151\x03" +
+		"\x02\x02\x02\x02\u0153\x03\x02\x02\x02\x02\u0155\x03\x02\x02\x02\x02\u0157" +
+		"\x03\x02\x02\x02\x02\u0159\x03\x02\x02\x02\x02\u015B\x03\x02\x02\x02\x02" +
+		"\u015D\x03\x02\x02\x02\x02\u015F\x03\x02\x02\x02\x02\u0161\x03\x02\x02" +
+		"\x02\x02\u0163\x03\x02\x02\x02\x02\u0165\x03\x02\x02\x02\x02\u0167\x03" +
+		"\x02\x02\x02\x02\u0169\x03\x02\x02\x02\x02\u016B\x03\x02\x02\x02\x02\u016D" +
+		"\x03\x02\x02\x02\x02\u016F\x03\x02\x02\x02\x02\u0171\x03\x02\x02\x02\x02" +
+		"\u0173\x03\x02\x02\x02\x02\u0175\x03\x02\x02\x02\x02\u0177\x03\x02\x02" +
+		"\x02\x02\u0179\x03\x02\x02\x02\x02\u017B\x03\x02\x02\x02\x02\u017D\x03" +
+		"\x02\x02\x02\x02\u017F\x03\x02\x02\x02\x02\u0181\x03\x02\x02\x02\x02\u0183" +
+		"\x03\x02\x02\x02\x02\u0185\x03\x02\x02\x02\x02\u0187\x03\x02\x02\x02\x02" +
+		"\u0189\x03\x02\x02\x02\x02\u018B\x03\x02\x02\x02\x02\u018D\x03\x02\x02" +
+		"\x02\x02\u018F\x03\x02\x02\x02\x02\u0191\x03\x02\x02\x02\x02\u0193\x03" +
+		"\x02\x02\x02\x02\u0195\x03\x02\x02\x02\x02\u0197\x03\x02\x02\x02\x02\u0199" +
+		"\x03\x02\x02\x02\x02\u019B\x03\x02\x02\x02\x02\u019D\x03\x02\x02\x02\x02" +
+		"\u019F\x03\x02\x02\x02\x02\u01A1\x03\x02\x02\x02\x02\u01A3\x03\x02\x02" +
+		"\x02\x02\u01A5\x03\x02\x02\x02\x02\u01A7\x03\x02\x02\x02\x02\u01A9\x03" +
+		"\x02\x02\x02\x02\u01AB\x03\x02\x02\x02\x02\u01AD\x03\x02\x02\x02\x02\u01AF" +
+		"\x03\x02\x02\x02\x02\u01B1\x03\x02\x02\x02\x02\u01B3\x03\x02\x02\x02\x02" +
+		"\u01B5\x03\x02\x02\x02\x02\u01B7\x03\x02\x02\x02\x02\u01B9\x03\x02\x02" +
+		"\x02\x02\u01BB\x03\x02\x02\x02\x02\u01BD\x03\x02\x02\x02\x02\u01BF\x03" +
+		"\x02\x02\x02\x02\u01C1\x03\x02\x02\x02\x02\u01C3\x03\x02\x02\x02\x02\u01C5" +
+		"\x03\x02\x02\x02\x02\u01C7\x03\x02\x02\x02\x02\u01C9\x03\x02\x02\x02\x02" +
+		"\u01CB\x03\x02\x02\x02\x02\u01CD\x03\x02\x02\x02\x02\u01CF\x03\x02\x02" +
+		"\x02\x02\u01D1\x03\x02\x02\x02\x02\u01D3\x03\x02\x02\x02\x02\u01D5\x03" +
+		"\x02\x02\x02\x02\u01D7\x03\x02\x02\x02\x02\u01D9\x03\x02\x02\x02\x02\u01DB" +
+		"\x03\x02\x02\x02\x02\u01DD\x03\x02\x02\x02\x02\u01DF\x03\x02\x02\x02\x02" +
+		"\u01E1\x03\x02\x02\x02\x02\u01E3\x03\x02\x02\x02\x02\u01E5\x03\x02\x02" +
+		"\x02\x02\u01E7\x03\x02\x02\x02\x02\u01E9\x03\x02\x02\x02\x02\u01EB\x03" +
+		"\x02\x02\x02\x02\u01ED\x03\x02\x02\x02\x02\u01EF\x03\x02\x02\x02\x02\u01F1" +
+		"\x03\x02\x02\x02\x02\u01F3\x03\x02\x02\x02\x02\u01F5\x03\x02\x02\x02\x02" +
+		"\u01F7\x03\x02\x02\x02\x02\u01F9\x03\x02\x02\x02\x02\u01FB\x03\x02\x02" +
+		"\x02\x02\u01FD\x03\x02\x02\x02\x02\u01FF\x03\x02\x02\x02\x02\u0201\x03" +
+		"\x02\x02\x02\x02\u0203\x03\x02\x02\x02\x02\u0205\x03\x02\x02\x02\x02\u0207" +
+		"\x03\x02\x02\x02\x02\u0209\x03\x02\x02\x02\x02\u020B\x03\x02\x02\x02\x02" +
+		"\u020D\x03\x02\x02\x02\x02\u020F\x03\x02\x02\x02\x02\u0211\x03\x02\x02" +
+		"\x02\x02\u0213\x03\x02\x02\x02\x02\u0215\x03\x02\x02\x02\x02\u0217\x03" +
+		"\x02\x02\x02\x02\u0219\x03\x02\x02\x02\x02\u021B\x03\x02\x02\x02\x02\u021D" +
+		"\x03\x02\x02\x02\x02\u021F\x03\x02\x02\x02\x02\u0221\x03\x02\x02\x02\x02" +
+		"\u0223\x03\x02\x02\x02\x02\u0225\x03\x02\x02\x02\x02\u0227\x03\x02\x02" +
+		"\x02\x02\u0229\x03\x02\x02\x02\x02\u022B\x03\x02\x02\x02\x02\u022D\x03" +
+		"\x02\x02\x02\x02\u022F\x03\x02\x02\x02\x02\u0231\x03\x02\x02\x02\x02\u0233" +
+		"\x03\x02\x02\x02\x02\u0235\x03\x02\x02\x02\x02\u0237\x03\x02\x02\x02\x02" +
+		"\u0239\x03\x02\x02\x02\x02\u023B\x03\x02\x02\x02\x02\u023D\x03\x02\x02" +
+		"\x02\x02\u023F\x03\x02\x02\x02\x02\u0241\x03\x02\x02\x02\x02\u0243\x03" +
+		"\x02\x02\x02\x02\u0245\x03\x02\x02\x02\x02\u0247\x03\x02\x02\x02\x02\u0249" +
+		"\x03\x02\x02\x02\x02\u024B\x03\x02\x02\x02\x02\u024D\x03\x02\x02\x02\x02" +
+		"\u024F\x03\x02\x02\x02\x02\u0251\x03\x02\x02\x02\x02\u0253\x03\x02\x02" +
+		"\x02\x02\u0255\x03\x02\x02\x02\x02\u0257\x03\x02\x02\x02\x02\u0259\x03" +
+		"\x02\x02\x02\x02\u025B\x03\x02\x02\x02\x02\u025D\x03\x02\x02\x02\x02\u0263" +
+		"\x03\x02\x02\x02\x02\u0265\x03\x02\x02\x02\x02\u0267\x03\x02\x02\x02\x02" +
+		"\u0269\x03\x02\x02\x02\x02\u026D\x03\x02\x02\x02\x03\u026F\x03\x02\x02" +
+		"\x02\x05\u0276\x03\x02\x02\x02\x07\u027F\x03\x02\x02\x02\t\u0284\x03\x02" +
+		"\x02\x02\v\u0289\x03\x02\x02\x02\r\u028F\x03\x02\x02\x02\x0F\u0296\x03" +
+		"\x02\x02\x02\x11\u029D\x03\x02\x02\x02\x13\u02A3\x03\x02\x02\x02\x15\u02A9" +
+		"\x03\x02\x02\x02\x17\u02AE\x03\x02\x02\x02\x19\u02B3\x03\x02\x02\x02\x1B" +
+		"\u02B8\x03\x02\x02\x02\x1D\u02BC\x03\x02\x02\x02\x1F\u02C1\x03\x02\x02" +
+		"\x02!\u02C7\x03\x02\x02\x02#\u02CE\x03\x02\x02\x02%\u02D4\x03\x02\x02" +
+		"\x02\'\u02DA\x03\x02\x02\x02)\u02DF\x03\x02\x02\x02+\u02E7\x03\x02\x02" +
+		"\x02-\u02F0\x03\x02\x02\x02/\u02FA\x03\x02\x02\x021\u0301\x03\x02\x02" +
+		"\x023\u0304\x03\x02\x02\x025\u0307\x03\x02\x02\x027\u030A\x03\x02\x02" +
+		"\x029\u030D\x03\x02\x02\x02;\u0314\x03\x02\x02\x02=\u031A\x03\x02\x02" +
+		"\x02?\u031C\x03\x02\x02\x02A\u0321\x03\x02\x02\x02C\u032A\x03\x02\x02" +
+		"\x02E\u0331\x03\x02\x02\x02G\u0336\x03\x02\x02\x02I\u033A\x03\x02\x02" +
+		"\x02K\u033D\x03\x02\x02\x02M\u0341\x03\x02\x02\x02O\u034B\x03\x02\x02" +
+		"\x02Q\u0357\x03\x02\x02\x02S\u0369\x03\x02\x02\x02U\u0374\x03\x02\x02" +
+		"\x02W\u037B\x03\x02\x02\x02Y\u0381\x03\x02\x02\x02[\u038B\x03\x02\x02" +
+		"\x02]\u0396\x03\x02\x02\x02_\u03A4\x03\x02\x02\x02a\u03B4\x03\x02\x02" +
+		"\x02c\u03C1\x03\x02\x02\x02e\u03CD\x03\x02\x02\x02g\u03DA\x03\x02\x02" +
+		"\x02i\u03E5\x03\x02\x02\x02k\u03F2\x03\x02\x02\x02m\u0401\x03\x02\x02" +
+		"\x02o\u040C\x03\x02\x02\x02q\u0416\x03\x02\x02\x02s\u0429\x03\x02\x02" +
+		"\x02u\u0441\x03\x02\x02\x02w\u0446\x03\x02\x02\x02y\u0449\x03\x02\x02" +
+		"\x02{\u044D\x03\x02\x02\x02}\u0450\x03\x02\x02\x02\x7F\u0454\x03\x02\x02" +
+		"\x02\x81\u0458\x03\x02\x02\x02\x83\u045D\x03\x02\x02\x02\x85\u0463\x03" +
+		"\x02\x02\x02\x87\u046A\x03\x02\x02\x02\x89\u0473\x03\x02\x02\x02\x8B\u047C" +
+		"\x03\x02\x02\x02\x8D\u0488\x03\x02\x02\x02\x8F\u0494\x03\x02\x02\x02\x91" +
+		"\u049B\x03\x02\x02\x02\x93\u04A2\x03\x02\x02\x02\x95\u04A7\x03\x02\x02" +
+		"\x02\x97\u04AB\x03\x02\x02\x02\x99\u04B0\x03\x02\x02\x02\x9B\u04B6\x03" +
+		"\x02\x02\x02\x9D\u04BE\x03\x02\x02\x02\x9F\u04C3\x03\x02\x02\x02\xA1\u04D6" +
+		"\x03\x02\x02\x02\xA3\u04E9\x03\x02\x02\x02\xA5\u04F7\x03\x02\x02\x02\xA7" +
+		"\u0508\x03\x02\x02\x02\xA9\u0514\x03\x02\x02\x02\xAB\u0520\x03\x02\x02" +
+		"\x02\xAD\u0530\x03\x02\x02\x02\xAF\u053B\x03\x02\x02\x02\xB1\u0546\x03" +
+		"\x02\x02\x02\xB3\u054F\x03\x02\x02\x02\xB5\u055A\x03\x02\x02\x02\xB7\u0565" +
+		"\x03\x02\x02\x02\xB9\u056F\x03\x02\x02\x02\xBB\u0576\x03\x02\x02\x02\xBD" +
+		"\u0582\x03\x02\x02\x02\xBF\u0586\x03\x02\x02\x02\xC1\u058E\x03\x02\x02" +
+		"\x02\xC3\u0595\x03\x02\x02\x02\xC5\u059A\x03\x02\x02\x02\xC7\u05A0\x03" +
+		"\x02\x02\x02\xC9\u05A7\x03\x02\x02\x02\xCB\u05AF\x03\x02\x02\x02\xCD\u05B1" +
+		"\x03\x02\x02\x02\xCF\u05B3\x03\x02\x02\x02\xD1\u05B5\x03\x02\x02\x02\xD3" +
+		"\u05B7\x03\x02\x02\x02\xD5\u05B9\x03\x02\x02\x02\xD7\u05BB\x03\x02\x02" +
+		"\x02\xD9\u05BE\x03\x02\x02\x02\xDB\u05C1\x03\x02\x02\x02\xDD\u05C4\x03" +
+		"\x02\x02\x02\xDF\u05C6\x03\x02\x02\x02\xE1\u05C8\x03\x02\x02\x02\xE3\u05CA" +
+		"\x03\x02\x02\x02\xE5\u05CC\x03\x02\x02\x02\xE7\u05CE\x03\x02\x02\x02\xE9" +
+		"\u05D0\x03\x02\x02\x02\xEB\u05D2\x03\x02\x02\x02\xED\u05D4\x03\x02\x02" +
+		"\x02\xEF\u05D6\x03\x02\x02\x02\xF1\u05D8\x03\x02\x02\x02\xF3\u05DA\x03" +
+		"\x02\x02\x02\xF5\u05DC\x03\x02\x02\x02\xF7\u05DE\x03\x02\x02\x02\xF9\u05E0" +
+		"\x03\x02\x02\x02\xFB\u05E2\x03\x02\x02\x02\xFD\u05E4\x03\x02\x02\x02\xFF" +
+		"\u05E6\x03\x02\x02\x02\u0101\u05EA\x03\x02\x02\x02\u0103\u05F0\x03\x02" +
+		"\x02\x02\u0105\u05FF\x03\x02\x02\x02\u0107\u0605\x03\x02\x02\x02\u0109" +
+		"\u0611\x03\x02\x02\x02\u010B\u0615\x03\x02\x02\x02\u010D\u061A\x03\x02" +
+		"\x02\x02\u010F\u0621\x03\x02\x02\x02\u0111\u0625\x03\x02\x02\x02\u0113" +
+		"\u062A\x03\x02\x02\x02\u0115\u0630\x03\x02\x02\x02\u0117\u0636\x03\x02" +
+		"\x02\x02\u0119\u063D\x03\x02\x02\x02\u011B\u0641\x03\x02\x02\x02\u011D" +
+		"\u0647\x03\x02\x02\x02\u011F\u0650\x03\x02\x02\x02\u0121\u0658\x03\x02" +
+		"\x02\x02\u0123\u0664\x03\x02\x02\x02\u0125\u066F\x03\x02\x02\x02\u0127";
+	private static readonly _serializedATNSegment2: string =
+		"\u067A\x03\x02\x02\x02\u0129\u067F\x03\x02\x02\x02\u012B\u0685\x03\x02" +
+		"\x02\x02\u012D\u068A\x03\x02\x02\x02\u012F\u068F\x03\x02\x02\x02\u0131" +
+		"\u0696\x03\x02\x02\x02\u0133\u069F\x03\x02\x02\x02\u0135\u06AD\x03\x02" +
+		"\x02\x02\u0137\u06B4\x03\x02\x02\x02\u0139\u06C0\x03\x02\x02\x02\u013B" +
+		"\u06C8\x03\x02\x02\x02\u013D\u06D1\x03\x02\x02\x02\u013F\u06DC\x03\x02" +
+		"\x02\x02\u0141\u06E7\x03\x02\x02\x02\u0143\u06EC\x03\x02\x02\x02\u0145" +
+		"\u06F6\x03\x02\x02\x02\u0147\u06F8\x03\x02\x02\x02\u0149\u06FB\x03\x02" +
+		"\x02\x02\u014B\u06FF\x03\x02\x02\x02\u014D\u0704\x03\x02\x02\x02\u014F" +
+		"\u070C\x03\x02\x02\x02\u0151\u0711\x03\x02\x02\x02\u0153\u0717\x03\x02" +
+		"\x02\x02\u0155\u0719\x03\x02\x02\x02\u0157\u071D\x03\x02\x02\x02\u0159" +
+		"\u0723\x03\x02\x02\x02\u015B\u0726\x03\x02\x02\x02\u015D\u072A\x03\x02" +
+		"\x02\x02\u015F\u0730\x03\x02\x02\x02\u0161\u0735\x03\x02\x02\x02\u0163" +
+		"\u0739\x03\x02\x02\x02\u0165\u073C\x03\x02\x02\x02\u0167\u0740\x03\x02" +
+		"\x02\x02\u0169\u0746\x03\x02\x02\x02\u016B\u074B\x03\x02\x02\x02\u016D" +
+		"\u0751\x03\x02\x02\x02\u016F\u0756\x03\x02\x02\x02\u0171\u075B\x03\x02" +
+		"\x02\x02\u0173\u0764\x03\x02\x02\x02\u0175\u0769\x03\x02\x02\x02\u0177" +
+		"\u076E\x03\x02\x02\x02\u0179\u0773\x03\x02\x02\x02\u017B\u0779\x03\x02" +
+		"\x02\x02\u017D\u077D\x03\x02\x02\x02\u017F\u0781\x03\x02\x02\x02\u0181" +
+		"\u0789\x03\x02\x02\x02\u0183\u0791\x03\x02\x02\x02\u0185\u0795\x03\x02" +
+		"\x02\x02\u0187\u0799\x03\x02\x02\x02\u0189\u07A1\x03\x02\x02\x02\u018B" +
+		"\u07A9\x03\x02\x02\x02\u018D\u07B6\x03\x02\x02\x02\u018F\u07C3\x03\x02" +
+		"\x02\x02\u0191\u07D5\x03\x02\x02\x02\u0193\u07DD\x03\x02\x02\x02\u0195" +
+		"\u07E2\x03\x02\x02\x02\u0197\u07EB\x03\x02\x02\x02\u0199\u07F7\x03\x02" +
+		"\x02\x02\u019B\u0800\x03\x02\x02\x02\u019D\u0808\x03\x02\x02\x02\u019F" +
+		"\u0813\x03\x02\x02\x02\u01A1\u081D\x03\x02\x02\x02\u01A3\u0827\x03\x02" +
+		"\x02\x02\u01A5\u0831\x03\x02\x02\x02\u01A7\u083B\x03\x02\x02\x02\u01A9" +
+		"\u084A\x03\x02\x02\x02\u01AB\u0858\x03\x02\x02\x02\u01AD\u0861\x03\x02" +
+		"\x02\x02\u01AF\u086A\x03\x02\x02\x02\u01B1\u0874\x03\x02\x02\x02\u01B3" +
+		"\u0878\x03\x02\x02\x02\u01B5\u0883\x03\x02\x02\x02\u01B7\u088F\x03\x02" +
+		"\x02\x02\u01B9\u0897\x03\x02\x02\x02\u01BB\u089F\x03\x02\x02\x02\u01BD" +
+		"\u08A4\x03\x02\x02\x02\u01BF\u08B0\x03\x02\x02\x02\u01C1\u08BA\x03\x02" +
+		"\x02\x02\u01C3\u08C2\x03\x02\x02\x02\u01C5\u08CB\x03\x02\x02\x02\u01C7" +
+		"\u08D4\x03\x02\x02\x02\u01C9\u08E2\x03\x02\x02\x02\u01CB\u08F1\x03\x02" +
+		"\x02\x02\u01CD\u08F8\x03\x02\x02\x02\u01CF\u0902\x03\x02\x02\x02\u01D1" +
+		"\u0908\x03\x02\x02\x02\u01D3\u090E\x03\x02\x02\x02\u01D5\u0913\x03\x02" +
+		"\x02\x02\u01D7\u0916\x03\x02\x02\x02\u01D9\u091C\x03\x02\x02\x02\u01DB" +
+		"\u0922\x03\x02\x02\x02\u01DD\u0929\x03\x02\x02\x02\u01DF\u0933\x03\x02" +
+		"\x02\x02\u01E1\u093A\x03\x02\x02\x02\u01E3\u0941\x03\x02\x02\x02\u01E5" +
+		"\u0947\x03\x02\x02\x02\u01E7\u094C\x03\x02\x02\x02\u01E9\u0952\x03\x02" +
+		"\x02\x02\u01EB\u0959\x03\x02\x02\x02\u01ED\u0961\x03\x02\x02\x02\u01EF" +
+		"\u0966\x03\x02\x02\x02\u01F1\u096B\x03\x02\x02\x02\u01F3\u0972\x03\x02" +
+		"\x02\x02\u01F5\u097C\x03\x02\x02\x02\u01F7\u0983\x03\x02\x02\x02\u01F9" +
+		"\u098A\x03\x02\x02\x02\u01FB\u098D\x03\x02\x02\x02\u01FD\u0994\x03\x02" +
+		"\x02\x02\u01FF\u099A\x03\x02\x02\x02\u0201\u09A7\x03\x02\x02\x02\u0203" +
+		"\u09BB\x03\x02\x02\x02\u0205\u09CD\x03\x02\x02\x02\u0207\u09E1\x03\x02" +
+		"\x02\x02\u0209\u09ED\x03\x02\x02\x02\u020B\u09FA\x03\x02\x02\x02\u020D" +
+		"\u0A11\x03\x02\x02\x02\u020F\u0A22\x03\x02\x02\x02\u0211\u0A2B\x03\x02" +
+		"\x02\x02\u0213\u0A4F\x03\x02\x02\x02\u0215\u0A55\x03\x02\x02\x02\u0217" +
+		"\u0A66\x03\x02\x02\x02\u0219\u0A74\x03\x02\x02\x02\u021B\u0A85\x03\x02" +
+		"\x02\x02\u021D\u0AA0\x03\x02\x02\x02\u021F\u0AA7\x03\x02\x02\x02\u0221" +
+		"\u0AAD\x03\x02\x02\x02\u0223\u0AC2\x03\x02\x02\x02\u0225\u0AD6\x03\x02" +
+		"\x02\x02\u0227\u0AEB\x03\x02\x02\x02\u0229\u0AF9\x03\x02\x02\x02\u022B" +
+		"\u0B03\x03\x02\x02\x02\u022D\u0B0B\x03\x02\x02\x02\u022F\u0B1D\x03\x02" +
+		"\x02\x02\u0231\u0B35\x03\x02\x02\x02\u0233\u0B44\x03\x02\x02\x02\u0235" +
+		"\u0B59\x03\x02\x02\x02\u0237\u0B62\x03\x02\x02\x02\u0239\u0B6E\x03\x02" +
+		"\x02\x02\u023B\u0B7C\x03\x02\x02\x02\u023D\u0B8B\x03\x02\x02\x02\u023F" +
+		"\u0B9E\x03\x02\x02\x02\u0241\u0BA6\x03\x02\x02\x02\u0243\u0BAB\x03\x02" +
+		"\x02\x02\u0245\u0BB7\x03\x02\x02\x02\u0247\u0BBC\x03\x02\x02\x02\u0249" +
+		"\u0BCD\x03\x02\x02\x02\u024B\u0BD2\x03\x02\x02\x02\u024D\u0BD5\x03\x02" +
+		"\x02\x02\u024F\u0BD7\x03\x02\x02\x02\u0251\u0BD9\x03\x02\x02\x02\u0253" +
+		"\u0BDB\x03\x02\x02\x02\u0255\u0BDD\x03\x02\x02\x02\u0257\u0BDF\x03\x02" +
+		"\x02\x02\u0259\u0BE1\x03\x02\x02\x02\u025B\u0BE4\x03\x02\x02\x02\u025D" +
+		"\u0BED\x03\x02\x02\x02\u025F\u0BFD\x03\x02\x02\x02\u0261\u0C01\x03\x02" +
+		"\x02\x02\u0263\u0C0B\x03\x02\x02\x02\u0265\u0C0E\x03\x02\x02\x02\u0267" +
+		"\u0C1B\x03\x02\x02\x02\u0269\u0C28\x03\x02\x02\x02\u026B\u0C35\x03\x02" +
+		"\x02\x02\u026D\u0C37\x03\x02\x02\x02\u026F\u0270\x07U\x02\x02\u0270\u0271" +
+		"\x07G\x02\x02\u0271\u0272\x07C\x02\x02\u0272\u0273\x07T\x02\x02\u0273" +
+		"\u0274\x07E\x02\x02\u0274\u0275\x07J\x02\x02\u0275\x04\x03\x02\x02\x02" +
+		"\u0276\u0277\x07F\x02\x02\u0277\u0278\x07G\x02\x02\u0278\u0279\x07U\x02" +
+		"\x02\u0279\u027A\x07E\x02\x02\u027A\u027B\x07T\x02\x02\u027B\u027C\x07" +
+		"K\x02\x02\u027C\u027D\x07D\x02\x02\u027D\u027E\x07G\x02\x02\u027E\x06" +
+		"\x03\x02\x02\x02\u027F\u0280\x07U\x02\x02\u0280\u0281\x07J\x02\x02\u0281" +
+		"\u0282\x07Q\x02\x02\u0282\u0283\x07Y\x02\x02\u0283\b\x03\x02\x02\x02\u0284" +
+		"\u0285\x07H\x02\x02\u0285\u0286\x07T\x02\x02\u0286\u0287\x07Q\x02\x02" +
+		"\u0287\u0288\x07O\x02\x02\u0288\n\x03\x02\x02\x02\u0289\u028A\x07Y\x02" +
+		"\x02\u028A\u028B\x07J\x02\x02\u028B\u028C\x07G\x02\x02\u028C\u028D\x07" +
+		"T\x02\x02\u028D\u028E\x07G\x02\x02\u028E\f\x03\x02\x02\x02\u028F\u0290" +
+		"\x07H\x02\x02\u0290\u0291\x07K\x02\x02\u0291\u0292\x07G\x02\x02\u0292" +
+		"\u0293\x07N\x02\x02\u0293\u0294\x07F\x02\x02\u0294\u0295\x07U\x02\x02" +
+		"\u0295\x0E\x03\x02\x02\x02\u0296\u0297\x07T\x02\x02\u0297\u0298\x07G\x02" +
+		"\x02\u0298\u0299\x07P\x02\x02\u0299\u029A\x07C\x02\x02\u029A\u029B\x07" +
+		"O\x02\x02\u029B\u029C\x07G\x02\x02\u029C\x10\x03\x02\x02\x02\u029D\u029E" +
+		"\x07U\x02\x02\u029E\u029F\x07V\x02\x02\u029F\u02A0\x07C\x02\x02\u02A0" +
+		"\u02A1\x07V\x02\x02\u02A1\u02A2\x07U\x02\x02\u02A2\x12\x03\x02\x02\x02" +
+		"\u02A3\u02A4\x07F\x02\x02\u02A4\u02A5\x07G\x02\x02\u02A5\u02A6\x07F\x02" +
+		"\x02\u02A6\u02A7\x07W\x02\x02\u02A7\u02A8\x07R\x02\x02\u02A8\x14\x03\x02" +
+		"\x02\x02\u02A9\u02AA\x07U\x02\x02\u02AA\u02AB\x07Q\x02\x02\u02AB\u02AC" +
+		"\x07T\x02\x02\u02AC\u02AD\x07V\x02\x02\u02AD\x16\x03\x02\x02\x02\u02AE" +
+		"\u02AF\x07G\x02\x02\u02AF\u02B0\x07X\x02\x02\u02B0\u02B1\x07C\x02\x02" +
+		"\u02B1\u02B2\x07N\x02\x02\u02B2\x18\x03\x02\x02\x02\u02B3\u02B4\x07J\x02" +
+		"\x02\u02B4\u02B5\x07G\x02\x02\u02B5\u02B6\x07C\x02\x02\u02B6\u02B7\x07" +
+		"F\x02\x02\u02B7\x1A\x03\x02\x02\x02\u02B8\u02B9\x07V\x02\x02\u02B9\u02BA" +
+		"\x07Q\x02\x02\u02BA\u02BB\x07R\x02\x02\u02BB\x1C\x03\x02\x02\x02\u02BC" +
+		"\u02BD\x07T\x02\x02\u02BD\u02BE\x07C\x02\x02\u02BE\u02BF\x07T\x02\x02" +
+		"\u02BF\u02C0\x07G\x02\x02\u02C0\x1E\x03\x02\x02\x02\u02C1\u02C2\x07R\x02" +
+		"\x02\u02C2\u02C3\x07C\x02\x02\u02C3\u02C4\x07T\x02\x02\u02C4\u02C5\x07" +
+		"U\x02\x02\u02C5\u02C6\x07G\x02\x02\u02C6 \x03\x02\x02\x02\u02C7\u02C8" +
+		"\x07O\x02\x02\u02C8\u02C9\x07G\x02\x02\u02C9\u02CA\x07V\x02\x02\u02CA" +
+		"\u02CB\x07J\x02\x02\u02CB\u02CC\x07Q\x02\x02\u02CC\u02CD\x07F\x02\x02" +
+		"\u02CD\"\x03\x02\x02\x02\u02CE\u02CF\x07T\x02\x02\u02CF\u02D0\x07G\x02" +
+		"\x02\u02D0\u02D1\x07I\x02\x02\u02D1\u02D2\x07G\x02\x02\u02D2\u02D3\x07" +
+		"Z\x02\x02\u02D3$\x03\x02\x02\x02\u02D4\u02D5\x07R\x02\x02\u02D5\u02D6" +
+		"\x07W\x02\x02\u02D6\u02D7\x07P\x02\x02\u02D7\u02D8\x07E\x02\x02\u02D8" +
+		"\u02D9\x07V\x02\x02\u02D9&\x03\x02\x02\x02\u02DA\u02DB\x07I\x02\x02\u02DB" +
+		"\u02DC\x07T\x02\x02\u02DC\u02DD\x07Q\x02\x02\u02DD\u02DE\x07M\x02\x02" +
+		"\u02DE(\x03\x02\x02\x02\u02DF\u02E0\x07R\x02\x02\u02E0\u02E1\x07C\x02" +
+		"\x02\u02E1\u02E2\x07V\x02\x02\u02E2\u02E3\x07V\x02\x02\u02E3\u02E4\x07" +
+		"G\x02\x02\u02E4\u02E5\x07T\x02\x02\u02E5\u02E6\x07P\x02\x02\u02E6*\x03" +
+		"\x02\x02\x02\u02E7\u02E8\x07R\x02\x02\u02E8\u02E9\x07C\x02\x02\u02E9\u02EA" +
+		"\x07V\x02\x02\u02EA\u02EB\x07V\x02\x02\u02EB\u02EC\x07G\x02\x02\u02EC" +
+		"\u02ED\x07T\x02\x02\u02ED\u02EE\x07P\x02\x02\u02EE\u02EF\x07U\x02\x02" +
+		"\u02EF,\x03\x02\x02\x02\u02F0\u02F1\x07P\x02\x02\u02F1\u02F2\x07G\x02" +
+		"\x02\u02F2\u02F3\x07Y\x02\x02\u02F3\u02F4\x07a\x02\x02\u02F4\u02F5\x07" +
+		"H\x02\x02\u02F5\u02F6\x07K\x02\x02\u02F6\u02F7\x07G\x02\x02\u02F7\u02F8" +
+		"\x07N\x02\x02\u02F8\u02F9\x07F\x02\x02\u02F9.\x03\x02\x02\x02\u02FA\u02FB" +
+		"\x07M\x02\x02\u02FB\u02FC\x07O\x02\x02\u02FC\u02FD\x07G\x02\x02\u02FD" +
+		"\u02FE\x07C\x02\x02\u02FE\u02FF\x07P\x02\x02\u02FF\u0300\x07U\x02\x02" +
+		"\u03000\x03\x02\x02\x02\u0301\u0302\x07C\x02\x02\u0302\u0303\x07F\x02" +
+		"\x02\u03032\x03\x02\x02\x02\u0304\u0305\x07O\x02\x02\u0305\u0306\x07N" +
+		"\x02\x02\u03064\x03\x02\x02\x02\u0307\u0308\x07C\x02\x02\u0308\u0309\x07" +
+		"U\x02\x02\u03096\x03\x02\x02\x02\u030A\u030B\x07D\x02\x02\u030B\u030C" +
+		"\x07[\x02\x02\u030C8\x03\x02\x02\x02\u030D\u030E\x07U\x02\x02\u030E\u030F" +
+		"\x07Q\x02\x02\u030F\u0310\x07W\x02\x02\u0310\u0311\x07T\x02\x02\u0311" +
+		"\u0312\x07E\x02\x02\u0312\u0313\x07G\x02\x02\u0313:\x03\x02\x02\x02\u0314" +
+		"\u0315\x07K\x02\x02\u0315\u0316\x07P\x02\x02\u0316\u0317\x07F\x02\x02" +
+		"\u0317\u0318\x07G\x02\x02\u0318\u0319\x07Z\x02\x02\u0319<\x03\x02\x02" +
+		"\x02\u031A\u031B\x07F\x02\x02\u031B>\x03\x02\x02\x02\u031C\u031D\x07F" +
+		"\x02\x02\u031D\u031E\x07G\x02\x02\u031E\u031F\x07U\x02\x02\u031F\u0320" +
+		"\x07E\x02\x02\u0320@\x03\x02\x02\x02\u0321\u0322\x07E\x02\x02\u0322\u0323" +
+		"\x07C\x02\x02\u0323\u0324\x07V\x02\x02\u0324\u0325\x07C\x02\x02\u0325" +
+		"\u0326\x07N\x02\x02\u0326\u0327\x07Q\x02\x02\u0327\u0328\x07I\x02\x02" +
+		"\u0328\u0329\x07U\x02\x02\u0329B\x03\x02\x02\x02\u032A\u032B\x07U\x02" +
+		"\x02\u032B\u032C\x07Q\x02\x02\u032C\u032D\x07T\x02\x02\u032D\u032E\x07" +
+		"V\x02\x02\u032E\u032F\x07D\x02\x02\u032F\u0330\x07[\x02\x02\u0330D\x03" +
+		"\x02\x02\x02\u0331\u0332\x07C\x02\x02\u0332\u0333\x07W\x02\x02\u0333\u0334" +
+		"\x07V\x02\x02\u0334\u0335\x07Q\x02\x02\u0335F\x03\x02\x02\x02\u0336\u0337" +
+		"\x07U\x02\x02\u0337\u0338\x07V\x02\x02\u0338\u0339\x07T\x02\x02\u0339" +
+		"H\x03\x02\x02\x02\u033A\u033B\x07K\x02\x02\u033B\u033C\x07R\x02\x02\u033C" +
+		"J\x03\x02\x02\x02\u033D\u033E\x07P\x02\x02\u033E\u033F\x07W\x02\x02\u033F" +
+		"\u0340\x07O\x02\x02\u0340L\x03\x02\x02\x02\u0341\u0342\x07M\x02\x02\u0342" +
+		"\u0343\x07G\x02\x02\u0343\u0344\x07G\x02\x02\u0344\u0345\x07R\x02\x02" +
+		"\u0345\u0346\x07G\x02\x02\u0346\u0347\x07O\x02\x02\u0347\u0348\x07R\x02" +
+		"\x02\u0348\u0349\x07V\x02\x02\u0349\u034A\x07[\x02\x02\u034AN\x03\x02" +
+		"\x02\x02\u034B\u034C\x07E\x02\x02\u034C\u034D\x07Q\x02\x02\u034D\u034E" +
+		"\x07P\x02\x02\u034E\u034F\x07U\x02\x02\u034F\u0350\x07G\x02\x02\u0350" +
+		"\u0351\x07E\x02\x02\u0351\u0352\x07W\x02\x02\u0352\u0353\x07V\x02\x02" +
+		"\u0353\u0354\x07K\x02\x02\u0354\u0355\x07X\x02\x02\u0355\u0356\x07G\x02" +
+		"\x02\u0356P\x03\x02\x02\x02\u0357\u0358\x07F\x02\x02\u0358\u0359\x07G" +
+		"\x02\x02\u0359\u035A\x07F\x02\x02\u035A\u035B\x07W\x02\x02\u035B\u035C" +
+		"\x07R\x02\x02\u035C\u035D\x07a\x02\x02\u035D\u035E\x07U\x02\x02\u035E" +
+		"\u035F\x07R\x02\x02\u035F\u0360\x07N\x02\x02\u0360\u0361\x07K\x02\x02" +
+		"\u0361\u0362\x07V\x02\x02\u0362\u0363\x07X\x02\x02\u0363\u0364\x07C\x02" +
+		"\x02\u0364\u0365\x07N\x02\x02\u0365\u0366\x07W\x02\x02\u0366\u0367\x07" +
+		"G\x02\x02\u0367\u0368\x07U\x02\x02\u0368R\x03\x02\x02\x02\u0369\u036A" +
+		"\x07R\x02\x02\u036A\u036B\x07C\x02\x02\u036B\u036C\x07T\x02\x02\u036C" +
+		"\u036D\x07V\x02\x02\u036D\u036E\x07K\x02\x02\u036E\u036F\x07V\x02\x02" +
+		"\u036F\u0370\x07K\x02\x02\u0370\u0371\x07Q\x02\x02\u0371\u0372\x07P\x02" +
+		"\x02\u0372\u0373\x07U\x02\x02\u0373T\x03\x02\x02\x02\u0374\u0375\x07C" +
+		"\x02\x02\u0375\u0376\x07N\x02\x02\u0376\u0377\x07N\x02\x02\u0377\u0378" +
+		"\x07P\x02\x02\u0378\u0379\x07W\x02\x02\u0379\u037A\x07O\x02\x02\u037A" +
+		"V\x03\x02\x02\x02\u037B\u037C\x07F\x02\x02\u037C\u037D\x07G\x02\x02\u037D" +
+		"\u037E\x07N\x02\x02\u037E\u037F\x07K\x02\x02\u037F\u0380\x07O\x02\x02" +
+		"\u0380X\x03\x02\x02\x02\u0381\u0382\x07E\x02\x02\u0382\u0383\x07G\x02" +
+		"\x02\u0383\u0384\x07P\x02\x02\u0384\u0385\x07V\x02\x02\u0385\u0386\x07" +
+		"T\x02\x02\u0386\u0387\x07Q\x02\x02\u0387\u0388\x07K\x02\x02\u0388\u0389" +
+		"\x07F\x02\x02\u0389\u038A\x07U\x02\x02\u038AZ\x03\x02\x02\x02\u038B\u038C" +
+		"\x07K\x02\x02\u038C\u038D\x07V\x02\x02\u038D\u038E\x07G\x02\x02\u038E" +
+		"\u038F\x07T\x02\x02\u038F\u0390\x07C\x02\x02\u0390\u0391\x07V\x02\x02" +
+		"\u0391\u0392\x07K\x02\x02\u0392\u0393\x07Q\x02\x02\u0393\u0394\x07P\x02" +
+		"\x02\u0394\u0395\x07U\x02\x02\u0395\\\x03\x02\x02\x02\u0396\u0397\x07" +
+		"F\x02\x02\u0397\u0398\x07K\x02\x02\u0398\u0399\x07U\x02\x02\u0399\u039A" +
+		"\x07V\x02\x02\u039A\u039B\x07C\x02\x02\u039B\u039C\x07P\x02\x02\u039C" +
+		"\u039D\x07E\x02\x02\u039D\u039E\x07G\x02\x02\u039E\u039F\x07a\x02\x02" +
+		"\u039F\u03A0\x07V\x02\x02\u03A0\u03A1\x07[\x02\x02\u03A1\u03A2\x07R\x02" +
+		"\x02\u03A2\u03A3\x07G\x02\x02\u03A3^\x03\x02\x02\x02\u03A4\u03A5\x07P" +
+		"\x02\x02\u03A5\u03A6\x07W\x02\x02\u03A6\u03A7\x07O\x02\x02\u03A7\u03A8" +
+		"\x07D\x02\x02\u03A8\u03A9\x07G\x02\x02\u03A9\u03AA\x07T\x02\x02\u03AA" +
+		"\u03AB\x07a\x02\x02\u03AB\u03AC\x07Q\x02\x02\u03AC\u03AD\x07H\x02\x02" +
+		"\u03AD\u03AE\x07a\x02\x02\u03AE\u03AF\x07V\x02\x02\u03AF\u03B0\x07T\x02" +
+		"\x02\u03B0\u03B1\x07G\x02\x02\u03B1\u03B2\x07G\x02\x02\u03B2\u03B3\x07" +
+		"U\x02\x02\u03B3`\x03\x02\x02\x02\u03B4\u03B5\x07U\x02\x02\u03B5\u03B6" +
+		"\x07J\x02\x02\u03B6\u03B7\x07K\x02\x02\u03B7\u03B8\x07P\x02\x02\u03B8" +
+		"\u03B9\x07I\x02\x02\u03B9\u03BA\x07N\x02\x02\u03BA\u03BB\x07G\x02\x02" +
+		"\u03BB\u03BC\x07a\x02\x02\u03BC\u03BD\x07U\x02\x02\u03BD\u03BE\x07K\x02" +
+		"\x02\u03BE\u03BF\x07\\\x02\x02\u03BF\u03C0\x07G\x02\x02\u03C0b\x03\x02" +
+		"\x02\x02\u03C1\u03C2\x07U\x02\x02\u03C2\u03C3\x07C\x02\x02\u03C3\u03C4" +
+		"\x07O\x02\x02\u03C4\u03C5\x07R\x02\x02\u03C5\u03C6\x07N\x02\x02\u03C6" +
+		"\u03C7\x07G\x02\x02\u03C7\u03C8\x07a\x02\x02\u03C8\u03C9\x07U\x02\x02" +
+		"\u03C9\u03CA\x07K\x02\x02\u03CA\u03CB\x07\\\x02\x02\u03CB\u03CC\x07G\x02" +
+		"\x02\u03CCd\x03\x02\x02\x02\u03CD\u03CE\x07Q\x02\x02\u03CE\u03CF\x07W" +
+		"\x02\x02\u03CF\u03D0\x07V\x02\x02\u03D0\u03D1\x07R\x02\x02\u03D1\u03D2" +
+		"\x07W\x02\x02\u03D2\u03D3\x07V\x02\x02\u03D3\u03D4\x07a\x02\x02\u03D4" +
+		"\u03D5\x07C\x02\x02\u03D5\u03D6\x07H\x02\x02\u03D6\u03D7\x07V\x02\x02" +
+		"\u03D7\u03D8\x07G\x02\x02\u03D8\u03D9\x07T\x02\x02\u03D9f\x03\x02\x02" +
+		"\x02\u03DA\u03DB\x07V\x02\x02\u03DB\u03DC\x07K\x02\x02\u03DC\u03DD\x07" +
+		"O\x02\x02\u03DD\u03DE\x07G\x02\x02\u03DE\u03DF\x07a\x02\x02\u03DF\u03E0" +
+		"\x07F\x02\x02\u03E0\u03E1\x07G\x02\x02\u03E1\u03E2\x07E\x02\x02\u03E2" +
+		"\u03E3\x07C\x02\x02\u03E3\u03E4\x07[\x02\x02\u03E4h\x03\x02\x02\x02\u03E5" +
+		"\u03E6\x07C\x02\x02\u03E6\u03E7\x07P\x02\x02\u03E7\u03E8\x07Q\x02\x02" +
+		"\u03E8\u03E9\x07O\x02\x02\u03E9\u03EA\x07C\x02\x02\u03EA\u03EB\x07N\x02" +
+		"\x02\u03EB\u03EC\x07[\x02\x02\u03EC\u03ED\x07a\x02\x02\u03ED\u03EE\x07" +
+		"T\x02\x02\u03EE\u03EF\x07C\x02\x02\u03EF\u03F0\x07V\x02\x02\u03F0\u03F1" +
+		"\x07G\x02\x02\u03F1j\x03\x02\x02\x02\u03F2\u03F3\x07E\x02\x02\u03F3\u03F4" +
+		"\x07C\x02\x02\u03F4\u03F5\x07V\x02\x02\u03F5\u03F6\x07G\x02\x02\u03F6" +
+		"\u03F7\x07I\x02\x02\u03F7\u03F8\x07Q\x02\x02\u03F8\u03F9\x07T\x02\x02" +
+		"\u03F9\u03FA\x07[\x02\x02\u03FA\u03FB\x07a\x02\x02\u03FB\u03FC\x07H\x02" +
+		"\x02\u03FC\u03FD\x07K\x02\x02\u03FD\u03FE\x07G\x02\x02\u03FE\u03FF\x07" +
+		"N\x02\x02\u03FF\u0400\x07F\x02\x02\u0400l\x03\x02\x02\x02\u0401\u0402" +
+		"\x07V\x02\x02\u0402\u0403\x07K\x02\x02\u0403\u0404\x07O\x02\x02\u0404" +
+		"\u0405\x07G\x02\x02\u0405\u0406\x07a\x02\x02\u0406\u0407\x07H\x02\x02" +
+		"\u0407\u0408\x07K\x02\x02\u0408\u0409\x07G\x02\x02\u0409\u040A\x07N\x02" +
+		"\x02\u040A\u040B\x07F\x02\x02\u040Bn\x03\x02\x02\x02\u040C\u040D\x07V" +
+		"\x02\x02\u040D\u040E\x07K\x02\x02\u040E\u040F\x07O\x02\x02\u040F\u0410" +
+		"\x07G\x02\x02\u0410\u0411\x07a\x02\x02\u0411\u0412\x07\\\x02\x02\u0412" +
+		"\u0413\x07Q\x02\x02\u0413\u0414\x07P\x02\x02\u0414\u0415\x07G\x02\x02" +
+		"\u0415p\x03\x02\x02\x02\u0416\u0417\x07V\x02\x02\u0417\u0418\x07T\x02" +
+		"\x02\u0418\u0419\x07C\x02\x02\u0419\u041A\x07K\x02\x02\u041A\u041B\x07" +
+		"P\x02\x02\u041B\u041C\x07K\x02\x02\u041C\u041D\x07P\x02\x02\u041D\u041E" +
+		"\x07I\x02\x02\u041E\u041F\x07a\x02\x02\u041F\u0420\x07F\x02\x02\u0420" +
+		"\u0421\x07C\x02\x02\u0421\u0422\x07V\x02\x02\u0422\u0423\x07C\x02\x02" +
+		"\u0423\u0424\x07a\x02\x02\u0424\u0425\x07U\x02\x02\u0425\u0426\x07K\x02" +
+		"\x02\u0426\u0427\x07\\\x02\x02\u0427\u0428\x07G\x02\x02\u0428r\x03\x02" +
+		"\x02\x02\u0429\u042A\x07C\x02\x02\u042A\u042B\x07P\x02\x02\u042B\u042C" +
+		"\x07Q\x02\x02\u042C\u042D\x07O\x02\x02\u042D\u042E\x07C\x02\x02\u042E" +
+		"\u042F\x07N\x02\x02\u042F\u0430\x07[\x02\x02\u0430\u0431\x07a\x02\x02" +
+		"\u0431\u0432\x07U\x02\x02\u0432\u0433\x07E\x02\x02\u0433\u0434\x07Q\x02" +
+		"\x02\u0434\u0435\x07T\x02\x02\u0435\u0436\x07G\x02\x02\u0436\u0437\x07" +
+		"a\x02\x02\u0437\u0438\x07V\x02\x02\u0438\u0439\x07J\x02\x02\u0439\u043A" +
+		"\x07T\x02\x02\u043A\u043B\x07G\x02\x02\u043B\u043C\x07U\x02\x02\u043C" +
+		"\u043D\x07J\x02\x02\u043D\u043E\x07Q\x02\x02\u043E\u043F\x07N\x02\x02" +
+		"\u043F\u0440\x07F\x02\x02\u0440t\x03\x02\x02\x02\u0441\u0442\x07E\x02" +
+		"\x02\u0442\u0443\x07C\x02\x02\u0443\u0444\x07U\x02\x02\u0444\u0445\x07" +
+		"G\x02\x02\u0445v\x03\x02\x02\x02\u0446\u0447\x07K\x02\x02\u0447\u0448" +
+		"\x07P\x02\x02\u0448x\x03\x02\x02\x02\u0449\u044A\x07P\x02\x02\u044A\u044B" +
+		"\x07Q\x02\x02\u044B\u044C\x07V\x02\x02\u044Cz\x03\x02\x02\x02\u044D\u044E" +
+		"\x07Q\x02\x02\u044E\u044F\x07T\x02\x02\u044F|\x03\x02\x02\x02\u0450\u0451" +
+		"\x07C\x02\x02\u0451\u0452\x07P\x02\x02\u0452\u0453\x07F\x02\x02\u0453" +
+		"~\x03\x02\x02\x02\u0454\u0455\x07Z\x02\x02\u0455\u0456\x07Q\x02\x02\u0456" +
+		"\u0457\x07T\x02\x02\u0457\x80\x03\x02\x02\x02\u0458\u0459\x07V\x02\x02" +
+		"\u0459\u045A\x07T\x02\x02\u045A\u045B\x07W\x02\x02\u045B\u045C\x07G\x02" +
+		"\x02\u045C\x82\x03\x02\x02\x02\u045D\u045E\x07H\x02\x02\u045E\u045F\x07" +
+		"C\x02\x02\u045F\u0460\x07N\x02\x02\u0460\u0461\x07U\x02\x02\u0461\u0462" +
+		"\x07G\x02\x02\u0462\x84\x03\x02\x02\x02\u0463\u0464\x07T\x02\x02\u0464" +
+		"\u0465\x07G\x02\x02\u0465\u0466\x07I\x02\x02\u0466\u0467\x07G\x02\x02" +
+		"\u0467\u0468\x07Z\x02\x02\u0468\u0469\x07R\x02\x02\u0469\x86\x03\x02\x02" +
+		"\x02\u046A\u046B\x07F\x02\x02\u046B\u046C\x07C\x02\x02\u046C\u046D\x07" +
+		"V\x02\x02\u046D\u046E\x07G\x02\x02\u046E\u046F\x07V\x02\x02\u046F\u0470" +
+		"\x07K\x02\x02\u0470\u0471\x07O\x02\x02\u0471\u0472\x07G\x02\x02\u0472" +
+		"\x88\x03\x02\x02\x02\u0473\u0474\x07K\x02\x02\u0474\u0475\x07P\x02\x02" +
+		"\u0475\u0476\x07V\x02\x02\u0476\u0477\x07G\x02\x02\u0477\u0478\x07T\x02" +
+		"\x02\u0478\u0479\x07X\x02\x02\u0479\u047A\x07C\x02\x02\u047A\u047B\x07" +
+		"N\x02\x02\u047B\x8A\x03\x02\x02\x02\u047C\u047D\x07O\x02\x02\u047D\u047E" +
+		"\x07K\x02\x02\u047E\u047F\x07E\x02\x02\u047F\u0480\x07T\x02\x02\u0480" +
+		"\u0481\x07Q\x02\x02\u0481\u0482\x07U\x02\x02\u0482\u0483\x07G\x02\x02" +
+		"\u0483\u0484\x07E\x02\x02\u0484\u0485\x07Q\x02\x02\u0485\u0486\x07P\x02" +
+		"\x02\u0486\u0487\x07F\x02\x02\u0487\x8C\x03\x02\x02\x02\u0488\u0489\x07" +
+		"O\x02\x02\u0489\u048A\x07K\x02\x02\u048A\u048B\x07N\x02\x02\u048B\u048C" +
+		"\x07N\x02\x02\u048C\u048D\x07K\x02\x02\u048D\u048E\x07U\x02\x02\u048E" +
+		"\u048F\x07G\x02\x02\u048F\u0490\x07E\x02\x02\u0490\u0491\x07Q\x02\x02" +
+		"\u0491\u0492\x07P\x02\x02\u0492\u0493\x07F\x02\x02\u0493\x8E\x03\x02\x02" +
+		"\x02\u0494\u0495\x07U\x02\x02\u0495\u0496\x07G\x02\x02\u0496\u0497\x07" +
+		"E\x02\x02\u0497\u0498\x07Q\x02\x02\u0498\u0499\x07P\x02\x02\u0499\u049A" +
+		"\x07F\x02\x02\u049A\x90\x03\x02\x02\x02\u049B\u049C\x07O\x02\x02\u049C" +
+		"\u049D\x07K\x02\x02\u049D\u049E\x07P\x02\x02\u049E\u049F\x07W\x02\x02" +
+		"\u049F\u04A0\x07V\x02\x02\u04A0\u04A1\x07G\x02\x02\u04A1\x92\x03\x02\x02" +
+		"\x02\u04A2\u04A3\x07J\x02\x02\u04A3\u04A4\x07Q\x02\x02\u04A4\u04A5\x07" +
+		"W\x02\x02\u04A5\u04A6\x07T\x02\x02\u04A6\x94\x03\x02\x02\x02\u04A7\u04A8" +
+		"\x07F\x02\x02\u04A8\u04A9\x07C\x02\x02\u04A9\u04AA\x07[\x02\x02\u04AA" +
+		"\x96\x03\x02\x02\x02\u04AB\u04AC\x07Y\x02\x02\u04AC\u04AD\x07G\x02\x02" +
+		"\u04AD\u04AE\x07G\x02\x02\u04AE\u04AF\x07M\x02\x02\u04AF\x98\x03\x02\x02" +
+		"\x02\u04B0\u04B1\x07O\x02\x02\u04B1\u04B2\x07Q\x02\x02\u04B2\u04B3\x07" +
+		"P\x02\x02\u04B3\u04B4\x07V\x02\x02\u04B4\u04B5\x07J\x02\x02\u04B5\x9A" +
+		"\x03\x02\x02\x02\u04B6\u04B7\x07S\x02\x02\u04B7\u04B8\x07W\x02\x02\u04B8" +
+		"\u04B9\x07C\x02\x02\u04B9\u04BA\x07T\x02\x02\u04BA\u04BB\x07V\x02\x02" +
+		"\u04BB\u04BC\x07G\x02\x02\u04BC\u04BD\x07T\x02\x02\u04BD\x9C\x03\x02\x02" +
+		"\x02\u04BE\u04BF\x07[\x02\x02\u04BF\u04C0\x07G\x02\x02\u04C0\u04C1\x07" +
+		"C\x02\x02\u04C1\u04C2\x07T\x02\x02\u04C2\x9E\x03\x02\x02\x02\u04C3\u04C4" +
+		"\x07U\x02\x02\u04C4\u04C5\x07G\x02\x02\u04C5\u04C6\x07E\x02\x02\u04C6" +
+		"\u04C7\x07Q\x02\x02\u04C7\u04C8\x07P\x02\x02\u04C8\u04C9\x07F\x02\x02" +
+		"\u04C9\u04CA\x07a\x02\x02\u04CA\u04CB\x07O\x02\x02\u04CB\u04CC\x07K\x02" +
+		"\x02\u04CC\u04CD\x07E\x02\x02\u04CD\u04CE\x07T\x02\x02\u04CE\u04CF\x07" +
+		"Q\x02\x02\u04CF\u04D0\x07U\x02\x02\u04D0\u04D1\x07G\x02\x02\u04D1\u04D2" +
+		"\x07E\x02\x02\u04D2\u04D3\x07Q\x02\x02\u04D3\u04D4\x07P\x02\x02\u04D4" +
+		"\u04D5\x07F\x02\x02\u04D5\xA0\x03\x02\x02\x02\u04D6\u04D7\x07O\x02\x02" +
+		"\u04D7\u04D8\x07K\x02\x02\u04D8\u04D9\x07P\x02\x02\u04D9\u04DA\x07W\x02" +
+		"\x02\u04DA\u04DB\x07V\x02\x02\u04DB\u04DC\x07G\x02\x02\u04DC\u04DD\x07" +
+		"a\x02\x02\u04DD\u04DE\x07O\x02\x02\u04DE\u04DF\x07K\x02\x02\u04DF\u04E0" +
+		"\x07E\x02\x02\u04E0\u04E1\x07T\x02\x02\u04E1\u04E2\x07Q\x02\x02\u04E2" +
+		"\u04E3\x07U\x02\x02\u04E3\u04E4\x07G\x02\x02\u04E4\u04E5\x07E\x02\x02" +
+		"\u04E5\u04E6\x07Q\x02\x02\u04E6\u04E7\x07P\x02\x02\u04E7\u04E8\x07F\x02" +
+		"\x02\u04E8\xA2\x03\x02\x02\x02\u04E9\u04EA\x07O\x02\x02\u04EA\u04EB\x07" +
+		"K\x02\x02\u04EB\u04EC\x07P\x02\x02\u04EC\u04ED\x07W\x02\x02\u04ED\u04EE" +
+		"\x07V\x02\x02\u04EE\u04EF\x07G\x02\x02\u04EF\u04F0\x07a\x02\x02\u04F0" +
+		"\u04F1\x07U\x02\x02\u04F1\u04F2\x07G\x02\x02\u04F2\u04F3\x07E\x02\x02" +
+		"\u04F3\u04F4\x07Q\x02\x02\u04F4\u04F5\x07P\x02\x02\u04F5\u04F6\x07F\x02" +
+		"\x02\u04F6\xA4\x03\x02\x02\x02\u04F7\u04F8\x07J\x02\x02\u04F8\u04F9\x07" +
+		"Q\x02\x02\u04F9\u04FA\x07W\x02\x02\u04FA\u04FB\x07T\x02\x02\u04FB\u04FC" +
+		"\x07a\x02\x02\u04FC\u04FD\x07O\x02\x02\u04FD\u04FE\x07K\x02\x02\u04FE" +
+		"\u04FF\x07E\x02\x02\u04FF\u0500\x07T\x02\x02\u0500\u0501\x07Q\x02\x02" +
+		"\u0501\u0502\x07U\x02\x02\u0502\u0503\x07G\x02\x02\u0503\u0504\x07E\x02" +
+		"\x02\u0504\u0505\x07Q\x02\x02\u0505\u0506\x07P\x02\x02\u0506\u0507\x07" +
+		"F\x02\x02\u0507\xA6\x03\x02\x02\x02\u0508\u0509\x07J\x02\x02\u0509\u050A" +
+		"\x07Q\x02\x02\u050A\u050B\x07W\x02\x02\u050B\u050C\x07T\x02\x02\u050C" +
+		"\u050D\x07";
+	private static readonly _serializedATNSegment3: string =
+		"a\x02\x02\u050D\u050E\x07U\x02\x02\u050E\u050F\x07G\x02\x02\u050F\u0510" +
+		"\x07E\x02\x02\u0510\u0511\x07Q\x02\x02\u0511\u0512\x07P\x02\x02\u0512" +
+		"\u0513\x07F\x02\x02\u0513\xA8\x03\x02\x02\x02\u0514\u0515\x07J\x02\x02" +
+		"\u0515\u0516\x07Q\x02\x02\u0516\u0517\x07W\x02\x02\u0517\u0518\x07T\x02" +
+		"\x02\u0518\u0519\x07a\x02\x02\u0519\u051A\x07O\x02\x02\u051A\u051B\x07" +
+		"K\x02\x02\u051B\u051C\x07P\x02\x02\u051C\u051D\x07W\x02\x02\u051D\u051E" +
+		"\x07V\x02\x02\u051E\u051F\x07G\x02\x02\u051F\xAA\x03\x02\x02\x02\u0520" +
+		"\u0521\x07F\x02\x02\u0521\u0522\x07C\x02\x02\u0522\u0523\x07[\x02\x02" +
+		"\u0523\u0524\x07a\x02\x02\u0524\u0525\x07O\x02\x02\u0525\u0526\x07K\x02" +
+		"\x02\u0526\u0527\x07E\x02\x02\u0527\u0528\x07T\x02\x02\u0528\u0529\x07" +
+		"Q\x02\x02\u0529\u052A\x07U\x02\x02\u052A\u052B\x07G\x02\x02\u052B\u052C" +
+		"\x07E\x02\x02\u052C\u052D\x07Q\x02\x02\u052D\u052E\x07P\x02\x02\u052E" +
+		"\u052F\x07F\x02\x02\u052F\xAC\x03\x02\x02\x02\u0530\u0531\x07F\x02\x02" +
+		"\u0531\u0532\x07C\x02\x02\u0532\u0533\x07[\x02\x02\u0533\u0534\x07a\x02" +
+		"\x02\u0534\u0535\x07U\x02\x02\u0535\u0536\x07G\x02\x02\u0536\u0537\x07" +
+		"E\x02\x02\u0537\u0538\x07Q\x02\x02\u0538\u0539\x07P\x02\x02\u0539\u053A" +
+		"\x07F\x02\x02\u053A\xAE\x03\x02\x02\x02\u053B\u053C\x07F\x02\x02\u053C" +
+		"\u053D\x07C\x02\x02\u053D\u053E\x07[\x02\x02\u053E\u053F\x07a\x02\x02" +
+		"\u053F\u0540\x07O\x02\x02\u0540\u0541\x07K\x02\x02\u0541\u0542\x07P\x02" +
+		"\x02\u0542\u0543\x07W\x02\x02\u0543\u0544\x07V\x02\x02\u0544\u0545\x07" +
+		"G\x02\x02\u0545\xB0\x03\x02\x02\x02\u0546\u0547\x07F\x02\x02\u0547\u0548" +
+		"\x07C\x02\x02\u0548\u0549\x07[\x02\x02\u0549\u054A\x07a\x02\x02\u054A" +
+		"\u054B\x07J\x02\x02\u054B\u054C\x07Q\x02\x02\u054C\u054D\x07W\x02\x02" +
+		"\u054D\u054E\x07T\x02\x02\u054E\xB2\x03\x02\x02\x02\u054F\u0550\x07[\x02" +
+		"\x02\u0550\u0551\x07G\x02\x02\u0551\u0552\x07C\x02\x02\u0552\u0553\x07" +
+		"T\x02\x02\u0553\u0554\x07a\x02\x02\u0554\u0555\x07O\x02\x02\u0555\u0556" +
+		"\x07Q\x02\x02\u0556\u0557\x07P\x02\x02\u0557\u0558\x07V\x02\x02\u0558" +
+		"\u0559\x07J\x02\x02\u0559\xB4\x03\x02\x02\x02\u055A\u055B\x07E\x02\x02" +
+		"\u055B\u055C\x07Q\x02\x02\u055C\u055D\x07P\x02\x02\u055D\u055E\x07X\x02" +
+		"\x02\u055E\u055F\x07G\x02\x02\u055F\u0560\x07T\x02\x02\u0560\u0561\x07" +
+		"V\x02\x02\u0561\u0562\x07a\x02\x02\u0562\u0563\x07V\x02\x02\u0563\u0564" +
+		"\x07\\\x02\x02\u0564\xB6\x03\x02\x02\x02\u0565\u0566\x07F\x02\x02\u0566" +
+		"\u0567\x07C\x02\x02\u0567\u0568\x07V\x02\x02\u0568\u0569\x07C\x02\x02" +
+		"\u0569\u056A\x07O\x02\x02\u056A\u056B\x07Q\x02\x02\u056B\u056C\x07F\x02" +
+		"\x02\u056C\u056D\x07G\x02\x02\u056D\u056E\x07N\x02\x02\u056E\xB8\x03\x02" +
+		"\x02\x02\u056F\u0570\x07N\x02\x02\u0570\u0571\x07Q\x02\x02\u0571\u0572" +
+		"\x07Q\x02\x02\u0572\u0573\x07M\x02\x02\u0573\u0574\x07W\x02\x02\u0574" +
+		"\u0575\x07R\x02\x02\u0575\xBA\x03\x02\x02\x02\u0576\u0577\x07U\x02\x02" +
+		"\u0577\u0578\x07C\x02\x02\u0578\u0579\x07X\x02\x02\u0579\u057A\x07G\x02" +
+		"\x02\u057A\u057B\x07F\x02\x02\u057B\u057C\x07U\x02\x02\u057C\u057D\x07" +
+		"G\x02\x02\u057D\u057E\x07C\x02\x02\u057E\u057F\x07T\x02\x02\u057F\u0580" +
+		"\x07E\x02\x02\u0580\u0581\x07J\x02\x02\u0581\xBC\x03\x02\x02\x02\u0582" +
+		"\u0583\x07K\x02\x02\u0583\u0584\x07P\x02\x02\u0584\u0585\x07V\x02\x02" +
+		"\u0585\xBE\x03\x02\x02\x02\u0586\u0587\x07K\x02\x02\u0587\u0588\x07P\x02" +
+		"\x02\u0588\u0589\x07V\x02\x02\u0589\u058A\x07G\x02\x02\u058A\u058B\x07" +
+		"I\x02\x02\u058B\u058C\x07G\x02\x02\u058C\u058D\x07T\x02\x02\u058D\xC0" +
+		"\x03\x02\x02\x02\u058E\u058F\x07F\x02\x02\u058F\u0590\x07Q\x02\x02\u0590" +
+		"\u0591\x07W\x02\x02\u0591\u0592\x07D\x02\x02\u0592\u0593\x07N\x02\x02" +
+		"\u0593\u0594\x07G\x02\x02\u0594\xC2\x03\x02\x02\x02\u0595\u0596\x07N\x02" +
+		"\x02\u0596\u0597\x07Q\x02\x02\u0597\u0598\x07P\x02\x02\u0598\u0599\x07" +
+		"I\x02\x02\u0599\xC4\x03\x02\x02\x02\u059A\u059B\x07H\x02\x02\u059B\u059C" +
+		"\x07N\x02\x02\u059C\u059D\x07Q\x02\x02\u059D\u059E\x07C\x02\x02\u059E" +
+		"\u059F\x07V\x02\x02\u059F\xC6\x03\x02\x02\x02\u05A0\u05A1\x07U\x02\x02" +
+		"\u05A1\u05A2\x07V\x02\x02\u05A2\u05A3\x07T\x02\x02\u05A3\u05A4\x07K\x02" +
+		"\x02\u05A4\u05A5\x07P\x02\x02\u05A5\u05A6\x07I\x02\x02\u05A6\xC8\x03\x02" +
+		"\x02\x02\u05A7\u05A8\x07D\x02\x02\u05A8\u05A9\x07Q\x02\x02\u05A9\u05AA" +
+		"\x07Q\x02\x02\u05AA\u05AB\x07N\x02\x02\u05AB\u05AC\x07G\x02\x02\u05AC" +
+		"\u05AD\x07C\x02\x02\u05AD\u05AE\x07P\x02\x02\u05AE\xCA\x03\x02\x02\x02" +
+		"\u05AF\u05B0\x07~\x02\x02\u05B0\xCC\x03\x02\x02\x02\u05B1\u05B2\x07.\x02" +
+		"\x02\u05B2\xCE\x03\x02\x02\x02\u05B3\u05B4\x070\x02\x02\u05B4\xD0\x03" +
+		"\x02\x02\x02\u05B5\u05B6\x07?\x02\x02\u05B6\xD2\x03\x02\x02\x02\u05B7" +
+		"\u05B8\x07@\x02\x02\u05B8\xD4\x03\x02\x02\x02\u05B9\u05BA\x07>\x02\x02" +
+		"\u05BA\xD6\x03\x02\x02\x02\u05BB\u05BC\x07>\x02\x02\u05BC\u05BD\x07?\x02" +
+		"\x02\u05BD\xD8\x03\x02\x02\x02\u05BE\u05BF\x07@\x02\x02\u05BF\u05C0\x07" +
+		"?\x02\x02\u05C0\xDA\x03\x02\x02\x02\u05C1\u05C2\x07#\x02\x02\u05C2\u05C3" +
+		"\x07?\x02\x02\u05C3\xDC\x03\x02\x02\x02\u05C4\u05C5\x07-\x02\x02\u05C5" +
+		"\xDE\x03\x02\x02\x02\u05C6\u05C7\x07/\x02\x02\u05C7\xE0\x03\x02\x02\x02" +
+		"\u05C8\u05C9\x07,\x02\x02\u05C9\xE2\x03\x02\x02\x02\u05CA\u05CB\x071\x02" +
+		"\x02\u05CB\xE4\x03\x02\x02\x02\u05CC\u05CD\x07\'\x02\x02\u05CD\xE6\x03" +
+		"\x02\x02\x02\u05CE\u05CF\x07#\x02\x02\u05CF\xE8\x03\x02\x02\x02\u05D0" +
+		"\u05D1\x07<\x02\x02\u05D1\xEA\x03\x02\x02\x02\u05D2\u05D3\x07*\x02\x02" +
+		"\u05D3\xEC\x03\x02\x02\x02\u05D4\u05D5\x07+\x02\x02\u05D5\xEE\x03\x02" +
+		"\x02\x02\u05D6\u05D7\x07]\x02\x02\u05D7\xF0\x03\x02\x02\x02\u05D8\u05D9" +
+		"\x07_\x02\x02\u05D9\xF2\x03\x02\x02\x02\u05DA\u05DB\x07)\x02\x02\u05DB" +
+		"\xF4\x03\x02\x02\x02\u05DC\u05DD\x07$\x02\x02\u05DD\xF6\x03\x02\x02\x02" +
+		"\u05DE\u05DF\x07b\x02\x02\u05DF\xF8\x03\x02\x02\x02\u05E0\u05E1\x07\x80" +
+		"\x02\x02\u05E1\xFA\x03\x02\x02\x02\u05E2\u05E3\x07(\x02\x02\u05E3\xFC" +
+		"\x03\x02\x02\x02\u05E4\u05E5\x07`\x02\x02\u05E5\xFE\x03\x02\x02\x02\u05E6" +
+		"\u05E7\x07C\x02\x02\u05E7\u05E8\x07X\x02\x02\u05E8\u05E9\x07I\x02\x02" +
+		"\u05E9\u0100\x03\x02\x02\x02\u05EA\u05EB\x07E\x02\x02\u05EB\u05EC\x07" +
+		"Q\x02\x02\u05EC\u05ED\x07W\x02\x02\u05ED\u05EE\x07P\x02\x02\u05EE\u05EF" +
+		"\x07V\x02\x02\u05EF\u0102\x03\x02\x02\x02\u05F0\u05F1\x07F\x02\x02\u05F1" +
+		"\u05F2\x07K\x02\x02\u05F2\u05F3\x07U\x02\x02\u05F3\u05F4\x07V\x02\x02" +
+		"\u05F4\u05F5\x07K\x02\x02\u05F5\u05F6\x07P\x02\x02\u05F6\u05F7\x07E\x02" +
+		"\x02\u05F7\u05F8\x07V\x02\x02\u05F8\u05F9\x07a\x02\x02\u05F9\u05FA\x07" +
+		"E\x02\x02\u05FA\u05FB\x07Q\x02\x02\u05FB\u05FC\x07W\x02\x02\u05FC\u05FD" +
+		"\x07P\x02\x02\u05FD\u05FE\x07V\x02\x02\u05FE\u0104\x03\x02\x02\x02\u05FF" +
+		"\u0600\x07G\x02\x02\u0600\u0601\x07U\x02\x02\u0601\u0602\x07V\x02\x02" +
+		"\u0602\u0603\x07F\x02\x02\u0603\u0604\x07E\x02\x02\u0604\u0106\x03\x02" +
+		"\x02\x02\u0605\u0606\x07G\x02\x02\u0606\u0607\x07U\x02\x02\u0607\u0608" +
+		"\x07V\x02\x02\u0608\u0609\x07F\x02\x02\u0609\u060A\x07E\x02\x02\u060A" +
+		"\u060B\x07a\x02\x02\u060B\u060C\x07G\x02\x02\u060C\u060D\x07T\x02\x02" +
+		"\u060D\u060E\x07T\x02\x02\u060E\u060F\x07Q\x02\x02\u060F\u0610\x07T\x02" +
+		"\x02\u0610\u0108\x03\x02\x02\x02\u0611\u0612\x07O\x02\x02\u0612\u0613" +
+		"\x07C\x02\x02\u0613\u0614\x07Z\x02\x02\u0614\u010A\x03\x02\x02\x02\u0615" +
+		"\u0616\x07O\x02\x02\u0616\u0617\x07G\x02\x02\u0617\u0618\x07C\x02\x02" +
+		"\u0618\u0619\x07P\x02\x02\u0619\u010C\x03\x02\x02\x02\u061A\u061B\x07" +
+		"O\x02\x02\u061B\u061C\x07G\x02\x02\u061C\u061D\x07F\x02\x02\u061D\u061E" +
+		"\x07K\x02\x02\u061E\u061F\x07C\x02\x02\u061F\u0620\x07P\x02\x02\u0620" +
+		"\u010E\x03\x02\x02\x02\u0621\u0622\x07O\x02\x02\u0622\u0623\x07K\x02\x02" +
+		"\u0623\u0624\x07P\x02\x02\u0624\u0110\x03\x02\x02\x02\u0625\u0626\x07" +
+		"O\x02\x02\u0626\u0627\x07Q\x02\x02\u0627\u0628\x07F\x02\x02\u0628\u0629" +
+		"\x07G\x02\x02\u0629\u0112\x03\x02\x02\x02\u062A\u062B\x07T\x02\x02\u062B" +
+		"\u062C\x07C\x02\x02\u062C\u062D\x07P\x02\x02\u062D\u062E\x07I\x02\x02" +
+		"\u062E\u062F\x07G\x02\x02\u062F\u0114\x03\x02\x02\x02\u0630\u0631\x07" +
+		"U\x02\x02\u0631\u0632\x07V\x02\x02\u0632\u0633\x07F\x02\x02\u0633\u0634" +
+		"\x07G\x02\x02\u0634\u0635\x07X\x02\x02\u0635\u0116\x03\x02\x02\x02\u0636" +
+		"\u0637\x07U\x02\x02\u0637\u0638\x07V\x02\x02\u0638\u0639\x07F\x02\x02" +
+		"\u0639\u063A\x07G\x02\x02\u063A\u063B\x07X\x02\x02\u063B\u063C\x07R\x02" +
+		"\x02\u063C\u0118\x03\x02\x02\x02\u063D\u063E\x07U\x02\x02\u063E\u063F" +
+		"\x07W\x02\x02\u063F\u0640\x07O\x02\x02\u0640\u011A\x03\x02\x02\x02\u0641" +
+		"\u0642\x07U\x02\x02\u0642\u0643\x07W\x02\x02\u0643\u0644\x07O\x02\x02" +
+		"\u0644\u0645\x07U\x02\x02\u0645\u0646\x07S\x02\x02\u0646\u011C\x03\x02" +
+		"\x02\x02\u0647\u0648\x07X\x02\x02\u0648\u0649\x07C\x02\x02\u0649\u064A" +
+		"\x07T\x02\x02\u064A\u064B\x07a\x02\x02\u064B\u064C\x07U\x02\x02\u064C" +
+		"\u064D\x07C\x02\x02\u064D\u064E\x07O\x02\x02\u064E\u064F\x07R\x02\x02" +
+		"\u064F\u011E\x03\x02\x02\x02\u0650\u0651\x07X\x02\x02\u0651\u0652\x07" +
+		"C\x02\x02\u0652\u0653\x07T\x02\x02\u0653\u0654\x07a\x02\x02\u0654\u0655" +
+		"\x07R\x02\x02\u0655\u0656\x07Q\x02\x02\u0656\u0657\x07R\x02\x02\u0657" +
+		"\u0120\x03\x02\x02\x02\u0658\u0659\x07U\x02\x02\u0659\u065A\x07V\x02\x02" +
+		"\u065A\u065B\x07F\x02\x02\u065B\u065C\x07F\x02\x02\u065C\u065D\x07G\x02" +
+		"\x02\u065D\u065E\x07X\x02\x02\u065E\u065F\x07a\x02\x02\u065F\u0660\x07" +
+		"U\x02\x02\u0660\u0661\x07C\x02\x02\u0661\u0662\x07O\x02\x02\u0662\u0663" +
+		"\x07R\x02\x02\u0663\u0122\x03\x02\x02\x02\u0664\u0665\x07U\x02\x02\u0665" +
+		"\u0666\x07V\x02\x02\u0666\u0667\x07F\x02\x02\u0667\u0668\x07F\x02\x02" +
+		"\u0668\u0669\x07G\x02\x02\u0669\u066A\x07X\x02\x02\u066A\u066B\x07a\x02" +
+		"\x02\u066B\u066C\x07R\x02\x02\u066C\u066D\x07Q\x02\x02\u066D\u066E\x07" +
+		"R\x02\x02\u066E\u0124\x03\x02\x02\x02\u066F\u0670\x07R\x02\x02\u0670\u0671" +
+		"\x07G\x02\x02\u0671\u0672\x07T\x02\x02\u0672\u0673\x07E\x02\x02\u0673" +
+		"\u0674\x07G\x02\x02\u0674\u0675\x07P\x02\x02\u0675\u0676\x07V\x02\x02" +
+		"\u0676\u0677\x07K\x02\x02\u0677\u0678\x07N\x02\x02\u0678\u0679\x07G\x02" +
+		"\x02\u0679\u0126\x03\x02\x02\x02\u067A\u067B\x07V\x02\x02\u067B\u067C" +
+		"\x07C\x02\x02\u067C\u067D\x07M\x02\x02\u067D\u067E\x07G\x02\x02\u067E" +
+		"\u0128\x03\x02\x02\x02\u067F\u0680\x07H\x02\x02\u0680\u0681\x07K\x02\x02" +
+		"\u0681\u0682\x07T\x02\x02\u0682\u0683\x07U\x02\x02\u0683\u0684\x07V\x02" +
+		"\x02\u0684\u012A\x03\x02\x02\x02\u0685\u0686\x07N\x02\x02\u0686\u0687" +
+		"\x07C\x02\x02\u0687\u0688\x07U\x02\x02\u0688\u0689\x07V\x02\x02\u0689" +
+		"\u012C\x03\x02\x02\x02\u068A\u068B\x07N\x02\x02\u068B\u068C\x07K\x02\x02" +
+		"\u068C\u068D\x07U\x02\x02\u068D\u068E\x07V\x02\x02\u068E\u012E\x03\x02" +
+		"\x02\x02\u068F\u0690\x07X\x02\x02\u0690\u0691\x07C\x02\x02\u0691\u0692" +
+		"\x07N\x02\x02\u0692\u0693\x07W\x02\x02\u0693\u0694\x07G\x02\x02\u0694" +
+		"\u0695\x07U\x02\x02\u0695\u0130\x03\x02\x02\x02\u0696\u0697\x07G\x02\x02" +
+		"\u0697\u0698\x07C\x02\x02\u0698\u0699\x07T\x02\x02\u0699\u069A\x07N\x02" +
+		"\x02\u069A\u069B\x07K\x02\x02\u069B\u069C\x07G\x02\x02\u069C\u069D\x07" +
+		"U\x02\x02\u069D\u069E\x07V\x02\x02\u069E\u0132\x03\x02\x02\x02\u069F\u06A0" +
+		"\x07G\x02\x02\u06A0\u06A1\x07C\x02\x02\u06A1\u06A2\x07T\x02\x02\u06A2" +
+		"\u06A3\x07N\x02\x02\u06A3\u06A4\x07K\x02\x02\u06A4\u06A5\x07G\x02\x02" +
+		"\u06A5\u06A6\x07U\x02\x02\u06A6\u06A7\x07V\x02\x02\u06A7\u06A8\x07a\x02" +
+		"\x02\u06A8\u06A9\x07V\x02\x02\u06A9\u06AA\x07K\x02\x02\u06AA\u06AB\x07" +
+		"O\x02\x02\u06AB\u06AC\x07G\x02\x02\u06AC\u0134\x03\x02\x02\x02\u06AD\u06AE" +
+		"\x07N\x02\x02\u06AE\u06AF\x07C\x02\x02\u06AF\u06B0\x07V\x02\x02\u06B0" +
+		"\u06B1\x07G\x02\x02\u06B1\u06B2\x07U\x02\x02\u06B2\u06B3\x07V\x02\x02" +
+		"\u06B3\u0136\x03\x02\x02\x02\u06B4\u06B5\x07N\x02\x02\u06B5\u06B6\x07" +
+		"C\x02\x02\u06B6\u06B7\x07V\x02\x02\u06B7\u06B8\x07G\x02\x02\u06B8\u06B9" +
+		"\x07U\x02\x02\u06B9\u06BA\x07V\x02\x02\u06BA\u06BB\x07a\x02\x02\u06BB" +
+		"\u06BC\x07V\x02\x02\u06BC\u06BD\x07K\x02\x02\u06BD\u06BE\x07O\x02\x02" +
+		"\u06BE\u06BF\x07G\x02\x02\u06BF\u0138\x03\x02\x02\x02\u06C0\u06C1\x07" +
+		"R\x02\x02\u06C1\u06C2\x07G\x02\x02\u06C2\u06C3\x07T\x02\x02\u06C3\u06C4" +
+		"\x07a\x02\x02\u06C4\u06C5\x07F\x02\x02\u06C5\u06C6\x07C\x02\x02\u06C6" +
+		"\u06C7\x07[\x02\x02\u06C7\u013A\x03\x02\x02\x02\u06C8\u06C9\x07R\x02\x02" +
+		"\u06C9\u06CA\x07G\x02\x02\u06CA\u06CB\x07T\x02\x02\u06CB\u06CC\x07a\x02" +
+		"\x02\u06CC\u06CD\x07J\x02\x02\u06CD\u06CE\x07Q\x02\x02\u06CE\u06CF\x07" +
+		"W\x02\x02\u06CF\u06D0\x07T\x02\x02\u06D0\u013C\x03\x02\x02\x02\u06D1\u06D2" +
+		"\x07R\x02\x02\u06D2\u06D3\x07G\x02\x02\u06D3\u06D4\x07T\x02\x02\u06D4" +
+		"\u06D5\x07a\x02\x02\u06D5\u06D6\x07O\x02\x02\u06D6\u06D7\x07K\x02\x02" +
+		"\u06D7\u06D8\x07P\x02\x02\u06D8\u06D9\x07W\x02\x02\u06D9\u06DA\x07V\x02" +
+		"\x02\u06DA\u06DB\x07G\x02\x02\u06DB\u013E\x03\x02\x02\x02\u06DC\u06DD" +
+		"\x07R\x02\x02\u06DD\u06DE\x07G\x02\x02\u06DE\u06DF\x07T\x02\x02\u06DF" +
+		"\u06E0\x07a\x02\x02\u06E0\u06E1\x07U\x02\x02\u06E1\u06E2\x07G\x02\x02" +
+		"\u06E2\u06E3\x07E\x02\x02\u06E3\u06E4\x07Q\x02\x02\u06E4\u06E5\x07P\x02" +
+		"\x02\u06E5\u06E6\x07F\x02\x02\u06E6\u0140\x03\x02\x02\x02\u06E7\u06E8" +
+		"\x07T\x02\x02\u06E8\u06E9\x07C\x02\x02\u06E9\u06EA\x07V\x02\x02\u06EA" +
+		"\u06EB\x07G\x02\x02\u06EB\u0142\x03\x02\x02\x02\u06EC\u06ED\x07U\x02\x02" +
+		"\u06ED\u06EE\x07R\x02\x02\u06EE\u06EF\x07C\x02\x02\u06EF\u06F0\x07T\x02" +
+		"\x02\u06F0\u06F1\x07M\x02\x02\u06F1\u06F2\x07N\x02\x02\u06F2\u06F3\x07" +
+		"K\x02\x02\u06F3\u06F4\x07P\x02\x02\u06F4\u06F5\x07G\x02\x02\u06F5\u0144" +
+		"\x03\x02\x02\x02\u06F6\u06F7\x07E\x02\x02\u06F7\u0146\x03\x02\x02\x02" +
+		"\u06F8\u06F9\x07F\x02\x02\u06F9\u06FA\x07E\x02\x02\u06FA\u0148\x03\x02" +
+		"\x02\x02\u06FB\u06FC\x07C\x02\x02\u06FC\u06FD\x07D\x02\x02\u06FD\u06FE" +
+		"\x07U\x02\x02\u06FE\u014A\x03\x02\x02\x02\u06FF\u0700\x07E\x02\x02\u0700" +
+		"\u0701\x07G\x02\x02\u0701\u0702\x07K\x02\x02\u0702\u0703\x07N\x02\x02" +
+		"\u0703\u014C\x03\x02\x02\x02\u0704\u0705\x07E\x02\x02\u0705\u0706\x07" +
+		"G\x02\x02\u0706\u0707\x07K\x02\x02\u0707\u0708\x07N\x02\x02\u0708\u0709" +
+		"\x07K\x02\x02\u0709\u070A\x07P\x02\x02\u070A\u070B\x07I\x02\x02\u070B" +
+		"\u014E\x03\x02\x02\x02\u070C\u070D\x07E\x02\x02\u070D\u070E\x07Q\x02\x02" +
+		"\u070E\u070F\x07P\x02\x02\u070F\u0710\x07X\x02\x02\u0710\u0150\x03\x02" +
+		"\x02\x02\u0711\u0712\x07E\x02\x02\u0712\u0713\x07T\x02\x02\u0713\u0714" +
+		"\x07E\x02\x02\u0714\u0715\x075\x02\x02\u0715\u0716\x074\x02\x02\u0716" +
+		"\u0152\x03\x02\x02\x02\u0717\u0718\x07G\x02\x02\u0718\u0154\x03\x02\x02" +
+		"\x02\u0719\u071A\x07G\x02\x02\u071A\u071B\x07Z\x02\x02\u071B\u071C\x07" +
+		"R\x02\x02\u071C\u0156\x03\x02\x02\x02\u071D\u071E\x07H\x02\x02\u071E\u071F" +
+		"\x07N\x02\x02\u071F\u0720\x07Q\x02\x02\u0720\u0721\x07Q\x02\x02\u0721" +
+		"\u0722\x07T\x02\x02\u0722\u0158\x03\x02\x02\x02\u0723\u0724\x07N\x02\x02" +
+		"\u0724\u0725\x07P\x02\x02\u0725\u015A\x03\x02\x02\x02\u0726\u0727\x07" +
+		"N\x02\x02\u0727\u0728\x07Q\x02\x02\u0728\u0729\x07I\x02\x02\u0729\u015C" +
+		"\x03\x02\x02\x02\u072A\u072B\x07N\x02\x02\u072B\u072C\x07Q\x02\x02\u072C" +
+		"\u072D\x07I\x02\x02\u072D\u072E\x073\x02\x02\u072E\u072F\x072\x02\x02" +
+		"\u072F\u015E\x03\x02\x02\x02\u0730\u0731\x07N\x02\x02\u0731\u0732\x07" +
+		"Q\x02\x02\u0732\u0733\x07I\x02\x02\u0733\u0734\x074\x02\x02\u0734\u0160" +
+		"\x03\x02\x02\x02\u0735\u0736\x07O\x02\x02\u0736\u0737\x07Q\x02\x02\u0737" +
+		"\u0738\x07F\x02\x02\u0738\u0162\x03\x02\x02\x02\u0739\u073A\x07R\x02\x02" +
+		"\u073A\u073B\x07K\x02\x02\u073B\u0164\x03\x02\x02\x02\u073C\u073D\x07" +
+		"R\x02\x02\u073D\u073E\x07Q\x02\x02\u073E\u073F\x07Y\x02\x02\u073F\u0166" +
+		"\x03\x02\x02\x02\u0740\u0741\x07R\x02\x02\u0741\u0742\x07Q\x02\x02\u0742" +
+		"\u0743\x07Y\x02\x02\u0743\u0744\x07G\x02\x02\u0744\u0745\x07T\x02\x02" +
+		"\u0745\u0168\x03\x02\x02\x02\u0746\u0747\x07T\x02\x02\u0747\u0748\x07" +
+		"C\x02\x02\u0748\u0749\x07P\x02\x02\u0749\u074A\x07F\x02\x02\u074A\u016A" +
+		"\x03\x02\x02\x02\u074B\u074C\x07T\x02\x02\u074C\u074D\x07Q\x02\x02\u074D" +
+		"\u074E\x07W\x02\x02\u074E\u074F\x07P\x02\x02\u074F\u0750\x07F\x02\x02" +
+		"\u0750\u016C\x03\x02\x02\x02\u0751\u0752\x07U\x02\x02\u0752\u0753\x07" +
+		"K\x02\x02\u0753\u0754\x07I\x02\x02\u0754\u0755\x07P\x02\x02\u0755\u016E" +
+		"\x03\x02\x02\x02\u0756\u0757\x07U\x02\x02\u0757\u0758\x07S\x02\x02\u0758" +
+		"\u0759\x07T\x02\x02\u0759\u075A\x07V\x02\x02\u075A\u0170\x03\x02\x02\x02" +
+		"\u075B\u075C\x07V\x02\x02\u075C\u075D\x07T\x02\x02\u075D\u075E\x07W\x02" +
+		"\x02\u075E\u075F\x07P\x02\x02\u075F\u0760\x07E\x02\x02\u0760\u0761\x07" +
+		"C\x02\x02\u0761\u0762\x07V\x02\x02\u0762\u0763\x07G\x02\x02\u0763\u0172" +
+		"\x03\x02\x02\x02\u0764\u0765\x07C\x02\x02\u0765\u0766\x07E\x02\x02\u0766" +
+		"\u0767\x07Q\x02\x02\u0767\u0768\x07U\x02\x02\u0768\u0174\x03\x02\x02\x02" +
+		"\u0769\u076A\x07C\x02\x02\u076A\u076B\x07U\x02\x02\u076B\u076C\x07K\x02" +
+		"\x02\u076C\u076D\x07P\x02\x02\u076D\u0176\x03\x02\x02\x02\u076E\u076F" +
+		"\x07C\x02\x02\u076F\u0770\x07V\x02\x02\u0770\u0771\x07C\x02\x02\u0771" +
+		"\u0772\x07P\x02\x02\u0772\u0178\x03\x02\x02\x02\u0773\u0774\x07C\x02\x02" +
+		"\u0774\u0775\x07V\x02\x02\u0775\u0776\x07C\x02\x02\u0776\u0777\x07P\x02" +
+		"\x02\u0777\u0778\x074\x02\x02\u0778\u017A\x03\x02\x02\x02\u0779\u077A" +
+		"\x07E\x02\x02\u077A\u077B\x07Q\x02\x02\u077B\u077C\x07U\x02\x02\u077C" +
+		"\u017C\x03\x02\x02\x02\u077D\u077E\x07E\x02\x02\u077E\u077F\x07Q\x02\x02" +
+		"\u077F\u0780\x07V\x02\x02\u0780\u017E\x03\x02\x02\x02\u0781\u0782\x07" +
+		"F\x02\x02\u0782\u0783\x07G\x02\x02\u0783\u0784\x07I\x02\x02\u0784\u0785" +
+		"\x07T\x02\x02\u0785\u0786\x07G\x02\x02\u0786\u0787\x07G\x02\x02\u0787" +
+		"\u0788\x07U\x02\x02\u0788\u0180\x03\x02\x02\x02\u0789\u078A\x07T\x02\x02" +
+		"\u078A\u078B\x07C\x02\x02\u078B\u078C\x07F\x02\x02\u078C\u078D\x07K\x02" +
+		"\x02\u078D\u078E\x07C\x02\x02\u078E\u078F\x07P\x02\x02\u078F\u0790\x07" +
+		"U\x02\x02\u0790\u0182\x03\x02\x02\x02\u0791\u0792\x07U\x02\x02\u0792\u0793" +
+		"\x07K\x02\x02\u0793\u0794\x07P\x02\x02\u0794\u0184\x03\x02\x02\x02\u0795" +
+		"\u0796\x07V\x02\x02\u0796\u0797\x07C\x02\x02\u0797\u0798\x07P\x02\x02" +
+		"\u0798\u0186\x03\x02\x02\x02\u0799\u079A\x07C\x02\x02\u079A\u079B\x07" +
+		"F\x02\x02\u079B\u079C\x07F\x02\x02\u079C\u079D\x07F\x02\x02\u079D\u079E" +
+		"\x07C\x02\x02\u079E\u079F\x07V\x02\x02\u079F\u07A0\x07G\x02\x02\u07A0" +
+		"\u0188\x03\x02\x02\x02\u07A1\u07A2\x07E\x02\x02\u07A2\u07A3\x07W\x02\x02" +
+		"\u07A3\u07A4\x07T\x02\x02\u07A4\u07A5\x07F\x02\x02\u07A5\u07A6\x07C\x02" +
+		"\x02\u07A6\u07A7\x07V\x02\x02\u07A7\u07A8\x07G\x02\x02\u07A8\u018A\x03" +
+		"\x02\x02\x02\u07A9\u07AA\x07E\x02\x02\u07AA\u07AB\x07W\x02\x02\u07AB\u07AC" +
+		"\x07T\x02\x02\u07AC\u07AD\x07T\x02\x02\u07AD\u07AE\x07G\x02\x02\u07AE" +
+		"\u07AF\x07P\x02\x02\u07AF\u07B0\x07V\x02\x02\u07B0\u07B1\x07a\x02\x02" +
+		"\u07B1\u07B2\x07F\x02\x02\u07B2\u07B3\x07C\x02\x02\u07B3\u07B4\x07V\x02" +
+		"\x02\u07B4\u07B5\x07G\x02\x02\u07B5\u018C\x03\x02\x02\x02\u07B6\u07B7" +
+		"\x07E\x02\x02\u07B7\u07B8\x07W\x02\x02\u07B8\u07B9\x07T\x02\x02\u07B9" +
+		"\u07BA\x07T\x02\x02\u07BA\u07BB\x07G\x02\x02\u07BB\u07BC\x07P\x02\x02" +
+		"\u07BC\u07BD\x07V\x02\x02\u07BD\u07BE\x07a\x02\x02\u07BE\u07BF\x07V\x02" +
+		"\x02\u07BF\u07C0\x07K\x02\x02\u07C0\u07C1\x07O\x02\x02\u07C1\u07C2\x07" +
+		"G\x02\x02\u07C2\u018E\x03\x02\x02\x02\u07C3\u07C4\x07E\x02\x02\u07C4\u07C5" +
+		"\x07W\x02\x02\u07C5\u07C6\x07T\x02\x02\u07C6\u07C7\x07T\x02\x02\u07C7" +
+		"\u07C8\x07G\x02\x02\u07C8\u07C9\x07P\x02\x02\u07C9\u07CA\x07V\x02\x02" +
+		"\u07CA\u07CB\x07a\x02\x02\u07CB\u07CC\x07V\x02\x02\u07CC\u07CD\x07K\x02" +
+		"\x02\u07CD\u07CE\x07O\x02\x02\u07CE\u07CF\x07G\x02\x02\u07CF\u07D0\x07" +
+		"U\x02\x02\u07D0\u07D1\x07V\x02\x02\u07D1\u07D2\x07C\x02\x02\u07D2\u07D3" +
+		"\x07O\x02\x02\u07D3\u07D4\x07R\x02\x02\u07D4\u0190\x03\x02\x02\x02\u07D5" +
+		"\u07D6\x07E\x02\x02\u07D6\u07D7\x07W\x02\x02\u07D7\u07D8\x07T\x02\x02" +
+		"\u07D8\u07D9\x07V\x02\x02\u07D9\u07DA\x07K\x02\x02\u07DA\u07DB\x07O\x02" +
+		"\x02\u07DB\u07DC\x07G\x02\x02\u07DC\u0192\x03\x02\x02\x02\u07DD\u07DE" +
+		"\x07F\x02\x02\u07DE\u07DF\x07C\x02\x02\u07DF\u07E0\x07V\x02\x02\u07E0" +
+		"\u07E1\x07G\x02\x02\u07E1\u0194\x03\x02\x02\x02\u07E2\u07E3\x07F\x02\x02" +
+		"\u07E3\u07E4\x07C\x02\x02\u07E4\u07E5\x07V\x02\x02\u07E5\u07E6\x07G\x02" +
+		"\x02\u07E6\u07E7\x07a\x02\x02\u07E7\u07E8\x07C\x02\x02\u07E8\u07E9\x07" +
+		"F\x02\x02\u07E9\u07EA\x07F\x02\x02\u07EA\u0196\x03\x02\x02\x02\u07EB\u07EC" +
+		"\x07F\x02\x02\u07EC\u07ED\x07C\x02\x02\u07ED\u07EE\x07V\x02\x02\u07EE" +
+		"\u07EF\x07G\x02\x02\u07EF\u07F0\x07a\x02\x02\u07F0\u07F1\x07H\x02\x02" +
+		"\u07F1\u07F2\x07Q\x02\x02\u07F2\u07F3\x07T\x02\x02\u07F3\u07F4\x07O\x02" +
+		"\x02\u07F4\u07F5\x07C\x02\x02\u07F5\u07F6\x07V\x02\x02\u07F6\u0198\x03" +
+		"\x02\x02\x02\u07F7\u07F8\x07F\x02\x02\u07F8\u07F9\x07C\x02\x02\u07F9\u07FA" +
+		"\x07V\x02\x02\u07FA\u07FB\x07G\x02\x02\u07FB\u07FC\x07a\x02\x02\u07FC" +
+		"\u07FD\x07U\x02\x02\u07FD\u07FE\x07W\x02\x02\u07FE\u07FF\x07D\x02\x02" +
+		"\u07FF\u019A\x03\x02\x02\x02\u0800\u0801\x07F\x02\x02\u0801\u0802\x07" +
+		"C\x02\x02\u0802\u0803\x07[\x02\x02\u0803\u0804\x07P\x02\x02\u0804\u0805" +
+		"\x07C\x02\x02\u0805\u0806\x07O\x02\x02\u0806\u0807\x07G\x02\x02\u0807" +
+		"\u019C\x03\x02\x02\x02\u0808\u0809\x07F\x02\x02\u0809\u080A\x07C\x02\x02" +
+		"\u080A\u080B\x07[\x02\x02\u080B\u080C\x07Q\x02\x02\u080C\u080D\x07H\x02" +
+		"\x02\u080D\u080E\x07O\x02\x02\u080E\u080F\x07Q\x02\x02\u080F\u0810\x07" +
+		"P\x02\x02\u0810\u0811\x07V\x02\x02\u0811\u0812\x07J\x02\x02\u0812\u019E" +
+		"\x03\x02\x02\x02\u0813\u0814\x07F\x02\x02\u0814\u0815\x07C\x02\x02\u0815" +
+		"\u0816\x07[\x02\x02\u0816\u0817\x07Q\x02\x02\u0817\u0818\x07H\x02\x02" +
+		"\u0818\u0819\x07Y\x02\x02\u0819\u081A\x07G\x02\x02\u081A\u081B\x07G\x02" +
+		"\x02\u081B\u081C\x07M\x02\x02\u081C\u01A0\x03\x02\x02\x02\u081D\u081E" +
+		"\x07F\x02\x02\u081E\u081F\x07C\x02\x02\u081F\u0820\x07[\x02\x02\u0820" +
+		"\u0821\x07Q\x02\x02\u0821\u0822\x07H\x02\x02\u0822\u0823\x07[\x02\x02" +
+		"\u0823\u0824\x07G\x02\x02\u0824\u0825\x07C\x02\x02\u0825\u0826\x07T\x02" +
+		"\x02\u0826\u01A2\x03\x02\x02\x02\u0827\u0828\x07H\x02\x02\u0828\u0829" +
+		"\x07T\x02\x02\u0829\u082A\x07Q\x02\x02\u082A\u082B\x07O\x02\x02\u082B" +
+		"\u082C\x07a\x02\x02\u082C\u082D\x07F\x02\x02\u082D\u082E\x07C\x02\x02" +
+		"\u082E\u082F\x07[\x02\x02\u082F\u0830\x07U\x02\x02\u0830\u01A4\x03\x02" +
+		"\x02\x02\u0831\u0832\x07N\x02\x02\u0832\u0833\x07Q\x02\x02\u0833\u0834" +
+		"\x07E\x02\x02\u0834\u0835\x07C\x02\x02\u0835\u0836\x07N\x02\x02\u0836" +
+		"\u0837\x07V\x02\x02\u0837\u0838\x07K\x02\x02\u0838\u0839\x07O\x02\x02" +
+		"\u0839\u083A\x07G\x02\x02\u083A\u01A6\x03\x02\x02\x02\u083B\u083C\x07" +
+		"N\x02\x02\u083C\u083D\x07Q\x02\x02\u083D\u083E\x07E\x02\x02\u083E\u083F" +
+		"\x07C\x02\x02\u083F\u0840\x07N\x02\x02\u0840\u0841\x07V\x02\x02\u0841" +
+		"\u0842\x07K\x02\x02\u0842\u0843\x07O\x02\x02\u0843\u0844\x07G\x02\x02" +
+		"\u0844\u0845\x07U\x02\x02\u0845\u0846\x07V\x02\x02\u0846\u0847\x07C\x02" +
+		"\x02\u0847\u0848\x07O\x02\x02\u0848\u0849\x07R\x02\x02\u0849\u01A8\x03" +
+		"\x02\x02\x02\u084A\u084B\x07H\x02\x02\u084B\u084C\x07T\x02\x02\u084C\u084D" +
+		"\x07Q\x02\x02\u084D\u084E\x07O\x02";
+	private static readonly _serializedATNSegment4: string =
+		"\x02\u084E\u084F\x07a\x02\x02\u084F\u0850\x07W\x02\x02\u0850\u0851\x07" +
+		"P\x02\x02\u0851\u0852\x07K\x02\x02\u0852\u0853\x07Z\x02\x02\u0853\u0854" +
+		"\x07V\x02\x02\u0854\u0855\x07K\x02\x02\u0855\u0856\x07O\x02\x02\u0856" +
+		"\u0857\x07G\x02\x02\u0857\u01AA\x03\x02\x02\x02\u0858\u0859\x07O\x02\x02" +
+		"\u0859\u085A\x07C\x02\x02\u085A\u085B\x07M\x02\x02\u085B\u085C\x07G\x02" +
+		"\x02\u085C\u085D\x07F\x02\x02\u085D\u085E\x07C\x02\x02\u085E\u085F\x07" +
+		"V\x02\x02\u085F\u0860\x07G\x02\x02\u0860\u01AC\x03\x02\x02\x02\u0861\u0862" +
+		"\x07O\x02\x02\u0862\u0863\x07C\x02\x02\u0863\u0864\x07M\x02\x02\u0864" +
+		"\u0865\x07G\x02\x02\u0865\u0866\x07V\x02\x02\u0866\u0867\x07K\x02\x02" +
+		"\u0867\u0868\x07O\x02\x02\u0868\u0869\x07G\x02\x02\u0869\u01AE\x03\x02" +
+		"\x02\x02\u086A\u086B\x07O\x02\x02\u086B\u086C\x07Q\x02\x02\u086C\u086D" +
+		"\x07P\x02\x02\u086D\u086E\x07V\x02\x02\u086E\u086F\x07J\x02\x02\u086F" +
+		"\u0870\x07P\x02\x02\u0870\u0871\x07C\x02\x02\u0871\u0872\x07O\x02\x02" +
+		"\u0872\u0873\x07G\x02\x02\u0873\u01B0\x03\x02\x02\x02\u0874\u0875\x07" +
+		"P\x02\x02\u0875\u0876\x07Q\x02\x02\u0876\u0877\x07Y\x02\x02\u0877\u01B2" +
+		"\x03\x02\x02\x02\u0878\u0879\x07R\x02\x02\u0879\u087A\x07G\x02\x02\u087A" +
+		"\u087B\x07T\x02\x02\u087B\u087C\x07K\x02\x02\u087C\u087D\x07Q\x02\x02" +
+		"\u087D\u087E\x07F\x02\x02\u087E\u087F\x07a\x02\x02\u087F\u0880\x07C\x02" +
+		"\x02\u0880\u0881\x07F\x02\x02\u0881\u0882\x07F\x02\x02\u0882\u01B4\x03" +
+		"\x02\x02\x02\u0883\u0884\x07R\x02\x02\u0884\u0885\x07G\x02\x02\u0885\u0886" +
+		"\x07T\x02\x02\u0886\u0887\x07K\x02\x02\u0887\u0888\x07Q\x02\x02\u0888" +
+		"\u0889\x07F\x02\x02\u0889\u088A\x07a\x02\x02\u088A\u088B\x07F\x02\x02" +
+		"\u088B\u088C\x07K\x02\x02\u088C\u088D\x07H\x02\x02\u088D\u088E\x07H\x02" +
+		"\x02\u088E\u01B6\x03\x02\x02\x02\u088F\u0890\x07U\x02\x02\u0890\u0891" +
+		"\x07W\x02\x02\u0891\u0892\x07D\x02\x02\u0892\u0893\x07F\x02\x02\u0893" +
+		"\u0894\x07C\x02\x02\u0894\u0895\x07V\x02\x02\u0895\u0896\x07G\x02\x02" +
+		"\u0896\u01B8\x03\x02\x02\x02\u0897\u0898\x07U\x02\x02\u0898\u0899\x07" +
+		"[\x02\x02\u0899\u089A\x07U\x02\x02\u089A\u089B\x07F\x02\x02\u089B\u089C" +
+		"\x07C\x02\x02\u089C\u089D\x07V\x02\x02\u089D\u089E\x07G\x02\x02\u089E" +
+		"\u01BA\x03\x02\x02\x02\u089F\u08A0\x07V\x02\x02\u08A0\u08A1\x07K\x02\x02" +
+		"\u08A1\u08A2\x07O\x02\x02\u08A2\u08A3\x07G\x02\x02\u08A3\u01BC\x03\x02" +
+		"\x02\x02\u08A4\u08A5\x07V\x02\x02\u08A5\u08A6\x07K\x02\x02\u08A6\u08A7" +
+		"\x07O\x02\x02\u08A7\u08A8\x07G\x02\x02\u08A8\u08A9\x07a\x02\x02\u08A9" +
+		"\u08AA\x07V\x02\x02\u08AA\u08AB\x07Q\x02\x02\u08AB\u08AC\x07a\x02\x02" +
+		"\u08AC\u08AD\x07U\x02\x02\u08AD\u08AE\x07G\x02\x02\u08AE\u08AF\x07E\x02" +
+		"\x02\u08AF\u01BE\x03\x02\x02\x02\u08B0\u08B1\x07V\x02\x02\u08B1\u08B2" +
+		"\x07K\x02\x02\u08B2\u08B3\x07O\x02\x02\u08B3\u08B4\x07G\x02\x02\u08B4" +
+		"\u08B5\x07U\x02\x02\u08B5\u08B6\x07V\x02\x02\u08B6\u08B7\x07C\x02\x02" +
+		"\u08B7\u08B8\x07O\x02\x02\u08B8\u08B9\x07R\x02\x02\u08B9\u01C0\x03\x02" +
+		"\x02\x02\u08BA\u08BB\x07V\x02\x02\u08BB\u08BC\x07Q\x02\x02\u08BC\u08BD" +
+		"\x07a\x02\x02\u08BD\u08BE\x07F\x02\x02\u08BE\u08BF\x07C\x02\x02\u08BF" +
+		"\u08C0\x07[\x02\x02\u08C0\u08C1\x07U\x02\x02\u08C1\u01C2\x03\x02\x02\x02" +
+		"\u08C2\u08C3\x07W\x02\x02\u08C3\u08C4\x07V\x02\x02\u08C4\u08C5\x07E\x02" +
+		"\x02\u08C5\u08C6\x07a\x02\x02\u08C6\u08C7\x07F\x02\x02\u08C7\u08C8\x07" +
+		"C\x02\x02\u08C8\u08C9\x07V\x02\x02\u08C9\u08CA\x07G\x02\x02\u08CA\u01C4" +
+		"\x03\x02\x02\x02\u08CB\u08CC\x07W\x02\x02\u08CC\u08CD\x07V\x02\x02\u08CD" +
+		"\u08CE\x07E\x02\x02\u08CE\u08CF\x07a\x02\x02\u08CF\u08D0\x07V\x02\x02" +
+		"\u08D0\u08D1\x07K\x02\x02\u08D1\u08D2\x07O\x02\x02\u08D2\u08D3\x07G\x02" +
+		"\x02\u08D3\u01C6\x03\x02\x02\x02\u08D4\u08D5\x07W\x02\x02\u08D5\u08D6" +
+		"\x07V\x02\x02\u08D6\u08D7\x07E\x02\x02\u08D7\u08D8\x07a\x02\x02\u08D8" +
+		"\u08D9\x07V\x02\x02\u08D9\u08DA\x07K\x02\x02\u08DA\u08DB\x07O\x02\x02" +
+		"\u08DB\u08DC\x07G\x02\x02\u08DC\u08DD\x07U\x02\x02\u08DD\u08DE\x07V\x02" +
+		"\x02\u08DE\u08DF\x07C\x02\x02\u08DF\u08E0\x07O\x02\x02\u08E0\u08E1\x07" +
+		"R\x02\x02\u08E1\u01C8\x03\x02\x02\x02\u08E2\u08E3\x07W\x02\x02\u08E3\u08E4" +
+		"\x07P\x02\x02\u08E4\u08E5\x07K\x02\x02\u08E5\u08E6\x07Z\x02\x02\u08E6" +
+		"\u08E7\x07a\x02\x02\u08E7\u08E8\x07V\x02\x02\u08E8\u08E9\x07K\x02\x02" +
+		"\u08E9\u08EA\x07O\x02\x02\u08EA\u08EB\x07G\x02\x02\u08EB\u08EC\x07U\x02" +
+		"\x02\u08EC\u08ED\x07V\x02\x02\u08ED\u08EE\x07C\x02\x02\u08EE\u08EF\x07" +
+		"O\x02\x02\u08EF\u08F0\x07R\x02\x02\u08F0\u01CA\x03\x02\x02\x02\u08F1\u08F2" +
+		"\x07U\x02\x02\u08F2\u08F3\x07W\x02\x02\u08F3\u08F4\x07D\x02\x02\u08F4" +
+		"\u08F5\x07U\x02\x02\u08F5\u08F6\x07V\x02\x02\u08F6\u08F7\x07T\x02\x02" +
+		"\u08F7\u01CC\x03\x02\x02\x02\u08F8\u08F9\x07U\x02\x02\u08F9\u08FA\x07" +
+		"W\x02\x02\u08FA\u08FB\x07D\x02\x02\u08FB\u08FC\x07U\x02\x02\u08FC\u08FD" +
+		"\x07V\x02\x02\u08FD\u08FE\x07T\x02\x02\u08FE\u08FF\x07K\x02\x02\u08FF" +
+		"\u0900\x07P\x02\x02\u0900\u0901\x07I\x02\x02\u0901\u01CE\x03\x02\x02\x02" +
+		"\u0902\u0903\x07N\x02\x02\u0903\u0904\x07V\x02\x02\u0904\u0905\x07T\x02" +
+		"\x02\u0905\u0906\x07K\x02\x02\u0906\u0907\x07O\x02\x02\u0907\u01D0\x03" +
+		"\x02\x02\x02\u0908\u0909\x07T\x02\x02\u0909\u090A\x07V\x02\x02\u090A\u090B" +
+		"\x07T\x02\x02\u090B\u090C\x07K\x02\x02\u090C\u090D\x07O\x02\x02\u090D" +
+		"\u01D2\x03\x02\x02\x02\u090E\u090F\x07V\x02\x02\u090F\u0910\x07T\x02\x02" +
+		"\u0910\u0911\x07K\x02\x02\u0911\u0912\x07O\x02\x02\u0912\u01D4\x03\x02" +
+		"\x02\x02\u0913\u0914\x07V\x02\x02\u0914\u0915\x07Q\x02\x02\u0915\u01D6" +
+		"\x03\x02\x02\x02\u0916\u0917\x07N\x02\x02\u0917\u0918\x07Q\x02\x02\u0918" +
+		"\u0919\x07Y\x02\x02\u0919\u091A\x07G\x02\x02\u091A\u091B\x07T\x02\x02" +
+		"\u091B\u01D8\x03\x02\x02\x02\u091C\u091D\x07W\x02\x02\u091D\u091E\x07" +
+		"R\x02\x02\u091E\u091F\x07R\x02\x02\u091F\u0920\x07G\x02\x02\u0920\u0921" +
+		"\x07T\x02\x02\u0921\u01DA\x03\x02\x02\x02\u0922\u0923\x07E\x02\x02\u0923" +
+		"\u0924\x07Q\x02\x02\u0924\u0925\x07P\x02\x02\u0925\u0926\x07E\x02\x02" +
+		"\u0926\u0927\x07C\x02\x02\u0927\u0928\x07V\x02\x02\u0928\u01DC\x03\x02" +
+		"\x02\x02\u0929\u092A\x07E\x02\x02\u092A\u092B\x07Q\x02\x02\u092B\u092C" +
+		"\x07P\x02\x02\u092C\u092D\x07E\x02\x02\u092D\u092E\x07C\x02\x02\u092E" +
+		"\u092F\x07V\x02\x02\u092F\u0930\x07a\x02\x02\u0930\u0931\x07Y\x02\x02" +
+		"\u0931\u0932\x07U\x02\x02\u0932\u01DE\x03\x02\x02\x02\u0933\u0934\x07" +
+		"N\x02\x02\u0934\u0935\x07G\x02\x02\u0935\u0936\x07P\x02\x02\u0936\u0937" +
+		"\x07I\x02\x02\u0937\u0938\x07V\x02\x02\u0938\u0939\x07J\x02\x02\u0939" +
+		"\u01E0\x03\x02\x02\x02\u093A\u093B\x07U\x02\x02\u093B\u093C\x07V\x02\x02" +
+		"\u093C\u093D\x07T\x02\x02\u093D\u093E\x07E\x02\x02\u093E\u093F\x07O\x02" +
+		"\x02\u093F\u0940\x07R\x02\x02\u0940\u01E2\x03\x02\x02\x02\u0941\u0942" +
+		"\x07T\x02\x02\u0942\u0943\x07K\x02\x02\u0943\u0944\x07I\x02\x02\u0944" +
+		"\u0945\x07J\x02\x02\u0945\u0946\x07V\x02\x02\u0946\u01E4\x03\x02\x02\x02" +
+		"\u0947\u0948\x07N\x02\x02\u0948\u0949\x07G\x02\x02\u0949\u094A\x07H\x02" +
+		"\x02\u094A\u094B\x07V\x02\x02\u094B\u01E6\x03\x02\x02\x02\u094C\u094D" +
+		"\x07C\x02\x02\u094D\u094E\x07U\x02\x02\u094E\u094F\x07E\x02\x02\u094F" +
+		"\u0950\x07K\x02\x02\u0950\u0951\x07K\x02\x02\u0951\u01E8\x03\x02\x02\x02" +
+		"\u0952\u0953\x07N\x02\x02\u0953\u0954\x07Q\x02\x02\u0954\u0955\x07E\x02" +
+		"\x02\u0955\u0956\x07C\x02\x02\u0956\u0957\x07V\x02\x02\u0957\u0958\x07" +
+		"G\x02\x02\u0958\u01EA\x03\x02\x02\x02\u0959\u095A\x07T\x02\x02\u095A\u095B" +
+		"\x07G\x02\x02\u095B\u095C\x07R\x02\x02\u095C\u095D\x07N\x02\x02\u095D" +
+		"\u095E\x07C\x02\x02\u095E\u095F\x07E\x02\x02\u095F\u0960\x07G\x02\x02" +
+		"\u0960\u01EC\x03\x02\x02\x02\u0961\u0962\x07E\x02\x02\u0962\u0963\x07" +
+		"C\x02\x02\u0963\u0964\x07U\x02\x02\u0964\u0965\x07V\x02\x02\u0965\u01EE" +
+		"\x03\x02\x02\x02\u0966\u0967\x07N\x02\x02\u0967\u0968\x07K\x02\x02\u0968" +
+		"\u0969\x07M\x02\x02\u0969\u096A\x07G\x02\x02\u096A\u01F0\x03\x02\x02\x02" +
+		"\u096B\u096C\x07K\x02\x02\u096C\u096D\x07U\x02\x02\u096D\u096E\x07P\x02" +
+		"\x02\u096E\u096F\x07W\x02\x02\u096F\u0970\x07N\x02\x02\u0970\u0971\x07" +
+		"N\x02\x02\u0971\u01F2\x03\x02\x02\x02\u0972\u0973\x07K\x02\x02\u0973\u0974" +
+		"\x07U\x02\x02\u0974\u0975\x07P\x02\x02\u0975\u0976\x07Q\x02\x02\u0976" +
+		"\u0977\x07V\x02\x02\u0977\u0978\x07P\x02\x02\u0978\u0979\x07W\x02\x02" +
+		"\u0979\u097A\x07N\x02\x02\u097A\u097B\x07N\x02\x02\u097B\u01F4\x03\x02" +
+		"\x02\x02\u097C\u097D\x07K\x02\x02\u097D\u097E\x07H\x02\x02\u097E\u097F" +
+		"\x07P\x02\x02\u097F\u0980\x07W\x02\x02\u0980\u0981\x07N\x02\x02\u0981" +
+		"\u0982\x07N\x02\x02\u0982\u01F6\x03\x02\x02\x02\u0983\u0984\x07P\x02\x02" +
+		"\u0984\u0985\x07W\x02\x02\u0985\u0986\x07N\x02\x02\u0986\u0987\x07N\x02" +
+		"\x02\u0987\u0988\x07K\x02\x02\u0988\u0989\x07H\x02\x02\u0989\u01F8\x03" +
+		"\x02\x02\x02\u098A\u098B\x07K\x02\x02\u098B\u098C\x07H\x02\x02\u098C\u01FA" +
+		"\x03\x02\x02\x02\u098D\u098E\x07V\x02\x02\u098E\u098F\x07[\x02\x02\u098F" +
+		"\u0990\x07R\x02\x02\u0990\u0991\x07G\x02\x02\u0991\u0992\x07Q\x02\x02" +
+		"\u0992\u0993\x07H\x02\x02\u0993\u01FC\x03\x02\x02\x02\u0994\u0995\x07" +
+		"O\x02\x02\u0995\u0996\x07C\x02\x02\u0996\u0997\x07V\x02\x02\u0997\u0998" +
+		"\x07E\x02\x02\u0998\u0999\x07J\x02\x02\u0999\u01FE\x03\x02\x02\x02\u099A" +
+		"\u099B\x07O\x02\x02\u099B\u099C\x07C\x02\x02\u099C\u099D\x07V\x02\x02" +
+		"\u099D\u099E\x07E\x02\x02\u099E\u099F\x07J\x02\x02\u099F\u09A0\x07a\x02" +
+		"\x02\u09A0\u09A1\x07R\x02\x02\u09A1\u09A2\x07J\x02\x02\u09A2\u09A3\x07" +
+		"T\x02\x02\u09A3\u09A4\x07C\x02\x02\u09A4\u09A5\x07U\x02\x02\u09A5\u09A6" +
+		"\x07G\x02\x02\u09A6\u0200\x03\x02\x02\x02\u09A7\u09A8\x07O\x02\x02\u09A8" +
+		"\u09A9\x07C\x02\x02\u09A9\u09AA\x07V\x02\x02\u09AA\u09AB\x07E\x02\x02" +
+		"\u09AB\u09AC\x07J\x02\x02\u09AC\u09AD\x07a\x02\x02\u09AD\u09AE\x07R\x02" +
+		"\x02\u09AE\u09AF\x07J\x02\x02\u09AF\u09B0\x07T\x02\x02\u09B0\u09B1\x07" +
+		"C\x02\x02\u09B1\u09B2\x07U\x02\x02\u09B2\u09B3\x07G\x02\x02\u09B3\u09B4" +
+		"\x07a\x02\x02\u09B4\u09B5\x07R\x02\x02\u09B5\u09B6\x07T\x02\x02\u09B6" +
+		"\u09B7\x07G\x02\x02\u09B7\u09B8\x07H\x02\x02\u09B8\u09B9\x07K\x02\x02" +
+		"\u09B9\u09BA\x07Z\x02\x02\u09BA\u0202\x03\x02\x02\x02\u09BB\u09BC\x07" +
+		"O\x02\x02\u09BC\u09BD\x07C\x02\x02\u09BD\u09BE\x07V\x02\x02\u09BE\u09BF" +
+		"\x07E\x02\x02\u09BF\u09C0\x07J\x02\x02\u09C0\u09C1\x07a\x02\x02\u09C1" +
+		"\u09C2\x07D\x02\x02\u09C2\u09C3\x07Q\x02\x02\u09C3\u09C4\x07Q\x02\x02" +
+		"\u09C4\u09C5\x07N\x02\x02\u09C5\u09C6\x07a\x02\x02\u09C6\u09C7\x07R\x02" +
+		"\x02\u09C7\u09C8\x07T\x02\x02\u09C8\u09C9\x07G\x02\x02\u09C9\u09CA\x07" +
+		"H\x02\x02\u09CA\u09CB\x07K\x02\x02\u09CB\u09CC\x07Z\x02\x02\u09CC\u0204" +
+		"\x03\x02\x02\x02\u09CD\u09CE\x07U\x02\x02\u09CE\u09CF\x07K\x02\x02\u09CF" +
+		"\u09D0\x07O\x02\x02\u09D0\u09D1\x07R\x02\x02\u09D1\u09D2\x07N\x02\x02" +
+		"\u09D2\u09D3\x07G\x02\x02\u09D3\u09D4\x07a\x02\x02\u09D4\u09D5\x07S\x02" +
+		"\x02\u09D5\u09D6\x07W\x02\x02\u09D6\u09D7\x07G\x02\x02\u09D7\u09D8\x07" +
+		"T\x02\x02\u09D8\u09D9\x07[\x02\x02\u09D9\u09DA\x07a\x02\x02\u09DA\u09DB" +
+		"\x07U\x02\x02\u09DB\u09DC\x07V\x02\x02\u09DC\u09DD\x07T\x02\x02\u09DD" +
+		"\u09DE\x07K\x02\x02\u09DE\u09DF\x07P\x02\x02\u09DF\u09E0\x07I\x02\x02" +
+		"\u09E0\u0206\x03\x02\x02\x02\u09E1\u09E2\x07O\x02\x02\u09E2\u09E3\x07" +
+		"W\x02\x02\u09E3\u09E4\x07N\x02\x02\u09E4\u09E5\x07V\x02\x02\u09E5\u09E6" +
+		"\x07K\x02\x02\u09E6\u09E7\x07a\x02\x02\u09E7\u09E8\x07O\x02\x02\u09E8" +
+		"\u09E9\x07C\x02\x02\u09E9\u09EA\x07V\x02\x02\u09EA\u09EB\x07E\x02\x02" +
+		"\u09EB\u09EC\x07J\x02\x02\u09EC\u0208\x03\x02\x02\x02\u09ED\u09EE\x07" +
+		"S\x02\x02\u09EE\u09EF\x07W\x02\x02\u09EF\u09F0\x07G\x02\x02\u09F0\u09F1" +
+		"\x07T\x02\x02\u09F1\u09F2\x07[\x02\x02\u09F2\u09F3\x07a\x02\x02\u09F3" +
+		"\u09F4\x07U\x02\x02\u09F4\u09F5\x07V\x02\x02\u09F5\u09F6\x07T\x02\x02" +
+		"\u09F6\u09F7\x07K\x02\x02\u09F7\u09F8\x07P\x02\x02\u09F8\u09F9\x07I\x02" +
+		"\x02\u09F9\u020A\x03\x02\x02\x02\u09FA\u09FB\x07C\x02\x02\u09FB\u09FC" +
+		"\x07N\x02\x02\u09FC\u09FD\x07N\x02\x02\u09FD\u09FE\x07Q\x02\x02\u09FE" +
+		"\u09FF\x07Y\x02\x02\u09FF\u0A00\x07a\x02\x02\u0A00\u0A01\x07N\x02\x02" +
+		"\u0A01\u0A02\x07G\x02\x02\u0A02\u0A03\x07C\x02\x02\u0A03\u0A04\x07F\x02" +
+		"\x02\u0A04\u0A05\x07K\x02\x02\u0A05\u0A06\x07P\x02\x02\u0A06\u0A07\x07" +
+		"I\x02\x02\u0A07\u0A08\x07a\x02\x02\u0A08\u0A09\x07Y\x02\x02\u0A09\u0A0A" +
+		"\x07K\x02\x02\u0A0A\u0A0B\x07N\x02\x02\u0A0B\u0A0C\x07F\x02\x02\u0A0C" +
+		"\u0A0D\x07E\x02\x02\u0A0D\u0A0E\x07C\x02\x02\u0A0E\u0A0F\x07T\x02\x02" +
+		"\u0A0F\u0A10\x07F\x02\x02\u0A10\u020C\x03\x02\x02\x02\u0A11\u0A12\x07" +
+		"C\x02\x02\u0A12\u0A13\x07P\x02\x02\u0A13\u0A14\x07C\x02\x02\u0A14\u0A15" +
+		"\x07N\x02\x02\u0A15\u0A16\x07[\x02\x02\u0A16\u0A17\x07\\\x02\x02\u0A17" +
+		"\u0A18\x07G\x02\x02\u0A18\u0A19\x07a\x02\x02\u0A19\u0A1A\x07Y\x02\x02" +
+		"\u0A1A\u0A1B\x07K\x02\x02\u0A1B\u0A1C\x07N\x02\x02\u0A1C\u0A1D\x07F\x02" +
+		"\x02\u0A1D\u0A1E\x07E\x02\x02\u0A1E\u0A1F\x07C\x02\x02\u0A1F\u0A20\x07" +
+		"T\x02\x02\u0A20\u0A21\x07F\x02\x02\u0A21\u020E\x03\x02\x02\x02\u0A22\u0A23" +
+		"\x07C\x02\x02\u0A23\u0A24\x07P\x02\x02\u0A24\u0A25\x07C\x02\x02\u0A25" +
+		"\u0A26\x07N\x02\x02\u0A26\u0A27\x07[\x02\x02\u0A27\u0A28\x07\\\x02\x02" +
+		"\u0A28\u0A29\x07G\x02\x02\u0A29\u0A2A\x07T\x02\x02\u0A2A\u0210\x03\x02" +
+		"\x02\x02\u0A2B\u0A2C\x07C\x02\x02\u0A2C\u0A2D\x07W\x02\x02\u0A2D\u0A2E" +
+		"\x07V\x02\x02\u0A2E\u0A2F\x07Q\x02\x02\u0A2F\u0A30\x07a\x02\x02\u0A30" +
+		"\u0A31\x07I\x02\x02\u0A31\u0A32\x07G\x02\x02\u0A32\u0A33\x07P\x02\x02" +
+		"\u0A33\u0A34\x07G\x02\x02\u0A34\u0A35\x07T\x02\x02\u0A35\u0A36\x07C\x02" +
+		"\x02\u0A36\u0A37\x07V\x02\x02\u0A37\u0A38\x07G\x02\x02\u0A38\u0A39\x07" +
+		"a\x02\x02\u0A39\u0A3A\x07U\x02\x02\u0A3A\u0A3B\x07[\x02\x02\u0A3B\u0A3C" +
+		"\x07P\x02\x02\u0A3C\u0A3D\x07Q\x02\x02\u0A3D\u0A3E\x07P\x02\x02\u0A3E" +
+		"\u0A3F\x07[\x02\x02\u0A3F\u0A40\x07O\x02\x02\u0A40\u0A41\x07U\x02\x02" +
+		"\u0A41\u0A42\x07a\x02\x02\u0A42\u0A43\x07R\x02\x02\u0A43\u0A44\x07J\x02" +
+		"\x02\u0A44\u0A45\x07T\x02\x02\u0A45\u0A46\x07C\x02\x02\u0A46\u0A47\x07" +
+		"U\x02\x02\u0A47\u0A48\x07G\x02\x02\u0A48\u0A49\x07a\x02\x02\u0A49\u0A4A" +
+		"\x07S\x02\x02\u0A4A\u0A4B\x07W\x02\x02\u0A4B\u0A4C\x07G\x02\x02\u0A4C" +
+		"\u0A4D\x07T\x02\x02\u0A4D\u0A4E\x07[\x02\x02\u0A4E\u0212\x03\x02\x02\x02" +
+		"\u0A4F\u0A50\x07D\x02\x02\u0A50\u0A51\x07Q\x02\x02\u0A51\u0A52\x07Q\x02" +
+		"\x02\u0A52\u0A53\x07U\x02\x02\u0A53\u0A54\x07V\x02\x02\u0A54\u0214\x03" +
+		"\x02\x02\x02\u0A55\u0A56\x07E\x02\x02\u0A56\u0A57\x07W\x02\x02\u0A57\u0A58" +
+		"\x07V\x02\x02\u0A58\u0A59\x07Q\x02\x02\u0A59\u0A5A\x07H\x02\x02\u0A5A" +
+		"\u0A5B\x07H\x02\x02\u0A5B\u0A5C\x07a\x02\x02\u0A5C\u0A5D\x07H\x02\x02" +
+		"\u0A5D\u0A5E\x07T\x02\x02\u0A5E\u0A5F\x07G\x02\x02\u0A5F\u0A60\x07S\x02" +
+		"\x02\u0A60\u0A61\x07W\x02\x02\u0A61\u0A62\x07G\x02\x02\u0A62\u0A63\x07" +
+		"P\x02\x02\u0A63\u0A64\x07E\x02\x02\u0A64\u0A65\x07[\x02\x02\u0A65\u0216" +
+		"\x03\x02\x02\x02\u0A66\u0A67\x07F\x02\x02\u0A67\u0A68\x07G\x02\x02\u0A68" +
+		"\u0A69\x07H\x02\x02\u0A69\u0A6A\x07C\x02\x02\u0A6A\u0A6B\x07W\x02\x02" +
+		"\u0A6B\u0A6C\x07N\x02\x02\u0A6C\u0A6D\x07V\x02\x02\u0A6D\u0A6E\x07a\x02" +
+		"\x02\u0A6E\u0A6F\x07H\x02\x02\u0A6F\u0A70\x07K\x02\x02\u0A70\u0A71\x07" +
+		"G\x02\x02\u0A71\u0A72\x07N\x02\x02\u0A72\u0A73\x07F\x02\x02\u0A73\u0218" +
+		"\x03\x02\x02\x02\u0A74\u0A75\x07F\x02\x02\u0A75\u0A76\x07G\x02\x02\u0A76" +
+		"\u0A77\x07H\x02\x02\u0A77\u0A78\x07C\x02\x02\u0A78\u0A79\x07W\x02\x02" +
+		"\u0A79\u0A7A\x07N\x02\x02\u0A7A\u0A7B\x07V\x02\x02\u0A7B\u0A7C\x07a\x02" +
+		"\x02\u0A7C\u0A7D\x07Q\x02\x02\u0A7D\u0A7E\x07R\x02\x02\u0A7E\u0A7F\x07" +
+		"G\x02\x02\u0A7F\u0A80\x07T\x02\x02\u0A80\u0A81\x07C\x02\x02\u0A81\u0A82" +
+		"\x07V\x02\x02\u0A82\u0A83\x07Q\x02\x02\u0A83\u0A84\x07T\x02\x02\u0A84" +
+		"\u021A\x03\x02\x02\x02\u0A85\u0A86\x07G\x02\x02\u0A86\u0A87\x07P\x02\x02" +
+		"\u0A87\u0A88\x07C\x02\x02\u0A88\u0A89\x07D\x02\x02\u0A89\u0A8A\x07N\x02" +
+		"\x02\u0A8A\u0A8B\x07G\x02\x02\u0A8B\u0A8C\x07a\x02\x02\u0A8C\u0A8D\x07" +
+		"R\x02\x02\u0A8D\u0A8E\x07Q\x02\x02\u0A8E\u0A8F\x07U\x02\x02\u0A8F\u0A90" +
+		"\x07K\x02\x02\u0A90\u0A91\x07V\x02\x02\u0A91\u0A92\x07K\x02\x02\u0A92" +
+		"\u0A93\x07Q\x02\x02\u0A93\u0A94\x07P\x02\x02\u0A94\u0A95\x07a\x02\x02" +
+		"\u0A95\u0A96\x07K\x02\x02\u0A96\u0A97\x07P\x02\x02\u0A97\u0A98\x07E\x02" +
+		"\x02\u0A98\u0A99\x07T\x02\x02\u0A99\u0A9A\x07G\x02\x02\u0A9A\u0A9B\x07" +
+		"O\x02\x02\u0A9B\u0A9C\x07G\x02\x02\u0A9C\u0A9D\x07P\x02\x02\u0A9D\u0A9E" +
+		"\x07V\x02\x02\u0A9E\u0A9F\x07U\x02\x02\u0A9F\u021C\x03\x02\x02\x02\u0AA0" +
+		"\u0AA1\x07G\x02\x02\u0AA1\u0AA2\x07U\x02\x02\u0AA2\u0AA3\x07E\x02\x02" +
+		"\u0AA3\u0AA4\x07C\x02\x02\u0AA4\u0AA5\x07R\x02\x02\u0AA5\u0AA6\x07G\x02" +
+		"\x02\u0AA6\u021E\x03\x02\x02\x02\u0AA7\u0AA8\x07H\x02\x02\u0AA8\u0AA9" +
+		"\x07N\x02\x02\u0AA9\u0AAA\x07C\x02\x02\u0AAA\u0AAB\x07I\x02\x02\u0AAB" +
+		"\u0AAC\x07U\x02\x02\u0AAC\u0220\x03\x02\x02\x02\u0AAD\u0AAE\x07H\x02\x02" +
+		"\u0AAE\u0AAF\x07W\x02\x02\u0AAF\u0AB0\x07\\\x02\x02\u0AB0\u0AB1\x07\\" +
+		"\x02\x02\u0AB1\u0AB2\x07[\x02\x02\u0AB2\u0AB3\x07a\x02\x02\u0AB3\u0AB4" +
+		"\x07O\x02\x02\u0AB4\u0AB5\x07C\x02\x02\u0AB5\u0AB6\x07Z\x02\x02\u0AB6" +
+		"\u0AB7\x07a\x02\x02\u0AB7\u0AB8\x07G\x02\x02\u0AB8\u0AB9\x07Z\x02\x02" +
+		"\u0AB9\u0ABA\x07R\x02\x02\u0ABA\u0ABB\x07C\x02\x02\u0ABB\u0ABC\x07P\x02" +
+		"\x02\u0ABC\u0ABD\x07U\x02\x02\u0ABD\u0ABE\x07K\x02\x02\u0ABE\u0ABF\x07" +
+		"Q\x02\x02\u0ABF\u0AC0\x07P\x02\x02\u0AC0\u0AC1\x07U\x02\x02\u0AC1\u0222" +
+		"\x03\x02\x02\x02\u0AC2\u0AC3\x07H\x02\x02\u0AC3\u0AC4\x07W\x02\x02\u0AC4" +
+		"\u0AC5\x07\\\x02\x02\u0AC5\u0AC6\x07\\\x02\x02\u0AC6\u0AC7\x07[\x02\x02" +
+		"\u0AC7\u0AC8\x07a\x02\x02\u0AC8\u0AC9\x07R\x02\x02\u0AC9\u0ACA\x07T\x02" +
+		"\x02\u0ACA\u0ACB\x07G\x02\x02\u0ACB\u0ACC\x07H\x02\x02\u0ACC\u0ACD\x07" +
+		"K\x02\x02\u0ACD\u0ACE\x07Z\x02\x02\u0ACE\u0ACF\x07a\x02\x02\u0ACF\u0AD0" +
+		"\x07N\x02\x02\u0AD0\u0AD1\x07G\x02\x02\u0AD1\u0AD2\x07P\x02\x02\u0AD2" +
+		"\u0AD3\x07I\x02\x02\u0AD3\u0AD4\x07V\x02\x02\u0AD4\u0AD5\x07J\x02\x02" +
+		"\u0AD5\u0224\x03\x02\x02\x02\u0AD6\u0AD7\x07H\x02\x02\u0AD7\u0AD8\x07" +
+		"W\x02\x02\u0AD8\u0AD9\x07\\\x02\x02\u0AD9\u0ADA\x07\\\x02\x02\u0ADA\u0ADB" +
+		"\x07[\x02\x02\u0ADB\u0ADC\x07a\x02\x02\u0ADC\u0ADD\x07V\x02\x02\u0ADD" +
+		"\u0ADE\x07T\x02\x02\u0ADE\u0ADF\x07C\x02\x02\u0ADF\u0AE0\x07P\x02\x02" +
+		"\u0AE0\u0AE1\x07U\x02\x02\u0AE1\u0AE2\x07R\x02\x02\u0AE2\u0AE3\x07Q\x02" +
+		"\x02\u0AE3\u0AE4\x07U\x02\x02\u0AE4\u0AE5\x07K\x02\x02\u0AE5\u0AE6\x07" +
+		"V\x02\x02\u0AE6\u0AE7\x07K\x02\x02\u0AE7\u0AE8\x07Q\x02\x02\u0AE8\u0AE9" +
+		"\x07P\x02\x02\u0AE9\u0AEA\x07U\x02\x02\u0AEA\u0226\x03\x02\x02\x02\u0AEB" +
+		"\u0AEC\x07H\x02\x02\u0AEC\u0AED\x07W\x02\x02\u0AED\u0AEE\x07\\\x02\x02" +
+		"\u0AEE\u0AEF\x07\\\x02\x02\u0AEF\u0AF0\x07[\x02\x02\u0AF0\u0AF1\x07a\x02" +
+		"\x02\u0AF1\u0AF2\x07T\x02\x02\u0AF2\u0AF3\x07G\x02\x02\u0AF3\u0AF4\x07" +
+		"Y\x02\x02\u0AF4\u0AF5\x07T\x02\x02\u0AF5\u0AF6\x07K\x02\x02\u0AF6\u0AF7" +
+		"\x07V\x02\x02\u0AF7\u0AF8\x07G\x02\x02\u0AF8\u0228\x03\x02\x02\x02\u0AF9" +
+		"\u0AFA\x07H\x02\x02\u0AFA\u0AFB\x07W\x02\x02\u0AFB\u0AFC\x07\\\x02\x02" +
+		"\u0AFC\u0AFD\x07\\\x02\x02\u0AFD\u0AFE\x07K\x02\x02\u0AFE\u0AFF\x07P\x02" +
+		"\x02\u0AFF\u0B00\x07G\x02\x02\u0B00\u0B01\x07U\x02\x02\u0B01\u0B02\x07" +
+		"U\x02\x02\u0B02\u022A\x03\x02\x02\x02\u0B03\u0B04\x07N\x02\x02\u0B04\u0B05" +
+		"\x07G\x02\x02\u0B05\u0B06\x07P\x02\x02\u0B06\u0B07\x07K\x02\x02\u0B07" +
+		"\u0B08\x07G\x02\x02\u0B08\u0B09\x07P\x02\x02\u0B09\u0B0A\x07V\x02\x02" +
+		"\u0B0A\u022C\x03\x02\x02\x02\u0B0B\u0B0C\x07N\x02\x02\u0B0C\u0B0D\x07" +
+		"Q\x02\x02\u0B0D\u0B0E\x07Y\x02\x02\u0B0E\u0B0F\x07a\x02\x02\u0B0F\u0B10" +
+		"\x07H\x02\x02\u0B10\u0B11\x07T\x02\x02\u0B11\u0B12\x07G\x02\x02\u0B12" +
+		"\u0B13\x07S\x02\x02\u0B13\u0B14\x07a\x02\x02\u0B14\u0B15\x07Q\x02\x02" +
+		"\u0B15\u0B16\x07R\x02\x02\u0B16\u0B17\x07G\x02\x02\u0B17\u0B18\x07T\x02" +
+		"\x02\u0B18\u0B19\x07C\x02\x02\u0B19\u0B1A\x07V\x02\x02\u0B1A\u0B1B\x07" +
+		"Q\x02\x02\u0B1B\u0B1C\x07T\x02\x02\u0B1C\u022E\x03\x02\x02\x02\u0B1D\u0B1E" +
+		"\x07O\x02\x02\u0B1E\u0B1F\x07C\x02\x02\u0B1F\u0B20\x07Z\x02\x02\u0B20" +
+		"\u0B21\x07a\x02\x02\u0B21\u0B22\x07F\x02\x02\u0B22\u0B23\x07G\x02\x02" +
+		"\u0B23\u0B24\x07V\x02\x02\u0B24\u0B25\x07G\x02\x02\u0B25\u0B26\x07T\x02" +
+		"\x02\u0B26\u0B27\x07O\x02\x02\u0B27\u0B28\x07K\x02\x02\u0B28\u0B29\x07" +
+		"P\x02\x02\u0B29\u0B2A\x07K\x02\x02\u0B2A\u0B2B\x07\\\x02\x02\u0B2B\u0B2C" +
+		"\x07G\x02\x02\u0B2C\u0B2D\x07F\x02\x02\u0B2D\u0B2E\x07a\x02\x02\u0B2E" +
+		"\u0B2F\x07U\x02\x02\u0B2F\u0B30\x07V\x02\x02\u0B30\u0B31\x07C\x02\x02" +
+		"\u0B31\u0B32\x07V\x02\x02\u0B32\u0B33\x07G\x02\x02\u0B33\u0B34\x07U\x02" +
+		"\x02\u0B34\u0230\x03\x02\x02\x02\u0B35\u0B36\x07O\x02\x02\u0B36\u0B37" +
+		"\x07C\x02\x02\u0B37\u0B38\x07Z\x02\x02\u0B38\u0B39\x07a\x02\x02\u0B39" +
+		"\u0B3A\x07G\x02\x02\u0B3A\u0B3B\x07Z\x02\x02\u0B3B\u0B3C\x07R\x02\x02" +
+		"\u0B3C\u0B3D\x07C\x02\x02\u0B3D\u0B3E\x07P\x02\x02\u0B3E\u0B3F\x07U\x02" +
+		"\x02\u0B3F\u0B40\x07K\x02\x02\u0B40\u0B41\x07Q\x02\x02\u0B41\u0B42\x07" +
+		"P\x02\x02\u0B42\u0B43\x07U\x02\x02\u0B43\u0232\x03\x02\x02\x02\u0B44\u0B45" +
+		"\x07O\x02\x02\u0B45\u0B46\x07K\x02\x02\u0B46\u0B47\x07P\x02\x02\u0B47" +
+		"\u0B48\x07K\x02\x02\u0B48\u0B49\x07O\x02\x02\u0B49\u0B4A\x07W\x02\x02" +
+		"\u0B4A\u0B4B\x07O\x02\x02\u0B4B\u0B4C\x07a\x02\x02\u0B4C\u0B4D\x07U\x02" +
+		"\x02\u0B4D\u0B4E\x07J\x02\x02\u0B4E\u0B4F\x07Q\x02\x02\u0B4F\u0B50\x07" +
+		"W\x02\x02\u0B50\u0B51\x07N\x02\x02\u0B51\u0B52\x07F\x02\x02\u0B52\u0B53" +
+		"\x07a\x02\x02\u0B53\u0B54\x07O\x02\x02\u0B54\u0B55\x07C\x02\x02\u0B55" +
+		"\u0B56\x07V\x02\x02\u0B56\u0B57\x07E\x02\x02\u0B57\u0B58\x07J\x02\x02" +
+		"\u0B58\u0234\x03\x02\x02\x02\u0B59\u0B5A\x07Q\x02\x02\u0B5A\u0B5B\x07" +
+		"R\x02\x02\u0B5B\u0B5C\x07G\x02\x02\u0B5C\u0B5D\x07T\x02\x02\u0B5D\u0B5E" +
+		"\x07C\x02\x02\u0B5E\u0B5F\x07V\x02\x02\u0B5F\u0B60\x07Q\x02\x02\u0B60" +
+		"\u0B61\x07T\x02\x02\u0B61\u0236\x03\x02\x02\x02\u0B62\u0B63\x07R\x02\x02" +
+		"\u0B63\u0B64\x07J\x02\x02\u0B64\u0B65\x07T\x02\x02\u0B65\u0B66\x07C\x02" +
+		"\x02\u0B66\u0B67\x07U\x02\x02\u0B67\u0B68\x07G\x02\x02\u0B68\u0B69\x07" +
+		"a\x02\x02\u0B69\u0B6A\x07U\x02\x02\u0B6A\u0B6B\x07N\x02\x02\u0B6B\u0B6C" +
+		"\x07Q\x02\x02\u0B6C\u0B6D\x07R\x02\x02\u0B6D\u0238\x03\x02\x02\x02\u0B6E" +
+		"\u0B6F\x07R\x02\x02\u0B6F\u0B70\x07T\x02\x02\u0B70\u0B71\x07G\x02\x02" +
+		"\u0B71\u0B72\x07H\x02\x02\u0B72\u0B73\x07K\x02\x02\u0B73\u0B74\x07Z\x02" +
+		"\x02\u0B74\u0B75\x07a\x02\x02\u0B75\u0B76\x07N\x02\x02\u0B76\u0B77\x07" +
+		"G\x02\x02\u0B77\u0B78\x07P\x02\x02\u0B78\u0B79\x07I\x02\x02\u0B79\u0B7A" +
+		"\x07V\x02\x02\u0B7A\u0B7B\x07J\x02\x02\u0B7B\u023A\x03\x02\x02\x02\u0B7C" +
+		"\u0B7D\x07S\x02\x02\u0B7D\u0B7E\x07W\x02\x02\u0B7E\u0B7F\x07Q\x02\x02" +
+		"\u0B7F\u0B80\x07V\x02\x02\u0B80\u0B81\x07G\x02\x02\u0B81\u0B82\x07a\x02" +
+		"\x02\u0B82\u0B83\x07C\x02\x02\u0B83\u0B84\x07P\x02\x02\u0B84\u0B85\x07" +
+		"C\x02\x02\u0B85\u0B86\x07N\x02\x02\u0B86\u0B87\x07[\x02\x02\u0B87\u0B88" +
+		"\x07\\\x02\x02\u0B88\u0B89\x07G\x02\x02\u0B89\u0B8A\x07T\x02\x02\u0B8A" +
+		"\u023C\x03\x02\x02\x02\u0B8B\u0B8C\x07S\x02\x02\u0B8C\u0B8D\x07W\x02\x02" +
+		"\u0B8D\u0B8E\x07Q\x02\x02\u0B8E\u0B8F\x07V\x02\x02\u0B8F";
+	private static readonly _serializedATNSegment5: string =
+		"\u0B90\x07G\x02\x02\u0B90\u0B91\x07a\x02\x02\u0B91\u0B92\x07H\x02\x02" +
+		"\u0B92\u0B93\x07K\x02\x02\u0B93\u0B94\x07G\x02\x02\u0B94\u0B95\x07N\x02" +
+		"\x02\u0B95\u0B96\x07F\x02\x02\u0B96\u0B97\x07a\x02\x02\u0B97\u0B98\x07" +
+		"U\x02\x02\u0B98\u0B99\x07W\x02\x02\u0B99\u0B9A\x07H\x02\x02\u0B9A\u0B9B" +
+		"\x07H\x02\x02\u0B9B\u0B9C\x07K\x02\x02\u0B9C\u0B9D\x07Z\x02\x02\u0B9D" +
+		"\u023E\x03\x02\x02\x02\u0B9E\u0B9F\x07T\x02\x02\u0B9F\u0BA0\x07G\x02\x02" +
+		"\u0BA0\u0BA1\x07Y\x02\x02\u0BA1\u0BA2\x07T\x02\x02\u0BA2\u0BA3\x07K\x02" +
+		"\x02\u0BA3\u0BA4\x07V\x02\x02\u0BA4\u0BA5\x07G\x02\x02\u0BA5\u0240\x03" +
+		"\x02\x02\x02\u0BA6\u0BA7\x07U\x02\x02\u0BA7\u0BA8\x07N\x02\x02\u0BA8\u0BA9" +
+		"\x07Q\x02\x02\u0BA9\u0BAA\x07R\x02\x02\u0BAA\u0242\x03\x02\x02\x02\u0BAB" +
+		"\u0BAC\x07V\x02\x02\u0BAC\u0BAD\x07K\x02\x02\u0BAD\u0BAE\x07G\x02\x02" +
+		"\u0BAE\u0BAF\x07a\x02\x02\u0BAF\u0BB0\x07D\x02\x02\u0BB0\u0BB1\x07T\x02" +
+		"\x02\u0BB1\u0BB2\x07G\x02\x02\u0BB2\u0BB3\x07C\x02\x02\u0BB3\u0BB4\x07" +
+		"M\x02\x02\u0BB4\u0BB5\x07G\x02\x02\u0BB5\u0BB6\x07T\x02\x02\u0BB6\u0244" +
+		"\x03\x02\x02\x02\u0BB7\u0BB8\x07V\x02\x02\u0BB8\u0BB9\x07[\x02\x02\u0BB9" +
+		"\u0BBA\x07R\x02\x02\u0BBA\u0BBB\x07G\x02\x02\u0BBB\u0246\x03\x02\x02\x02" +
+		"\u0BBC\u0BBD\x07\\\x02\x02\u0BBD\u0BBE\x07G\x02\x02\u0BBE\u0BBF\x07T\x02" +
+		"\x02\u0BBF\u0BC0\x07Q\x02\x02\u0BC0\u0BC1\x07a\x02\x02\u0BC1\u0BC2\x07" +
+		"V\x02\x02\u0BC2\u0BC3\x07G\x02\x02\u0BC3\u0BC4\x07T\x02\x02\u0BC4\u0BC5" +
+		"\x07O\x02\x02\u0BC5\u0BC6\x07U\x02\x02\u0BC6\u0BC7\x07a\x02\x02\u0BC7" +
+		"\u0BC8\x07S\x02\x02\u0BC8\u0BC9\x07W\x02\x02\u0BC9\u0BCA\x07G\x02\x02" +
+		"\u0BCA\u0BCB\x07T\x02\x02\u0BCB\u0BCC\x07[\x02\x02\u0BCC\u0248\x03\x02" +
+		"\x02\x02\u0BCD\u0BCE\x07U\x02\x02\u0BCE\u0BCF\x07R\x02\x02\u0BCF\u0BD0" +
+		"\x07C\x02\x02\u0BD0\u0BD1\x07P\x02\x02\u0BD1\u024A\x03\x02\x02\x02\u0BD2" +
+		"\u0BD3\x07O\x02\x02\u0BD3\u0BD4\x07U\x02\x02\u0BD4\u024C\x03\x02\x02\x02" +
+		"\u0BD5\u0BD6\x07U\x02\x02\u0BD6\u024E\x03\x02\x02\x02\u0BD7\u0BD8\x07" +
+		"O\x02\x02\u0BD8\u0250\x03\x02\x02\x02\u0BD9\u0BDA\x07J\x02\x02\u0BDA\u0252" +
+		"\x03\x02\x02\x02\u0BDB\u0BDC\x07Y\x02\x02\u0BDC\u0254\x03\x02\x02\x02" +
+		"\u0BDD\u0BDE\x07S\x02\x02\u0BDE\u0256\x03\x02\x02\x02\u0BDF\u0BE0\x07" +
+		"[\x02\x02\u0BE0\u0258\x03\x02\x02\x02\u0BE1\u0BE2\x05\u0261\u0131\x02" +
+		"\u0BE2\u025A\x03\x02\x02\x02\u0BE3\u0BE5\x05\u026B\u0136\x02\u0BE4\u0BE3" +
+		"\x03\x02\x02\x02\u0BE5\u0BE6\x03\x02\x02\x02\u0BE6\u0BE4\x03\x02\x02\x02" +
+		"\u0BE6\u0BE7\x03\x02\x02\x02\u0BE7\u025C\x03\x02\x02\x02\u0BE8\u0BEA\x05" +
+		"\u026B\u0136\x02\u0BE9\u0BE8\x03\x02\x02\x02\u0BEA\u0BEB\x03\x02\x02\x02" +
+		"\u0BEB\u0BE9\x03\x02\x02\x02\u0BEB\u0BEC\x03\x02\x02\x02\u0BEC\u0BEE\x03" +
+		"\x02\x02\x02\u0BED\u0BE9\x03\x02\x02\x02\u0BED\u0BEE\x03\x02\x02\x02\u0BEE" +
+		"\u0BEF\x03\x02\x02\x02\u0BEF\u0BF1\x070\x02\x02\u0BF0\u0BF2\x05\u026B" +
+		"\u0136\x02\u0BF1\u0BF0\x03\x02\x02\x02\u0BF2\u0BF3\x03\x02\x02\x02\u0BF3" +
+		"\u0BF1\x03\x02\x02\x02\u0BF3\u0BF4\x03\x02\x02\x02\u0BF4\u025E\x03\x02" +
+		"\x02\x02\u0BF5\u0BF7\t\x02\x02\x02\u0BF6\u0BF8\t\x03\x02\x02\u0BF7\u0BF6" +
+		"\x03\x02\x02\x02\u0BF8\u0BF9\x03\x02\x02\x02\u0BF9\u0BF7\x03\x02\x02\x02" +
+		"\u0BF9\u0BFA\x03\x02\x02\x02\u0BFA\u0BFC\x03\x02\x02\x02\u0BFB\u0BF5\x03" +
+		"\x02\x02\x02\u0BFC\u0BFF\x03\x02\x02\x02\u0BFD\u0BFB\x03\x02\x02\x02\u0BFD" +
+		"\u0BFE\x03\x02\x02\x02\u0BFE\u0260\x03\x02\x02\x02\u0BFF\u0BFD\x03\x02" +
+		"\x02\x02\u0C00\u0C02\t\x04\x02\x02\u0C01\u0C00\x03\x02\x02\x02\u0C02\u0C03" +
+		"\x03\x02\x02\x02\u0C03\u0C04\x03\x02\x02\x02\u0C03\u0C01\x03\x02\x02\x02" +
+		"\u0C04\u0C08\x03\x02\x02\x02\u0C05\u0C07\t\x05\x02\x02\u0C06\u0C05\x03" +
+		"\x02\x02\x02\u0C07\u0C0A\x03\x02\x02\x02\u0C08\u0C06\x03\x02\x02\x02\u0C08" +
+		"\u0C09\x03\x02\x02\x02\u0C09\u0262\x03\x02\x02\x02\u0C0A\u0C08\x03\x02" +
+		"\x02\x02\u0C0B\u0C0C\x05\u0261\u0131\x02\u0C0C\u0C0D\x05\u025F\u0130\x02" +
+		"\u0C0D\u0264\x03\x02\x02\x02\u0C0E\u0C16\x07$\x02\x02\u0C0F\u0C10\x07" +
+		"^\x02\x02\u0C10\u0C15\v\x02\x02\x02\u0C11\u0C12\x07$\x02\x02\u0C12\u0C15" +
+		"\x07$\x02\x02\u0C13\u0C15\n\x06\x02\x02\u0C14\u0C0F\x03\x02\x02\x02\u0C14" +
+		"\u0C11\x03\x02\x02\x02\u0C14\u0C13\x03\x02\x02\x02\u0C15\u0C18\x03\x02" +
+		"\x02\x02\u0C16\u0C14\x03\x02\x02\x02\u0C16\u0C17\x03\x02\x02\x02\u0C17" +
+		"\u0C19\x03\x02\x02\x02\u0C18\u0C16\x03\x02\x02\x02\u0C19\u0C1A\x07$\x02" +
+		"\x02\u0C1A\u0266\x03\x02\x02\x02\u0C1B\u0C23\x07)\x02\x02\u0C1C\u0C1D" +
+		"\x07^\x02\x02\u0C1D\u0C22\v\x02\x02\x02\u0C1E\u0C1F\x07)\x02\x02\u0C1F" +
+		"\u0C22\x07)\x02\x02\u0C20\u0C22\n\x07\x02\x02\u0C21\u0C1C\x03\x02\x02" +
+		"\x02\u0C21\u0C1E\x03\x02\x02\x02\u0C21\u0C20\x03\x02\x02\x02\u0C22\u0C25" +
+		"\x03\x02\x02\x02\u0C23\u0C21\x03\x02\x02\x02\u0C23\u0C24\x03\x02\x02\x02" +
+		"\u0C24\u0C26\x03\x02\x02\x02\u0C25\u0C23\x03\x02\x02\x02\u0C26\u0C27\x07" +
+		")\x02\x02\u0C27\u0268\x03\x02\x02\x02\u0C28\u0C30\x07b\x02\x02\u0C29\u0C2A" +
+		"\x07^\x02\x02\u0C2A\u0C2F\v\x02\x02\x02\u0C2B\u0C2C\x07b\x02\x02\u0C2C" +
+		"\u0C2F\x07b\x02\x02\u0C2D\u0C2F\n\b\x02\x02\u0C2E\u0C29\x03\x02\x02\x02" +
+		"\u0C2E\u0C2B\x03\x02\x02\x02\u0C2E\u0C2D\x03\x02\x02\x02\u0C2F\u0C32\x03" +
+		"\x02\x02\x02\u0C30\u0C2E\x03\x02\x02\x02\u0C30\u0C31\x03\x02\x02\x02\u0C31" +
+		"\u0C33\x03\x02\x02\x02\u0C32\u0C30\x03\x02\x02\x02\u0C33\u0C34\x07b\x02" +
+		"\x02\u0C34\u026A\x03\x02\x02\x02\u0C35\u0C36\t\t\x02\x02\u0C36\u026C\x03" +
+		"\x02\x02\x02\u0C37\u0C38\v\x02\x02\x02\u0C38\u0C39\x03\x02\x02\x02\u0C39" +
+		"\u0C3A\b\u0137\x02\x02\u0C3A\u026E\x03\x02\x02\x02\x11\x02\u0BE6\u0BEB" +
+		"\u0BED\u0BF3\u0BF9\u0BFD\u0C03\u0C08\u0C14\u0C16\u0C21\u0C23\u0C2E\u0C30" +
+		"\x03\x02\x05\x02";
+	public static readonly _serializedATN: string = Utils.join(
+		[
+			OpenSearchPPLLexer._serializedATNSegment0,
+			OpenSearchPPLLexer._serializedATNSegment1,
+			OpenSearchPPLLexer._serializedATNSegment2,
+			OpenSearchPPLLexer._serializedATNSegment3,
+			OpenSearchPPLLexer._serializedATNSegment4,
+			OpenSearchPPLLexer._serializedATNSegment5,
+		],
+		"",
+	);
+	public static __ATN: ATN;
+	public static get _ATN(): ATN {
+		if (!OpenSearchPPLLexer.__ATN) {
+			OpenSearchPPLLexer.__ATN = new ATNDeserializer().deserialize(Utils.toCharArray(OpenSearchPPLLexer._serializedATN));
+		}
+
+		return OpenSearchPPLLexer.__ATN;
+	}
+
+}
+
diff --git a/common/query_manager/antlr/output/OpenSearchPPLParser.interp b/common/query_manager/antlr/output/OpenSearchPPLParser.interp
new file mode 100644
index 0000000000..1610ee03ef
--- /dev/null
+++ b/common/query_manager/antlr/output/OpenSearchPPLParser.interp
@@ -0,0 +1,728 @@
+token literal names:
+null
+'SEARCH'
+'DESCRIBE'
+'SHOW'
+'FROM'
+'WHERE'
+'FIELDS'
+'RENAME'
+'STATS'
+'DEDUP'
+'SORT'
+'EVAL'
+'HEAD'
+'TOP'
+'RARE'
+'PARSE'
+'METHOD'
+'REGEX'
+'PUNCT'
+'GROK'
+'PATTERN'
+'PATTERNS'
+'NEW_FIELD'
+'KMEANS'
+'AD'
+'ML'
+'AS'
+'BY'
+'SOURCE'
+'INDEX'
+'D'
+'DESC'
+'CATALOGS'
+'SORTBY'
+'AUTO'
+'STR'
+'IP'
+'NUM'
+'KEEPEMPTY'
+'CONSECUTIVE'
+'DEDUP_SPLITVALUES'
+'PARTITIONS'
+'ALLNUM'
+'DELIM'
+'CENTROIDS'
+'ITERATIONS'
+'DISTANCE_TYPE'
+'NUMBER_OF_TREES'
+'SHINGLE_SIZE'
+'SAMPLE_SIZE'
+'OUTPUT_AFTER'
+'TIME_DECAY'
+'ANOMALY_RATE'
+'CATEGORY_FIELD'
+'TIME_FIELD'
+'TIME_ZONE'
+'TRAINING_DATA_SIZE'
+'ANOMALY_SCORE_THRESHOLD'
+'CASE'
+'IN'
+'NOT'
+'OR'
+'AND'
+'XOR'
+'TRUE'
+'FALSE'
+'REGEXP'
+'DATETIME'
+'INTERVAL'
+'MICROSECOND'
+'MILLISECOND'
+'SECOND'
+'MINUTE'
+'HOUR'
+'DAY'
+'WEEK'
+'MONTH'
+'QUARTER'
+'YEAR'
+'SECOND_MICROSECOND'
+'MINUTE_MICROSECOND'
+'MINUTE_SECOND'
+'HOUR_MICROSECOND'
+'HOUR_SECOND'
+'HOUR_MINUTE'
+'DAY_MICROSECOND'
+'DAY_SECOND'
+'DAY_MINUTE'
+'DAY_HOUR'
+'YEAR_MONTH'
+'CONVERT_TZ'
+'DATAMODEL'
+'LOOKUP'
+'SAVEDSEARCH'
+'INT'
+'INTEGER'
+'DOUBLE'
+'LONG'
+'FLOAT'
+'STRING'
+'BOOLEAN'
+'|'
+','
+'.'
+'='
+'>'
+'<'
+null
+null
+null
+'+'
+'-'
+'*'
+'/'
+'%'
+'!'
+':'
+'('
+')'
+'['
+']'
+'\''
+'"'
+'`'
+'~'
+'&'
+'^'
+'AVG'
+'COUNT'
+'DISTINCT_COUNT'
+'ESTDC'
+'ESTDC_ERROR'
+'MAX'
+'MEAN'
+'MEDIAN'
+'MIN'
+'MODE'
+'RANGE'
+'STDEV'
+'STDEVP'
+'SUM'
+'SUMSQ'
+'VAR_SAMP'
+'VAR_POP'
+'STDDEV_SAMP'
+'STDDEV_POP'
+'PERCENTILE'
+'TAKE'
+'FIRST'
+'LAST'
+'LIST'
+'VALUES'
+'EARLIEST'
+'EARLIEST_TIME'
+'LATEST'
+'LATEST_TIME'
+'PER_DAY'
+'PER_HOUR'
+'PER_MINUTE'
+'PER_SECOND'
+'RATE'
+'SPARKLINE'
+'C'
+'DC'
+'ABS'
+'CEIL'
+'CEILING'
+'CONV'
+'CRC32'
+'E'
+'EXP'
+'FLOOR'
+'LN'
+'LOG'
+'LOG10'
+'LOG2'
+'MOD'
+'PI'
+'POW'
+'POWER'
+'RAND'
+'ROUND'
+'SIGN'
+'SQRT'
+'TRUNCATE'
+'ACOS'
+'ASIN'
+'ATAN'
+'ATAN2'
+'COS'
+'COT'
+'DEGREES'
+'RADIANS'
+'SIN'
+'TAN'
+'ADDDATE'
+'CURDATE'
+'CURRENT_DATE'
+'CURRENT_TIME'
+'CURRENT_TIMESTAMP'
+'CURTIME'
+'DATE'
+'DATE_ADD'
+'DATE_FORMAT'
+'DATE_SUB'
+'DAYNAME'
+'DAYOFMONTH'
+'DAYOFWEEK'
+'DAYOFYEAR'
+'FROM_DAYS'
+'LOCALTIME'
+'LOCALTIMESTAMP'
+'FROM_UNIXTIME'
+'MAKEDATE'
+'MAKETIME'
+'MONTHNAME'
+'NOW'
+'PERIOD_ADD'
+'PERIOD_DIFF'
+'SUBDATE'
+'SYSDATE'
+'TIME'
+'TIME_TO_SEC'
+'TIMESTAMP'
+'TO_DAYS'
+'UTC_DATE'
+'UTC_TIME'
+'UTC_TIMESTAMP'
+'UNIX_TIMESTAMP'
+'SUBSTR'
+'SUBSTRING'
+'LTRIM'
+'RTRIM'
+'TRIM'
+'TO'
+'LOWER'
+'UPPER'
+'CONCAT'
+'CONCAT_WS'
+'LENGTH'
+'STRCMP'
+'RIGHT'
+'LEFT'
+'ASCII'
+'LOCATE'
+'REPLACE'
+'CAST'
+'LIKE'
+'ISNULL'
+'ISNOTNULL'
+'IFNULL'
+'NULLIF'
+'IF'
+'TYPEOF'
+'MATCH'
+'MATCH_PHRASE'
+'MATCH_PHRASE_PREFIX'
+'MATCH_BOOL_PREFIX'
+'SIMPLE_QUERY_STRING'
+'MULTI_MATCH'
+'QUERY_STRING'
+'ALLOW_LEADING_WILDCARD'
+'ANALYZE_WILDCARD'
+'ANALYZER'
+'AUTO_GENERATE_SYNONYMS_PHRASE_QUERY'
+'BOOST'
+'CUTOFF_FREQUENCY'
+'DEFAULT_FIELD'
+'DEFAULT_OPERATOR'
+'ENABLE_POSITION_INCREMENTS'
+'ESCAPE'
+'FLAGS'
+'FUZZY_MAX_EXPANSIONS'
+'FUZZY_PREFIX_LENGTH'
+'FUZZY_TRANSPOSITIONS'
+'FUZZY_REWRITE'
+'FUZZINESS'
+'LENIENT'
+'LOW_FREQ_OPERATOR'
+'MAX_DETERMINIZED_STATES'
+'MAX_EXPANSIONS'
+'MINIMUM_SHOULD_MATCH'
+'OPERATOR'
+'PHRASE_SLOP'
+'PREFIX_LENGTH'
+'QUOTE_ANALYZER'
+'QUOTE_FIELD_SUFFIX'
+'REWRITE'
+'SLOP'
+'TIE_BREAKER'
+'TYPE'
+'ZERO_TERMS_QUERY'
+'SPAN'
+'MS'
+'S'
+'M'
+'H'
+'W'
+'Q'
+'Y'
+null
+null
+null
+null
+null
+null
+null
+null
+
+token symbolic names:
+null
+SEARCH
+DESCRIBE
+SHOW
+FROM
+WHERE
+FIELDS
+RENAME
+STATS
+DEDUP
+SORT
+EVAL
+HEAD
+TOP
+RARE
+PARSE
+METHOD
+REGEX
+PUNCT
+GROK
+PATTERN
+PATTERNS
+NEW_FIELD
+KMEANS
+AD
+ML
+AS
+BY
+SOURCE
+INDEX
+D
+DESC
+CATALOGS
+SORTBY
+AUTO
+STR
+IP
+NUM
+KEEPEMPTY
+CONSECUTIVE
+DEDUP_SPLITVALUES
+PARTITIONS
+ALLNUM
+DELIM
+CENTROIDS
+ITERATIONS
+DISTANCE_TYPE
+NUMBER_OF_TREES
+SHINGLE_SIZE
+SAMPLE_SIZE
+OUTPUT_AFTER
+TIME_DECAY
+ANOMALY_RATE
+CATEGORY_FIELD
+TIME_FIELD
+TIME_ZONE
+TRAINING_DATA_SIZE
+ANOMALY_SCORE_THRESHOLD
+CASE
+IN
+NOT
+OR
+AND
+XOR
+TRUE
+FALSE
+REGEXP
+DATETIME
+INTERVAL
+MICROSECOND
+MILLISECOND
+SECOND
+MINUTE
+HOUR
+DAY
+WEEK
+MONTH
+QUARTER
+YEAR
+SECOND_MICROSECOND
+MINUTE_MICROSECOND
+MINUTE_SECOND
+HOUR_MICROSECOND
+HOUR_SECOND
+HOUR_MINUTE
+DAY_MICROSECOND
+DAY_SECOND
+DAY_MINUTE
+DAY_HOUR
+YEAR_MONTH
+CONVERT_TZ
+DATAMODEL
+LOOKUP
+SAVEDSEARCH
+INT
+INTEGER
+DOUBLE
+LONG
+FLOAT
+STRING
+BOOLEAN
+PIPE
+COMMA
+DOT
+EQUAL
+GREATER
+LESS
+NOT_GREATER
+NOT_LESS
+NOT_EQUAL
+PLUS
+MINUS
+STAR
+DIVIDE
+MODULE
+EXCLAMATION_SYMBOL
+COLON
+LT_PRTHS
+RT_PRTHS
+LT_SQR_PRTHS
+RT_SQR_PRTHS
+SINGLE_QUOTE
+DOUBLE_QUOTE
+BACKTICK
+BIT_NOT_OP
+BIT_AND_OP
+BIT_XOR_OP
+AVG
+COUNT
+DISTINCT_COUNT
+ESTDC
+ESTDC_ERROR
+MAX
+MEAN
+MEDIAN
+MIN
+MODE
+RANGE
+STDEV
+STDEVP
+SUM
+SUMSQ
+VAR_SAMP
+VAR_POP
+STDDEV_SAMP
+STDDEV_POP
+PERCENTILE
+TAKE
+FIRST
+LAST
+LIST
+VALUES
+EARLIEST
+EARLIEST_TIME
+LATEST
+LATEST_TIME
+PER_DAY
+PER_HOUR
+PER_MINUTE
+PER_SECOND
+RATE
+SPARKLINE
+C
+DC
+ABS
+CEIL
+CEILING
+CONV
+CRC32
+E
+EXP
+FLOOR
+LN
+LOG
+LOG10
+LOG2
+MOD
+PI
+POW
+POWER
+RAND
+ROUND
+SIGN
+SQRT
+TRUNCATE
+ACOS
+ASIN
+ATAN
+ATAN2
+COS
+COT
+DEGREES
+RADIANS
+SIN
+TAN
+ADDDATE
+CURDATE
+CURRENT_DATE
+CURRENT_TIME
+CURRENT_TIMESTAMP
+CURTIME
+DATE
+DATE_ADD
+DATE_FORMAT
+DATE_SUB
+DAYNAME
+DAYOFMONTH
+DAYOFWEEK
+DAYOFYEAR
+FROM_DAYS
+LOCALTIME
+LOCALTIMESTAMP
+FROM_UNIXTIME
+MAKEDATE
+MAKETIME
+MONTHNAME
+NOW
+PERIOD_ADD
+PERIOD_DIFF
+SUBDATE
+SYSDATE
+TIME
+TIME_TO_SEC
+TIMESTAMP
+TO_DAYS
+UTC_DATE
+UTC_TIME
+UTC_TIMESTAMP
+UNIX_TIMESTAMP
+SUBSTR
+SUBSTRING
+LTRIM
+RTRIM
+TRIM
+TO
+LOWER
+UPPER
+CONCAT
+CONCAT_WS
+LENGTH
+STRCMP
+RIGHT
+LEFT
+ASCII
+LOCATE
+REPLACE
+CAST
+LIKE
+ISNULL
+ISNOTNULL
+IFNULL
+NULLIF
+IF
+TYPEOF
+MATCH
+MATCH_PHRASE
+MATCH_PHRASE_PREFIX
+MATCH_BOOL_PREFIX
+SIMPLE_QUERY_STRING
+MULTI_MATCH
+QUERY_STRING
+ALLOW_LEADING_WILDCARD
+ANALYZE_WILDCARD
+ANALYZER
+AUTO_GENERATE_SYNONYMS_PHRASE_QUERY
+BOOST
+CUTOFF_FREQUENCY
+DEFAULT_FIELD
+DEFAULT_OPERATOR
+ENABLE_POSITION_INCREMENTS
+ESCAPE
+FLAGS
+FUZZY_MAX_EXPANSIONS
+FUZZY_PREFIX_LENGTH
+FUZZY_TRANSPOSITIONS
+FUZZY_REWRITE
+FUZZINESS
+LENIENT
+LOW_FREQ_OPERATOR
+MAX_DETERMINIZED_STATES
+MAX_EXPANSIONS
+MINIMUM_SHOULD_MATCH
+OPERATOR
+PHRASE_SLOP
+PREFIX_LENGTH
+QUOTE_ANALYZER
+QUOTE_FIELD_SUFFIX
+REWRITE
+SLOP
+TIE_BREAKER
+TYPE
+ZERO_TERMS_QUERY
+SPAN
+MS
+S
+M
+H
+W
+Q
+Y
+ID
+INTEGER_LITERAL
+DECIMAL_LITERAL
+ID_DATE_SUFFIX
+DQUOTA_STRING
+SQUOTA_STRING
+BQUOTA_STRING
+ERROR_RECOGNITION
+
+rule names:
+root
+pplStatement
+pplCommands
+commands
+searchCommand
+describeCommand
+showCatalogsCommand
+whereCommand
+fieldsCommand
+renameCommand
+statsCommand
+dedupCommand
+sortCommand
+evalCommand
+headCommand
+topCommand
+rareCommand
+grokCommand
+parseCommand
+patternsCommand
+patternsParameter
+patternsMethod
+kmeansCommand
+kmeansParameter
+adCommand
+adParameter
+mlCommand
+mlArg
+fromClause
+tableSourceClause
+renameClasue
+byClause
+statsByClause
+bySpanClause
+spanClause
+sortbyClause
+evalClause
+statsAggTerm
+statsFunction
+statsFunctionName
+takeAggFunction
+percentileAggFunction
+expression
+logicalExpression
+comparisonExpression
+valueExpression
+primaryExpression
+constantFunction
+booleanExpression
+relevanceExpression
+singleFieldRelevanceFunction
+multiFieldRelevanceFunction
+tableSource
+tableFunction
+fieldList
+wcFieldList
+sortField
+sortFieldExpression
+fieldExpression
+wcFieldExpression
+evalFunctionCall
+dataTypeFunctionCall
+booleanFunctionCall
+convertedDataType
+evalFunctionName
+functionArgs
+functionArg
+relevanceArg
+relevanceArgName
+relevanceFieldAndWeight
+relevanceFieldWeight
+relevanceField
+relevanceQuery
+relevanceArgValue
+mathematicalFunctionBase
+trigonometricFunctionName
+dateAndTimeFunctionBase
+constantFunctionName
+conditionFunctionBase
+systemFunctionBase
+textFunctionBase
+comparisonOperator
+binaryOperator
+singleFieldRelevanceFunctionName
+multiFieldRelevanceFunctionName
+literalValue
+intervalLiteral
+stringLiteral
+integerLiteral
+decimalLiteral
+booleanLiteral
+datetimeLiteral
+dateLiteral
+timeLiteral
+timestampLiteral
+intervalUnit
+timespanUnit
+valueList
+qualifiedName
+wcQualifiedName
+ident
+wildcard
+keywordsCanBeId
+
+
+atn:
+[3, 51485, 51898, 1421, 44986, 20307, 1543, 60043, 49729, 3, 309, 998, 4, 2, 9, 2, 4, 3, 9, 3, 4, 4, 9, 4, 4, 5, 9, 5, 4, 6, 9, 6, 4, 7, 9, 7, 4, 8, 9, 8, 4, 9, 9, 9, 4, 10, 9, 10, 4, 11, 9, 11, 4, 12, 9, 12, 4, 13, 9, 13, 4, 14, 9, 14, 4, 15, 9, 15, 4, 16, 9, 16, 4, 17, 9, 17, 4, 18, 9, 18, 4, 19, 9, 19, 4, 20, 9, 20, 4, 21, 9, 21, 4, 22, 9, 22, 4, 23, 9, 23, 4, 24, 9, 24, 4, 25, 9, 25, 4, 26, 9, 26, 4, 27, 9, 27, 4, 28, 9, 28, 4, 29, 9, 29, 4, 30, 9, 30, 4, 31, 9, 31, 4, 32, 9, 32, 4, 33, 9, 33, 4, 34, 9, 34, 4, 35, 9, 35, 4, 36, 9, 36, 4, 37, 9, 37, 4, 38, 9, 38, 4, 39, 9, 39, 4, 40, 9, 40, 4, 41, 9, 41, 4, 42, 9, 42, 4, 43, 9, 43, 4, 44, 9, 44, 4, 45, 9, 45, 4, 46, 9, 46, 4, 47, 9, 47, 4, 48, 9, 48, 4, 49, 9, 49, 4, 50, 9, 50, 4, 51, 9, 51, 4, 52, 9, 52, 4, 53, 9, 53, 4, 54, 9, 54, 4, 55, 9, 55, 4, 56, 9, 56, 4, 57, 9, 57, 4, 58, 9, 58, 4, 59, 9, 59, 4, 60, 9, 60, 4, 61, 9, 61, 4, 62, 9, 62, 4, 63, 9, 63, 4, 64, 9, 64, 4, 65, 9, 65, 4, 66, 9, 66, 4, 67, 9, 67, 4, 68, 9, 68, 4, 69, 9, 69, 4, 70, 9, 70, 4, 71, 9, 71, 4, 72, 9, 72, 4, 73, 9, 73, 4, 74, 9, 74, 4, 75, 9, 75, 4, 76, 9, 76, 4, 77, 9, 77, 4, 78, 9, 78, 4, 79, 9, 79, 4, 80, 9, 80, 4, 81, 9, 81, 4, 82, 9, 82, 4, 83, 9, 83, 4, 84, 9, 84, 4, 85, 9, 85, 4, 86, 9, 86, 4, 87, 9, 87, 4, 88, 9, 88, 4, 89, 9, 89, 4, 90, 9, 90, 4, 91, 9, 91, 4, 92, 9, 92, 4, 93, 9, 93, 4, 94, 9, 94, 4, 95, 9, 95, 4, 96, 9, 96, 4, 97, 9, 97, 4, 98, 9, 98, 4, 99, 9, 99, 4, 100, 9, 100, 4, 101, 9, 101, 4, 102, 9, 102, 4, 103, 9, 103, 4, 104, 9, 104, 3, 2, 5, 2, 210, 10, 2, 3, 2, 3, 2, 3, 3, 3, 3, 3, 3, 7, 3, 217, 10, 3, 12, 3, 14, 3, 220, 11, 3, 3, 4, 3, 4, 3, 4, 5, 4, 225, 10, 4, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 5, 5, 243, 10, 5, 3, 6, 5, 6, 246, 10, 6, 3, 6, 3, 6, 5, 6, 250, 10, 6, 3, 6, 3, 6, 3, 6, 3, 6, 5, 6, 256, 10, 6, 3, 6, 3, 6, 3, 6, 5, 6, 261, 10, 6, 3, 7, 3, 7, 3, 7, 3, 8, 3, 8, 3, 8, 3, 9, 3, 9, 3, 9, 3, 10, 3, 10, 5, 10, 274, 10, 10, 3, 10, 3, 10, 3, 11, 3, 11, 3, 11, 3, 11, 7, 11, 282, 10, 11, 12, 11, 14, 11, 285, 11, 11, 3, 12, 3, 12, 3, 12, 3, 12, 5, 12, 291, 10, 12, 3, 12, 3, 12, 3, 12, 5, 12, 296, 10, 12, 3, 12, 3, 12, 3, 12, 5, 12, 301, 10, 12, 3, 12, 3, 12, 3, 12, 7, 12, 306, 10, 12, 12, 12, 14, 12, 309, 11, 12, 3, 12, 5, 12, 312, 10, 12, 3, 12, 3, 12, 3, 12, 5, 12, 317, 10, 12, 3, 13, 3, 13, 5, 13, 321, 10, 13, 3, 13, 3, 13, 3, 13, 3, 13, 5, 13, 327, 10, 13, 3, 13, 3, 13, 3, 13, 5, 13, 332, 10, 13, 3, 14, 3, 14, 3, 14, 3, 15, 3, 15, 3, 15, 3, 15, 7, 15, 341, 10, 15, 12, 15, 14, 15, 344, 11, 15, 3, 16, 3, 16, 5, 16, 348, 10, 16, 3, 16, 3, 16, 5, 16, 352, 10, 16, 3, 17, 3, 17, 5, 17, 356, 10, 17, 3, 17, 3, 17, 5, 17, 360, 10, 17, 3, 18, 3, 18, 3, 18, 5, 18, 365, 10, 18, 3, 19, 3, 19, 3, 19, 3, 19, 3, 20, 3, 20, 3, 20, 3, 20, 3, 21, 3, 21, 7, 21, 377, 10, 21, 12, 21, 14, 21, 380, 11, 21, 3, 21, 3, 21, 3, 22, 3, 22, 3, 22, 3, 22, 3, 22, 3, 22, 5, 22, 390, 10, 22, 3, 23, 3, 23, 3, 24, 3, 24, 7, 24, 396, 10, 24, 12, 24, 14, 24, 399, 11, 24, 3, 25, 3, 25, 3, 25, 3, 25, 3, 25, 3, 25, 3, 25, 3, 25, 3, 25, 5, 25, 410, 10, 25, 3, 26, 3, 26, 7, 26, 414, 10, 26, 12, 26, 14, 26, 417, 11, 26, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 3, 27, 5, 27, 455, 10, 27, 3, 28, 3, 28, 7, 28, 459, 10, 28, 12, 28, 14, 28, 462, 11, 28, 3, 29, 3, 29, 3, 29, 3, 29, 3, 30, 3, 30, 3, 30, 3, 30, 3, 30, 3, 30, 3, 30, 3, 30, 3, 30, 3, 30, 3, 30, 3, 30, 5, 30, 480, 10, 30, 3, 31, 3, 31, 3, 31, 7, 31, 485, 10, 31, 12, 31, 14, 31, 488, 11, 31, 3, 32, 3, 32, 3, 32, 3, 32, 3, 33, 3, 33, 3, 33, 3, 34, 3, 34, 3, 34, 3, 34, 3, 34, 3, 34, 3, 34, 3, 34, 3, 34, 5, 34, 506, 10, 34, 3, 35, 3, 35, 3, 35, 5, 35, 511, 10, 35, 3, 36, 3, 36, 3, 36, 3, 36, 3, 36, 3, 36, 5, 36, 519, 10, 36, 3, 36, 3, 36, 3, 37, 3, 37, 3, 37, 7, 37, 526, 10, 37, 12, 37, 14, 37, 529, 11, 37, 3, 38, 3, 38, 3, 38, 3, 38, 3, 39, 3, 39, 3, 39, 5, 39, 538, 10, 39, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 3, 40, 5, 40, 555, 10, 40, 3, 41, 3, 41, 3, 42, 3, 42, 3, 42, 3, 42, 3, 42, 5, 42, 564, 10, 42, 3, 42, 3, 42, 3, 43, 3, 43, 3, 43, 3, 43, 3, 43, 3, 43, 3, 43, 3, 43, 3, 44, 3, 44, 3, 44, 5, 44, 579, 10, 44, 3, 45, 3, 45, 3, 45, 3, 45, 3, 45, 3, 45, 5, 45, 587, 10, 45, 3, 45, 3, 45, 3, 45, 3, 45, 3, 45, 5, 45, 594, 10, 45, 3, 45, 3, 45, 3, 45, 3, 45, 7, 45, 600, 10, 45, 12, 45, 14, 45, 603, 11, 45, 3, 46, 3, 46, 3, 46, 3, 46, 3, 46, 3, 46, 3, 46, 3, 46, 5, 46, 613, 10, 46, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 3, 47, 5, 47, 623, 10, 47, 3, 47, 3, 47, 3, 47, 3, 47, 7, 47, 629, 10, 47, 12, 47, 14, 47, 632, 11, 47, 3, 48, 3, 48, 3, 48, 3, 48, 3, 48, 5, 48, 639, 10, 48, 3, 49, 3, 49, 3, 49, 5, 49, 644, 10, 49, 3, 49, 3, 49, 3, 50, 3, 50, 3, 51, 3, 51, 5, 51, 652, 10, 51, 3, 52, 3, 52, 3, 52, 3, 52, 3, 52, 3, 52, 3, 52, 7, 52, 661, 10, 52, 12, 52, 14, 52, 664, 11, 52, 3, 52, 3, 52, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 7, 53, 674, 10, 53, 12, 53, 14, 53, 677, 11, 53, 3, 53, 3, 53, 3, 53, 3, 53, 3, 53, 7, 53, 684, 10, 53, 12, 53, 14, 53, 687, 11, 53, 3, 53, 3, 53, 3, 54, 3, 54, 5, 54, 693, 10, 54, 3, 55, 3, 55, 3, 55, 3, 55, 3, 55, 3, 56, 3, 56, 3, 56, 7, 56, 703, 10, 56, 12, 56, 14, 56, 706, 11, 56, 3, 57, 3, 57, 3, 57, 7, 57, 711, 10, 57, 12, 57, 14, 57, 714, 11, 57, 3, 58, 5, 58, 717, 10, 58, 3, 58, 3, 58, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 3, 59, 5, 59, 742, 10, 59, 3, 60, 3, 60, 3, 61, 3, 61, 3, 62, 3, 62, 3, 62, 3, 62, 3, 62, 3, 63, 3, 63, 3, 63, 3, 63, 3, 63, 3, 63, 3, 63, 3, 64, 3, 64, 3, 64, 3, 64, 3, 64, 3, 65, 3, 65, 3, 65, 3, 65, 3, 65, 3, 65, 3, 65, 3, 65, 3, 65, 3, 65, 5, 65, 775, 10, 65, 3, 66, 3, 66, 3, 66, 3, 66, 3, 66, 5, 66, 782, 10, 66, 3, 67, 3, 67, 3, 67, 7, 67, 787, 10, 67, 12, 67, 14, 67, 790, 11, 67, 5, 67, 792, 10, 67, 3, 68, 3, 68, 3, 68, 5, 68, 797, 10, 68, 3, 68, 3, 68, 3, 69, 3, 69, 3, 69, 3, 69, 3, 70, 3, 70, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 3, 71, 5, 71, 815, 10, 71, 3, 72, 3, 72, 5, 72, 819, 10, 72, 3, 73, 3, 73, 5, 73, 823, 10, 73, 3, 74, 3, 74, 3, 75, 3, 75, 5, 75, 829, 10, 75, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 3, 76, 5, 76, 853, 10, 76, 3, 77, 3, 77, 3, 78, 3, 78, 3, 79, 3, 79, 3, 80, 3, 80, 3, 81, 3, 81, 3, 82, 3, 82, 3, 83, 3, 83, 3, 84, 3, 84, 3, 85, 3, 85, 3, 86, 3, 86, 3, 87, 3, 87, 3, 87, 3, 87, 3, 87, 3, 87, 5, 87, 881, 10, 87, 3, 88, 3, 88, 3, 88, 3, 88, 3, 89, 3, 89, 3, 90, 5, 90, 890, 10, 90, 3, 90, 3, 90, 3, 91, 5, 91, 895, 10, 91, 3, 91, 3, 91, 3, 92, 3, 92, 3, 93, 3, 93, 3, 93, 5, 93, 904, 10, 93, 3, 94, 3, 94, 3, 94, 3, 95, 3, 95, 3, 95, 3, 96, 3, 96, 3, 96, 3, 97, 3, 97, 3, 98, 3, 98, 3, 99, 3, 99, 3, 99, 3, 99, 7, 99, 923, 10, 99, 12, 99, 14, 99, 926, 11, 99, 3, 99, 3, 99, 3, 100, 3, 100, 3, 100, 7, 100, 933, 10, 100, 12, 100, 14, 100, 936, 11, 100, 3, 101, 3, 101, 3, 101, 7, 101, 941, 10, 101, 12, 101, 14, 101, 944, 11, 101, 3, 102, 5, 102, 947, 10, 102, 3, 102, 3, 102, 3, 102, 3, 102, 3, 102, 3, 102, 3, 102, 5, 102, 956, 10, 102, 3, 103, 3, 103, 3, 103, 7, 103, 961, 10, 103, 12, 103, 14, 103, 964, 11, 103, 3, 103, 5, 103, 967, 10, 103, 3, 103, 3, 103, 3, 103, 3, 103, 3, 103, 3, 103, 3, 103, 3, 103, 3, 103, 3, 103, 3, 103, 3, 103, 5, 103, 981, 10, 103, 3, 104, 3, 104, 3, 104, 3, 104, 3, 104, 3, 104, 3, 104, 3, 104, 3, 104, 3, 104, 3, 104, 3, 104, 3, 104, 5, 104, 996, 10, 104, 3, 104, 2, 2, 4, 88, 92, 105, 2, 2, 4, 2, 6, 2, 8, 2, 10, 2, 12, 2, 14, 2, 16, 2, 18, 2, 20, 2, 22, 2, 24, 2, 26, 2, 28, 2, 30, 2, 32, 2, 34, 2, 36, 2, 38, 2, 40, 2, 42, 2, 44, 2, 46, 2, 48, 2, 50, 2, 52, 2, 54, 2, 56, 2, 58, 2, 60, 2, 62, 2, 64, 2, 66, 2, 68, 2, 70, 2, 72, 2, 74, 2, 76, 2, 78, 2, 80, 2, 82, 2, 84, 2, 86, 2, 88, 2, 90, 2, 92, 2, 94, 2, 96, 2, 98, 2, 100, 2, 102, 2, 104, 2, 106, 2, 108, 2, 110, 2, 112, 2, 114, 2, 116, 2, 118, 2, 120, 2, 122, 2, 124, 2, 126, 2, 128, 2, 130, 2, 132, 2, 134, 2, 136, 2, 138, 2, 140, 2, 142, 2, 144, 2, 146, 2, 148, 2, 150, 2, 152, 2, 154, 2, 156, 2, 158, 2, 160, 2, 162, 2, 164, 2, 166, 2, 168, 2, 170, 2, 172, 2, 174, 2, 176, 2, 178, 2, 180, 2, 182, 2, 184, 2, 186, 2, 188, 2, 190, 2, 192, 2, 194, 2, 196, 2, 198, 2, 200, 2, 202, 2, 204, 2, 206, 2, 2, 20, 3, 2, 112, 113, 3, 2, 19, 20, 4, 2, 131, 131, 165, 165, 7, 2, 129, 130, 134, 134, 137, 137, 142, 142, 144, 147, 5, 2, 8, 8, 57, 57, 263, 293, 3, 2, 187, 196, 11, 2, 69, 69, 71, 71, 73, 80, 92, 92, 197, 197, 203, 211, 214, 217, 219, 226, 230, 230, 6, 2, 198, 202, 212, 213, 218, 218, 227, 229, 3, 2, 249, 254, 4, 2, 231, 235, 237, 247, 4, 2, 68, 68, 106, 111, 3, 2, 112, 116, 3, 2, 256, 259, 3, 2, 260, 262, 3, 2, 306, 307, 3, 2, 66, 67, 4, 2, 71, 71, 73, 91, 5, 2, 32, 32, 72, 80, 295, 301, 2, 1072, 2, 209, 3, 2, 2, 2, 4, 213, 3, 2, 2, 2, 6, 224, 3, 2, 2, 2, 8, 242, 3, 2, 2, 2, 10, 260, 3, 2, 2, 2, 12, 262, 3, 2, 2, 2, 14, 265, 3, 2, 2, 2, 16, 268, 3, 2, 2, 2, 18, 271, 3, 2, 2, 2, 20, 277, 3, 2, 2, 2, 22, 286, 3, 2, 2, 2, 24, 318, 3, 2, 2, 2, 26, 333, 3, 2, 2, 2, 28, 336, 3, 2, 2, 2, 30, 345, 3, 2, 2, 2, 32, 353, 3, 2, 2, 2, 34, 361, 3, 2, 2, 2, 36, 366, 3, 2, 2, 2, 38, 370, 3, 2, 2, 2, 40, 374, 3, 2, 2, 2, 42, 389, 3, 2, 2, 2, 44, 391, 3, 2, 2, 2, 46, 393, 3, 2, 2, 2, 48, 409, 3, 2, 2, 2, 50, 411, 3, 2, 2, 2, 52, 454, 3, 2, 2, 2, 54, 456, 3, 2, 2, 2, 56, 463, 3, 2, 2, 2, 58, 479, 3, 2, 2, 2, 60, 481, 3, 2, 2, 2, 62, 489, 3, 2, 2, 2, 64, 493, 3, 2, 2, 2, 66, 505, 3, 2, 2, 2, 68, 507, 3, 2, 2, 2, 70, 512, 3, 2, 2, 2, 72, 522, 3, 2, 2, 2, 74, 530, 3, 2, 2, 2, 76, 534, 3, 2, 2, 2, 78, 554, 3, 2, 2, 2, 80, 556, 3, 2, 2, 2, 82, 558, 3, 2, 2, 2, 84, 567, 3, 2, 2, 2, 86, 578, 3, 2, 2, 2, 88, 586, 3, 2, 2, 2, 90, 612, 3, 2, 2, 2, 92, 622, 3, 2, 2, 2, 94, 638, 3, 2, 2, 2, 96, 640, 3, 2, 2, 2, 98, 647, 3, 2, 2, 2, 100, 651, 3, 2, 2, 2, 102, 653, 3, 2, 2, 2, 104, 667, 3, 2, 2, 2, 106, 692, 3, 2, 2, 2, 108, 694, 3, 2, 2, 2, 110, 699, 3, 2, 2, 2, 112, 707, 3, 2, 2, 2, 114, 716, 3, 2, 2, 2, 116, 741, 3, 2, 2, 2, 118, 743, 3, 2, 2, 2, 120, 745, 3, 2, 2, 2, 122, 747, 3, 2, 2, 2, 124, 752, 3, 2, 2, 2, 126, 759, 3, 2, 2, 2, 128, 774, 3, 2, 2, 2, 130, 781, 3, 2, 2, 2, 132, 791, 3, 2, 2, 2, 134, 796, 3, 2, 2, 2, 136, 800, 3, 2, 2, 2, 138, 804, 3, 2, 2, 2, 140, 814, 3, 2, 2, 2, 142, 818, 3, 2, 2, 2, 144, 822, 3, 2, 2, 2, 146, 824, 3, 2, 2, 2, 148, 828, 3, 2, 2, 2, 150, 852, 3, 2, 2, 2, 152, 854, 3, 2, 2, 2, 154, 856, 3, 2, 2, 2, 156, 858, 3, 2, 2, 2, 158, 860, 3, 2, 2, 2, 160, 862, 3, 2, 2, 2, 162, 864, 3, 2, 2, 2, 164, 866, 3, 2, 2, 2, 166, 868, 3, 2, 2, 2, 168, 870, 3, 2, 2, 2, 170, 872, 3, 2, 2, 2, 172, 880, 3, 2, 2, 2, 174, 882, 3, 2, 2, 2, 176, 886, 3, 2, 2, 2, 178, 889, 3, 2, 2, 2, 180, 894, 3, 2, 2, 2, 182, 898, 3, 2, 2, 2, 184, 903, 3, 2, 2, 2, 186, 905, 3, 2, 2, 2, 188, 908, 3, 2, 2, 2, 190, 911, 3, 2, 2, 2, 192, 914, 3, 2, 2, 2, 194, 916, 3, 2, 2, 2, 196, 918, 3, 2, 2, 2, 198, 929, 3, 2, 2, 2, 200, 937, 3, 2, 2, 2, 202, 955, 3, 2, 2, 2, 204, 980, 3, 2, 2, 2, 206, 995, 3, 2, 2, 2, 208, 210, 5, 4, 3, 2, 209, 208, 3, 2, 2, 2, 209, 210, 3, 2, 2, 2, 210, 211, 3, 2, 2, 2, 211, 212, 7, 2, 2, 3, 212, 3, 3, 2, 2, 2, 213, 218, 5, 6, 4, 2, 214, 215, 7, 103, 2, 2, 215, 217, 5, 8, 5, 2, 216, 214, 3, 2, 2, 2, 217, 220, 3, 2, 2, 2, 218, 216, 3, 2, 2, 2, 218, 219, 3, 2, 2, 2, 219, 5, 3, 2, 2, 2, 220, 218, 3, 2, 2, 2, 221, 225, 5, 10, 6, 2, 222, 225, 5, 12, 7, 2, 223, 225, 5, 14, 8, 2, 224, 221, 3, 2, 2, 2, 224, 222, 3, 2, 2, 2, 224, 223, 3, 2, 2, 2, 225, 7, 3, 2, 2, 2, 226, 243, 5, 16, 9, 2, 227, 243, 5, 18, 10, 2, 228, 243, 5, 20, 11, 2, 229, 243, 5, 22, 12, 2, 230, 243, 5, 24, 13, 2, 231, 243, 5, 26, 14, 2, 232, 243, 5, 28, 15, 2, 233, 243, 5, 30, 16, 2, 234, 243, 5, 32, 17, 2, 235, 243, 5, 34, 18, 2, 236, 243, 5, 36, 19, 2, 237, 243, 5, 38, 20, 2, 238, 243, 5, 40, 21, 2, 239, 243, 5, 46, 24, 2, 240, 243, 5, 50, 26, 2, 241, 243, 5, 54, 28, 2, 242, 226, 3, 2, 2, 2, 242, 227, 3, 2, 2, 2, 242, 228, 3, 2, 2, 2, 242, 229, 3, 2, 2, 2, 242, 230, 3, 2, 2, 2, 242, 231, 3, 2, 2, 2, 242, 232, 3, 2, 2, 2, 242, 233, 3, 2, 2, 2, 242, 234, 3, 2, 2, 2, 242, 235, 3, 2, 2, 2, 242, 236, 3, 2, 2, 2, 242, 237, 3, 2, 2, 2, 242, 238, 3, 2, 2, 2, 242, 239, 3, 2, 2, 2, 242, 240, 3, 2, 2, 2, 242, 241, 3, 2, 2, 2, 243, 9, 3, 2, 2, 2, 244, 246, 7, 3, 2, 2, 245, 244, 3, 2, 2, 2, 245, 246, 3, 2, 2, 2, 246, 247, 3, 2, 2, 2, 247, 261, 5, 58, 30, 2, 248, 250, 7, 3, 2, 2, 249, 248, 3, 2, 2, 2, 249, 250, 3, 2, 2, 2, 250, 251, 3, 2, 2, 2, 251, 252, 5, 58, 30, 2, 252, 253, 5, 88, 45, 2, 253, 261, 3, 2, 2, 2, 254, 256, 7, 3, 2, 2, 255, 254, 3, 2, 2, 2, 255, 256, 3, 2, 2, 2, 256, 257, 3, 2, 2, 2, 257, 258, 5, 88, 45, 2, 258, 259, 5, 58, 30, 2, 259, 261, 3, 2, 2, 2, 260, 245, 3, 2, 2, 2, 260, 249, 3, 2, 2, 2, 260, 255, 3, 2, 2, 2, 261, 11, 3, 2, 2, 2, 262, 263, 7, 4, 2, 2, 263, 264, 5, 60, 31, 2, 264, 13, 3, 2, 2, 2, 265, 266, 7, 5, 2, 2, 266, 267, 7, 34, 2, 2, 267, 15, 3, 2, 2, 2, 268, 269, 7, 7, 2, 2, 269, 270, 5, 88, 45, 2, 270, 17, 3, 2, 2, 2, 271, 273, 7, 8, 2, 2, 272, 274, 9, 2, 2, 2, 273, 272, 3, 2, 2, 2, 273, 274, 3, 2, 2, 2, 274, 275, 3, 2, 2, 2, 275, 276, 5, 110, 56, 2, 276, 19, 3, 2, 2, 2, 277, 278, 7, 9, 2, 2, 278, 283, 5, 62, 32, 2, 279, 280, 7, 104, 2, 2, 280, 282, 5, 62, 32, 2, 281, 279, 3, 2, 2, 2, 282, 285, 3, 2, 2, 2, 283, 281, 3, 2, 2, 2, 283, 284, 3, 2, 2, 2, 284, 21, 3, 2, 2, 2, 285, 283, 3, 2, 2, 2, 286, 290, 7, 10, 2, 2, 287, 288, 7, 43, 2, 2, 288, 289, 7, 106, 2, 2, 289, 291, 5, 178, 90, 2, 290, 287, 3, 2, 2, 2, 290, 291, 3, 2, 2, 2, 291, 295, 3, 2, 2, 2, 292, 293, 7, 44, 2, 2, 293, 294, 7, 106, 2, 2, 294, 296, 5, 182, 92, 2, 295, 292, 3, 2, 2, 2, 295, 296, 3, 2, 2, 2, 296, 300, 3, 2, 2, 2, 297, 298, 7, 45, 2, 2, 298, 299, 7, 106, 2, 2, 299, 301, 5, 176, 89, 2, 300, 297, 3, 2, 2, 2, 300, 301, 3, 2, 2, 2, 301, 302, 3, 2, 2, 2, 302, 307, 5, 76, 39, 2, 303, 304, 7, 104, 2, 2, 304, 306, 5, 76, 39, 2, 305, 303, 3, 2, 2, 2, 306, 309, 3, 2, 2, 2, 307, 305, 3, 2, 2, 2, 307, 308, 3, 2, 2, 2, 308, 311, 3, 2, 2, 2, 309, 307, 3, 2, 2, 2, 310, 312, 5, 66, 34, 2, 311, 310, 3, 2, 2, 2, 311, 312, 3, 2, 2, 2, 312, 316, 3, 2, 2, 2, 313, 314, 7, 42, 2, 2, 314, 315, 7, 106, 2, 2, 315, 317, 5, 182, 92, 2, 316, 313, 3, 2, 2, 2, 316, 317, 3, 2, 2, 2, 317, 23, 3, 2, 2, 2, 318, 320, 7, 11, 2, 2, 319, 321, 5, 178, 90, 2, 320, 319, 3, 2, 2, 2, 320, 321, 3, 2, 2, 2, 321, 322, 3, 2, 2, 2, 322, 326, 5, 110, 56, 2, 323, 324, 7, 40, 2, 2, 324, 325, 7, 106, 2, 2, 325, 327, 5, 182, 92, 2, 326, 323, 3, 2, 2, 2, 326, 327, 3, 2, 2, 2, 327, 331, 3, 2, 2, 2, 328, 329, 7, 41, 2, 2, 329, 330, 7, 106, 2, 2, 330, 332, 5, 182, 92, 2, 331, 328, 3, 2, 2, 2, 331, 332, 3, 2, 2, 2, 332, 25, 3, 2, 2, 2, 333, 334, 7, 12, 2, 2, 334, 335, 5, 72, 37, 2, 335, 27, 3, 2, 2, 2, 336, 337, 7, 13, 2, 2, 337, 342, 5, 74, 38, 2, 338, 339, 7, 104, 2, 2, 339, 341, 5, 74, 38, 2, 340, 338, 3, 2, 2, 2, 341, 344, 3, 2, 2, 2, 342, 340, 3, 2, 2, 2, 342, 343, 3, 2, 2, 2, 343, 29, 3, 2, 2, 2, 344, 342, 3, 2, 2, 2, 345, 347, 7, 14, 2, 2, 346, 348, 5, 178, 90, 2, 347, 346, 3, 2, 2, 2, 347, 348, 3, 2, 2, 2, 348, 351, 3, 2, 2, 2, 349, 350, 7, 6, 2, 2, 350, 352, 5, 178, 90, 2, 351, 349, 3, 2, 2, 2, 351, 352, 3, 2, 2, 2, 352, 31, 3, 2, 2, 2, 353, 355, 7, 15, 2, 2, 354, 356, 5, 178, 90, 2, 355, 354, 3, 2, 2, 2, 355, 356, 3, 2, 2, 2, 356, 357, 3, 2, 2, 2, 357, 359, 5, 110, 56, 2, 358, 360, 5, 64, 33, 2, 359, 358, 3, 2, 2, 2, 359, 360, 3, 2, 2, 2, 360, 33, 3, 2, 2, 2, 361, 362, 7, 16, 2, 2, 362, 364, 5, 110, 56, 2, 363, 365, 5, 64, 33, 2, 364, 363, 3, 2, 2, 2, 364, 365, 3, 2, 2, 2, 365, 35, 3, 2, 2, 2, 366, 367, 7, 21, 2, 2, 367, 368, 5, 86, 44, 2, 368, 369, 5, 176, 89, 2, 369, 37, 3, 2, 2, 2, 370, 371, 7, 17, 2, 2, 371, 372, 5, 86, 44, 2, 372, 373, 5, 176, 89, 2, 373, 39, 3, 2, 2, 2, 374, 378, 7, 23, 2, 2, 375, 377, 5, 42, 22, 2, 376, 375, 3, 2, 2, 2, 377, 380, 3, 2, 2, 2, 378, 376, 3, 2, 2, 2, 378, 379, 3, 2, 2, 2, 379, 381, 3, 2, 2, 2, 380, 378, 3, 2, 2, 2, 381, 382, 5, 86, 44, 2, 382, 41, 3, 2, 2, 2, 383, 384, 7, 24, 2, 2, 384, 385, 7, 106, 2, 2, 385, 390, 5, 176, 89, 2, 386, 387, 7, 22, 2, 2, 387, 388, 7, 106, 2, 2, 388, 390, 5, 176, 89, 2, 389, 383, 3, 2, 2, 2, 389, 386, 3, 2, 2, 2, 390, 43, 3, 2, 2, 2, 391, 392, 9, 3, 2, 2, 392, 45, 3, 2, 2, 2, 393, 397, 7, 25, 2, 2, 394, 396, 5, 48, 25, 2, 395, 394, 3, 2, 2, 2, 396, 399, 3, 2, 2, 2, 397, 395, 3, 2, 2, 2, 397, 398, 3, 2, 2, 2, 398, 47, 3, 2, 2, 2, 399, 397, 3, 2, 2, 2, 400, 401, 7, 46, 2, 2, 401, 402, 7, 106, 2, 2, 402, 410, 5, 178, 90, 2, 403, 404, 7, 47, 2, 2, 404, 405, 7, 106, 2, 2, 405, 410, 5, 178, 90, 2, 406, 407, 7, 48, 2, 2, 407, 408, 7, 106, 2, 2, 408, 410, 5, 176, 89, 2, 409, 400, 3, 2, 2, 2, 409, 403, 3, 2, 2, 2, 409, 406, 3, 2, 2, 2, 410, 49, 3, 2, 2, 2, 411, 415, 7, 26, 2, 2, 412, 414, 5, 52, 27, 2, 413, 412, 3, 2, 2, 2, 414, 417, 3, 2, 2, 2, 415, 413, 3, 2, 2, 2, 415, 416, 3, 2, 2, 2, 416, 51, 3, 2, 2, 2, 417, 415, 3, 2, 2, 2, 418, 419, 7, 49, 2, 2, 419, 420, 7, 106, 2, 2, 420, 455, 5, 178, 90, 2, 421, 422, 7, 50, 2, 2, 422, 423, 7, 106, 2, 2, 423, 455, 5, 178, 90, 2, 424, 425, 7, 51, 2, 2, 425, 426, 7, 106, 2, 2, 426, 455, 5, 178, 90, 2, 427, 428, 7, 52, 2, 2, 428, 429, 7, 106, 2, 2, 429, 455, 5, 178, 90, 2, 430, 431, 7, 53, 2, 2, 431, 432, 7, 106, 2, 2, 432, 455, 5, 180, 91, 2, 433, 434, 7, 54, 2, 2, 434, 435, 7, 106, 2, 2, 435, 455, 5, 180, 91, 2, 436, 437, 7, 55, 2, 2, 437, 438, 7, 106, 2, 2, 438, 455, 5, 176, 89, 2, 439, 440, 7, 56, 2, 2, 440, 441, 7, 106, 2, 2, 441, 455, 5, 176, 89, 2, 442, 443, 7, 205, 2, 2, 443, 444, 7, 106, 2, 2, 444, 455, 5, 176, 89, 2, 445, 446, 7, 57, 2, 2, 446, 447, 7, 106, 2, 2, 447, 455, 5, 176, 89, 2, 448, 449, 7, 58, 2, 2, 449, 450, 7, 106, 2, 2, 450, 455, 5, 178, 90, 2, 451, 452, 7, 59, 2, 2, 452, 453, 7, 106, 2, 2, 453, 455, 5, 180, 91, 2, 454, 418, 3, 2, 2, 2, 454, 421, 3, 2, 2, 2, 454, 424, 3, 2, 2, 2, 454, 427, 3, 2, 2, 2, 454, 430, 3, 2, 2, 2, 454, 433, 3, 2, 2, 2, 454, 436, 3, 2, 2, 2, 454, 439, 3, 2, 2, 2, 454, 442, 3, 2, 2, 2, 454, 445, 3, 2, 2, 2, 454, 448, 3, 2, 2, 2, 454, 451, 3, 2, 2, 2, 455, 53, 3, 2, 2, 2, 456, 460, 7, 27, 2, 2, 457, 459, 5, 56, 29, 2, 458, 457, 3, 2, 2, 2, 459, 462, 3, 2, 2, 2, 460, 458, 3, 2, 2, 2, 460, 461, 3, 2, 2, 2, 461, 55, 3, 2, 2, 2, 462, 460, 3, 2, 2, 2, 463, 464, 5, 202, 102, 2, 464, 465, 7, 106, 2, 2, 465, 466, 5, 172, 87, 2, 466, 57, 3, 2, 2, 2, 467, 468, 7, 30, 2, 2, 468, 469, 7, 106, 2, 2, 469, 480, 5, 60, 31, 2, 470, 471, 7, 31, 2, 2, 471, 472, 7, 106, 2, 2, 472, 480, 5, 60, 31, 2, 473, 474, 7, 30, 2, 2, 474, 475, 7, 106, 2, 2, 475, 480, 5, 108, 55, 2, 476, 477, 7, 31, 2, 2, 477, 478, 7, 106, 2, 2, 478, 480, 5, 108, 55, 2, 479, 467, 3, 2, 2, 2, 479, 470, 3, 2, 2, 2, 479, 473, 3, 2, 2, 2, 479, 476, 3, 2, 2, 2, 480, 59, 3, 2, 2, 2, 481, 486, 5, 106, 54, 2, 482, 483, 7, 104, 2, 2, 483, 485, 5, 106, 54, 2, 484, 482, 3, 2, 2, 2, 485, 488, 3, 2, 2, 2, 486, 484, 3, 2, 2, 2, 486, 487, 3, 2, 2, 2, 487, 61, 3, 2, 2, 2, 488, 486, 3, 2, 2, 2, 489, 490, 5, 120, 61, 2, 490, 491, 7, 28, 2, 2, 491, 492, 5, 120, 61, 2, 492, 63, 3, 2, 2, 2, 493, 494, 7, 29, 2, 2, 494, 495, 5, 110, 56, 2, 495, 65, 3, 2, 2, 2, 496, 497, 7, 29, 2, 2, 497, 506, 5, 110, 56, 2, 498, 499, 7, 29, 2, 2, 499, 506, 5, 68, 35, 2, 500, 501, 7, 29, 2, 2, 501, 502, 5, 68, 35, 2, 502, 503, 7, 104, 2, 2, 503, 504, 5, 110, 56, 2, 504, 506, 3, 2, 2, 2, 505, 496, 3, 2, 2, 2, 505, 498, 3, 2, 2, 2, 505, 500, 3, 2, 2, 2, 506, 67, 3, 2, 2, 2, 507, 510, 5, 70, 36, 2, 508, 509, 7, 28, 2, 2, 509, 511, 5, 198, 100, 2, 510, 508, 3, 2, 2, 2, 510, 511, 3, 2, 2, 2, 511, 69, 3, 2, 2, 2, 512, 513, 7, 294, 2, 2, 513, 514, 7, 119, 2, 2, 514, 515, 5, 118, 60, 2, 515, 516, 7, 104, 2, 2, 516, 518, 5, 172, 87, 2, 517, 519, 5, 194, 98, 2, 518, 517, 3, 2, 2, 2, 518, 519, 3, 2, 2, 2, 519, 520, 3, 2, 2, 2, 520, 521, 7, 120, 2, 2, 521, 71, 3, 2, 2, 2, 522, 527, 5, 114, 58, 2, 523, 524, 7, 104, 2, 2, 524, 526, 5, 114, 58, 2, 525, 523, 3, 2, 2, 2, 526, 529, 3, 2, 2, 2, 527, 525, 3, 2, 2, 2, 527, 528, 3, 2, 2, 2, 528, 73, 3, 2, 2, 2, 529, 527, 3, 2, 2, 2, 530, 531, 5, 118, 60, 2, 531, 532, 7, 106, 2, 2, 532, 533, 5, 86, 44, 2, 533, 75, 3, 2, 2, 2, 534, 537, 5, 78, 40, 2, 535, 536, 7, 28, 2, 2, 536, 538, 5, 120, 61, 2, 537, 535, 3, 2, 2, 2, 537, 538, 3, 2, 2, 2, 538, 77, 3, 2, 2, 2, 539, 540, 5, 80, 41, 2, 540, 541, 7, 119, 2, 2, 541, 542, 5, 92, 47, 2, 542, 543, 7, 120, 2, 2, 543, 555, 3, 2, 2, 2, 544, 545, 7, 130, 2, 2, 545, 546, 7, 119, 2, 2, 546, 555, 7, 120, 2, 2, 547, 548, 9, 4, 2, 2, 548, 549, 7, 119, 2, 2, 549, 550, 5, 92, 47, 2, 550, 551, 7, 120, 2, 2, 551, 555, 3, 2, 2, 2, 552, 555, 5, 84, 43, 2, 553, 555, 5, 82, 42, 2, 554, 539, 3, 2, 2, 2, 554, 544, 3, 2, 2, 2, 554, 547, 3, 2, 2, 2, 554, 552, 3, 2, 2, 2, 554, 553, 3, 2, 2, 2, 555, 79, 3, 2, 2, 2, 556, 557, 9, 5, 2, 2, 557, 81, 3, 2, 2, 2, 558, 559, 7, 149, 2, 2, 559, 560, 7, 119, 2, 2, 560, 563, 5, 118, 60, 2, 561, 562, 7, 104, 2, 2, 562, 564, 5, 178, 90, 2, 563, 561, 3, 2, 2, 2, 563, 564, 3, 2, 2, 2, 564, 565, 3, 2, 2, 2, 565, 566, 7, 120, 2, 2, 566, 83, 3, 2, 2, 2, 567, 568, 7, 148, 2, 2, 568, 569, 7, 108, 2, 2, 569, 570, 5, 178, 90, 2, 570, 571, 7, 107, 2, 2, 571, 572, 7, 119, 2, 2, 572, 573, 5, 118, 60, 2, 573, 574, 7, 120, 2, 2, 574, 85, 3, 2, 2, 2, 575, 579, 5, 88, 45, 2, 576, 579, 5, 90, 46, 2, 577, 579, 5, 92, 47, 2, 578, 575, 3, 2, 2, 2, 578, 576, 3, 2, 2, 2, 578, 577, 3, 2, 2, 2, 579, 87, 3, 2, 2, 2, 580, 581, 8, 45, 1, 2, 581, 587, 5, 90, 46, 2, 582, 583, 7, 62, 2, 2, 583, 587, 5, 88, 45, 8, 584, 587, 5, 98, 50, 2, 585, 587, 5, 100, 51, 2, 586, 580, 3, 2, 2, 2, 586, 582, 3, 2, 2, 2, 586, 584, 3, 2, 2, 2, 586, 585, 3, 2, 2, 2, 587, 601, 3, 2, 2, 2, 588, 589, 12, 7, 2, 2, 589, 590, 7, 63, 2, 2, 590, 600, 5, 88, 45, 8, 591, 593, 12, 6, 2, 2, 592, 594, 7, 64, 2, 2, 593, 592, 3, 2, 2, 2, 593, 594, 3, 2, 2, 2, 594, 595, 3, 2, 2, 2, 595, 600, 5, 88, 45, 7, 596, 597, 12, 5, 2, 2, 597, 598, 7, 65, 2, 2, 598, 600, 5, 88, 45, 6, 599, 588, 3, 2, 2, 2, 599, 591, 3, 2, 2, 2, 599, 596, 3, 2, 2, 2, 600, 603, 3, 2, 2, 2, 601, 599, 3, 2, 2, 2, 601, 602, 3, 2, 2, 2, 602, 89, 3, 2, 2, 2, 603, 601, 3, 2, 2, 2, 604, 605, 5, 92, 47, 2, 605, 606, 5, 164, 83, 2, 606, 607, 5, 92, 47, 2, 607, 613, 3, 2, 2, 2, 608, 609, 5, 92, 47, 2, 609, 610, 7, 61, 2, 2, 610, 611, 5, 196, 99, 2, 611, 613, 3, 2, 2, 2, 612, 604, 3, 2, 2, 2, 612, 608, 3, 2, 2, 2, 613, 91, 3, 2, 2, 2, 614, 615, 8, 47, 1, 2, 615, 616, 7, 119, 2, 2, 616, 617, 5, 92, 47, 2, 617, 618, 5, 166, 84, 2, 618, 619, 5, 92, 47, 2, 619, 620, 7, 120, 2, 2, 620, 623, 3, 2, 2, 2, 621, 623, 5, 94, 48, 2, 622, 614, 3, 2, 2, 2, 622, 621, 3, 2, 2, 2, 623, 630, 3, 2, 2, 2, 624, 625, 12, 5, 2, 2, 625, 626, 5, 166, 84, 2, 626, 627, 5, 92, 47, 6, 627, 629, 3, 2, 2, 2, 628, 624, 3, 2, 2, 2, 629, 632, 3, 2, 2, 2, 630, 628, 3, 2, 2, 2, 630, 631, 3, 2, 2, 2, 631, 93, 3, 2, 2, 2, 632, 630, 3, 2, 2, 2, 633, 639, 5, 122, 62, 2, 634, 639, 5, 124, 63, 2, 635, 639, 5, 118, 60, 2, 636, 639, 5, 172, 87, 2, 637, 639, 5, 96, 49, 2, 638, 633, 3, 2, 2, 2, 638, 634, 3, 2, 2, 2, 638, 635, 3, 2, 2, 2, 638, 636, 3, 2, 2, 2, 638, 637, 3, 2, 2, 2, 639, 95, 3, 2, 2, 2, 640, 641, 5, 156, 79, 2, 641, 643, 7, 119, 2, 2, 642, 644, 5, 132, 67, 2, 643, 642, 3, 2, 2, 2, 643, 644, 3, 2, 2, 2, 644, 645, 3, 2, 2, 2, 645, 646, 7, 120, 2, 2, 646, 97, 3, 2, 2, 2, 647, 648, 5, 126, 64, 2, 648, 99, 3, 2, 2, 2, 649, 652, 5, 102, 52, 2, 650, 652, 5, 104, 53, 2, 651, 649, 3, 2, 2, 2, 651, 650, 3, 2, 2, 2, 652, 101, 3, 2, 2, 2, 653, 654, 5, 168, 85, 2, 654, 655, 7, 119, 2, 2, 655, 656, 5, 144, 73, 2, 656, 657, 7, 104, 2, 2, 657, 662, 5, 146, 74, 2, 658, 659, 7, 104, 2, 2, 659, 661, 5, 136, 69, 2, 660, 658, 3, 2, 2, 2, 661, 664, 3, 2, 2, 2, 662, 660, 3, 2, 2, 2, 662, 663, 3, 2, 2, 2, 663, 665, 3, 2, 2, 2, 664, 662, 3, 2, 2, 2, 665, 666, 7, 120, 2, 2, 666, 103, 3, 2, 2, 2, 667, 668, 5, 170, 86, 2, 668, 669, 7, 119, 2, 2, 669, 670, 7, 121, 2, 2, 670, 675, 5, 140, 71, 2, 671, 672, 7, 104, 2, 2, 672, 674, 5, 140, 71, 2, 673, 671, 3, 2, 2, 2, 674, 677, 3, 2, 2, 2, 675, 673, 3, 2, 2, 2, 675, 676, 3, 2, 2, 2, 676, 678, 3, 2, 2, 2, 677, 675, 3, 2, 2, 2, 678, 679, 7, 122, 2, 2, 679, 680, 7, 104, 2, 2, 680, 685, 5, 146, 74, 2, 681, 682, 7, 104, 2, 2, 682, 684, 5, 136, 69, 2, 683, 681, 3, 2, 2, 2, 684, 687, 3, 2, 2, 2, 685, 683, 3, 2, 2, 2, 685, 686, 3, 2, 2, 2, 686, 688, 3, 2, 2, 2, 687, 685, 3, 2, 2, 2, 688, 689, 7, 120, 2, 2, 689, 105, 3, 2, 2, 2, 690, 693, 5, 198, 100, 2, 691, 693, 7, 305, 2, 2, 692, 690, 3, 2, 2, 2, 692, 691, 3, 2, 2, 2, 693, 107, 3, 2, 2, 2, 694, 695, 5, 198, 100, 2, 695, 696, 7, 119, 2, 2, 696, 697, 5, 132, 67, 2, 697, 698, 7, 120, 2, 2, 698, 109, 3, 2, 2, 2, 699, 704, 5, 118, 60, 2, 700, 701, 7, 104, 2, 2, 701, 703, 5, 118, 60, 2, 702, 700, 3, 2, 2, 2, 703, 706, 3, 2, 2, 2, 704, 702, 3, 2, 2, 2, 704, 705, 3, 2, 2, 2, 705, 111, 3, 2, 2, 2, 706, 704, 3, 2, 2, 2, 707, 712, 5, 120, 61, 2, 708, 709, 7, 104, 2, 2, 709, 711, 5, 120, 61, 2, 710, 708, 3, 2, 2, 2, 711, 714, 3, 2, 2, 2, 712, 710, 3, 2, 2, 2, 712, 713, 3, 2, 2, 2, 713, 113, 3, 2, 2, 2, 714, 712, 3, 2, 2, 2, 715, 717, 9, 2, 2, 2, 716, 715, 3, 2, 2, 2, 716, 717, 3, 2, 2, 2, 717, 718, 3, 2, 2, 2, 718, 719, 5, 116, 59, 2, 719, 115, 3, 2, 2, 2, 720, 742, 5, 118, 60, 2, 721, 722, 7, 36, 2, 2, 722, 723, 7, 119, 2, 2, 723, 724, 5, 118, 60, 2, 724, 725, 7, 120, 2, 2, 725, 742, 3, 2, 2, 2, 726, 727, 7, 37, 2, 2, 727, 728, 7, 119, 2, 2, 728, 729, 5, 118, 60, 2, 729, 730, 7, 120, 2, 2, 730, 742, 3, 2, 2, 2, 731, 732, 7, 38, 2, 2, 732, 733, 7, 119, 2, 2, 733, 734, 5, 118, 60, 2, 734, 735, 7, 120, 2, 2, 735, 742, 3, 2, 2, 2, 736, 737, 7, 39, 2, 2, 737, 738, 7, 119, 2, 2, 738, 739, 5, 118, 60, 2, 739, 740, 7, 120, 2, 2, 740, 742, 3, 2, 2, 2, 741, 720, 3, 2, 2, 2, 741, 721, 3, 2, 2, 2, 741, 726, 3, 2, 2, 2, 741, 731, 3, 2, 2, 2, 741, 736, 3, 2, 2, 2, 742, 117, 3, 2, 2, 2, 743, 744, 5, 198, 100, 2, 744, 119, 3, 2, 2, 2, 745, 746, 5, 200, 101, 2, 746, 121, 3, 2, 2, 2, 747, 748, 5, 130, 66, 2, 748, 749, 7, 119, 2, 2, 749, 750, 5, 132, 67, 2, 750, 751, 7, 120, 2, 2, 751, 123, 3, 2, 2, 2, 752, 753, 7, 248, 2, 2, 753, 754, 7, 119, 2, 2, 754, 755, 5, 86, 44, 2, 755, 756, 7, 28, 2, 2, 756, 757, 5, 128, 65, 2, 757, 758, 7, 120, 2, 2, 758, 125, 3, 2, 2, 2, 759, 760, 5, 158, 80, 2, 760, 761, 7, 119, 2, 2, 761, 762, 5, 132, 67, 2, 762, 763, 7, 120, 2, 2, 763, 127, 3, 2, 2, 2, 764, 775, 7, 203, 2, 2, 765, 775, 7, 223, 2, 2, 766, 775, 7, 225, 2, 2, 767, 775, 7, 96, 2, 2, 768, 775, 7, 97, 2, 2, 769, 775, 7, 98, 2, 2, 770, 775, 7, 99, 2, 2, 771, 775, 7, 100, 2, 2, 772, 775, 7, 101, 2, 2, 773, 775, 7, 102, 2, 2, 774, 764, 3, 2, 2, 2, 774, 765, 3, 2, 2, 2, 774, 766, 3, 2, 2, 2, 774, 767, 3, 2, 2, 2, 774, 768, 3, 2, 2, 2, 774, 769, 3, 2, 2, 2, 774, 770, 3, 2, 2, 2, 774, 771, 3, 2, 2, 2, 774, 772, 3, 2, 2, 2, 774, 773, 3, 2, 2, 2, 775, 129, 3, 2, 2, 2, 776, 782, 5, 150, 76, 2, 777, 782, 5, 154, 78, 2, 778, 782, 5, 162, 82, 2, 779, 782, 5, 158, 80, 2, 780, 782, 5, 160, 81, 2, 781, 776, 3, 2, 2, 2, 781, 777, 3, 2, 2, 2, 781, 778, 3, 2, 2, 2, 781, 779, 3, 2, 2, 2, 781, 780, 3, 2, 2, 2, 782, 131, 3, 2, 2, 2, 783, 788, 5, 134, 68, 2, 784, 785, 7, 104, 2, 2, 785, 787, 5, 134, 68, 2, 786, 784, 3, 2, 2, 2, 787, 790, 3, 2, 2, 2, 788, 786, 3, 2, 2, 2, 788, 789, 3, 2, 2, 2, 789, 792, 3, 2, 2, 2, 790, 788, 3, 2, 2, 2, 791, 783, 3, 2, 2, 2, 791, 792, 3, 2, 2, 2, 792, 133, 3, 2, 2, 2, 793, 794, 5, 202, 102, 2, 794, 795, 7, 106, 2, 2, 795, 797, 3, 2, 2, 2, 796, 793, 3, 2, 2, 2, 796, 797, 3, 2, 2, 2, 797, 798, 3, 2, 2, 2, 798, 799, 5, 92, 47, 2, 799, 135, 3, 2, 2, 2, 800, 801, 5, 138, 70, 2, 801, 802, 7, 106, 2, 2, 802, 803, 5, 148, 75, 2, 803, 137, 3, 2, 2, 2, 804, 805, 9, 6, 2, 2, 805, 139, 3, 2, 2, 2, 806, 815, 5, 144, 73, 2, 807, 808, 5, 144, 73, 2, 808, 809, 5, 142, 72, 2, 809, 815, 3, 2, 2, 2, 810, 811, 5, 144, 73, 2, 811, 812, 7, 128, 2, 2, 812, 813, 5, 142, 72, 2, 813, 815, 3, 2, 2, 2, 814, 806, 3, 2, 2, 2, 814, 807, 3, 2, 2, 2, 814, 810, 3, 2, 2, 2, 815, 141, 3, 2, 2, 2, 816, 819, 5, 178, 90, 2, 817, 819, 5, 180, 91, 2, 818, 816, 3, 2, 2, 2, 818, 817, 3, 2, 2, 2, 819, 143, 3, 2, 2, 2, 820, 823, 5, 198, 100, 2, 821, 823, 5, 176, 89, 2, 822, 820, 3, 2, 2, 2, 822, 821, 3, 2, 2, 2, 823, 145, 3, 2, 2, 2, 824, 825, 5, 148, 75, 2, 825, 147, 3, 2, 2, 2, 826, 829, 5, 198, 100, 2, 827, 829, 5, 172, 87, 2, 828, 826, 3, 2, 2, 2, 828, 827, 3, 2, 2, 2, 829, 149, 3, 2, 2, 2, 830, 853, 7, 166, 2, 2, 831, 853, 7, 167, 2, 2, 832, 853, 7, 168, 2, 2, 833, 853, 7, 169, 2, 2, 834, 853, 7, 170, 2, 2, 835, 853, 7, 171, 2, 2, 836, 853, 7, 172, 2, 2, 837, 853, 7, 173, 2, 2, 838, 853, 7, 174, 2, 2, 839, 853, 7, 175, 2, 2, 840, 853, 7, 176, 2, 2, 841, 853, 7, 177, 2, 2, 842, 853, 7, 178, 2, 2, 843, 853, 7, 179, 2, 2, 844, 853, 7, 180, 2, 2, 845, 853, 7, 181, 2, 2, 846, 853, 7, 182, 2, 2, 847, 853, 7, 183, 2, 2, 848, 853, 7, 184, 2, 2, 849, 853, 7, 185, 2, 2, 850, 853, 7, 186, 2, 2, 851, 853, 5, 152, 77, 2, 852, 830, 3, 2, 2, 2, 852, 831, 3, 2, 2, 2, 852, 832, 3, 2, 2, 2, 852, 833, 3, 2, 2, 2, 852, 834, 3, 2, 2, 2, 852, 835, 3, 2, 2, 2, 852, 836, 3, 2, 2, 2, 852, 837, 3, 2, 2, 2, 852, 838, 3, 2, 2, 2, 852, 839, 3, 2, 2, 2, 852, 840, 3, 2, 2, 2, 852, 841, 3, 2, 2, 2, 852, 842, 3, 2, 2, 2, 852, 843, 3, 2, 2, 2, 852, 844, 3, 2, 2, 2, 852, 845, 3, 2, 2, 2, 852, 846, 3, 2, 2, 2, 852, 847, 3, 2, 2, 2, 852, 848, 3, 2, 2, 2, 852, 849, 3, 2, 2, 2, 852, 850, 3, 2, 2, 2, 852, 851, 3, 2, 2, 2, 853, 151, 3, 2, 2, 2, 854, 855, 9, 7, 2, 2, 855, 153, 3, 2, 2, 2, 856, 857, 9, 8, 2, 2, 857, 155, 3, 2, 2, 2, 858, 859, 9, 9, 2, 2, 859, 157, 3, 2, 2, 2, 860, 861, 9, 10, 2, 2, 861, 159, 3, 2, 2, 2, 862, 863, 7, 255, 2, 2, 863, 161, 3, 2, 2, 2, 864, 865, 9, 11, 2, 2, 865, 163, 3, 2, 2, 2, 866, 867, 9, 12, 2, 2, 867, 165, 3, 2, 2, 2, 868, 869, 9, 13, 2, 2, 869, 167, 3, 2, 2, 2, 870, 871, 9, 14, 2, 2, 871, 169, 3, 2, 2, 2, 872, 873, 9, 15, 2, 2, 873, 171, 3, 2, 2, 2, 874, 881, 5, 174, 88, 2, 875, 881, 5, 176, 89, 2, 876, 881, 5, 178, 90, 2, 877, 881, 5, 180, 91, 2, 878, 881, 5, 182, 92, 2, 879, 881, 5, 184, 93, 2, 880, 874, 3, 2, 2, 2, 880, 875, 3, 2, 2, 2, 880, 876, 3, 2, 2, 2, 880, 877, 3, 2, 2, 2, 880, 878, 3, 2, 2, 2, 880, 879, 3, 2, 2, 2, 881, 173, 3, 2, 2, 2, 882, 883, 7, 70, 2, 2, 883, 884, 5, 92, 47, 2, 884, 885, 5, 192, 97, 2, 885, 175, 3, 2, 2, 2, 886, 887, 9, 16, 2, 2, 887, 177, 3, 2, 2, 2, 888, 890, 9, 2, 2, 2, 889, 888, 3, 2, 2, 2, 889, 890, 3, 2, 2, 2, 890, 891, 3, 2, 2, 2, 891, 892, 7, 303, 2, 2, 892, 179, 3, 2, 2, 2, 893, 895, 9, 2, 2, 2, 894, 893, 3, 2, 2, 2, 894, 895, 3, 2, 2, 2, 895, 896, 3, 2, 2, 2, 896, 897, 7, 304, 2, 2, 897, 181, 3, 2, 2, 2, 898, 899, 9, 17, 2, 2, 899, 183, 3, 2, 2, 2, 900, 904, 5, 186, 94, 2, 901, 904, 5, 188, 95, 2, 902, 904, 5, 190, 96, 2, 903, 900, 3, 2, 2, 2, 903, 901, 3, 2, 2, 2, 903, 902, 3, 2, 2, 2, 904, 185, 3, 2, 2, 2, 905, 906, 7, 203, 2, 2, 906, 907, 5, 176, 89, 2, 907, 187, 3, 2, 2, 2, 908, 909, 7, 223, 2, 2, 909, 910, 5, 176, 89, 2, 910, 189, 3, 2, 2, 2, 911, 912, 7, 225, 2, 2, 912, 913, 5, 176, 89, 2, 913, 191, 3, 2, 2, 2, 914, 915, 9, 18, 2, 2, 915, 193, 3, 2, 2, 2, 916, 917, 9, 19, 2, 2, 917, 195, 3, 2, 2, 2, 918, 919, 7, 119, 2, 2, 919, 924, 5, 172, 87, 2, 920, 921, 7, 104, 2, 2, 921, 923, 5, 172, 87, 2, 922, 920, 3, 2, 2, 2, 923, 926, 3, 2, 2, 2, 924, 922, 3, 2, 2, 2, 924, 925, 3, 2, 2, 2, 925, 927, 3, 2, 2, 2, 926, 924, 3, 2, 2, 2, 927, 928, 7, 120, 2, 2, 928, 197, 3, 2, 2, 2, 929, 934, 5, 202, 102, 2, 930, 931, 7, 105, 2, 2, 931, 933, 5, 202, 102, 2, 932, 930, 3, 2, 2, 2, 933, 936, 3, 2, 2, 2, 934, 932, 3, 2, 2, 2, 934, 935, 3, 2, 2, 2, 935, 199, 3, 2, 2, 2, 936, 934, 3, 2, 2, 2, 937, 942, 5, 204, 103, 2, 938, 939, 7, 105, 2, 2, 939, 941, 5, 204, 103, 2, 940, 938, 3, 2, 2, 2, 941, 944, 3, 2, 2, 2, 942, 940, 3, 2, 2, 2, 942, 943, 3, 2, 2, 2, 943, 201, 3, 2, 2, 2, 944, 942, 3, 2, 2, 2, 945, 947, 7, 105, 2, 2, 946, 945, 3, 2, 2, 2, 946, 947, 3, 2, 2, 2, 947, 948, 3, 2, 2, 2, 948, 956, 7, 302, 2, 2, 949, 950, 7, 125, 2, 2, 950, 951, 5, 202, 102, 2, 951, 952, 7, 125, 2, 2, 952, 956, 3, 2, 2, 2, 953, 956, 7, 308, 2, 2, 954, 956, 5, 206, 104, 2, 955, 946, 3, 2, 2, 2, 955, 949, 3, 2, 2, 2, 955, 953, 3, 2, 2, 2, 955, 954, 3, 2, 2, 2, 956, 203, 3, 2, 2, 2, 957, 962, 5, 202, 102, 2, 958, 959, 7, 116, 2, 2, 959, 961, 5, 202, 102, 2, 960, 958, 3, 2, 2, 2, 961, 964, 3, 2, 2, 2, 962, 960, 3, 2, 2, 2, 962, 963, 3, 2, 2, 2, 963, 966, 3, 2, 2, 2, 964, 962, 3, 2, 2, 2, 965, 967, 7, 116, 2, 2, 966, 965, 3, 2, 2, 2, 966, 967, 3, 2, 2, 2, 967, 981, 3, 2, 2, 2, 968, 969, 7, 123, 2, 2, 969, 970, 5, 204, 103, 2, 970, 971, 7, 123, 2, 2, 971, 981, 3, 2, 2, 2, 972, 973, 7, 124, 2, 2, 973, 974, 5, 204, 103, 2, 974, 975, 7, 124, 2, 2, 975, 981, 3, 2, 2, 2, 976, 977, 7, 125, 2, 2, 977, 978, 5, 204, 103, 2, 978, 979, 7, 125, 2, 2, 979, 981, 3, 2, 2, 2, 980, 957, 3, 2, 2, 2, 980, 968, 3, 2, 2, 2, 980, 972, 3, 2, 2, 2, 980, 976, 3, 2, 2, 2, 981, 205, 3, 2, 2, 2, 982, 996, 7, 32, 2, 2, 983, 996, 5, 80, 41, 2, 984, 996, 7, 225, 2, 2, 985, 996, 7, 203, 2, 2, 986, 996, 7, 223, 2, 2, 987, 996, 7, 150, 2, 2, 988, 996, 7, 151, 2, 2, 989, 996, 5, 194, 98, 2, 990, 996, 7, 294, 2, 2, 991, 996, 5, 156, 79, 2, 992, 996, 5, 154, 78, 2, 993, 996, 5, 162, 82, 2, 994, 996, 5, 150, 76, 2, 995, 982, 3, 2, 2, 2, 995, 983, 3, 2, 2, 2, 995, 984, 3, 2, 2, 2, 995, 985, 3, 2, 2, 2, 995, 986, 3, 2, 2, 2, 995, 987, 3, 2, 2, 2, 995, 988, 3, 2, 2, 2, 995, 989, 3, 2, 2, 2, 995, 990, 3, 2, 2, 2, 995, 991, 3, 2, 2, 2, 995, 992, 3, 2, 2, 2, 995, 993, 3, 2, 2, 2, 995, 994, 3, 2, 2, 2, 996, 207, 3, 2, 2, 2, 85, 209, 218, 224, 242, 245, 249, 255, 260, 273, 283, 290, 295, 300, 307, 311, 316, 320, 326, 331, 342, 347, 351, 355, 359, 364, 378, 389, 397, 409, 415, 454, 460, 479, 486, 505, 510, 518, 527, 537, 554, 563, 578, 586, 593, 599, 601, 612, 622, 630, 638, 643, 651, 662, 675, 685, 692, 704, 712, 716, 741, 774, 781, 788, 791, 796, 814, 818, 822, 828, 852, 880, 889, 894, 903, 924, 934, 942, 946, 955, 962, 966, 980, 995]
\ No newline at end of file
diff --git a/common/query_manager/antlr/output/OpenSearchPPLParser.tokens b/common/query_manager/antlr/output/OpenSearchPPLParser.tokens
new file mode 100644
index 0000000000..303e66c7ad
--- /dev/null
+++ b/common/query_manager/antlr/output/OpenSearchPPLParser.tokens
@@ -0,0 +1,603 @@
+SEARCH=1
+DESCRIBE=2
+SHOW=3
+FROM=4
+WHERE=5
+FIELDS=6
+RENAME=7
+STATS=8
+DEDUP=9
+SORT=10
+EVAL=11
+HEAD=12
+TOP=13
+RARE=14
+PARSE=15
+METHOD=16
+REGEX=17
+PUNCT=18
+GROK=19
+PATTERN=20
+PATTERNS=21
+NEW_FIELD=22
+KMEANS=23
+AD=24
+ML=25
+AS=26
+BY=27
+SOURCE=28
+INDEX=29
+D=30
+DESC=31
+CATALOGS=32
+SORTBY=33
+AUTO=34
+STR=35
+IP=36
+NUM=37
+KEEPEMPTY=38
+CONSECUTIVE=39
+DEDUP_SPLITVALUES=40
+PARTITIONS=41
+ALLNUM=42
+DELIM=43
+CENTROIDS=44
+ITERATIONS=45
+DISTANCE_TYPE=46
+NUMBER_OF_TREES=47
+SHINGLE_SIZE=48
+SAMPLE_SIZE=49
+OUTPUT_AFTER=50
+TIME_DECAY=51
+ANOMALY_RATE=52
+CATEGORY_FIELD=53
+TIME_FIELD=54
+TIME_ZONE=55
+TRAINING_DATA_SIZE=56
+ANOMALY_SCORE_THRESHOLD=57
+CASE=58
+IN=59
+NOT=60
+OR=61
+AND=62
+XOR=63
+TRUE=64
+FALSE=65
+REGEXP=66
+DATETIME=67
+INTERVAL=68
+MICROSECOND=69
+MILLISECOND=70
+SECOND=71
+MINUTE=72
+HOUR=73
+DAY=74
+WEEK=75
+MONTH=76
+QUARTER=77
+YEAR=78
+SECOND_MICROSECOND=79
+MINUTE_MICROSECOND=80
+MINUTE_SECOND=81
+HOUR_MICROSECOND=82
+HOUR_SECOND=83
+HOUR_MINUTE=84
+DAY_MICROSECOND=85
+DAY_SECOND=86
+DAY_MINUTE=87
+DAY_HOUR=88
+YEAR_MONTH=89
+CONVERT_TZ=90
+DATAMODEL=91
+LOOKUP=92
+SAVEDSEARCH=93
+INT=94
+INTEGER=95
+DOUBLE=96
+LONG=97
+FLOAT=98
+STRING=99
+BOOLEAN=100
+PIPE=101
+COMMA=102
+DOT=103
+EQUAL=104
+GREATER=105
+LESS=106
+NOT_GREATER=107
+NOT_LESS=108
+NOT_EQUAL=109
+PLUS=110
+MINUS=111
+STAR=112
+DIVIDE=113
+MODULE=114
+EXCLAMATION_SYMBOL=115
+COLON=116
+LT_PRTHS=117
+RT_PRTHS=118
+LT_SQR_PRTHS=119
+RT_SQR_PRTHS=120
+SINGLE_QUOTE=121
+DOUBLE_QUOTE=122
+BACKTICK=123
+BIT_NOT_OP=124
+BIT_AND_OP=125
+BIT_XOR_OP=126
+AVG=127
+COUNT=128
+DISTINCT_COUNT=129
+ESTDC=130
+ESTDC_ERROR=131
+MAX=132
+MEAN=133
+MEDIAN=134
+MIN=135
+MODE=136
+RANGE=137
+STDEV=138
+STDEVP=139
+SUM=140
+SUMSQ=141
+VAR_SAMP=142
+VAR_POP=143
+STDDEV_SAMP=144
+STDDEV_POP=145
+PERCENTILE=146
+TAKE=147
+FIRST=148
+LAST=149
+LIST=150
+VALUES=151
+EARLIEST=152
+EARLIEST_TIME=153
+LATEST=154
+LATEST_TIME=155
+PER_DAY=156
+PER_HOUR=157
+PER_MINUTE=158
+PER_SECOND=159
+RATE=160
+SPARKLINE=161
+C=162
+DC=163
+ABS=164
+CEIL=165
+CEILING=166
+CONV=167
+CRC32=168
+E=169
+EXP=170
+FLOOR=171
+LN=172
+LOG=173
+LOG10=174
+LOG2=175
+MOD=176
+PI=177
+POW=178
+POWER=179
+RAND=180
+ROUND=181
+SIGN=182
+SQRT=183
+TRUNCATE=184
+ACOS=185
+ASIN=186
+ATAN=187
+ATAN2=188
+COS=189
+COT=190
+DEGREES=191
+RADIANS=192
+SIN=193
+TAN=194
+ADDDATE=195
+CURDATE=196
+CURRENT_DATE=197
+CURRENT_TIME=198
+CURRENT_TIMESTAMP=199
+CURTIME=200
+DATE=201
+DATE_ADD=202
+DATE_FORMAT=203
+DATE_SUB=204
+DAYNAME=205
+DAYOFMONTH=206
+DAYOFWEEK=207
+DAYOFYEAR=208
+FROM_DAYS=209
+LOCALTIME=210
+LOCALTIMESTAMP=211
+FROM_UNIXTIME=212
+MAKEDATE=213
+MAKETIME=214
+MONTHNAME=215
+NOW=216
+PERIOD_ADD=217
+PERIOD_DIFF=218
+SUBDATE=219
+SYSDATE=220
+TIME=221
+TIME_TO_SEC=222
+TIMESTAMP=223
+TO_DAYS=224
+UTC_DATE=225
+UTC_TIME=226
+UTC_TIMESTAMP=227
+UNIX_TIMESTAMP=228
+SUBSTR=229
+SUBSTRING=230
+LTRIM=231
+RTRIM=232
+TRIM=233
+TO=234
+LOWER=235
+UPPER=236
+CONCAT=237
+CONCAT_WS=238
+LENGTH=239
+STRCMP=240
+RIGHT=241
+LEFT=242
+ASCII=243
+LOCATE=244
+REPLACE=245
+CAST=246
+LIKE=247
+ISNULL=248
+ISNOTNULL=249
+IFNULL=250
+NULLIF=251
+IF=252
+TYPEOF=253
+MATCH=254
+MATCH_PHRASE=255
+MATCH_PHRASE_PREFIX=256
+MATCH_BOOL_PREFIX=257
+SIMPLE_QUERY_STRING=258
+MULTI_MATCH=259
+QUERY_STRING=260
+ALLOW_LEADING_WILDCARD=261
+ANALYZE_WILDCARD=262
+ANALYZER=263
+AUTO_GENERATE_SYNONYMS_PHRASE_QUERY=264
+BOOST=265
+CUTOFF_FREQUENCY=266
+DEFAULT_FIELD=267
+DEFAULT_OPERATOR=268
+ENABLE_POSITION_INCREMENTS=269
+ESCAPE=270
+FLAGS=271
+FUZZY_MAX_EXPANSIONS=272
+FUZZY_PREFIX_LENGTH=273
+FUZZY_TRANSPOSITIONS=274
+FUZZY_REWRITE=275
+FUZZINESS=276
+LENIENT=277
+LOW_FREQ_OPERATOR=278
+MAX_DETERMINIZED_STATES=279
+MAX_EXPANSIONS=280
+MINIMUM_SHOULD_MATCH=281
+OPERATOR=282
+PHRASE_SLOP=283
+PREFIX_LENGTH=284
+QUOTE_ANALYZER=285
+QUOTE_FIELD_SUFFIX=286
+REWRITE=287
+SLOP=288
+TIE_BREAKER=289
+TYPE=290
+ZERO_TERMS_QUERY=291
+SPAN=292
+MS=293
+S=294
+M=295
+H=296
+W=297
+Q=298
+Y=299
+ID=300
+INTEGER_LITERAL=301
+DECIMAL_LITERAL=302
+ID_DATE_SUFFIX=303
+DQUOTA_STRING=304
+SQUOTA_STRING=305
+BQUOTA_STRING=306
+ERROR_RECOGNITION=307
+'SEARCH'=1
+'DESCRIBE'=2
+'SHOW'=3
+'FROM'=4
+'WHERE'=5
+'FIELDS'=6
+'RENAME'=7
+'STATS'=8
+'DEDUP'=9
+'SORT'=10
+'EVAL'=11
+'HEAD'=12
+'TOP'=13
+'RARE'=14
+'PARSE'=15
+'METHOD'=16
+'REGEX'=17
+'PUNCT'=18
+'GROK'=19
+'PATTERN'=20
+'PATTERNS'=21
+'NEW_FIELD'=22
+'KMEANS'=23
+'AD'=24
+'ML'=25
+'AS'=26
+'BY'=27
+'SOURCE'=28
+'INDEX'=29
+'D'=30
+'DESC'=31
+'CATALOGS'=32
+'SORTBY'=33
+'AUTO'=34
+'STR'=35
+'IP'=36
+'NUM'=37
+'KEEPEMPTY'=38
+'CONSECUTIVE'=39
+'DEDUP_SPLITVALUES'=40
+'PARTITIONS'=41
+'ALLNUM'=42
+'DELIM'=43
+'CENTROIDS'=44
+'ITERATIONS'=45
+'DISTANCE_TYPE'=46
+'NUMBER_OF_TREES'=47
+'SHINGLE_SIZE'=48
+'SAMPLE_SIZE'=49
+'OUTPUT_AFTER'=50
+'TIME_DECAY'=51
+'ANOMALY_RATE'=52
+'CATEGORY_FIELD'=53
+'TIME_FIELD'=54
+'TIME_ZONE'=55
+'TRAINING_DATA_SIZE'=56
+'ANOMALY_SCORE_THRESHOLD'=57
+'CASE'=58
+'IN'=59
+'NOT'=60
+'OR'=61
+'AND'=62
+'XOR'=63
+'TRUE'=64
+'FALSE'=65
+'REGEXP'=66
+'DATETIME'=67
+'INTERVAL'=68
+'MICROSECOND'=69
+'MILLISECOND'=70
+'SECOND'=71
+'MINUTE'=72
+'HOUR'=73
+'DAY'=74
+'WEEK'=75
+'MONTH'=76
+'QUARTER'=77
+'YEAR'=78
+'SECOND_MICROSECOND'=79
+'MINUTE_MICROSECOND'=80
+'MINUTE_SECOND'=81
+'HOUR_MICROSECOND'=82
+'HOUR_SECOND'=83
+'HOUR_MINUTE'=84
+'DAY_MICROSECOND'=85
+'DAY_SECOND'=86
+'DAY_MINUTE'=87
+'DAY_HOUR'=88
+'YEAR_MONTH'=89
+'CONVERT_TZ'=90
+'DATAMODEL'=91
+'LOOKUP'=92
+'SAVEDSEARCH'=93
+'INT'=94
+'INTEGER'=95
+'DOUBLE'=96
+'LONG'=97
+'FLOAT'=98
+'STRING'=99
+'BOOLEAN'=100
+'|'=101
+','=102
+'.'=103
+'='=104
+'>'=105
+'<'=106
+'+'=110
+'-'=111
+'*'=112
+'/'=113
+'%'=114
+'!'=115
+':'=116
+'('=117
+')'=118
+'['=119
+']'=120
+'\''=121
+'"'=122
+'`'=123
+'~'=124
+'&'=125
+'^'=126
+'AVG'=127
+'COUNT'=128
+'DISTINCT_COUNT'=129
+'ESTDC'=130
+'ESTDC_ERROR'=131
+'MAX'=132
+'MEAN'=133
+'MEDIAN'=134
+'MIN'=135
+'MODE'=136
+'RANGE'=137
+'STDEV'=138
+'STDEVP'=139
+'SUM'=140
+'SUMSQ'=141
+'VAR_SAMP'=142
+'VAR_POP'=143
+'STDDEV_SAMP'=144
+'STDDEV_POP'=145
+'PERCENTILE'=146
+'TAKE'=147
+'FIRST'=148
+'LAST'=149
+'LIST'=150
+'VALUES'=151
+'EARLIEST'=152
+'EARLIEST_TIME'=153
+'LATEST'=154
+'LATEST_TIME'=155
+'PER_DAY'=156
+'PER_HOUR'=157
+'PER_MINUTE'=158
+'PER_SECOND'=159
+'RATE'=160
+'SPARKLINE'=161
+'C'=162
+'DC'=163
+'ABS'=164
+'CEIL'=165
+'CEILING'=166
+'CONV'=167
+'CRC32'=168
+'E'=169
+'EXP'=170
+'FLOOR'=171
+'LN'=172
+'LOG'=173
+'LOG10'=174
+'LOG2'=175
+'MOD'=176
+'PI'=177
+'POW'=178
+'POWER'=179
+'RAND'=180
+'ROUND'=181
+'SIGN'=182
+'SQRT'=183
+'TRUNCATE'=184
+'ACOS'=185
+'ASIN'=186
+'ATAN'=187
+'ATAN2'=188
+'COS'=189
+'COT'=190
+'DEGREES'=191
+'RADIANS'=192
+'SIN'=193
+'TAN'=194
+'ADDDATE'=195
+'CURDATE'=196
+'CURRENT_DATE'=197
+'CURRENT_TIME'=198
+'CURRENT_TIMESTAMP'=199
+'CURTIME'=200
+'DATE'=201
+'DATE_ADD'=202
+'DATE_FORMAT'=203
+'DATE_SUB'=204
+'DAYNAME'=205
+'DAYOFMONTH'=206
+'DAYOFWEEK'=207
+'DAYOFYEAR'=208
+'FROM_DAYS'=209
+'LOCALTIME'=210
+'LOCALTIMESTAMP'=211
+'FROM_UNIXTIME'=212
+'MAKEDATE'=213
+'MAKETIME'=214
+'MONTHNAME'=215
+'NOW'=216
+'PERIOD_ADD'=217
+'PERIOD_DIFF'=218
+'SUBDATE'=219
+'SYSDATE'=220
+'TIME'=221
+'TIME_TO_SEC'=222
+'TIMESTAMP'=223
+'TO_DAYS'=224
+'UTC_DATE'=225
+'UTC_TIME'=226
+'UTC_TIMESTAMP'=227
+'UNIX_TIMESTAMP'=228
+'SUBSTR'=229
+'SUBSTRING'=230
+'LTRIM'=231
+'RTRIM'=232
+'TRIM'=233
+'TO'=234
+'LOWER'=235
+'UPPER'=236
+'CONCAT'=237
+'CONCAT_WS'=238
+'LENGTH'=239
+'STRCMP'=240
+'RIGHT'=241
+'LEFT'=242
+'ASCII'=243
+'LOCATE'=244
+'REPLACE'=245
+'CAST'=246
+'LIKE'=247
+'ISNULL'=248
+'ISNOTNULL'=249
+'IFNULL'=250
+'NULLIF'=251
+'IF'=252
+'TYPEOF'=253
+'MATCH'=254
+'MATCH_PHRASE'=255
+'MATCH_PHRASE_PREFIX'=256
+'MATCH_BOOL_PREFIX'=257
+'SIMPLE_QUERY_STRING'=258
+'MULTI_MATCH'=259
+'QUERY_STRING'=260
+'ALLOW_LEADING_WILDCARD'=261
+'ANALYZE_WILDCARD'=262
+'ANALYZER'=263
+'AUTO_GENERATE_SYNONYMS_PHRASE_QUERY'=264
+'BOOST'=265
+'CUTOFF_FREQUENCY'=266
+'DEFAULT_FIELD'=267
+'DEFAULT_OPERATOR'=268
+'ENABLE_POSITION_INCREMENTS'=269
+'ESCAPE'=270
+'FLAGS'=271
+'FUZZY_MAX_EXPANSIONS'=272
+'FUZZY_PREFIX_LENGTH'=273
+'FUZZY_TRANSPOSITIONS'=274
+'FUZZY_REWRITE'=275
+'FUZZINESS'=276
+'LENIENT'=277
+'LOW_FREQ_OPERATOR'=278
+'MAX_DETERMINIZED_STATES'=279
+'MAX_EXPANSIONS'=280
+'MINIMUM_SHOULD_MATCH'=281
+'OPERATOR'=282
+'PHRASE_SLOP'=283
+'PREFIX_LENGTH'=284
+'QUOTE_ANALYZER'=285
+'QUOTE_FIELD_SUFFIX'=286
+'REWRITE'=287
+'SLOP'=288
+'TIE_BREAKER'=289
+'TYPE'=290
+'ZERO_TERMS_QUERY'=291
+'SPAN'=292
+'MS'=293
+'S'=294
+'M'=295
+'H'=296
+'W'=297
+'Q'=298
+'Y'=299
diff --git a/common/query_manager/antlr/output/OpenSearchPPLParser.ts b/common/query_manager/antlr/output/OpenSearchPPLParser.ts
new file mode 100644
index 0000000000..88d1a7e637
--- /dev/null
+++ b/common/query_manager/antlr/output/OpenSearchPPLParser.ts
@@ -0,0 +1,11912 @@
+// Generated from ./common/query_manager/antlr/grammar/OpenSearchPPLParser.g4 by ANTLR 4.9.0-SNAPSHOT
+
+
+import { ATN } from "antlr4ts/atn/ATN";
+import { ATNDeserializer } from "antlr4ts/atn/ATNDeserializer";
+import { FailedPredicateException } from "antlr4ts/FailedPredicateException";
+import { NotNull } from "antlr4ts/Decorators";
+import { NoViableAltException } from "antlr4ts/NoViableAltException";
+import { Override } from "antlr4ts/Decorators";
+import { Parser } from "antlr4ts/Parser";
+import { ParserRuleContext } from "antlr4ts/ParserRuleContext";
+import { ParserATNSimulator } from "antlr4ts/atn/ParserATNSimulator";
+import { ParseTreeListener } from "antlr4ts/tree/ParseTreeListener";
+import { ParseTreeVisitor } from "antlr4ts/tree/ParseTreeVisitor";
+import { RecognitionException } from "antlr4ts/RecognitionException";
+import { RuleContext } from "antlr4ts/RuleContext";
+//import { RuleVersion } from "antlr4ts/RuleVersion";
+import { TerminalNode } from "antlr4ts/tree/TerminalNode";
+import { Token } from "antlr4ts/Token";
+import { TokenStream } from "antlr4ts/TokenStream";
+import { Vocabulary } from "antlr4ts/Vocabulary";
+import { VocabularyImpl } from "antlr4ts/VocabularyImpl";
+
+import * as Utils from "antlr4ts/misc/Utils";
+
+import { OpenSearchPPLParserListener } from "./OpenSearchPPLParserListener";
+import { OpenSearchPPLParserVisitor } from "./OpenSearchPPLParserVisitor";
+
+
+export class OpenSearchPPLParser extends Parser {
+	public static readonly SEARCH = 1;
+	public static readonly DESCRIBE = 2;
+	public static readonly SHOW = 3;
+	public static readonly FROM = 4;
+	public static readonly WHERE = 5;
+	public static readonly FIELDS = 6;
+	public static readonly RENAME = 7;
+	public static readonly STATS = 8;
+	public static readonly DEDUP = 9;
+	public static readonly SORT = 10;
+	public static readonly EVAL = 11;
+	public static readonly HEAD = 12;
+	public static readonly TOP = 13;
+	public static readonly RARE = 14;
+	public static readonly PARSE = 15;
+	public static readonly METHOD = 16;
+	public static readonly REGEX = 17;
+	public static readonly PUNCT = 18;
+	public static readonly GROK = 19;
+	public static readonly PATTERN = 20;
+	public static readonly PATTERNS = 21;
+	public static readonly NEW_FIELD = 22;
+	public static readonly KMEANS = 23;
+	public static readonly AD = 24;
+	public static readonly ML = 25;
+	public static readonly AS = 26;
+	public static readonly BY = 27;
+	public static readonly SOURCE = 28;
+	public static readonly INDEX = 29;
+	public static readonly D = 30;
+	public static readonly DESC = 31;
+	public static readonly CATALOGS = 32;
+	public static readonly SORTBY = 33;
+	public static readonly AUTO = 34;
+	public static readonly STR = 35;
+	public static readonly IP = 36;
+	public static readonly NUM = 37;
+	public static readonly KEEPEMPTY = 38;
+	public static readonly CONSECUTIVE = 39;
+	public static readonly DEDUP_SPLITVALUES = 40;
+	public static readonly PARTITIONS = 41;
+	public static readonly ALLNUM = 42;
+	public static readonly DELIM = 43;
+	public static readonly CENTROIDS = 44;
+	public static readonly ITERATIONS = 45;
+	public static readonly DISTANCE_TYPE = 46;
+	public static readonly NUMBER_OF_TREES = 47;
+	public static readonly SHINGLE_SIZE = 48;
+	public static readonly SAMPLE_SIZE = 49;
+	public static readonly OUTPUT_AFTER = 50;
+	public static readonly TIME_DECAY = 51;
+	public static readonly ANOMALY_RATE = 52;
+	public static readonly CATEGORY_FIELD = 53;
+	public static readonly TIME_FIELD = 54;
+	public static readonly TIME_ZONE = 55;
+	public static readonly TRAINING_DATA_SIZE = 56;
+	public static readonly ANOMALY_SCORE_THRESHOLD = 57;
+	public static readonly CASE = 58;
+	public static readonly IN = 59;
+	public static readonly NOT = 60;
+	public static readonly OR = 61;
+	public static readonly AND = 62;
+	public static readonly XOR = 63;
+	public static readonly TRUE = 64;
+	public static readonly FALSE = 65;
+	public static readonly REGEXP = 66;
+	public static readonly DATETIME = 67;
+	public static readonly INTERVAL = 68;
+	public static readonly MICROSECOND = 69;
+	public static readonly MILLISECOND = 70;
+	public static readonly SECOND = 71;
+	public static readonly MINUTE = 72;
+	public static readonly HOUR = 73;
+	public static readonly DAY = 74;
+	public static readonly WEEK = 75;
+	public static readonly MONTH = 76;
+	public static readonly QUARTER = 77;
+	public static readonly YEAR = 78;
+	public static readonly SECOND_MICROSECOND = 79;
+	public static readonly MINUTE_MICROSECOND = 80;
+	public static readonly MINUTE_SECOND = 81;
+	public static readonly HOUR_MICROSECOND = 82;
+	public static readonly HOUR_SECOND = 83;
+	public static readonly HOUR_MINUTE = 84;
+	public static readonly DAY_MICROSECOND = 85;
+	public static readonly DAY_SECOND = 86;
+	public static readonly DAY_MINUTE = 87;
+	public static readonly DAY_HOUR = 88;
+	public static readonly YEAR_MONTH = 89;
+	public static readonly CONVERT_TZ = 90;
+	public static readonly DATAMODEL = 91;
+	public static readonly LOOKUP = 92;
+	public static readonly SAVEDSEARCH = 93;
+	public static readonly INT = 94;
+	public static readonly INTEGER = 95;
+	public static readonly DOUBLE = 96;
+	public static readonly LONG = 97;
+	public static readonly FLOAT = 98;
+	public static readonly STRING = 99;
+	public static readonly BOOLEAN = 100;
+	public static readonly PIPE = 101;
+	public static readonly COMMA = 102;
+	public static readonly DOT = 103;
+	public static readonly EQUAL = 104;
+	public static readonly GREATER = 105;
+	public static readonly LESS = 106;
+	public static readonly NOT_GREATER = 107;
+	public static readonly NOT_LESS = 108;
+	public static readonly NOT_EQUAL = 109;
+	public static readonly PLUS = 110;
+	public static readonly MINUS = 111;
+	public static readonly STAR = 112;
+	public static readonly DIVIDE = 113;
+	public static readonly MODULE = 114;
+	public static readonly EXCLAMATION_SYMBOL = 115;
+	public static readonly COLON = 116;
+	public static readonly LT_PRTHS = 117;
+	public static readonly RT_PRTHS = 118;
+	public static readonly LT_SQR_PRTHS = 119;
+	public static readonly RT_SQR_PRTHS = 120;
+	public static readonly SINGLE_QUOTE = 121;
+	public static readonly DOUBLE_QUOTE = 122;
+	public static readonly BACKTICK = 123;
+	public static readonly BIT_NOT_OP = 124;
+	public static readonly BIT_AND_OP = 125;
+	public static readonly BIT_XOR_OP = 126;
+	public static readonly AVG = 127;
+	public static readonly COUNT = 128;
+	public static readonly DISTINCT_COUNT = 129;
+	public static readonly ESTDC = 130;
+	public static readonly ESTDC_ERROR = 131;
+	public static readonly MAX = 132;
+	public static readonly MEAN = 133;
+	public static readonly MEDIAN = 134;
+	public static readonly MIN = 135;
+	public static readonly MODE = 136;
+	public static readonly RANGE = 137;
+	public static readonly STDEV = 138;
+	public static readonly STDEVP = 139;
+	public static readonly SUM = 140;
+	public static readonly SUMSQ = 141;
+	public static readonly VAR_SAMP = 142;
+	public static readonly VAR_POP = 143;
+	public static readonly STDDEV_SAMP = 144;
+	public static readonly STDDEV_POP = 145;
+	public static readonly PERCENTILE = 146;
+	public static readonly TAKE = 147;
+	public static readonly FIRST = 148;
+	public static readonly LAST = 149;
+	public static readonly LIST = 150;
+	public static readonly VALUES = 151;
+	public static readonly EARLIEST = 152;
+	public static readonly EARLIEST_TIME = 153;
+	public static readonly LATEST = 154;
+	public static readonly LATEST_TIME = 155;
+	public static readonly PER_DAY = 156;
+	public static readonly PER_HOUR = 157;
+	public static readonly PER_MINUTE = 158;
+	public static readonly PER_SECOND = 159;
+	public static readonly RATE = 160;
+	public static readonly SPARKLINE = 161;
+	public static readonly C = 162;
+	public static readonly DC = 163;
+	public static readonly ABS = 164;
+	public static readonly CEIL = 165;
+	public static readonly CEILING = 166;
+	public static readonly CONV = 167;
+	public static readonly CRC32 = 168;
+	public static readonly E = 169;
+	public static readonly EXP = 170;
+	public static readonly FLOOR = 171;
+	public static readonly LN = 172;
+	public static readonly LOG = 173;
+	public static readonly LOG10 = 174;
+	public static readonly LOG2 = 175;
+	public static readonly MOD = 176;
+	public static readonly PI = 177;
+	public static readonly POW = 178;
+	public static readonly POWER = 179;
+	public static readonly RAND = 180;
+	public static readonly ROUND = 181;
+	public static readonly SIGN = 182;
+	public static readonly SQRT = 183;
+	public static readonly TRUNCATE = 184;
+	public static readonly ACOS = 185;
+	public static readonly ASIN = 186;
+	public static readonly ATAN = 187;
+	public static readonly ATAN2 = 188;
+	public static readonly COS = 189;
+	public static readonly COT = 190;
+	public static readonly DEGREES = 191;
+	public static readonly RADIANS = 192;
+	public static readonly SIN = 193;
+	public static readonly TAN = 194;
+	public static readonly ADDDATE = 195;
+	public static readonly CURDATE = 196;
+	public static readonly CURRENT_DATE = 197;
+	public static readonly CURRENT_TIME = 198;
+	public static readonly CURRENT_TIMESTAMP = 199;
+	public static readonly CURTIME = 200;
+	public static readonly DATE = 201;
+	public static readonly DATE_ADD = 202;
+	public static readonly DATE_FORMAT = 203;
+	public static readonly DATE_SUB = 204;
+	public static readonly DAYNAME = 205;
+	public static readonly DAYOFMONTH = 206;
+	public static readonly DAYOFWEEK = 207;
+	public static readonly DAYOFYEAR = 208;
+	public static readonly FROM_DAYS = 209;
+	public static readonly LOCALTIME = 210;
+	public static readonly LOCALTIMESTAMP = 211;
+	public static readonly FROM_UNIXTIME = 212;
+	public static readonly MAKEDATE = 213;
+	public static readonly MAKETIME = 214;
+	public static readonly MONTHNAME = 215;
+	public static readonly NOW = 216;
+	public static readonly PERIOD_ADD = 217;
+	public static readonly PERIOD_DIFF = 218;
+	public static readonly SUBDATE = 219;
+	public static readonly SYSDATE = 220;
+	public static readonly TIME = 221;
+	public static readonly TIME_TO_SEC = 222;
+	public static readonly TIMESTAMP = 223;
+	public static readonly TO_DAYS = 224;
+	public static readonly UTC_DATE = 225;
+	public static readonly UTC_TIME = 226;
+	public static readonly UTC_TIMESTAMP = 227;
+	public static readonly UNIX_TIMESTAMP = 228;
+	public static readonly SUBSTR = 229;
+	public static readonly SUBSTRING = 230;
+	public static readonly LTRIM = 231;
+	public static readonly RTRIM = 232;
+	public static readonly TRIM = 233;
+	public static readonly TO = 234;
+	public static readonly LOWER = 235;
+	public static readonly UPPER = 236;
+	public static readonly CONCAT = 237;
+	public static readonly CONCAT_WS = 238;
+	public static readonly LENGTH = 239;
+	public static readonly STRCMP = 240;
+	public static readonly RIGHT = 241;
+	public static readonly LEFT = 242;
+	public static readonly ASCII = 243;
+	public static readonly LOCATE = 244;
+	public static readonly REPLACE = 245;
+	public static readonly CAST = 246;
+	public static readonly LIKE = 247;
+	public static readonly ISNULL = 248;
+	public static readonly ISNOTNULL = 249;
+	public static readonly IFNULL = 250;
+	public static readonly NULLIF = 251;
+	public static readonly IF = 252;
+	public static readonly TYPEOF = 253;
+	public static readonly MATCH = 254;
+	public static readonly MATCH_PHRASE = 255;
+	public static readonly MATCH_PHRASE_PREFIX = 256;
+	public static readonly MATCH_BOOL_PREFIX = 257;
+	public static readonly SIMPLE_QUERY_STRING = 258;
+	public static readonly MULTI_MATCH = 259;
+	public static readonly QUERY_STRING = 260;
+	public static readonly ALLOW_LEADING_WILDCARD = 261;
+	public static readonly ANALYZE_WILDCARD = 262;
+	public static readonly ANALYZER = 263;
+	public static readonly AUTO_GENERATE_SYNONYMS_PHRASE_QUERY = 264;
+	public static readonly BOOST = 265;
+	public static readonly CUTOFF_FREQUENCY = 266;
+	public static readonly DEFAULT_FIELD = 267;
+	public static readonly DEFAULT_OPERATOR = 268;
+	public static readonly ENABLE_POSITION_INCREMENTS = 269;
+	public static readonly ESCAPE = 270;
+	public static readonly FLAGS = 271;
+	public static readonly FUZZY_MAX_EXPANSIONS = 272;
+	public static readonly FUZZY_PREFIX_LENGTH = 273;
+	public static readonly FUZZY_TRANSPOSITIONS = 274;
+	public static readonly FUZZY_REWRITE = 275;
+	public static readonly FUZZINESS = 276;
+	public static readonly LENIENT = 277;
+	public static readonly LOW_FREQ_OPERATOR = 278;
+	public static readonly MAX_DETERMINIZED_STATES = 279;
+	public static readonly MAX_EXPANSIONS = 280;
+	public static readonly MINIMUM_SHOULD_MATCH = 281;
+	public static readonly OPERATOR = 282;
+	public static readonly PHRASE_SLOP = 283;
+	public static readonly PREFIX_LENGTH = 284;
+	public static readonly QUOTE_ANALYZER = 285;
+	public static readonly QUOTE_FIELD_SUFFIX = 286;
+	public static readonly REWRITE = 287;
+	public static readonly SLOP = 288;
+	public static readonly TIE_BREAKER = 289;
+	public static readonly TYPE = 290;
+	public static readonly ZERO_TERMS_QUERY = 291;
+	public static readonly SPAN = 292;
+	public static readonly MS = 293;
+	public static readonly S = 294;
+	public static readonly M = 295;
+	public static readonly H = 296;
+	public static readonly W = 297;
+	public static readonly Q = 298;
+	public static readonly Y = 299;
+	public static readonly ID = 300;
+	public static readonly INTEGER_LITERAL = 301;
+	public static readonly DECIMAL_LITERAL = 302;
+	public static readonly ID_DATE_SUFFIX = 303;
+	public static readonly DQUOTA_STRING = 304;
+	public static readonly SQUOTA_STRING = 305;
+	public static readonly BQUOTA_STRING = 306;
+	public static readonly ERROR_RECOGNITION = 307;
+	public static readonly RULE_root = 0;
+	public static readonly RULE_pplStatement = 1;
+	public static readonly RULE_pplCommands = 2;
+	public static readonly RULE_commands = 3;
+	public static readonly RULE_searchCommand = 4;
+	public static readonly RULE_describeCommand = 5;
+	public static readonly RULE_showCatalogsCommand = 6;
+	public static readonly RULE_whereCommand = 7;
+	public static readonly RULE_fieldsCommand = 8;
+	public static readonly RULE_renameCommand = 9;
+	public static readonly RULE_statsCommand = 10;
+	public static readonly RULE_dedupCommand = 11;
+	public static readonly RULE_sortCommand = 12;
+	public static readonly RULE_evalCommand = 13;
+	public static readonly RULE_headCommand = 14;
+	public static readonly RULE_topCommand = 15;
+	public static readonly RULE_rareCommand = 16;
+	public static readonly RULE_grokCommand = 17;
+	public static readonly RULE_parseCommand = 18;
+	public static readonly RULE_patternsCommand = 19;
+	public static readonly RULE_patternsParameter = 20;
+	public static readonly RULE_patternsMethod = 21;
+	public static readonly RULE_kmeansCommand = 22;
+	public static readonly RULE_kmeansParameter = 23;
+	public static readonly RULE_adCommand = 24;
+	public static readonly RULE_adParameter = 25;
+	public static readonly RULE_mlCommand = 26;
+	public static readonly RULE_mlArg = 27;
+	public static readonly RULE_fromClause = 28;
+	public static readonly RULE_tableSourceClause = 29;
+	public static readonly RULE_renameClasue = 30;
+	public static readonly RULE_byClause = 31;
+	public static readonly RULE_statsByClause = 32;
+	public static readonly RULE_bySpanClause = 33;
+	public static readonly RULE_spanClause = 34;
+	public static readonly RULE_sortbyClause = 35;
+	public static readonly RULE_evalClause = 36;
+	public static readonly RULE_statsAggTerm = 37;
+	public static readonly RULE_statsFunction = 38;
+	public static readonly RULE_statsFunctionName = 39;
+	public static readonly RULE_takeAggFunction = 40;
+	public static readonly RULE_percentileAggFunction = 41;
+	public static readonly RULE_expression = 42;
+	public static readonly RULE_logicalExpression = 43;
+	public static readonly RULE_comparisonExpression = 44;
+	public static readonly RULE_valueExpression = 45;
+	public static readonly RULE_primaryExpression = 46;
+	public static readonly RULE_constantFunction = 47;
+	public static readonly RULE_booleanExpression = 48;
+	public static readonly RULE_relevanceExpression = 49;
+	public static readonly RULE_singleFieldRelevanceFunction = 50;
+	public static readonly RULE_multiFieldRelevanceFunction = 51;
+	public static readonly RULE_tableSource = 52;
+	public static readonly RULE_tableFunction = 53;
+	public static readonly RULE_fieldList = 54;
+	public static readonly RULE_wcFieldList = 55;
+	public static readonly RULE_sortField = 56;
+	public static readonly RULE_sortFieldExpression = 57;
+	public static readonly RULE_fieldExpression = 58;
+	public static readonly RULE_wcFieldExpression = 59;
+	public static readonly RULE_evalFunctionCall = 60;
+	public static readonly RULE_dataTypeFunctionCall = 61;
+	public static readonly RULE_booleanFunctionCall = 62;
+	public static readonly RULE_convertedDataType = 63;
+	public static readonly RULE_evalFunctionName = 64;
+	public static readonly RULE_functionArgs = 65;
+	public static readonly RULE_functionArg = 66;
+	public static readonly RULE_relevanceArg = 67;
+	public static readonly RULE_relevanceArgName = 68;
+	public static readonly RULE_relevanceFieldAndWeight = 69;
+	public static readonly RULE_relevanceFieldWeight = 70;
+	public static readonly RULE_relevanceField = 71;
+	public static readonly RULE_relevanceQuery = 72;
+	public static readonly RULE_relevanceArgValue = 73;
+	public static readonly RULE_mathematicalFunctionBase = 74;
+	public static readonly RULE_trigonometricFunctionName = 75;
+	public static readonly RULE_dateAndTimeFunctionBase = 76;
+	public static readonly RULE_constantFunctionName = 77;
+	public static readonly RULE_conditionFunctionBase = 78;
+	public static readonly RULE_systemFunctionBase = 79;
+	public static readonly RULE_textFunctionBase = 80;
+	public static readonly RULE_comparisonOperator = 81;
+	public static readonly RULE_binaryOperator = 82;
+	public static readonly RULE_singleFieldRelevanceFunctionName = 83;
+	public static readonly RULE_multiFieldRelevanceFunctionName = 84;
+	public static readonly RULE_literalValue = 85;
+	public static readonly RULE_intervalLiteral = 86;
+	public static readonly RULE_stringLiteral = 87;
+	public static readonly RULE_integerLiteral = 88;
+	public static readonly RULE_decimalLiteral = 89;
+	public static readonly RULE_booleanLiteral = 90;
+	public static readonly RULE_datetimeLiteral = 91;
+	public static readonly RULE_dateLiteral = 92;
+	public static readonly RULE_timeLiteral = 93;
+	public static readonly RULE_timestampLiteral = 94;
+	public static readonly RULE_intervalUnit = 95;
+	public static readonly RULE_timespanUnit = 96;
+	public static readonly RULE_valueList = 97;
+	public static readonly RULE_qualifiedName = 98;
+	public static readonly RULE_wcQualifiedName = 99;
+	public static readonly RULE_ident = 100;
+	public static readonly RULE_wildcard = 101;
+	public static readonly RULE_keywordsCanBeId = 102;
+	// tslint:disable:no-trailing-whitespace
+	public static readonly ruleNames: string[] = [
+		"root", "pplStatement", "pplCommands", "commands", "searchCommand", "describeCommand", 
+		"showCatalogsCommand", "whereCommand", "fieldsCommand", "renameCommand", 
+		"statsCommand", "dedupCommand", "sortCommand", "evalCommand", "headCommand", 
+		"topCommand", "rareCommand", "grokCommand", "parseCommand", "patternsCommand", 
+		"patternsParameter", "patternsMethod", "kmeansCommand", "kmeansParameter", 
+		"adCommand", "adParameter", "mlCommand", "mlArg", "fromClause", "tableSourceClause", 
+		"renameClasue", "byClause", "statsByClause", "bySpanClause", "spanClause", 
+		"sortbyClause", "evalClause", "statsAggTerm", "statsFunction", "statsFunctionName", 
+		"takeAggFunction", "percentileAggFunction", "expression", "logicalExpression", 
+		"comparisonExpression", "valueExpression", "primaryExpression", "constantFunction", 
+		"booleanExpression", "relevanceExpression", "singleFieldRelevanceFunction", 
+		"multiFieldRelevanceFunction", "tableSource", "tableFunction", "fieldList", 
+		"wcFieldList", "sortField", "sortFieldExpression", "fieldExpression", 
+		"wcFieldExpression", "evalFunctionCall", "dataTypeFunctionCall", "booleanFunctionCall", 
+		"convertedDataType", "evalFunctionName", "functionArgs", "functionArg", 
+		"relevanceArg", "relevanceArgName", "relevanceFieldAndWeight", "relevanceFieldWeight", 
+		"relevanceField", "relevanceQuery", "relevanceArgValue", "mathematicalFunctionBase", 
+		"trigonometricFunctionName", "dateAndTimeFunctionBase", "constantFunctionName", 
+		"conditionFunctionBase", "systemFunctionBase", "textFunctionBase", "comparisonOperator", 
+		"binaryOperator", "singleFieldRelevanceFunctionName", "multiFieldRelevanceFunctionName", 
+		"literalValue", "intervalLiteral", "stringLiteral", "integerLiteral", 
+		"decimalLiteral", "booleanLiteral", "datetimeLiteral", "dateLiteral", 
+		"timeLiteral", "timestampLiteral", "intervalUnit", "timespanUnit", "valueList", 
+		"qualifiedName", "wcQualifiedName", "ident", "wildcard", "keywordsCanBeId",
+	];
+
+	private static readonly _LITERAL_NAMES: Array<string | undefined> = [
+		undefined, "'SEARCH'", "'DESCRIBE'", "'SHOW'", "'FROM'", "'WHERE'", "'FIELDS'", 
+		"'RENAME'", "'STATS'", "'DEDUP'", "'SORT'", "'EVAL'", "'HEAD'", "'TOP'", 
+		"'RARE'", "'PARSE'", "'METHOD'", "'REGEX'", "'PUNCT'", "'GROK'", "'PATTERN'", 
+		"'PATTERNS'", "'NEW_FIELD'", "'KMEANS'", "'AD'", "'ML'", "'AS'", "'BY'", 
+		"'SOURCE'", "'INDEX'", "'D'", "'DESC'", "'CATALOGS'", "'SORTBY'", "'AUTO'", 
+		"'STR'", "'IP'", "'NUM'", "'KEEPEMPTY'", "'CONSECUTIVE'", "'DEDUP_SPLITVALUES'", 
+		"'PARTITIONS'", "'ALLNUM'", "'DELIM'", "'CENTROIDS'", "'ITERATIONS'", 
+		"'DISTANCE_TYPE'", "'NUMBER_OF_TREES'", "'SHINGLE_SIZE'", "'SAMPLE_SIZE'", 
+		"'OUTPUT_AFTER'", "'TIME_DECAY'", "'ANOMALY_RATE'", "'CATEGORY_FIELD'", 
+		"'TIME_FIELD'", "'TIME_ZONE'", "'TRAINING_DATA_SIZE'", "'ANOMALY_SCORE_THRESHOLD'", 
+		"'CASE'", "'IN'", "'NOT'", "'OR'", "'AND'", "'XOR'", "'TRUE'", "'FALSE'", 
+		"'REGEXP'", "'DATETIME'", "'INTERVAL'", "'MICROSECOND'", "'MILLISECOND'", 
+		"'SECOND'", "'MINUTE'", "'HOUR'", "'DAY'", "'WEEK'", "'MONTH'", "'QUARTER'", 
+		"'YEAR'", "'SECOND_MICROSECOND'", "'MINUTE_MICROSECOND'", "'MINUTE_SECOND'", 
+		"'HOUR_MICROSECOND'", "'HOUR_SECOND'", "'HOUR_MINUTE'", "'DAY_MICROSECOND'", 
+		"'DAY_SECOND'", "'DAY_MINUTE'", "'DAY_HOUR'", "'YEAR_MONTH'", "'CONVERT_TZ'", 
+		"'DATAMODEL'", "'LOOKUP'", "'SAVEDSEARCH'", "'INT'", "'INTEGER'", "'DOUBLE'", 
+		"'LONG'", "'FLOAT'", "'STRING'", "'BOOLEAN'", "'|'", "','", "'.'", "'='", 
+		"'>'", "'<'", undefined, undefined, undefined, "'+'", "'-'", "'*'", "'/'", 
+		"'%'", "'!'", "':'", "'('", "')'", "'['", "']'", "'''", "'\"'", "'`'", 
+		"'~'", "'&'", "'^'", "'AVG'", "'COUNT'", "'DISTINCT_COUNT'", "'ESTDC'", 
+		"'ESTDC_ERROR'", "'MAX'", "'MEAN'", "'MEDIAN'", "'MIN'", "'MODE'", "'RANGE'", 
+		"'STDEV'", "'STDEVP'", "'SUM'", "'SUMSQ'", "'VAR_SAMP'", "'VAR_POP'", 
+		"'STDDEV_SAMP'", "'STDDEV_POP'", "'PERCENTILE'", "'TAKE'", "'FIRST'", 
+		"'LAST'", "'LIST'", "'VALUES'", "'EARLIEST'", "'EARLIEST_TIME'", "'LATEST'", 
+		"'LATEST_TIME'", "'PER_DAY'", "'PER_HOUR'", "'PER_MINUTE'", "'PER_SECOND'", 
+		"'RATE'", "'SPARKLINE'", "'C'", "'DC'", "'ABS'", "'CEIL'", "'CEILING'", 
+		"'CONV'", "'CRC32'", "'E'", "'EXP'", "'FLOOR'", "'LN'", "'LOG'", "'LOG10'", 
+		"'LOG2'", "'MOD'", "'PI'", "'POW'", "'POWER'", "'RAND'", "'ROUND'", "'SIGN'", 
+		"'SQRT'", "'TRUNCATE'", "'ACOS'", "'ASIN'", "'ATAN'", "'ATAN2'", "'COS'", 
+		"'COT'", "'DEGREES'", "'RADIANS'", "'SIN'", "'TAN'", "'ADDDATE'", "'CURDATE'", 
+		"'CURRENT_DATE'", "'CURRENT_TIME'", "'CURRENT_TIMESTAMP'", "'CURTIME'", 
+		"'DATE'", "'DATE_ADD'", "'DATE_FORMAT'", "'DATE_SUB'", "'DAYNAME'", "'DAYOFMONTH'", 
+		"'DAYOFWEEK'", "'DAYOFYEAR'", "'FROM_DAYS'", "'LOCALTIME'", "'LOCALTIMESTAMP'", 
+		"'FROM_UNIXTIME'", "'MAKEDATE'", "'MAKETIME'", "'MONTHNAME'", "'NOW'", 
+		"'PERIOD_ADD'", "'PERIOD_DIFF'", "'SUBDATE'", "'SYSDATE'", "'TIME'", "'TIME_TO_SEC'", 
+		"'TIMESTAMP'", "'TO_DAYS'", "'UTC_DATE'", "'UTC_TIME'", "'UTC_TIMESTAMP'", 
+		"'UNIX_TIMESTAMP'", "'SUBSTR'", "'SUBSTRING'", "'LTRIM'", "'RTRIM'", "'TRIM'", 
+		"'TO'", "'LOWER'", "'UPPER'", "'CONCAT'", "'CONCAT_WS'", "'LENGTH'", "'STRCMP'", 
+		"'RIGHT'", "'LEFT'", "'ASCII'", "'LOCATE'", "'REPLACE'", "'CAST'", "'LIKE'", 
+		"'ISNULL'", "'ISNOTNULL'", "'IFNULL'", "'NULLIF'", "'IF'", "'TYPEOF'", 
+		"'MATCH'", "'MATCH_PHRASE'", "'MATCH_PHRASE_PREFIX'", "'MATCH_BOOL_PREFIX'", 
+		"'SIMPLE_QUERY_STRING'", "'MULTI_MATCH'", "'QUERY_STRING'", "'ALLOW_LEADING_WILDCARD'", 
+		"'ANALYZE_WILDCARD'", "'ANALYZER'", "'AUTO_GENERATE_SYNONYMS_PHRASE_QUERY'", 
+		"'BOOST'", "'CUTOFF_FREQUENCY'", "'DEFAULT_FIELD'", "'DEFAULT_OPERATOR'", 
+		"'ENABLE_POSITION_INCREMENTS'", "'ESCAPE'", "'FLAGS'", "'FUZZY_MAX_EXPANSIONS'", 
+		"'FUZZY_PREFIX_LENGTH'", "'FUZZY_TRANSPOSITIONS'", "'FUZZY_REWRITE'", 
+		"'FUZZINESS'", "'LENIENT'", "'LOW_FREQ_OPERATOR'", "'MAX_DETERMINIZED_STATES'", 
+		"'MAX_EXPANSIONS'", "'MINIMUM_SHOULD_MATCH'", "'OPERATOR'", "'PHRASE_SLOP'", 
+		"'PREFIX_LENGTH'", "'QUOTE_ANALYZER'", "'QUOTE_FIELD_SUFFIX'", "'REWRITE'", 
+		"'SLOP'", "'TIE_BREAKER'", "'TYPE'", "'ZERO_TERMS_QUERY'", "'SPAN'", "'MS'", 
+		"'S'", "'M'", "'H'", "'W'", "'Q'", "'Y'",
+	];
+	private static readonly _SYMBOLIC_NAMES: Array<string | undefined> = [
+		undefined, "SEARCH", "DESCRIBE", "SHOW", "FROM", "WHERE", "FIELDS", "RENAME", 
+		"STATS", "DEDUP", "SORT", "EVAL", "HEAD", "TOP", "RARE", "PARSE", "METHOD", 
+		"REGEX", "PUNCT", "GROK", "PATTERN", "PATTERNS", "NEW_FIELD", "KMEANS", 
+		"AD", "ML", "AS", "BY", "SOURCE", "INDEX", "D", "DESC", "CATALOGS", "SORTBY", 
+		"AUTO", "STR", "IP", "NUM", "KEEPEMPTY", "CONSECUTIVE", "DEDUP_SPLITVALUES", 
+		"PARTITIONS", "ALLNUM", "DELIM", "CENTROIDS", "ITERATIONS", "DISTANCE_TYPE", 
+		"NUMBER_OF_TREES", "SHINGLE_SIZE", "SAMPLE_SIZE", "OUTPUT_AFTER", "TIME_DECAY", 
+		"ANOMALY_RATE", "CATEGORY_FIELD", "TIME_FIELD", "TIME_ZONE", "TRAINING_DATA_SIZE", 
+		"ANOMALY_SCORE_THRESHOLD", "CASE", "IN", "NOT", "OR", "AND", "XOR", "TRUE", 
+		"FALSE", "REGEXP", "DATETIME", "INTERVAL", "MICROSECOND", "MILLISECOND", 
+		"SECOND", "MINUTE", "HOUR", "DAY", "WEEK", "MONTH", "QUARTER", "YEAR", 
+		"SECOND_MICROSECOND", "MINUTE_MICROSECOND", "MINUTE_SECOND", "HOUR_MICROSECOND", 
+		"HOUR_SECOND", "HOUR_MINUTE", "DAY_MICROSECOND", "DAY_SECOND", "DAY_MINUTE", 
+		"DAY_HOUR", "YEAR_MONTH", "CONVERT_TZ", "DATAMODEL", "LOOKUP", "SAVEDSEARCH", 
+		"INT", "INTEGER", "DOUBLE", "LONG", "FLOAT", "STRING", "BOOLEAN", "PIPE", 
+		"COMMA", "DOT", "EQUAL", "GREATER", "LESS", "NOT_GREATER", "NOT_LESS", 
+		"NOT_EQUAL", "PLUS", "MINUS", "STAR", "DIVIDE", "MODULE", "EXCLAMATION_SYMBOL", 
+		"COLON", "LT_PRTHS", "RT_PRTHS", "LT_SQR_PRTHS", "RT_SQR_PRTHS", "SINGLE_QUOTE", 
+		"DOUBLE_QUOTE", "BACKTICK", "BIT_NOT_OP", "BIT_AND_OP", "BIT_XOR_OP", 
+		"AVG", "COUNT", "DISTINCT_COUNT", "ESTDC", "ESTDC_ERROR", "MAX", "MEAN", 
+		"MEDIAN", "MIN", "MODE", "RANGE", "STDEV", "STDEVP", "SUM", "SUMSQ", "VAR_SAMP", 
+		"VAR_POP", "STDDEV_SAMP", "STDDEV_POP", "PERCENTILE", "TAKE", "FIRST", 
+		"LAST", "LIST", "VALUES", "EARLIEST", "EARLIEST_TIME", "LATEST", "LATEST_TIME", 
+		"PER_DAY", "PER_HOUR", "PER_MINUTE", "PER_SECOND", "RATE", "SPARKLINE", 
+		"C", "DC", "ABS", "CEIL", "CEILING", "CONV", "CRC32", "E", "EXP", "FLOOR", 
+		"LN", "LOG", "LOG10", "LOG2", "MOD", "PI", "POW", "POWER", "RAND", "ROUND", 
+		"SIGN", "SQRT", "TRUNCATE", "ACOS", "ASIN", "ATAN", "ATAN2", "COS", "COT", 
+		"DEGREES", "RADIANS", "SIN", "TAN", "ADDDATE", "CURDATE", "CURRENT_DATE", 
+		"CURRENT_TIME", "CURRENT_TIMESTAMP", "CURTIME", "DATE", "DATE_ADD", "DATE_FORMAT", 
+		"DATE_SUB", "DAYNAME", "DAYOFMONTH", "DAYOFWEEK", "DAYOFYEAR", "FROM_DAYS", 
+		"LOCALTIME", "LOCALTIMESTAMP", "FROM_UNIXTIME", "MAKEDATE", "MAKETIME", 
+		"MONTHNAME", "NOW", "PERIOD_ADD", "PERIOD_DIFF", "SUBDATE", "SYSDATE", 
+		"TIME", "TIME_TO_SEC", "TIMESTAMP", "TO_DAYS", "UTC_DATE", "UTC_TIME", 
+		"UTC_TIMESTAMP", "UNIX_TIMESTAMP", "SUBSTR", "SUBSTRING", "LTRIM", "RTRIM", 
+		"TRIM", "TO", "LOWER", "UPPER", "CONCAT", "CONCAT_WS", "LENGTH", "STRCMP", 
+		"RIGHT", "LEFT", "ASCII", "LOCATE", "REPLACE", "CAST", "LIKE", "ISNULL", 
+		"ISNOTNULL", "IFNULL", "NULLIF", "IF", "TYPEOF", "MATCH", "MATCH_PHRASE", 
+		"MATCH_PHRASE_PREFIX", "MATCH_BOOL_PREFIX", "SIMPLE_QUERY_STRING", "MULTI_MATCH", 
+		"QUERY_STRING", "ALLOW_LEADING_WILDCARD", "ANALYZE_WILDCARD", "ANALYZER", 
+		"AUTO_GENERATE_SYNONYMS_PHRASE_QUERY", "BOOST", "CUTOFF_FREQUENCY", "DEFAULT_FIELD", 
+		"DEFAULT_OPERATOR", "ENABLE_POSITION_INCREMENTS", "ESCAPE", "FLAGS", "FUZZY_MAX_EXPANSIONS", 
+		"FUZZY_PREFIX_LENGTH", "FUZZY_TRANSPOSITIONS", "FUZZY_REWRITE", "FUZZINESS", 
+		"LENIENT", "LOW_FREQ_OPERATOR", "MAX_DETERMINIZED_STATES", "MAX_EXPANSIONS", 
+		"MINIMUM_SHOULD_MATCH", "OPERATOR", "PHRASE_SLOP", "PREFIX_LENGTH", "QUOTE_ANALYZER", 
+		"QUOTE_FIELD_SUFFIX", "REWRITE", "SLOP", "TIE_BREAKER", "TYPE", "ZERO_TERMS_QUERY", 
+		"SPAN", "MS", "S", "M", "H", "W", "Q", "Y", "ID", "INTEGER_LITERAL", "DECIMAL_LITERAL", 
+		"ID_DATE_SUFFIX", "DQUOTA_STRING", "SQUOTA_STRING", "BQUOTA_STRING", "ERROR_RECOGNITION",
+	];
+	public static readonly VOCABULARY: Vocabulary = new VocabularyImpl(OpenSearchPPLParser._LITERAL_NAMES, OpenSearchPPLParser._SYMBOLIC_NAMES, []);
+
+	// @Override
+	// @NotNull
+	public get vocabulary(): Vocabulary {
+		return OpenSearchPPLParser.VOCABULARY;
+	}
+	// tslint:enable:no-trailing-whitespace
+
+	// @Override
+	public get grammarFileName(): string { return "OpenSearchPPLParser.g4"; }
+
+	// @Override
+	public get ruleNames(): string[] { return OpenSearchPPLParser.ruleNames; }
+
+	// @Override
+	public get serializedATN(): string { return OpenSearchPPLParser._serializedATN; }
+
+	protected createFailedPredicateException(predicate?: string, message?: string): FailedPredicateException {
+		return new FailedPredicateException(this, predicate, message);
+	}
+
+	constructor(input: TokenStream) {
+		super(input);
+		this._interp = new ParserATNSimulator(OpenSearchPPLParser._ATN, this);
+	}
+	// @RuleVersion(0)
+	public root(): RootContext {
+		let _localctx: RootContext = new RootContext(this._ctx, this.state);
+		this.enterRule(_localctx, 0, OpenSearchPPLParser.RULE_root);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 207;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if ((((_la) & ~0x1F) === 0 && ((1 << _la) & ((1 << OpenSearchPPLParser.SEARCH) | (1 << OpenSearchPPLParser.DESCRIBE) | (1 << OpenSearchPPLParser.SHOW) | (1 << OpenSearchPPLParser.SOURCE) | (1 << OpenSearchPPLParser.INDEX) | (1 << OpenSearchPPLParser.D))) !== 0) || ((((_la - 60)) & ~0x1F) === 0 && ((1 << (_la - 60)) & ((1 << (OpenSearchPPLParser.NOT - 60)) | (1 << (OpenSearchPPLParser.TRUE - 60)) | (1 << (OpenSearchPPLParser.FALSE - 60)) | (1 << (OpenSearchPPLParser.DATETIME - 60)) | (1 << (OpenSearchPPLParser.INTERVAL - 60)) | (1 << (OpenSearchPPLParser.MICROSECOND - 60)) | (1 << (OpenSearchPPLParser.MILLISECOND - 60)) | (1 << (OpenSearchPPLParser.SECOND - 60)) | (1 << (OpenSearchPPLParser.MINUTE - 60)) | (1 << (OpenSearchPPLParser.HOUR - 60)) | (1 << (OpenSearchPPLParser.DAY - 60)) | (1 << (OpenSearchPPLParser.WEEK - 60)) | (1 << (OpenSearchPPLParser.MONTH - 60)) | (1 << (OpenSearchPPLParser.QUARTER - 60)) | (1 << (OpenSearchPPLParser.YEAR - 60)) | (1 << (OpenSearchPPLParser.CONVERT_TZ - 60)))) !== 0) || ((((_la - 103)) & ~0x1F) === 0 && ((1 << (_la - 103)) & ((1 << (OpenSearchPPLParser.DOT - 103)) | (1 << (OpenSearchPPLParser.PLUS - 103)) | (1 << (OpenSearchPPLParser.MINUS - 103)) | (1 << (OpenSearchPPLParser.LT_PRTHS - 103)) | (1 << (OpenSearchPPLParser.BACKTICK - 103)) | (1 << (OpenSearchPPLParser.AVG - 103)) | (1 << (OpenSearchPPLParser.COUNT - 103)) | (1 << (OpenSearchPPLParser.MAX - 103)))) !== 0) || ((((_la - 135)) & ~0x1F) === 0 && ((1 << (_la - 135)) & ((1 << (OpenSearchPPLParser.MIN - 135)) | (1 << (OpenSearchPPLParser.SUM - 135)) | (1 << (OpenSearchPPLParser.VAR_SAMP - 135)) | (1 << (OpenSearchPPLParser.VAR_POP - 135)) | (1 << (OpenSearchPPLParser.STDDEV_SAMP - 135)) | (1 << (OpenSearchPPLParser.STDDEV_POP - 135)) | (1 << (OpenSearchPPLParser.FIRST - 135)) | (1 << (OpenSearchPPLParser.LAST - 135)) | (1 << (OpenSearchPPLParser.ABS - 135)) | (1 << (OpenSearchPPLParser.CEIL - 135)) | (1 << (OpenSearchPPLParser.CEILING - 135)))) !== 0) || ((((_la - 167)) & ~0x1F) === 0 && ((1 << (_la - 167)) & ((1 << (OpenSearchPPLParser.CONV - 167)) | (1 << (OpenSearchPPLParser.CRC32 - 167)) | (1 << (OpenSearchPPLParser.E - 167)) | (1 << (OpenSearchPPLParser.EXP - 167)) | (1 << (OpenSearchPPLParser.FLOOR - 167)) | (1 << (OpenSearchPPLParser.LN - 167)) | (1 << (OpenSearchPPLParser.LOG - 167)) | (1 << (OpenSearchPPLParser.LOG10 - 167)) | (1 << (OpenSearchPPLParser.LOG2 - 167)) | (1 << (OpenSearchPPLParser.MOD - 167)) | (1 << (OpenSearchPPLParser.PI - 167)) | (1 << (OpenSearchPPLParser.POW - 167)) | (1 << (OpenSearchPPLParser.POWER - 167)) | (1 << (OpenSearchPPLParser.RAND - 167)) | (1 << (OpenSearchPPLParser.ROUND - 167)) | (1 << (OpenSearchPPLParser.SIGN - 167)) | (1 << (OpenSearchPPLParser.SQRT - 167)) | (1 << (OpenSearchPPLParser.TRUNCATE - 167)) | (1 << (OpenSearchPPLParser.ACOS - 167)) | (1 << (OpenSearchPPLParser.ASIN - 167)) | (1 << (OpenSearchPPLParser.ATAN - 167)) | (1 << (OpenSearchPPLParser.ATAN2 - 167)) | (1 << (OpenSearchPPLParser.COS - 167)) | (1 << (OpenSearchPPLParser.COT - 167)) | (1 << (OpenSearchPPLParser.DEGREES - 167)) | (1 << (OpenSearchPPLParser.RADIANS - 167)) | (1 << (OpenSearchPPLParser.SIN - 167)) | (1 << (OpenSearchPPLParser.TAN - 167)) | (1 << (OpenSearchPPLParser.ADDDATE - 167)) | (1 << (OpenSearchPPLParser.CURDATE - 167)) | (1 << (OpenSearchPPLParser.CURRENT_DATE - 167)) | (1 << (OpenSearchPPLParser.CURRENT_TIME - 167)))) !== 0) || ((((_la - 199)) & ~0x1F) === 0 && ((1 << (_la - 199)) & ((1 << (OpenSearchPPLParser.CURRENT_TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.CURTIME - 199)) | (1 << (OpenSearchPPLParser.DATE - 199)) | (1 << (OpenSearchPPLParser.DATE_ADD - 199)) | (1 << (OpenSearchPPLParser.DATE_FORMAT - 199)) | (1 << (OpenSearchPPLParser.DATE_SUB - 199)) | (1 << (OpenSearchPPLParser.DAYNAME - 199)) | (1 << (OpenSearchPPLParser.DAYOFMONTH - 199)) | (1 << (OpenSearchPPLParser.DAYOFWEEK - 199)) | (1 << (OpenSearchPPLParser.DAYOFYEAR - 199)) | (1 << (OpenSearchPPLParser.FROM_DAYS - 199)) | (1 << (OpenSearchPPLParser.LOCALTIME - 199)) | (1 << (OpenSearchPPLParser.LOCALTIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.FROM_UNIXTIME - 199)) | (1 << (OpenSearchPPLParser.MAKEDATE - 199)) | (1 << (OpenSearchPPLParser.MAKETIME - 199)) | (1 << (OpenSearchPPLParser.MONTHNAME - 199)) | (1 << (OpenSearchPPLParser.NOW - 199)) | (1 << (OpenSearchPPLParser.PERIOD_ADD - 199)) | (1 << (OpenSearchPPLParser.PERIOD_DIFF - 199)) | (1 << (OpenSearchPPLParser.SUBDATE - 199)) | (1 << (OpenSearchPPLParser.SYSDATE - 199)) | (1 << (OpenSearchPPLParser.TIME - 199)) | (1 << (OpenSearchPPLParser.TIME_TO_SEC - 199)) | (1 << (OpenSearchPPLParser.TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.TO_DAYS - 199)) | (1 << (OpenSearchPPLParser.UTC_DATE - 199)) | (1 << (OpenSearchPPLParser.UTC_TIME - 199)) | (1 << (OpenSearchPPLParser.UTC_TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.UNIX_TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.SUBSTR - 199)) | (1 << (OpenSearchPPLParser.SUBSTRING - 199)))) !== 0) || ((((_la - 231)) & ~0x1F) === 0 && ((1 << (_la - 231)) & ((1 << (OpenSearchPPLParser.LTRIM - 231)) | (1 << (OpenSearchPPLParser.RTRIM - 231)) | (1 << (OpenSearchPPLParser.TRIM - 231)) | (1 << (OpenSearchPPLParser.LOWER - 231)) | (1 << (OpenSearchPPLParser.UPPER - 231)) | (1 << (OpenSearchPPLParser.CONCAT - 231)) | (1 << (OpenSearchPPLParser.CONCAT_WS - 231)) | (1 << (OpenSearchPPLParser.LENGTH - 231)) | (1 << (OpenSearchPPLParser.STRCMP - 231)) | (1 << (OpenSearchPPLParser.RIGHT - 231)) | (1 << (OpenSearchPPLParser.LEFT - 231)) | (1 << (OpenSearchPPLParser.ASCII - 231)) | (1 << (OpenSearchPPLParser.LOCATE - 231)) | (1 << (OpenSearchPPLParser.REPLACE - 231)) | (1 << (OpenSearchPPLParser.CAST - 231)) | (1 << (OpenSearchPPLParser.LIKE - 231)) | (1 << (OpenSearchPPLParser.ISNULL - 231)) | (1 << (OpenSearchPPLParser.ISNOTNULL - 231)) | (1 << (OpenSearchPPLParser.IFNULL - 231)) | (1 << (OpenSearchPPLParser.NULLIF - 231)) | (1 << (OpenSearchPPLParser.IF - 231)) | (1 << (OpenSearchPPLParser.TYPEOF - 231)) | (1 << (OpenSearchPPLParser.MATCH - 231)) | (1 << (OpenSearchPPLParser.MATCH_PHRASE - 231)) | (1 << (OpenSearchPPLParser.MATCH_PHRASE_PREFIX - 231)) | (1 << (OpenSearchPPLParser.MATCH_BOOL_PREFIX - 231)) | (1 << (OpenSearchPPLParser.SIMPLE_QUERY_STRING - 231)) | (1 << (OpenSearchPPLParser.MULTI_MATCH - 231)) | (1 << (OpenSearchPPLParser.QUERY_STRING - 231)))) !== 0) || ((((_la - 292)) & ~0x1F) === 0 && ((1 << (_la - 292)) & ((1 << (OpenSearchPPLParser.SPAN - 292)) | (1 << (OpenSearchPPLParser.MS - 292)) | (1 << (OpenSearchPPLParser.S - 292)) | (1 << (OpenSearchPPLParser.M - 292)) | (1 << (OpenSearchPPLParser.H - 292)) | (1 << (OpenSearchPPLParser.W - 292)) | (1 << (OpenSearchPPLParser.Q - 292)) | (1 << (OpenSearchPPLParser.Y - 292)) | (1 << (OpenSearchPPLParser.ID - 292)) | (1 << (OpenSearchPPLParser.INTEGER_LITERAL - 292)) | (1 << (OpenSearchPPLParser.DECIMAL_LITERAL - 292)) | (1 << (OpenSearchPPLParser.DQUOTA_STRING - 292)) | (1 << (OpenSearchPPLParser.SQUOTA_STRING - 292)) | (1 << (OpenSearchPPLParser.BQUOTA_STRING - 292)))) !== 0)) {
+				{
+				this.state = 206;
+				this.pplStatement();
+				}
+			}
+
+			this.state = 209;
+			this.match(OpenSearchPPLParser.EOF);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public pplStatement(): PplStatementContext {
+		let _localctx: PplStatementContext = new PplStatementContext(this._ctx, this.state);
+		this.enterRule(_localctx, 2, OpenSearchPPLParser.RULE_pplStatement);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 211;
+			this.pplCommands();
+			this.state = 216;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.PIPE) {
+				{
+				{
+				this.state = 212;
+				this.match(OpenSearchPPLParser.PIPE);
+				this.state = 213;
+				this.commands();
+				}
+				}
+				this.state = 218;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public pplCommands(): PplCommandsContext {
+		let _localctx: PplCommandsContext = new PplCommandsContext(this._ctx, this.state);
+		this.enterRule(_localctx, 4, OpenSearchPPLParser.RULE_pplCommands);
+		try {
+			this.state = 222;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.SEARCH:
+			case OpenSearchPPLParser.SOURCE:
+			case OpenSearchPPLParser.INDEX:
+			case OpenSearchPPLParser.D:
+			case OpenSearchPPLParser.NOT:
+			case OpenSearchPPLParser.TRUE:
+			case OpenSearchPPLParser.FALSE:
+			case OpenSearchPPLParser.DATETIME:
+			case OpenSearchPPLParser.INTERVAL:
+			case OpenSearchPPLParser.MICROSECOND:
+			case OpenSearchPPLParser.MILLISECOND:
+			case OpenSearchPPLParser.SECOND:
+			case OpenSearchPPLParser.MINUTE:
+			case OpenSearchPPLParser.HOUR:
+			case OpenSearchPPLParser.DAY:
+			case OpenSearchPPLParser.WEEK:
+			case OpenSearchPPLParser.MONTH:
+			case OpenSearchPPLParser.QUARTER:
+			case OpenSearchPPLParser.YEAR:
+			case OpenSearchPPLParser.CONVERT_TZ:
+			case OpenSearchPPLParser.DOT:
+			case OpenSearchPPLParser.PLUS:
+			case OpenSearchPPLParser.MINUS:
+			case OpenSearchPPLParser.LT_PRTHS:
+			case OpenSearchPPLParser.BACKTICK:
+			case OpenSearchPPLParser.AVG:
+			case OpenSearchPPLParser.COUNT:
+			case OpenSearchPPLParser.MAX:
+			case OpenSearchPPLParser.MIN:
+			case OpenSearchPPLParser.SUM:
+			case OpenSearchPPLParser.VAR_SAMP:
+			case OpenSearchPPLParser.VAR_POP:
+			case OpenSearchPPLParser.STDDEV_SAMP:
+			case OpenSearchPPLParser.STDDEV_POP:
+			case OpenSearchPPLParser.FIRST:
+			case OpenSearchPPLParser.LAST:
+			case OpenSearchPPLParser.ABS:
+			case OpenSearchPPLParser.CEIL:
+			case OpenSearchPPLParser.CEILING:
+			case OpenSearchPPLParser.CONV:
+			case OpenSearchPPLParser.CRC32:
+			case OpenSearchPPLParser.E:
+			case OpenSearchPPLParser.EXP:
+			case OpenSearchPPLParser.FLOOR:
+			case OpenSearchPPLParser.LN:
+			case OpenSearchPPLParser.LOG:
+			case OpenSearchPPLParser.LOG10:
+			case OpenSearchPPLParser.LOG2:
+			case OpenSearchPPLParser.MOD:
+			case OpenSearchPPLParser.PI:
+			case OpenSearchPPLParser.POW:
+			case OpenSearchPPLParser.POWER:
+			case OpenSearchPPLParser.RAND:
+			case OpenSearchPPLParser.ROUND:
+			case OpenSearchPPLParser.SIGN:
+			case OpenSearchPPLParser.SQRT:
+			case OpenSearchPPLParser.TRUNCATE:
+			case OpenSearchPPLParser.ACOS:
+			case OpenSearchPPLParser.ASIN:
+			case OpenSearchPPLParser.ATAN:
+			case OpenSearchPPLParser.ATAN2:
+			case OpenSearchPPLParser.COS:
+			case OpenSearchPPLParser.COT:
+			case OpenSearchPPLParser.DEGREES:
+			case OpenSearchPPLParser.RADIANS:
+			case OpenSearchPPLParser.SIN:
+			case OpenSearchPPLParser.TAN:
+			case OpenSearchPPLParser.ADDDATE:
+			case OpenSearchPPLParser.CURDATE:
+			case OpenSearchPPLParser.CURRENT_DATE:
+			case OpenSearchPPLParser.CURRENT_TIME:
+			case OpenSearchPPLParser.CURRENT_TIMESTAMP:
+			case OpenSearchPPLParser.CURTIME:
+			case OpenSearchPPLParser.DATE:
+			case OpenSearchPPLParser.DATE_ADD:
+			case OpenSearchPPLParser.DATE_FORMAT:
+			case OpenSearchPPLParser.DATE_SUB:
+			case OpenSearchPPLParser.DAYNAME:
+			case OpenSearchPPLParser.DAYOFMONTH:
+			case OpenSearchPPLParser.DAYOFWEEK:
+			case OpenSearchPPLParser.DAYOFYEAR:
+			case OpenSearchPPLParser.FROM_DAYS:
+			case OpenSearchPPLParser.LOCALTIME:
+			case OpenSearchPPLParser.LOCALTIMESTAMP:
+			case OpenSearchPPLParser.FROM_UNIXTIME:
+			case OpenSearchPPLParser.MAKEDATE:
+			case OpenSearchPPLParser.MAKETIME:
+			case OpenSearchPPLParser.MONTHNAME:
+			case OpenSearchPPLParser.NOW:
+			case OpenSearchPPLParser.PERIOD_ADD:
+			case OpenSearchPPLParser.PERIOD_DIFF:
+			case OpenSearchPPLParser.SUBDATE:
+			case OpenSearchPPLParser.SYSDATE:
+			case OpenSearchPPLParser.TIME:
+			case OpenSearchPPLParser.TIME_TO_SEC:
+			case OpenSearchPPLParser.TIMESTAMP:
+			case OpenSearchPPLParser.TO_DAYS:
+			case OpenSearchPPLParser.UTC_DATE:
+			case OpenSearchPPLParser.UTC_TIME:
+			case OpenSearchPPLParser.UTC_TIMESTAMP:
+			case OpenSearchPPLParser.UNIX_TIMESTAMP:
+			case OpenSearchPPLParser.SUBSTR:
+			case OpenSearchPPLParser.SUBSTRING:
+			case OpenSearchPPLParser.LTRIM:
+			case OpenSearchPPLParser.RTRIM:
+			case OpenSearchPPLParser.TRIM:
+			case OpenSearchPPLParser.LOWER:
+			case OpenSearchPPLParser.UPPER:
+			case OpenSearchPPLParser.CONCAT:
+			case OpenSearchPPLParser.CONCAT_WS:
+			case OpenSearchPPLParser.LENGTH:
+			case OpenSearchPPLParser.STRCMP:
+			case OpenSearchPPLParser.RIGHT:
+			case OpenSearchPPLParser.LEFT:
+			case OpenSearchPPLParser.ASCII:
+			case OpenSearchPPLParser.LOCATE:
+			case OpenSearchPPLParser.REPLACE:
+			case OpenSearchPPLParser.CAST:
+			case OpenSearchPPLParser.LIKE:
+			case OpenSearchPPLParser.ISNULL:
+			case OpenSearchPPLParser.ISNOTNULL:
+			case OpenSearchPPLParser.IFNULL:
+			case OpenSearchPPLParser.NULLIF:
+			case OpenSearchPPLParser.IF:
+			case OpenSearchPPLParser.TYPEOF:
+			case OpenSearchPPLParser.MATCH:
+			case OpenSearchPPLParser.MATCH_PHRASE:
+			case OpenSearchPPLParser.MATCH_PHRASE_PREFIX:
+			case OpenSearchPPLParser.MATCH_BOOL_PREFIX:
+			case OpenSearchPPLParser.SIMPLE_QUERY_STRING:
+			case OpenSearchPPLParser.MULTI_MATCH:
+			case OpenSearchPPLParser.QUERY_STRING:
+			case OpenSearchPPLParser.SPAN:
+			case OpenSearchPPLParser.MS:
+			case OpenSearchPPLParser.S:
+			case OpenSearchPPLParser.M:
+			case OpenSearchPPLParser.H:
+			case OpenSearchPPLParser.W:
+			case OpenSearchPPLParser.Q:
+			case OpenSearchPPLParser.Y:
+			case OpenSearchPPLParser.ID:
+			case OpenSearchPPLParser.INTEGER_LITERAL:
+			case OpenSearchPPLParser.DECIMAL_LITERAL:
+			case OpenSearchPPLParser.DQUOTA_STRING:
+			case OpenSearchPPLParser.SQUOTA_STRING:
+			case OpenSearchPPLParser.BQUOTA_STRING:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 219;
+				this.searchCommand();
+				}
+				break;
+			case OpenSearchPPLParser.DESCRIBE:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 220;
+				this.describeCommand();
+				}
+				break;
+			case OpenSearchPPLParser.SHOW:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 221;
+				this.showCatalogsCommand();
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public commands(): CommandsContext {
+		let _localctx: CommandsContext = new CommandsContext(this._ctx, this.state);
+		this.enterRule(_localctx, 6, OpenSearchPPLParser.RULE_commands);
+		try {
+			this.state = 240;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.WHERE:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 224;
+				this.whereCommand();
+				}
+				break;
+			case OpenSearchPPLParser.FIELDS:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 225;
+				this.fieldsCommand();
+				}
+				break;
+			case OpenSearchPPLParser.RENAME:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 226;
+				this.renameCommand();
+				}
+				break;
+			case OpenSearchPPLParser.STATS:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 227;
+				this.statsCommand();
+				}
+				break;
+			case OpenSearchPPLParser.DEDUP:
+				this.enterOuterAlt(_localctx, 5);
+				{
+				this.state = 228;
+				this.dedupCommand();
+				}
+				break;
+			case OpenSearchPPLParser.SORT:
+				this.enterOuterAlt(_localctx, 6);
+				{
+				this.state = 229;
+				this.sortCommand();
+				}
+				break;
+			case OpenSearchPPLParser.EVAL:
+				this.enterOuterAlt(_localctx, 7);
+				{
+				this.state = 230;
+				this.evalCommand();
+				}
+				break;
+			case OpenSearchPPLParser.HEAD:
+				this.enterOuterAlt(_localctx, 8);
+				{
+				this.state = 231;
+				this.headCommand();
+				}
+				break;
+			case OpenSearchPPLParser.TOP:
+				this.enterOuterAlt(_localctx, 9);
+				{
+				this.state = 232;
+				this.topCommand();
+				}
+				break;
+			case OpenSearchPPLParser.RARE:
+				this.enterOuterAlt(_localctx, 10);
+				{
+				this.state = 233;
+				this.rareCommand();
+				}
+				break;
+			case OpenSearchPPLParser.GROK:
+				this.enterOuterAlt(_localctx, 11);
+				{
+				this.state = 234;
+				this.grokCommand();
+				}
+				break;
+			case OpenSearchPPLParser.PARSE:
+				this.enterOuterAlt(_localctx, 12);
+				{
+				this.state = 235;
+				this.parseCommand();
+				}
+				break;
+			case OpenSearchPPLParser.PATTERNS:
+				this.enterOuterAlt(_localctx, 13);
+				{
+				this.state = 236;
+				this.patternsCommand();
+				}
+				break;
+			case OpenSearchPPLParser.KMEANS:
+				this.enterOuterAlt(_localctx, 14);
+				{
+				this.state = 237;
+				this.kmeansCommand();
+				}
+				break;
+			case OpenSearchPPLParser.AD:
+				this.enterOuterAlt(_localctx, 15);
+				{
+				this.state = 238;
+				this.adCommand();
+				}
+				break;
+			case OpenSearchPPLParser.ML:
+				this.enterOuterAlt(_localctx, 16);
+				{
+				this.state = 239;
+				this.mlCommand();
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public searchCommand(): SearchCommandContext {
+		let _localctx: SearchCommandContext = new SearchCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 8, OpenSearchPPLParser.RULE_searchCommand);
+		let _la: number;
+		try {
+			this.state = 258;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 7, this._ctx) ) {
+			case 1:
+				_localctx = new SearchFromContext(_localctx);
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 243;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+				if (_la === OpenSearchPPLParser.SEARCH) {
+					{
+					this.state = 242;
+					this.match(OpenSearchPPLParser.SEARCH);
+					}
+				}
+
+				this.state = 245;
+				this.fromClause();
+				}
+				break;
+
+			case 2:
+				_localctx = new SearchFromFilterContext(_localctx);
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 247;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+				if (_la === OpenSearchPPLParser.SEARCH) {
+					{
+					this.state = 246;
+					this.match(OpenSearchPPLParser.SEARCH);
+					}
+				}
+
+				this.state = 249;
+				this.fromClause();
+				this.state = 250;
+				this.logicalExpression(0);
+				}
+				break;
+
+			case 3:
+				_localctx = new SearchFilterFromContext(_localctx);
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 253;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+				if (_la === OpenSearchPPLParser.SEARCH) {
+					{
+					this.state = 252;
+					this.match(OpenSearchPPLParser.SEARCH);
+					}
+				}
+
+				this.state = 255;
+				this.logicalExpression(0);
+				this.state = 256;
+				this.fromClause();
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public describeCommand(): DescribeCommandContext {
+		let _localctx: DescribeCommandContext = new DescribeCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 10, OpenSearchPPLParser.RULE_describeCommand);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 260;
+			this.match(OpenSearchPPLParser.DESCRIBE);
+			this.state = 261;
+			this.tableSourceClause();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public showCatalogsCommand(): ShowCatalogsCommandContext {
+		let _localctx: ShowCatalogsCommandContext = new ShowCatalogsCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 12, OpenSearchPPLParser.RULE_showCatalogsCommand);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 263;
+			this.match(OpenSearchPPLParser.SHOW);
+			this.state = 264;
+			this.match(OpenSearchPPLParser.CATALOGS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public whereCommand(): WhereCommandContext {
+		let _localctx: WhereCommandContext = new WhereCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 14, OpenSearchPPLParser.RULE_whereCommand);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 266;
+			this.match(OpenSearchPPLParser.WHERE);
+			this.state = 267;
+			this.logicalExpression(0);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public fieldsCommand(): FieldsCommandContext {
+		let _localctx: FieldsCommandContext = new FieldsCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 16, OpenSearchPPLParser.RULE_fieldsCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 269;
+			this.match(OpenSearchPPLParser.FIELDS);
+			this.state = 271;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.PLUS || _la === OpenSearchPPLParser.MINUS) {
+				{
+				this.state = 270;
+				_la = this._input.LA(1);
+				if (!(_la === OpenSearchPPLParser.PLUS || _la === OpenSearchPPLParser.MINUS)) {
+				this._errHandler.recoverInline(this);
+				} else {
+					if (this._input.LA(1) === Token.EOF) {
+						this.matchedEOF = true;
+					}
+
+					this._errHandler.reportMatch(this);
+					this.consume();
+				}
+				}
+			}
+
+			this.state = 273;
+			this.fieldList();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public renameCommand(): RenameCommandContext {
+		let _localctx: RenameCommandContext = new RenameCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 18, OpenSearchPPLParser.RULE_renameCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 275;
+			this.match(OpenSearchPPLParser.RENAME);
+			this.state = 276;
+			this.renameClasue();
+			this.state = 281;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.COMMA) {
+				{
+				{
+				this.state = 277;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 278;
+				this.renameClasue();
+				}
+				}
+				this.state = 283;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public statsCommand(): StatsCommandContext {
+		let _localctx: StatsCommandContext = new StatsCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 20, OpenSearchPPLParser.RULE_statsCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 284;
+			this.match(OpenSearchPPLParser.STATS);
+			this.state = 288;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.PARTITIONS) {
+				{
+				this.state = 285;
+				this.match(OpenSearchPPLParser.PARTITIONS);
+				this.state = 286;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 287;
+				_localctx._partitions = this.integerLiteral();
+				}
+			}
+
+			this.state = 293;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.ALLNUM) {
+				{
+				this.state = 290;
+				this.match(OpenSearchPPLParser.ALLNUM);
+				this.state = 291;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 292;
+				_localctx._allnum = this.booleanLiteral();
+				}
+			}
+
+			this.state = 298;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.DELIM) {
+				{
+				this.state = 295;
+				this.match(OpenSearchPPLParser.DELIM);
+				this.state = 296;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 297;
+				_localctx._delim = this.stringLiteral();
+				}
+			}
+
+			this.state = 300;
+			this.statsAggTerm();
+			this.state = 305;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.COMMA) {
+				{
+				{
+				this.state = 301;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 302;
+				this.statsAggTerm();
+				}
+				}
+				this.state = 307;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			this.state = 309;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.BY) {
+				{
+				this.state = 308;
+				this.statsByClause();
+				}
+			}
+
+			this.state = 314;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.DEDUP_SPLITVALUES) {
+				{
+				this.state = 311;
+				this.match(OpenSearchPPLParser.DEDUP_SPLITVALUES);
+				this.state = 312;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 313;
+				_localctx._dedupsplit = this.booleanLiteral();
+				}
+			}
+
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public dedupCommand(): DedupCommandContext {
+		let _localctx: DedupCommandContext = new DedupCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 22, OpenSearchPPLParser.RULE_dedupCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 316;
+			this.match(OpenSearchPPLParser.DEDUP);
+			this.state = 318;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.PLUS || _la === OpenSearchPPLParser.MINUS || _la === OpenSearchPPLParser.INTEGER_LITERAL) {
+				{
+				this.state = 317;
+				_localctx._number = this.integerLiteral();
+				}
+			}
+
+			this.state = 320;
+			this.fieldList();
+			this.state = 324;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.KEEPEMPTY) {
+				{
+				this.state = 321;
+				this.match(OpenSearchPPLParser.KEEPEMPTY);
+				this.state = 322;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 323;
+				_localctx._keepempty = this.booleanLiteral();
+				}
+			}
+
+			this.state = 329;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.CONSECUTIVE) {
+				{
+				this.state = 326;
+				this.match(OpenSearchPPLParser.CONSECUTIVE);
+				this.state = 327;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 328;
+				_localctx._consecutive = this.booleanLiteral();
+				}
+			}
+
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public sortCommand(): SortCommandContext {
+		let _localctx: SortCommandContext = new SortCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 24, OpenSearchPPLParser.RULE_sortCommand);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 331;
+			this.match(OpenSearchPPLParser.SORT);
+			this.state = 332;
+			this.sortbyClause();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public evalCommand(): EvalCommandContext {
+		let _localctx: EvalCommandContext = new EvalCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 26, OpenSearchPPLParser.RULE_evalCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 334;
+			this.match(OpenSearchPPLParser.EVAL);
+			this.state = 335;
+			this.evalClause();
+			this.state = 340;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.COMMA) {
+				{
+				{
+				this.state = 336;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 337;
+				this.evalClause();
+				}
+				}
+				this.state = 342;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public headCommand(): HeadCommandContext {
+		let _localctx: HeadCommandContext = new HeadCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 28, OpenSearchPPLParser.RULE_headCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 343;
+			this.match(OpenSearchPPLParser.HEAD);
+			this.state = 345;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.PLUS || _la === OpenSearchPPLParser.MINUS || _la === OpenSearchPPLParser.INTEGER_LITERAL) {
+				{
+				this.state = 344;
+				_localctx._number = this.integerLiteral();
+				}
+			}
+
+			this.state = 349;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.FROM) {
+				{
+				this.state = 347;
+				this.match(OpenSearchPPLParser.FROM);
+				this.state = 348;
+				_localctx._from = this.integerLiteral();
+				}
+			}
+
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public topCommand(): TopCommandContext {
+		let _localctx: TopCommandContext = new TopCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 30, OpenSearchPPLParser.RULE_topCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 351;
+			this.match(OpenSearchPPLParser.TOP);
+			this.state = 353;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.PLUS || _la === OpenSearchPPLParser.MINUS || _la === OpenSearchPPLParser.INTEGER_LITERAL) {
+				{
+				this.state = 352;
+				_localctx._number = this.integerLiteral();
+				}
+			}
+
+			this.state = 355;
+			this.fieldList();
+			this.state = 357;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.BY) {
+				{
+				this.state = 356;
+				this.byClause();
+				}
+			}
+
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public rareCommand(): RareCommandContext {
+		let _localctx: RareCommandContext = new RareCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 32, OpenSearchPPLParser.RULE_rareCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 359;
+			this.match(OpenSearchPPLParser.RARE);
+			this.state = 360;
+			this.fieldList();
+			this.state = 362;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.BY) {
+				{
+				this.state = 361;
+				this.byClause();
+				}
+			}
+
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public grokCommand(): GrokCommandContext {
+		let _localctx: GrokCommandContext = new GrokCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 34, OpenSearchPPLParser.RULE_grokCommand);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 364;
+			this.match(OpenSearchPPLParser.GROK);
+			{
+			this.state = 365;
+			_localctx._source_field = this.expression();
+			}
+			{
+			this.state = 366;
+			_localctx._pattern = this.stringLiteral();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public parseCommand(): ParseCommandContext {
+		let _localctx: ParseCommandContext = new ParseCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 36, OpenSearchPPLParser.RULE_parseCommand);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 368;
+			this.match(OpenSearchPPLParser.PARSE);
+			{
+			this.state = 369;
+			_localctx._source_field = this.expression();
+			}
+			{
+			this.state = 370;
+			_localctx._pattern = this.stringLiteral();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public patternsCommand(): PatternsCommandContext {
+		let _localctx: PatternsCommandContext = new PatternsCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 38, OpenSearchPPLParser.RULE_patternsCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 372;
+			this.match(OpenSearchPPLParser.PATTERNS);
+			this.state = 376;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.PATTERN || _la === OpenSearchPPLParser.NEW_FIELD) {
+				{
+				{
+				this.state = 373;
+				this.patternsParameter();
+				}
+				}
+				this.state = 378;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			{
+			this.state = 379;
+			_localctx._source_field = this.expression();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public patternsParameter(): PatternsParameterContext {
+		let _localctx: PatternsParameterContext = new PatternsParameterContext(this._ctx, this.state);
+		this.enterRule(_localctx, 40, OpenSearchPPLParser.RULE_patternsParameter);
+		try {
+			this.state = 387;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.NEW_FIELD:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				{
+				this.state = 381;
+				this.match(OpenSearchPPLParser.NEW_FIELD);
+				this.state = 382;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 383;
+				_localctx._new_field = this.stringLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.PATTERN:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				{
+				this.state = 384;
+				this.match(OpenSearchPPLParser.PATTERN);
+				this.state = 385;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 386;
+				_localctx._pattern = this.stringLiteral();
+				}
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public patternsMethod(): PatternsMethodContext {
+		let _localctx: PatternsMethodContext = new PatternsMethodContext(this._ctx, this.state);
+		this.enterRule(_localctx, 42, OpenSearchPPLParser.RULE_patternsMethod);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 389;
+			_la = this._input.LA(1);
+			if (!(_la === OpenSearchPPLParser.REGEX || _la === OpenSearchPPLParser.PUNCT)) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public kmeansCommand(): KmeansCommandContext {
+		let _localctx: KmeansCommandContext = new KmeansCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 44, OpenSearchPPLParser.RULE_kmeansCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 391;
+			this.match(OpenSearchPPLParser.KMEANS);
+			this.state = 395;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (((((_la - 44)) & ~0x1F) === 0 && ((1 << (_la - 44)) & ((1 << (OpenSearchPPLParser.CENTROIDS - 44)) | (1 << (OpenSearchPPLParser.ITERATIONS - 44)) | (1 << (OpenSearchPPLParser.DISTANCE_TYPE - 44)))) !== 0)) {
+				{
+				{
+				this.state = 392;
+				this.kmeansParameter();
+				}
+				}
+				this.state = 397;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public kmeansParameter(): KmeansParameterContext {
+		let _localctx: KmeansParameterContext = new KmeansParameterContext(this._ctx, this.state);
+		this.enterRule(_localctx, 46, OpenSearchPPLParser.RULE_kmeansParameter);
+		try {
+			this.state = 407;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.CENTROIDS:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				{
+				this.state = 398;
+				this.match(OpenSearchPPLParser.CENTROIDS);
+				this.state = 399;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 400;
+				_localctx._centroids = this.integerLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.ITERATIONS:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				{
+				this.state = 401;
+				this.match(OpenSearchPPLParser.ITERATIONS);
+				this.state = 402;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 403;
+				_localctx._iterations = this.integerLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.DISTANCE_TYPE:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				{
+				this.state = 404;
+				this.match(OpenSearchPPLParser.DISTANCE_TYPE);
+				this.state = 405;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 406;
+				_localctx._distance_type = this.stringLiteral();
+				}
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public adCommand(): AdCommandContext {
+		let _localctx: AdCommandContext = new AdCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 48, OpenSearchPPLParser.RULE_adCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 409;
+			this.match(OpenSearchPPLParser.AD);
+			this.state = 413;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (((((_la - 47)) & ~0x1F) === 0 && ((1 << (_la - 47)) & ((1 << (OpenSearchPPLParser.NUMBER_OF_TREES - 47)) | (1 << (OpenSearchPPLParser.SHINGLE_SIZE - 47)) | (1 << (OpenSearchPPLParser.SAMPLE_SIZE - 47)) | (1 << (OpenSearchPPLParser.OUTPUT_AFTER - 47)) | (1 << (OpenSearchPPLParser.TIME_DECAY - 47)) | (1 << (OpenSearchPPLParser.ANOMALY_RATE - 47)) | (1 << (OpenSearchPPLParser.CATEGORY_FIELD - 47)) | (1 << (OpenSearchPPLParser.TIME_FIELD - 47)) | (1 << (OpenSearchPPLParser.TIME_ZONE - 47)) | (1 << (OpenSearchPPLParser.TRAINING_DATA_SIZE - 47)) | (1 << (OpenSearchPPLParser.ANOMALY_SCORE_THRESHOLD - 47)))) !== 0) || _la === OpenSearchPPLParser.DATE_FORMAT) {
+				{
+				{
+				this.state = 410;
+				this.adParameter();
+				}
+				}
+				this.state = 415;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public adParameter(): AdParameterContext {
+		let _localctx: AdParameterContext = new AdParameterContext(this._ctx, this.state);
+		this.enterRule(_localctx, 50, OpenSearchPPLParser.RULE_adParameter);
+		try {
+			this.state = 452;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.NUMBER_OF_TREES:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				{
+				this.state = 416;
+				this.match(OpenSearchPPLParser.NUMBER_OF_TREES);
+				this.state = 417;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 418;
+				_localctx._number_of_trees = this.integerLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.SHINGLE_SIZE:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				{
+				this.state = 419;
+				this.match(OpenSearchPPLParser.SHINGLE_SIZE);
+				this.state = 420;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 421;
+				_localctx._shingle_size = this.integerLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.SAMPLE_SIZE:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				{
+				this.state = 422;
+				this.match(OpenSearchPPLParser.SAMPLE_SIZE);
+				this.state = 423;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 424;
+				_localctx._sample_size = this.integerLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.OUTPUT_AFTER:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				{
+				this.state = 425;
+				this.match(OpenSearchPPLParser.OUTPUT_AFTER);
+				this.state = 426;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 427;
+				_localctx._output_after = this.integerLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.TIME_DECAY:
+				this.enterOuterAlt(_localctx, 5);
+				{
+				{
+				this.state = 428;
+				this.match(OpenSearchPPLParser.TIME_DECAY);
+				this.state = 429;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 430;
+				_localctx._time_decay = this.decimalLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.ANOMALY_RATE:
+				this.enterOuterAlt(_localctx, 6);
+				{
+				{
+				this.state = 431;
+				this.match(OpenSearchPPLParser.ANOMALY_RATE);
+				this.state = 432;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 433;
+				_localctx._anomaly_rate = this.decimalLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.CATEGORY_FIELD:
+				this.enterOuterAlt(_localctx, 7);
+				{
+				{
+				this.state = 434;
+				this.match(OpenSearchPPLParser.CATEGORY_FIELD);
+				this.state = 435;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 436;
+				_localctx._category_field = this.stringLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.TIME_FIELD:
+				this.enterOuterAlt(_localctx, 8);
+				{
+				{
+				this.state = 437;
+				this.match(OpenSearchPPLParser.TIME_FIELD);
+				this.state = 438;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 439;
+				_localctx._time_field = this.stringLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.DATE_FORMAT:
+				this.enterOuterAlt(_localctx, 9);
+				{
+				{
+				this.state = 440;
+				this.match(OpenSearchPPLParser.DATE_FORMAT);
+				this.state = 441;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 442;
+				_localctx._date_format = this.stringLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.TIME_ZONE:
+				this.enterOuterAlt(_localctx, 10);
+				{
+				{
+				this.state = 443;
+				this.match(OpenSearchPPLParser.TIME_ZONE);
+				this.state = 444;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 445;
+				_localctx._time_zone = this.stringLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.TRAINING_DATA_SIZE:
+				this.enterOuterAlt(_localctx, 11);
+				{
+				{
+				this.state = 446;
+				this.match(OpenSearchPPLParser.TRAINING_DATA_SIZE);
+				this.state = 447;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 448;
+				_localctx._training_data_size = this.integerLiteral();
+				}
+				}
+				break;
+			case OpenSearchPPLParser.ANOMALY_SCORE_THRESHOLD:
+				this.enterOuterAlt(_localctx, 12);
+				{
+				{
+				this.state = 449;
+				this.match(OpenSearchPPLParser.ANOMALY_SCORE_THRESHOLD);
+				this.state = 450;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 451;
+				_localctx._anomaly_score_threshold = this.decimalLiteral();
+				}
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public mlCommand(): MlCommandContext {
+		let _localctx: MlCommandContext = new MlCommandContext(this._ctx, this.state);
+		this.enterRule(_localctx, 52, OpenSearchPPLParser.RULE_mlCommand);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 454;
+			this.match(OpenSearchPPLParser.ML);
+			this.state = 458;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.D || ((((_la - 67)) & ~0x1F) === 0 && ((1 << (_la - 67)) & ((1 << (OpenSearchPPLParser.DATETIME - 67)) | (1 << (OpenSearchPPLParser.MICROSECOND - 67)) | (1 << (OpenSearchPPLParser.MILLISECOND - 67)) | (1 << (OpenSearchPPLParser.SECOND - 67)) | (1 << (OpenSearchPPLParser.MINUTE - 67)) | (1 << (OpenSearchPPLParser.HOUR - 67)) | (1 << (OpenSearchPPLParser.DAY - 67)) | (1 << (OpenSearchPPLParser.WEEK - 67)) | (1 << (OpenSearchPPLParser.MONTH - 67)) | (1 << (OpenSearchPPLParser.QUARTER - 67)) | (1 << (OpenSearchPPLParser.YEAR - 67)) | (1 << (OpenSearchPPLParser.CONVERT_TZ - 67)))) !== 0) || ((((_la - 103)) & ~0x1F) === 0 && ((1 << (_la - 103)) & ((1 << (OpenSearchPPLParser.DOT - 103)) | (1 << (OpenSearchPPLParser.BACKTICK - 103)) | (1 << (OpenSearchPPLParser.AVG - 103)) | (1 << (OpenSearchPPLParser.COUNT - 103)) | (1 << (OpenSearchPPLParser.MAX - 103)))) !== 0) || ((((_la - 135)) & ~0x1F) === 0 && ((1 << (_la - 135)) & ((1 << (OpenSearchPPLParser.MIN - 135)) | (1 << (OpenSearchPPLParser.SUM - 135)) | (1 << (OpenSearchPPLParser.VAR_SAMP - 135)) | (1 << (OpenSearchPPLParser.VAR_POP - 135)) | (1 << (OpenSearchPPLParser.STDDEV_SAMP - 135)) | (1 << (OpenSearchPPLParser.STDDEV_POP - 135)) | (1 << (OpenSearchPPLParser.FIRST - 135)) | (1 << (OpenSearchPPLParser.LAST - 135)) | (1 << (OpenSearchPPLParser.ABS - 135)) | (1 << (OpenSearchPPLParser.CEIL - 135)) | (1 << (OpenSearchPPLParser.CEILING - 135)))) !== 0) || ((((_la - 167)) & ~0x1F) === 0 && ((1 << (_la - 167)) & ((1 << (OpenSearchPPLParser.CONV - 167)) | (1 << (OpenSearchPPLParser.CRC32 - 167)) | (1 << (OpenSearchPPLParser.E - 167)) | (1 << (OpenSearchPPLParser.EXP - 167)) | (1 << (OpenSearchPPLParser.FLOOR - 167)) | (1 << (OpenSearchPPLParser.LN - 167)) | (1 << (OpenSearchPPLParser.LOG - 167)) | (1 << (OpenSearchPPLParser.LOG10 - 167)) | (1 << (OpenSearchPPLParser.LOG2 - 167)) | (1 << (OpenSearchPPLParser.MOD - 167)) | (1 << (OpenSearchPPLParser.PI - 167)) | (1 << (OpenSearchPPLParser.POW - 167)) | (1 << (OpenSearchPPLParser.POWER - 167)) | (1 << (OpenSearchPPLParser.RAND - 167)) | (1 << (OpenSearchPPLParser.ROUND - 167)) | (1 << (OpenSearchPPLParser.SIGN - 167)) | (1 << (OpenSearchPPLParser.SQRT - 167)) | (1 << (OpenSearchPPLParser.TRUNCATE - 167)) | (1 << (OpenSearchPPLParser.ACOS - 167)) | (1 << (OpenSearchPPLParser.ASIN - 167)) | (1 << (OpenSearchPPLParser.ATAN - 167)) | (1 << (OpenSearchPPLParser.ATAN2 - 167)) | (1 << (OpenSearchPPLParser.COS - 167)) | (1 << (OpenSearchPPLParser.COT - 167)) | (1 << (OpenSearchPPLParser.DEGREES - 167)) | (1 << (OpenSearchPPLParser.RADIANS - 167)) | (1 << (OpenSearchPPLParser.SIN - 167)) | (1 << (OpenSearchPPLParser.TAN - 167)) | (1 << (OpenSearchPPLParser.ADDDATE - 167)) | (1 << (OpenSearchPPLParser.CURDATE - 167)) | (1 << (OpenSearchPPLParser.CURRENT_DATE - 167)) | (1 << (OpenSearchPPLParser.CURRENT_TIME - 167)))) !== 0) || ((((_la - 199)) & ~0x1F) === 0 && ((1 << (_la - 199)) & ((1 << (OpenSearchPPLParser.CURRENT_TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.CURTIME - 199)) | (1 << (OpenSearchPPLParser.DATE - 199)) | (1 << (OpenSearchPPLParser.DATE_ADD - 199)) | (1 << (OpenSearchPPLParser.DATE_FORMAT - 199)) | (1 << (OpenSearchPPLParser.DATE_SUB - 199)) | (1 << (OpenSearchPPLParser.DAYNAME - 199)) | (1 << (OpenSearchPPLParser.DAYOFMONTH - 199)) | (1 << (OpenSearchPPLParser.DAYOFWEEK - 199)) | (1 << (OpenSearchPPLParser.DAYOFYEAR - 199)) | (1 << (OpenSearchPPLParser.FROM_DAYS - 199)) | (1 << (OpenSearchPPLParser.LOCALTIME - 199)) | (1 << (OpenSearchPPLParser.LOCALTIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.FROM_UNIXTIME - 199)) | (1 << (OpenSearchPPLParser.MAKEDATE - 199)) | (1 << (OpenSearchPPLParser.MAKETIME - 199)) | (1 << (OpenSearchPPLParser.MONTHNAME - 199)) | (1 << (OpenSearchPPLParser.NOW - 199)) | (1 << (OpenSearchPPLParser.PERIOD_ADD - 199)) | (1 << (OpenSearchPPLParser.PERIOD_DIFF - 199)) | (1 << (OpenSearchPPLParser.SUBDATE - 199)) | (1 << (OpenSearchPPLParser.SYSDATE - 199)) | (1 << (OpenSearchPPLParser.TIME - 199)) | (1 << (OpenSearchPPLParser.TIME_TO_SEC - 199)) | (1 << (OpenSearchPPLParser.TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.TO_DAYS - 199)) | (1 << (OpenSearchPPLParser.UTC_DATE - 199)) | (1 << (OpenSearchPPLParser.UTC_TIME - 199)) | (1 << (OpenSearchPPLParser.UTC_TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.UNIX_TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.SUBSTR - 199)) | (1 << (OpenSearchPPLParser.SUBSTRING - 199)))) !== 0) || ((((_la - 231)) & ~0x1F) === 0 && ((1 << (_la - 231)) & ((1 << (OpenSearchPPLParser.LTRIM - 231)) | (1 << (OpenSearchPPLParser.RTRIM - 231)) | (1 << (OpenSearchPPLParser.TRIM - 231)) | (1 << (OpenSearchPPLParser.LOWER - 231)) | (1 << (OpenSearchPPLParser.UPPER - 231)) | (1 << (OpenSearchPPLParser.CONCAT - 231)) | (1 << (OpenSearchPPLParser.CONCAT_WS - 231)) | (1 << (OpenSearchPPLParser.LENGTH - 231)) | (1 << (OpenSearchPPLParser.STRCMP - 231)) | (1 << (OpenSearchPPLParser.RIGHT - 231)) | (1 << (OpenSearchPPLParser.LEFT - 231)) | (1 << (OpenSearchPPLParser.ASCII - 231)) | (1 << (OpenSearchPPLParser.LOCATE - 231)) | (1 << (OpenSearchPPLParser.REPLACE - 231)))) !== 0) || ((((_la - 292)) & ~0x1F) === 0 && ((1 << (_la - 292)) & ((1 << (OpenSearchPPLParser.SPAN - 292)) | (1 << (OpenSearchPPLParser.MS - 292)) | (1 << (OpenSearchPPLParser.S - 292)) | (1 << (OpenSearchPPLParser.M - 292)) | (1 << (OpenSearchPPLParser.H - 292)) | (1 << (OpenSearchPPLParser.W - 292)) | (1 << (OpenSearchPPLParser.Q - 292)) | (1 << (OpenSearchPPLParser.Y - 292)) | (1 << (OpenSearchPPLParser.ID - 292)) | (1 << (OpenSearchPPLParser.BQUOTA_STRING - 292)))) !== 0)) {
+				{
+				{
+				this.state = 455;
+				this.mlArg();
+				}
+				}
+				this.state = 460;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public mlArg(): MlArgContext {
+		let _localctx: MlArgContext = new MlArgContext(this._ctx, this.state);
+		this.enterRule(_localctx, 54, OpenSearchPPLParser.RULE_mlArg);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			{
+			this.state = 461;
+			_localctx._argName = this.ident();
+			this.state = 462;
+			this.match(OpenSearchPPLParser.EQUAL);
+			this.state = 463;
+			_localctx._argValue = this.literalValue();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public fromClause(): FromClauseContext {
+		let _localctx: FromClauseContext = new FromClauseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 56, OpenSearchPPLParser.RULE_fromClause);
+		try {
+			this.state = 477;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 32, this._ctx) ) {
+			case 1:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 465;
+				this.match(OpenSearchPPLParser.SOURCE);
+				this.state = 466;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 467;
+				this.tableSourceClause();
+				}
+				break;
+
+			case 2:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 468;
+				this.match(OpenSearchPPLParser.INDEX);
+				this.state = 469;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 470;
+				this.tableSourceClause();
+				}
+				break;
+
+			case 3:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 471;
+				this.match(OpenSearchPPLParser.SOURCE);
+				this.state = 472;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 473;
+				this.tableFunction();
+				}
+				break;
+
+			case 4:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 474;
+				this.match(OpenSearchPPLParser.INDEX);
+				this.state = 475;
+				this.match(OpenSearchPPLParser.EQUAL);
+				this.state = 476;
+				this.tableFunction();
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public tableSourceClause(): TableSourceClauseContext {
+		let _localctx: TableSourceClauseContext = new TableSourceClauseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 58, OpenSearchPPLParser.RULE_tableSourceClause);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 479;
+			this.tableSource();
+			this.state = 484;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.COMMA) {
+				{
+				{
+				this.state = 480;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 481;
+				this.tableSource();
+				}
+				}
+				this.state = 486;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public renameClasue(): RenameClasueContext {
+		let _localctx: RenameClasueContext = new RenameClasueContext(this._ctx, this.state);
+		this.enterRule(_localctx, 60, OpenSearchPPLParser.RULE_renameClasue);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 487;
+			_localctx._orignalField = this.wcFieldExpression();
+			this.state = 488;
+			this.match(OpenSearchPPLParser.AS);
+			this.state = 489;
+			_localctx._renamedField = this.wcFieldExpression();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public byClause(): ByClauseContext {
+		let _localctx: ByClauseContext = new ByClauseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 62, OpenSearchPPLParser.RULE_byClause);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 491;
+			this.match(OpenSearchPPLParser.BY);
+			this.state = 492;
+			this.fieldList();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public statsByClause(): StatsByClauseContext {
+		let _localctx: StatsByClauseContext = new StatsByClauseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 64, OpenSearchPPLParser.RULE_statsByClause);
+		try {
+			this.state = 503;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 34, this._ctx) ) {
+			case 1:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 494;
+				this.match(OpenSearchPPLParser.BY);
+				this.state = 495;
+				this.fieldList();
+				}
+				break;
+
+			case 2:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 496;
+				this.match(OpenSearchPPLParser.BY);
+				this.state = 497;
+				this.bySpanClause();
+				}
+				break;
+
+			case 3:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 498;
+				this.match(OpenSearchPPLParser.BY);
+				this.state = 499;
+				this.bySpanClause();
+				this.state = 500;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 501;
+				this.fieldList();
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public bySpanClause(): BySpanClauseContext {
+		let _localctx: BySpanClauseContext = new BySpanClauseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 66, OpenSearchPPLParser.RULE_bySpanClause);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 505;
+			this.spanClause();
+			this.state = 508;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.AS) {
+				{
+				this.state = 506;
+				this.match(OpenSearchPPLParser.AS);
+				this.state = 507;
+				_localctx._alias = this.qualifiedName();
+				}
+			}
+
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public spanClause(): SpanClauseContext {
+		let _localctx: SpanClauseContext = new SpanClauseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 68, OpenSearchPPLParser.RULE_spanClause);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 510;
+			this.match(OpenSearchPPLParser.SPAN);
+			this.state = 511;
+			this.match(OpenSearchPPLParser.LT_PRTHS);
+			this.state = 512;
+			this.fieldExpression();
+			this.state = 513;
+			this.match(OpenSearchPPLParser.COMMA);
+			this.state = 514;
+			_localctx._value = this.literalValue();
+			this.state = 516;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.D || ((((_la - 70)) & ~0x1F) === 0 && ((1 << (_la - 70)) & ((1 << (OpenSearchPPLParser.MILLISECOND - 70)) | (1 << (OpenSearchPPLParser.SECOND - 70)) | (1 << (OpenSearchPPLParser.MINUTE - 70)) | (1 << (OpenSearchPPLParser.HOUR - 70)) | (1 << (OpenSearchPPLParser.DAY - 70)) | (1 << (OpenSearchPPLParser.WEEK - 70)) | (1 << (OpenSearchPPLParser.MONTH - 70)) | (1 << (OpenSearchPPLParser.QUARTER - 70)) | (1 << (OpenSearchPPLParser.YEAR - 70)))) !== 0) || ((((_la - 293)) & ~0x1F) === 0 && ((1 << (_la - 293)) & ((1 << (OpenSearchPPLParser.MS - 293)) | (1 << (OpenSearchPPLParser.S - 293)) | (1 << (OpenSearchPPLParser.M - 293)) | (1 << (OpenSearchPPLParser.H - 293)) | (1 << (OpenSearchPPLParser.W - 293)) | (1 << (OpenSearchPPLParser.Q - 293)) | (1 << (OpenSearchPPLParser.Y - 293)))) !== 0)) {
+				{
+				this.state = 515;
+				_localctx._unit = this.timespanUnit();
+				}
+			}
+
+			this.state = 518;
+			this.match(OpenSearchPPLParser.RT_PRTHS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public sortbyClause(): SortbyClauseContext {
+		let _localctx: SortbyClauseContext = new SortbyClauseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 70, OpenSearchPPLParser.RULE_sortbyClause);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 520;
+			this.sortField();
+			this.state = 525;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.COMMA) {
+				{
+				{
+				this.state = 521;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 522;
+				this.sortField();
+				}
+				}
+				this.state = 527;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public evalClause(): EvalClauseContext {
+		let _localctx: EvalClauseContext = new EvalClauseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 72, OpenSearchPPLParser.RULE_evalClause);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 528;
+			this.fieldExpression();
+			this.state = 529;
+			this.match(OpenSearchPPLParser.EQUAL);
+			this.state = 530;
+			this.expression();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public statsAggTerm(): StatsAggTermContext {
+		let _localctx: StatsAggTermContext = new StatsAggTermContext(this._ctx, this.state);
+		this.enterRule(_localctx, 74, OpenSearchPPLParser.RULE_statsAggTerm);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 532;
+			this.statsFunction();
+			this.state = 535;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.AS) {
+				{
+				this.state = 533;
+				this.match(OpenSearchPPLParser.AS);
+				this.state = 534;
+				_localctx._alias = this.wcFieldExpression();
+				}
+			}
+
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public statsFunction(): StatsFunctionContext {
+		let _localctx: StatsFunctionContext = new StatsFunctionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 76, OpenSearchPPLParser.RULE_statsFunction);
+		let _la: number;
+		try {
+			this.state = 552;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 39, this._ctx) ) {
+			case 1:
+				_localctx = new StatsFunctionCallContext(_localctx);
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 537;
+				this.statsFunctionName();
+				this.state = 538;
+				this.match(OpenSearchPPLParser.LT_PRTHS);
+				this.state = 539;
+				this.valueExpression(0);
+				this.state = 540;
+				this.match(OpenSearchPPLParser.RT_PRTHS);
+				}
+				break;
+
+			case 2:
+				_localctx = new CountAllFunctionCallContext(_localctx);
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 542;
+				this.match(OpenSearchPPLParser.COUNT);
+				this.state = 543;
+				this.match(OpenSearchPPLParser.LT_PRTHS);
+				this.state = 544;
+				this.match(OpenSearchPPLParser.RT_PRTHS);
+				}
+				break;
+
+			case 3:
+				_localctx = new DistinctCountFunctionCallContext(_localctx);
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 545;
+				_la = this._input.LA(1);
+				if (!(_la === OpenSearchPPLParser.DISTINCT_COUNT || _la === OpenSearchPPLParser.DC)) {
+				this._errHandler.recoverInline(this);
+				} else {
+					if (this._input.LA(1) === Token.EOF) {
+						this.matchedEOF = true;
+					}
+
+					this._errHandler.reportMatch(this);
+					this.consume();
+				}
+				this.state = 546;
+				this.match(OpenSearchPPLParser.LT_PRTHS);
+				this.state = 547;
+				this.valueExpression(0);
+				this.state = 548;
+				this.match(OpenSearchPPLParser.RT_PRTHS);
+				}
+				break;
+
+			case 4:
+				_localctx = new PercentileAggFunctionCallContext(_localctx);
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 550;
+				this.percentileAggFunction();
+				}
+				break;
+
+			case 5:
+				_localctx = new TakeAggFunctionCallContext(_localctx);
+				this.enterOuterAlt(_localctx, 5);
+				{
+				this.state = 551;
+				this.takeAggFunction();
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public statsFunctionName(): StatsFunctionNameContext {
+		let _localctx: StatsFunctionNameContext = new StatsFunctionNameContext(this._ctx, this.state);
+		this.enterRule(_localctx, 78, OpenSearchPPLParser.RULE_statsFunctionName);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 554;
+			_la = this._input.LA(1);
+			if (!(((((_la - 127)) & ~0x1F) === 0 && ((1 << (_la - 127)) & ((1 << (OpenSearchPPLParser.AVG - 127)) | (1 << (OpenSearchPPLParser.COUNT - 127)) | (1 << (OpenSearchPPLParser.MAX - 127)) | (1 << (OpenSearchPPLParser.MIN - 127)) | (1 << (OpenSearchPPLParser.SUM - 127)) | (1 << (OpenSearchPPLParser.VAR_SAMP - 127)) | (1 << (OpenSearchPPLParser.VAR_POP - 127)) | (1 << (OpenSearchPPLParser.STDDEV_SAMP - 127)) | (1 << (OpenSearchPPLParser.STDDEV_POP - 127)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public takeAggFunction(): TakeAggFunctionContext {
+		let _localctx: TakeAggFunctionContext = new TakeAggFunctionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 80, OpenSearchPPLParser.RULE_takeAggFunction);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 556;
+			this.match(OpenSearchPPLParser.TAKE);
+			this.state = 557;
+			this.match(OpenSearchPPLParser.LT_PRTHS);
+			this.state = 558;
+			this.fieldExpression();
+			this.state = 561;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.COMMA) {
+				{
+				this.state = 559;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 560;
+				_localctx._size = this.integerLiteral();
+				}
+			}
+
+			this.state = 563;
+			this.match(OpenSearchPPLParser.RT_PRTHS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public percentileAggFunction(): PercentileAggFunctionContext {
+		let _localctx: PercentileAggFunctionContext = new PercentileAggFunctionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 82, OpenSearchPPLParser.RULE_percentileAggFunction);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 565;
+			this.match(OpenSearchPPLParser.PERCENTILE);
+			this.state = 566;
+			this.match(OpenSearchPPLParser.LESS);
+			this.state = 567;
+			_localctx._value = this.integerLiteral();
+			this.state = 568;
+			this.match(OpenSearchPPLParser.GREATER);
+			this.state = 569;
+			this.match(OpenSearchPPLParser.LT_PRTHS);
+			this.state = 570;
+			_localctx._aggField = this.fieldExpression();
+			this.state = 571;
+			this.match(OpenSearchPPLParser.RT_PRTHS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public expression(): ExpressionContext {
+		let _localctx: ExpressionContext = new ExpressionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 84, OpenSearchPPLParser.RULE_expression);
+		try {
+			this.state = 576;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 41, this._ctx) ) {
+			case 1:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 573;
+				this.logicalExpression(0);
+				}
+				break;
+
+			case 2:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 574;
+				this.comparisonExpression();
+				}
+				break;
+
+			case 3:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 575;
+				this.valueExpression(0);
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+
+	public logicalExpression(): LogicalExpressionContext;
+	public logicalExpression(_p: number): LogicalExpressionContext;
+	// @RuleVersion(0)
+	public logicalExpression(_p?: number): LogicalExpressionContext {
+		if (_p === undefined) {
+			_p = 0;
+		}
+
+		let _parentctx: ParserRuleContext = this._ctx;
+		let _parentState: number = this.state;
+		let _localctx: LogicalExpressionContext = new LogicalExpressionContext(this._ctx, _parentState);
+		let _prevctx: LogicalExpressionContext = _localctx;
+		let _startState: number = 86;
+		this.enterRecursionRule(_localctx, 86, OpenSearchPPLParser.RULE_logicalExpression, _p);
+		let _la: number;
+		try {
+			let _alt: number;
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 584;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 42, this._ctx) ) {
+			case 1:
+				{
+				_localctx = new ComparsionContext(_localctx);
+				this._ctx = _localctx;
+				_prevctx = _localctx;
+
+				this.state = 579;
+				this.comparisonExpression();
+				}
+				break;
+
+			case 2:
+				{
+				_localctx = new LogicalNotContext(_localctx);
+				this._ctx = _localctx;
+				_prevctx = _localctx;
+				this.state = 580;
+				this.match(OpenSearchPPLParser.NOT);
+				this.state = 581;
+				this.logicalExpression(6);
+				}
+				break;
+
+			case 3:
+				{
+				_localctx = new BooleanExprContext(_localctx);
+				this._ctx = _localctx;
+				_prevctx = _localctx;
+				this.state = 582;
+				this.booleanExpression();
+				}
+				break;
+
+			case 4:
+				{
+				_localctx = new RelevanceExprContext(_localctx);
+				this._ctx = _localctx;
+				_prevctx = _localctx;
+				this.state = 583;
+				this.relevanceExpression();
+				}
+				break;
+			}
+			this._ctx._stop = this._input.tryLT(-1);
+			this.state = 599;
+			this._errHandler.sync(this);
+			_alt = this.interpreter.adaptivePredict(this._input, 45, this._ctx);
+			while (_alt !== 2 && _alt !== ATN.INVALID_ALT_NUMBER) {
+				if (_alt === 1) {
+					if (this._parseListeners != null) {
+						this.triggerExitRuleEvent();
+					}
+					_prevctx = _localctx;
+					{
+					this.state = 597;
+					this._errHandler.sync(this);
+					switch ( this.interpreter.adaptivePredict(this._input, 44, this._ctx) ) {
+					case 1:
+						{
+						_localctx = new LogicalOrContext(new LogicalExpressionContext(_parentctx, _parentState));
+						(_localctx as LogicalOrContext)._left = _prevctx;
+						this.pushNewRecursionContext(_localctx, _startState, OpenSearchPPLParser.RULE_logicalExpression);
+						this.state = 586;
+						if (!(this.precpred(this._ctx, 5))) {
+							throw this.createFailedPredicateException("this.precpred(this._ctx, 5)");
+						}
+						this.state = 587;
+						this.match(OpenSearchPPLParser.OR);
+						this.state = 588;
+						(_localctx as LogicalOrContext)._right = this.logicalExpression(6);
+						}
+						break;
+
+					case 2:
+						{
+						_localctx = new LogicalAndContext(new LogicalExpressionContext(_parentctx, _parentState));
+						(_localctx as LogicalAndContext)._left = _prevctx;
+						this.pushNewRecursionContext(_localctx, _startState, OpenSearchPPLParser.RULE_logicalExpression);
+						this.state = 589;
+						if (!(this.precpred(this._ctx, 4))) {
+							throw this.createFailedPredicateException("this.precpred(this._ctx, 4)");
+						}
+						this.state = 591;
+						this._errHandler.sync(this);
+						_la = this._input.LA(1);
+						if (_la === OpenSearchPPLParser.AND) {
+							{
+							this.state = 590;
+							this.match(OpenSearchPPLParser.AND);
+							}
+						}
+
+						this.state = 593;
+						(_localctx as LogicalAndContext)._right = this.logicalExpression(5);
+						}
+						break;
+
+					case 3:
+						{
+						_localctx = new LogicalXorContext(new LogicalExpressionContext(_parentctx, _parentState));
+						(_localctx as LogicalXorContext)._left = _prevctx;
+						this.pushNewRecursionContext(_localctx, _startState, OpenSearchPPLParser.RULE_logicalExpression);
+						this.state = 594;
+						if (!(this.precpred(this._ctx, 3))) {
+							throw this.createFailedPredicateException("this.precpred(this._ctx, 3)");
+						}
+						this.state = 595;
+						this.match(OpenSearchPPLParser.XOR);
+						this.state = 596;
+						(_localctx as LogicalXorContext)._right = this.logicalExpression(4);
+						}
+						break;
+					}
+					}
+				}
+				this.state = 601;
+				this._errHandler.sync(this);
+				_alt = this.interpreter.adaptivePredict(this._input, 45, this._ctx);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.unrollRecursionContexts(_parentctx);
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public comparisonExpression(): ComparisonExpressionContext {
+		let _localctx: ComparisonExpressionContext = new ComparisonExpressionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 88, OpenSearchPPLParser.RULE_comparisonExpression);
+		try {
+			this.state = 610;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 46, this._ctx) ) {
+			case 1:
+				_localctx = new CompareExprContext(_localctx);
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 602;
+				(_localctx as CompareExprContext)._left = this.valueExpression(0);
+				this.state = 603;
+				this.comparisonOperator();
+				this.state = 604;
+				(_localctx as CompareExprContext)._right = this.valueExpression(0);
+				}
+				break;
+
+			case 2:
+				_localctx = new InExprContext(_localctx);
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 606;
+				this.valueExpression(0);
+				this.state = 607;
+				this.match(OpenSearchPPLParser.IN);
+				this.state = 608;
+				this.valueList();
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+
+	public valueExpression(): ValueExpressionContext;
+	public valueExpression(_p: number): ValueExpressionContext;
+	// @RuleVersion(0)
+	public valueExpression(_p?: number): ValueExpressionContext {
+		if (_p === undefined) {
+			_p = 0;
+		}
+
+		let _parentctx: ParserRuleContext = this._ctx;
+		let _parentState: number = this.state;
+		let _localctx: ValueExpressionContext = new ValueExpressionContext(this._ctx, _parentState);
+		let _prevctx: ValueExpressionContext = _localctx;
+		let _startState: number = 90;
+		this.enterRecursionRule(_localctx, 90, OpenSearchPPLParser.RULE_valueExpression, _p);
+		try {
+			let _alt: number;
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 620;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.LT_PRTHS:
+				{
+				_localctx = new ParentheticBinaryArithmeticContext(_localctx);
+				this._ctx = _localctx;
+				_prevctx = _localctx;
+
+				this.state = 613;
+				this.match(OpenSearchPPLParser.LT_PRTHS);
+				this.state = 614;
+				(_localctx as ParentheticBinaryArithmeticContext)._left = this.valueExpression(0);
+				this.state = 615;
+				this.binaryOperator();
+				this.state = 616;
+				(_localctx as ParentheticBinaryArithmeticContext)._right = this.valueExpression(0);
+				this.state = 617;
+				this.match(OpenSearchPPLParser.RT_PRTHS);
+				}
+				break;
+			case OpenSearchPPLParser.D:
+			case OpenSearchPPLParser.TRUE:
+			case OpenSearchPPLParser.FALSE:
+			case OpenSearchPPLParser.DATETIME:
+			case OpenSearchPPLParser.INTERVAL:
+			case OpenSearchPPLParser.MICROSECOND:
+			case OpenSearchPPLParser.MILLISECOND:
+			case OpenSearchPPLParser.SECOND:
+			case OpenSearchPPLParser.MINUTE:
+			case OpenSearchPPLParser.HOUR:
+			case OpenSearchPPLParser.DAY:
+			case OpenSearchPPLParser.WEEK:
+			case OpenSearchPPLParser.MONTH:
+			case OpenSearchPPLParser.QUARTER:
+			case OpenSearchPPLParser.YEAR:
+			case OpenSearchPPLParser.CONVERT_TZ:
+			case OpenSearchPPLParser.DOT:
+			case OpenSearchPPLParser.PLUS:
+			case OpenSearchPPLParser.MINUS:
+			case OpenSearchPPLParser.BACKTICK:
+			case OpenSearchPPLParser.AVG:
+			case OpenSearchPPLParser.COUNT:
+			case OpenSearchPPLParser.MAX:
+			case OpenSearchPPLParser.MIN:
+			case OpenSearchPPLParser.SUM:
+			case OpenSearchPPLParser.VAR_SAMP:
+			case OpenSearchPPLParser.VAR_POP:
+			case OpenSearchPPLParser.STDDEV_SAMP:
+			case OpenSearchPPLParser.STDDEV_POP:
+			case OpenSearchPPLParser.FIRST:
+			case OpenSearchPPLParser.LAST:
+			case OpenSearchPPLParser.ABS:
+			case OpenSearchPPLParser.CEIL:
+			case OpenSearchPPLParser.CEILING:
+			case OpenSearchPPLParser.CONV:
+			case OpenSearchPPLParser.CRC32:
+			case OpenSearchPPLParser.E:
+			case OpenSearchPPLParser.EXP:
+			case OpenSearchPPLParser.FLOOR:
+			case OpenSearchPPLParser.LN:
+			case OpenSearchPPLParser.LOG:
+			case OpenSearchPPLParser.LOG10:
+			case OpenSearchPPLParser.LOG2:
+			case OpenSearchPPLParser.MOD:
+			case OpenSearchPPLParser.PI:
+			case OpenSearchPPLParser.POW:
+			case OpenSearchPPLParser.POWER:
+			case OpenSearchPPLParser.RAND:
+			case OpenSearchPPLParser.ROUND:
+			case OpenSearchPPLParser.SIGN:
+			case OpenSearchPPLParser.SQRT:
+			case OpenSearchPPLParser.TRUNCATE:
+			case OpenSearchPPLParser.ACOS:
+			case OpenSearchPPLParser.ASIN:
+			case OpenSearchPPLParser.ATAN:
+			case OpenSearchPPLParser.ATAN2:
+			case OpenSearchPPLParser.COS:
+			case OpenSearchPPLParser.COT:
+			case OpenSearchPPLParser.DEGREES:
+			case OpenSearchPPLParser.RADIANS:
+			case OpenSearchPPLParser.SIN:
+			case OpenSearchPPLParser.TAN:
+			case OpenSearchPPLParser.ADDDATE:
+			case OpenSearchPPLParser.CURDATE:
+			case OpenSearchPPLParser.CURRENT_DATE:
+			case OpenSearchPPLParser.CURRENT_TIME:
+			case OpenSearchPPLParser.CURRENT_TIMESTAMP:
+			case OpenSearchPPLParser.CURTIME:
+			case OpenSearchPPLParser.DATE:
+			case OpenSearchPPLParser.DATE_ADD:
+			case OpenSearchPPLParser.DATE_FORMAT:
+			case OpenSearchPPLParser.DATE_SUB:
+			case OpenSearchPPLParser.DAYNAME:
+			case OpenSearchPPLParser.DAYOFMONTH:
+			case OpenSearchPPLParser.DAYOFWEEK:
+			case OpenSearchPPLParser.DAYOFYEAR:
+			case OpenSearchPPLParser.FROM_DAYS:
+			case OpenSearchPPLParser.LOCALTIME:
+			case OpenSearchPPLParser.LOCALTIMESTAMP:
+			case OpenSearchPPLParser.FROM_UNIXTIME:
+			case OpenSearchPPLParser.MAKEDATE:
+			case OpenSearchPPLParser.MAKETIME:
+			case OpenSearchPPLParser.MONTHNAME:
+			case OpenSearchPPLParser.NOW:
+			case OpenSearchPPLParser.PERIOD_ADD:
+			case OpenSearchPPLParser.PERIOD_DIFF:
+			case OpenSearchPPLParser.SUBDATE:
+			case OpenSearchPPLParser.SYSDATE:
+			case OpenSearchPPLParser.TIME:
+			case OpenSearchPPLParser.TIME_TO_SEC:
+			case OpenSearchPPLParser.TIMESTAMP:
+			case OpenSearchPPLParser.TO_DAYS:
+			case OpenSearchPPLParser.UTC_DATE:
+			case OpenSearchPPLParser.UTC_TIME:
+			case OpenSearchPPLParser.UTC_TIMESTAMP:
+			case OpenSearchPPLParser.UNIX_TIMESTAMP:
+			case OpenSearchPPLParser.SUBSTR:
+			case OpenSearchPPLParser.SUBSTRING:
+			case OpenSearchPPLParser.LTRIM:
+			case OpenSearchPPLParser.RTRIM:
+			case OpenSearchPPLParser.TRIM:
+			case OpenSearchPPLParser.LOWER:
+			case OpenSearchPPLParser.UPPER:
+			case OpenSearchPPLParser.CONCAT:
+			case OpenSearchPPLParser.CONCAT_WS:
+			case OpenSearchPPLParser.LENGTH:
+			case OpenSearchPPLParser.STRCMP:
+			case OpenSearchPPLParser.RIGHT:
+			case OpenSearchPPLParser.LEFT:
+			case OpenSearchPPLParser.ASCII:
+			case OpenSearchPPLParser.LOCATE:
+			case OpenSearchPPLParser.REPLACE:
+			case OpenSearchPPLParser.CAST:
+			case OpenSearchPPLParser.LIKE:
+			case OpenSearchPPLParser.ISNULL:
+			case OpenSearchPPLParser.ISNOTNULL:
+			case OpenSearchPPLParser.IFNULL:
+			case OpenSearchPPLParser.NULLIF:
+			case OpenSearchPPLParser.IF:
+			case OpenSearchPPLParser.TYPEOF:
+			case OpenSearchPPLParser.SPAN:
+			case OpenSearchPPLParser.MS:
+			case OpenSearchPPLParser.S:
+			case OpenSearchPPLParser.M:
+			case OpenSearchPPLParser.H:
+			case OpenSearchPPLParser.W:
+			case OpenSearchPPLParser.Q:
+			case OpenSearchPPLParser.Y:
+			case OpenSearchPPLParser.ID:
+			case OpenSearchPPLParser.INTEGER_LITERAL:
+			case OpenSearchPPLParser.DECIMAL_LITERAL:
+			case OpenSearchPPLParser.DQUOTA_STRING:
+			case OpenSearchPPLParser.SQUOTA_STRING:
+			case OpenSearchPPLParser.BQUOTA_STRING:
+				{
+				_localctx = new ValueExpressionDefaultContext(_localctx);
+				this._ctx = _localctx;
+				_prevctx = _localctx;
+				this.state = 619;
+				this.primaryExpression();
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+			this._ctx._stop = this._input.tryLT(-1);
+			this.state = 628;
+			this._errHandler.sync(this);
+			_alt = this.interpreter.adaptivePredict(this._input, 48, this._ctx);
+			while (_alt !== 2 && _alt !== ATN.INVALID_ALT_NUMBER) {
+				if (_alt === 1) {
+					if (this._parseListeners != null) {
+						this.triggerExitRuleEvent();
+					}
+					_prevctx = _localctx;
+					{
+					{
+					_localctx = new BinaryArithmeticContext(new ValueExpressionContext(_parentctx, _parentState));
+					(_localctx as BinaryArithmeticContext)._left = _prevctx;
+					this.pushNewRecursionContext(_localctx, _startState, OpenSearchPPLParser.RULE_valueExpression);
+					this.state = 622;
+					if (!(this.precpred(this._ctx, 3))) {
+						throw this.createFailedPredicateException("this.precpred(this._ctx, 3)");
+					}
+					this.state = 623;
+					this.binaryOperator();
+					this.state = 624;
+					(_localctx as BinaryArithmeticContext)._right = this.valueExpression(4);
+					}
+					}
+				}
+				this.state = 630;
+				this._errHandler.sync(this);
+				_alt = this.interpreter.adaptivePredict(this._input, 48, this._ctx);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.unrollRecursionContexts(_parentctx);
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public primaryExpression(): PrimaryExpressionContext {
+		let _localctx: PrimaryExpressionContext = new PrimaryExpressionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 92, OpenSearchPPLParser.RULE_primaryExpression);
+		try {
+			this.state = 636;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 49, this._ctx) ) {
+			case 1:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 631;
+				this.evalFunctionCall();
+				}
+				break;
+
+			case 2:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 632;
+				this.dataTypeFunctionCall();
+				}
+				break;
+
+			case 3:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 633;
+				this.fieldExpression();
+				}
+				break;
+
+			case 4:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 634;
+				this.literalValue();
+				}
+				break;
+
+			case 5:
+				this.enterOuterAlt(_localctx, 5);
+				{
+				this.state = 635;
+				this.constantFunction();
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public constantFunction(): ConstantFunctionContext {
+		let _localctx: ConstantFunctionContext = new ConstantFunctionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 94, OpenSearchPPLParser.RULE_constantFunction);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 638;
+			this.constantFunctionName();
+			this.state = 639;
+			this.match(OpenSearchPPLParser.LT_PRTHS);
+			this.state = 641;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 50, this._ctx) ) {
+			case 1:
+				{
+				this.state = 640;
+				this.functionArgs();
+				}
+				break;
+			}
+			this.state = 643;
+			this.match(OpenSearchPPLParser.RT_PRTHS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public booleanExpression(): BooleanExpressionContext {
+		let _localctx: BooleanExpressionContext = new BooleanExpressionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 96, OpenSearchPPLParser.RULE_booleanExpression);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 645;
+			this.booleanFunctionCall();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public relevanceExpression(): RelevanceExpressionContext {
+		let _localctx: RelevanceExpressionContext = new RelevanceExpressionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 98, OpenSearchPPLParser.RULE_relevanceExpression);
+		try {
+			this.state = 649;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.MATCH:
+			case OpenSearchPPLParser.MATCH_PHRASE:
+			case OpenSearchPPLParser.MATCH_PHRASE_PREFIX:
+			case OpenSearchPPLParser.MATCH_BOOL_PREFIX:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 647;
+				this.singleFieldRelevanceFunction();
+				}
+				break;
+			case OpenSearchPPLParser.SIMPLE_QUERY_STRING:
+			case OpenSearchPPLParser.MULTI_MATCH:
+			case OpenSearchPPLParser.QUERY_STRING:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 648;
+				this.multiFieldRelevanceFunction();
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public singleFieldRelevanceFunction(): SingleFieldRelevanceFunctionContext {
+		let _localctx: SingleFieldRelevanceFunctionContext = new SingleFieldRelevanceFunctionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 100, OpenSearchPPLParser.RULE_singleFieldRelevanceFunction);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 651;
+			this.singleFieldRelevanceFunctionName();
+			this.state = 652;
+			this.match(OpenSearchPPLParser.LT_PRTHS);
+			this.state = 653;
+			_localctx._field = this.relevanceField();
+			this.state = 654;
+			this.match(OpenSearchPPLParser.COMMA);
+			this.state = 655;
+			_localctx._query = this.relevanceQuery();
+			this.state = 660;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.COMMA) {
+				{
+				{
+				this.state = 656;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 657;
+				this.relevanceArg();
+				}
+				}
+				this.state = 662;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			this.state = 663;
+			this.match(OpenSearchPPLParser.RT_PRTHS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public multiFieldRelevanceFunction(): MultiFieldRelevanceFunctionContext {
+		let _localctx: MultiFieldRelevanceFunctionContext = new MultiFieldRelevanceFunctionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 102, OpenSearchPPLParser.RULE_multiFieldRelevanceFunction);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 665;
+			this.multiFieldRelevanceFunctionName();
+			this.state = 666;
+			this.match(OpenSearchPPLParser.LT_PRTHS);
+			this.state = 667;
+			this.match(OpenSearchPPLParser.LT_SQR_PRTHS);
+			this.state = 668;
+			_localctx._field = this.relevanceFieldAndWeight();
+			this.state = 673;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.COMMA) {
+				{
+				{
+				this.state = 669;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 670;
+				_localctx._field = this.relevanceFieldAndWeight();
+				}
+				}
+				this.state = 675;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			this.state = 676;
+			this.match(OpenSearchPPLParser.RT_SQR_PRTHS);
+			this.state = 677;
+			this.match(OpenSearchPPLParser.COMMA);
+			this.state = 678;
+			_localctx._query = this.relevanceQuery();
+			this.state = 683;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.COMMA) {
+				{
+				{
+				this.state = 679;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 680;
+				this.relevanceArg();
+				}
+				}
+				this.state = 685;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			this.state = 686;
+			this.match(OpenSearchPPLParser.RT_PRTHS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public tableSource(): TableSourceContext {
+		let _localctx: TableSourceContext = new TableSourceContext(this._ctx, this.state);
+		this.enterRule(_localctx, 104, OpenSearchPPLParser.RULE_tableSource);
+		try {
+			this.state = 690;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.D:
+			case OpenSearchPPLParser.DATETIME:
+			case OpenSearchPPLParser.MICROSECOND:
+			case OpenSearchPPLParser.MILLISECOND:
+			case OpenSearchPPLParser.SECOND:
+			case OpenSearchPPLParser.MINUTE:
+			case OpenSearchPPLParser.HOUR:
+			case OpenSearchPPLParser.DAY:
+			case OpenSearchPPLParser.WEEK:
+			case OpenSearchPPLParser.MONTH:
+			case OpenSearchPPLParser.QUARTER:
+			case OpenSearchPPLParser.YEAR:
+			case OpenSearchPPLParser.CONVERT_TZ:
+			case OpenSearchPPLParser.DOT:
+			case OpenSearchPPLParser.BACKTICK:
+			case OpenSearchPPLParser.AVG:
+			case OpenSearchPPLParser.COUNT:
+			case OpenSearchPPLParser.MAX:
+			case OpenSearchPPLParser.MIN:
+			case OpenSearchPPLParser.SUM:
+			case OpenSearchPPLParser.VAR_SAMP:
+			case OpenSearchPPLParser.VAR_POP:
+			case OpenSearchPPLParser.STDDEV_SAMP:
+			case OpenSearchPPLParser.STDDEV_POP:
+			case OpenSearchPPLParser.FIRST:
+			case OpenSearchPPLParser.LAST:
+			case OpenSearchPPLParser.ABS:
+			case OpenSearchPPLParser.CEIL:
+			case OpenSearchPPLParser.CEILING:
+			case OpenSearchPPLParser.CONV:
+			case OpenSearchPPLParser.CRC32:
+			case OpenSearchPPLParser.E:
+			case OpenSearchPPLParser.EXP:
+			case OpenSearchPPLParser.FLOOR:
+			case OpenSearchPPLParser.LN:
+			case OpenSearchPPLParser.LOG:
+			case OpenSearchPPLParser.LOG10:
+			case OpenSearchPPLParser.LOG2:
+			case OpenSearchPPLParser.MOD:
+			case OpenSearchPPLParser.PI:
+			case OpenSearchPPLParser.POW:
+			case OpenSearchPPLParser.POWER:
+			case OpenSearchPPLParser.RAND:
+			case OpenSearchPPLParser.ROUND:
+			case OpenSearchPPLParser.SIGN:
+			case OpenSearchPPLParser.SQRT:
+			case OpenSearchPPLParser.TRUNCATE:
+			case OpenSearchPPLParser.ACOS:
+			case OpenSearchPPLParser.ASIN:
+			case OpenSearchPPLParser.ATAN:
+			case OpenSearchPPLParser.ATAN2:
+			case OpenSearchPPLParser.COS:
+			case OpenSearchPPLParser.COT:
+			case OpenSearchPPLParser.DEGREES:
+			case OpenSearchPPLParser.RADIANS:
+			case OpenSearchPPLParser.SIN:
+			case OpenSearchPPLParser.TAN:
+			case OpenSearchPPLParser.ADDDATE:
+			case OpenSearchPPLParser.CURDATE:
+			case OpenSearchPPLParser.CURRENT_DATE:
+			case OpenSearchPPLParser.CURRENT_TIME:
+			case OpenSearchPPLParser.CURRENT_TIMESTAMP:
+			case OpenSearchPPLParser.CURTIME:
+			case OpenSearchPPLParser.DATE:
+			case OpenSearchPPLParser.DATE_ADD:
+			case OpenSearchPPLParser.DATE_FORMAT:
+			case OpenSearchPPLParser.DATE_SUB:
+			case OpenSearchPPLParser.DAYNAME:
+			case OpenSearchPPLParser.DAYOFMONTH:
+			case OpenSearchPPLParser.DAYOFWEEK:
+			case OpenSearchPPLParser.DAYOFYEAR:
+			case OpenSearchPPLParser.FROM_DAYS:
+			case OpenSearchPPLParser.LOCALTIME:
+			case OpenSearchPPLParser.LOCALTIMESTAMP:
+			case OpenSearchPPLParser.FROM_UNIXTIME:
+			case OpenSearchPPLParser.MAKEDATE:
+			case OpenSearchPPLParser.MAKETIME:
+			case OpenSearchPPLParser.MONTHNAME:
+			case OpenSearchPPLParser.NOW:
+			case OpenSearchPPLParser.PERIOD_ADD:
+			case OpenSearchPPLParser.PERIOD_DIFF:
+			case OpenSearchPPLParser.SUBDATE:
+			case OpenSearchPPLParser.SYSDATE:
+			case OpenSearchPPLParser.TIME:
+			case OpenSearchPPLParser.TIME_TO_SEC:
+			case OpenSearchPPLParser.TIMESTAMP:
+			case OpenSearchPPLParser.TO_DAYS:
+			case OpenSearchPPLParser.UTC_DATE:
+			case OpenSearchPPLParser.UTC_TIME:
+			case OpenSearchPPLParser.UTC_TIMESTAMP:
+			case OpenSearchPPLParser.UNIX_TIMESTAMP:
+			case OpenSearchPPLParser.SUBSTR:
+			case OpenSearchPPLParser.SUBSTRING:
+			case OpenSearchPPLParser.LTRIM:
+			case OpenSearchPPLParser.RTRIM:
+			case OpenSearchPPLParser.TRIM:
+			case OpenSearchPPLParser.LOWER:
+			case OpenSearchPPLParser.UPPER:
+			case OpenSearchPPLParser.CONCAT:
+			case OpenSearchPPLParser.CONCAT_WS:
+			case OpenSearchPPLParser.LENGTH:
+			case OpenSearchPPLParser.STRCMP:
+			case OpenSearchPPLParser.RIGHT:
+			case OpenSearchPPLParser.LEFT:
+			case OpenSearchPPLParser.ASCII:
+			case OpenSearchPPLParser.LOCATE:
+			case OpenSearchPPLParser.REPLACE:
+			case OpenSearchPPLParser.SPAN:
+			case OpenSearchPPLParser.MS:
+			case OpenSearchPPLParser.S:
+			case OpenSearchPPLParser.M:
+			case OpenSearchPPLParser.H:
+			case OpenSearchPPLParser.W:
+			case OpenSearchPPLParser.Q:
+			case OpenSearchPPLParser.Y:
+			case OpenSearchPPLParser.ID:
+			case OpenSearchPPLParser.BQUOTA_STRING:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 688;
+				this.qualifiedName();
+				}
+				break;
+			case OpenSearchPPLParser.ID_DATE_SUFFIX:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 689;
+				this.match(OpenSearchPPLParser.ID_DATE_SUFFIX);
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public tableFunction(): TableFunctionContext {
+		let _localctx: TableFunctionContext = new TableFunctionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 106, OpenSearchPPLParser.RULE_tableFunction);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 692;
+			this.qualifiedName();
+			this.state = 693;
+			this.match(OpenSearchPPLParser.LT_PRTHS);
+			this.state = 694;
+			this.functionArgs();
+			this.state = 695;
+			this.match(OpenSearchPPLParser.RT_PRTHS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public fieldList(): FieldListContext {
+		let _localctx: FieldListContext = new FieldListContext(this._ctx, this.state);
+		this.enterRule(_localctx, 108, OpenSearchPPLParser.RULE_fieldList);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 697;
+			this.fieldExpression();
+			this.state = 702;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.COMMA) {
+				{
+				{
+				this.state = 698;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 699;
+				this.fieldExpression();
+				}
+				}
+				this.state = 704;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public wcFieldList(): WcFieldListContext {
+		let _localctx: WcFieldListContext = new WcFieldListContext(this._ctx, this.state);
+		this.enterRule(_localctx, 110, OpenSearchPPLParser.RULE_wcFieldList);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 705;
+			this.wcFieldExpression();
+			this.state = 710;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.COMMA) {
+				{
+				{
+				this.state = 706;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 707;
+				this.wcFieldExpression();
+				}
+				}
+				this.state = 712;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public sortField(): SortFieldContext {
+		let _localctx: SortFieldContext = new SortFieldContext(this._ctx, this.state);
+		this.enterRule(_localctx, 112, OpenSearchPPLParser.RULE_sortField);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 714;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.PLUS || _la === OpenSearchPPLParser.MINUS) {
+				{
+				this.state = 713;
+				_la = this._input.LA(1);
+				if (!(_la === OpenSearchPPLParser.PLUS || _la === OpenSearchPPLParser.MINUS)) {
+				this._errHandler.recoverInline(this);
+				} else {
+					if (this._input.LA(1) === Token.EOF) {
+						this.matchedEOF = true;
+					}
+
+					this._errHandler.reportMatch(this);
+					this.consume();
+				}
+				}
+			}
+
+			this.state = 716;
+			this.sortFieldExpression();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public sortFieldExpression(): SortFieldExpressionContext {
+		let _localctx: SortFieldExpressionContext = new SortFieldExpressionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 114, OpenSearchPPLParser.RULE_sortFieldExpression);
+		try {
+			this.state = 739;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.D:
+			case OpenSearchPPLParser.DATETIME:
+			case OpenSearchPPLParser.MICROSECOND:
+			case OpenSearchPPLParser.MILLISECOND:
+			case OpenSearchPPLParser.SECOND:
+			case OpenSearchPPLParser.MINUTE:
+			case OpenSearchPPLParser.HOUR:
+			case OpenSearchPPLParser.DAY:
+			case OpenSearchPPLParser.WEEK:
+			case OpenSearchPPLParser.MONTH:
+			case OpenSearchPPLParser.QUARTER:
+			case OpenSearchPPLParser.YEAR:
+			case OpenSearchPPLParser.CONVERT_TZ:
+			case OpenSearchPPLParser.DOT:
+			case OpenSearchPPLParser.BACKTICK:
+			case OpenSearchPPLParser.AVG:
+			case OpenSearchPPLParser.COUNT:
+			case OpenSearchPPLParser.MAX:
+			case OpenSearchPPLParser.MIN:
+			case OpenSearchPPLParser.SUM:
+			case OpenSearchPPLParser.VAR_SAMP:
+			case OpenSearchPPLParser.VAR_POP:
+			case OpenSearchPPLParser.STDDEV_SAMP:
+			case OpenSearchPPLParser.STDDEV_POP:
+			case OpenSearchPPLParser.FIRST:
+			case OpenSearchPPLParser.LAST:
+			case OpenSearchPPLParser.ABS:
+			case OpenSearchPPLParser.CEIL:
+			case OpenSearchPPLParser.CEILING:
+			case OpenSearchPPLParser.CONV:
+			case OpenSearchPPLParser.CRC32:
+			case OpenSearchPPLParser.E:
+			case OpenSearchPPLParser.EXP:
+			case OpenSearchPPLParser.FLOOR:
+			case OpenSearchPPLParser.LN:
+			case OpenSearchPPLParser.LOG:
+			case OpenSearchPPLParser.LOG10:
+			case OpenSearchPPLParser.LOG2:
+			case OpenSearchPPLParser.MOD:
+			case OpenSearchPPLParser.PI:
+			case OpenSearchPPLParser.POW:
+			case OpenSearchPPLParser.POWER:
+			case OpenSearchPPLParser.RAND:
+			case OpenSearchPPLParser.ROUND:
+			case OpenSearchPPLParser.SIGN:
+			case OpenSearchPPLParser.SQRT:
+			case OpenSearchPPLParser.TRUNCATE:
+			case OpenSearchPPLParser.ACOS:
+			case OpenSearchPPLParser.ASIN:
+			case OpenSearchPPLParser.ATAN:
+			case OpenSearchPPLParser.ATAN2:
+			case OpenSearchPPLParser.COS:
+			case OpenSearchPPLParser.COT:
+			case OpenSearchPPLParser.DEGREES:
+			case OpenSearchPPLParser.RADIANS:
+			case OpenSearchPPLParser.SIN:
+			case OpenSearchPPLParser.TAN:
+			case OpenSearchPPLParser.ADDDATE:
+			case OpenSearchPPLParser.CURDATE:
+			case OpenSearchPPLParser.CURRENT_DATE:
+			case OpenSearchPPLParser.CURRENT_TIME:
+			case OpenSearchPPLParser.CURRENT_TIMESTAMP:
+			case OpenSearchPPLParser.CURTIME:
+			case OpenSearchPPLParser.DATE:
+			case OpenSearchPPLParser.DATE_ADD:
+			case OpenSearchPPLParser.DATE_FORMAT:
+			case OpenSearchPPLParser.DATE_SUB:
+			case OpenSearchPPLParser.DAYNAME:
+			case OpenSearchPPLParser.DAYOFMONTH:
+			case OpenSearchPPLParser.DAYOFWEEK:
+			case OpenSearchPPLParser.DAYOFYEAR:
+			case OpenSearchPPLParser.FROM_DAYS:
+			case OpenSearchPPLParser.LOCALTIME:
+			case OpenSearchPPLParser.LOCALTIMESTAMP:
+			case OpenSearchPPLParser.FROM_UNIXTIME:
+			case OpenSearchPPLParser.MAKEDATE:
+			case OpenSearchPPLParser.MAKETIME:
+			case OpenSearchPPLParser.MONTHNAME:
+			case OpenSearchPPLParser.NOW:
+			case OpenSearchPPLParser.PERIOD_ADD:
+			case OpenSearchPPLParser.PERIOD_DIFF:
+			case OpenSearchPPLParser.SUBDATE:
+			case OpenSearchPPLParser.SYSDATE:
+			case OpenSearchPPLParser.TIME:
+			case OpenSearchPPLParser.TIME_TO_SEC:
+			case OpenSearchPPLParser.TIMESTAMP:
+			case OpenSearchPPLParser.TO_DAYS:
+			case OpenSearchPPLParser.UTC_DATE:
+			case OpenSearchPPLParser.UTC_TIME:
+			case OpenSearchPPLParser.UTC_TIMESTAMP:
+			case OpenSearchPPLParser.UNIX_TIMESTAMP:
+			case OpenSearchPPLParser.SUBSTR:
+			case OpenSearchPPLParser.SUBSTRING:
+			case OpenSearchPPLParser.LTRIM:
+			case OpenSearchPPLParser.RTRIM:
+			case OpenSearchPPLParser.TRIM:
+			case OpenSearchPPLParser.LOWER:
+			case OpenSearchPPLParser.UPPER:
+			case OpenSearchPPLParser.CONCAT:
+			case OpenSearchPPLParser.CONCAT_WS:
+			case OpenSearchPPLParser.LENGTH:
+			case OpenSearchPPLParser.STRCMP:
+			case OpenSearchPPLParser.RIGHT:
+			case OpenSearchPPLParser.LEFT:
+			case OpenSearchPPLParser.ASCII:
+			case OpenSearchPPLParser.LOCATE:
+			case OpenSearchPPLParser.REPLACE:
+			case OpenSearchPPLParser.SPAN:
+			case OpenSearchPPLParser.MS:
+			case OpenSearchPPLParser.S:
+			case OpenSearchPPLParser.M:
+			case OpenSearchPPLParser.H:
+			case OpenSearchPPLParser.W:
+			case OpenSearchPPLParser.Q:
+			case OpenSearchPPLParser.Y:
+			case OpenSearchPPLParser.ID:
+			case OpenSearchPPLParser.BQUOTA_STRING:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 718;
+				this.fieldExpression();
+				}
+				break;
+			case OpenSearchPPLParser.AUTO:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 719;
+				this.match(OpenSearchPPLParser.AUTO);
+				this.state = 720;
+				this.match(OpenSearchPPLParser.LT_PRTHS);
+				this.state = 721;
+				this.fieldExpression();
+				this.state = 722;
+				this.match(OpenSearchPPLParser.RT_PRTHS);
+				}
+				break;
+			case OpenSearchPPLParser.STR:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 724;
+				this.match(OpenSearchPPLParser.STR);
+				this.state = 725;
+				this.match(OpenSearchPPLParser.LT_PRTHS);
+				this.state = 726;
+				this.fieldExpression();
+				this.state = 727;
+				this.match(OpenSearchPPLParser.RT_PRTHS);
+				}
+				break;
+			case OpenSearchPPLParser.IP:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 729;
+				this.match(OpenSearchPPLParser.IP);
+				this.state = 730;
+				this.match(OpenSearchPPLParser.LT_PRTHS);
+				this.state = 731;
+				this.fieldExpression();
+				this.state = 732;
+				this.match(OpenSearchPPLParser.RT_PRTHS);
+				}
+				break;
+			case OpenSearchPPLParser.NUM:
+				this.enterOuterAlt(_localctx, 5);
+				{
+				this.state = 734;
+				this.match(OpenSearchPPLParser.NUM);
+				this.state = 735;
+				this.match(OpenSearchPPLParser.LT_PRTHS);
+				this.state = 736;
+				this.fieldExpression();
+				this.state = 737;
+				this.match(OpenSearchPPLParser.RT_PRTHS);
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public fieldExpression(): FieldExpressionContext {
+		let _localctx: FieldExpressionContext = new FieldExpressionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 116, OpenSearchPPLParser.RULE_fieldExpression);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 741;
+			this.qualifiedName();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public wcFieldExpression(): WcFieldExpressionContext {
+		let _localctx: WcFieldExpressionContext = new WcFieldExpressionContext(this._ctx, this.state);
+		this.enterRule(_localctx, 118, OpenSearchPPLParser.RULE_wcFieldExpression);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 743;
+			this.wcQualifiedName();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public evalFunctionCall(): EvalFunctionCallContext {
+		let _localctx: EvalFunctionCallContext = new EvalFunctionCallContext(this._ctx, this.state);
+		this.enterRule(_localctx, 120, OpenSearchPPLParser.RULE_evalFunctionCall);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 745;
+			this.evalFunctionName();
+			this.state = 746;
+			this.match(OpenSearchPPLParser.LT_PRTHS);
+			this.state = 747;
+			this.functionArgs();
+			this.state = 748;
+			this.match(OpenSearchPPLParser.RT_PRTHS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public dataTypeFunctionCall(): DataTypeFunctionCallContext {
+		let _localctx: DataTypeFunctionCallContext = new DataTypeFunctionCallContext(this._ctx, this.state);
+		this.enterRule(_localctx, 122, OpenSearchPPLParser.RULE_dataTypeFunctionCall);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 750;
+			this.match(OpenSearchPPLParser.CAST);
+			this.state = 751;
+			this.match(OpenSearchPPLParser.LT_PRTHS);
+			this.state = 752;
+			this.expression();
+			this.state = 753;
+			this.match(OpenSearchPPLParser.AS);
+			this.state = 754;
+			this.convertedDataType();
+			this.state = 755;
+			this.match(OpenSearchPPLParser.RT_PRTHS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public booleanFunctionCall(): BooleanFunctionCallContext {
+		let _localctx: BooleanFunctionCallContext = new BooleanFunctionCallContext(this._ctx, this.state);
+		this.enterRule(_localctx, 124, OpenSearchPPLParser.RULE_booleanFunctionCall);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 757;
+			this.conditionFunctionBase();
+			this.state = 758;
+			this.match(OpenSearchPPLParser.LT_PRTHS);
+			this.state = 759;
+			this.functionArgs();
+			this.state = 760;
+			this.match(OpenSearchPPLParser.RT_PRTHS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public convertedDataType(): ConvertedDataTypeContext {
+		let _localctx: ConvertedDataTypeContext = new ConvertedDataTypeContext(this._ctx, this.state);
+		this.enterRule(_localctx, 126, OpenSearchPPLParser.RULE_convertedDataType);
+		try {
+			this.state = 772;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.DATE:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 762;
+				_localctx._typeName = this.match(OpenSearchPPLParser.DATE);
+				}
+				break;
+			case OpenSearchPPLParser.TIME:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 763;
+				_localctx._typeName = this.match(OpenSearchPPLParser.TIME);
+				}
+				break;
+			case OpenSearchPPLParser.TIMESTAMP:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 764;
+				_localctx._typeName = this.match(OpenSearchPPLParser.TIMESTAMP);
+				}
+				break;
+			case OpenSearchPPLParser.INT:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 765;
+				_localctx._typeName = this.match(OpenSearchPPLParser.INT);
+				}
+				break;
+			case OpenSearchPPLParser.INTEGER:
+				this.enterOuterAlt(_localctx, 5);
+				{
+				this.state = 766;
+				_localctx._typeName = this.match(OpenSearchPPLParser.INTEGER);
+				}
+				break;
+			case OpenSearchPPLParser.DOUBLE:
+				this.enterOuterAlt(_localctx, 6);
+				{
+				this.state = 767;
+				_localctx._typeName = this.match(OpenSearchPPLParser.DOUBLE);
+				}
+				break;
+			case OpenSearchPPLParser.LONG:
+				this.enterOuterAlt(_localctx, 7);
+				{
+				this.state = 768;
+				_localctx._typeName = this.match(OpenSearchPPLParser.LONG);
+				}
+				break;
+			case OpenSearchPPLParser.FLOAT:
+				this.enterOuterAlt(_localctx, 8);
+				{
+				this.state = 769;
+				_localctx._typeName = this.match(OpenSearchPPLParser.FLOAT);
+				}
+				break;
+			case OpenSearchPPLParser.STRING:
+				this.enterOuterAlt(_localctx, 9);
+				{
+				this.state = 770;
+				_localctx._typeName = this.match(OpenSearchPPLParser.STRING);
+				}
+				break;
+			case OpenSearchPPLParser.BOOLEAN:
+				this.enterOuterAlt(_localctx, 10);
+				{
+				this.state = 771;
+				_localctx._typeName = this.match(OpenSearchPPLParser.BOOLEAN);
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public evalFunctionName(): EvalFunctionNameContext {
+		let _localctx: EvalFunctionNameContext = new EvalFunctionNameContext(this._ctx, this.state);
+		this.enterRule(_localctx, 128, OpenSearchPPLParser.RULE_evalFunctionName);
+		try {
+			this.state = 779;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.ABS:
+			case OpenSearchPPLParser.CEIL:
+			case OpenSearchPPLParser.CEILING:
+			case OpenSearchPPLParser.CONV:
+			case OpenSearchPPLParser.CRC32:
+			case OpenSearchPPLParser.E:
+			case OpenSearchPPLParser.EXP:
+			case OpenSearchPPLParser.FLOOR:
+			case OpenSearchPPLParser.LN:
+			case OpenSearchPPLParser.LOG:
+			case OpenSearchPPLParser.LOG10:
+			case OpenSearchPPLParser.LOG2:
+			case OpenSearchPPLParser.MOD:
+			case OpenSearchPPLParser.PI:
+			case OpenSearchPPLParser.POW:
+			case OpenSearchPPLParser.POWER:
+			case OpenSearchPPLParser.RAND:
+			case OpenSearchPPLParser.ROUND:
+			case OpenSearchPPLParser.SIGN:
+			case OpenSearchPPLParser.SQRT:
+			case OpenSearchPPLParser.TRUNCATE:
+			case OpenSearchPPLParser.ACOS:
+			case OpenSearchPPLParser.ASIN:
+			case OpenSearchPPLParser.ATAN:
+			case OpenSearchPPLParser.ATAN2:
+			case OpenSearchPPLParser.COS:
+			case OpenSearchPPLParser.COT:
+			case OpenSearchPPLParser.DEGREES:
+			case OpenSearchPPLParser.RADIANS:
+			case OpenSearchPPLParser.SIN:
+			case OpenSearchPPLParser.TAN:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 774;
+				this.mathematicalFunctionBase();
+				}
+				break;
+			case OpenSearchPPLParser.DATETIME:
+			case OpenSearchPPLParser.MICROSECOND:
+			case OpenSearchPPLParser.SECOND:
+			case OpenSearchPPLParser.MINUTE:
+			case OpenSearchPPLParser.HOUR:
+			case OpenSearchPPLParser.DAY:
+			case OpenSearchPPLParser.WEEK:
+			case OpenSearchPPLParser.MONTH:
+			case OpenSearchPPLParser.QUARTER:
+			case OpenSearchPPLParser.YEAR:
+			case OpenSearchPPLParser.CONVERT_TZ:
+			case OpenSearchPPLParser.ADDDATE:
+			case OpenSearchPPLParser.DATE:
+			case OpenSearchPPLParser.DATE_ADD:
+			case OpenSearchPPLParser.DATE_FORMAT:
+			case OpenSearchPPLParser.DATE_SUB:
+			case OpenSearchPPLParser.DAYNAME:
+			case OpenSearchPPLParser.DAYOFMONTH:
+			case OpenSearchPPLParser.DAYOFWEEK:
+			case OpenSearchPPLParser.DAYOFYEAR:
+			case OpenSearchPPLParser.FROM_DAYS:
+			case OpenSearchPPLParser.FROM_UNIXTIME:
+			case OpenSearchPPLParser.MAKEDATE:
+			case OpenSearchPPLParser.MAKETIME:
+			case OpenSearchPPLParser.MONTHNAME:
+			case OpenSearchPPLParser.PERIOD_ADD:
+			case OpenSearchPPLParser.PERIOD_DIFF:
+			case OpenSearchPPLParser.SUBDATE:
+			case OpenSearchPPLParser.SYSDATE:
+			case OpenSearchPPLParser.TIME:
+			case OpenSearchPPLParser.TIME_TO_SEC:
+			case OpenSearchPPLParser.TIMESTAMP:
+			case OpenSearchPPLParser.TO_DAYS:
+			case OpenSearchPPLParser.UNIX_TIMESTAMP:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 775;
+				this.dateAndTimeFunctionBase();
+				}
+				break;
+			case OpenSearchPPLParser.SUBSTR:
+			case OpenSearchPPLParser.SUBSTRING:
+			case OpenSearchPPLParser.LTRIM:
+			case OpenSearchPPLParser.RTRIM:
+			case OpenSearchPPLParser.TRIM:
+			case OpenSearchPPLParser.LOWER:
+			case OpenSearchPPLParser.UPPER:
+			case OpenSearchPPLParser.CONCAT:
+			case OpenSearchPPLParser.CONCAT_WS:
+			case OpenSearchPPLParser.LENGTH:
+			case OpenSearchPPLParser.STRCMP:
+			case OpenSearchPPLParser.RIGHT:
+			case OpenSearchPPLParser.LEFT:
+			case OpenSearchPPLParser.ASCII:
+			case OpenSearchPPLParser.LOCATE:
+			case OpenSearchPPLParser.REPLACE:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 776;
+				this.textFunctionBase();
+				}
+				break;
+			case OpenSearchPPLParser.LIKE:
+			case OpenSearchPPLParser.ISNULL:
+			case OpenSearchPPLParser.ISNOTNULL:
+			case OpenSearchPPLParser.IFNULL:
+			case OpenSearchPPLParser.NULLIF:
+			case OpenSearchPPLParser.IF:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 777;
+				this.conditionFunctionBase();
+				}
+				break;
+			case OpenSearchPPLParser.TYPEOF:
+				this.enterOuterAlt(_localctx, 5);
+				{
+				this.state = 778;
+				this.systemFunctionBase();
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public functionArgs(): FunctionArgsContext {
+		let _localctx: FunctionArgsContext = new FunctionArgsContext(this._ctx, this.state);
+		this.enterRule(_localctx, 130, OpenSearchPPLParser.RULE_functionArgs);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 789;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.D || ((((_la - 64)) & ~0x1F) === 0 && ((1 << (_la - 64)) & ((1 << (OpenSearchPPLParser.TRUE - 64)) | (1 << (OpenSearchPPLParser.FALSE - 64)) | (1 << (OpenSearchPPLParser.DATETIME - 64)) | (1 << (OpenSearchPPLParser.INTERVAL - 64)) | (1 << (OpenSearchPPLParser.MICROSECOND - 64)) | (1 << (OpenSearchPPLParser.MILLISECOND - 64)) | (1 << (OpenSearchPPLParser.SECOND - 64)) | (1 << (OpenSearchPPLParser.MINUTE - 64)) | (1 << (OpenSearchPPLParser.HOUR - 64)) | (1 << (OpenSearchPPLParser.DAY - 64)) | (1 << (OpenSearchPPLParser.WEEK - 64)) | (1 << (OpenSearchPPLParser.MONTH - 64)) | (1 << (OpenSearchPPLParser.QUARTER - 64)) | (1 << (OpenSearchPPLParser.YEAR - 64)) | (1 << (OpenSearchPPLParser.CONVERT_TZ - 64)))) !== 0) || ((((_la - 103)) & ~0x1F) === 0 && ((1 << (_la - 103)) & ((1 << (OpenSearchPPLParser.DOT - 103)) | (1 << (OpenSearchPPLParser.PLUS - 103)) | (1 << (OpenSearchPPLParser.MINUS - 103)) | (1 << (OpenSearchPPLParser.LT_PRTHS - 103)) | (1 << (OpenSearchPPLParser.BACKTICK - 103)) | (1 << (OpenSearchPPLParser.AVG - 103)) | (1 << (OpenSearchPPLParser.COUNT - 103)) | (1 << (OpenSearchPPLParser.MAX - 103)))) !== 0) || ((((_la - 135)) & ~0x1F) === 0 && ((1 << (_la - 135)) & ((1 << (OpenSearchPPLParser.MIN - 135)) | (1 << (OpenSearchPPLParser.SUM - 135)) | (1 << (OpenSearchPPLParser.VAR_SAMP - 135)) | (1 << (OpenSearchPPLParser.VAR_POP - 135)) | (1 << (OpenSearchPPLParser.STDDEV_SAMP - 135)) | (1 << (OpenSearchPPLParser.STDDEV_POP - 135)) | (1 << (OpenSearchPPLParser.FIRST - 135)) | (1 << (OpenSearchPPLParser.LAST - 135)) | (1 << (OpenSearchPPLParser.ABS - 135)) | (1 << (OpenSearchPPLParser.CEIL - 135)) | (1 << (OpenSearchPPLParser.CEILING - 135)))) !== 0) || ((((_la - 167)) & ~0x1F) === 0 && ((1 << (_la - 167)) & ((1 << (OpenSearchPPLParser.CONV - 167)) | (1 << (OpenSearchPPLParser.CRC32 - 167)) | (1 << (OpenSearchPPLParser.E - 167)) | (1 << (OpenSearchPPLParser.EXP - 167)) | (1 << (OpenSearchPPLParser.FLOOR - 167)) | (1 << (OpenSearchPPLParser.LN - 167)) | (1 << (OpenSearchPPLParser.LOG - 167)) | (1 << (OpenSearchPPLParser.LOG10 - 167)) | (1 << (OpenSearchPPLParser.LOG2 - 167)) | (1 << (OpenSearchPPLParser.MOD - 167)) | (1 << (OpenSearchPPLParser.PI - 167)) | (1 << (OpenSearchPPLParser.POW - 167)) | (1 << (OpenSearchPPLParser.POWER - 167)) | (1 << (OpenSearchPPLParser.RAND - 167)) | (1 << (OpenSearchPPLParser.ROUND - 167)) | (1 << (OpenSearchPPLParser.SIGN - 167)) | (1 << (OpenSearchPPLParser.SQRT - 167)) | (1 << (OpenSearchPPLParser.TRUNCATE - 167)) | (1 << (OpenSearchPPLParser.ACOS - 167)) | (1 << (OpenSearchPPLParser.ASIN - 167)) | (1 << (OpenSearchPPLParser.ATAN - 167)) | (1 << (OpenSearchPPLParser.ATAN2 - 167)) | (1 << (OpenSearchPPLParser.COS - 167)) | (1 << (OpenSearchPPLParser.COT - 167)) | (1 << (OpenSearchPPLParser.DEGREES - 167)) | (1 << (OpenSearchPPLParser.RADIANS - 167)) | (1 << (OpenSearchPPLParser.SIN - 167)) | (1 << (OpenSearchPPLParser.TAN - 167)) | (1 << (OpenSearchPPLParser.ADDDATE - 167)) | (1 << (OpenSearchPPLParser.CURDATE - 167)) | (1 << (OpenSearchPPLParser.CURRENT_DATE - 167)) | (1 << (OpenSearchPPLParser.CURRENT_TIME - 167)))) !== 0) || ((((_la - 199)) & ~0x1F) === 0 && ((1 << (_la - 199)) & ((1 << (OpenSearchPPLParser.CURRENT_TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.CURTIME - 199)) | (1 << (OpenSearchPPLParser.DATE - 199)) | (1 << (OpenSearchPPLParser.DATE_ADD - 199)) | (1 << (OpenSearchPPLParser.DATE_FORMAT - 199)) | (1 << (OpenSearchPPLParser.DATE_SUB - 199)) | (1 << (OpenSearchPPLParser.DAYNAME - 199)) | (1 << (OpenSearchPPLParser.DAYOFMONTH - 199)) | (1 << (OpenSearchPPLParser.DAYOFWEEK - 199)) | (1 << (OpenSearchPPLParser.DAYOFYEAR - 199)) | (1 << (OpenSearchPPLParser.FROM_DAYS - 199)) | (1 << (OpenSearchPPLParser.LOCALTIME - 199)) | (1 << (OpenSearchPPLParser.LOCALTIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.FROM_UNIXTIME - 199)) | (1 << (OpenSearchPPLParser.MAKEDATE - 199)) | (1 << (OpenSearchPPLParser.MAKETIME - 199)) | (1 << (OpenSearchPPLParser.MONTHNAME - 199)) | (1 << (OpenSearchPPLParser.NOW - 199)) | (1 << (OpenSearchPPLParser.PERIOD_ADD - 199)) | (1 << (OpenSearchPPLParser.PERIOD_DIFF - 199)) | (1 << (OpenSearchPPLParser.SUBDATE - 199)) | (1 << (OpenSearchPPLParser.SYSDATE - 199)) | (1 << (OpenSearchPPLParser.TIME - 199)) | (1 << (OpenSearchPPLParser.TIME_TO_SEC - 199)) | (1 << (OpenSearchPPLParser.TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.TO_DAYS - 199)) | (1 << (OpenSearchPPLParser.UTC_DATE - 199)) | (1 << (OpenSearchPPLParser.UTC_TIME - 199)) | (1 << (OpenSearchPPLParser.UTC_TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.UNIX_TIMESTAMP - 199)) | (1 << (OpenSearchPPLParser.SUBSTR - 199)) | (1 << (OpenSearchPPLParser.SUBSTRING - 199)))) !== 0) || ((((_la - 231)) & ~0x1F) === 0 && ((1 << (_la - 231)) & ((1 << (OpenSearchPPLParser.LTRIM - 231)) | (1 << (OpenSearchPPLParser.RTRIM - 231)) | (1 << (OpenSearchPPLParser.TRIM - 231)) | (1 << (OpenSearchPPLParser.LOWER - 231)) | (1 << (OpenSearchPPLParser.UPPER - 231)) | (1 << (OpenSearchPPLParser.CONCAT - 231)) | (1 << (OpenSearchPPLParser.CONCAT_WS - 231)) | (1 << (OpenSearchPPLParser.LENGTH - 231)) | (1 << (OpenSearchPPLParser.STRCMP - 231)) | (1 << (OpenSearchPPLParser.RIGHT - 231)) | (1 << (OpenSearchPPLParser.LEFT - 231)) | (1 << (OpenSearchPPLParser.ASCII - 231)) | (1 << (OpenSearchPPLParser.LOCATE - 231)) | (1 << (OpenSearchPPLParser.REPLACE - 231)) | (1 << (OpenSearchPPLParser.CAST - 231)) | (1 << (OpenSearchPPLParser.LIKE - 231)) | (1 << (OpenSearchPPLParser.ISNULL - 231)) | (1 << (OpenSearchPPLParser.ISNOTNULL - 231)) | (1 << (OpenSearchPPLParser.IFNULL - 231)) | (1 << (OpenSearchPPLParser.NULLIF - 231)) | (1 << (OpenSearchPPLParser.IF - 231)) | (1 << (OpenSearchPPLParser.TYPEOF - 231)))) !== 0) || ((((_la - 292)) & ~0x1F) === 0 && ((1 << (_la - 292)) & ((1 << (OpenSearchPPLParser.SPAN - 292)) | (1 << (OpenSearchPPLParser.MS - 292)) | (1 << (OpenSearchPPLParser.S - 292)) | (1 << (OpenSearchPPLParser.M - 292)) | (1 << (OpenSearchPPLParser.H - 292)) | (1 << (OpenSearchPPLParser.W - 292)) | (1 << (OpenSearchPPLParser.Q - 292)) | (1 << (OpenSearchPPLParser.Y - 292)) | (1 << (OpenSearchPPLParser.ID - 292)) | (1 << (OpenSearchPPLParser.INTEGER_LITERAL - 292)) | (1 << (OpenSearchPPLParser.DECIMAL_LITERAL - 292)) | (1 << (OpenSearchPPLParser.DQUOTA_STRING - 292)) | (1 << (OpenSearchPPLParser.SQUOTA_STRING - 292)) | (1 << (OpenSearchPPLParser.BQUOTA_STRING - 292)))) !== 0)) {
+				{
+				this.state = 781;
+				this.functionArg();
+				this.state = 786;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+				while (_la === OpenSearchPPLParser.COMMA) {
+					{
+					{
+					this.state = 782;
+					this.match(OpenSearchPPLParser.COMMA);
+					this.state = 783;
+					this.functionArg();
+					}
+					}
+					this.state = 788;
+					this._errHandler.sync(this);
+					_la = this._input.LA(1);
+				}
+				}
+			}
+
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public functionArg(): FunctionArgContext {
+		let _localctx: FunctionArgContext = new FunctionArgContext(this._ctx, this.state);
+		this.enterRule(_localctx, 132, OpenSearchPPLParser.RULE_functionArg);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 794;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 64, this._ctx) ) {
+			case 1:
+				{
+				this.state = 791;
+				this.ident();
+				this.state = 792;
+				this.match(OpenSearchPPLParser.EQUAL);
+				}
+				break;
+			}
+			this.state = 796;
+			this.valueExpression(0);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public relevanceArg(): RelevanceArgContext {
+		let _localctx: RelevanceArgContext = new RelevanceArgContext(this._ctx, this.state);
+		this.enterRule(_localctx, 134, OpenSearchPPLParser.RULE_relevanceArg);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 798;
+			this.relevanceArgName();
+			this.state = 799;
+			this.match(OpenSearchPPLParser.EQUAL);
+			this.state = 800;
+			this.relevanceArgValue();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public relevanceArgName(): RelevanceArgNameContext {
+		let _localctx: RelevanceArgNameContext = new RelevanceArgNameContext(this._ctx, this.state);
+		this.enterRule(_localctx, 136, OpenSearchPPLParser.RULE_relevanceArgName);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 802;
+			_la = this._input.LA(1);
+			if (!(_la === OpenSearchPPLParser.FIELDS || _la === OpenSearchPPLParser.TIME_ZONE || ((((_la - 261)) & ~0x1F) === 0 && ((1 << (_la - 261)) & ((1 << (OpenSearchPPLParser.ALLOW_LEADING_WILDCARD - 261)) | (1 << (OpenSearchPPLParser.ANALYZE_WILDCARD - 261)) | (1 << (OpenSearchPPLParser.ANALYZER - 261)) | (1 << (OpenSearchPPLParser.AUTO_GENERATE_SYNONYMS_PHRASE_QUERY - 261)) | (1 << (OpenSearchPPLParser.BOOST - 261)) | (1 << (OpenSearchPPLParser.CUTOFF_FREQUENCY - 261)) | (1 << (OpenSearchPPLParser.DEFAULT_FIELD - 261)) | (1 << (OpenSearchPPLParser.DEFAULT_OPERATOR - 261)) | (1 << (OpenSearchPPLParser.ENABLE_POSITION_INCREMENTS - 261)) | (1 << (OpenSearchPPLParser.ESCAPE - 261)) | (1 << (OpenSearchPPLParser.FLAGS - 261)) | (1 << (OpenSearchPPLParser.FUZZY_MAX_EXPANSIONS - 261)) | (1 << (OpenSearchPPLParser.FUZZY_PREFIX_LENGTH - 261)) | (1 << (OpenSearchPPLParser.FUZZY_TRANSPOSITIONS - 261)) | (1 << (OpenSearchPPLParser.FUZZY_REWRITE - 261)) | (1 << (OpenSearchPPLParser.FUZZINESS - 261)) | (1 << (OpenSearchPPLParser.LENIENT - 261)) | (1 << (OpenSearchPPLParser.LOW_FREQ_OPERATOR - 261)) | (1 << (OpenSearchPPLParser.MAX_DETERMINIZED_STATES - 261)) | (1 << (OpenSearchPPLParser.MAX_EXPANSIONS - 261)) | (1 << (OpenSearchPPLParser.MINIMUM_SHOULD_MATCH - 261)) | (1 << (OpenSearchPPLParser.OPERATOR - 261)) | (1 << (OpenSearchPPLParser.PHRASE_SLOP - 261)) | (1 << (OpenSearchPPLParser.PREFIX_LENGTH - 261)) | (1 << (OpenSearchPPLParser.QUOTE_ANALYZER - 261)) | (1 << (OpenSearchPPLParser.QUOTE_FIELD_SUFFIX - 261)) | (1 << (OpenSearchPPLParser.REWRITE - 261)) | (1 << (OpenSearchPPLParser.SLOP - 261)) | (1 << (OpenSearchPPLParser.TIE_BREAKER - 261)) | (1 << (OpenSearchPPLParser.TYPE - 261)) | (1 << (OpenSearchPPLParser.ZERO_TERMS_QUERY - 261)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public relevanceFieldAndWeight(): RelevanceFieldAndWeightContext {
+		let _localctx: RelevanceFieldAndWeightContext = new RelevanceFieldAndWeightContext(this._ctx, this.state);
+		this.enterRule(_localctx, 138, OpenSearchPPLParser.RULE_relevanceFieldAndWeight);
+		try {
+			this.state = 812;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 65, this._ctx) ) {
+			case 1:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 804;
+				_localctx._field = this.relevanceField();
+				}
+				break;
+
+			case 2:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 805;
+				_localctx._field = this.relevanceField();
+				this.state = 806;
+				_localctx._weight = this.relevanceFieldWeight();
+				}
+				break;
+
+			case 3:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 808;
+				_localctx._field = this.relevanceField();
+				this.state = 809;
+				this.match(OpenSearchPPLParser.BIT_XOR_OP);
+				this.state = 810;
+				_localctx._weight = this.relevanceFieldWeight();
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public relevanceFieldWeight(): RelevanceFieldWeightContext {
+		let _localctx: RelevanceFieldWeightContext = new RelevanceFieldWeightContext(this._ctx, this.state);
+		this.enterRule(_localctx, 140, OpenSearchPPLParser.RULE_relevanceFieldWeight);
+		try {
+			this.state = 816;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 66, this._ctx) ) {
+			case 1:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 814;
+				this.integerLiteral();
+				}
+				break;
+
+			case 2:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 815;
+				this.decimalLiteral();
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public relevanceField(): RelevanceFieldContext {
+		let _localctx: RelevanceFieldContext = new RelevanceFieldContext(this._ctx, this.state);
+		this.enterRule(_localctx, 142, OpenSearchPPLParser.RULE_relevanceField);
+		try {
+			this.state = 820;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.D:
+			case OpenSearchPPLParser.DATETIME:
+			case OpenSearchPPLParser.MICROSECOND:
+			case OpenSearchPPLParser.MILLISECOND:
+			case OpenSearchPPLParser.SECOND:
+			case OpenSearchPPLParser.MINUTE:
+			case OpenSearchPPLParser.HOUR:
+			case OpenSearchPPLParser.DAY:
+			case OpenSearchPPLParser.WEEK:
+			case OpenSearchPPLParser.MONTH:
+			case OpenSearchPPLParser.QUARTER:
+			case OpenSearchPPLParser.YEAR:
+			case OpenSearchPPLParser.CONVERT_TZ:
+			case OpenSearchPPLParser.DOT:
+			case OpenSearchPPLParser.BACKTICK:
+			case OpenSearchPPLParser.AVG:
+			case OpenSearchPPLParser.COUNT:
+			case OpenSearchPPLParser.MAX:
+			case OpenSearchPPLParser.MIN:
+			case OpenSearchPPLParser.SUM:
+			case OpenSearchPPLParser.VAR_SAMP:
+			case OpenSearchPPLParser.VAR_POP:
+			case OpenSearchPPLParser.STDDEV_SAMP:
+			case OpenSearchPPLParser.STDDEV_POP:
+			case OpenSearchPPLParser.FIRST:
+			case OpenSearchPPLParser.LAST:
+			case OpenSearchPPLParser.ABS:
+			case OpenSearchPPLParser.CEIL:
+			case OpenSearchPPLParser.CEILING:
+			case OpenSearchPPLParser.CONV:
+			case OpenSearchPPLParser.CRC32:
+			case OpenSearchPPLParser.E:
+			case OpenSearchPPLParser.EXP:
+			case OpenSearchPPLParser.FLOOR:
+			case OpenSearchPPLParser.LN:
+			case OpenSearchPPLParser.LOG:
+			case OpenSearchPPLParser.LOG10:
+			case OpenSearchPPLParser.LOG2:
+			case OpenSearchPPLParser.MOD:
+			case OpenSearchPPLParser.PI:
+			case OpenSearchPPLParser.POW:
+			case OpenSearchPPLParser.POWER:
+			case OpenSearchPPLParser.RAND:
+			case OpenSearchPPLParser.ROUND:
+			case OpenSearchPPLParser.SIGN:
+			case OpenSearchPPLParser.SQRT:
+			case OpenSearchPPLParser.TRUNCATE:
+			case OpenSearchPPLParser.ACOS:
+			case OpenSearchPPLParser.ASIN:
+			case OpenSearchPPLParser.ATAN:
+			case OpenSearchPPLParser.ATAN2:
+			case OpenSearchPPLParser.COS:
+			case OpenSearchPPLParser.COT:
+			case OpenSearchPPLParser.DEGREES:
+			case OpenSearchPPLParser.RADIANS:
+			case OpenSearchPPLParser.SIN:
+			case OpenSearchPPLParser.TAN:
+			case OpenSearchPPLParser.ADDDATE:
+			case OpenSearchPPLParser.CURDATE:
+			case OpenSearchPPLParser.CURRENT_DATE:
+			case OpenSearchPPLParser.CURRENT_TIME:
+			case OpenSearchPPLParser.CURRENT_TIMESTAMP:
+			case OpenSearchPPLParser.CURTIME:
+			case OpenSearchPPLParser.DATE:
+			case OpenSearchPPLParser.DATE_ADD:
+			case OpenSearchPPLParser.DATE_FORMAT:
+			case OpenSearchPPLParser.DATE_SUB:
+			case OpenSearchPPLParser.DAYNAME:
+			case OpenSearchPPLParser.DAYOFMONTH:
+			case OpenSearchPPLParser.DAYOFWEEK:
+			case OpenSearchPPLParser.DAYOFYEAR:
+			case OpenSearchPPLParser.FROM_DAYS:
+			case OpenSearchPPLParser.LOCALTIME:
+			case OpenSearchPPLParser.LOCALTIMESTAMP:
+			case OpenSearchPPLParser.FROM_UNIXTIME:
+			case OpenSearchPPLParser.MAKEDATE:
+			case OpenSearchPPLParser.MAKETIME:
+			case OpenSearchPPLParser.MONTHNAME:
+			case OpenSearchPPLParser.NOW:
+			case OpenSearchPPLParser.PERIOD_ADD:
+			case OpenSearchPPLParser.PERIOD_DIFF:
+			case OpenSearchPPLParser.SUBDATE:
+			case OpenSearchPPLParser.SYSDATE:
+			case OpenSearchPPLParser.TIME:
+			case OpenSearchPPLParser.TIME_TO_SEC:
+			case OpenSearchPPLParser.TIMESTAMP:
+			case OpenSearchPPLParser.TO_DAYS:
+			case OpenSearchPPLParser.UTC_DATE:
+			case OpenSearchPPLParser.UTC_TIME:
+			case OpenSearchPPLParser.UTC_TIMESTAMP:
+			case OpenSearchPPLParser.UNIX_TIMESTAMP:
+			case OpenSearchPPLParser.SUBSTR:
+			case OpenSearchPPLParser.SUBSTRING:
+			case OpenSearchPPLParser.LTRIM:
+			case OpenSearchPPLParser.RTRIM:
+			case OpenSearchPPLParser.TRIM:
+			case OpenSearchPPLParser.LOWER:
+			case OpenSearchPPLParser.UPPER:
+			case OpenSearchPPLParser.CONCAT:
+			case OpenSearchPPLParser.CONCAT_WS:
+			case OpenSearchPPLParser.LENGTH:
+			case OpenSearchPPLParser.STRCMP:
+			case OpenSearchPPLParser.RIGHT:
+			case OpenSearchPPLParser.LEFT:
+			case OpenSearchPPLParser.ASCII:
+			case OpenSearchPPLParser.LOCATE:
+			case OpenSearchPPLParser.REPLACE:
+			case OpenSearchPPLParser.SPAN:
+			case OpenSearchPPLParser.MS:
+			case OpenSearchPPLParser.S:
+			case OpenSearchPPLParser.M:
+			case OpenSearchPPLParser.H:
+			case OpenSearchPPLParser.W:
+			case OpenSearchPPLParser.Q:
+			case OpenSearchPPLParser.Y:
+			case OpenSearchPPLParser.ID:
+			case OpenSearchPPLParser.BQUOTA_STRING:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 818;
+				this.qualifiedName();
+				}
+				break;
+			case OpenSearchPPLParser.DQUOTA_STRING:
+			case OpenSearchPPLParser.SQUOTA_STRING:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 819;
+				this.stringLiteral();
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public relevanceQuery(): RelevanceQueryContext {
+		let _localctx: RelevanceQueryContext = new RelevanceQueryContext(this._ctx, this.state);
+		this.enterRule(_localctx, 144, OpenSearchPPLParser.RULE_relevanceQuery);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 822;
+			this.relevanceArgValue();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public relevanceArgValue(): RelevanceArgValueContext {
+		let _localctx: RelevanceArgValueContext = new RelevanceArgValueContext(this._ctx, this.state);
+		this.enterRule(_localctx, 146, OpenSearchPPLParser.RULE_relevanceArgValue);
+		try {
+			this.state = 826;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 68, this._ctx) ) {
+			case 1:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 824;
+				this.qualifiedName();
+				}
+				break;
+
+			case 2:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 825;
+				this.literalValue();
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public mathematicalFunctionBase(): MathematicalFunctionBaseContext {
+		let _localctx: MathematicalFunctionBaseContext = new MathematicalFunctionBaseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 148, OpenSearchPPLParser.RULE_mathematicalFunctionBase);
+		try {
+			this.state = 850;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.ABS:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 828;
+				this.match(OpenSearchPPLParser.ABS);
+				}
+				break;
+			case OpenSearchPPLParser.CEIL:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 829;
+				this.match(OpenSearchPPLParser.CEIL);
+				}
+				break;
+			case OpenSearchPPLParser.CEILING:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 830;
+				this.match(OpenSearchPPLParser.CEILING);
+				}
+				break;
+			case OpenSearchPPLParser.CONV:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 831;
+				this.match(OpenSearchPPLParser.CONV);
+				}
+				break;
+			case OpenSearchPPLParser.CRC32:
+				this.enterOuterAlt(_localctx, 5);
+				{
+				this.state = 832;
+				this.match(OpenSearchPPLParser.CRC32);
+				}
+				break;
+			case OpenSearchPPLParser.E:
+				this.enterOuterAlt(_localctx, 6);
+				{
+				this.state = 833;
+				this.match(OpenSearchPPLParser.E);
+				}
+				break;
+			case OpenSearchPPLParser.EXP:
+				this.enterOuterAlt(_localctx, 7);
+				{
+				this.state = 834;
+				this.match(OpenSearchPPLParser.EXP);
+				}
+				break;
+			case OpenSearchPPLParser.FLOOR:
+				this.enterOuterAlt(_localctx, 8);
+				{
+				this.state = 835;
+				this.match(OpenSearchPPLParser.FLOOR);
+				}
+				break;
+			case OpenSearchPPLParser.LN:
+				this.enterOuterAlt(_localctx, 9);
+				{
+				this.state = 836;
+				this.match(OpenSearchPPLParser.LN);
+				}
+				break;
+			case OpenSearchPPLParser.LOG:
+				this.enterOuterAlt(_localctx, 10);
+				{
+				this.state = 837;
+				this.match(OpenSearchPPLParser.LOG);
+				}
+				break;
+			case OpenSearchPPLParser.LOG10:
+				this.enterOuterAlt(_localctx, 11);
+				{
+				this.state = 838;
+				this.match(OpenSearchPPLParser.LOG10);
+				}
+				break;
+			case OpenSearchPPLParser.LOG2:
+				this.enterOuterAlt(_localctx, 12);
+				{
+				this.state = 839;
+				this.match(OpenSearchPPLParser.LOG2);
+				}
+				break;
+			case OpenSearchPPLParser.MOD:
+				this.enterOuterAlt(_localctx, 13);
+				{
+				this.state = 840;
+				this.match(OpenSearchPPLParser.MOD);
+				}
+				break;
+			case OpenSearchPPLParser.PI:
+				this.enterOuterAlt(_localctx, 14);
+				{
+				this.state = 841;
+				this.match(OpenSearchPPLParser.PI);
+				}
+				break;
+			case OpenSearchPPLParser.POW:
+				this.enterOuterAlt(_localctx, 15);
+				{
+				this.state = 842;
+				this.match(OpenSearchPPLParser.POW);
+				}
+				break;
+			case OpenSearchPPLParser.POWER:
+				this.enterOuterAlt(_localctx, 16);
+				{
+				this.state = 843;
+				this.match(OpenSearchPPLParser.POWER);
+				}
+				break;
+			case OpenSearchPPLParser.RAND:
+				this.enterOuterAlt(_localctx, 17);
+				{
+				this.state = 844;
+				this.match(OpenSearchPPLParser.RAND);
+				}
+				break;
+			case OpenSearchPPLParser.ROUND:
+				this.enterOuterAlt(_localctx, 18);
+				{
+				this.state = 845;
+				this.match(OpenSearchPPLParser.ROUND);
+				}
+				break;
+			case OpenSearchPPLParser.SIGN:
+				this.enterOuterAlt(_localctx, 19);
+				{
+				this.state = 846;
+				this.match(OpenSearchPPLParser.SIGN);
+				}
+				break;
+			case OpenSearchPPLParser.SQRT:
+				this.enterOuterAlt(_localctx, 20);
+				{
+				this.state = 847;
+				this.match(OpenSearchPPLParser.SQRT);
+				}
+				break;
+			case OpenSearchPPLParser.TRUNCATE:
+				this.enterOuterAlt(_localctx, 21);
+				{
+				this.state = 848;
+				this.match(OpenSearchPPLParser.TRUNCATE);
+				}
+				break;
+			case OpenSearchPPLParser.ACOS:
+			case OpenSearchPPLParser.ASIN:
+			case OpenSearchPPLParser.ATAN:
+			case OpenSearchPPLParser.ATAN2:
+			case OpenSearchPPLParser.COS:
+			case OpenSearchPPLParser.COT:
+			case OpenSearchPPLParser.DEGREES:
+			case OpenSearchPPLParser.RADIANS:
+			case OpenSearchPPLParser.SIN:
+			case OpenSearchPPLParser.TAN:
+				this.enterOuterAlt(_localctx, 22);
+				{
+				this.state = 849;
+				this.trigonometricFunctionName();
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public trigonometricFunctionName(): TrigonometricFunctionNameContext {
+		let _localctx: TrigonometricFunctionNameContext = new TrigonometricFunctionNameContext(this._ctx, this.state);
+		this.enterRule(_localctx, 150, OpenSearchPPLParser.RULE_trigonometricFunctionName);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 852;
+			_la = this._input.LA(1);
+			if (!(((((_la - 185)) & ~0x1F) === 0 && ((1 << (_la - 185)) & ((1 << (OpenSearchPPLParser.ACOS - 185)) | (1 << (OpenSearchPPLParser.ASIN - 185)) | (1 << (OpenSearchPPLParser.ATAN - 185)) | (1 << (OpenSearchPPLParser.ATAN2 - 185)) | (1 << (OpenSearchPPLParser.COS - 185)) | (1 << (OpenSearchPPLParser.COT - 185)) | (1 << (OpenSearchPPLParser.DEGREES - 185)) | (1 << (OpenSearchPPLParser.RADIANS - 185)) | (1 << (OpenSearchPPLParser.SIN - 185)) | (1 << (OpenSearchPPLParser.TAN - 185)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public dateAndTimeFunctionBase(): DateAndTimeFunctionBaseContext {
+		let _localctx: DateAndTimeFunctionBaseContext = new DateAndTimeFunctionBaseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 152, OpenSearchPPLParser.RULE_dateAndTimeFunctionBase);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 854;
+			_la = this._input.LA(1);
+			if (!(((((_la - 67)) & ~0x1F) === 0 && ((1 << (_la - 67)) & ((1 << (OpenSearchPPLParser.DATETIME - 67)) | (1 << (OpenSearchPPLParser.MICROSECOND - 67)) | (1 << (OpenSearchPPLParser.SECOND - 67)) | (1 << (OpenSearchPPLParser.MINUTE - 67)) | (1 << (OpenSearchPPLParser.HOUR - 67)) | (1 << (OpenSearchPPLParser.DAY - 67)) | (1 << (OpenSearchPPLParser.WEEK - 67)) | (1 << (OpenSearchPPLParser.MONTH - 67)) | (1 << (OpenSearchPPLParser.QUARTER - 67)) | (1 << (OpenSearchPPLParser.YEAR - 67)) | (1 << (OpenSearchPPLParser.CONVERT_TZ - 67)))) !== 0) || ((((_la - 195)) & ~0x1F) === 0 && ((1 << (_la - 195)) & ((1 << (OpenSearchPPLParser.ADDDATE - 195)) | (1 << (OpenSearchPPLParser.DATE - 195)) | (1 << (OpenSearchPPLParser.DATE_ADD - 195)) | (1 << (OpenSearchPPLParser.DATE_FORMAT - 195)) | (1 << (OpenSearchPPLParser.DATE_SUB - 195)) | (1 << (OpenSearchPPLParser.DAYNAME - 195)) | (1 << (OpenSearchPPLParser.DAYOFMONTH - 195)) | (1 << (OpenSearchPPLParser.DAYOFWEEK - 195)) | (1 << (OpenSearchPPLParser.DAYOFYEAR - 195)) | (1 << (OpenSearchPPLParser.FROM_DAYS - 195)) | (1 << (OpenSearchPPLParser.FROM_UNIXTIME - 195)) | (1 << (OpenSearchPPLParser.MAKEDATE - 195)) | (1 << (OpenSearchPPLParser.MAKETIME - 195)) | (1 << (OpenSearchPPLParser.MONTHNAME - 195)) | (1 << (OpenSearchPPLParser.PERIOD_ADD - 195)) | (1 << (OpenSearchPPLParser.PERIOD_DIFF - 195)) | (1 << (OpenSearchPPLParser.SUBDATE - 195)) | (1 << (OpenSearchPPLParser.SYSDATE - 195)) | (1 << (OpenSearchPPLParser.TIME - 195)) | (1 << (OpenSearchPPLParser.TIME_TO_SEC - 195)) | (1 << (OpenSearchPPLParser.TIMESTAMP - 195)) | (1 << (OpenSearchPPLParser.TO_DAYS - 195)))) !== 0) || _la === OpenSearchPPLParser.UNIX_TIMESTAMP)) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public constantFunctionName(): ConstantFunctionNameContext {
+		let _localctx: ConstantFunctionNameContext = new ConstantFunctionNameContext(this._ctx, this.state);
+		this.enterRule(_localctx, 154, OpenSearchPPLParser.RULE_constantFunctionName);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 856;
+			_la = this._input.LA(1);
+			if (!(((((_la - 196)) & ~0x1F) === 0 && ((1 << (_la - 196)) & ((1 << (OpenSearchPPLParser.CURDATE - 196)) | (1 << (OpenSearchPPLParser.CURRENT_DATE - 196)) | (1 << (OpenSearchPPLParser.CURRENT_TIME - 196)) | (1 << (OpenSearchPPLParser.CURRENT_TIMESTAMP - 196)) | (1 << (OpenSearchPPLParser.CURTIME - 196)) | (1 << (OpenSearchPPLParser.LOCALTIME - 196)) | (1 << (OpenSearchPPLParser.LOCALTIMESTAMP - 196)) | (1 << (OpenSearchPPLParser.NOW - 196)) | (1 << (OpenSearchPPLParser.UTC_DATE - 196)) | (1 << (OpenSearchPPLParser.UTC_TIME - 196)) | (1 << (OpenSearchPPLParser.UTC_TIMESTAMP - 196)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public conditionFunctionBase(): ConditionFunctionBaseContext {
+		let _localctx: ConditionFunctionBaseContext = new ConditionFunctionBaseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 156, OpenSearchPPLParser.RULE_conditionFunctionBase);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 858;
+			_la = this._input.LA(1);
+			if (!(((((_la - 247)) & ~0x1F) === 0 && ((1 << (_la - 247)) & ((1 << (OpenSearchPPLParser.LIKE - 247)) | (1 << (OpenSearchPPLParser.ISNULL - 247)) | (1 << (OpenSearchPPLParser.ISNOTNULL - 247)) | (1 << (OpenSearchPPLParser.IFNULL - 247)) | (1 << (OpenSearchPPLParser.NULLIF - 247)) | (1 << (OpenSearchPPLParser.IF - 247)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public systemFunctionBase(): SystemFunctionBaseContext {
+		let _localctx: SystemFunctionBaseContext = new SystemFunctionBaseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 158, OpenSearchPPLParser.RULE_systemFunctionBase);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 860;
+			this.match(OpenSearchPPLParser.TYPEOF);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public textFunctionBase(): TextFunctionBaseContext {
+		let _localctx: TextFunctionBaseContext = new TextFunctionBaseContext(this._ctx, this.state);
+		this.enterRule(_localctx, 160, OpenSearchPPLParser.RULE_textFunctionBase);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 862;
+			_la = this._input.LA(1);
+			if (!(((((_la - 229)) & ~0x1F) === 0 && ((1 << (_la - 229)) & ((1 << (OpenSearchPPLParser.SUBSTR - 229)) | (1 << (OpenSearchPPLParser.SUBSTRING - 229)) | (1 << (OpenSearchPPLParser.LTRIM - 229)) | (1 << (OpenSearchPPLParser.RTRIM - 229)) | (1 << (OpenSearchPPLParser.TRIM - 229)) | (1 << (OpenSearchPPLParser.LOWER - 229)) | (1 << (OpenSearchPPLParser.UPPER - 229)) | (1 << (OpenSearchPPLParser.CONCAT - 229)) | (1 << (OpenSearchPPLParser.CONCAT_WS - 229)) | (1 << (OpenSearchPPLParser.LENGTH - 229)) | (1 << (OpenSearchPPLParser.STRCMP - 229)) | (1 << (OpenSearchPPLParser.RIGHT - 229)) | (1 << (OpenSearchPPLParser.LEFT - 229)) | (1 << (OpenSearchPPLParser.ASCII - 229)) | (1 << (OpenSearchPPLParser.LOCATE - 229)) | (1 << (OpenSearchPPLParser.REPLACE - 229)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public comparisonOperator(): ComparisonOperatorContext {
+		let _localctx: ComparisonOperatorContext = new ComparisonOperatorContext(this._ctx, this.state);
+		this.enterRule(_localctx, 162, OpenSearchPPLParser.RULE_comparisonOperator);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 864;
+			_la = this._input.LA(1);
+			if (!(_la === OpenSearchPPLParser.REGEXP || ((((_la - 104)) & ~0x1F) === 0 && ((1 << (_la - 104)) & ((1 << (OpenSearchPPLParser.EQUAL - 104)) | (1 << (OpenSearchPPLParser.GREATER - 104)) | (1 << (OpenSearchPPLParser.LESS - 104)) | (1 << (OpenSearchPPLParser.NOT_GREATER - 104)) | (1 << (OpenSearchPPLParser.NOT_LESS - 104)) | (1 << (OpenSearchPPLParser.NOT_EQUAL - 104)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public binaryOperator(): BinaryOperatorContext {
+		let _localctx: BinaryOperatorContext = new BinaryOperatorContext(this._ctx, this.state);
+		this.enterRule(_localctx, 164, OpenSearchPPLParser.RULE_binaryOperator);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 866;
+			_la = this._input.LA(1);
+			if (!(((((_la - 110)) & ~0x1F) === 0 && ((1 << (_la - 110)) & ((1 << (OpenSearchPPLParser.PLUS - 110)) | (1 << (OpenSearchPPLParser.MINUS - 110)) | (1 << (OpenSearchPPLParser.STAR - 110)) | (1 << (OpenSearchPPLParser.DIVIDE - 110)) | (1 << (OpenSearchPPLParser.MODULE - 110)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public singleFieldRelevanceFunctionName(): SingleFieldRelevanceFunctionNameContext {
+		let _localctx: SingleFieldRelevanceFunctionNameContext = new SingleFieldRelevanceFunctionNameContext(this._ctx, this.state);
+		this.enterRule(_localctx, 166, OpenSearchPPLParser.RULE_singleFieldRelevanceFunctionName);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 868;
+			_la = this._input.LA(1);
+			if (!(((((_la - 254)) & ~0x1F) === 0 && ((1 << (_la - 254)) & ((1 << (OpenSearchPPLParser.MATCH - 254)) | (1 << (OpenSearchPPLParser.MATCH_PHRASE - 254)) | (1 << (OpenSearchPPLParser.MATCH_PHRASE_PREFIX - 254)) | (1 << (OpenSearchPPLParser.MATCH_BOOL_PREFIX - 254)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public multiFieldRelevanceFunctionName(): MultiFieldRelevanceFunctionNameContext {
+		let _localctx: MultiFieldRelevanceFunctionNameContext = new MultiFieldRelevanceFunctionNameContext(this._ctx, this.state);
+		this.enterRule(_localctx, 168, OpenSearchPPLParser.RULE_multiFieldRelevanceFunctionName);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 870;
+			_la = this._input.LA(1);
+			if (!(((((_la - 258)) & ~0x1F) === 0 && ((1 << (_la - 258)) & ((1 << (OpenSearchPPLParser.SIMPLE_QUERY_STRING - 258)) | (1 << (OpenSearchPPLParser.MULTI_MATCH - 258)) | (1 << (OpenSearchPPLParser.QUERY_STRING - 258)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public literalValue(): LiteralValueContext {
+		let _localctx: LiteralValueContext = new LiteralValueContext(this._ctx, this.state);
+		this.enterRule(_localctx, 170, OpenSearchPPLParser.RULE_literalValue);
+		try {
+			this.state = 878;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 70, this._ctx) ) {
+			case 1:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 872;
+				this.intervalLiteral();
+				}
+				break;
+
+			case 2:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 873;
+				this.stringLiteral();
+				}
+				break;
+
+			case 3:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 874;
+				this.integerLiteral();
+				}
+				break;
+
+			case 4:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 875;
+				this.decimalLiteral();
+				}
+				break;
+
+			case 5:
+				this.enterOuterAlt(_localctx, 5);
+				{
+				this.state = 876;
+				this.booleanLiteral();
+				}
+				break;
+
+			case 6:
+				this.enterOuterAlt(_localctx, 6);
+				{
+				this.state = 877;
+				this.datetimeLiteral();
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public intervalLiteral(): IntervalLiteralContext {
+		let _localctx: IntervalLiteralContext = new IntervalLiteralContext(this._ctx, this.state);
+		this.enterRule(_localctx, 172, OpenSearchPPLParser.RULE_intervalLiteral);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 880;
+			this.match(OpenSearchPPLParser.INTERVAL);
+			this.state = 881;
+			this.valueExpression(0);
+			this.state = 882;
+			this.intervalUnit();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public stringLiteral(): StringLiteralContext {
+		let _localctx: StringLiteralContext = new StringLiteralContext(this._ctx, this.state);
+		this.enterRule(_localctx, 174, OpenSearchPPLParser.RULE_stringLiteral);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 884;
+			_la = this._input.LA(1);
+			if (!(_la === OpenSearchPPLParser.DQUOTA_STRING || _la === OpenSearchPPLParser.SQUOTA_STRING)) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public integerLiteral(): IntegerLiteralContext {
+		let _localctx: IntegerLiteralContext = new IntegerLiteralContext(this._ctx, this.state);
+		this.enterRule(_localctx, 176, OpenSearchPPLParser.RULE_integerLiteral);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 887;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.PLUS || _la === OpenSearchPPLParser.MINUS) {
+				{
+				this.state = 886;
+				_la = this._input.LA(1);
+				if (!(_la === OpenSearchPPLParser.PLUS || _la === OpenSearchPPLParser.MINUS)) {
+				this._errHandler.recoverInline(this);
+				} else {
+					if (this._input.LA(1) === Token.EOF) {
+						this.matchedEOF = true;
+					}
+
+					this._errHandler.reportMatch(this);
+					this.consume();
+				}
+				}
+			}
+
+			this.state = 889;
+			this.match(OpenSearchPPLParser.INTEGER_LITERAL);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public decimalLiteral(): DecimalLiteralContext {
+		let _localctx: DecimalLiteralContext = new DecimalLiteralContext(this._ctx, this.state);
+		this.enterRule(_localctx, 178, OpenSearchPPLParser.RULE_decimalLiteral);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 892;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			if (_la === OpenSearchPPLParser.PLUS || _la === OpenSearchPPLParser.MINUS) {
+				{
+				this.state = 891;
+				_la = this._input.LA(1);
+				if (!(_la === OpenSearchPPLParser.PLUS || _la === OpenSearchPPLParser.MINUS)) {
+				this._errHandler.recoverInline(this);
+				} else {
+					if (this._input.LA(1) === Token.EOF) {
+						this.matchedEOF = true;
+					}
+
+					this._errHandler.reportMatch(this);
+					this.consume();
+				}
+				}
+			}
+
+			this.state = 894;
+			this.match(OpenSearchPPLParser.DECIMAL_LITERAL);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public booleanLiteral(): BooleanLiteralContext {
+		let _localctx: BooleanLiteralContext = new BooleanLiteralContext(this._ctx, this.state);
+		this.enterRule(_localctx, 180, OpenSearchPPLParser.RULE_booleanLiteral);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 896;
+			_la = this._input.LA(1);
+			if (!(_la === OpenSearchPPLParser.TRUE || _la === OpenSearchPPLParser.FALSE)) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public datetimeLiteral(): DatetimeLiteralContext {
+		let _localctx: DatetimeLiteralContext = new DatetimeLiteralContext(this._ctx, this.state);
+		this.enterRule(_localctx, 182, OpenSearchPPLParser.RULE_datetimeLiteral);
+		try {
+			this.state = 901;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.DATE:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 898;
+				this.dateLiteral();
+				}
+				break;
+			case OpenSearchPPLParser.TIME:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 899;
+				this.timeLiteral();
+				}
+				break;
+			case OpenSearchPPLParser.TIMESTAMP:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 900;
+				this.timestampLiteral();
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public dateLiteral(): DateLiteralContext {
+		let _localctx: DateLiteralContext = new DateLiteralContext(this._ctx, this.state);
+		this.enterRule(_localctx, 184, OpenSearchPPLParser.RULE_dateLiteral);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 903;
+			this.match(OpenSearchPPLParser.DATE);
+			this.state = 904;
+			_localctx._date = this.stringLiteral();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public timeLiteral(): TimeLiteralContext {
+		let _localctx: TimeLiteralContext = new TimeLiteralContext(this._ctx, this.state);
+		this.enterRule(_localctx, 186, OpenSearchPPLParser.RULE_timeLiteral);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 906;
+			this.match(OpenSearchPPLParser.TIME);
+			this.state = 907;
+			_localctx._time = this.stringLiteral();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public timestampLiteral(): TimestampLiteralContext {
+		let _localctx: TimestampLiteralContext = new TimestampLiteralContext(this._ctx, this.state);
+		this.enterRule(_localctx, 188, OpenSearchPPLParser.RULE_timestampLiteral);
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 909;
+			this.match(OpenSearchPPLParser.TIMESTAMP);
+			this.state = 910;
+			_localctx._timestamp = this.stringLiteral();
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public intervalUnit(): IntervalUnitContext {
+		let _localctx: IntervalUnitContext = new IntervalUnitContext(this._ctx, this.state);
+		this.enterRule(_localctx, 190, OpenSearchPPLParser.RULE_intervalUnit);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 912;
+			_la = this._input.LA(1);
+			if (!(((((_la - 69)) & ~0x1F) === 0 && ((1 << (_la - 69)) & ((1 << (OpenSearchPPLParser.MICROSECOND - 69)) | (1 << (OpenSearchPPLParser.SECOND - 69)) | (1 << (OpenSearchPPLParser.MINUTE - 69)) | (1 << (OpenSearchPPLParser.HOUR - 69)) | (1 << (OpenSearchPPLParser.DAY - 69)) | (1 << (OpenSearchPPLParser.WEEK - 69)) | (1 << (OpenSearchPPLParser.MONTH - 69)) | (1 << (OpenSearchPPLParser.QUARTER - 69)) | (1 << (OpenSearchPPLParser.YEAR - 69)) | (1 << (OpenSearchPPLParser.SECOND_MICROSECOND - 69)) | (1 << (OpenSearchPPLParser.MINUTE_MICROSECOND - 69)) | (1 << (OpenSearchPPLParser.MINUTE_SECOND - 69)) | (1 << (OpenSearchPPLParser.HOUR_MICROSECOND - 69)) | (1 << (OpenSearchPPLParser.HOUR_SECOND - 69)) | (1 << (OpenSearchPPLParser.HOUR_MINUTE - 69)) | (1 << (OpenSearchPPLParser.DAY_MICROSECOND - 69)) | (1 << (OpenSearchPPLParser.DAY_SECOND - 69)) | (1 << (OpenSearchPPLParser.DAY_MINUTE - 69)) | (1 << (OpenSearchPPLParser.DAY_HOUR - 69)) | (1 << (OpenSearchPPLParser.YEAR_MONTH - 69)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public timespanUnit(): TimespanUnitContext {
+		let _localctx: TimespanUnitContext = new TimespanUnitContext(this._ctx, this.state);
+		this.enterRule(_localctx, 192, OpenSearchPPLParser.RULE_timespanUnit);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 914;
+			_la = this._input.LA(1);
+			if (!(_la === OpenSearchPPLParser.D || ((((_la - 70)) & ~0x1F) === 0 && ((1 << (_la - 70)) & ((1 << (OpenSearchPPLParser.MILLISECOND - 70)) | (1 << (OpenSearchPPLParser.SECOND - 70)) | (1 << (OpenSearchPPLParser.MINUTE - 70)) | (1 << (OpenSearchPPLParser.HOUR - 70)) | (1 << (OpenSearchPPLParser.DAY - 70)) | (1 << (OpenSearchPPLParser.WEEK - 70)) | (1 << (OpenSearchPPLParser.MONTH - 70)) | (1 << (OpenSearchPPLParser.QUARTER - 70)) | (1 << (OpenSearchPPLParser.YEAR - 70)))) !== 0) || ((((_la - 293)) & ~0x1F) === 0 && ((1 << (_la - 293)) & ((1 << (OpenSearchPPLParser.MS - 293)) | (1 << (OpenSearchPPLParser.S - 293)) | (1 << (OpenSearchPPLParser.M - 293)) | (1 << (OpenSearchPPLParser.H - 293)) | (1 << (OpenSearchPPLParser.W - 293)) | (1 << (OpenSearchPPLParser.Q - 293)) | (1 << (OpenSearchPPLParser.Y - 293)))) !== 0))) {
+			this._errHandler.recoverInline(this);
+			} else {
+				if (this._input.LA(1) === Token.EOF) {
+					this.matchedEOF = true;
+				}
+
+				this._errHandler.reportMatch(this);
+				this.consume();
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public valueList(): ValueListContext {
+		let _localctx: ValueListContext = new ValueListContext(this._ctx, this.state);
+		this.enterRule(_localctx, 194, OpenSearchPPLParser.RULE_valueList);
+		let _la: number;
+		try {
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 916;
+			this.match(OpenSearchPPLParser.LT_PRTHS);
+			this.state = 917;
+			this.literalValue();
+			this.state = 922;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.COMMA) {
+				{
+				{
+				this.state = 918;
+				this.match(OpenSearchPPLParser.COMMA);
+				this.state = 919;
+				this.literalValue();
+				}
+				}
+				this.state = 924;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			this.state = 925;
+			this.match(OpenSearchPPLParser.RT_PRTHS);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public qualifiedName(): QualifiedNameContext {
+		let _localctx: QualifiedNameContext = new QualifiedNameContext(this._ctx, this.state);
+		this.enterRule(_localctx, 196, OpenSearchPPLParser.RULE_qualifiedName);
+		try {
+			let _alt: number;
+			_localctx = new IdentsAsQualifiedNameContext(_localctx);
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 927;
+			this.ident();
+			this.state = 932;
+			this._errHandler.sync(this);
+			_alt = this.interpreter.adaptivePredict(this._input, 75, this._ctx);
+			while (_alt !== 2 && _alt !== ATN.INVALID_ALT_NUMBER) {
+				if (_alt === 1) {
+					{
+					{
+					this.state = 928;
+					this.match(OpenSearchPPLParser.DOT);
+					this.state = 929;
+					this.ident();
+					}
+					}
+				}
+				this.state = 934;
+				this._errHandler.sync(this);
+				_alt = this.interpreter.adaptivePredict(this._input, 75, this._ctx);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public wcQualifiedName(): WcQualifiedNameContext {
+		let _localctx: WcQualifiedNameContext = new WcQualifiedNameContext(this._ctx, this.state);
+		this.enterRule(_localctx, 198, OpenSearchPPLParser.RULE_wcQualifiedName);
+		let _la: number;
+		try {
+			_localctx = new IdentsAsWildcardQualifiedNameContext(_localctx);
+			this.enterOuterAlt(_localctx, 1);
+			{
+			this.state = 935;
+			this.wildcard();
+			this.state = 940;
+			this._errHandler.sync(this);
+			_la = this._input.LA(1);
+			while (_la === OpenSearchPPLParser.DOT) {
+				{
+				{
+				this.state = 936;
+				this.match(OpenSearchPPLParser.DOT);
+				this.state = 937;
+				this.wildcard();
+				}
+				}
+				this.state = 942;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+			}
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public ident(): IdentContext {
+		let _localctx: IdentContext = new IdentContext(this._ctx, this.state);
+		this.enterRule(_localctx, 200, OpenSearchPPLParser.RULE_ident);
+		let _la: number;
+		try {
+			this.state = 953;
+			this._errHandler.sync(this);
+			switch (this._input.LA(1)) {
+			case OpenSearchPPLParser.DOT:
+			case OpenSearchPPLParser.ID:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 944;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+				if (_la === OpenSearchPPLParser.DOT) {
+					{
+					this.state = 943;
+					this.match(OpenSearchPPLParser.DOT);
+					}
+				}
+
+				this.state = 946;
+				this.match(OpenSearchPPLParser.ID);
+				}
+				break;
+			case OpenSearchPPLParser.BACKTICK:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 947;
+				this.match(OpenSearchPPLParser.BACKTICK);
+				this.state = 948;
+				this.ident();
+				this.state = 949;
+				this.match(OpenSearchPPLParser.BACKTICK);
+				}
+				break;
+			case OpenSearchPPLParser.BQUOTA_STRING:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 951;
+				this.match(OpenSearchPPLParser.BQUOTA_STRING);
+				}
+				break;
+			case OpenSearchPPLParser.D:
+			case OpenSearchPPLParser.DATETIME:
+			case OpenSearchPPLParser.MICROSECOND:
+			case OpenSearchPPLParser.MILLISECOND:
+			case OpenSearchPPLParser.SECOND:
+			case OpenSearchPPLParser.MINUTE:
+			case OpenSearchPPLParser.HOUR:
+			case OpenSearchPPLParser.DAY:
+			case OpenSearchPPLParser.WEEK:
+			case OpenSearchPPLParser.MONTH:
+			case OpenSearchPPLParser.QUARTER:
+			case OpenSearchPPLParser.YEAR:
+			case OpenSearchPPLParser.CONVERT_TZ:
+			case OpenSearchPPLParser.AVG:
+			case OpenSearchPPLParser.COUNT:
+			case OpenSearchPPLParser.MAX:
+			case OpenSearchPPLParser.MIN:
+			case OpenSearchPPLParser.SUM:
+			case OpenSearchPPLParser.VAR_SAMP:
+			case OpenSearchPPLParser.VAR_POP:
+			case OpenSearchPPLParser.STDDEV_SAMP:
+			case OpenSearchPPLParser.STDDEV_POP:
+			case OpenSearchPPLParser.FIRST:
+			case OpenSearchPPLParser.LAST:
+			case OpenSearchPPLParser.ABS:
+			case OpenSearchPPLParser.CEIL:
+			case OpenSearchPPLParser.CEILING:
+			case OpenSearchPPLParser.CONV:
+			case OpenSearchPPLParser.CRC32:
+			case OpenSearchPPLParser.E:
+			case OpenSearchPPLParser.EXP:
+			case OpenSearchPPLParser.FLOOR:
+			case OpenSearchPPLParser.LN:
+			case OpenSearchPPLParser.LOG:
+			case OpenSearchPPLParser.LOG10:
+			case OpenSearchPPLParser.LOG2:
+			case OpenSearchPPLParser.MOD:
+			case OpenSearchPPLParser.PI:
+			case OpenSearchPPLParser.POW:
+			case OpenSearchPPLParser.POWER:
+			case OpenSearchPPLParser.RAND:
+			case OpenSearchPPLParser.ROUND:
+			case OpenSearchPPLParser.SIGN:
+			case OpenSearchPPLParser.SQRT:
+			case OpenSearchPPLParser.TRUNCATE:
+			case OpenSearchPPLParser.ACOS:
+			case OpenSearchPPLParser.ASIN:
+			case OpenSearchPPLParser.ATAN:
+			case OpenSearchPPLParser.ATAN2:
+			case OpenSearchPPLParser.COS:
+			case OpenSearchPPLParser.COT:
+			case OpenSearchPPLParser.DEGREES:
+			case OpenSearchPPLParser.RADIANS:
+			case OpenSearchPPLParser.SIN:
+			case OpenSearchPPLParser.TAN:
+			case OpenSearchPPLParser.ADDDATE:
+			case OpenSearchPPLParser.CURDATE:
+			case OpenSearchPPLParser.CURRENT_DATE:
+			case OpenSearchPPLParser.CURRENT_TIME:
+			case OpenSearchPPLParser.CURRENT_TIMESTAMP:
+			case OpenSearchPPLParser.CURTIME:
+			case OpenSearchPPLParser.DATE:
+			case OpenSearchPPLParser.DATE_ADD:
+			case OpenSearchPPLParser.DATE_FORMAT:
+			case OpenSearchPPLParser.DATE_SUB:
+			case OpenSearchPPLParser.DAYNAME:
+			case OpenSearchPPLParser.DAYOFMONTH:
+			case OpenSearchPPLParser.DAYOFWEEK:
+			case OpenSearchPPLParser.DAYOFYEAR:
+			case OpenSearchPPLParser.FROM_DAYS:
+			case OpenSearchPPLParser.LOCALTIME:
+			case OpenSearchPPLParser.LOCALTIMESTAMP:
+			case OpenSearchPPLParser.FROM_UNIXTIME:
+			case OpenSearchPPLParser.MAKEDATE:
+			case OpenSearchPPLParser.MAKETIME:
+			case OpenSearchPPLParser.MONTHNAME:
+			case OpenSearchPPLParser.NOW:
+			case OpenSearchPPLParser.PERIOD_ADD:
+			case OpenSearchPPLParser.PERIOD_DIFF:
+			case OpenSearchPPLParser.SUBDATE:
+			case OpenSearchPPLParser.SYSDATE:
+			case OpenSearchPPLParser.TIME:
+			case OpenSearchPPLParser.TIME_TO_SEC:
+			case OpenSearchPPLParser.TIMESTAMP:
+			case OpenSearchPPLParser.TO_DAYS:
+			case OpenSearchPPLParser.UTC_DATE:
+			case OpenSearchPPLParser.UTC_TIME:
+			case OpenSearchPPLParser.UTC_TIMESTAMP:
+			case OpenSearchPPLParser.UNIX_TIMESTAMP:
+			case OpenSearchPPLParser.SUBSTR:
+			case OpenSearchPPLParser.SUBSTRING:
+			case OpenSearchPPLParser.LTRIM:
+			case OpenSearchPPLParser.RTRIM:
+			case OpenSearchPPLParser.TRIM:
+			case OpenSearchPPLParser.LOWER:
+			case OpenSearchPPLParser.UPPER:
+			case OpenSearchPPLParser.CONCAT:
+			case OpenSearchPPLParser.CONCAT_WS:
+			case OpenSearchPPLParser.LENGTH:
+			case OpenSearchPPLParser.STRCMP:
+			case OpenSearchPPLParser.RIGHT:
+			case OpenSearchPPLParser.LEFT:
+			case OpenSearchPPLParser.ASCII:
+			case OpenSearchPPLParser.LOCATE:
+			case OpenSearchPPLParser.REPLACE:
+			case OpenSearchPPLParser.SPAN:
+			case OpenSearchPPLParser.MS:
+			case OpenSearchPPLParser.S:
+			case OpenSearchPPLParser.M:
+			case OpenSearchPPLParser.H:
+			case OpenSearchPPLParser.W:
+			case OpenSearchPPLParser.Q:
+			case OpenSearchPPLParser.Y:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 952;
+				this.keywordsCanBeId();
+				}
+				break;
+			default:
+				throw new NoViableAltException(this);
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public wildcard(): WildcardContext {
+		let _localctx: WildcardContext = new WildcardContext(this._ctx, this.state);
+		this.enterRule(_localctx, 202, OpenSearchPPLParser.RULE_wildcard);
+		let _la: number;
+		try {
+			let _alt: number;
+			this.state = 978;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 81, this._ctx) ) {
+			case 1:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 955;
+				this.ident();
+				this.state = 960;
+				this._errHandler.sync(this);
+				_alt = this.interpreter.adaptivePredict(this._input, 79, this._ctx);
+				while (_alt !== 2 && _alt !== ATN.INVALID_ALT_NUMBER) {
+					if (_alt === 1) {
+						{
+						{
+						this.state = 956;
+						this.match(OpenSearchPPLParser.MODULE);
+						this.state = 957;
+						this.ident();
+						}
+						}
+					}
+					this.state = 962;
+					this._errHandler.sync(this);
+					_alt = this.interpreter.adaptivePredict(this._input, 79, this._ctx);
+				}
+				this.state = 964;
+				this._errHandler.sync(this);
+				_la = this._input.LA(1);
+				if (_la === OpenSearchPPLParser.MODULE) {
+					{
+					this.state = 963;
+					this.match(OpenSearchPPLParser.MODULE);
+					}
+				}
+
+				}
+				break;
+
+			case 2:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 966;
+				this.match(OpenSearchPPLParser.SINGLE_QUOTE);
+				this.state = 967;
+				this.wildcard();
+				this.state = 968;
+				this.match(OpenSearchPPLParser.SINGLE_QUOTE);
+				}
+				break;
+
+			case 3:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 970;
+				this.match(OpenSearchPPLParser.DOUBLE_QUOTE);
+				this.state = 971;
+				this.wildcard();
+				this.state = 972;
+				this.match(OpenSearchPPLParser.DOUBLE_QUOTE);
+				}
+				break;
+
+			case 4:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 974;
+				this.match(OpenSearchPPLParser.BACKTICK);
+				this.state = 975;
+				this.wildcard();
+				this.state = 976;
+				this.match(OpenSearchPPLParser.BACKTICK);
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+	// @RuleVersion(0)
+	public keywordsCanBeId(): KeywordsCanBeIdContext {
+		let _localctx: KeywordsCanBeIdContext = new KeywordsCanBeIdContext(this._ctx, this.state);
+		this.enterRule(_localctx, 204, OpenSearchPPLParser.RULE_keywordsCanBeId);
+		try {
+			this.state = 993;
+			this._errHandler.sync(this);
+			switch ( this.interpreter.adaptivePredict(this._input, 82, this._ctx) ) {
+			case 1:
+				this.enterOuterAlt(_localctx, 1);
+				{
+				this.state = 980;
+				this.match(OpenSearchPPLParser.D);
+				}
+				break;
+
+			case 2:
+				this.enterOuterAlt(_localctx, 2);
+				{
+				this.state = 981;
+				this.statsFunctionName();
+				}
+				break;
+
+			case 3:
+				this.enterOuterAlt(_localctx, 3);
+				{
+				this.state = 982;
+				this.match(OpenSearchPPLParser.TIMESTAMP);
+				}
+				break;
+
+			case 4:
+				this.enterOuterAlt(_localctx, 4);
+				{
+				this.state = 983;
+				this.match(OpenSearchPPLParser.DATE);
+				}
+				break;
+
+			case 5:
+				this.enterOuterAlt(_localctx, 5);
+				{
+				this.state = 984;
+				this.match(OpenSearchPPLParser.TIME);
+				}
+				break;
+
+			case 6:
+				this.enterOuterAlt(_localctx, 6);
+				{
+				this.state = 985;
+				this.match(OpenSearchPPLParser.FIRST);
+				}
+				break;
+
+			case 7:
+				this.enterOuterAlt(_localctx, 7);
+				{
+				this.state = 986;
+				this.match(OpenSearchPPLParser.LAST);
+				}
+				break;
+
+			case 8:
+				this.enterOuterAlt(_localctx, 8);
+				{
+				this.state = 987;
+				this.timespanUnit();
+				}
+				break;
+
+			case 9:
+				this.enterOuterAlt(_localctx, 9);
+				{
+				this.state = 988;
+				this.match(OpenSearchPPLParser.SPAN);
+				}
+				break;
+
+			case 10:
+				this.enterOuterAlt(_localctx, 10);
+				{
+				this.state = 989;
+				this.constantFunctionName();
+				}
+				break;
+
+			case 11:
+				this.enterOuterAlt(_localctx, 11);
+				{
+				this.state = 990;
+				this.dateAndTimeFunctionBase();
+				}
+				break;
+
+			case 12:
+				this.enterOuterAlt(_localctx, 12);
+				{
+				this.state = 991;
+				this.textFunctionBase();
+				}
+				break;
+
+			case 13:
+				this.enterOuterAlt(_localctx, 13);
+				{
+				this.state = 992;
+				this.mathematicalFunctionBase();
+				}
+				break;
+			}
+		}
+		catch (re) {
+			if (re instanceof RecognitionException) {
+				_localctx.exception = re;
+				this._errHandler.reportError(this, re);
+				this._errHandler.recover(this, re);
+			} else {
+				throw re;
+			}
+		}
+		finally {
+			this.exitRule();
+		}
+		return _localctx;
+	}
+
+	public sempred(_localctx: RuleContext, ruleIndex: number, predIndex: number): boolean {
+		switch (ruleIndex) {
+		case 43:
+			return this.logicalExpression_sempred(_localctx as LogicalExpressionContext, predIndex);
+
+		case 45:
+			return this.valueExpression_sempred(_localctx as ValueExpressionContext, predIndex);
+		}
+		return true;
+	}
+	private logicalExpression_sempred(_localctx: LogicalExpressionContext, predIndex: number): boolean {
+		switch (predIndex) {
+		case 0:
+			return this.precpred(this._ctx, 5);
+
+		case 1:
+			return this.precpred(this._ctx, 4);
+
+		case 2:
+			return this.precpred(this._ctx, 3);
+		}
+		return true;
+	}
+	private valueExpression_sempred(_localctx: ValueExpressionContext, predIndex: number): boolean {
+		switch (predIndex) {
+		case 3:
+			return this.precpred(this._ctx, 3);
+		}
+		return true;
+	}
+
+	private static readonly _serializedATNSegments: number = 2;
+	private static readonly _serializedATNSegment0: string =
+		"\x03\uC91D\uCABA\u058D\uAFBA\u4F53\u0607\uEA8B\uC241\x03\u0135\u03E6\x04" +
+		"\x02\t\x02\x04\x03\t\x03\x04\x04\t\x04\x04\x05\t\x05\x04\x06\t\x06\x04" +
+		"\x07\t\x07\x04\b\t\b\x04\t\t\t\x04\n\t\n\x04\v\t\v\x04\f\t\f\x04\r\t\r" +
+		"\x04\x0E\t\x0E\x04\x0F\t\x0F\x04\x10\t\x10\x04\x11\t\x11\x04\x12\t\x12" +
+		"\x04\x13\t\x13\x04\x14\t\x14\x04\x15\t\x15\x04\x16\t\x16\x04\x17\t\x17" +
+		"\x04\x18\t\x18\x04\x19\t\x19\x04\x1A\t\x1A\x04\x1B\t\x1B\x04\x1C\t\x1C" +
+		"\x04\x1D\t\x1D\x04\x1E\t\x1E\x04\x1F\t\x1F\x04 \t \x04!\t!\x04\"\t\"\x04" +
+		"#\t#\x04$\t$\x04%\t%\x04&\t&\x04\'\t\'\x04(\t(\x04)\t)\x04*\t*\x04+\t" +
+		"+\x04,\t,\x04-\t-\x04.\t.\x04/\t/\x040\t0\x041\t1\x042\t2\x043\t3\x04" +
+		"4\t4\x045\t5\x046\t6\x047\t7\x048\t8\x049\t9\x04:\t:\x04;\t;\x04<\t<\x04" +
+		"=\t=\x04>\t>\x04?\t?\x04@\t@\x04A\tA\x04B\tB\x04C\tC\x04D\tD\x04E\tE\x04" +
+		"F\tF\x04G\tG\x04H\tH\x04I\tI\x04J\tJ\x04K\tK\x04L\tL\x04M\tM\x04N\tN\x04" +
+		"O\tO\x04P\tP\x04Q\tQ\x04R\tR\x04S\tS\x04T\tT\x04U\tU\x04V\tV\x04W\tW\x04" +
+		"X\tX\x04Y\tY\x04Z\tZ\x04[\t[\x04\\\t\\\x04]\t]\x04^\t^\x04_\t_\x04`\t" +
+		"`\x04a\ta\x04b\tb\x04c\tc\x04d\td\x04e\te\x04f\tf\x04g\tg\x04h\th\x03" +
+		"\x02\x05\x02\xD2\n\x02\x03\x02\x03\x02\x03\x03\x03\x03\x03\x03\x07\x03" +
+		"\xD9\n\x03\f\x03\x0E\x03\xDC\v\x03\x03\x04\x03\x04\x03\x04\x05\x04\xE1" +
+		"\n\x04\x03\x05\x03\x05\x03\x05\x03\x05\x03\x05\x03\x05\x03\x05\x03\x05" +
+		"\x03\x05\x03\x05\x03\x05\x03\x05\x03\x05\x03\x05\x03\x05\x03\x05\x05\x05" +
+		"\xF3\n\x05\x03\x06\x05\x06\xF6\n\x06\x03\x06\x03\x06\x05\x06\xFA\n\x06" +
+		"\x03\x06\x03\x06\x03\x06\x03\x06\x05\x06\u0100\n\x06\x03\x06\x03\x06\x03" +
+		"\x06\x05\x06\u0105\n\x06\x03\x07\x03\x07\x03\x07\x03\b\x03\b\x03\b\x03" +
+		"\t\x03\t\x03\t\x03\n\x03\n\x05\n\u0112\n\n\x03\n\x03\n\x03\v\x03\v\x03" +
+		"\v\x03\v\x07\v\u011A\n\v\f\v\x0E\v\u011D\v\v\x03\f\x03\f\x03\f\x03\f\x05" +
+		"\f\u0123\n\f\x03\f\x03\f\x03\f\x05\f\u0128\n\f\x03\f\x03\f\x03\f\x05\f" +
+		"\u012D\n\f\x03\f\x03\f\x03\f\x07\f\u0132\n\f\f\f\x0E\f\u0135\v\f\x03\f" +
+		"\x05\f\u0138\n\f\x03\f\x03\f\x03\f\x05\f\u013D\n\f\x03\r\x03\r\x05\r\u0141" +
+		"\n\r\x03\r\x03\r\x03\r\x03\r\x05\r\u0147\n\r\x03\r\x03\r\x03\r\x05\r\u014C" +
+		"\n\r\x03\x0E\x03\x0E\x03\x0E\x03\x0F\x03\x0F\x03\x0F\x03\x0F\x07\x0F\u0155" +
+		"\n\x0F\f\x0F\x0E\x0F\u0158\v\x0F\x03\x10\x03\x10\x05\x10\u015C\n\x10\x03" +
+		"\x10\x03\x10\x05\x10\u0160\n\x10\x03\x11\x03\x11\x05\x11\u0164\n\x11\x03" +
+		"\x11\x03\x11\x05\x11\u0168\n\x11\x03\x12\x03\x12\x03\x12\x05\x12\u016D" +
+		"\n\x12\x03\x13\x03\x13\x03\x13\x03\x13\x03\x14\x03\x14\x03\x14\x03\x14" +
+		"\x03\x15\x03\x15\x07\x15\u0179\n\x15\f\x15\x0E\x15\u017C\v\x15\x03\x15" +
+		"\x03\x15\x03\x16\x03\x16\x03\x16\x03\x16\x03\x16\x03\x16\x05\x16\u0186" +
+		"\n\x16\x03\x17\x03\x17\x03\x18\x03\x18\x07\x18\u018C\n\x18\f\x18\x0E\x18" +
+		"\u018F\v\x18\x03\x19\x03\x19\x03\x19\x03\x19\x03\x19\x03\x19\x03\x19\x03" +
+		"\x19\x03\x19\x05\x19\u019A\n\x19\x03\x1A\x03\x1A\x07\x1A\u019E\n\x1A\f" +
+		"\x1A\x0E\x1A\u01A1\v\x1A\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B" +
+		"\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B" +
+		"\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B" +
+		"\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B\x03\x1B" +
+		"\x03\x1B\x03\x1B\x03\x1B\x05\x1B\u01C7\n\x1B\x03\x1C\x03\x1C\x07\x1C\u01CB" +
+		"\n\x1C\f\x1C\x0E\x1C\u01CE\v\x1C\x03\x1D\x03\x1D\x03\x1D\x03\x1D\x03\x1E" +
+		"\x03\x1E\x03\x1E\x03\x1E\x03\x1E\x03\x1E\x03\x1E\x03\x1E\x03\x1E\x03\x1E" +
+		"\x03\x1E\x03\x1E\x05\x1E\u01E0\n\x1E\x03\x1F\x03\x1F\x03\x1F\x07\x1F\u01E5" +
+		"\n\x1F\f\x1F\x0E\x1F\u01E8\v\x1F\x03 \x03 \x03 \x03 \x03!\x03!\x03!\x03" +
+		"\"\x03\"\x03\"\x03\"\x03\"\x03\"\x03\"\x03\"\x03\"\x05\"\u01FA\n\"\x03" +
+		"#\x03#\x03#\x05#\u01FF\n#\x03$\x03$\x03$\x03$\x03$\x03$\x05$\u0207\n$" +
+		"\x03$\x03$\x03%\x03%\x03%\x07%\u020E\n%\f%\x0E%\u0211\v%\x03&\x03&\x03" +
+		"&\x03&\x03\'\x03\'\x03\'\x05\'\u021A\n\'\x03(\x03(\x03(\x03(\x03(\x03" +
+		"(\x03(\x03(\x03(\x03(\x03(\x03(\x03(\x03(\x03(\x05(\u022B\n(\x03)\x03" +
+		")\x03*\x03*\x03*\x03*\x03*\x05*\u0234\n*\x03*\x03*\x03+\x03+\x03+\x03" +
+		"+\x03+\x03+\x03+\x03+\x03,\x03,\x03,\x05,\u0243\n,\x03-\x03-\x03-\x03" +
+		"-\x03-\x03-\x05-\u024B\n-\x03-\x03-\x03-\x03-\x03-\x05-\u0252\n-\x03-" +
+		"\x03-\x03-\x03-\x07-\u0258\n-\f-\x0E-\u025B\v-\x03.\x03.\x03.\x03.\x03" +
+		".\x03.\x03.\x03.\x05.\u0265\n.\x03/\x03/\x03/\x03/\x03/\x03/\x03/\x03" +
+		"/\x05/\u026F\n/\x03/\x03/\x03/\x03/\x07/\u0275\n/\f/\x0E/\u0278\v/\x03" +
+		"0\x030\x030\x030\x030\x050\u027F\n0\x031\x031\x031\x051\u0284\n1\x031" +
+		"\x031\x032\x032\x033\x033\x053\u028C\n3\x034\x034\x034\x034\x034\x034" +
+		"\x034\x074\u0295\n4\f4\x0E4\u0298\v4\x034\x034\x035\x035\x035\x035\x03" +
+		"5\x035\x075\u02A2\n5\f5\x0E5\u02A5\v5\x035\x035\x035\x035\x035\x075\u02AC" +
+		"\n5\f5\x0E5\u02AF\v5\x035\x035\x036\x036\x056\u02B5\n6\x037\x037\x037" +
+		"\x037\x037\x038\x038\x038\x078\u02BF\n8\f8\x0E8\u02C2\v8\x039\x039\x03" +
+		"9\x079\u02C7\n9\f9\x0E9\u02CA\v9\x03:\x05:\u02CD\n:\x03:\x03:\x03;\x03" +
+		";\x03;\x03;\x03;\x03;\x03;\x03;\x03;\x03;\x03;\x03;\x03;\x03;\x03;\x03" +
+		";\x03;\x03;\x03;\x03;\x03;\x05;\u02E6\n;\x03<\x03<\x03=\x03=\x03>\x03" +
+		">\x03>\x03>\x03>\x03?\x03?\x03?\x03?\x03?\x03?\x03?\x03@\x03@\x03@\x03" +
+		"@\x03@\x03A\x03A\x03A\x03A\x03A\x03A\x03A\x03A\x03A\x03A\x05A\u0307\n" +
+		"A\x03B\x03B\x03B\x03B\x03B\x05B\u030E\nB\x03C\x03C\x03C\x07C\u0313\nC" +
+		"\fC\x0EC\u0316\vC\x05C\u0318\nC\x03D\x03D\x03D\x05D\u031D\nD\x03D\x03" +
+		"D\x03E\x03E\x03E\x03E\x03F\x03F\x03G\x03G\x03G\x03G\x03G\x03G\x03G\x03" +
+		"G\x05G\u032F\nG\x03H\x03H\x05H\u0333\nH\x03I\x03I\x05I\u0337\nI\x03J\x03" +
+		"J\x03K\x03K\x05K\u033D\nK\x03L\x03L\x03L\x03L\x03L\x03L\x03L\x03L\x03" +
+		"L\x03L\x03L\x03L\x03L\x03L\x03L\x03L\x03L\x03L\x03L\x03L\x03L\x03L\x05" +
+		"L\u0355\nL\x03M\x03M\x03N\x03N\x03O\x03O\x03P\x03P\x03Q\x03Q\x03R\x03" +
+		"R\x03S\x03S\x03T\x03T\x03U\x03U\x03V\x03V\x03W\x03W\x03W\x03W\x03W\x03" +
+		"W\x05W\u0371\nW\x03X\x03X\x03X\x03X\x03Y\x03Y\x03Z\x05Z\u037A\nZ\x03Z" +
+		"\x03Z\x03[\x05[\u037F\n[\x03[\x03[\x03\\\x03\\\x03]\x03]\x03]\x05]\u0388" +
+		"\n]\x03^\x03^\x03^\x03_\x03_\x03_\x03`\x03`\x03`\x03a\x03a\x03b\x03b\x03" +
+		"c\x03c\x03c\x03c\x07c\u039B\nc\fc\x0Ec\u039E\vc\x03c\x03c\x03d\x03d\x03" +
+		"d\x07d\u03A5\nd\fd\x0Ed\u03A8\vd\x03e\x03e\x03e\x07e\u03AD\ne\fe\x0Ee" +
+		"\u03B0\ve\x03f\x05f\u03B3\nf\x03f\x03f\x03f\x03f\x03f\x03f\x03f\x05f\u03BC" +
+		"\nf\x03g\x03g\x03g\x07g\u03C1\ng\fg\x0Eg\u03C4\vg\x03g\x05g\u03C7\ng\x03" +
+		"g\x03g\x03g\x03g\x03g\x03g\x03g\x03g\x03g\x03g\x03g\x03g\x05g\u03D5\n" +
+		"g\x03h\x03h\x03h\x03h\x03h\x03h\x03h\x03h\x03h\x03h\x03h\x03h\x03h\x05" +
+		"h\u03E4\nh\x03h\x02\x02\x04X\\i\x02\x02\x04\x02\x06\x02\b\x02\n\x02\f" +
+		"\x02\x0E\x02\x10\x02\x12\x02\x14\x02\x16\x02\x18\x02\x1A\x02\x1C\x02\x1E" +
+		"\x02 \x02\"\x02$\x02&\x02(\x02*\x02,\x02.\x020\x022\x024\x026\x028\x02" +
+		":\x02<\x02>\x02@\x02B\x02D\x02F\x02H\x02J\x02L\x02N\x02P\x02R\x02T\x02" +
+		"V\x02X\x02Z\x02\\\x02^\x02`\x02b\x02d\x02f\x02h\x02j\x02l\x02n\x02p\x02" +
+		"r\x02t\x02v\x02x\x02z\x02|\x02~\x02\x80\x02\x82\x02\x84\x02\x86\x02\x88" +
+		"\x02\x8A\x02\x8C\x02\x8E\x02\x90\x02\x92\x02\x94\x02\x96\x02\x98\x02\x9A" +
+		"\x02\x9C\x02\x9E\x02\xA0\x02\xA2\x02\xA4\x02\xA6\x02\xA8\x02\xAA\x02\xAC" +
+		"\x02\xAE\x02\xB0\x02\xB2\x02\xB4\x02\xB6\x02\xB8\x02\xBA\x02\xBC\x02\xBE" +
+		"\x02\xC0\x02\xC2\x02\xC4\x02\xC6\x02\xC8\x02\xCA\x02\xCC\x02\xCE\x02\x02" +
+		"\x14\x03\x02pq\x03\x02\x13\x14\x04\x02\x83\x83\xA5\xA5\x07\x02\x81\x82" +
+		"\x86\x86\x89\x89\x8E\x8E\x90\x93\x05\x02\b\b99\u0107\u0125\x03\x02\xBB" +
+		"\xC4\v\x02EEGGIP\\\\\xC5\xC5\xCB\xD3\xD6\xD9\xDB\xE2\xE6\xE6\x06\x02\xC6" +
+		"\xCA\xD4\xD5\xDA\xDA\xE3\xE5\x03\x02\xF9\xFE\x04\x02\xE7\xEB\xED\xF7\x04" +
+		"\x02DDjo\x03\x02pt\x03\x02\u0100\u0103\x03\x02\u0104\u0106\x03\x02\u0132" +
+		"\u0133\x03\x02BC\x04\x02GGI[\x05\x02  HP\u0127\u012D\x02\u0430\x02\xD1" +
+		"\x03\x02\x02\x02\x04\xD5\x03\x02\x02\x02\x06\xE0\x03\x02\x02\x02\b\xF2" +
+		"\x03\x02\x02\x02\n\u0104\x03\x02\x02\x02\f\u0106\x03\x02\x02\x02\x0E\u0109" +
+		"\x03\x02\x02\x02\x10\u010C\x03\x02\x02\x02\x12\u010F\x03\x02\x02\x02\x14" +
+		"\u0115\x03\x02\x02\x02\x16\u011E\x03\x02\x02\x02\x18\u013E\x03\x02\x02" +
+		"\x02\x1A\u014D\x03\x02\x02\x02\x1C\u0150\x03\x02\x02\x02\x1E\u0159\x03" +
+		"\x02\x02\x02 \u0161\x03\x02\x02\x02\"\u0169\x03\x02\x02\x02$\u016E\x03" +
+		"\x02\x02\x02&\u0172\x03\x02\x02\x02(\u0176\x03\x02\x02\x02*\u0185\x03" +
+		"\x02\x02\x02,\u0187\x03\x02\x02\x02.\u0189\x03\x02\x02\x020\u0199\x03" +
+		"\x02\x02\x022\u019B\x03\x02\x02\x024\u01C6\x03\x02\x02\x026\u01C8\x03" +
+		"\x02\x02\x028\u01CF\x03\x02\x02\x02:\u01DF\x03\x02\x02\x02<\u01E1\x03" +
+		"\x02\x02\x02>\u01E9\x03\x02\x02\x02@\u01ED\x03\x02\x02\x02B\u01F9\x03" +
+		"\x02\x02\x02D\u01FB\x03\x02\x02\x02F\u0200\x03\x02\x02\x02H\u020A\x03" +
+		"\x02\x02\x02J\u0212\x03\x02\x02\x02L\u0216\x03\x02\x02\x02N\u022A\x03" +
+		"\x02\x02\x02P\u022C\x03\x02\x02\x02R\u022E\x03\x02\x02\x02T\u0237\x03" +
+		"\x02\x02\x02V\u0242\x03\x02\x02\x02X\u024A\x03\x02\x02\x02Z\u0264\x03" +
+		"\x02\x02\x02\\\u026E\x03\x02\x02\x02^\u027E\x03\x02\x02\x02`\u0280\x03" +
+		"\x02\x02\x02b\u0287\x03\x02\x02\x02d\u028B\x03\x02\x02\x02f\u028D\x03" +
+		"\x02\x02\x02h\u029B\x03\x02\x02\x02j\u02B4\x03\x02\x02\x02l\u02B6\x03" +
+		"\x02\x02\x02n\u02BB\x03\x02\x02\x02p\u02C3\x03\x02\x02\x02r\u02CC\x03" +
+		"\x02\x02\x02t\u02E5\x03\x02\x02\x02v\u02E7\x03\x02\x02\x02x\u02E9\x03" +
+		"\x02\x02\x02z\u02EB\x03\x02\x02\x02|\u02F0\x03\x02\x02\x02~\u02F7\x03" +
+		"\x02\x02\x02\x80\u0306\x03\x02\x02\x02\x82\u030D\x03\x02\x02\x02\x84\u0317" +
+		"\x03\x02\x02\x02\x86\u031C\x03\x02\x02\x02\x88\u0320\x03\x02\x02\x02\x8A" +
+		"\u0324\x03\x02\x02\x02\x8C\u032E\x03\x02\x02\x02\x8E\u0332\x03\x02\x02" +
+		"\x02\x90\u0336\x03\x02\x02\x02\x92\u0338\x03\x02\x02\x02\x94\u033C\x03" +
+		"\x02\x02\x02\x96\u0354\x03\x02\x02\x02\x98\u0356\x03\x02\x02\x02\x9A\u0358" +
+		"\x03\x02\x02\x02\x9C\u035A\x03\x02\x02\x02\x9E\u035C\x03\x02\x02\x02\xA0" +
+		"\u035E\x03\x02\x02\x02\xA2\u0360\x03\x02\x02\x02\xA4\u0362\x03\x02\x02" +
+		"\x02\xA6\u0364\x03\x02\x02\x02\xA8\u0366\x03\x02\x02\x02\xAA\u0368\x03" +
+		"\x02\x02\x02\xAC\u0370\x03\x02\x02\x02\xAE\u0372\x03\x02\x02\x02\xB0\u0376" +
+		"\x03\x02\x02\x02\xB2\u0379\x03\x02\x02\x02\xB4\u037E\x03\x02\x02\x02\xB6" +
+		"\u0382\x03\x02\x02\x02\xB8\u0387\x03\x02\x02\x02\xBA\u0389\x03\x02\x02" +
+		"\x02\xBC\u038C\x03\x02\x02\x02\xBE\u038F\x03\x02\x02\x02\xC0\u0392\x03" +
+		"\x02\x02\x02\xC2\u0394\x03\x02\x02\x02\xC4\u0396\x03\x02\x02\x02\xC6\u03A1" +
+		"\x03\x02\x02\x02\xC8\u03A9\x03\x02\x02\x02\xCA\u03BB\x03\x02\x02\x02\xCC" +
+		"\u03D4\x03\x02\x02\x02\xCE\u03E3\x03\x02\x02\x02\xD0\xD2\x05\x04\x03\x02" +
+		"\xD1\xD0\x03\x02\x02\x02\xD1\xD2\x03\x02\x02\x02\xD2\xD3\x03\x02\x02\x02" +
+		"\xD3\xD4\x07\x02\x02\x03\xD4\x03\x03\x02\x02\x02\xD5\xDA\x05\x06\x04\x02" +
+		"\xD6\xD7\x07g\x02\x02\xD7\xD9\x05\b\x05\x02\xD8\xD6\x03\x02\x02\x02\xD9" +
+		"\xDC\x03\x02\x02\x02\xDA\xD8\x03\x02\x02\x02\xDA\xDB\x03\x02\x02\x02\xDB" +
+		"\x05\x03\x02\x02\x02\xDC\xDA\x03\x02\x02\x02\xDD\xE1\x05\n\x06\x02\xDE" +
+		"\xE1\x05\f\x07\x02\xDF\xE1\x05\x0E\b\x02\xE0\xDD\x03\x02\x02\x02\xE0\xDE" +
+		"\x03\x02\x02\x02\xE0\xDF\x03\x02\x02\x02\xE1\x07\x03\x02\x02\x02\xE2\xF3" +
+		"\x05\x10\t\x02\xE3\xF3\x05\x12\n\x02\xE4\xF3\x05\x14\v\x02\xE5\xF3\x05" +
+		"\x16\f\x02\xE6\xF3\x05\x18\r\x02\xE7\xF3\x05\x1A\x0E\x02\xE8\xF3\x05\x1C" +
+		"\x0F\x02\xE9\xF3\x05\x1E\x10\x02\xEA\xF3\x05 \x11\x02\xEB\xF3\x05\"\x12" +
+		"\x02\xEC\xF3\x05$\x13\x02\xED\xF3\x05&\x14\x02\xEE\xF3\x05(\x15\x02\xEF" +
+		"\xF3\x05.\x18\x02\xF0\xF3\x052\x1A\x02\xF1\xF3\x056\x1C\x02\xF2\xE2\x03" +
+		"\x02\x02\x02\xF2\xE3\x03\x02\x02\x02\xF2\xE4\x03\x02\x02\x02\xF2\xE5\x03" +
+		"\x02\x02\x02\xF2\xE6\x03\x02\x02\x02\xF2\xE7\x03\x02\x02\x02\xF2\xE8\x03" +
+		"\x02\x02\x02\xF2\xE9\x03\x02\x02\x02\xF2\xEA\x03\x02\x02\x02\xF2\xEB\x03" +
+		"\x02\x02\x02\xF2\xEC\x03\x02\x02\x02\xF2\xED\x03\x02\x02\x02\xF2\xEE\x03" +
+		"\x02\x02\x02\xF2\xEF\x03\x02\x02\x02\xF2\xF0\x03\x02\x02\x02\xF2\xF1\x03" +
+		"\x02\x02\x02\xF3\t\x03\x02\x02\x02\xF4\xF6\x07\x03\x02\x02\xF5\xF4\x03" +
+		"\x02\x02\x02\xF5\xF6\x03\x02\x02\x02\xF6\xF7\x03\x02\x02\x02\xF7\u0105" +
+		"\x05:\x1E\x02\xF8\xFA\x07\x03\x02\x02\xF9\xF8\x03\x02\x02\x02\xF9\xFA" +
+		"\x03\x02\x02\x02\xFA\xFB\x03\x02\x02\x02\xFB\xFC\x05:\x1E\x02\xFC\xFD" +
+		"\x05X-\x02\xFD\u0105\x03\x02\x02\x02\xFE\u0100\x07\x03\x02\x02\xFF\xFE" +
+		"\x03\x02\x02\x02\xFF\u0100\x03\x02\x02\x02\u0100\u0101\x03\x02\x02\x02" +
+		"\u0101\u0102\x05X-\x02\u0102\u0103\x05:\x1E\x02\u0103\u0105\x03\x02\x02" +
+		"\x02\u0104\xF5\x03\x02\x02\x02\u0104\xF9\x03\x02\x02\x02\u0104\xFF\x03" +
+		"\x02\x02\x02\u0105\v\x03\x02\x02\x02\u0106\u0107\x07\x04\x02\x02\u0107" +
+		"\u0108\x05<\x1F\x02\u0108\r\x03\x02\x02\x02\u0109\u010A\x07\x05\x02\x02" +
+		"\u010A\u010B\x07\"\x02\x02\u010B\x0F\x03\x02\x02\x02\u010C\u010D\x07\x07" +
+		"\x02\x02\u010D\u010E\x05X-\x02\u010E\x11\x03\x02\x02\x02\u010F\u0111\x07" +
+		"\b\x02\x02\u0110\u0112\t\x02\x02\x02\u0111\u0110\x03\x02\x02\x02\u0111" +
+		"\u0112\x03\x02\x02\x02\u0112\u0113\x03\x02\x02\x02\u0113\u0114\x05n8\x02" +
+		"\u0114\x13\x03\x02\x02\x02\u0115\u0116\x07\t\x02\x02\u0116\u011B\x05>" +
+		" \x02\u0117\u0118\x07h\x02\x02\u0118\u011A\x05> \x02\u0119\u0117\x03\x02" +
+		"\x02\x02\u011A\u011D\x03\x02\x02\x02\u011B\u0119\x03\x02\x02\x02\u011B" +
+		"\u011C\x03\x02\x02\x02\u011C\x15\x03\x02\x02\x02\u011D\u011B\x03\x02\x02" +
+		"\x02\u011E\u0122\x07\n\x02\x02\u011F\u0120\x07+\x02\x02\u0120\u0121\x07" +
+		"j\x02\x02\u0121\u0123\x05\xB2Z\x02\u0122\u011F\x03\x02\x02\x02\u0122\u0123" +
+		"\x03\x02\x02\x02\u0123\u0127\x03\x02\x02\x02\u0124\u0125\x07,\x02\x02" +
+		"\u0125\u0126\x07j\x02\x02\u0126\u0128\x05\xB6\\\x02\u0127\u0124\x03\x02" +
+		"\x02\x02\u0127\u0128\x03\x02\x02\x02\u0128\u012C\x03\x02\x02\x02\u0129" +
+		"\u012A\x07-\x02\x02\u012A\u012B\x07j\x02\x02\u012B\u012D\x05\xB0Y\x02" +
+		"\u012C\u0129\x03\x02\x02\x02\u012C\u012D\x03\x02\x02\x02\u012D\u012E\x03" +
+		"\x02\x02\x02\u012E\u0133\x05L\'\x02\u012F\u0130\x07h\x02\x02\u0130\u0132" +
+		"\x05L\'\x02\u0131\u012F\x03\x02\x02\x02\u0132\u0135\x03\x02\x02\x02\u0133" +
+		"\u0131\x03\x02\x02\x02\u0133\u0134\x03\x02\x02\x02\u0134\u0137\x03\x02" +
+		"\x02\x02\u0135\u0133\x03\x02\x02\x02\u0136\u0138\x05B\"\x02\u0137\u0136" +
+		"\x03\x02\x02\x02\u0137\u0138\x03\x02\x02\x02\u0138\u013C\x03\x02\x02\x02" +
+		"\u0139\u013A\x07*\x02\x02\u013A\u013B\x07j\x02\x02\u013B\u013D\x05\xB6" +
+		"\\\x02\u013C\u0139\x03\x02\x02\x02\u013C\u013D\x03\x02\x02\x02\u013D\x17" +
+		"\x03\x02\x02\x02\u013E\u0140\x07\v\x02\x02\u013F\u0141\x05\xB2Z\x02\u0140" +
+		"\u013F\x03\x02\x02\x02\u0140\u0141\x03\x02\x02\x02\u0141\u0142\x03\x02" +
+		"\x02\x02\u0142\u0146\x05n8\x02\u0143\u0144\x07(\x02\x02\u0144\u0145\x07" +
+		"j\x02\x02\u0145\u0147\x05\xB6\\\x02\u0146\u0143\x03\x02\x02\x02\u0146" +
+		"\u0147\x03\x02\x02\x02\u0147\u014B\x03\x02\x02\x02\u0148\u0149\x07)\x02" +
+		"\x02\u0149\u014A\x07j\x02\x02\u014A\u014C\x05\xB6\\\x02\u014B\u0148\x03" +
+		"\x02\x02\x02\u014B\u014C\x03\x02\x02\x02\u014C\x19\x03\x02\x02\x02\u014D" +
+		"\u014E\x07\f\x02\x02\u014E\u014F\x05H%\x02\u014F\x1B\x03\x02\x02\x02\u0150" +
+		"\u0151\x07\r\x02\x02\u0151\u0156\x05J&\x02\u0152\u0153\x07h\x02\x02\u0153" +
+		"\u0155\x05J&\x02\u0154\u0152\x03\x02\x02\x02\u0155\u0158\x03\x02\x02\x02" +
+		"\u0156\u0154\x03\x02\x02\x02\u0156\u0157\x03\x02\x02\x02\u0157\x1D\x03" +
+		"\x02\x02\x02\u0158\u0156\x03\x02\x02\x02\u0159\u015B\x07\x0E\x02\x02\u015A" +
+		"\u015C\x05\xB2Z\x02\u015B\u015A\x03\x02\x02\x02\u015B\u015C\x03\x02\x02" +
+		"\x02\u015C\u015F\x03\x02\x02\x02\u015D\u015E\x07\x06\x02\x02\u015E\u0160" +
+		"\x05\xB2Z\x02\u015F\u015D\x03\x02\x02\x02\u015F\u0160\x03\x02\x02\x02" +
+		"\u0160\x1F\x03\x02\x02\x02\u0161\u0163\x07\x0F\x02\x02\u0162\u0164\x05" +
+		"\xB2Z\x02\u0163\u0162\x03\x02\x02\x02\u0163\u0164\x03\x02\x02\x02\u0164" +
+		"\u0165\x03\x02\x02\x02\u0165\u0167\x05n8\x02\u0166\u0168\x05@!\x02\u0167" +
+		"\u0166\x03\x02\x02\x02\u0167\u0168\x03\x02\x02\x02\u0168!\x03\x02\x02" +
+		"\x02\u0169\u016A\x07\x10\x02\x02\u016A\u016C\x05n8\x02\u016B\u016D\x05" +
+		"@!\x02\u016C\u016B\x03\x02\x02\x02\u016C\u016D\x03\x02\x02\x02\u016D#" +
+		"\x03\x02\x02\x02\u016E\u016F\x07\x15\x02\x02\u016F\u0170\x05V,\x02\u0170" +
+		"\u0171\x05\xB0Y\x02\u0171%\x03\x02\x02\x02\u0172\u0173\x07\x11\x02\x02" +
+		"\u0173\u0174\x05V,\x02\u0174\u0175\x05\xB0Y\x02\u0175\'\x03\x02\x02\x02" +
+		"\u0176\u017A\x07\x17\x02\x02\u0177\u0179\x05*\x16\x02\u0178\u0177\x03" +
+		"\x02\x02\x02\u0179\u017C\x03\x02\x02\x02\u017A\u0178\x03\x02\x02\x02\u017A" +
+		"\u017B\x03\x02\x02\x02\u017B\u017D\x03\x02\x02\x02\u017C\u017A\x03\x02" +
+		"\x02\x02\u017D\u017E\x05V,\x02\u017E)\x03\x02\x02\x02\u017F\u0180\x07" +
+		"\x18\x02\x02\u0180\u0181\x07j\x02\x02\u0181\u0186\x05\xB0Y\x02\u0182\u0183" +
+		"\x07\x16\x02\x02\u0183\u0184\x07j\x02\x02\u0184\u0186\x05\xB0Y\x02\u0185" +
+		"\u017F\x03\x02\x02\x02\u0185\u0182\x03\x02\x02\x02\u0186+\x03\x02\x02" +
+		"\x02\u0187\u0188\t\x03\x02\x02\u0188-\x03\x02\x02\x02\u0189\u018D\x07" +
+		"\x19\x02\x02\u018A\u018C\x050\x19\x02\u018B\u018A\x03\x02\x02\x02\u018C" +
+		"\u018F\x03\x02\x02\x02\u018D\u018B\x03\x02\x02\x02\u018D\u018E\x03\x02" +
+		"\x02\x02\u018E/\x03\x02\x02\x02\u018F\u018D\x03\x02\x02\x02\u0190\u0191" +
+		"\x07.\x02\x02\u0191\u0192\x07j\x02\x02\u0192\u019A\x05\xB2Z\x02\u0193" +
+		"\u0194\x07/\x02\x02\u0194\u0195\x07j\x02\x02\u0195\u019A\x05\xB2Z\x02" +
+		"\u0196\u0197\x070\x02\x02\u0197\u0198\x07j\x02\x02\u0198\u019A\x05\xB0" +
+		"Y\x02\u0199\u0190\x03\x02\x02\x02\u0199\u0193\x03\x02\x02\x02\u0199\u0196" +
+		"\x03\x02\x02\x02\u019A1\x03\x02\x02\x02\u019B\u019F\x07\x1A\x02\x02\u019C" +
+		"\u019E\x054\x1B\x02\u019D\u019C\x03\x02\x02\x02\u019E\u01A1\x03\x02\x02" +
+		"\x02\u019F\u019D\x03\x02\x02\x02\u019F\u01A0\x03\x02\x02\x02\u01A03\x03" +
+		"\x02\x02\x02\u01A1\u019F\x03\x02\x02\x02\u01A2\u01A3\x071\x02\x02\u01A3" +
+		"\u01A4\x07j\x02\x02\u01A4\u01C7\x05\xB2Z\x02\u01A5\u01A6\x072\x02\x02" +
+		"\u01A6\u01A7\x07j\x02\x02\u01A7\u01C7\x05\xB2Z\x02\u01A8\u01A9\x073\x02" +
+		"\x02\u01A9\u01AA\x07j\x02\x02\u01AA\u01C7\x05\xB2Z\x02\u01AB\u01AC\x07" +
+		"4\x02\x02\u01AC\u01AD\x07j\x02\x02\u01AD\u01C7\x05\xB2Z\x02\u01AE\u01AF" +
+		"\x075\x02\x02\u01AF\u01B0\x07j\x02\x02\u01B0\u01C7\x05\xB4[\x02\u01B1" +
+		"\u01B2\x076\x02\x02\u01B2\u01B3\x07j\x02\x02\u01B3\u01C7\x05\xB4[\x02" +
+		"\u01B4\u01B5\x077\x02\x02\u01B5\u01B6\x07j\x02\x02\u01B6\u01C7\x05\xB0" +
+		"Y\x02\u01B7\u01B8\x078\x02\x02\u01B8\u01B9\x07j\x02\x02\u01B9\u01C7\x05" +
+		"\xB0Y\x02\u01BA\u01BB\x07\xCD\x02\x02\u01BB\u01BC\x07j\x02\x02\u01BC\u01C7" +
+		"\x05\xB0Y\x02\u01BD\u01BE\x079\x02\x02\u01BE\u01BF\x07j\x02\x02\u01BF" +
+		"\u01C7\x05\xB0Y\x02\u01C0\u01C1\x07:\x02\x02\u01C1\u01C2\x07j\x02\x02" +
+		"\u01C2\u01C7\x05\xB2Z\x02\u01C3\u01C4\x07;\x02\x02\u01C4\u01C5\x07j\x02" +
+		"\x02\u01C5\u01C7\x05\xB4[\x02\u01C6\u01A2\x03\x02\x02\x02\u01C6\u01A5" +
+		"\x03\x02\x02\x02\u01C6\u01A8\x03\x02\x02\x02\u01C6\u01AB\x03\x02\x02\x02" +
+		"\u01C6\u01AE\x03\x02\x02\x02\u01C6\u01B1\x03\x02\x02\x02\u01C6\u01B4\x03" +
+		"\x02\x02\x02\u01C6\u01B7\x03\x02\x02\x02\u01C6\u01BA\x03\x02\x02\x02\u01C6" +
+		"\u01BD\x03\x02\x02\x02\u01C6\u01C0\x03\x02\x02\x02\u01C6\u01C3\x03\x02" +
+		"\x02\x02\u01C75\x03\x02\x02\x02\u01C8\u01CC\x07\x1B\x02\x02\u01C9\u01CB" +
+		"\x058\x1D\x02\u01CA\u01C9\x03\x02\x02\x02\u01CB\u01CE\x03\x02\x02\x02" +
+		"\u01CC\u01CA\x03\x02\x02\x02\u01CC\u01CD\x03\x02\x02\x02\u01CD7\x03\x02" +
+		"\x02\x02\u01CE\u01CC\x03\x02\x02\x02\u01CF\u01D0\x05\xCAf\x02\u01D0\u01D1" +
+		"\x07j\x02\x02\u01D1\u01D2\x05\xACW\x02\u01D29\x03\x02\x02\x02\u01D3\u01D4" +
+		"\x07\x1E\x02\x02\u01D4\u01D5\x07j\x02\x02\u01D5\u01E0\x05<\x1F\x02\u01D6" +
+		"\u01D7\x07\x1F\x02\x02\u01D7\u01D8\x07j\x02\x02\u01D8\u01E0";
+	private static readonly _serializedATNSegment1: string =
+		"\x05<\x1F\x02\u01D9\u01DA\x07\x1E\x02\x02\u01DA\u01DB\x07j\x02\x02\u01DB" +
+		"\u01E0\x05l7\x02\u01DC\u01DD\x07\x1F\x02\x02\u01DD\u01DE\x07j\x02\x02" +
+		"\u01DE\u01E0\x05l7\x02\u01DF\u01D3\x03\x02\x02\x02\u01DF\u01D6\x03\x02" +
+		"\x02\x02\u01DF\u01D9\x03\x02\x02\x02\u01DF\u01DC\x03\x02\x02\x02\u01E0" +
+		";\x03\x02\x02\x02\u01E1\u01E6\x05j6\x02\u01E2\u01E3\x07h\x02\x02\u01E3" +
+		"\u01E5\x05j6\x02\u01E4\u01E2\x03\x02\x02\x02\u01E5\u01E8\x03\x02\x02\x02" +
+		"\u01E6\u01E4\x03\x02\x02\x02\u01E6\u01E7\x03\x02\x02\x02\u01E7=\x03\x02" +
+		"\x02\x02\u01E8\u01E6\x03\x02\x02\x02\u01E9\u01EA\x05x=\x02\u01EA\u01EB" +
+		"\x07\x1C\x02\x02\u01EB\u01EC\x05x=\x02\u01EC?\x03\x02\x02\x02\u01ED\u01EE" +
+		"\x07\x1D\x02\x02\u01EE\u01EF\x05n8\x02\u01EFA\x03\x02\x02\x02\u01F0\u01F1" +
+		"\x07\x1D\x02\x02\u01F1\u01FA\x05n8\x02\u01F2\u01F3\x07\x1D\x02\x02\u01F3" +
+		"\u01FA\x05D#\x02\u01F4\u01F5\x07\x1D\x02\x02\u01F5\u01F6\x05D#\x02\u01F6" +
+		"\u01F7\x07h\x02\x02\u01F7\u01F8\x05n8\x02\u01F8\u01FA\x03\x02\x02\x02" +
+		"\u01F9\u01F0\x03\x02\x02\x02\u01F9\u01F2\x03\x02\x02\x02\u01F9\u01F4\x03" +
+		"\x02\x02\x02\u01FAC\x03\x02\x02\x02\u01FB\u01FE\x05F$\x02\u01FC\u01FD" +
+		"\x07\x1C\x02\x02\u01FD\u01FF\x05\xC6d\x02\u01FE\u01FC\x03\x02\x02\x02" +
+		"\u01FE\u01FF\x03\x02\x02\x02\u01FFE\x03\x02\x02\x02\u0200\u0201\x07\u0126" +
+		"\x02\x02\u0201\u0202\x07w\x02\x02\u0202\u0203\x05v<\x02\u0203\u0204\x07" +
+		"h\x02\x02\u0204\u0206\x05\xACW\x02\u0205\u0207\x05\xC2b\x02\u0206\u0205" +
+		"\x03\x02\x02\x02\u0206\u0207\x03\x02\x02\x02\u0207\u0208\x03\x02\x02\x02" +
+		"\u0208\u0209\x07x\x02\x02\u0209G\x03\x02\x02\x02\u020A\u020F\x05r:\x02" +
+		"\u020B\u020C\x07h\x02\x02\u020C\u020E\x05r:\x02\u020D\u020B\x03\x02\x02" +
+		"\x02\u020E\u0211\x03\x02\x02\x02\u020F\u020D\x03\x02\x02\x02\u020F\u0210" +
+		"\x03\x02\x02\x02\u0210I\x03\x02\x02\x02\u0211\u020F\x03\x02\x02\x02\u0212" +
+		"\u0213\x05v<\x02\u0213\u0214\x07j\x02\x02\u0214\u0215\x05V,\x02\u0215" +
+		"K\x03\x02\x02\x02\u0216\u0219\x05N(\x02\u0217\u0218\x07\x1C\x02\x02\u0218" +
+		"\u021A\x05x=\x02\u0219\u0217\x03\x02\x02\x02\u0219\u021A\x03\x02\x02\x02" +
+		"\u021AM\x03\x02\x02\x02\u021B\u021C\x05P)\x02\u021C\u021D\x07w\x02\x02" +
+		"\u021D\u021E\x05\\/\x02\u021E\u021F\x07x\x02\x02\u021F\u022B\x03\x02\x02" +
+		"\x02\u0220\u0221\x07\x82\x02\x02\u0221\u0222\x07w\x02\x02\u0222\u022B" +
+		"\x07x\x02\x02\u0223\u0224\t\x04\x02\x02\u0224\u0225\x07w\x02\x02\u0225" +
+		"\u0226\x05\\/\x02\u0226\u0227\x07x\x02\x02\u0227\u022B\x03\x02\x02\x02" +
+		"\u0228\u022B\x05T+\x02\u0229\u022B\x05R*\x02\u022A\u021B\x03\x02\x02\x02" +
+		"\u022A\u0220\x03\x02\x02\x02\u022A\u0223\x03\x02\x02\x02\u022A\u0228\x03" +
+		"\x02\x02\x02\u022A\u0229\x03\x02\x02\x02\u022BO\x03\x02\x02\x02\u022C" +
+		"\u022D\t\x05\x02\x02\u022DQ\x03\x02\x02\x02\u022E\u022F\x07\x95\x02\x02" +
+		"\u022F\u0230\x07w\x02\x02\u0230\u0233\x05v<\x02\u0231\u0232\x07h\x02\x02" +
+		"\u0232\u0234\x05\xB2Z\x02\u0233\u0231\x03\x02\x02\x02\u0233\u0234\x03" +
+		"\x02\x02\x02\u0234\u0235\x03\x02\x02\x02\u0235\u0236\x07x\x02\x02\u0236" +
+		"S\x03\x02\x02\x02\u0237\u0238\x07\x94\x02\x02\u0238\u0239\x07l\x02\x02" +
+		"\u0239\u023A\x05\xB2Z\x02\u023A\u023B\x07k\x02\x02\u023B\u023C\x07w\x02" +
+		"\x02\u023C\u023D\x05v<\x02\u023D\u023E\x07x\x02\x02\u023EU\x03\x02\x02" +
+		"\x02\u023F\u0243\x05X-\x02\u0240\u0243\x05Z.\x02\u0241\u0243\x05\\/\x02" +
+		"\u0242\u023F\x03\x02\x02\x02\u0242\u0240\x03\x02\x02\x02\u0242\u0241\x03" +
+		"\x02\x02\x02\u0243W\x03\x02\x02\x02\u0244\u0245\b-\x01\x02\u0245\u024B" +
+		"\x05Z.\x02\u0246\u0247\x07>\x02\x02\u0247\u024B\x05X-\b\u0248\u024B\x05" +
+		"b2\x02\u0249\u024B\x05d3\x02\u024A\u0244\x03\x02\x02\x02\u024A\u0246\x03" +
+		"\x02\x02\x02\u024A\u0248\x03\x02\x02\x02\u024A\u0249\x03\x02\x02\x02\u024B" +
+		"\u0259\x03\x02\x02\x02\u024C\u024D\f\x07\x02\x02\u024D\u024E\x07?\x02" +
+		"\x02\u024E\u0258\x05X-\b\u024F\u0251\f\x06\x02\x02\u0250\u0252\x07@\x02" +
+		"\x02\u0251\u0250\x03\x02\x02\x02\u0251\u0252\x03\x02\x02\x02\u0252\u0253" +
+		"\x03\x02\x02\x02\u0253\u0258\x05X-\x07\u0254\u0255\f\x05\x02\x02\u0255" +
+		"\u0256\x07A\x02\x02\u0256\u0258\x05X-\x06\u0257\u024C\x03\x02\x02\x02" +
+		"\u0257\u024F\x03\x02\x02\x02\u0257\u0254\x03\x02\x02\x02\u0258\u025B\x03" +
+		"\x02\x02\x02\u0259\u0257\x03\x02\x02\x02\u0259\u025A\x03\x02\x02\x02\u025A" +
+		"Y\x03\x02\x02\x02\u025B\u0259\x03\x02\x02\x02\u025C\u025D\x05\\/\x02\u025D" +
+		"\u025E\x05\xA4S\x02\u025E\u025F\x05\\/\x02\u025F\u0265\x03\x02\x02\x02" +
+		"\u0260\u0261\x05\\/\x02\u0261\u0262\x07=\x02\x02\u0262\u0263\x05\xC4c" +
+		"\x02\u0263\u0265\x03\x02\x02\x02\u0264\u025C\x03\x02\x02\x02\u0264\u0260" +
+		"\x03\x02\x02\x02\u0265[\x03\x02\x02\x02\u0266\u0267\b/\x01\x02\u0267\u0268" +
+		"\x07w\x02\x02\u0268\u0269\x05\\/\x02\u0269\u026A\x05\xA6T\x02\u026A\u026B" +
+		"\x05\\/\x02\u026B\u026C\x07x\x02\x02\u026C\u026F\x03\x02\x02\x02\u026D" +
+		"\u026F\x05^0\x02\u026E\u0266\x03\x02\x02\x02\u026E\u026D\x03\x02\x02\x02" +
+		"\u026F\u0276\x03\x02\x02\x02\u0270\u0271\f\x05\x02\x02\u0271\u0272\x05" +
+		"\xA6T\x02\u0272\u0273\x05\\/\x06\u0273\u0275\x03\x02\x02\x02\u0274\u0270" +
+		"\x03\x02\x02\x02\u0275\u0278\x03\x02\x02\x02\u0276\u0274\x03\x02\x02\x02" +
+		"\u0276\u0277\x03\x02\x02\x02\u0277]\x03\x02\x02\x02\u0278\u0276\x03\x02" +
+		"\x02\x02\u0279\u027F\x05z>\x02\u027A\u027F\x05|?\x02\u027B\u027F\x05v" +
+		"<\x02\u027C\u027F\x05\xACW\x02\u027D\u027F\x05`1\x02\u027E\u0279\x03\x02" +
+		"\x02\x02\u027E\u027A\x03\x02\x02\x02\u027E\u027B\x03\x02\x02\x02\u027E" +
+		"\u027C\x03\x02\x02\x02\u027E\u027D\x03\x02\x02\x02\u027F_\x03\x02\x02" +
+		"\x02\u0280\u0281\x05\x9CO\x02\u0281\u0283\x07w\x02\x02\u0282\u0284\x05" +
+		"\x84C\x02\u0283\u0282\x03\x02\x02\x02\u0283\u0284\x03\x02\x02\x02\u0284" +
+		"\u0285\x03\x02\x02\x02\u0285\u0286\x07x\x02\x02\u0286a\x03\x02\x02\x02" +
+		"\u0287\u0288\x05~@\x02\u0288c\x03\x02\x02\x02\u0289\u028C\x05f4\x02\u028A" +
+		"\u028C\x05h5\x02\u028B\u0289\x03\x02\x02\x02\u028B\u028A\x03\x02\x02\x02" +
+		"\u028Ce\x03\x02\x02\x02\u028D\u028E\x05\xA8U\x02\u028E\u028F\x07w\x02" +
+		"\x02\u028F\u0290\x05\x90I\x02\u0290\u0291\x07h\x02\x02\u0291\u0296\x05" +
+		"\x92J\x02\u0292\u0293\x07h\x02\x02\u0293\u0295\x05\x88E\x02\u0294\u0292" +
+		"\x03\x02\x02\x02\u0295\u0298\x03\x02\x02\x02\u0296\u0294\x03\x02\x02\x02" +
+		"\u0296\u0297\x03\x02\x02\x02\u0297\u0299\x03\x02\x02\x02\u0298\u0296\x03" +
+		"\x02\x02\x02\u0299\u029A\x07x\x02\x02\u029Ag\x03\x02\x02\x02\u029B\u029C" +
+		"\x05\xAAV\x02\u029C\u029D\x07w\x02\x02\u029D\u029E\x07y\x02\x02\u029E" +
+		"\u02A3\x05\x8CG\x02\u029F\u02A0\x07h\x02\x02\u02A0\u02A2\x05\x8CG\x02" +
+		"\u02A1\u029F\x03\x02\x02\x02\u02A2\u02A5\x03\x02\x02\x02\u02A3\u02A1\x03" +
+		"\x02\x02\x02\u02A3\u02A4\x03\x02\x02\x02\u02A4\u02A6\x03\x02\x02\x02\u02A5" +
+		"\u02A3\x03\x02\x02\x02\u02A6\u02A7\x07z\x02\x02\u02A7\u02A8\x07h\x02\x02" +
+		"\u02A8\u02AD\x05\x92J\x02\u02A9\u02AA\x07h\x02\x02\u02AA\u02AC\x05\x88" +
+		"E\x02\u02AB\u02A9\x03\x02\x02\x02\u02AC\u02AF\x03\x02\x02\x02\u02AD\u02AB" +
+		"\x03\x02\x02\x02\u02AD\u02AE\x03\x02\x02\x02\u02AE\u02B0\x03\x02\x02\x02" +
+		"\u02AF\u02AD\x03\x02\x02\x02\u02B0\u02B1\x07x\x02\x02\u02B1i\x03\x02\x02" +
+		"\x02\u02B2\u02B5\x05\xC6d\x02\u02B3\u02B5\x07\u0131\x02\x02\u02B4\u02B2" +
+		"\x03\x02\x02\x02\u02B4\u02B3\x03\x02\x02\x02\u02B5k\x03\x02\x02\x02\u02B6" +
+		"\u02B7\x05\xC6d\x02\u02B7\u02B8\x07w\x02\x02\u02B8\u02B9\x05\x84C\x02" +
+		"\u02B9\u02BA\x07x\x02\x02\u02BAm\x03\x02\x02\x02\u02BB\u02C0\x05v<\x02" +
+		"\u02BC\u02BD\x07h\x02\x02\u02BD\u02BF\x05v<\x02\u02BE\u02BC\x03\x02\x02" +
+		"\x02\u02BF\u02C2\x03\x02\x02\x02\u02C0\u02BE\x03\x02\x02\x02\u02C0\u02C1" +
+		"\x03\x02\x02\x02\u02C1o\x03\x02\x02\x02\u02C2\u02C0\x03\x02\x02\x02\u02C3" +
+		"\u02C8\x05x=\x02\u02C4\u02C5\x07h\x02\x02\u02C5\u02C7\x05x=\x02\u02C6" +
+		"\u02C4\x03\x02\x02\x02\u02C7\u02CA\x03\x02\x02\x02\u02C8\u02C6\x03\x02" +
+		"\x02\x02\u02C8\u02C9\x03\x02\x02\x02\u02C9q\x03\x02\x02\x02\u02CA\u02C8" +
+		"\x03\x02\x02\x02\u02CB\u02CD\t\x02\x02\x02\u02CC\u02CB\x03\x02\x02\x02" +
+		"\u02CC\u02CD\x03\x02\x02\x02\u02CD\u02CE\x03\x02\x02\x02\u02CE\u02CF\x05" +
+		"t;\x02\u02CFs\x03\x02\x02\x02\u02D0\u02E6\x05v<\x02\u02D1\u02D2\x07$\x02" +
+		"\x02\u02D2\u02D3\x07w\x02\x02\u02D3\u02D4\x05v<\x02\u02D4\u02D5\x07x\x02" +
+		"\x02\u02D5\u02E6\x03\x02\x02\x02\u02D6\u02D7\x07%\x02\x02\u02D7\u02D8" +
+		"\x07w\x02\x02\u02D8\u02D9\x05v<\x02\u02D9\u02DA\x07x\x02\x02\u02DA\u02E6" +
+		"\x03\x02\x02\x02\u02DB\u02DC\x07&\x02\x02\u02DC\u02DD\x07w\x02\x02\u02DD" +
+		"\u02DE\x05v<\x02\u02DE\u02DF\x07x\x02\x02\u02DF\u02E6\x03\x02\x02\x02" +
+		"\u02E0\u02E1\x07\'\x02\x02\u02E1\u02E2\x07w\x02\x02\u02E2\u02E3\x05v<" +
+		"\x02\u02E3\u02E4\x07x\x02\x02\u02E4\u02E6\x03\x02\x02\x02\u02E5\u02D0" +
+		"\x03\x02\x02\x02\u02E5\u02D1\x03\x02\x02\x02\u02E5\u02D6\x03\x02\x02\x02" +
+		"\u02E5\u02DB\x03\x02\x02\x02\u02E5\u02E0\x03\x02\x02\x02\u02E6u\x03\x02" +
+		"\x02\x02\u02E7\u02E8\x05\xC6d\x02\u02E8w\x03\x02\x02\x02\u02E9\u02EA\x05" +
+		"\xC8e\x02\u02EAy\x03\x02\x02\x02\u02EB\u02EC\x05\x82B\x02\u02EC\u02ED" +
+		"\x07w\x02\x02\u02ED\u02EE\x05\x84C\x02\u02EE\u02EF\x07x\x02\x02\u02EF" +
+		"{\x03\x02\x02\x02\u02F0\u02F1\x07\xF8\x02\x02\u02F1\u02F2\x07w\x02\x02" +
+		"\u02F2\u02F3\x05V,\x02\u02F3\u02F4\x07\x1C\x02\x02\u02F4\u02F5\x05\x80" +
+		"A\x02\u02F5\u02F6\x07x\x02\x02\u02F6}\x03\x02\x02\x02\u02F7\u02F8\x05" +
+		"\x9EP\x02\u02F8\u02F9\x07w\x02\x02\u02F9\u02FA\x05\x84C\x02\u02FA\u02FB" +
+		"\x07x\x02\x02\u02FB\x7F\x03\x02\x02\x02\u02FC\u0307\x07\xCB\x02\x02\u02FD" +
+		"\u0307\x07\xDF\x02\x02\u02FE\u0307\x07\xE1\x02\x02\u02FF\u0307\x07`\x02" +
+		"\x02\u0300\u0307\x07a\x02\x02\u0301\u0307\x07b\x02\x02\u0302\u0307\x07" +
+		"c\x02\x02\u0303\u0307\x07d\x02\x02\u0304\u0307\x07e\x02\x02\u0305\u0307" +
+		"\x07f\x02\x02\u0306\u02FC\x03\x02\x02\x02\u0306\u02FD\x03\x02\x02\x02" +
+		"\u0306\u02FE\x03\x02\x02\x02\u0306\u02FF\x03\x02\x02\x02\u0306\u0300\x03" +
+		"\x02\x02\x02\u0306\u0301\x03\x02\x02\x02\u0306\u0302\x03\x02\x02\x02\u0306" +
+		"\u0303\x03\x02\x02\x02\u0306\u0304\x03\x02\x02\x02\u0306\u0305\x03\x02" +
+		"\x02\x02\u0307\x81\x03\x02\x02\x02\u0308\u030E\x05\x96L\x02\u0309\u030E" +
+		"\x05\x9AN\x02\u030A\u030E\x05\xA2R\x02\u030B\u030E\x05\x9EP\x02\u030C" +
+		"\u030E\x05\xA0Q\x02\u030D\u0308\x03\x02\x02\x02\u030D\u0309\x03\x02\x02" +
+		"\x02\u030D\u030A\x03\x02\x02\x02\u030D\u030B\x03\x02\x02\x02\u030D\u030C" +
+		"\x03\x02\x02\x02\u030E\x83\x03\x02\x02\x02\u030F\u0314\x05\x86D\x02\u0310" +
+		"\u0311\x07h\x02\x02\u0311\u0313\x05\x86D\x02\u0312\u0310\x03\x02\x02\x02" +
+		"\u0313\u0316\x03\x02\x02\x02\u0314\u0312\x03\x02\x02\x02\u0314\u0315\x03" +
+		"\x02\x02\x02\u0315\u0318\x03\x02\x02\x02\u0316\u0314\x03\x02\x02\x02\u0317" +
+		"\u030F\x03\x02\x02\x02\u0317\u0318\x03\x02\x02\x02\u0318\x85\x03\x02\x02" +
+		"\x02\u0319\u031A\x05\xCAf\x02\u031A\u031B\x07j\x02\x02\u031B\u031D\x03" +
+		"\x02\x02\x02\u031C\u0319\x03\x02\x02\x02\u031C\u031D\x03\x02\x02\x02\u031D" +
+		"\u031E\x03\x02\x02\x02\u031E\u031F\x05\\/\x02\u031F\x87\x03\x02\x02\x02" +
+		"\u0320\u0321\x05\x8AF\x02\u0321\u0322\x07j\x02\x02\u0322\u0323\x05\x94" +
+		"K\x02\u0323\x89\x03\x02\x02\x02\u0324\u0325\t\x06\x02\x02\u0325\x8B\x03" +
+		"\x02\x02\x02\u0326\u032F\x05\x90I\x02\u0327\u0328\x05\x90I\x02\u0328\u0329" +
+		"\x05\x8EH\x02\u0329\u032F\x03\x02\x02\x02\u032A\u032B\x05\x90I\x02\u032B" +
+		"\u032C\x07\x80\x02\x02\u032C\u032D\x05\x8EH\x02\u032D\u032F\x03\x02\x02" +
+		"\x02\u032E\u0326\x03\x02\x02\x02\u032E\u0327\x03\x02\x02\x02\u032E\u032A" +
+		"\x03\x02\x02\x02\u032F\x8D\x03\x02\x02\x02\u0330\u0333\x05\xB2Z\x02\u0331" +
+		"\u0333\x05\xB4[\x02\u0332\u0330\x03\x02\x02\x02\u0332\u0331\x03\x02\x02" +
+		"\x02\u0333\x8F\x03\x02\x02\x02\u0334\u0337\x05\xC6d\x02\u0335\u0337\x05" +
+		"\xB0Y\x02\u0336\u0334\x03\x02\x02\x02\u0336\u0335\x03\x02\x02\x02\u0337" +
+		"\x91\x03\x02\x02\x02\u0338\u0339\x05\x94K\x02\u0339\x93\x03\x02\x02\x02" +
+		"\u033A\u033D\x05\xC6d\x02\u033B\u033D\x05\xACW\x02\u033C\u033A\x03\x02" +
+		"\x02\x02\u033C\u033B\x03\x02\x02\x02\u033D\x95\x03\x02\x02\x02\u033E\u0355" +
+		"\x07\xA6\x02\x02\u033F\u0355\x07\xA7\x02\x02\u0340\u0355\x07\xA8\x02\x02" +
+		"\u0341\u0355\x07\xA9\x02\x02\u0342\u0355\x07\xAA\x02\x02\u0343\u0355\x07" +
+		"\xAB\x02\x02\u0344\u0355\x07\xAC\x02\x02\u0345\u0355\x07\xAD\x02\x02\u0346" +
+		"\u0355\x07\xAE\x02\x02\u0347\u0355\x07\xAF\x02\x02\u0348\u0355\x07\xB0" +
+		"\x02\x02\u0349\u0355\x07\xB1\x02\x02\u034A\u0355\x07\xB2\x02\x02\u034B" +
+		"\u0355\x07\xB3\x02\x02\u034C\u0355\x07\xB4\x02\x02\u034D\u0355\x07\xB5" +
+		"\x02\x02\u034E\u0355\x07\xB6\x02\x02\u034F\u0355\x07\xB7\x02\x02\u0350" +
+		"\u0355\x07\xB8\x02\x02\u0351\u0355\x07\xB9\x02\x02\u0352\u0355\x07\xBA" +
+		"\x02\x02\u0353\u0355\x05\x98M\x02\u0354\u033E\x03\x02\x02\x02\u0354\u033F" +
+		"\x03\x02\x02\x02\u0354\u0340\x03\x02\x02\x02\u0354\u0341\x03\x02\x02\x02" +
+		"\u0354\u0342\x03\x02\x02\x02\u0354\u0343\x03\x02\x02\x02\u0354\u0344\x03" +
+		"\x02\x02\x02\u0354\u0345\x03\x02\x02\x02\u0354\u0346\x03\x02\x02\x02\u0354" +
+		"\u0347\x03\x02\x02\x02\u0354\u0348\x03\x02\x02\x02\u0354\u0349\x03\x02" +
+		"\x02\x02\u0354\u034A\x03\x02\x02\x02\u0354\u034B\x03\x02\x02\x02\u0354" +
+		"\u034C\x03\x02\x02\x02\u0354\u034D\x03\x02\x02\x02\u0354\u034E\x03\x02" +
+		"\x02\x02\u0354\u034F\x03\x02\x02\x02\u0354\u0350\x03\x02\x02\x02\u0354" +
+		"\u0351\x03\x02\x02\x02\u0354\u0352\x03\x02\x02\x02\u0354\u0353\x03\x02" +
+		"\x02\x02\u0355\x97\x03\x02\x02\x02\u0356\u0357\t\x07\x02\x02\u0357\x99" +
+		"\x03\x02\x02\x02\u0358\u0359\t\b\x02\x02\u0359\x9B\x03\x02\x02\x02\u035A" +
+		"\u035B\t\t\x02\x02\u035B\x9D\x03\x02\x02\x02\u035C\u035D\t\n\x02\x02\u035D" +
+		"\x9F\x03\x02\x02\x02\u035E\u035F\x07\xFF\x02\x02\u035F\xA1\x03\x02\x02" +
+		"\x02\u0360\u0361\t\v\x02\x02\u0361\xA3\x03\x02\x02\x02\u0362\u0363\t\f" +
+		"\x02\x02\u0363\xA5\x03\x02\x02\x02\u0364\u0365\t\r\x02\x02\u0365\xA7\x03" +
+		"\x02\x02\x02\u0366\u0367\t\x0E\x02\x02\u0367\xA9\x03\x02\x02\x02\u0368" +
+		"\u0369\t\x0F\x02\x02\u0369\xAB\x03\x02\x02\x02\u036A\u0371\x05\xAEX\x02" +
+		"\u036B\u0371\x05\xB0Y\x02\u036C\u0371\x05\xB2Z\x02\u036D\u0371\x05\xB4" +
+		"[\x02\u036E\u0371\x05\xB6\\\x02\u036F\u0371\x05\xB8]\x02\u0370\u036A\x03" +
+		"\x02\x02\x02\u0370\u036B\x03\x02\x02\x02\u0370\u036C\x03\x02\x02\x02\u0370" +
+		"\u036D\x03\x02\x02\x02\u0370\u036E\x03\x02\x02\x02\u0370\u036F\x03\x02" +
+		"\x02\x02\u0371\xAD\x03\x02\x02\x02\u0372\u0373\x07F\x02\x02\u0373\u0374" +
+		"\x05\\/\x02\u0374\u0375\x05\xC0a\x02\u0375\xAF\x03\x02\x02\x02\u0376\u0377" +
+		"\t\x10\x02\x02\u0377\xB1\x03\x02\x02\x02\u0378\u037A\t\x02\x02\x02\u0379" +
+		"\u0378\x03\x02\x02\x02\u0379\u037A\x03\x02\x02\x02\u037A\u037B\x03\x02" +
+		"\x02\x02\u037B\u037C\x07\u012F\x02\x02\u037C\xB3\x03\x02\x02\x02\u037D" +
+		"\u037F\t\x02\x02\x02\u037E\u037D\x03\x02\x02\x02\u037E\u037F\x03\x02\x02" +
+		"\x02\u037F\u0380\x03\x02\x02\x02\u0380\u0381\x07\u0130\x02\x02\u0381\xB5" +
+		"\x03\x02\x02\x02\u0382\u0383\t\x11\x02\x02\u0383\xB7\x03\x02\x02\x02\u0384" +
+		"\u0388\x05\xBA^\x02\u0385\u0388\x05\xBC_\x02\u0386\u0388\x05\xBE`\x02" +
+		"\u0387\u0384\x03\x02\x02\x02\u0387\u0385\x03\x02\x02\x02\u0387\u0386\x03" +
+		"\x02\x02\x02\u0388\xB9\x03\x02\x02\x02\u0389\u038A\x07\xCB\x02\x02\u038A" +
+		"\u038B\x05\xB0Y\x02\u038B\xBB\x03\x02\x02\x02\u038C\u038D\x07\xDF\x02" +
+		"\x02\u038D\u038E\x05\xB0Y\x02\u038E\xBD\x03\x02\x02\x02\u038F\u0390\x07" +
+		"\xE1\x02\x02\u0390\u0391\x05\xB0Y\x02\u0391\xBF\x03\x02\x02\x02\u0392" +
+		"\u0393\t\x12\x02\x02\u0393\xC1\x03\x02\x02\x02\u0394\u0395\t\x13\x02\x02" +
+		"\u0395\xC3\x03\x02\x02\x02\u0396\u0397\x07w\x02\x02\u0397\u039C\x05\xAC" +
+		"W\x02\u0398\u0399\x07h\x02\x02\u0399\u039B\x05\xACW\x02\u039A\u0398\x03" +
+		"\x02\x02\x02\u039B\u039E\x03\x02\x02\x02\u039C\u039A\x03\x02\x02\x02\u039C" +
+		"\u039D\x03\x02\x02\x02\u039D\u039F\x03\x02\x02\x02\u039E\u039C\x03\x02" +
+		"\x02\x02\u039F\u03A0\x07x\x02\x02\u03A0\xC5\x03\x02\x02\x02\u03A1\u03A6" +
+		"\x05\xCAf\x02\u03A2\u03A3\x07i\x02\x02\u03A3\u03A5\x05\xCAf\x02\u03A4" +
+		"\u03A2\x03\x02\x02\x02\u03A5\u03A8\x03\x02\x02\x02\u03A6\u03A4\x03\x02" +
+		"\x02\x02\u03A6\u03A7\x03\x02\x02\x02\u03A7\xC7\x03\x02\x02\x02\u03A8\u03A6" +
+		"\x03\x02\x02\x02\u03A9\u03AE\x05\xCCg\x02\u03AA\u03AB\x07i\x02\x02\u03AB" +
+		"\u03AD\x05\xCCg\x02\u03AC\u03AA\x03\x02\x02\x02\u03AD\u03B0\x03\x02\x02" +
+		"\x02\u03AE\u03AC\x03\x02\x02\x02\u03AE\u03AF\x03\x02\x02\x02\u03AF\xC9" +
+		"\x03\x02\x02\x02\u03B0\u03AE\x03\x02\x02\x02\u03B1\u03B3\x07i\x02\x02" +
+		"\u03B2\u03B1\x03\x02\x02\x02\u03B2\u03B3\x03\x02\x02\x02\u03B3\u03B4\x03" +
+		"\x02\x02\x02\u03B4\u03BC\x07\u012E\x02\x02\u03B5\u03B6\x07}\x02\x02\u03B6" +
+		"\u03B7\x05\xCAf\x02\u03B7\u03B8\x07}\x02\x02\u03B8\u03BC\x03\x02\x02\x02" +
+		"\u03B9\u03BC\x07\u0134\x02\x02\u03BA\u03BC\x05\xCEh\x02\u03BB\u03B2\x03" +
+		"\x02\x02\x02\u03BB\u03B5\x03\x02\x02\x02\u03BB\u03B9\x03\x02\x02\x02\u03BB" +
+		"\u03BA\x03\x02\x02\x02\u03BC\xCB\x03\x02\x02\x02\u03BD\u03C2\x05\xCAf" +
+		"\x02\u03BE\u03BF\x07t\x02\x02\u03BF\u03C1\x05\xCAf\x02\u03C0\u03BE\x03" +
+		"\x02\x02\x02\u03C1\u03C4\x03\x02\x02\x02\u03C2\u03C0\x03\x02\x02\x02\u03C2" +
+		"\u03C3\x03\x02\x02\x02\u03C3\u03C6\x03\x02\x02\x02\u03C4\u03C2\x03\x02" +
+		"\x02\x02\u03C5\u03C7\x07t\x02\x02\u03C6\u03C5\x03\x02\x02\x02\u03C6\u03C7" +
+		"\x03\x02\x02\x02\u03C7\u03D5\x03\x02\x02\x02\u03C8\u03C9\x07{\x02\x02" +
+		"\u03C9\u03CA\x05\xCCg\x02\u03CA\u03CB\x07{\x02\x02\u03CB\u03D5\x03\x02" +
+		"\x02\x02\u03CC\u03CD\x07|\x02\x02\u03CD\u03CE\x05\xCCg\x02\u03CE\u03CF" +
+		"\x07|\x02\x02\u03CF\u03D5\x03\x02\x02\x02\u03D0\u03D1\x07}\x02\x02\u03D1" +
+		"\u03D2\x05\xCCg\x02\u03D2\u03D3\x07}\x02\x02\u03D3\u03D5\x03\x02\x02\x02" +
+		"\u03D4\u03BD\x03\x02\x02\x02\u03D4\u03C8\x03\x02\x02\x02\u03D4\u03CC\x03" +
+		"\x02\x02\x02\u03D4\u03D0\x03\x02\x02\x02\u03D5\xCD\x03\x02\x02\x02\u03D6" +
+		"\u03E4\x07 \x02\x02\u03D7\u03E4\x05P)\x02\u03D8\u03E4\x07\xE1\x02\x02" +
+		"\u03D9\u03E4\x07\xCB\x02\x02\u03DA\u03E4\x07\xDF\x02\x02\u03DB\u03E4\x07" +
+		"\x96\x02\x02\u03DC\u03E4\x07\x97\x02\x02\u03DD\u03E4\x05\xC2b\x02\u03DE" +
+		"\u03E4\x07\u0126\x02\x02\u03DF\u03E4\x05\x9CO\x02\u03E0\u03E4\x05\x9A" +
+		"N\x02\u03E1\u03E4\x05\xA2R\x02\u03E2\u03E4\x05\x96L\x02\u03E3\u03D6\x03" +
+		"\x02\x02\x02\u03E3\u03D7\x03\x02\x02\x02\u03E3\u03D8\x03\x02\x02\x02\u03E3" +
+		"\u03D9\x03\x02\x02\x02\u03E3\u03DA\x03\x02\x02\x02\u03E3\u03DB\x03\x02" +
+		"\x02\x02\u03E3\u03DC\x03\x02\x02\x02\u03E3\u03DD\x03\x02\x02\x02\u03E3" +
+		"\u03DE\x03\x02\x02\x02\u03E3\u03DF\x03\x02\x02\x02\u03E3\u03E0\x03\x02" +
+		"\x02\x02\u03E3\u03E1\x03\x02\x02\x02\u03E3\u03E2\x03\x02\x02\x02\u03E4" +
+		"\xCF\x03\x02\x02\x02U\xD1\xDA\xE0\xF2\xF5\xF9\xFF\u0104\u0111\u011B\u0122" +
+		"\u0127\u012C\u0133\u0137\u013C\u0140\u0146\u014B\u0156\u015B\u015F\u0163" +
+		"\u0167\u016C\u017A\u0185\u018D\u0199\u019F\u01C6\u01CC\u01DF\u01E6\u01F9" +
+		"\u01FE\u0206\u020F\u0219\u022A\u0233\u0242\u024A\u0251\u0257\u0259\u0264" +
+		"\u026E\u0276\u027E\u0283\u028B\u0296\u02A3\u02AD\u02B4\u02C0\u02C8\u02CC" +
+		"\u02E5\u0306\u030D\u0314\u0317\u031C\u032E\u0332\u0336\u033C\u0354\u0370" +
+		"\u0379\u037E\u0387\u039C\u03A6\u03AE\u03B2\u03BB\u03C2\u03C6\u03D4\u03E3";
+	public static readonly _serializedATN: string = Utils.join(
+		[
+			OpenSearchPPLParser._serializedATNSegment0,
+			OpenSearchPPLParser._serializedATNSegment1,
+		],
+		"",
+	);
+	public static __ATN: ATN;
+	public static get _ATN(): ATN {
+		if (!OpenSearchPPLParser.__ATN) {
+			OpenSearchPPLParser.__ATN = new ATNDeserializer().deserialize(Utils.toCharArray(OpenSearchPPLParser._serializedATN));
+		}
+
+		return OpenSearchPPLParser.__ATN;
+	}
+
+}
+
+export class RootContext extends ParserRuleContext {
+	public EOF(): TerminalNode { return this.getToken(OpenSearchPPLParser.EOF, 0); }
+	public pplStatement(): PplStatementContext | undefined {
+		return this.tryGetRuleContext(0, PplStatementContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_root; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRoot) {
+			listener.enterRoot(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRoot) {
+			listener.exitRoot(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRoot) {
+			return visitor.visitRoot(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class PplStatementContext extends ParserRuleContext {
+	public pplCommands(): PplCommandsContext {
+		return this.getRuleContext(0, PplCommandsContext);
+	}
+	public PIPE(): TerminalNode[];
+	public PIPE(i: number): TerminalNode;
+	public PIPE(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.PIPE);
+		} else {
+			return this.getToken(OpenSearchPPLParser.PIPE, i);
+		}
+	}
+	public commands(): CommandsContext[];
+	public commands(i: number): CommandsContext;
+	public commands(i?: number): CommandsContext | CommandsContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(CommandsContext);
+		} else {
+			return this.getRuleContext(i, CommandsContext);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_pplStatement; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterPplStatement) {
+			listener.enterPplStatement(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitPplStatement) {
+			listener.exitPplStatement(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitPplStatement) {
+			return visitor.visitPplStatement(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class PplCommandsContext extends ParserRuleContext {
+	public searchCommand(): SearchCommandContext | undefined {
+		return this.tryGetRuleContext(0, SearchCommandContext);
+	}
+	public describeCommand(): DescribeCommandContext | undefined {
+		return this.tryGetRuleContext(0, DescribeCommandContext);
+	}
+	public showCatalogsCommand(): ShowCatalogsCommandContext | undefined {
+		return this.tryGetRuleContext(0, ShowCatalogsCommandContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_pplCommands; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterPplCommands) {
+			listener.enterPplCommands(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitPplCommands) {
+			listener.exitPplCommands(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitPplCommands) {
+			return visitor.visitPplCommands(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class CommandsContext extends ParserRuleContext {
+	public whereCommand(): WhereCommandContext | undefined {
+		return this.tryGetRuleContext(0, WhereCommandContext);
+	}
+	public fieldsCommand(): FieldsCommandContext | undefined {
+		return this.tryGetRuleContext(0, FieldsCommandContext);
+	}
+	public renameCommand(): RenameCommandContext | undefined {
+		return this.tryGetRuleContext(0, RenameCommandContext);
+	}
+	public statsCommand(): StatsCommandContext | undefined {
+		return this.tryGetRuleContext(0, StatsCommandContext);
+	}
+	public dedupCommand(): DedupCommandContext | undefined {
+		return this.tryGetRuleContext(0, DedupCommandContext);
+	}
+	public sortCommand(): SortCommandContext | undefined {
+		return this.tryGetRuleContext(0, SortCommandContext);
+	}
+	public evalCommand(): EvalCommandContext | undefined {
+		return this.tryGetRuleContext(0, EvalCommandContext);
+	}
+	public headCommand(): HeadCommandContext | undefined {
+		return this.tryGetRuleContext(0, HeadCommandContext);
+	}
+	public topCommand(): TopCommandContext | undefined {
+		return this.tryGetRuleContext(0, TopCommandContext);
+	}
+	public rareCommand(): RareCommandContext | undefined {
+		return this.tryGetRuleContext(0, RareCommandContext);
+	}
+	public grokCommand(): GrokCommandContext | undefined {
+		return this.tryGetRuleContext(0, GrokCommandContext);
+	}
+	public parseCommand(): ParseCommandContext | undefined {
+		return this.tryGetRuleContext(0, ParseCommandContext);
+	}
+	public patternsCommand(): PatternsCommandContext | undefined {
+		return this.tryGetRuleContext(0, PatternsCommandContext);
+	}
+	public kmeansCommand(): KmeansCommandContext | undefined {
+		return this.tryGetRuleContext(0, KmeansCommandContext);
+	}
+	public adCommand(): AdCommandContext | undefined {
+		return this.tryGetRuleContext(0, AdCommandContext);
+	}
+	public mlCommand(): MlCommandContext | undefined {
+		return this.tryGetRuleContext(0, MlCommandContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_commands; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterCommands) {
+			listener.enterCommands(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitCommands) {
+			listener.exitCommands(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitCommands) {
+			return visitor.visitCommands(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class SearchCommandContext extends ParserRuleContext {
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_searchCommand; }
+	public copyFrom(ctx: SearchCommandContext): void {
+		super.copyFrom(ctx);
+	}
+}
+export class SearchFromContext extends SearchCommandContext {
+	public fromClause(): FromClauseContext {
+		return this.getRuleContext(0, FromClauseContext);
+	}
+	public SEARCH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SEARCH, 0); }
+	constructor(ctx: SearchCommandContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterSearchFrom) {
+			listener.enterSearchFrom(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitSearchFrom) {
+			listener.exitSearchFrom(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitSearchFrom) {
+			return visitor.visitSearchFrom(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class SearchFromFilterContext extends SearchCommandContext {
+	public fromClause(): FromClauseContext {
+		return this.getRuleContext(0, FromClauseContext);
+	}
+	public logicalExpression(): LogicalExpressionContext {
+		return this.getRuleContext(0, LogicalExpressionContext);
+	}
+	public SEARCH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SEARCH, 0); }
+	constructor(ctx: SearchCommandContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterSearchFromFilter) {
+			listener.enterSearchFromFilter(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitSearchFromFilter) {
+			listener.exitSearchFromFilter(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitSearchFromFilter) {
+			return visitor.visitSearchFromFilter(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class SearchFilterFromContext extends SearchCommandContext {
+	public logicalExpression(): LogicalExpressionContext {
+		return this.getRuleContext(0, LogicalExpressionContext);
+	}
+	public fromClause(): FromClauseContext {
+		return this.getRuleContext(0, FromClauseContext);
+	}
+	public SEARCH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SEARCH, 0); }
+	constructor(ctx: SearchCommandContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterSearchFilterFrom) {
+			listener.enterSearchFilterFrom(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitSearchFilterFrom) {
+			listener.exitSearchFilterFrom(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitSearchFilterFrom) {
+			return visitor.visitSearchFilterFrom(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class DescribeCommandContext extends ParserRuleContext {
+	public DESCRIBE(): TerminalNode { return this.getToken(OpenSearchPPLParser.DESCRIBE, 0); }
+	public tableSourceClause(): TableSourceClauseContext {
+		return this.getRuleContext(0, TableSourceClauseContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_describeCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterDescribeCommand) {
+			listener.enterDescribeCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitDescribeCommand) {
+			listener.exitDescribeCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitDescribeCommand) {
+			return visitor.visitDescribeCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ShowCatalogsCommandContext extends ParserRuleContext {
+	public SHOW(): TerminalNode { return this.getToken(OpenSearchPPLParser.SHOW, 0); }
+	public CATALOGS(): TerminalNode { return this.getToken(OpenSearchPPLParser.CATALOGS, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_showCatalogsCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterShowCatalogsCommand) {
+			listener.enterShowCatalogsCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitShowCatalogsCommand) {
+			listener.exitShowCatalogsCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitShowCatalogsCommand) {
+			return visitor.visitShowCatalogsCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class WhereCommandContext extends ParserRuleContext {
+	public WHERE(): TerminalNode { return this.getToken(OpenSearchPPLParser.WHERE, 0); }
+	public logicalExpression(): LogicalExpressionContext {
+		return this.getRuleContext(0, LogicalExpressionContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_whereCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterWhereCommand) {
+			listener.enterWhereCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitWhereCommand) {
+			listener.exitWhereCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitWhereCommand) {
+			return visitor.visitWhereCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class FieldsCommandContext extends ParserRuleContext {
+	public FIELDS(): TerminalNode { return this.getToken(OpenSearchPPLParser.FIELDS, 0); }
+	public fieldList(): FieldListContext {
+		return this.getRuleContext(0, FieldListContext);
+	}
+	public PLUS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PLUS, 0); }
+	public MINUS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MINUS, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_fieldsCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterFieldsCommand) {
+			listener.enterFieldsCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitFieldsCommand) {
+			listener.exitFieldsCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitFieldsCommand) {
+			return visitor.visitFieldsCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class RenameCommandContext extends ParserRuleContext {
+	public RENAME(): TerminalNode { return this.getToken(OpenSearchPPLParser.RENAME, 0); }
+	public renameClasue(): RenameClasueContext[];
+	public renameClasue(i: number): RenameClasueContext;
+	public renameClasue(i?: number): RenameClasueContext | RenameClasueContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(RenameClasueContext);
+		} else {
+			return this.getRuleContext(i, RenameClasueContext);
+		}
+	}
+	public COMMA(): TerminalNode[];
+	public COMMA(i: number): TerminalNode;
+	public COMMA(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.COMMA);
+		} else {
+			return this.getToken(OpenSearchPPLParser.COMMA, i);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_renameCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRenameCommand) {
+			listener.enterRenameCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRenameCommand) {
+			listener.exitRenameCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRenameCommand) {
+			return visitor.visitRenameCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class StatsCommandContext extends ParserRuleContext {
+	public _partitions!: IntegerLiteralContext;
+	public _allnum!: BooleanLiteralContext;
+	public _delim!: StringLiteralContext;
+	public _dedupsplit!: BooleanLiteralContext;
+	public STATS(): TerminalNode { return this.getToken(OpenSearchPPLParser.STATS, 0); }
+	public statsAggTerm(): StatsAggTermContext[];
+	public statsAggTerm(i: number): StatsAggTermContext;
+	public statsAggTerm(i?: number): StatsAggTermContext | StatsAggTermContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(StatsAggTermContext);
+		} else {
+			return this.getRuleContext(i, StatsAggTermContext);
+		}
+	}
+	public PARTITIONS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PARTITIONS, 0); }
+	public EQUAL(): TerminalNode[];
+	public EQUAL(i: number): TerminalNode;
+	public EQUAL(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.EQUAL);
+		} else {
+			return this.getToken(OpenSearchPPLParser.EQUAL, i);
+		}
+	}
+	public ALLNUM(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ALLNUM, 0); }
+	public DELIM(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DELIM, 0); }
+	public COMMA(): TerminalNode[];
+	public COMMA(i: number): TerminalNode;
+	public COMMA(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.COMMA);
+		} else {
+			return this.getToken(OpenSearchPPLParser.COMMA, i);
+		}
+	}
+	public statsByClause(): StatsByClauseContext | undefined {
+		return this.tryGetRuleContext(0, StatsByClauseContext);
+	}
+	public DEDUP_SPLITVALUES(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DEDUP_SPLITVALUES, 0); }
+	public integerLiteral(): IntegerLiteralContext | undefined {
+		return this.tryGetRuleContext(0, IntegerLiteralContext);
+	}
+	public booleanLiteral(): BooleanLiteralContext[];
+	public booleanLiteral(i: number): BooleanLiteralContext;
+	public booleanLiteral(i?: number): BooleanLiteralContext | BooleanLiteralContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(BooleanLiteralContext);
+		} else {
+			return this.getRuleContext(i, BooleanLiteralContext);
+		}
+	}
+	public stringLiteral(): StringLiteralContext | undefined {
+		return this.tryGetRuleContext(0, StringLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_statsCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterStatsCommand) {
+			listener.enterStatsCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitStatsCommand) {
+			listener.exitStatsCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitStatsCommand) {
+			return visitor.visitStatsCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class DedupCommandContext extends ParserRuleContext {
+	public _number!: IntegerLiteralContext;
+	public _keepempty!: BooleanLiteralContext;
+	public _consecutive!: BooleanLiteralContext;
+	public DEDUP(): TerminalNode { return this.getToken(OpenSearchPPLParser.DEDUP, 0); }
+	public fieldList(): FieldListContext {
+		return this.getRuleContext(0, FieldListContext);
+	}
+	public KEEPEMPTY(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.KEEPEMPTY, 0); }
+	public EQUAL(): TerminalNode[];
+	public EQUAL(i: number): TerminalNode;
+	public EQUAL(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.EQUAL);
+		} else {
+			return this.getToken(OpenSearchPPLParser.EQUAL, i);
+		}
+	}
+	public CONSECUTIVE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CONSECUTIVE, 0); }
+	public integerLiteral(): IntegerLiteralContext | undefined {
+		return this.tryGetRuleContext(0, IntegerLiteralContext);
+	}
+	public booleanLiteral(): BooleanLiteralContext[];
+	public booleanLiteral(i: number): BooleanLiteralContext;
+	public booleanLiteral(i?: number): BooleanLiteralContext | BooleanLiteralContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(BooleanLiteralContext);
+		} else {
+			return this.getRuleContext(i, BooleanLiteralContext);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_dedupCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterDedupCommand) {
+			listener.enterDedupCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitDedupCommand) {
+			listener.exitDedupCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitDedupCommand) {
+			return visitor.visitDedupCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class SortCommandContext extends ParserRuleContext {
+	public SORT(): TerminalNode { return this.getToken(OpenSearchPPLParser.SORT, 0); }
+	public sortbyClause(): SortbyClauseContext {
+		return this.getRuleContext(0, SortbyClauseContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_sortCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterSortCommand) {
+			listener.enterSortCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitSortCommand) {
+			listener.exitSortCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitSortCommand) {
+			return visitor.visitSortCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class EvalCommandContext extends ParserRuleContext {
+	public EVAL(): TerminalNode { return this.getToken(OpenSearchPPLParser.EVAL, 0); }
+	public evalClause(): EvalClauseContext[];
+	public evalClause(i: number): EvalClauseContext;
+	public evalClause(i?: number): EvalClauseContext | EvalClauseContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(EvalClauseContext);
+		} else {
+			return this.getRuleContext(i, EvalClauseContext);
+		}
+	}
+	public COMMA(): TerminalNode[];
+	public COMMA(i: number): TerminalNode;
+	public COMMA(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.COMMA);
+		} else {
+			return this.getToken(OpenSearchPPLParser.COMMA, i);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_evalCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterEvalCommand) {
+			listener.enterEvalCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitEvalCommand) {
+			listener.exitEvalCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitEvalCommand) {
+			return visitor.visitEvalCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class HeadCommandContext extends ParserRuleContext {
+	public _number!: IntegerLiteralContext;
+	public _from!: IntegerLiteralContext;
+	public HEAD(): TerminalNode { return this.getToken(OpenSearchPPLParser.HEAD, 0); }
+	public FROM(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FROM, 0); }
+	public integerLiteral(): IntegerLiteralContext[];
+	public integerLiteral(i: number): IntegerLiteralContext;
+	public integerLiteral(i?: number): IntegerLiteralContext | IntegerLiteralContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(IntegerLiteralContext);
+		} else {
+			return this.getRuleContext(i, IntegerLiteralContext);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_headCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterHeadCommand) {
+			listener.enterHeadCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitHeadCommand) {
+			listener.exitHeadCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitHeadCommand) {
+			return visitor.visitHeadCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class TopCommandContext extends ParserRuleContext {
+	public _number!: IntegerLiteralContext;
+	public TOP(): TerminalNode { return this.getToken(OpenSearchPPLParser.TOP, 0); }
+	public fieldList(): FieldListContext {
+		return this.getRuleContext(0, FieldListContext);
+	}
+	public byClause(): ByClauseContext | undefined {
+		return this.tryGetRuleContext(0, ByClauseContext);
+	}
+	public integerLiteral(): IntegerLiteralContext | undefined {
+		return this.tryGetRuleContext(0, IntegerLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_topCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterTopCommand) {
+			listener.enterTopCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitTopCommand) {
+			listener.exitTopCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitTopCommand) {
+			return visitor.visitTopCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class RareCommandContext extends ParserRuleContext {
+	public RARE(): TerminalNode { return this.getToken(OpenSearchPPLParser.RARE, 0); }
+	public fieldList(): FieldListContext {
+		return this.getRuleContext(0, FieldListContext);
+	}
+	public byClause(): ByClauseContext | undefined {
+		return this.tryGetRuleContext(0, ByClauseContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_rareCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRareCommand) {
+			listener.enterRareCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRareCommand) {
+			listener.exitRareCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRareCommand) {
+			return visitor.visitRareCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class GrokCommandContext extends ParserRuleContext {
+	public _source_field!: ExpressionContext;
+	public _pattern!: StringLiteralContext;
+	public GROK(): TerminalNode { return this.getToken(OpenSearchPPLParser.GROK, 0); }
+	public expression(): ExpressionContext | undefined {
+		return this.tryGetRuleContext(0, ExpressionContext);
+	}
+	public stringLiteral(): StringLiteralContext | undefined {
+		return this.tryGetRuleContext(0, StringLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_grokCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterGrokCommand) {
+			listener.enterGrokCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitGrokCommand) {
+			listener.exitGrokCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitGrokCommand) {
+			return visitor.visitGrokCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ParseCommandContext extends ParserRuleContext {
+	public _source_field!: ExpressionContext;
+	public _pattern!: StringLiteralContext;
+	public PARSE(): TerminalNode { return this.getToken(OpenSearchPPLParser.PARSE, 0); }
+	public expression(): ExpressionContext | undefined {
+		return this.tryGetRuleContext(0, ExpressionContext);
+	}
+	public stringLiteral(): StringLiteralContext | undefined {
+		return this.tryGetRuleContext(0, StringLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_parseCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterParseCommand) {
+			listener.enterParseCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitParseCommand) {
+			listener.exitParseCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitParseCommand) {
+			return visitor.visitParseCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class PatternsCommandContext extends ParserRuleContext {
+	public _source_field!: ExpressionContext;
+	public PATTERNS(): TerminalNode { return this.getToken(OpenSearchPPLParser.PATTERNS, 0); }
+	public patternsParameter(): PatternsParameterContext[];
+	public patternsParameter(i: number): PatternsParameterContext;
+	public patternsParameter(i?: number): PatternsParameterContext | PatternsParameterContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(PatternsParameterContext);
+		} else {
+			return this.getRuleContext(i, PatternsParameterContext);
+		}
+	}
+	public expression(): ExpressionContext | undefined {
+		return this.tryGetRuleContext(0, ExpressionContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_patternsCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterPatternsCommand) {
+			listener.enterPatternsCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitPatternsCommand) {
+			listener.exitPatternsCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitPatternsCommand) {
+			return visitor.visitPatternsCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class PatternsParameterContext extends ParserRuleContext {
+	public _new_field!: StringLiteralContext;
+	public _pattern!: StringLiteralContext;
+	public NEW_FIELD(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.NEW_FIELD, 0); }
+	public EQUAL(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.EQUAL, 0); }
+	public stringLiteral(): StringLiteralContext | undefined {
+		return this.tryGetRuleContext(0, StringLiteralContext);
+	}
+	public PATTERN(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PATTERN, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_patternsParameter; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterPatternsParameter) {
+			listener.enterPatternsParameter(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitPatternsParameter) {
+			listener.exitPatternsParameter(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitPatternsParameter) {
+			return visitor.visitPatternsParameter(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class PatternsMethodContext extends ParserRuleContext {
+	public PUNCT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PUNCT, 0); }
+	public REGEX(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.REGEX, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_patternsMethod; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterPatternsMethod) {
+			listener.enterPatternsMethod(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitPatternsMethod) {
+			listener.exitPatternsMethod(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitPatternsMethod) {
+			return visitor.visitPatternsMethod(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class KmeansCommandContext extends ParserRuleContext {
+	public KMEANS(): TerminalNode { return this.getToken(OpenSearchPPLParser.KMEANS, 0); }
+	public kmeansParameter(): KmeansParameterContext[];
+	public kmeansParameter(i: number): KmeansParameterContext;
+	public kmeansParameter(i?: number): KmeansParameterContext | KmeansParameterContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(KmeansParameterContext);
+		} else {
+			return this.getRuleContext(i, KmeansParameterContext);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_kmeansCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterKmeansCommand) {
+			listener.enterKmeansCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitKmeansCommand) {
+			listener.exitKmeansCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitKmeansCommand) {
+			return visitor.visitKmeansCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class KmeansParameterContext extends ParserRuleContext {
+	public _centroids!: IntegerLiteralContext;
+	public _iterations!: IntegerLiteralContext;
+	public _distance_type!: StringLiteralContext;
+	public CENTROIDS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CENTROIDS, 0); }
+	public EQUAL(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.EQUAL, 0); }
+	public integerLiteral(): IntegerLiteralContext | undefined {
+		return this.tryGetRuleContext(0, IntegerLiteralContext);
+	}
+	public ITERATIONS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ITERATIONS, 0); }
+	public DISTANCE_TYPE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DISTANCE_TYPE, 0); }
+	public stringLiteral(): StringLiteralContext | undefined {
+		return this.tryGetRuleContext(0, StringLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_kmeansParameter; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterKmeansParameter) {
+			listener.enterKmeansParameter(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitKmeansParameter) {
+			listener.exitKmeansParameter(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitKmeansParameter) {
+			return visitor.visitKmeansParameter(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class AdCommandContext extends ParserRuleContext {
+	public AD(): TerminalNode { return this.getToken(OpenSearchPPLParser.AD, 0); }
+	public adParameter(): AdParameterContext[];
+	public adParameter(i: number): AdParameterContext;
+	public adParameter(i?: number): AdParameterContext | AdParameterContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(AdParameterContext);
+		} else {
+			return this.getRuleContext(i, AdParameterContext);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_adCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterAdCommand) {
+			listener.enterAdCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitAdCommand) {
+			listener.exitAdCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitAdCommand) {
+			return visitor.visitAdCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class AdParameterContext extends ParserRuleContext {
+	public _number_of_trees!: IntegerLiteralContext;
+	public _shingle_size!: IntegerLiteralContext;
+	public _sample_size!: IntegerLiteralContext;
+	public _output_after!: IntegerLiteralContext;
+	public _time_decay!: DecimalLiteralContext;
+	public _anomaly_rate!: DecimalLiteralContext;
+	public _category_field!: StringLiteralContext;
+	public _time_field!: StringLiteralContext;
+	public _date_format!: StringLiteralContext;
+	public _time_zone!: StringLiteralContext;
+	public _training_data_size!: IntegerLiteralContext;
+	public _anomaly_score_threshold!: DecimalLiteralContext;
+	public NUMBER_OF_TREES(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.NUMBER_OF_TREES, 0); }
+	public EQUAL(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.EQUAL, 0); }
+	public integerLiteral(): IntegerLiteralContext | undefined {
+		return this.tryGetRuleContext(0, IntegerLiteralContext);
+	}
+	public SHINGLE_SIZE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SHINGLE_SIZE, 0); }
+	public SAMPLE_SIZE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SAMPLE_SIZE, 0); }
+	public OUTPUT_AFTER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.OUTPUT_AFTER, 0); }
+	public TIME_DECAY(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIME_DECAY, 0); }
+	public decimalLiteral(): DecimalLiteralContext | undefined {
+		return this.tryGetRuleContext(0, DecimalLiteralContext);
+	}
+	public ANOMALY_RATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ANOMALY_RATE, 0); }
+	public CATEGORY_FIELD(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CATEGORY_FIELD, 0); }
+	public stringLiteral(): StringLiteralContext | undefined {
+		return this.tryGetRuleContext(0, StringLiteralContext);
+	}
+	public TIME_FIELD(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIME_FIELD, 0); }
+	public DATE_FORMAT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DATE_FORMAT, 0); }
+	public TIME_ZONE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIME_ZONE, 0); }
+	public TRAINING_DATA_SIZE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TRAINING_DATA_SIZE, 0); }
+	public ANOMALY_SCORE_THRESHOLD(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ANOMALY_SCORE_THRESHOLD, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_adParameter; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterAdParameter) {
+			listener.enterAdParameter(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitAdParameter) {
+			listener.exitAdParameter(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitAdParameter) {
+			return visitor.visitAdParameter(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class MlCommandContext extends ParserRuleContext {
+	public ML(): TerminalNode { return this.getToken(OpenSearchPPLParser.ML, 0); }
+	public mlArg(): MlArgContext[];
+	public mlArg(i: number): MlArgContext;
+	public mlArg(i?: number): MlArgContext | MlArgContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(MlArgContext);
+		} else {
+			return this.getRuleContext(i, MlArgContext);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_mlCommand; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterMlCommand) {
+			listener.enterMlCommand(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitMlCommand) {
+			listener.exitMlCommand(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitMlCommand) {
+			return visitor.visitMlCommand(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class MlArgContext extends ParserRuleContext {
+	public _argName!: IdentContext;
+	public _argValue!: LiteralValueContext;
+	public EQUAL(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.EQUAL, 0); }
+	public ident(): IdentContext | undefined {
+		return this.tryGetRuleContext(0, IdentContext);
+	}
+	public literalValue(): LiteralValueContext | undefined {
+		return this.tryGetRuleContext(0, LiteralValueContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_mlArg; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterMlArg) {
+			listener.enterMlArg(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitMlArg) {
+			listener.exitMlArg(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitMlArg) {
+			return visitor.visitMlArg(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class FromClauseContext extends ParserRuleContext {
+	public SOURCE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SOURCE, 0); }
+	public EQUAL(): TerminalNode { return this.getToken(OpenSearchPPLParser.EQUAL, 0); }
+	public tableSourceClause(): TableSourceClauseContext | undefined {
+		return this.tryGetRuleContext(0, TableSourceClauseContext);
+	}
+	public INDEX(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.INDEX, 0); }
+	public tableFunction(): TableFunctionContext | undefined {
+		return this.tryGetRuleContext(0, TableFunctionContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_fromClause; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterFromClause) {
+			listener.enterFromClause(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitFromClause) {
+			listener.exitFromClause(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitFromClause) {
+			return visitor.visitFromClause(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class TableSourceClauseContext extends ParserRuleContext {
+	public tableSource(): TableSourceContext[];
+	public tableSource(i: number): TableSourceContext;
+	public tableSource(i?: number): TableSourceContext | TableSourceContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(TableSourceContext);
+		} else {
+			return this.getRuleContext(i, TableSourceContext);
+		}
+	}
+	public COMMA(): TerminalNode[];
+	public COMMA(i: number): TerminalNode;
+	public COMMA(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.COMMA);
+		} else {
+			return this.getToken(OpenSearchPPLParser.COMMA, i);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_tableSourceClause; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterTableSourceClause) {
+			listener.enterTableSourceClause(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitTableSourceClause) {
+			listener.exitTableSourceClause(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitTableSourceClause) {
+			return visitor.visitTableSourceClause(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class RenameClasueContext extends ParserRuleContext {
+	public _orignalField!: WcFieldExpressionContext;
+	public _renamedField!: WcFieldExpressionContext;
+	public AS(): TerminalNode { return this.getToken(OpenSearchPPLParser.AS, 0); }
+	public wcFieldExpression(): WcFieldExpressionContext[];
+	public wcFieldExpression(i: number): WcFieldExpressionContext;
+	public wcFieldExpression(i?: number): WcFieldExpressionContext | WcFieldExpressionContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(WcFieldExpressionContext);
+		} else {
+			return this.getRuleContext(i, WcFieldExpressionContext);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_renameClasue; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRenameClasue) {
+			listener.enterRenameClasue(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRenameClasue) {
+			listener.exitRenameClasue(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRenameClasue) {
+			return visitor.visitRenameClasue(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ByClauseContext extends ParserRuleContext {
+	public BY(): TerminalNode { return this.getToken(OpenSearchPPLParser.BY, 0); }
+	public fieldList(): FieldListContext {
+		return this.getRuleContext(0, FieldListContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_byClause; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterByClause) {
+			listener.enterByClause(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitByClause) {
+			listener.exitByClause(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitByClause) {
+			return visitor.visitByClause(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class StatsByClauseContext extends ParserRuleContext {
+	public BY(): TerminalNode { return this.getToken(OpenSearchPPLParser.BY, 0); }
+	public fieldList(): FieldListContext | undefined {
+		return this.tryGetRuleContext(0, FieldListContext);
+	}
+	public bySpanClause(): BySpanClauseContext | undefined {
+		return this.tryGetRuleContext(0, BySpanClauseContext);
+	}
+	public COMMA(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.COMMA, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_statsByClause; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterStatsByClause) {
+			listener.enterStatsByClause(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitStatsByClause) {
+			listener.exitStatsByClause(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitStatsByClause) {
+			return visitor.visitStatsByClause(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class BySpanClauseContext extends ParserRuleContext {
+	public _alias!: QualifiedNameContext;
+	public spanClause(): SpanClauseContext {
+		return this.getRuleContext(0, SpanClauseContext);
+	}
+	public AS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.AS, 0); }
+	public qualifiedName(): QualifiedNameContext | undefined {
+		return this.tryGetRuleContext(0, QualifiedNameContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_bySpanClause; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterBySpanClause) {
+			listener.enterBySpanClause(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitBySpanClause) {
+			listener.exitBySpanClause(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitBySpanClause) {
+			return visitor.visitBySpanClause(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class SpanClauseContext extends ParserRuleContext {
+	public _value!: LiteralValueContext;
+	public _unit!: TimespanUnitContext;
+	public SPAN(): TerminalNode { return this.getToken(OpenSearchPPLParser.SPAN, 0); }
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public fieldExpression(): FieldExpressionContext {
+		return this.getRuleContext(0, FieldExpressionContext);
+	}
+	public COMMA(): TerminalNode { return this.getToken(OpenSearchPPLParser.COMMA, 0); }
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	public literalValue(): LiteralValueContext {
+		return this.getRuleContext(0, LiteralValueContext);
+	}
+	public timespanUnit(): TimespanUnitContext | undefined {
+		return this.tryGetRuleContext(0, TimespanUnitContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_spanClause; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterSpanClause) {
+			listener.enterSpanClause(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitSpanClause) {
+			listener.exitSpanClause(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitSpanClause) {
+			return visitor.visitSpanClause(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class SortbyClauseContext extends ParserRuleContext {
+	public sortField(): SortFieldContext[];
+	public sortField(i: number): SortFieldContext;
+	public sortField(i?: number): SortFieldContext | SortFieldContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(SortFieldContext);
+		} else {
+			return this.getRuleContext(i, SortFieldContext);
+		}
+	}
+	public COMMA(): TerminalNode[];
+	public COMMA(i: number): TerminalNode;
+	public COMMA(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.COMMA);
+		} else {
+			return this.getToken(OpenSearchPPLParser.COMMA, i);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_sortbyClause; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterSortbyClause) {
+			listener.enterSortbyClause(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitSortbyClause) {
+			listener.exitSortbyClause(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitSortbyClause) {
+			return visitor.visitSortbyClause(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class EvalClauseContext extends ParserRuleContext {
+	public fieldExpression(): FieldExpressionContext {
+		return this.getRuleContext(0, FieldExpressionContext);
+	}
+	public EQUAL(): TerminalNode { return this.getToken(OpenSearchPPLParser.EQUAL, 0); }
+	public expression(): ExpressionContext {
+		return this.getRuleContext(0, ExpressionContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_evalClause; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterEvalClause) {
+			listener.enterEvalClause(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitEvalClause) {
+			listener.exitEvalClause(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitEvalClause) {
+			return visitor.visitEvalClause(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class StatsAggTermContext extends ParserRuleContext {
+	public _alias!: WcFieldExpressionContext;
+	public statsFunction(): StatsFunctionContext {
+		return this.getRuleContext(0, StatsFunctionContext);
+	}
+	public AS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.AS, 0); }
+	public wcFieldExpression(): WcFieldExpressionContext | undefined {
+		return this.tryGetRuleContext(0, WcFieldExpressionContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_statsAggTerm; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterStatsAggTerm) {
+			listener.enterStatsAggTerm(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitStatsAggTerm) {
+			listener.exitStatsAggTerm(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitStatsAggTerm) {
+			return visitor.visitStatsAggTerm(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class StatsFunctionContext extends ParserRuleContext {
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_statsFunction; }
+	public copyFrom(ctx: StatsFunctionContext): void {
+		super.copyFrom(ctx);
+	}
+}
+export class StatsFunctionCallContext extends StatsFunctionContext {
+	public statsFunctionName(): StatsFunctionNameContext {
+		return this.getRuleContext(0, StatsFunctionNameContext);
+	}
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public valueExpression(): ValueExpressionContext {
+		return this.getRuleContext(0, ValueExpressionContext);
+	}
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	constructor(ctx: StatsFunctionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterStatsFunctionCall) {
+			listener.enterStatsFunctionCall(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitStatsFunctionCall) {
+			listener.exitStatsFunctionCall(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitStatsFunctionCall) {
+			return visitor.visitStatsFunctionCall(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class CountAllFunctionCallContext extends StatsFunctionContext {
+	public COUNT(): TerminalNode { return this.getToken(OpenSearchPPLParser.COUNT, 0); }
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	constructor(ctx: StatsFunctionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterCountAllFunctionCall) {
+			listener.enterCountAllFunctionCall(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitCountAllFunctionCall) {
+			listener.exitCountAllFunctionCall(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitCountAllFunctionCall) {
+			return visitor.visitCountAllFunctionCall(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class DistinctCountFunctionCallContext extends StatsFunctionContext {
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public valueExpression(): ValueExpressionContext {
+		return this.getRuleContext(0, ValueExpressionContext);
+	}
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	public DISTINCT_COUNT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DISTINCT_COUNT, 0); }
+	public DC(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DC, 0); }
+	constructor(ctx: StatsFunctionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterDistinctCountFunctionCall) {
+			listener.enterDistinctCountFunctionCall(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitDistinctCountFunctionCall) {
+			listener.exitDistinctCountFunctionCall(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitDistinctCountFunctionCall) {
+			return visitor.visitDistinctCountFunctionCall(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class PercentileAggFunctionCallContext extends StatsFunctionContext {
+	public percentileAggFunction(): PercentileAggFunctionContext {
+		return this.getRuleContext(0, PercentileAggFunctionContext);
+	}
+	constructor(ctx: StatsFunctionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterPercentileAggFunctionCall) {
+			listener.enterPercentileAggFunctionCall(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitPercentileAggFunctionCall) {
+			listener.exitPercentileAggFunctionCall(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitPercentileAggFunctionCall) {
+			return visitor.visitPercentileAggFunctionCall(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class TakeAggFunctionCallContext extends StatsFunctionContext {
+	public takeAggFunction(): TakeAggFunctionContext {
+		return this.getRuleContext(0, TakeAggFunctionContext);
+	}
+	constructor(ctx: StatsFunctionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterTakeAggFunctionCall) {
+			listener.enterTakeAggFunctionCall(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitTakeAggFunctionCall) {
+			listener.exitTakeAggFunctionCall(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitTakeAggFunctionCall) {
+			return visitor.visitTakeAggFunctionCall(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class StatsFunctionNameContext extends ParserRuleContext {
+	public AVG(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.AVG, 0); }
+	public COUNT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.COUNT, 0); }
+	public SUM(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SUM, 0); }
+	public MIN(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MIN, 0); }
+	public MAX(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MAX, 0); }
+	public VAR_SAMP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.VAR_SAMP, 0); }
+	public VAR_POP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.VAR_POP, 0); }
+	public STDDEV_SAMP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.STDDEV_SAMP, 0); }
+	public STDDEV_POP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.STDDEV_POP, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_statsFunctionName; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterStatsFunctionName) {
+			listener.enterStatsFunctionName(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitStatsFunctionName) {
+			listener.exitStatsFunctionName(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitStatsFunctionName) {
+			return visitor.visitStatsFunctionName(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class TakeAggFunctionContext extends ParserRuleContext {
+	public _size!: IntegerLiteralContext;
+	public TAKE(): TerminalNode { return this.getToken(OpenSearchPPLParser.TAKE, 0); }
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public fieldExpression(): FieldExpressionContext {
+		return this.getRuleContext(0, FieldExpressionContext);
+	}
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	public COMMA(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.COMMA, 0); }
+	public integerLiteral(): IntegerLiteralContext | undefined {
+		return this.tryGetRuleContext(0, IntegerLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_takeAggFunction; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterTakeAggFunction) {
+			listener.enterTakeAggFunction(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitTakeAggFunction) {
+			listener.exitTakeAggFunction(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitTakeAggFunction) {
+			return visitor.visitTakeAggFunction(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class PercentileAggFunctionContext extends ParserRuleContext {
+	public _value!: IntegerLiteralContext;
+	public _aggField!: FieldExpressionContext;
+	public PERCENTILE(): TerminalNode { return this.getToken(OpenSearchPPLParser.PERCENTILE, 0); }
+	public LESS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LESS, 0); }
+	public GREATER(): TerminalNode { return this.getToken(OpenSearchPPLParser.GREATER, 0); }
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	public integerLiteral(): IntegerLiteralContext {
+		return this.getRuleContext(0, IntegerLiteralContext);
+	}
+	public fieldExpression(): FieldExpressionContext {
+		return this.getRuleContext(0, FieldExpressionContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_percentileAggFunction; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterPercentileAggFunction) {
+			listener.enterPercentileAggFunction(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitPercentileAggFunction) {
+			listener.exitPercentileAggFunction(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitPercentileAggFunction) {
+			return visitor.visitPercentileAggFunction(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ExpressionContext extends ParserRuleContext {
+	public logicalExpression(): LogicalExpressionContext | undefined {
+		return this.tryGetRuleContext(0, LogicalExpressionContext);
+	}
+	public comparisonExpression(): ComparisonExpressionContext | undefined {
+		return this.tryGetRuleContext(0, ComparisonExpressionContext);
+	}
+	public valueExpression(): ValueExpressionContext | undefined {
+		return this.tryGetRuleContext(0, ValueExpressionContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_expression; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterExpression) {
+			listener.enterExpression(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitExpression) {
+			listener.exitExpression(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitExpression) {
+			return visitor.visitExpression(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class LogicalExpressionContext extends ParserRuleContext {
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_logicalExpression; }
+	public copyFrom(ctx: LogicalExpressionContext): void {
+		super.copyFrom(ctx);
+	}
+}
+export class ComparsionContext extends LogicalExpressionContext {
+	public comparisonExpression(): ComparisonExpressionContext {
+		return this.getRuleContext(0, ComparisonExpressionContext);
+	}
+	constructor(ctx: LogicalExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterComparsion) {
+			listener.enterComparsion(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitComparsion) {
+			listener.exitComparsion(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitComparsion) {
+			return visitor.visitComparsion(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class LogicalNotContext extends LogicalExpressionContext {
+	public NOT(): TerminalNode { return this.getToken(OpenSearchPPLParser.NOT, 0); }
+	public logicalExpression(): LogicalExpressionContext {
+		return this.getRuleContext(0, LogicalExpressionContext);
+	}
+	constructor(ctx: LogicalExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterLogicalNot) {
+			listener.enterLogicalNot(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitLogicalNot) {
+			listener.exitLogicalNot(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitLogicalNot) {
+			return visitor.visitLogicalNot(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class LogicalOrContext extends LogicalExpressionContext {
+	public _left!: LogicalExpressionContext;
+	public _right!: LogicalExpressionContext;
+	public OR(): TerminalNode { return this.getToken(OpenSearchPPLParser.OR, 0); }
+	public logicalExpression(): LogicalExpressionContext[];
+	public logicalExpression(i: number): LogicalExpressionContext;
+	public logicalExpression(i?: number): LogicalExpressionContext | LogicalExpressionContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(LogicalExpressionContext);
+		} else {
+			return this.getRuleContext(i, LogicalExpressionContext);
+		}
+	}
+	constructor(ctx: LogicalExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterLogicalOr) {
+			listener.enterLogicalOr(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitLogicalOr) {
+			listener.exitLogicalOr(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitLogicalOr) {
+			return visitor.visitLogicalOr(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class LogicalAndContext extends LogicalExpressionContext {
+	public _left!: LogicalExpressionContext;
+	public _right!: LogicalExpressionContext;
+	public logicalExpression(): LogicalExpressionContext[];
+	public logicalExpression(i: number): LogicalExpressionContext;
+	public logicalExpression(i?: number): LogicalExpressionContext | LogicalExpressionContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(LogicalExpressionContext);
+		} else {
+			return this.getRuleContext(i, LogicalExpressionContext);
+		}
+	}
+	public AND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.AND, 0); }
+	constructor(ctx: LogicalExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterLogicalAnd) {
+			listener.enterLogicalAnd(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitLogicalAnd) {
+			listener.exitLogicalAnd(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitLogicalAnd) {
+			return visitor.visitLogicalAnd(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class LogicalXorContext extends LogicalExpressionContext {
+	public _left!: LogicalExpressionContext;
+	public _right!: LogicalExpressionContext;
+	public XOR(): TerminalNode { return this.getToken(OpenSearchPPLParser.XOR, 0); }
+	public logicalExpression(): LogicalExpressionContext[];
+	public logicalExpression(i: number): LogicalExpressionContext;
+	public logicalExpression(i?: number): LogicalExpressionContext | LogicalExpressionContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(LogicalExpressionContext);
+		} else {
+			return this.getRuleContext(i, LogicalExpressionContext);
+		}
+	}
+	constructor(ctx: LogicalExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterLogicalXor) {
+			listener.enterLogicalXor(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitLogicalXor) {
+			listener.exitLogicalXor(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitLogicalXor) {
+			return visitor.visitLogicalXor(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class BooleanExprContext extends LogicalExpressionContext {
+	public booleanExpression(): BooleanExpressionContext {
+		return this.getRuleContext(0, BooleanExpressionContext);
+	}
+	constructor(ctx: LogicalExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterBooleanExpr) {
+			listener.enterBooleanExpr(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitBooleanExpr) {
+			listener.exitBooleanExpr(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitBooleanExpr) {
+			return visitor.visitBooleanExpr(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class RelevanceExprContext extends LogicalExpressionContext {
+	public relevanceExpression(): RelevanceExpressionContext {
+		return this.getRuleContext(0, RelevanceExpressionContext);
+	}
+	constructor(ctx: LogicalExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRelevanceExpr) {
+			listener.enterRelevanceExpr(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRelevanceExpr) {
+			listener.exitRelevanceExpr(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRelevanceExpr) {
+			return visitor.visitRelevanceExpr(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ComparisonExpressionContext extends ParserRuleContext {
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_comparisonExpression; }
+	public copyFrom(ctx: ComparisonExpressionContext): void {
+		super.copyFrom(ctx);
+	}
+}
+export class CompareExprContext extends ComparisonExpressionContext {
+	public _left!: ValueExpressionContext;
+	public _right!: ValueExpressionContext;
+	public comparisonOperator(): ComparisonOperatorContext {
+		return this.getRuleContext(0, ComparisonOperatorContext);
+	}
+	public valueExpression(): ValueExpressionContext[];
+	public valueExpression(i: number): ValueExpressionContext;
+	public valueExpression(i?: number): ValueExpressionContext | ValueExpressionContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(ValueExpressionContext);
+		} else {
+			return this.getRuleContext(i, ValueExpressionContext);
+		}
+	}
+	constructor(ctx: ComparisonExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterCompareExpr) {
+			listener.enterCompareExpr(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitCompareExpr) {
+			listener.exitCompareExpr(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitCompareExpr) {
+			return visitor.visitCompareExpr(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class InExprContext extends ComparisonExpressionContext {
+	public valueExpression(): ValueExpressionContext {
+		return this.getRuleContext(0, ValueExpressionContext);
+	}
+	public IN(): TerminalNode { return this.getToken(OpenSearchPPLParser.IN, 0); }
+	public valueList(): ValueListContext {
+		return this.getRuleContext(0, ValueListContext);
+	}
+	constructor(ctx: ComparisonExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterInExpr) {
+			listener.enterInExpr(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitInExpr) {
+			listener.exitInExpr(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitInExpr) {
+			return visitor.visitInExpr(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ValueExpressionContext extends ParserRuleContext {
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_valueExpression; }
+	public copyFrom(ctx: ValueExpressionContext): void {
+		super.copyFrom(ctx);
+	}
+}
+export class BinaryArithmeticContext extends ValueExpressionContext {
+	public _left!: ValueExpressionContext;
+	public _right!: ValueExpressionContext;
+	public binaryOperator(): BinaryOperatorContext {
+		return this.getRuleContext(0, BinaryOperatorContext);
+	}
+	public valueExpression(): ValueExpressionContext[];
+	public valueExpression(i: number): ValueExpressionContext;
+	public valueExpression(i?: number): ValueExpressionContext | ValueExpressionContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(ValueExpressionContext);
+		} else {
+			return this.getRuleContext(i, ValueExpressionContext);
+		}
+	}
+	constructor(ctx: ValueExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterBinaryArithmetic) {
+			listener.enterBinaryArithmetic(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitBinaryArithmetic) {
+			listener.exitBinaryArithmetic(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitBinaryArithmetic) {
+			return visitor.visitBinaryArithmetic(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class ParentheticBinaryArithmeticContext extends ValueExpressionContext {
+	public _left!: ValueExpressionContext;
+	public _right!: ValueExpressionContext;
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public binaryOperator(): BinaryOperatorContext {
+		return this.getRuleContext(0, BinaryOperatorContext);
+	}
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	public valueExpression(): ValueExpressionContext[];
+	public valueExpression(i: number): ValueExpressionContext;
+	public valueExpression(i?: number): ValueExpressionContext | ValueExpressionContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(ValueExpressionContext);
+		} else {
+			return this.getRuleContext(i, ValueExpressionContext);
+		}
+	}
+	constructor(ctx: ValueExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterParentheticBinaryArithmetic) {
+			listener.enterParentheticBinaryArithmetic(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitParentheticBinaryArithmetic) {
+			listener.exitParentheticBinaryArithmetic(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitParentheticBinaryArithmetic) {
+			return visitor.visitParentheticBinaryArithmetic(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+export class ValueExpressionDefaultContext extends ValueExpressionContext {
+	public primaryExpression(): PrimaryExpressionContext {
+		return this.getRuleContext(0, PrimaryExpressionContext);
+	}
+	constructor(ctx: ValueExpressionContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterValueExpressionDefault) {
+			listener.enterValueExpressionDefault(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitValueExpressionDefault) {
+			listener.exitValueExpressionDefault(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitValueExpressionDefault) {
+			return visitor.visitValueExpressionDefault(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class PrimaryExpressionContext extends ParserRuleContext {
+	public evalFunctionCall(): EvalFunctionCallContext | undefined {
+		return this.tryGetRuleContext(0, EvalFunctionCallContext);
+	}
+	public dataTypeFunctionCall(): DataTypeFunctionCallContext | undefined {
+		return this.tryGetRuleContext(0, DataTypeFunctionCallContext);
+	}
+	public fieldExpression(): FieldExpressionContext | undefined {
+		return this.tryGetRuleContext(0, FieldExpressionContext);
+	}
+	public literalValue(): LiteralValueContext | undefined {
+		return this.tryGetRuleContext(0, LiteralValueContext);
+	}
+	public constantFunction(): ConstantFunctionContext | undefined {
+		return this.tryGetRuleContext(0, ConstantFunctionContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_primaryExpression; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterPrimaryExpression) {
+			listener.enterPrimaryExpression(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitPrimaryExpression) {
+			listener.exitPrimaryExpression(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitPrimaryExpression) {
+			return visitor.visitPrimaryExpression(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ConstantFunctionContext extends ParserRuleContext {
+	public constantFunctionName(): ConstantFunctionNameContext {
+		return this.getRuleContext(0, ConstantFunctionNameContext);
+	}
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	public functionArgs(): FunctionArgsContext | undefined {
+		return this.tryGetRuleContext(0, FunctionArgsContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_constantFunction; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterConstantFunction) {
+			listener.enterConstantFunction(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitConstantFunction) {
+			listener.exitConstantFunction(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitConstantFunction) {
+			return visitor.visitConstantFunction(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class BooleanExpressionContext extends ParserRuleContext {
+	public booleanFunctionCall(): BooleanFunctionCallContext {
+		return this.getRuleContext(0, BooleanFunctionCallContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_booleanExpression; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterBooleanExpression) {
+			listener.enterBooleanExpression(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitBooleanExpression) {
+			listener.exitBooleanExpression(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitBooleanExpression) {
+			return visitor.visitBooleanExpression(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class RelevanceExpressionContext extends ParserRuleContext {
+	public singleFieldRelevanceFunction(): SingleFieldRelevanceFunctionContext | undefined {
+		return this.tryGetRuleContext(0, SingleFieldRelevanceFunctionContext);
+	}
+	public multiFieldRelevanceFunction(): MultiFieldRelevanceFunctionContext | undefined {
+		return this.tryGetRuleContext(0, MultiFieldRelevanceFunctionContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_relevanceExpression; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRelevanceExpression) {
+			listener.enterRelevanceExpression(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRelevanceExpression) {
+			listener.exitRelevanceExpression(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRelevanceExpression) {
+			return visitor.visitRelevanceExpression(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class SingleFieldRelevanceFunctionContext extends ParserRuleContext {
+	public _field!: RelevanceFieldContext;
+	public _query!: RelevanceQueryContext;
+	public singleFieldRelevanceFunctionName(): SingleFieldRelevanceFunctionNameContext {
+		return this.getRuleContext(0, SingleFieldRelevanceFunctionNameContext);
+	}
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public COMMA(): TerminalNode[];
+	public COMMA(i: number): TerminalNode;
+	public COMMA(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.COMMA);
+		} else {
+			return this.getToken(OpenSearchPPLParser.COMMA, i);
+		}
+	}
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	public relevanceField(): RelevanceFieldContext {
+		return this.getRuleContext(0, RelevanceFieldContext);
+	}
+	public relevanceQuery(): RelevanceQueryContext {
+		return this.getRuleContext(0, RelevanceQueryContext);
+	}
+	public relevanceArg(): RelevanceArgContext[];
+	public relevanceArg(i: number): RelevanceArgContext;
+	public relevanceArg(i?: number): RelevanceArgContext | RelevanceArgContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(RelevanceArgContext);
+		} else {
+			return this.getRuleContext(i, RelevanceArgContext);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_singleFieldRelevanceFunction; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterSingleFieldRelevanceFunction) {
+			listener.enterSingleFieldRelevanceFunction(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitSingleFieldRelevanceFunction) {
+			listener.exitSingleFieldRelevanceFunction(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitSingleFieldRelevanceFunction) {
+			return visitor.visitSingleFieldRelevanceFunction(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class MultiFieldRelevanceFunctionContext extends ParserRuleContext {
+	public _field!: RelevanceFieldAndWeightContext;
+	public _query!: RelevanceQueryContext;
+	public multiFieldRelevanceFunctionName(): MultiFieldRelevanceFunctionNameContext {
+		return this.getRuleContext(0, MultiFieldRelevanceFunctionNameContext);
+	}
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public LT_SQR_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_SQR_PRTHS, 0); }
+	public RT_SQR_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_SQR_PRTHS, 0); }
+	public COMMA(): TerminalNode[];
+	public COMMA(i: number): TerminalNode;
+	public COMMA(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.COMMA);
+		} else {
+			return this.getToken(OpenSearchPPLParser.COMMA, i);
+		}
+	}
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	public relevanceFieldAndWeight(): RelevanceFieldAndWeightContext[];
+	public relevanceFieldAndWeight(i: number): RelevanceFieldAndWeightContext;
+	public relevanceFieldAndWeight(i?: number): RelevanceFieldAndWeightContext | RelevanceFieldAndWeightContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(RelevanceFieldAndWeightContext);
+		} else {
+			return this.getRuleContext(i, RelevanceFieldAndWeightContext);
+		}
+	}
+	public relevanceQuery(): RelevanceQueryContext {
+		return this.getRuleContext(0, RelevanceQueryContext);
+	}
+	public relevanceArg(): RelevanceArgContext[];
+	public relevanceArg(i: number): RelevanceArgContext;
+	public relevanceArg(i?: number): RelevanceArgContext | RelevanceArgContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(RelevanceArgContext);
+		} else {
+			return this.getRuleContext(i, RelevanceArgContext);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_multiFieldRelevanceFunction; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterMultiFieldRelevanceFunction) {
+			listener.enterMultiFieldRelevanceFunction(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitMultiFieldRelevanceFunction) {
+			listener.exitMultiFieldRelevanceFunction(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitMultiFieldRelevanceFunction) {
+			return visitor.visitMultiFieldRelevanceFunction(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class TableSourceContext extends ParserRuleContext {
+	public qualifiedName(): QualifiedNameContext | undefined {
+		return this.tryGetRuleContext(0, QualifiedNameContext);
+	}
+	public ID_DATE_SUFFIX(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ID_DATE_SUFFIX, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_tableSource; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterTableSource) {
+			listener.enterTableSource(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitTableSource) {
+			listener.exitTableSource(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitTableSource) {
+			return visitor.visitTableSource(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class TableFunctionContext extends ParserRuleContext {
+	public qualifiedName(): QualifiedNameContext {
+		return this.getRuleContext(0, QualifiedNameContext);
+	}
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public functionArgs(): FunctionArgsContext {
+		return this.getRuleContext(0, FunctionArgsContext);
+	}
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_tableFunction; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterTableFunction) {
+			listener.enterTableFunction(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitTableFunction) {
+			listener.exitTableFunction(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitTableFunction) {
+			return visitor.visitTableFunction(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class FieldListContext extends ParserRuleContext {
+	public fieldExpression(): FieldExpressionContext[];
+	public fieldExpression(i: number): FieldExpressionContext;
+	public fieldExpression(i?: number): FieldExpressionContext | FieldExpressionContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(FieldExpressionContext);
+		} else {
+			return this.getRuleContext(i, FieldExpressionContext);
+		}
+	}
+	public COMMA(): TerminalNode[];
+	public COMMA(i: number): TerminalNode;
+	public COMMA(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.COMMA);
+		} else {
+			return this.getToken(OpenSearchPPLParser.COMMA, i);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_fieldList; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterFieldList) {
+			listener.enterFieldList(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitFieldList) {
+			listener.exitFieldList(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitFieldList) {
+			return visitor.visitFieldList(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class WcFieldListContext extends ParserRuleContext {
+	public wcFieldExpression(): WcFieldExpressionContext[];
+	public wcFieldExpression(i: number): WcFieldExpressionContext;
+	public wcFieldExpression(i?: number): WcFieldExpressionContext | WcFieldExpressionContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(WcFieldExpressionContext);
+		} else {
+			return this.getRuleContext(i, WcFieldExpressionContext);
+		}
+	}
+	public COMMA(): TerminalNode[];
+	public COMMA(i: number): TerminalNode;
+	public COMMA(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.COMMA);
+		} else {
+			return this.getToken(OpenSearchPPLParser.COMMA, i);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_wcFieldList; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterWcFieldList) {
+			listener.enterWcFieldList(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitWcFieldList) {
+			listener.exitWcFieldList(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitWcFieldList) {
+			return visitor.visitWcFieldList(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class SortFieldContext extends ParserRuleContext {
+	public sortFieldExpression(): SortFieldExpressionContext {
+		return this.getRuleContext(0, SortFieldExpressionContext);
+	}
+	public PLUS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PLUS, 0); }
+	public MINUS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MINUS, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_sortField; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterSortField) {
+			listener.enterSortField(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitSortField) {
+			listener.exitSortField(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitSortField) {
+			return visitor.visitSortField(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class SortFieldExpressionContext extends ParserRuleContext {
+	public fieldExpression(): FieldExpressionContext {
+		return this.getRuleContext(0, FieldExpressionContext);
+	}
+	public AUTO(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.AUTO, 0); }
+	public LT_PRTHS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public RT_PRTHS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	public STR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.STR, 0); }
+	public IP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.IP, 0); }
+	public NUM(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.NUM, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_sortFieldExpression; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterSortFieldExpression) {
+			listener.enterSortFieldExpression(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitSortFieldExpression) {
+			listener.exitSortFieldExpression(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitSortFieldExpression) {
+			return visitor.visitSortFieldExpression(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class FieldExpressionContext extends ParserRuleContext {
+	public qualifiedName(): QualifiedNameContext {
+		return this.getRuleContext(0, QualifiedNameContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_fieldExpression; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterFieldExpression) {
+			listener.enterFieldExpression(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitFieldExpression) {
+			listener.exitFieldExpression(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitFieldExpression) {
+			return visitor.visitFieldExpression(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class WcFieldExpressionContext extends ParserRuleContext {
+	public wcQualifiedName(): WcQualifiedNameContext {
+		return this.getRuleContext(0, WcQualifiedNameContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_wcFieldExpression; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterWcFieldExpression) {
+			listener.enterWcFieldExpression(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitWcFieldExpression) {
+			listener.exitWcFieldExpression(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitWcFieldExpression) {
+			return visitor.visitWcFieldExpression(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class EvalFunctionCallContext extends ParserRuleContext {
+	public evalFunctionName(): EvalFunctionNameContext {
+		return this.getRuleContext(0, EvalFunctionNameContext);
+	}
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public functionArgs(): FunctionArgsContext {
+		return this.getRuleContext(0, FunctionArgsContext);
+	}
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_evalFunctionCall; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterEvalFunctionCall) {
+			listener.enterEvalFunctionCall(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitEvalFunctionCall) {
+			listener.exitEvalFunctionCall(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitEvalFunctionCall) {
+			return visitor.visitEvalFunctionCall(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class DataTypeFunctionCallContext extends ParserRuleContext {
+	public CAST(): TerminalNode { return this.getToken(OpenSearchPPLParser.CAST, 0); }
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public expression(): ExpressionContext {
+		return this.getRuleContext(0, ExpressionContext);
+	}
+	public AS(): TerminalNode { return this.getToken(OpenSearchPPLParser.AS, 0); }
+	public convertedDataType(): ConvertedDataTypeContext {
+		return this.getRuleContext(0, ConvertedDataTypeContext);
+	}
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_dataTypeFunctionCall; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterDataTypeFunctionCall) {
+			listener.enterDataTypeFunctionCall(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitDataTypeFunctionCall) {
+			listener.exitDataTypeFunctionCall(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitDataTypeFunctionCall) {
+			return visitor.visitDataTypeFunctionCall(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class BooleanFunctionCallContext extends ParserRuleContext {
+	public conditionFunctionBase(): ConditionFunctionBaseContext {
+		return this.getRuleContext(0, ConditionFunctionBaseContext);
+	}
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public functionArgs(): FunctionArgsContext {
+		return this.getRuleContext(0, FunctionArgsContext);
+	}
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_booleanFunctionCall; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterBooleanFunctionCall) {
+			listener.enterBooleanFunctionCall(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitBooleanFunctionCall) {
+			listener.exitBooleanFunctionCall(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitBooleanFunctionCall) {
+			return visitor.visitBooleanFunctionCall(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ConvertedDataTypeContext extends ParserRuleContext {
+	public _typeName!: Token;
+	public DATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DATE, 0); }
+	public TIME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIME, 0); }
+	public TIMESTAMP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIMESTAMP, 0); }
+	public INT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.INT, 0); }
+	public INTEGER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.INTEGER, 0); }
+	public DOUBLE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DOUBLE, 0); }
+	public LONG(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LONG, 0); }
+	public FLOAT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FLOAT, 0); }
+	public STRING(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.STRING, 0); }
+	public BOOLEAN(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.BOOLEAN, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_convertedDataType; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterConvertedDataType) {
+			listener.enterConvertedDataType(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitConvertedDataType) {
+			listener.exitConvertedDataType(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitConvertedDataType) {
+			return visitor.visitConvertedDataType(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class EvalFunctionNameContext extends ParserRuleContext {
+	public mathematicalFunctionBase(): MathematicalFunctionBaseContext | undefined {
+		return this.tryGetRuleContext(0, MathematicalFunctionBaseContext);
+	}
+	public dateAndTimeFunctionBase(): DateAndTimeFunctionBaseContext | undefined {
+		return this.tryGetRuleContext(0, DateAndTimeFunctionBaseContext);
+	}
+	public textFunctionBase(): TextFunctionBaseContext | undefined {
+		return this.tryGetRuleContext(0, TextFunctionBaseContext);
+	}
+	public conditionFunctionBase(): ConditionFunctionBaseContext | undefined {
+		return this.tryGetRuleContext(0, ConditionFunctionBaseContext);
+	}
+	public systemFunctionBase(): SystemFunctionBaseContext | undefined {
+		return this.tryGetRuleContext(0, SystemFunctionBaseContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_evalFunctionName; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterEvalFunctionName) {
+			listener.enterEvalFunctionName(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitEvalFunctionName) {
+			listener.exitEvalFunctionName(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitEvalFunctionName) {
+			return visitor.visitEvalFunctionName(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class FunctionArgsContext extends ParserRuleContext {
+	public functionArg(): FunctionArgContext[];
+	public functionArg(i: number): FunctionArgContext;
+	public functionArg(i?: number): FunctionArgContext | FunctionArgContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(FunctionArgContext);
+		} else {
+			return this.getRuleContext(i, FunctionArgContext);
+		}
+	}
+	public COMMA(): TerminalNode[];
+	public COMMA(i: number): TerminalNode;
+	public COMMA(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.COMMA);
+		} else {
+			return this.getToken(OpenSearchPPLParser.COMMA, i);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_functionArgs; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterFunctionArgs) {
+			listener.enterFunctionArgs(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitFunctionArgs) {
+			listener.exitFunctionArgs(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitFunctionArgs) {
+			return visitor.visitFunctionArgs(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class FunctionArgContext extends ParserRuleContext {
+	public valueExpression(): ValueExpressionContext {
+		return this.getRuleContext(0, ValueExpressionContext);
+	}
+	public ident(): IdentContext | undefined {
+		return this.tryGetRuleContext(0, IdentContext);
+	}
+	public EQUAL(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.EQUAL, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_functionArg; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterFunctionArg) {
+			listener.enterFunctionArg(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitFunctionArg) {
+			listener.exitFunctionArg(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitFunctionArg) {
+			return visitor.visitFunctionArg(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class RelevanceArgContext extends ParserRuleContext {
+	public relevanceArgName(): RelevanceArgNameContext {
+		return this.getRuleContext(0, RelevanceArgNameContext);
+	}
+	public EQUAL(): TerminalNode { return this.getToken(OpenSearchPPLParser.EQUAL, 0); }
+	public relevanceArgValue(): RelevanceArgValueContext {
+		return this.getRuleContext(0, RelevanceArgValueContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_relevanceArg; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRelevanceArg) {
+			listener.enterRelevanceArg(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRelevanceArg) {
+			listener.exitRelevanceArg(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRelevanceArg) {
+			return visitor.visitRelevanceArg(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class RelevanceArgNameContext extends ParserRuleContext {
+	public ALLOW_LEADING_WILDCARD(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ALLOW_LEADING_WILDCARD, 0); }
+	public ANALYZER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ANALYZER, 0); }
+	public ANALYZE_WILDCARD(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ANALYZE_WILDCARD, 0); }
+	public AUTO_GENERATE_SYNONYMS_PHRASE_QUERY(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.AUTO_GENERATE_SYNONYMS_PHRASE_QUERY, 0); }
+	public BOOST(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.BOOST, 0); }
+	public CUTOFF_FREQUENCY(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CUTOFF_FREQUENCY, 0); }
+	public DEFAULT_FIELD(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DEFAULT_FIELD, 0); }
+	public DEFAULT_OPERATOR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DEFAULT_OPERATOR, 0); }
+	public ENABLE_POSITION_INCREMENTS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ENABLE_POSITION_INCREMENTS, 0); }
+	public ESCAPE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ESCAPE, 0); }
+	public FIELDS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FIELDS, 0); }
+	public FLAGS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FLAGS, 0); }
+	public FUZZINESS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FUZZINESS, 0); }
+	public FUZZY_MAX_EXPANSIONS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FUZZY_MAX_EXPANSIONS, 0); }
+	public FUZZY_PREFIX_LENGTH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FUZZY_PREFIX_LENGTH, 0); }
+	public FUZZY_REWRITE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FUZZY_REWRITE, 0); }
+	public FUZZY_TRANSPOSITIONS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FUZZY_TRANSPOSITIONS, 0); }
+	public LENIENT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LENIENT, 0); }
+	public LOW_FREQ_OPERATOR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LOW_FREQ_OPERATOR, 0); }
+	public MAX_DETERMINIZED_STATES(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MAX_DETERMINIZED_STATES, 0); }
+	public MAX_EXPANSIONS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MAX_EXPANSIONS, 0); }
+	public MINIMUM_SHOULD_MATCH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MINIMUM_SHOULD_MATCH, 0); }
+	public OPERATOR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.OPERATOR, 0); }
+	public PHRASE_SLOP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PHRASE_SLOP, 0); }
+	public PREFIX_LENGTH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PREFIX_LENGTH, 0); }
+	public QUOTE_ANALYZER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.QUOTE_ANALYZER, 0); }
+	public QUOTE_FIELD_SUFFIX(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.QUOTE_FIELD_SUFFIX, 0); }
+	public REWRITE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.REWRITE, 0); }
+	public SLOP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SLOP, 0); }
+	public TIE_BREAKER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIE_BREAKER, 0); }
+	public TIME_ZONE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIME_ZONE, 0); }
+	public TYPE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TYPE, 0); }
+	public ZERO_TERMS_QUERY(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ZERO_TERMS_QUERY, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_relevanceArgName; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRelevanceArgName) {
+			listener.enterRelevanceArgName(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRelevanceArgName) {
+			listener.exitRelevanceArgName(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRelevanceArgName) {
+			return visitor.visitRelevanceArgName(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class RelevanceFieldAndWeightContext extends ParserRuleContext {
+	public _field!: RelevanceFieldContext;
+	public _weight!: RelevanceFieldWeightContext;
+	public relevanceField(): RelevanceFieldContext {
+		return this.getRuleContext(0, RelevanceFieldContext);
+	}
+	public relevanceFieldWeight(): RelevanceFieldWeightContext | undefined {
+		return this.tryGetRuleContext(0, RelevanceFieldWeightContext);
+	}
+	public BIT_XOR_OP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.BIT_XOR_OP, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_relevanceFieldAndWeight; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRelevanceFieldAndWeight) {
+			listener.enterRelevanceFieldAndWeight(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRelevanceFieldAndWeight) {
+			listener.exitRelevanceFieldAndWeight(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRelevanceFieldAndWeight) {
+			return visitor.visitRelevanceFieldAndWeight(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class RelevanceFieldWeightContext extends ParserRuleContext {
+	public integerLiteral(): IntegerLiteralContext | undefined {
+		return this.tryGetRuleContext(0, IntegerLiteralContext);
+	}
+	public decimalLiteral(): DecimalLiteralContext | undefined {
+		return this.tryGetRuleContext(0, DecimalLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_relevanceFieldWeight; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRelevanceFieldWeight) {
+			listener.enterRelevanceFieldWeight(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRelevanceFieldWeight) {
+			listener.exitRelevanceFieldWeight(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRelevanceFieldWeight) {
+			return visitor.visitRelevanceFieldWeight(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class RelevanceFieldContext extends ParserRuleContext {
+	public qualifiedName(): QualifiedNameContext | undefined {
+		return this.tryGetRuleContext(0, QualifiedNameContext);
+	}
+	public stringLiteral(): StringLiteralContext | undefined {
+		return this.tryGetRuleContext(0, StringLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_relevanceField; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRelevanceField) {
+			listener.enterRelevanceField(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRelevanceField) {
+			listener.exitRelevanceField(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRelevanceField) {
+			return visitor.visitRelevanceField(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class RelevanceQueryContext extends ParserRuleContext {
+	public relevanceArgValue(): RelevanceArgValueContext {
+		return this.getRuleContext(0, RelevanceArgValueContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_relevanceQuery; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRelevanceQuery) {
+			listener.enterRelevanceQuery(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRelevanceQuery) {
+			listener.exitRelevanceQuery(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRelevanceQuery) {
+			return visitor.visitRelevanceQuery(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class RelevanceArgValueContext extends ParserRuleContext {
+	public qualifiedName(): QualifiedNameContext | undefined {
+		return this.tryGetRuleContext(0, QualifiedNameContext);
+	}
+	public literalValue(): LiteralValueContext | undefined {
+		return this.tryGetRuleContext(0, LiteralValueContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_relevanceArgValue; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterRelevanceArgValue) {
+			listener.enterRelevanceArgValue(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitRelevanceArgValue) {
+			listener.exitRelevanceArgValue(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitRelevanceArgValue) {
+			return visitor.visitRelevanceArgValue(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class MathematicalFunctionBaseContext extends ParserRuleContext {
+	public ABS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ABS, 0); }
+	public CEIL(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CEIL, 0); }
+	public CEILING(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CEILING, 0); }
+	public CONV(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CONV, 0); }
+	public CRC32(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CRC32, 0); }
+	public E(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.E, 0); }
+	public EXP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.EXP, 0); }
+	public FLOOR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FLOOR, 0); }
+	public LN(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LN, 0); }
+	public LOG(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LOG, 0); }
+	public LOG10(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LOG10, 0); }
+	public LOG2(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LOG2, 0); }
+	public MOD(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MOD, 0); }
+	public PI(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PI, 0); }
+	public POW(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.POW, 0); }
+	public POWER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.POWER, 0); }
+	public RAND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.RAND, 0); }
+	public ROUND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ROUND, 0); }
+	public SIGN(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SIGN, 0); }
+	public SQRT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SQRT, 0); }
+	public TRUNCATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TRUNCATE, 0); }
+	public trigonometricFunctionName(): TrigonometricFunctionNameContext | undefined {
+		return this.tryGetRuleContext(0, TrigonometricFunctionNameContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_mathematicalFunctionBase; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterMathematicalFunctionBase) {
+			listener.enterMathematicalFunctionBase(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitMathematicalFunctionBase) {
+			listener.exitMathematicalFunctionBase(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitMathematicalFunctionBase) {
+			return visitor.visitMathematicalFunctionBase(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class TrigonometricFunctionNameContext extends ParserRuleContext {
+	public ACOS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ACOS, 0); }
+	public ASIN(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ASIN, 0); }
+	public ATAN(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ATAN, 0); }
+	public ATAN2(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ATAN2, 0); }
+	public COS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.COS, 0); }
+	public COT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.COT, 0); }
+	public DEGREES(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DEGREES, 0); }
+	public RADIANS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.RADIANS, 0); }
+	public SIN(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SIN, 0); }
+	public TAN(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TAN, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_trigonometricFunctionName; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterTrigonometricFunctionName) {
+			listener.enterTrigonometricFunctionName(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitTrigonometricFunctionName) {
+			listener.exitTrigonometricFunctionName(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitTrigonometricFunctionName) {
+			return visitor.visitTrigonometricFunctionName(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class DateAndTimeFunctionBaseContext extends ParserRuleContext {
+	public ADDDATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ADDDATE, 0); }
+	public CONVERT_TZ(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CONVERT_TZ, 0); }
+	public DATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DATE, 0); }
+	public DATE_ADD(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DATE_ADD, 0); }
+	public DATE_FORMAT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DATE_FORMAT, 0); }
+	public DATE_SUB(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DATE_SUB, 0); }
+	public DATETIME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DATETIME, 0); }
+	public DAY(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DAY, 0); }
+	public DAYNAME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DAYNAME, 0); }
+	public DAYOFMONTH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DAYOFMONTH, 0); }
+	public DAYOFWEEK(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DAYOFWEEK, 0); }
+	public DAYOFYEAR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DAYOFYEAR, 0); }
+	public FROM_DAYS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FROM_DAYS, 0); }
+	public FROM_UNIXTIME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FROM_UNIXTIME, 0); }
+	public HOUR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.HOUR, 0); }
+	public MAKEDATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MAKEDATE, 0); }
+	public MAKETIME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MAKETIME, 0); }
+	public MICROSECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MICROSECOND, 0); }
+	public MINUTE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MINUTE, 0); }
+	public MONTH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MONTH, 0); }
+	public MONTHNAME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MONTHNAME, 0); }
+	public PERIOD_ADD(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PERIOD_ADD, 0); }
+	public PERIOD_DIFF(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PERIOD_DIFF, 0); }
+	public QUARTER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.QUARTER, 0); }
+	public SECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SECOND, 0); }
+	public SUBDATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SUBDATE, 0); }
+	public SYSDATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SYSDATE, 0); }
+	public TIME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIME, 0); }
+	public TIME_TO_SEC(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIME_TO_SEC, 0); }
+	public TIMESTAMP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIMESTAMP, 0); }
+	public TO_DAYS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TO_DAYS, 0); }
+	public UNIX_TIMESTAMP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.UNIX_TIMESTAMP, 0); }
+	public WEEK(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.WEEK, 0); }
+	public YEAR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.YEAR, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_dateAndTimeFunctionBase; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterDateAndTimeFunctionBase) {
+			listener.enterDateAndTimeFunctionBase(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitDateAndTimeFunctionBase) {
+			listener.exitDateAndTimeFunctionBase(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitDateAndTimeFunctionBase) {
+			return visitor.visitDateAndTimeFunctionBase(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ConstantFunctionNameContext extends ParserRuleContext {
+	public CURRENT_DATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CURRENT_DATE, 0); }
+	public CURRENT_TIME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CURRENT_TIME, 0); }
+	public CURRENT_TIMESTAMP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CURRENT_TIMESTAMP, 0); }
+	public LOCALTIME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LOCALTIME, 0); }
+	public LOCALTIMESTAMP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LOCALTIMESTAMP, 0); }
+	public UTC_TIMESTAMP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.UTC_TIMESTAMP, 0); }
+	public UTC_DATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.UTC_DATE, 0); }
+	public UTC_TIME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.UTC_TIME, 0); }
+	public CURDATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CURDATE, 0); }
+	public CURTIME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CURTIME, 0); }
+	public NOW(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.NOW, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_constantFunctionName; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterConstantFunctionName) {
+			listener.enterConstantFunctionName(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitConstantFunctionName) {
+			listener.exitConstantFunctionName(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitConstantFunctionName) {
+			return visitor.visitConstantFunctionName(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ConditionFunctionBaseContext extends ParserRuleContext {
+	public LIKE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LIKE, 0); }
+	public IF(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.IF, 0); }
+	public ISNULL(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ISNULL, 0); }
+	public ISNOTNULL(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ISNOTNULL, 0); }
+	public IFNULL(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.IFNULL, 0); }
+	public NULLIF(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.NULLIF, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_conditionFunctionBase; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterConditionFunctionBase) {
+			listener.enterConditionFunctionBase(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitConditionFunctionBase) {
+			listener.exitConditionFunctionBase(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitConditionFunctionBase) {
+			return visitor.visitConditionFunctionBase(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class SystemFunctionBaseContext extends ParserRuleContext {
+	public TYPEOF(): TerminalNode { return this.getToken(OpenSearchPPLParser.TYPEOF, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_systemFunctionBase; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterSystemFunctionBase) {
+			listener.enterSystemFunctionBase(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitSystemFunctionBase) {
+			listener.exitSystemFunctionBase(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitSystemFunctionBase) {
+			return visitor.visitSystemFunctionBase(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class TextFunctionBaseContext extends ParserRuleContext {
+	public SUBSTR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SUBSTR, 0); }
+	public SUBSTRING(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SUBSTRING, 0); }
+	public TRIM(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TRIM, 0); }
+	public LTRIM(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LTRIM, 0); }
+	public RTRIM(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.RTRIM, 0); }
+	public LOWER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LOWER, 0); }
+	public UPPER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.UPPER, 0); }
+	public CONCAT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CONCAT, 0); }
+	public CONCAT_WS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.CONCAT_WS, 0); }
+	public LENGTH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LENGTH, 0); }
+	public STRCMP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.STRCMP, 0); }
+	public RIGHT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.RIGHT, 0); }
+	public LEFT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LEFT, 0); }
+	public ASCII(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ASCII, 0); }
+	public LOCATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LOCATE, 0); }
+	public REPLACE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.REPLACE, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_textFunctionBase; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterTextFunctionBase) {
+			listener.enterTextFunctionBase(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitTextFunctionBase) {
+			listener.exitTextFunctionBase(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitTextFunctionBase) {
+			return visitor.visitTextFunctionBase(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ComparisonOperatorContext extends ParserRuleContext {
+	public EQUAL(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.EQUAL, 0); }
+	public NOT_EQUAL(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.NOT_EQUAL, 0); }
+	public LESS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LESS, 0); }
+	public NOT_LESS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.NOT_LESS, 0); }
+	public GREATER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.GREATER, 0); }
+	public NOT_GREATER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.NOT_GREATER, 0); }
+	public REGEXP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.REGEXP, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_comparisonOperator; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterComparisonOperator) {
+			listener.enterComparisonOperator(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitComparisonOperator) {
+			listener.exitComparisonOperator(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitComparisonOperator) {
+			return visitor.visitComparisonOperator(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class BinaryOperatorContext extends ParserRuleContext {
+	public PLUS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PLUS, 0); }
+	public MINUS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MINUS, 0); }
+	public STAR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.STAR, 0); }
+	public DIVIDE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DIVIDE, 0); }
+	public MODULE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MODULE, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_binaryOperator; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterBinaryOperator) {
+			listener.enterBinaryOperator(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitBinaryOperator) {
+			listener.exitBinaryOperator(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitBinaryOperator) {
+			return visitor.visitBinaryOperator(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class SingleFieldRelevanceFunctionNameContext extends ParserRuleContext {
+	public MATCH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MATCH, 0); }
+	public MATCH_PHRASE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MATCH_PHRASE, 0); }
+	public MATCH_BOOL_PREFIX(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MATCH_BOOL_PREFIX, 0); }
+	public MATCH_PHRASE_PREFIX(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MATCH_PHRASE_PREFIX, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_singleFieldRelevanceFunctionName; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterSingleFieldRelevanceFunctionName) {
+			listener.enterSingleFieldRelevanceFunctionName(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitSingleFieldRelevanceFunctionName) {
+			listener.exitSingleFieldRelevanceFunctionName(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitSingleFieldRelevanceFunctionName) {
+			return visitor.visitSingleFieldRelevanceFunctionName(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class MultiFieldRelevanceFunctionNameContext extends ParserRuleContext {
+	public SIMPLE_QUERY_STRING(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SIMPLE_QUERY_STRING, 0); }
+	public MULTI_MATCH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MULTI_MATCH, 0); }
+	public QUERY_STRING(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.QUERY_STRING, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_multiFieldRelevanceFunctionName; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterMultiFieldRelevanceFunctionName) {
+			listener.enterMultiFieldRelevanceFunctionName(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitMultiFieldRelevanceFunctionName) {
+			listener.exitMultiFieldRelevanceFunctionName(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitMultiFieldRelevanceFunctionName) {
+			return visitor.visitMultiFieldRelevanceFunctionName(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class LiteralValueContext extends ParserRuleContext {
+	public intervalLiteral(): IntervalLiteralContext | undefined {
+		return this.tryGetRuleContext(0, IntervalLiteralContext);
+	}
+	public stringLiteral(): StringLiteralContext | undefined {
+		return this.tryGetRuleContext(0, StringLiteralContext);
+	}
+	public integerLiteral(): IntegerLiteralContext | undefined {
+		return this.tryGetRuleContext(0, IntegerLiteralContext);
+	}
+	public decimalLiteral(): DecimalLiteralContext | undefined {
+		return this.tryGetRuleContext(0, DecimalLiteralContext);
+	}
+	public booleanLiteral(): BooleanLiteralContext | undefined {
+		return this.tryGetRuleContext(0, BooleanLiteralContext);
+	}
+	public datetimeLiteral(): DatetimeLiteralContext | undefined {
+		return this.tryGetRuleContext(0, DatetimeLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_literalValue; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterLiteralValue) {
+			listener.enterLiteralValue(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitLiteralValue) {
+			listener.exitLiteralValue(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitLiteralValue) {
+			return visitor.visitLiteralValue(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class IntervalLiteralContext extends ParserRuleContext {
+	public INTERVAL(): TerminalNode { return this.getToken(OpenSearchPPLParser.INTERVAL, 0); }
+	public valueExpression(): ValueExpressionContext {
+		return this.getRuleContext(0, ValueExpressionContext);
+	}
+	public intervalUnit(): IntervalUnitContext {
+		return this.getRuleContext(0, IntervalUnitContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_intervalLiteral; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterIntervalLiteral) {
+			listener.enterIntervalLiteral(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitIntervalLiteral) {
+			listener.exitIntervalLiteral(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitIntervalLiteral) {
+			return visitor.visitIntervalLiteral(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class StringLiteralContext extends ParserRuleContext {
+	public DQUOTA_STRING(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DQUOTA_STRING, 0); }
+	public SQUOTA_STRING(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SQUOTA_STRING, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_stringLiteral; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterStringLiteral) {
+			listener.enterStringLiteral(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitStringLiteral) {
+			listener.exitStringLiteral(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitStringLiteral) {
+			return visitor.visitStringLiteral(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class IntegerLiteralContext extends ParserRuleContext {
+	public INTEGER_LITERAL(): TerminalNode { return this.getToken(OpenSearchPPLParser.INTEGER_LITERAL, 0); }
+	public PLUS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PLUS, 0); }
+	public MINUS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MINUS, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_integerLiteral; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterIntegerLiteral) {
+			listener.enterIntegerLiteral(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitIntegerLiteral) {
+			listener.exitIntegerLiteral(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitIntegerLiteral) {
+			return visitor.visitIntegerLiteral(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class DecimalLiteralContext extends ParserRuleContext {
+	public DECIMAL_LITERAL(): TerminalNode { return this.getToken(OpenSearchPPLParser.DECIMAL_LITERAL, 0); }
+	public PLUS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.PLUS, 0); }
+	public MINUS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MINUS, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_decimalLiteral; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterDecimalLiteral) {
+			listener.enterDecimalLiteral(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitDecimalLiteral) {
+			listener.exitDecimalLiteral(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitDecimalLiteral) {
+			return visitor.visitDecimalLiteral(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class BooleanLiteralContext extends ParserRuleContext {
+	public TRUE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TRUE, 0); }
+	public FALSE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FALSE, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_booleanLiteral; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterBooleanLiteral) {
+			listener.enterBooleanLiteral(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitBooleanLiteral) {
+			listener.exitBooleanLiteral(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitBooleanLiteral) {
+			return visitor.visitBooleanLiteral(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class DatetimeLiteralContext extends ParserRuleContext {
+	public dateLiteral(): DateLiteralContext | undefined {
+		return this.tryGetRuleContext(0, DateLiteralContext);
+	}
+	public timeLiteral(): TimeLiteralContext | undefined {
+		return this.tryGetRuleContext(0, TimeLiteralContext);
+	}
+	public timestampLiteral(): TimestampLiteralContext | undefined {
+		return this.tryGetRuleContext(0, TimestampLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_datetimeLiteral; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterDatetimeLiteral) {
+			listener.enterDatetimeLiteral(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitDatetimeLiteral) {
+			listener.exitDatetimeLiteral(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitDatetimeLiteral) {
+			return visitor.visitDatetimeLiteral(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class DateLiteralContext extends ParserRuleContext {
+	public _date!: StringLiteralContext;
+	public DATE(): TerminalNode { return this.getToken(OpenSearchPPLParser.DATE, 0); }
+	public stringLiteral(): StringLiteralContext {
+		return this.getRuleContext(0, StringLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_dateLiteral; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterDateLiteral) {
+			listener.enterDateLiteral(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitDateLiteral) {
+			listener.exitDateLiteral(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitDateLiteral) {
+			return visitor.visitDateLiteral(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class TimeLiteralContext extends ParserRuleContext {
+	public _time!: StringLiteralContext;
+	public TIME(): TerminalNode { return this.getToken(OpenSearchPPLParser.TIME, 0); }
+	public stringLiteral(): StringLiteralContext {
+		return this.getRuleContext(0, StringLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_timeLiteral; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterTimeLiteral) {
+			listener.enterTimeLiteral(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitTimeLiteral) {
+			listener.exitTimeLiteral(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitTimeLiteral) {
+			return visitor.visitTimeLiteral(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class TimestampLiteralContext extends ParserRuleContext {
+	public _timestamp!: StringLiteralContext;
+	public TIMESTAMP(): TerminalNode { return this.getToken(OpenSearchPPLParser.TIMESTAMP, 0); }
+	public stringLiteral(): StringLiteralContext {
+		return this.getRuleContext(0, StringLiteralContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_timestampLiteral; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterTimestampLiteral) {
+			listener.enterTimestampLiteral(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitTimestampLiteral) {
+			listener.exitTimestampLiteral(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitTimestampLiteral) {
+			return visitor.visitTimestampLiteral(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class IntervalUnitContext extends ParserRuleContext {
+	public MICROSECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MICROSECOND, 0); }
+	public SECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SECOND, 0); }
+	public MINUTE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MINUTE, 0); }
+	public HOUR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.HOUR, 0); }
+	public DAY(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DAY, 0); }
+	public WEEK(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.WEEK, 0); }
+	public MONTH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MONTH, 0); }
+	public QUARTER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.QUARTER, 0); }
+	public YEAR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.YEAR, 0); }
+	public SECOND_MICROSECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SECOND_MICROSECOND, 0); }
+	public MINUTE_MICROSECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MINUTE_MICROSECOND, 0); }
+	public MINUTE_SECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MINUTE_SECOND, 0); }
+	public HOUR_MICROSECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.HOUR_MICROSECOND, 0); }
+	public HOUR_SECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.HOUR_SECOND, 0); }
+	public HOUR_MINUTE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.HOUR_MINUTE, 0); }
+	public DAY_MICROSECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DAY_MICROSECOND, 0); }
+	public DAY_SECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DAY_SECOND, 0); }
+	public DAY_MINUTE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DAY_MINUTE, 0); }
+	public DAY_HOUR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DAY_HOUR, 0); }
+	public YEAR_MONTH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.YEAR_MONTH, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_intervalUnit; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterIntervalUnit) {
+			listener.enterIntervalUnit(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitIntervalUnit) {
+			listener.exitIntervalUnit(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitIntervalUnit) {
+			return visitor.visitIntervalUnit(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class TimespanUnitContext extends ParserRuleContext {
+	public MS(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MS, 0); }
+	public S(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.S, 0); }
+	public M(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.M, 0); }
+	public H(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.H, 0); }
+	public D(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.D, 0); }
+	public W(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.W, 0); }
+	public Q(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.Q, 0); }
+	public Y(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.Y, 0); }
+	public MILLISECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MILLISECOND, 0); }
+	public SECOND(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SECOND, 0); }
+	public MINUTE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MINUTE, 0); }
+	public HOUR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.HOUR, 0); }
+	public DAY(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DAY, 0); }
+	public WEEK(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.WEEK, 0); }
+	public MONTH(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.MONTH, 0); }
+	public QUARTER(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.QUARTER, 0); }
+	public YEAR(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.YEAR, 0); }
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_timespanUnit; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterTimespanUnit) {
+			listener.enterTimespanUnit(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitTimespanUnit) {
+			listener.exitTimespanUnit(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitTimespanUnit) {
+			return visitor.visitTimespanUnit(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class ValueListContext extends ParserRuleContext {
+	public LT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.LT_PRTHS, 0); }
+	public literalValue(): LiteralValueContext[];
+	public literalValue(i: number): LiteralValueContext;
+	public literalValue(i?: number): LiteralValueContext | LiteralValueContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(LiteralValueContext);
+		} else {
+			return this.getRuleContext(i, LiteralValueContext);
+		}
+	}
+	public RT_PRTHS(): TerminalNode { return this.getToken(OpenSearchPPLParser.RT_PRTHS, 0); }
+	public COMMA(): TerminalNode[];
+	public COMMA(i: number): TerminalNode;
+	public COMMA(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.COMMA);
+		} else {
+			return this.getToken(OpenSearchPPLParser.COMMA, i);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_valueList; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterValueList) {
+			listener.enterValueList(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitValueList) {
+			listener.exitValueList(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitValueList) {
+			return visitor.visitValueList(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class QualifiedNameContext extends ParserRuleContext {
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_qualifiedName; }
+	public copyFrom(ctx: QualifiedNameContext): void {
+		super.copyFrom(ctx);
+	}
+}
+export class IdentsAsQualifiedNameContext extends QualifiedNameContext {
+	public ident(): IdentContext[];
+	public ident(i: number): IdentContext;
+	public ident(i?: number): IdentContext | IdentContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(IdentContext);
+		} else {
+			return this.getRuleContext(i, IdentContext);
+		}
+	}
+	public DOT(): TerminalNode[];
+	public DOT(i: number): TerminalNode;
+	public DOT(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.DOT);
+		} else {
+			return this.getToken(OpenSearchPPLParser.DOT, i);
+		}
+	}
+	constructor(ctx: QualifiedNameContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterIdentsAsQualifiedName) {
+			listener.enterIdentsAsQualifiedName(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitIdentsAsQualifiedName) {
+			listener.exitIdentsAsQualifiedName(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitIdentsAsQualifiedName) {
+			return visitor.visitIdentsAsQualifiedName(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class WcQualifiedNameContext extends ParserRuleContext {
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_wcQualifiedName; }
+	public copyFrom(ctx: WcQualifiedNameContext): void {
+		super.copyFrom(ctx);
+	}
+}
+export class IdentsAsWildcardQualifiedNameContext extends WcQualifiedNameContext {
+	public wildcard(): WildcardContext[];
+	public wildcard(i: number): WildcardContext;
+	public wildcard(i?: number): WildcardContext | WildcardContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(WildcardContext);
+		} else {
+			return this.getRuleContext(i, WildcardContext);
+		}
+	}
+	public DOT(): TerminalNode[];
+	public DOT(i: number): TerminalNode;
+	public DOT(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.DOT);
+		} else {
+			return this.getToken(OpenSearchPPLParser.DOT, i);
+		}
+	}
+	constructor(ctx: WcQualifiedNameContext) {
+		super(ctx.parent, ctx.invokingState);
+		this.copyFrom(ctx);
+	}
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterIdentsAsWildcardQualifiedName) {
+			listener.enterIdentsAsWildcardQualifiedName(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitIdentsAsWildcardQualifiedName) {
+			listener.exitIdentsAsWildcardQualifiedName(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitIdentsAsWildcardQualifiedName) {
+			return visitor.visitIdentsAsWildcardQualifiedName(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class IdentContext extends ParserRuleContext {
+	public ID(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.ID, 0); }
+	public DOT(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DOT, 0); }
+	public BACKTICK(): TerminalNode[];
+	public BACKTICK(i: number): TerminalNode;
+	public BACKTICK(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.BACKTICK);
+		} else {
+			return this.getToken(OpenSearchPPLParser.BACKTICK, i);
+		}
+	}
+	public ident(): IdentContext | undefined {
+		return this.tryGetRuleContext(0, IdentContext);
+	}
+	public BQUOTA_STRING(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.BQUOTA_STRING, 0); }
+	public keywordsCanBeId(): KeywordsCanBeIdContext | undefined {
+		return this.tryGetRuleContext(0, KeywordsCanBeIdContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_ident; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterIdent) {
+			listener.enterIdent(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitIdent) {
+			listener.exitIdent(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitIdent) {
+			return visitor.visitIdent(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class WildcardContext extends ParserRuleContext {
+	public ident(): IdentContext[];
+	public ident(i: number): IdentContext;
+	public ident(i?: number): IdentContext | IdentContext[] {
+		if (i === undefined) {
+			return this.getRuleContexts(IdentContext);
+		} else {
+			return this.getRuleContext(i, IdentContext);
+		}
+	}
+	public MODULE(): TerminalNode[];
+	public MODULE(i: number): TerminalNode;
+	public MODULE(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.MODULE);
+		} else {
+			return this.getToken(OpenSearchPPLParser.MODULE, i);
+		}
+	}
+	public SINGLE_QUOTE(): TerminalNode[];
+	public SINGLE_QUOTE(i: number): TerminalNode;
+	public SINGLE_QUOTE(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.SINGLE_QUOTE);
+		} else {
+			return this.getToken(OpenSearchPPLParser.SINGLE_QUOTE, i);
+		}
+	}
+	public wildcard(): WildcardContext | undefined {
+		return this.tryGetRuleContext(0, WildcardContext);
+	}
+	public DOUBLE_QUOTE(): TerminalNode[];
+	public DOUBLE_QUOTE(i: number): TerminalNode;
+	public DOUBLE_QUOTE(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.DOUBLE_QUOTE);
+		} else {
+			return this.getToken(OpenSearchPPLParser.DOUBLE_QUOTE, i);
+		}
+	}
+	public BACKTICK(): TerminalNode[];
+	public BACKTICK(i: number): TerminalNode;
+	public BACKTICK(i?: number): TerminalNode | TerminalNode[] {
+		if (i === undefined) {
+			return this.getTokens(OpenSearchPPLParser.BACKTICK);
+		} else {
+			return this.getToken(OpenSearchPPLParser.BACKTICK, i);
+		}
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_wildcard; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterWildcard) {
+			listener.enterWildcard(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitWildcard) {
+			listener.exitWildcard(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitWildcard) {
+			return visitor.visitWildcard(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
+export class KeywordsCanBeIdContext extends ParserRuleContext {
+	public D(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.D, 0); }
+	public statsFunctionName(): StatsFunctionNameContext | undefined {
+		return this.tryGetRuleContext(0, StatsFunctionNameContext);
+	}
+	public TIMESTAMP(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIMESTAMP, 0); }
+	public DATE(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.DATE, 0); }
+	public TIME(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.TIME, 0); }
+	public FIRST(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.FIRST, 0); }
+	public LAST(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.LAST, 0); }
+	public timespanUnit(): TimespanUnitContext | undefined {
+		return this.tryGetRuleContext(0, TimespanUnitContext);
+	}
+	public SPAN(): TerminalNode | undefined { return this.tryGetToken(OpenSearchPPLParser.SPAN, 0); }
+	public constantFunctionName(): ConstantFunctionNameContext | undefined {
+		return this.tryGetRuleContext(0, ConstantFunctionNameContext);
+	}
+	public dateAndTimeFunctionBase(): DateAndTimeFunctionBaseContext | undefined {
+		return this.tryGetRuleContext(0, DateAndTimeFunctionBaseContext);
+	}
+	public textFunctionBase(): TextFunctionBaseContext | undefined {
+		return this.tryGetRuleContext(0, TextFunctionBaseContext);
+	}
+	public mathematicalFunctionBase(): MathematicalFunctionBaseContext | undefined {
+		return this.tryGetRuleContext(0, MathematicalFunctionBaseContext);
+	}
+	constructor(parent: ParserRuleContext | undefined, invokingState: number) {
+		super(parent, invokingState);
+	}
+	// @Override
+	public get ruleIndex(): number { return OpenSearchPPLParser.RULE_keywordsCanBeId; }
+	// @Override
+	public enterRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.enterKeywordsCanBeId) {
+			listener.enterKeywordsCanBeId(this);
+		}
+	}
+	// @Override
+	public exitRule(listener: OpenSearchPPLParserListener): void {
+		if (listener.exitKeywordsCanBeId) {
+			listener.exitKeywordsCanBeId(this);
+		}
+	}
+	// @Override
+	public accept<Result>(visitor: OpenSearchPPLParserVisitor<Result>): Result {
+		if (visitor.visitKeywordsCanBeId) {
+			return visitor.visitKeywordsCanBeId(this);
+		} else {
+			return visitor.visitChildren(this);
+		}
+	}
+}
+
+
diff --git a/common/query_manager/antlr/output/OpenSearchPPLParserListener.ts b/common/query_manager/antlr/output/OpenSearchPPLParserListener.ts
new file mode 100644
index 0000000000..c5a00ad0f0
--- /dev/null
+++ b/common/query_manager/antlr/output/OpenSearchPPLParserListener.ts
@@ -0,0 +1,1557 @@
+// Generated from ./common/query_manager/antlr/grammar/OpenSearchPPLParser.g4 by ANTLR 4.9.0-SNAPSHOT
+
+
+import { ParseTreeListener } from "antlr4ts/tree/ParseTreeListener";
+
+import { BinaryArithmeticContext } from "./OpenSearchPPLParser";
+import { ParentheticBinaryArithmeticContext } from "./OpenSearchPPLParser";
+import { ValueExpressionDefaultContext } from "./OpenSearchPPLParser";
+import { CompareExprContext } from "./OpenSearchPPLParser";
+import { InExprContext } from "./OpenSearchPPLParser";
+import { IdentsAsWildcardQualifiedNameContext } from "./OpenSearchPPLParser";
+import { SearchFromContext } from "./OpenSearchPPLParser";
+import { SearchFromFilterContext } from "./OpenSearchPPLParser";
+import { SearchFilterFromContext } from "./OpenSearchPPLParser";
+import { StatsFunctionCallContext } from "./OpenSearchPPLParser";
+import { CountAllFunctionCallContext } from "./OpenSearchPPLParser";
+import { DistinctCountFunctionCallContext } from "./OpenSearchPPLParser";
+import { PercentileAggFunctionCallContext } from "./OpenSearchPPLParser";
+import { TakeAggFunctionCallContext } from "./OpenSearchPPLParser";
+import { IdentsAsQualifiedNameContext } from "./OpenSearchPPLParser";
+import { ComparsionContext } from "./OpenSearchPPLParser";
+import { LogicalNotContext } from "./OpenSearchPPLParser";
+import { LogicalOrContext } from "./OpenSearchPPLParser";
+import { LogicalAndContext } from "./OpenSearchPPLParser";
+import { LogicalXorContext } from "./OpenSearchPPLParser";
+import { BooleanExprContext } from "./OpenSearchPPLParser";
+import { RelevanceExprContext } from "./OpenSearchPPLParser";
+import { RootContext } from "./OpenSearchPPLParser";
+import { PplStatementContext } from "./OpenSearchPPLParser";
+import { PplCommandsContext } from "./OpenSearchPPLParser";
+import { CommandsContext } from "./OpenSearchPPLParser";
+import { SearchCommandContext } from "./OpenSearchPPLParser";
+import { DescribeCommandContext } from "./OpenSearchPPLParser";
+import { ShowCatalogsCommandContext } from "./OpenSearchPPLParser";
+import { WhereCommandContext } from "./OpenSearchPPLParser";
+import { FieldsCommandContext } from "./OpenSearchPPLParser";
+import { RenameCommandContext } from "./OpenSearchPPLParser";
+import { StatsCommandContext } from "./OpenSearchPPLParser";
+import { DedupCommandContext } from "./OpenSearchPPLParser";
+import { SortCommandContext } from "./OpenSearchPPLParser";
+import { EvalCommandContext } from "./OpenSearchPPLParser";
+import { HeadCommandContext } from "./OpenSearchPPLParser";
+import { TopCommandContext } from "./OpenSearchPPLParser";
+import { RareCommandContext } from "./OpenSearchPPLParser";
+import { GrokCommandContext } from "./OpenSearchPPLParser";
+import { ParseCommandContext } from "./OpenSearchPPLParser";
+import { PatternsCommandContext } from "./OpenSearchPPLParser";
+import { PatternsParameterContext } from "./OpenSearchPPLParser";
+import { PatternsMethodContext } from "./OpenSearchPPLParser";
+import { KmeansCommandContext } from "./OpenSearchPPLParser";
+import { KmeansParameterContext } from "./OpenSearchPPLParser";
+import { AdCommandContext } from "./OpenSearchPPLParser";
+import { AdParameterContext } from "./OpenSearchPPLParser";
+import { MlCommandContext } from "./OpenSearchPPLParser";
+import { MlArgContext } from "./OpenSearchPPLParser";
+import { FromClauseContext } from "./OpenSearchPPLParser";
+import { TableSourceClauseContext } from "./OpenSearchPPLParser";
+import { RenameClasueContext } from "./OpenSearchPPLParser";
+import { ByClauseContext } from "./OpenSearchPPLParser";
+import { StatsByClauseContext } from "./OpenSearchPPLParser";
+import { BySpanClauseContext } from "./OpenSearchPPLParser";
+import { SpanClauseContext } from "./OpenSearchPPLParser";
+import { SortbyClauseContext } from "./OpenSearchPPLParser";
+import { EvalClauseContext } from "./OpenSearchPPLParser";
+import { StatsAggTermContext } from "./OpenSearchPPLParser";
+import { StatsFunctionContext } from "./OpenSearchPPLParser";
+import { StatsFunctionNameContext } from "./OpenSearchPPLParser";
+import { TakeAggFunctionContext } from "./OpenSearchPPLParser";
+import { PercentileAggFunctionContext } from "./OpenSearchPPLParser";
+import { ExpressionContext } from "./OpenSearchPPLParser";
+import { LogicalExpressionContext } from "./OpenSearchPPLParser";
+import { ComparisonExpressionContext } from "./OpenSearchPPLParser";
+import { ValueExpressionContext } from "./OpenSearchPPLParser";
+import { PrimaryExpressionContext } from "./OpenSearchPPLParser";
+import { ConstantFunctionContext } from "./OpenSearchPPLParser";
+import { BooleanExpressionContext } from "./OpenSearchPPLParser";
+import { RelevanceExpressionContext } from "./OpenSearchPPLParser";
+import { SingleFieldRelevanceFunctionContext } from "./OpenSearchPPLParser";
+import { MultiFieldRelevanceFunctionContext } from "./OpenSearchPPLParser";
+import { TableSourceContext } from "./OpenSearchPPLParser";
+import { TableFunctionContext } from "./OpenSearchPPLParser";
+import { FieldListContext } from "./OpenSearchPPLParser";
+import { WcFieldListContext } from "./OpenSearchPPLParser";
+import { SortFieldContext } from "./OpenSearchPPLParser";
+import { SortFieldExpressionContext } from "./OpenSearchPPLParser";
+import { FieldExpressionContext } from "./OpenSearchPPLParser";
+import { WcFieldExpressionContext } from "./OpenSearchPPLParser";
+import { EvalFunctionCallContext } from "./OpenSearchPPLParser";
+import { DataTypeFunctionCallContext } from "./OpenSearchPPLParser";
+import { BooleanFunctionCallContext } from "./OpenSearchPPLParser";
+import { ConvertedDataTypeContext } from "./OpenSearchPPLParser";
+import { EvalFunctionNameContext } from "./OpenSearchPPLParser";
+import { FunctionArgsContext } from "./OpenSearchPPLParser";
+import { FunctionArgContext } from "./OpenSearchPPLParser";
+import { RelevanceArgContext } from "./OpenSearchPPLParser";
+import { RelevanceArgNameContext } from "./OpenSearchPPLParser";
+import { RelevanceFieldAndWeightContext } from "./OpenSearchPPLParser";
+import { RelevanceFieldWeightContext } from "./OpenSearchPPLParser";
+import { RelevanceFieldContext } from "./OpenSearchPPLParser";
+import { RelevanceQueryContext } from "./OpenSearchPPLParser";
+import { RelevanceArgValueContext } from "./OpenSearchPPLParser";
+import { MathematicalFunctionBaseContext } from "./OpenSearchPPLParser";
+import { TrigonometricFunctionNameContext } from "./OpenSearchPPLParser";
+import { DateAndTimeFunctionBaseContext } from "./OpenSearchPPLParser";
+import { ConstantFunctionNameContext } from "./OpenSearchPPLParser";
+import { ConditionFunctionBaseContext } from "./OpenSearchPPLParser";
+import { SystemFunctionBaseContext } from "./OpenSearchPPLParser";
+import { TextFunctionBaseContext } from "./OpenSearchPPLParser";
+import { ComparisonOperatorContext } from "./OpenSearchPPLParser";
+import { BinaryOperatorContext } from "./OpenSearchPPLParser";
+import { SingleFieldRelevanceFunctionNameContext } from "./OpenSearchPPLParser";
+import { MultiFieldRelevanceFunctionNameContext } from "./OpenSearchPPLParser";
+import { LiteralValueContext } from "./OpenSearchPPLParser";
+import { IntervalLiteralContext } from "./OpenSearchPPLParser";
+import { StringLiteralContext } from "./OpenSearchPPLParser";
+import { IntegerLiteralContext } from "./OpenSearchPPLParser";
+import { DecimalLiteralContext } from "./OpenSearchPPLParser";
+import { BooleanLiteralContext } from "./OpenSearchPPLParser";
+import { DatetimeLiteralContext } from "./OpenSearchPPLParser";
+import { DateLiteralContext } from "./OpenSearchPPLParser";
+import { TimeLiteralContext } from "./OpenSearchPPLParser";
+import { TimestampLiteralContext } from "./OpenSearchPPLParser";
+import { IntervalUnitContext } from "./OpenSearchPPLParser";
+import { TimespanUnitContext } from "./OpenSearchPPLParser";
+import { ValueListContext } from "./OpenSearchPPLParser";
+import { QualifiedNameContext } from "./OpenSearchPPLParser";
+import { WcQualifiedNameContext } from "./OpenSearchPPLParser";
+import { IdentContext } from "./OpenSearchPPLParser";
+import { WildcardContext } from "./OpenSearchPPLParser";
+import { KeywordsCanBeIdContext } from "./OpenSearchPPLParser";
+
+
+/**
+ * This interface defines a complete listener for a parse tree produced by
+ * `OpenSearchPPLParser`.
+ */
+export interface OpenSearchPPLParserListener extends ParseTreeListener {
+	/**
+	 * Enter a parse tree produced by the `binaryArithmetic`
+	 * labeled alternative in `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterBinaryArithmetic?: (ctx: BinaryArithmeticContext) => void;
+	/**
+	 * Exit a parse tree produced by the `binaryArithmetic`
+	 * labeled alternative in `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitBinaryArithmetic?: (ctx: BinaryArithmeticContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `parentheticBinaryArithmetic`
+	 * labeled alternative in `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterParentheticBinaryArithmetic?: (ctx: ParentheticBinaryArithmeticContext) => void;
+	/**
+	 * Exit a parse tree produced by the `parentheticBinaryArithmetic`
+	 * labeled alternative in `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitParentheticBinaryArithmetic?: (ctx: ParentheticBinaryArithmeticContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `valueExpressionDefault`
+	 * labeled alternative in `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterValueExpressionDefault?: (ctx: ValueExpressionDefaultContext) => void;
+	/**
+	 * Exit a parse tree produced by the `valueExpressionDefault`
+	 * labeled alternative in `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitValueExpressionDefault?: (ctx: ValueExpressionDefaultContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `compareExpr`
+	 * labeled alternative in `OpenSearchPPLParser.comparisonExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterCompareExpr?: (ctx: CompareExprContext) => void;
+	/**
+	 * Exit a parse tree produced by the `compareExpr`
+	 * labeled alternative in `OpenSearchPPLParser.comparisonExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitCompareExpr?: (ctx: CompareExprContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `inExpr`
+	 * labeled alternative in `OpenSearchPPLParser.comparisonExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterInExpr?: (ctx: InExprContext) => void;
+	/**
+	 * Exit a parse tree produced by the `inExpr`
+	 * labeled alternative in `OpenSearchPPLParser.comparisonExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitInExpr?: (ctx: InExprContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `identsAsWildcardQualifiedName`
+	 * labeled alternative in `OpenSearchPPLParser.wcQualifiedName`.
+	 * @param ctx the parse tree
+	 */
+	enterIdentsAsWildcardQualifiedName?: (ctx: IdentsAsWildcardQualifiedNameContext) => void;
+	/**
+	 * Exit a parse tree produced by the `identsAsWildcardQualifiedName`
+	 * labeled alternative in `OpenSearchPPLParser.wcQualifiedName`.
+	 * @param ctx the parse tree
+	 */
+	exitIdentsAsWildcardQualifiedName?: (ctx: IdentsAsWildcardQualifiedNameContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `searchFrom`
+	 * labeled alternative in `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterSearchFrom?: (ctx: SearchFromContext) => void;
+	/**
+	 * Exit a parse tree produced by the `searchFrom`
+	 * labeled alternative in `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitSearchFrom?: (ctx: SearchFromContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `searchFromFilter`
+	 * labeled alternative in `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterSearchFromFilter?: (ctx: SearchFromFilterContext) => void;
+	/**
+	 * Exit a parse tree produced by the `searchFromFilter`
+	 * labeled alternative in `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitSearchFromFilter?: (ctx: SearchFromFilterContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `searchFilterFrom`
+	 * labeled alternative in `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterSearchFilterFrom?: (ctx: SearchFilterFromContext) => void;
+	/**
+	 * Exit a parse tree produced by the `searchFilterFrom`
+	 * labeled alternative in `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitSearchFilterFrom?: (ctx: SearchFilterFromContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `statsFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterStatsFunctionCall?: (ctx: StatsFunctionCallContext) => void;
+	/**
+	 * Exit a parse tree produced by the `statsFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitStatsFunctionCall?: (ctx: StatsFunctionCallContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `countAllFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterCountAllFunctionCall?: (ctx: CountAllFunctionCallContext) => void;
+	/**
+	 * Exit a parse tree produced by the `countAllFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitCountAllFunctionCall?: (ctx: CountAllFunctionCallContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `distinctCountFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterDistinctCountFunctionCall?: (ctx: DistinctCountFunctionCallContext) => void;
+	/**
+	 * Exit a parse tree produced by the `distinctCountFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitDistinctCountFunctionCall?: (ctx: DistinctCountFunctionCallContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `percentileAggFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterPercentileAggFunctionCall?: (ctx: PercentileAggFunctionCallContext) => void;
+	/**
+	 * Exit a parse tree produced by the `percentileAggFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitPercentileAggFunctionCall?: (ctx: PercentileAggFunctionCallContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `takeAggFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterTakeAggFunctionCall?: (ctx: TakeAggFunctionCallContext) => void;
+	/**
+	 * Exit a parse tree produced by the `takeAggFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitTakeAggFunctionCall?: (ctx: TakeAggFunctionCallContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `identsAsQualifiedName`
+	 * labeled alternative in `OpenSearchPPLParser.qualifiedName`.
+	 * @param ctx the parse tree
+	 */
+	enterIdentsAsQualifiedName?: (ctx: IdentsAsQualifiedNameContext) => void;
+	/**
+	 * Exit a parse tree produced by the `identsAsQualifiedName`
+	 * labeled alternative in `OpenSearchPPLParser.qualifiedName`.
+	 * @param ctx the parse tree
+	 */
+	exitIdentsAsQualifiedName?: (ctx: IdentsAsQualifiedNameContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `comparsion`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterComparsion?: (ctx: ComparsionContext) => void;
+	/**
+	 * Exit a parse tree produced by the `comparsion`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitComparsion?: (ctx: ComparsionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `logicalNot`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterLogicalNot?: (ctx: LogicalNotContext) => void;
+	/**
+	 * Exit a parse tree produced by the `logicalNot`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitLogicalNot?: (ctx: LogicalNotContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `logicalOr`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterLogicalOr?: (ctx: LogicalOrContext) => void;
+	/**
+	 * Exit a parse tree produced by the `logicalOr`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitLogicalOr?: (ctx: LogicalOrContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `logicalAnd`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterLogicalAnd?: (ctx: LogicalAndContext) => void;
+	/**
+	 * Exit a parse tree produced by the `logicalAnd`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitLogicalAnd?: (ctx: LogicalAndContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `logicalXor`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterLogicalXor?: (ctx: LogicalXorContext) => void;
+	/**
+	 * Exit a parse tree produced by the `logicalXor`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitLogicalXor?: (ctx: LogicalXorContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `booleanExpr`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterBooleanExpr?: (ctx: BooleanExprContext) => void;
+	/**
+	 * Exit a parse tree produced by the `booleanExpr`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitBooleanExpr?: (ctx: BooleanExprContext) => void;
+
+	/**
+	 * Enter a parse tree produced by the `relevanceExpr`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterRelevanceExpr?: (ctx: RelevanceExprContext) => void;
+	/**
+	 * Exit a parse tree produced by the `relevanceExpr`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitRelevanceExpr?: (ctx: RelevanceExprContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.root`.
+	 * @param ctx the parse tree
+	 */
+	enterRoot?: (ctx: RootContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.root`.
+	 * @param ctx the parse tree
+	 */
+	exitRoot?: (ctx: RootContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.pplStatement`.
+	 * @param ctx the parse tree
+	 */
+	enterPplStatement?: (ctx: PplStatementContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.pplStatement`.
+	 * @param ctx the parse tree
+	 */
+	exitPplStatement?: (ctx: PplStatementContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.pplCommands`.
+	 * @param ctx the parse tree
+	 */
+	enterPplCommands?: (ctx: PplCommandsContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.pplCommands`.
+	 * @param ctx the parse tree
+	 */
+	exitPplCommands?: (ctx: PplCommandsContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.commands`.
+	 * @param ctx the parse tree
+	 */
+	enterCommands?: (ctx: CommandsContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.commands`.
+	 * @param ctx the parse tree
+	 */
+	exitCommands?: (ctx: CommandsContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterSearchCommand?: (ctx: SearchCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitSearchCommand?: (ctx: SearchCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.describeCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterDescribeCommand?: (ctx: DescribeCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.describeCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitDescribeCommand?: (ctx: DescribeCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.showCatalogsCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterShowCatalogsCommand?: (ctx: ShowCatalogsCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.showCatalogsCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitShowCatalogsCommand?: (ctx: ShowCatalogsCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.whereCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterWhereCommand?: (ctx: WhereCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.whereCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitWhereCommand?: (ctx: WhereCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.fieldsCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterFieldsCommand?: (ctx: FieldsCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.fieldsCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitFieldsCommand?: (ctx: FieldsCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.renameCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterRenameCommand?: (ctx: RenameCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.renameCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitRenameCommand?: (ctx: RenameCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.statsCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterStatsCommand?: (ctx: StatsCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.statsCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitStatsCommand?: (ctx: StatsCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.dedupCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterDedupCommand?: (ctx: DedupCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.dedupCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitDedupCommand?: (ctx: DedupCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.sortCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterSortCommand?: (ctx: SortCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.sortCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitSortCommand?: (ctx: SortCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.evalCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterEvalCommand?: (ctx: EvalCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.evalCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitEvalCommand?: (ctx: EvalCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.headCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterHeadCommand?: (ctx: HeadCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.headCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitHeadCommand?: (ctx: HeadCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.topCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterTopCommand?: (ctx: TopCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.topCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitTopCommand?: (ctx: TopCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.rareCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterRareCommand?: (ctx: RareCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.rareCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitRareCommand?: (ctx: RareCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.grokCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterGrokCommand?: (ctx: GrokCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.grokCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitGrokCommand?: (ctx: GrokCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.parseCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterParseCommand?: (ctx: ParseCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.parseCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitParseCommand?: (ctx: ParseCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.patternsCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterPatternsCommand?: (ctx: PatternsCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.patternsCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitPatternsCommand?: (ctx: PatternsCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.patternsParameter`.
+	 * @param ctx the parse tree
+	 */
+	enterPatternsParameter?: (ctx: PatternsParameterContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.patternsParameter`.
+	 * @param ctx the parse tree
+	 */
+	exitPatternsParameter?: (ctx: PatternsParameterContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.patternsMethod`.
+	 * @param ctx the parse tree
+	 */
+	enterPatternsMethod?: (ctx: PatternsMethodContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.patternsMethod`.
+	 * @param ctx the parse tree
+	 */
+	exitPatternsMethod?: (ctx: PatternsMethodContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.kmeansCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterKmeansCommand?: (ctx: KmeansCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.kmeansCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitKmeansCommand?: (ctx: KmeansCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.kmeansParameter`.
+	 * @param ctx the parse tree
+	 */
+	enterKmeansParameter?: (ctx: KmeansParameterContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.kmeansParameter`.
+	 * @param ctx the parse tree
+	 */
+	exitKmeansParameter?: (ctx: KmeansParameterContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.adCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterAdCommand?: (ctx: AdCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.adCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitAdCommand?: (ctx: AdCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.adParameter`.
+	 * @param ctx the parse tree
+	 */
+	enterAdParameter?: (ctx: AdParameterContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.adParameter`.
+	 * @param ctx the parse tree
+	 */
+	exitAdParameter?: (ctx: AdParameterContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.mlCommand`.
+	 * @param ctx the parse tree
+	 */
+	enterMlCommand?: (ctx: MlCommandContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.mlCommand`.
+	 * @param ctx the parse tree
+	 */
+	exitMlCommand?: (ctx: MlCommandContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.mlArg`.
+	 * @param ctx the parse tree
+	 */
+	enterMlArg?: (ctx: MlArgContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.mlArg`.
+	 * @param ctx the parse tree
+	 */
+	exitMlArg?: (ctx: MlArgContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.fromClause`.
+	 * @param ctx the parse tree
+	 */
+	enterFromClause?: (ctx: FromClauseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.fromClause`.
+	 * @param ctx the parse tree
+	 */
+	exitFromClause?: (ctx: FromClauseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.tableSourceClause`.
+	 * @param ctx the parse tree
+	 */
+	enterTableSourceClause?: (ctx: TableSourceClauseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.tableSourceClause`.
+	 * @param ctx the parse tree
+	 */
+	exitTableSourceClause?: (ctx: TableSourceClauseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.renameClasue`.
+	 * @param ctx the parse tree
+	 */
+	enterRenameClasue?: (ctx: RenameClasueContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.renameClasue`.
+	 * @param ctx the parse tree
+	 */
+	exitRenameClasue?: (ctx: RenameClasueContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.byClause`.
+	 * @param ctx the parse tree
+	 */
+	enterByClause?: (ctx: ByClauseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.byClause`.
+	 * @param ctx the parse tree
+	 */
+	exitByClause?: (ctx: ByClauseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.statsByClause`.
+	 * @param ctx the parse tree
+	 */
+	enterStatsByClause?: (ctx: StatsByClauseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.statsByClause`.
+	 * @param ctx the parse tree
+	 */
+	exitStatsByClause?: (ctx: StatsByClauseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.bySpanClause`.
+	 * @param ctx the parse tree
+	 */
+	enterBySpanClause?: (ctx: BySpanClauseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.bySpanClause`.
+	 * @param ctx the parse tree
+	 */
+	exitBySpanClause?: (ctx: BySpanClauseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.spanClause`.
+	 * @param ctx the parse tree
+	 */
+	enterSpanClause?: (ctx: SpanClauseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.spanClause`.
+	 * @param ctx the parse tree
+	 */
+	exitSpanClause?: (ctx: SpanClauseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.sortbyClause`.
+	 * @param ctx the parse tree
+	 */
+	enterSortbyClause?: (ctx: SortbyClauseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.sortbyClause`.
+	 * @param ctx the parse tree
+	 */
+	exitSortbyClause?: (ctx: SortbyClauseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.evalClause`.
+	 * @param ctx the parse tree
+	 */
+	enterEvalClause?: (ctx: EvalClauseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.evalClause`.
+	 * @param ctx the parse tree
+	 */
+	exitEvalClause?: (ctx: EvalClauseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.statsAggTerm`.
+	 * @param ctx the parse tree
+	 */
+	enterStatsAggTerm?: (ctx: StatsAggTermContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.statsAggTerm`.
+	 * @param ctx the parse tree
+	 */
+	exitStatsAggTerm?: (ctx: StatsAggTermContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterStatsFunction?: (ctx: StatsFunctionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitStatsFunction?: (ctx: StatsFunctionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.statsFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	enterStatsFunctionName?: (ctx: StatsFunctionNameContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.statsFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	exitStatsFunctionName?: (ctx: StatsFunctionNameContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.takeAggFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterTakeAggFunction?: (ctx: TakeAggFunctionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.takeAggFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitTakeAggFunction?: (ctx: TakeAggFunctionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.percentileAggFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterPercentileAggFunction?: (ctx: PercentileAggFunctionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.percentileAggFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitPercentileAggFunction?: (ctx: PercentileAggFunctionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.expression`.
+	 * @param ctx the parse tree
+	 */
+	enterExpression?: (ctx: ExpressionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.expression`.
+	 * @param ctx the parse tree
+	 */
+	exitExpression?: (ctx: ExpressionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterLogicalExpression?: (ctx: LogicalExpressionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitLogicalExpression?: (ctx: LogicalExpressionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.comparisonExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterComparisonExpression?: (ctx: ComparisonExpressionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.comparisonExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitComparisonExpression?: (ctx: ComparisonExpressionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterValueExpression?: (ctx: ValueExpressionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitValueExpression?: (ctx: ValueExpressionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.primaryExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterPrimaryExpression?: (ctx: PrimaryExpressionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.primaryExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitPrimaryExpression?: (ctx: PrimaryExpressionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.constantFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterConstantFunction?: (ctx: ConstantFunctionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.constantFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitConstantFunction?: (ctx: ConstantFunctionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.booleanExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterBooleanExpression?: (ctx: BooleanExpressionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.booleanExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitBooleanExpression?: (ctx: BooleanExpressionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.relevanceExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterRelevanceExpression?: (ctx: RelevanceExpressionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.relevanceExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitRelevanceExpression?: (ctx: RelevanceExpressionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.singleFieldRelevanceFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterSingleFieldRelevanceFunction?: (ctx: SingleFieldRelevanceFunctionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.singleFieldRelevanceFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitSingleFieldRelevanceFunction?: (ctx: SingleFieldRelevanceFunctionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.multiFieldRelevanceFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterMultiFieldRelevanceFunction?: (ctx: MultiFieldRelevanceFunctionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.multiFieldRelevanceFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitMultiFieldRelevanceFunction?: (ctx: MultiFieldRelevanceFunctionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.tableSource`.
+	 * @param ctx the parse tree
+	 */
+	enterTableSource?: (ctx: TableSourceContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.tableSource`.
+	 * @param ctx the parse tree
+	 */
+	exitTableSource?: (ctx: TableSourceContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.tableFunction`.
+	 * @param ctx the parse tree
+	 */
+	enterTableFunction?: (ctx: TableFunctionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.tableFunction`.
+	 * @param ctx the parse tree
+	 */
+	exitTableFunction?: (ctx: TableFunctionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.fieldList`.
+	 * @param ctx the parse tree
+	 */
+	enterFieldList?: (ctx: FieldListContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.fieldList`.
+	 * @param ctx the parse tree
+	 */
+	exitFieldList?: (ctx: FieldListContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.wcFieldList`.
+	 * @param ctx the parse tree
+	 */
+	enterWcFieldList?: (ctx: WcFieldListContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.wcFieldList`.
+	 * @param ctx the parse tree
+	 */
+	exitWcFieldList?: (ctx: WcFieldListContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.sortField`.
+	 * @param ctx the parse tree
+	 */
+	enterSortField?: (ctx: SortFieldContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.sortField`.
+	 * @param ctx the parse tree
+	 */
+	exitSortField?: (ctx: SortFieldContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.sortFieldExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterSortFieldExpression?: (ctx: SortFieldExpressionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.sortFieldExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitSortFieldExpression?: (ctx: SortFieldExpressionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.fieldExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterFieldExpression?: (ctx: FieldExpressionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.fieldExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitFieldExpression?: (ctx: FieldExpressionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.wcFieldExpression`.
+	 * @param ctx the parse tree
+	 */
+	enterWcFieldExpression?: (ctx: WcFieldExpressionContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.wcFieldExpression`.
+	 * @param ctx the parse tree
+	 */
+	exitWcFieldExpression?: (ctx: WcFieldExpressionContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.evalFunctionCall`.
+	 * @param ctx the parse tree
+	 */
+	enterEvalFunctionCall?: (ctx: EvalFunctionCallContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.evalFunctionCall`.
+	 * @param ctx the parse tree
+	 */
+	exitEvalFunctionCall?: (ctx: EvalFunctionCallContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.dataTypeFunctionCall`.
+	 * @param ctx the parse tree
+	 */
+	enterDataTypeFunctionCall?: (ctx: DataTypeFunctionCallContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.dataTypeFunctionCall`.
+	 * @param ctx the parse tree
+	 */
+	exitDataTypeFunctionCall?: (ctx: DataTypeFunctionCallContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.booleanFunctionCall`.
+	 * @param ctx the parse tree
+	 */
+	enterBooleanFunctionCall?: (ctx: BooleanFunctionCallContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.booleanFunctionCall`.
+	 * @param ctx the parse tree
+	 */
+	exitBooleanFunctionCall?: (ctx: BooleanFunctionCallContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.convertedDataType`.
+	 * @param ctx the parse tree
+	 */
+	enterConvertedDataType?: (ctx: ConvertedDataTypeContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.convertedDataType`.
+	 * @param ctx the parse tree
+	 */
+	exitConvertedDataType?: (ctx: ConvertedDataTypeContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.evalFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	enterEvalFunctionName?: (ctx: EvalFunctionNameContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.evalFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	exitEvalFunctionName?: (ctx: EvalFunctionNameContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.functionArgs`.
+	 * @param ctx the parse tree
+	 */
+	enterFunctionArgs?: (ctx: FunctionArgsContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.functionArgs`.
+	 * @param ctx the parse tree
+	 */
+	exitFunctionArgs?: (ctx: FunctionArgsContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.functionArg`.
+	 * @param ctx the parse tree
+	 */
+	enterFunctionArg?: (ctx: FunctionArgContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.functionArg`.
+	 * @param ctx the parse tree
+	 */
+	exitFunctionArg?: (ctx: FunctionArgContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.relevanceArg`.
+	 * @param ctx the parse tree
+	 */
+	enterRelevanceArg?: (ctx: RelevanceArgContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.relevanceArg`.
+	 * @param ctx the parse tree
+	 */
+	exitRelevanceArg?: (ctx: RelevanceArgContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.relevanceArgName`.
+	 * @param ctx the parse tree
+	 */
+	enterRelevanceArgName?: (ctx: RelevanceArgNameContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.relevanceArgName`.
+	 * @param ctx the parse tree
+	 */
+	exitRelevanceArgName?: (ctx: RelevanceArgNameContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.relevanceFieldAndWeight`.
+	 * @param ctx the parse tree
+	 */
+	enterRelevanceFieldAndWeight?: (ctx: RelevanceFieldAndWeightContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.relevanceFieldAndWeight`.
+	 * @param ctx the parse tree
+	 */
+	exitRelevanceFieldAndWeight?: (ctx: RelevanceFieldAndWeightContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.relevanceFieldWeight`.
+	 * @param ctx the parse tree
+	 */
+	enterRelevanceFieldWeight?: (ctx: RelevanceFieldWeightContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.relevanceFieldWeight`.
+	 * @param ctx the parse tree
+	 */
+	exitRelevanceFieldWeight?: (ctx: RelevanceFieldWeightContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.relevanceField`.
+	 * @param ctx the parse tree
+	 */
+	enterRelevanceField?: (ctx: RelevanceFieldContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.relevanceField`.
+	 * @param ctx the parse tree
+	 */
+	exitRelevanceField?: (ctx: RelevanceFieldContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.relevanceQuery`.
+	 * @param ctx the parse tree
+	 */
+	enterRelevanceQuery?: (ctx: RelevanceQueryContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.relevanceQuery`.
+	 * @param ctx the parse tree
+	 */
+	exitRelevanceQuery?: (ctx: RelevanceQueryContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.relevanceArgValue`.
+	 * @param ctx the parse tree
+	 */
+	enterRelevanceArgValue?: (ctx: RelevanceArgValueContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.relevanceArgValue`.
+	 * @param ctx the parse tree
+	 */
+	exitRelevanceArgValue?: (ctx: RelevanceArgValueContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.mathematicalFunctionBase`.
+	 * @param ctx the parse tree
+	 */
+	enterMathematicalFunctionBase?: (ctx: MathematicalFunctionBaseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.mathematicalFunctionBase`.
+	 * @param ctx the parse tree
+	 */
+	exitMathematicalFunctionBase?: (ctx: MathematicalFunctionBaseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.trigonometricFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	enterTrigonometricFunctionName?: (ctx: TrigonometricFunctionNameContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.trigonometricFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	exitTrigonometricFunctionName?: (ctx: TrigonometricFunctionNameContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.dateAndTimeFunctionBase`.
+	 * @param ctx the parse tree
+	 */
+	enterDateAndTimeFunctionBase?: (ctx: DateAndTimeFunctionBaseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.dateAndTimeFunctionBase`.
+	 * @param ctx the parse tree
+	 */
+	exitDateAndTimeFunctionBase?: (ctx: DateAndTimeFunctionBaseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.constantFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	enterConstantFunctionName?: (ctx: ConstantFunctionNameContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.constantFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	exitConstantFunctionName?: (ctx: ConstantFunctionNameContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.conditionFunctionBase`.
+	 * @param ctx the parse tree
+	 */
+	enterConditionFunctionBase?: (ctx: ConditionFunctionBaseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.conditionFunctionBase`.
+	 * @param ctx the parse tree
+	 */
+	exitConditionFunctionBase?: (ctx: ConditionFunctionBaseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.systemFunctionBase`.
+	 * @param ctx the parse tree
+	 */
+	enterSystemFunctionBase?: (ctx: SystemFunctionBaseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.systemFunctionBase`.
+	 * @param ctx the parse tree
+	 */
+	exitSystemFunctionBase?: (ctx: SystemFunctionBaseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.textFunctionBase`.
+	 * @param ctx the parse tree
+	 */
+	enterTextFunctionBase?: (ctx: TextFunctionBaseContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.textFunctionBase`.
+	 * @param ctx the parse tree
+	 */
+	exitTextFunctionBase?: (ctx: TextFunctionBaseContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.comparisonOperator`.
+	 * @param ctx the parse tree
+	 */
+	enterComparisonOperator?: (ctx: ComparisonOperatorContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.comparisonOperator`.
+	 * @param ctx the parse tree
+	 */
+	exitComparisonOperator?: (ctx: ComparisonOperatorContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.binaryOperator`.
+	 * @param ctx the parse tree
+	 */
+	enterBinaryOperator?: (ctx: BinaryOperatorContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.binaryOperator`.
+	 * @param ctx the parse tree
+	 */
+	exitBinaryOperator?: (ctx: BinaryOperatorContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.singleFieldRelevanceFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	enterSingleFieldRelevanceFunctionName?: (ctx: SingleFieldRelevanceFunctionNameContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.singleFieldRelevanceFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	exitSingleFieldRelevanceFunctionName?: (ctx: SingleFieldRelevanceFunctionNameContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.multiFieldRelevanceFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	enterMultiFieldRelevanceFunctionName?: (ctx: MultiFieldRelevanceFunctionNameContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.multiFieldRelevanceFunctionName`.
+	 * @param ctx the parse tree
+	 */
+	exitMultiFieldRelevanceFunctionName?: (ctx: MultiFieldRelevanceFunctionNameContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.literalValue`.
+	 * @param ctx the parse tree
+	 */
+	enterLiteralValue?: (ctx: LiteralValueContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.literalValue`.
+	 * @param ctx the parse tree
+	 */
+	exitLiteralValue?: (ctx: LiteralValueContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.intervalLiteral`.
+	 * @param ctx the parse tree
+	 */
+	enterIntervalLiteral?: (ctx: IntervalLiteralContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.intervalLiteral`.
+	 * @param ctx the parse tree
+	 */
+	exitIntervalLiteral?: (ctx: IntervalLiteralContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.stringLiteral`.
+	 * @param ctx the parse tree
+	 */
+	enterStringLiteral?: (ctx: StringLiteralContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.stringLiteral`.
+	 * @param ctx the parse tree
+	 */
+	exitStringLiteral?: (ctx: StringLiteralContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.integerLiteral`.
+	 * @param ctx the parse tree
+	 */
+	enterIntegerLiteral?: (ctx: IntegerLiteralContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.integerLiteral`.
+	 * @param ctx the parse tree
+	 */
+	exitIntegerLiteral?: (ctx: IntegerLiteralContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.decimalLiteral`.
+	 * @param ctx the parse tree
+	 */
+	enterDecimalLiteral?: (ctx: DecimalLiteralContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.decimalLiteral`.
+	 * @param ctx the parse tree
+	 */
+	exitDecimalLiteral?: (ctx: DecimalLiteralContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.booleanLiteral`.
+	 * @param ctx the parse tree
+	 */
+	enterBooleanLiteral?: (ctx: BooleanLiteralContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.booleanLiteral`.
+	 * @param ctx the parse tree
+	 */
+	exitBooleanLiteral?: (ctx: BooleanLiteralContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.datetimeLiteral`.
+	 * @param ctx the parse tree
+	 */
+	enterDatetimeLiteral?: (ctx: DatetimeLiteralContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.datetimeLiteral`.
+	 * @param ctx the parse tree
+	 */
+	exitDatetimeLiteral?: (ctx: DatetimeLiteralContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.dateLiteral`.
+	 * @param ctx the parse tree
+	 */
+	enterDateLiteral?: (ctx: DateLiteralContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.dateLiteral`.
+	 * @param ctx the parse tree
+	 */
+	exitDateLiteral?: (ctx: DateLiteralContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.timeLiteral`.
+	 * @param ctx the parse tree
+	 */
+	enterTimeLiteral?: (ctx: TimeLiteralContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.timeLiteral`.
+	 * @param ctx the parse tree
+	 */
+	exitTimeLiteral?: (ctx: TimeLiteralContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.timestampLiteral`.
+	 * @param ctx the parse tree
+	 */
+	enterTimestampLiteral?: (ctx: TimestampLiteralContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.timestampLiteral`.
+	 * @param ctx the parse tree
+	 */
+	exitTimestampLiteral?: (ctx: TimestampLiteralContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.intervalUnit`.
+	 * @param ctx the parse tree
+	 */
+	enterIntervalUnit?: (ctx: IntervalUnitContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.intervalUnit`.
+	 * @param ctx the parse tree
+	 */
+	exitIntervalUnit?: (ctx: IntervalUnitContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.timespanUnit`.
+	 * @param ctx the parse tree
+	 */
+	enterTimespanUnit?: (ctx: TimespanUnitContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.timespanUnit`.
+	 * @param ctx the parse tree
+	 */
+	exitTimespanUnit?: (ctx: TimespanUnitContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.valueList`.
+	 * @param ctx the parse tree
+	 */
+	enterValueList?: (ctx: ValueListContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.valueList`.
+	 * @param ctx the parse tree
+	 */
+	exitValueList?: (ctx: ValueListContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.qualifiedName`.
+	 * @param ctx the parse tree
+	 */
+	enterQualifiedName?: (ctx: QualifiedNameContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.qualifiedName`.
+	 * @param ctx the parse tree
+	 */
+	exitQualifiedName?: (ctx: QualifiedNameContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.wcQualifiedName`.
+	 * @param ctx the parse tree
+	 */
+	enterWcQualifiedName?: (ctx: WcQualifiedNameContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.wcQualifiedName`.
+	 * @param ctx the parse tree
+	 */
+	exitWcQualifiedName?: (ctx: WcQualifiedNameContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.ident`.
+	 * @param ctx the parse tree
+	 */
+	enterIdent?: (ctx: IdentContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.ident`.
+	 * @param ctx the parse tree
+	 */
+	exitIdent?: (ctx: IdentContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.wildcard`.
+	 * @param ctx the parse tree
+	 */
+	enterWildcard?: (ctx: WildcardContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.wildcard`.
+	 * @param ctx the parse tree
+	 */
+	exitWildcard?: (ctx: WildcardContext) => void;
+
+	/**
+	 * Enter a parse tree produced by `OpenSearchPPLParser.keywordsCanBeId`.
+	 * @param ctx the parse tree
+	 */
+	enterKeywordsCanBeId?: (ctx: KeywordsCanBeIdContext) => void;
+	/**
+	 * Exit a parse tree produced by `OpenSearchPPLParser.keywordsCanBeId`.
+	 * @param ctx the parse tree
+	 */
+	exitKeywordsCanBeId?: (ctx: KeywordsCanBeIdContext) => void;
+}
+
diff --git a/common/query_manager/antlr/output/OpenSearchPPLParserVisitor.ts b/common/query_manager/antlr/output/OpenSearchPPLParserVisitor.ts
new file mode 100644
index 0000000000..b9261e6a39
--- /dev/null
+++ b/common/query_manager/antlr/output/OpenSearchPPLParserVisitor.ts
@@ -0,0 +1,1038 @@
+// Generated from ./common/query_manager/antlr/grammar/OpenSearchPPLParser.g4 by ANTLR 4.9.0-SNAPSHOT
+
+
+import { ParseTreeVisitor } from "antlr4ts/tree/ParseTreeVisitor";
+
+import { BinaryArithmeticContext } from "./OpenSearchPPLParser";
+import { ParentheticBinaryArithmeticContext } from "./OpenSearchPPLParser";
+import { ValueExpressionDefaultContext } from "./OpenSearchPPLParser";
+import { CompareExprContext } from "./OpenSearchPPLParser";
+import { InExprContext } from "./OpenSearchPPLParser";
+import { IdentsAsWildcardQualifiedNameContext } from "./OpenSearchPPLParser";
+import { SearchFromContext } from "./OpenSearchPPLParser";
+import { SearchFromFilterContext } from "./OpenSearchPPLParser";
+import { SearchFilterFromContext } from "./OpenSearchPPLParser";
+import { StatsFunctionCallContext } from "./OpenSearchPPLParser";
+import { CountAllFunctionCallContext } from "./OpenSearchPPLParser";
+import { DistinctCountFunctionCallContext } from "./OpenSearchPPLParser";
+import { PercentileAggFunctionCallContext } from "./OpenSearchPPLParser";
+import { TakeAggFunctionCallContext } from "./OpenSearchPPLParser";
+import { IdentsAsQualifiedNameContext } from "./OpenSearchPPLParser";
+import { ComparsionContext } from "./OpenSearchPPLParser";
+import { LogicalNotContext } from "./OpenSearchPPLParser";
+import { LogicalOrContext } from "./OpenSearchPPLParser";
+import { LogicalAndContext } from "./OpenSearchPPLParser";
+import { LogicalXorContext } from "./OpenSearchPPLParser";
+import { BooleanExprContext } from "./OpenSearchPPLParser";
+import { RelevanceExprContext } from "./OpenSearchPPLParser";
+import { RootContext } from "./OpenSearchPPLParser";
+import { PplStatementContext } from "./OpenSearchPPLParser";
+import { PplCommandsContext } from "./OpenSearchPPLParser";
+import { CommandsContext } from "./OpenSearchPPLParser";
+import { SearchCommandContext } from "./OpenSearchPPLParser";
+import { DescribeCommandContext } from "./OpenSearchPPLParser";
+import { ShowCatalogsCommandContext } from "./OpenSearchPPLParser";
+import { WhereCommandContext } from "./OpenSearchPPLParser";
+import { FieldsCommandContext } from "./OpenSearchPPLParser";
+import { RenameCommandContext } from "./OpenSearchPPLParser";
+import { StatsCommandContext } from "./OpenSearchPPLParser";
+import { DedupCommandContext } from "./OpenSearchPPLParser";
+import { SortCommandContext } from "./OpenSearchPPLParser";
+import { EvalCommandContext } from "./OpenSearchPPLParser";
+import { HeadCommandContext } from "./OpenSearchPPLParser";
+import { TopCommandContext } from "./OpenSearchPPLParser";
+import { RareCommandContext } from "./OpenSearchPPLParser";
+import { GrokCommandContext } from "./OpenSearchPPLParser";
+import { ParseCommandContext } from "./OpenSearchPPLParser";
+import { PatternsCommandContext } from "./OpenSearchPPLParser";
+import { PatternsParameterContext } from "./OpenSearchPPLParser";
+import { PatternsMethodContext } from "./OpenSearchPPLParser";
+import { KmeansCommandContext } from "./OpenSearchPPLParser";
+import { KmeansParameterContext } from "./OpenSearchPPLParser";
+import { AdCommandContext } from "./OpenSearchPPLParser";
+import { AdParameterContext } from "./OpenSearchPPLParser";
+import { MlCommandContext } from "./OpenSearchPPLParser";
+import { MlArgContext } from "./OpenSearchPPLParser";
+import { FromClauseContext } from "./OpenSearchPPLParser";
+import { TableSourceClauseContext } from "./OpenSearchPPLParser";
+import { RenameClasueContext } from "./OpenSearchPPLParser";
+import { ByClauseContext } from "./OpenSearchPPLParser";
+import { StatsByClauseContext } from "./OpenSearchPPLParser";
+import { BySpanClauseContext } from "./OpenSearchPPLParser";
+import { SpanClauseContext } from "./OpenSearchPPLParser";
+import { SortbyClauseContext } from "./OpenSearchPPLParser";
+import { EvalClauseContext } from "./OpenSearchPPLParser";
+import { StatsAggTermContext } from "./OpenSearchPPLParser";
+import { StatsFunctionContext } from "./OpenSearchPPLParser";
+import { StatsFunctionNameContext } from "./OpenSearchPPLParser";
+import { TakeAggFunctionContext } from "./OpenSearchPPLParser";
+import { PercentileAggFunctionContext } from "./OpenSearchPPLParser";
+import { ExpressionContext } from "./OpenSearchPPLParser";
+import { LogicalExpressionContext } from "./OpenSearchPPLParser";
+import { ComparisonExpressionContext } from "./OpenSearchPPLParser";
+import { ValueExpressionContext } from "./OpenSearchPPLParser";
+import { PrimaryExpressionContext } from "./OpenSearchPPLParser";
+import { ConstantFunctionContext } from "./OpenSearchPPLParser";
+import { BooleanExpressionContext } from "./OpenSearchPPLParser";
+import { RelevanceExpressionContext } from "./OpenSearchPPLParser";
+import { SingleFieldRelevanceFunctionContext } from "./OpenSearchPPLParser";
+import { MultiFieldRelevanceFunctionContext } from "./OpenSearchPPLParser";
+import { TableSourceContext } from "./OpenSearchPPLParser";
+import { TableFunctionContext } from "./OpenSearchPPLParser";
+import { FieldListContext } from "./OpenSearchPPLParser";
+import { WcFieldListContext } from "./OpenSearchPPLParser";
+import { SortFieldContext } from "./OpenSearchPPLParser";
+import { SortFieldExpressionContext } from "./OpenSearchPPLParser";
+import { FieldExpressionContext } from "./OpenSearchPPLParser";
+import { WcFieldExpressionContext } from "./OpenSearchPPLParser";
+import { EvalFunctionCallContext } from "./OpenSearchPPLParser";
+import { DataTypeFunctionCallContext } from "./OpenSearchPPLParser";
+import { BooleanFunctionCallContext } from "./OpenSearchPPLParser";
+import { ConvertedDataTypeContext } from "./OpenSearchPPLParser";
+import { EvalFunctionNameContext } from "./OpenSearchPPLParser";
+import { FunctionArgsContext } from "./OpenSearchPPLParser";
+import { FunctionArgContext } from "./OpenSearchPPLParser";
+import { RelevanceArgContext } from "./OpenSearchPPLParser";
+import { RelevanceArgNameContext } from "./OpenSearchPPLParser";
+import { RelevanceFieldAndWeightContext } from "./OpenSearchPPLParser";
+import { RelevanceFieldWeightContext } from "./OpenSearchPPLParser";
+import { RelevanceFieldContext } from "./OpenSearchPPLParser";
+import { RelevanceQueryContext } from "./OpenSearchPPLParser";
+import { RelevanceArgValueContext } from "./OpenSearchPPLParser";
+import { MathematicalFunctionBaseContext } from "./OpenSearchPPLParser";
+import { TrigonometricFunctionNameContext } from "./OpenSearchPPLParser";
+import { DateAndTimeFunctionBaseContext } from "./OpenSearchPPLParser";
+import { ConstantFunctionNameContext } from "./OpenSearchPPLParser";
+import { ConditionFunctionBaseContext } from "./OpenSearchPPLParser";
+import { SystemFunctionBaseContext } from "./OpenSearchPPLParser";
+import { TextFunctionBaseContext } from "./OpenSearchPPLParser";
+import { ComparisonOperatorContext } from "./OpenSearchPPLParser";
+import { BinaryOperatorContext } from "./OpenSearchPPLParser";
+import { SingleFieldRelevanceFunctionNameContext } from "./OpenSearchPPLParser";
+import { MultiFieldRelevanceFunctionNameContext } from "./OpenSearchPPLParser";
+import { LiteralValueContext } from "./OpenSearchPPLParser";
+import { IntervalLiteralContext } from "./OpenSearchPPLParser";
+import { StringLiteralContext } from "./OpenSearchPPLParser";
+import { IntegerLiteralContext } from "./OpenSearchPPLParser";
+import { DecimalLiteralContext } from "./OpenSearchPPLParser";
+import { BooleanLiteralContext } from "./OpenSearchPPLParser";
+import { DatetimeLiteralContext } from "./OpenSearchPPLParser";
+import { DateLiteralContext } from "./OpenSearchPPLParser";
+import { TimeLiteralContext } from "./OpenSearchPPLParser";
+import { TimestampLiteralContext } from "./OpenSearchPPLParser";
+import { IntervalUnitContext } from "./OpenSearchPPLParser";
+import { TimespanUnitContext } from "./OpenSearchPPLParser";
+import { ValueListContext } from "./OpenSearchPPLParser";
+import { QualifiedNameContext } from "./OpenSearchPPLParser";
+import { WcQualifiedNameContext } from "./OpenSearchPPLParser";
+import { IdentContext } from "./OpenSearchPPLParser";
+import { WildcardContext } from "./OpenSearchPPLParser";
+import { KeywordsCanBeIdContext } from "./OpenSearchPPLParser";
+
+
+/**
+ * This interface defines a complete generic visitor for a parse tree produced
+ * by `OpenSearchPPLParser`.
+ *
+ * @param <Result> The return type of the visit operation. Use `void` for
+ * operations with no return type.
+ */
+export interface OpenSearchPPLParserVisitor<Result> extends ParseTreeVisitor<Result> {
+	/**
+	 * Visit a parse tree produced by the `binaryArithmetic`
+	 * labeled alternative in `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitBinaryArithmetic?: (ctx: BinaryArithmeticContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `parentheticBinaryArithmetic`
+	 * labeled alternative in `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitParentheticBinaryArithmetic?: (ctx: ParentheticBinaryArithmeticContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `valueExpressionDefault`
+	 * labeled alternative in `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitValueExpressionDefault?: (ctx: ValueExpressionDefaultContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `compareExpr`
+	 * labeled alternative in `OpenSearchPPLParser.comparisonExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitCompareExpr?: (ctx: CompareExprContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `inExpr`
+	 * labeled alternative in `OpenSearchPPLParser.comparisonExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitInExpr?: (ctx: InExprContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `identsAsWildcardQualifiedName`
+	 * labeled alternative in `OpenSearchPPLParser.wcQualifiedName`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitIdentsAsWildcardQualifiedName?: (ctx: IdentsAsWildcardQualifiedNameContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `searchFrom`
+	 * labeled alternative in `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSearchFrom?: (ctx: SearchFromContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `searchFromFilter`
+	 * labeled alternative in `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSearchFromFilter?: (ctx: SearchFromFilterContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `searchFilterFrom`
+	 * labeled alternative in `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSearchFilterFrom?: (ctx: SearchFilterFromContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `statsFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitStatsFunctionCall?: (ctx: StatsFunctionCallContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `countAllFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitCountAllFunctionCall?: (ctx: CountAllFunctionCallContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `distinctCountFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitDistinctCountFunctionCall?: (ctx: DistinctCountFunctionCallContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `percentileAggFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitPercentileAggFunctionCall?: (ctx: PercentileAggFunctionCallContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `takeAggFunctionCall`
+	 * labeled alternative in `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitTakeAggFunctionCall?: (ctx: TakeAggFunctionCallContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `identsAsQualifiedName`
+	 * labeled alternative in `OpenSearchPPLParser.qualifiedName`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitIdentsAsQualifiedName?: (ctx: IdentsAsQualifiedNameContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `comparsion`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitComparsion?: (ctx: ComparsionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `logicalNot`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitLogicalNot?: (ctx: LogicalNotContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `logicalOr`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitLogicalOr?: (ctx: LogicalOrContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `logicalAnd`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitLogicalAnd?: (ctx: LogicalAndContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `logicalXor`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitLogicalXor?: (ctx: LogicalXorContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `booleanExpr`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitBooleanExpr?: (ctx: BooleanExprContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by the `relevanceExpr`
+	 * labeled alternative in `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRelevanceExpr?: (ctx: RelevanceExprContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.root`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRoot?: (ctx: RootContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.pplStatement`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitPplStatement?: (ctx: PplStatementContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.pplCommands`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitPplCommands?: (ctx: PplCommandsContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.commands`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitCommands?: (ctx: CommandsContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.searchCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSearchCommand?: (ctx: SearchCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.describeCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitDescribeCommand?: (ctx: DescribeCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.showCatalogsCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitShowCatalogsCommand?: (ctx: ShowCatalogsCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.whereCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitWhereCommand?: (ctx: WhereCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.fieldsCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitFieldsCommand?: (ctx: FieldsCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.renameCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRenameCommand?: (ctx: RenameCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.statsCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitStatsCommand?: (ctx: StatsCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.dedupCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitDedupCommand?: (ctx: DedupCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.sortCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSortCommand?: (ctx: SortCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.evalCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitEvalCommand?: (ctx: EvalCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.headCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitHeadCommand?: (ctx: HeadCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.topCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitTopCommand?: (ctx: TopCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.rareCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRareCommand?: (ctx: RareCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.grokCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitGrokCommand?: (ctx: GrokCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.parseCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitParseCommand?: (ctx: ParseCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.patternsCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitPatternsCommand?: (ctx: PatternsCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.patternsParameter`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitPatternsParameter?: (ctx: PatternsParameterContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.patternsMethod`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitPatternsMethod?: (ctx: PatternsMethodContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.kmeansCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitKmeansCommand?: (ctx: KmeansCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.kmeansParameter`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitKmeansParameter?: (ctx: KmeansParameterContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.adCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitAdCommand?: (ctx: AdCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.adParameter`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitAdParameter?: (ctx: AdParameterContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.mlCommand`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitMlCommand?: (ctx: MlCommandContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.mlArg`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitMlArg?: (ctx: MlArgContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.fromClause`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitFromClause?: (ctx: FromClauseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.tableSourceClause`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitTableSourceClause?: (ctx: TableSourceClauseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.renameClasue`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRenameClasue?: (ctx: RenameClasueContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.byClause`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitByClause?: (ctx: ByClauseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.statsByClause`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitStatsByClause?: (ctx: StatsByClauseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.bySpanClause`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitBySpanClause?: (ctx: BySpanClauseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.spanClause`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSpanClause?: (ctx: SpanClauseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.sortbyClause`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSortbyClause?: (ctx: SortbyClauseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.evalClause`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitEvalClause?: (ctx: EvalClauseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.statsAggTerm`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitStatsAggTerm?: (ctx: StatsAggTermContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.statsFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitStatsFunction?: (ctx: StatsFunctionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.statsFunctionName`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitStatsFunctionName?: (ctx: StatsFunctionNameContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.takeAggFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitTakeAggFunction?: (ctx: TakeAggFunctionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.percentileAggFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitPercentileAggFunction?: (ctx: PercentileAggFunctionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.expression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitExpression?: (ctx: ExpressionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.logicalExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitLogicalExpression?: (ctx: LogicalExpressionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.comparisonExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitComparisonExpression?: (ctx: ComparisonExpressionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.valueExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitValueExpression?: (ctx: ValueExpressionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.primaryExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitPrimaryExpression?: (ctx: PrimaryExpressionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.constantFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitConstantFunction?: (ctx: ConstantFunctionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.booleanExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitBooleanExpression?: (ctx: BooleanExpressionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.relevanceExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRelevanceExpression?: (ctx: RelevanceExpressionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.singleFieldRelevanceFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSingleFieldRelevanceFunction?: (ctx: SingleFieldRelevanceFunctionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.multiFieldRelevanceFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitMultiFieldRelevanceFunction?: (ctx: MultiFieldRelevanceFunctionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.tableSource`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitTableSource?: (ctx: TableSourceContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.tableFunction`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitTableFunction?: (ctx: TableFunctionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.fieldList`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitFieldList?: (ctx: FieldListContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.wcFieldList`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitWcFieldList?: (ctx: WcFieldListContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.sortField`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSortField?: (ctx: SortFieldContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.sortFieldExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSortFieldExpression?: (ctx: SortFieldExpressionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.fieldExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitFieldExpression?: (ctx: FieldExpressionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.wcFieldExpression`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitWcFieldExpression?: (ctx: WcFieldExpressionContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.evalFunctionCall`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitEvalFunctionCall?: (ctx: EvalFunctionCallContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.dataTypeFunctionCall`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitDataTypeFunctionCall?: (ctx: DataTypeFunctionCallContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.booleanFunctionCall`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitBooleanFunctionCall?: (ctx: BooleanFunctionCallContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.convertedDataType`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitConvertedDataType?: (ctx: ConvertedDataTypeContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.evalFunctionName`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitEvalFunctionName?: (ctx: EvalFunctionNameContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.functionArgs`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitFunctionArgs?: (ctx: FunctionArgsContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.functionArg`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitFunctionArg?: (ctx: FunctionArgContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.relevanceArg`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRelevanceArg?: (ctx: RelevanceArgContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.relevanceArgName`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRelevanceArgName?: (ctx: RelevanceArgNameContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.relevanceFieldAndWeight`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRelevanceFieldAndWeight?: (ctx: RelevanceFieldAndWeightContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.relevanceFieldWeight`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRelevanceFieldWeight?: (ctx: RelevanceFieldWeightContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.relevanceField`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRelevanceField?: (ctx: RelevanceFieldContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.relevanceQuery`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRelevanceQuery?: (ctx: RelevanceQueryContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.relevanceArgValue`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitRelevanceArgValue?: (ctx: RelevanceArgValueContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.mathematicalFunctionBase`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitMathematicalFunctionBase?: (ctx: MathematicalFunctionBaseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.trigonometricFunctionName`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitTrigonometricFunctionName?: (ctx: TrigonometricFunctionNameContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.dateAndTimeFunctionBase`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitDateAndTimeFunctionBase?: (ctx: DateAndTimeFunctionBaseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.constantFunctionName`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitConstantFunctionName?: (ctx: ConstantFunctionNameContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.conditionFunctionBase`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitConditionFunctionBase?: (ctx: ConditionFunctionBaseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.systemFunctionBase`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSystemFunctionBase?: (ctx: SystemFunctionBaseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.textFunctionBase`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitTextFunctionBase?: (ctx: TextFunctionBaseContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.comparisonOperator`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitComparisonOperator?: (ctx: ComparisonOperatorContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.binaryOperator`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitBinaryOperator?: (ctx: BinaryOperatorContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.singleFieldRelevanceFunctionName`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitSingleFieldRelevanceFunctionName?: (ctx: SingleFieldRelevanceFunctionNameContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.multiFieldRelevanceFunctionName`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitMultiFieldRelevanceFunctionName?: (ctx: MultiFieldRelevanceFunctionNameContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.literalValue`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitLiteralValue?: (ctx: LiteralValueContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.intervalLiteral`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitIntervalLiteral?: (ctx: IntervalLiteralContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.stringLiteral`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitStringLiteral?: (ctx: StringLiteralContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.integerLiteral`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitIntegerLiteral?: (ctx: IntegerLiteralContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.decimalLiteral`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitDecimalLiteral?: (ctx: DecimalLiteralContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.booleanLiteral`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitBooleanLiteral?: (ctx: BooleanLiteralContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.datetimeLiteral`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitDatetimeLiteral?: (ctx: DatetimeLiteralContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.dateLiteral`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitDateLiteral?: (ctx: DateLiteralContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.timeLiteral`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitTimeLiteral?: (ctx: TimeLiteralContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.timestampLiteral`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitTimestampLiteral?: (ctx: TimestampLiteralContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.intervalUnit`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitIntervalUnit?: (ctx: IntervalUnitContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.timespanUnit`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitTimespanUnit?: (ctx: TimespanUnitContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.valueList`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitValueList?: (ctx: ValueListContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.qualifiedName`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitQualifiedName?: (ctx: QualifiedNameContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.wcQualifiedName`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitWcQualifiedName?: (ctx: WcQualifiedNameContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.ident`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitIdent?: (ctx: IdentContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.wildcard`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitWildcard?: (ctx: WildcardContext) => Result;
+
+	/**
+	 * Visit a parse tree produced by `OpenSearchPPLParser.keywordsCanBeId`.
+	 * @param ctx the parse tree
+	 * @return the visitor result
+	 */
+	visitKeywordsCanBeId?: (ctx: KeywordsCanBeIdContext) => Result;
+}
+
diff --git a/common/query_manager/antlr/ppl_syntax_parser.ts b/common/query_manager/antlr/ppl_syntax_parser.ts
new file mode 100644
index 0000000000..9af9bc8930
--- /dev/null
+++ b/common/query_manager/antlr/ppl_syntax_parser.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CharStreams, CommonTokenStream } from 'antlr4ts';
+import { CaseInsensitiveCharStream } from './adaptors/case_insensitive_char_stream';
+import { OpenSearchPPLLexer } from './output/OpenSearchPPLLexer';
+import { OpenSearchPPLParser } from './output/OpenSearchPPLParser';
+
+/**
+ * PPL Syntax Parser.
+ */
+export class PPLSyntaxParser {
+  /**
+   * Analyze the query syntax.
+   */
+
+  parse(query: string) {
+    return this.createParser(this.createLexer(query));
+  }
+
+  createLexer(query: string = '') {
+    return new OpenSearchPPLLexer(new CaseInsensitiveCharStream(CharStreams.fromString(query)));
+  }
+
+  createParser(lexer: OpenSearchPPLLexer) {
+    return new OpenSearchPPLParser(new CommonTokenStream(lexer));
+  }
+}
diff --git a/common/query_manager/ast/builder/query_builder.ts b/common/query_manager/ast/builder/query_builder.ts
new file mode 100644
index 0000000000..a6b6494c0f
--- /dev/null
+++ b/common/query_manager/ast/builder/query_builder.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface QueryBuilder<T> {
+  build: () => T;
+}
diff --git a/common/query_manager/ast/builder/stats_ast_builder.ts b/common/query_manager/ast/builder/stats_ast_builder.ts
new file mode 100644
index 0000000000..6556347abf
--- /dev/null
+++ b/common/query_manager/ast/builder/stats_ast_builder.ts
@@ -0,0 +1,232 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isFunction, isEqual } from 'lodash';
+import { AbstractParseTreeVisitor } from 'antlr4ts/tree/AbstractParseTreeVisitor';
+import {
+  RootContext,
+  PplStatementContext,
+  CommandsContext,
+  StatsCommandContext,
+  BooleanLiteralContext,
+  BySpanClauseContext,
+  FieldExpressionContext,
+  FieldListContext,
+  IntegerLiteralContext,
+  LiteralValueContext,
+  QualifiedNameContext,
+  SpanClauseContext,
+  StatsAggTermContext,
+  StatsByClauseContext,
+  StatsFunctionContext,
+  StatsFunctionNameContext,
+  StringLiteralContext,
+  TimespanUnitContext,
+  ValueExpressionContext,
+  WcFieldExpressionContext,
+} from '../../antlr/output/OpenSearchPPLParser';
+import { OpenSearchPPLParserVisitor } from '../../antlr/output/OpenSearchPPLParserVisitor';
+import { PPLNode } from '../node';
+import { Aggregations } from '../tree/aggragations';
+import {
+  AggregateFunction,
+  AggregateTerm,
+  GroupBy,
+  Field,
+  Span,
+  SpanExpression,
+} from '../expression';
+
+type VisitResult = PPLNode | Array<PPLNode> | string;
+
+export class StatsAstBuilder
+  extends AbstractParseTreeVisitor<VisitResult>
+  implements OpenSearchPPLParserVisitor<VisitResult> {
+  protected defaultResult(): PPLNode {
+    return new PPLNode('default', [] as Array<PPLNode>);
+  }
+
+  visitRoot(ctx: RootContext) {
+    if (!ctx.pplStatement()) return this.defaultResult();
+    return this.visitPplStatement(ctx.pplStatement()!);
+  }
+
+  visitPplStatement(ctx: PplStatementContext): PPLNode {
+    let statsTree: VisitResult = this.defaultResult();
+    ctx.commands().map((pplCommandContext) => {
+      if (
+        isFunction(this.visitChildren(pplCommandContext).getName) &&
+        isEqual(this.visitChildren(pplCommandContext).getName(), 'stats_command')
+      )
+        statsTree = this.visitChildren(pplCommandContext);
+    });
+    return statsTree;
+  }
+
+  visitCommands(ctx: CommandsContext) {
+    if (ctx.statsCommand()) {
+      return this.visitStatsCommand(ctx.statsCommand()!);
+    }
+    return this.defaultResult();
+  }
+
+  /**
+   * Stats command
+   */
+  visitStatsCommand(ctx: StatsCommandContext): PPLNode {
+    return new Aggregations(
+      'stats_command',
+      [] as Array<PPLNode>,
+      ctx.PARTITIONS() && ctx.integerLiteral()
+        ? {
+            keyword: ctx.PARTITIONS()?.text,
+            sign: '=',
+            value: ctx.integerLiteral()?.text,
+          }
+        : {}, // visit partitions partial
+      ctx.ALLNUM() && ctx.booleanLiteral()
+        ? {
+            keyword: ctx.ALLNUM()?.text,
+            sign: '=',
+            value: this.visitBooleanLiteral(ctx.booleanLiteral()[0]),
+          }
+        : {}, // visit allnum partial
+      ctx.DELIM() && ctx.stringLiteral()
+        ? {
+            keyword: ctx.DELIM()?.text,
+            sign: '=',
+            value: this.visitStringLiteral(ctx.stringLiteral()!),
+          }
+        : '', // visit delim partial
+      ctx.statsAggTerm().map((aggTermAlternative) => this.visitStatsAggTerm(aggTermAlternative)), // visit statsAggTerm
+      ctx.statsByClause() ? this.visitStatsByClause(ctx.statsByClause()!) : ({} as GroupBy), // visit group list
+      ctx.DEDUP_SPLITVALUES() && ctx.booleanLiteral()
+        ? {
+            keyword: ctx.DEDUP_SPLITVALUES()?.text,
+            sign: '=',
+            value: this.visitBooleanLiteral(ctx.booleanLiteral()[1]),
+          }
+        : '', // visit dedup split value
+      {
+        start: ctx.start.startIndex,
+        end: ctx.stop?.stopIndex,
+      } // stats start/end indices in query for later query concatenation
+    );
+  }
+
+  visitIntegerLiteral(ctx: IntegerLiteralContext): string {
+    return ctx.text;
+  }
+
+  visitBooleanLiteral(ctx: BooleanLiteralContext): string {
+    return ctx.text;
+  }
+
+  visitStringLiteral(ctx: StringLiteralContext): string {
+    return ctx.text;
+  }
+
+  visitStatsAggTerm(ctx: StatsAggTermContext): PPLNode {
+    return new AggregateTerm(
+      'stats_agg_term',
+      [] as Array<PPLNode>,
+      this.visitStatsFunction(ctx.statsFunction()),
+      ctx.wcFieldExpression() ? this.visitWcFieldExpression(ctx.wcFieldExpression()!) : ''
+    );
+  }
+
+  visitWcFieldExpression(ctx: WcFieldExpressionContext): string {
+    // return only text from here to all its chilren for now
+    return ctx.wcQualifiedName().text;
+  }
+
+  visitStatsByClause(ctx: StatsByClauseContext): PPLNode {
+    return new GroupBy(
+      'stats_by_clause',
+      [] as Array<PPLNode>,
+      ctx.fieldList() ? this.visitFieldList(ctx.fieldList()!) : [],
+      ctx.bySpanClause() ? this.visitBySpanClause(ctx.bySpanClause()!) : this.defaultResult()
+    );
+  }
+
+  visitBySpanClause(ctx: BySpanClauseContext): PPLNode {
+    return new Span(
+      'span_clause',
+      [] as Array<PPLNode>,
+      this.visitSpanClause(ctx.spanClause()),
+      ctx.qualifiedName() ? this.visitQualifiedName(ctx.qualifiedName()!) : ''
+    );
+  }
+
+  visitSpanClause(ctx: SpanClauseContext): PPLNode {
+    return new SpanExpression(
+      'span_expression',
+      [] as Array<PPLNode>,
+      this.visitFieldExpression(ctx.fieldExpression()),
+      this.visitLiteralValue(ctx.literalValue()),
+      ctx.timespanUnit() ? this.visitTimespanUnit(ctx.timespanUnit()!) : ''
+    );
+  }
+
+  visitLiteralValue(ctx: LiteralValueContext): string {
+    return ctx.text;
+  }
+
+  visitTimespanUnit(ctx: TimespanUnitContext): string {
+    return ctx.text;
+  }
+
+  visitStatsFunction(ctx: StatsFunctionContext): PPLNode {
+    let funcName = '';
+    let valueExpr = '';
+    
+    if (isFunction(ctx.valueExpression)) {
+      valueExpr = this.visitValueExpression(ctx.valueExpression());
+      if (isFunction(ctx.statsFunctionName)) {
+        funcName = this.visitStatsFunctionName(ctx.statsFunctionName());
+      } else {
+        funcName = ctx.DISTINCT_COUNT() ? ctx.DISTINCT_COUNT().text : ctx.DC().text;
+      }
+    } else if (isFunction(ctx.percentileAggFunction)) {
+      // for now just return plain text
+    } else if (isFunction(ctx.COUNT)) {
+      funcName = ctx.COUNT().text;
+    }
+
+    return new AggregateFunction(
+      'stats_function',
+      [] as Array<PPLNode>,
+      funcName,
+      valueExpr,
+      isFunction(ctx.percentileAggFunction) ? ctx.text : ''
+    );
+  }
+
+  visitValueExpression(ctx: ValueExpressionContext): string {
+    return ctx.text;
+  }
+
+  visitStatsFunctionName(ctx: StatsFunctionNameContext): string {
+    return ctx.text;
+  }
+
+  visitFieldList(ctx: FieldListContext): Array<PPLNode> {
+    return ctx.fieldExpression().map((fieldExprAlternative) => {
+      return new Field(
+        'field_expression',
+        [] as Array<PPLNode>,
+        this.visitFieldExpression(fieldExprAlternative)
+      );
+    });
+  }
+
+  visitFieldExpression(ctx: FieldExpressionContext): string {
+    return this.visitQualifiedName(ctx.qualifiedName());
+  }
+
+  visitQualifiedName(ctx: QualifiedNameContext): string {
+    return ctx.text;
+  }
+}
diff --git a/common/query_manager/ast/builder/stats_builder.ts b/common/query_manager/ast/builder/stats_builder.ts
new file mode 100644
index 0000000000..064ac8c5d7
--- /dev/null
+++ b/common/query_manager/ast/builder/stats_builder.ts
@@ -0,0 +1,136 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isEmpty } from 'lodash';
+import { QueryBuilder } from './query_builder';
+import { Aggregations } from '../tree/aggragations';
+import { PPLNode } from '../node';
+import {
+  AggregateFunction,
+  AggregateTerm,
+  Field,
+  GroupBy,
+  Span,
+  SpanExpression,
+} from '../expression';
+import {
+  ExpressionChunk,
+  SpanChunk,
+  StatsAggregationChunk,
+  StatsAggregationFunctionChunk,
+  GroupByChunk,
+  GroupField,
+  StatsChunk,
+  SpanExpressionChunk,
+} from '../types';
+import { CUSTOM_LABEL } from '../../../../common/constants/explorer';
+
+export class StatsBuilder implements QueryBuilder<Aggregations> {
+  constructor(private statsChunk: StatsChunk) {}
+
+  build(): Aggregations {
+    // return a new stats subtree
+    return new Aggregations(
+      'stats_command',
+      [] as PPLNode[],
+      !isEmpty(this.statsChunk.partitions) ? this.buildParttions(this.statsChunk.partitions) : '',
+      !isEmpty(this.statsChunk.all_num) ? this.buildAllNum(this.statsChunk.all_num) : '',
+      !isEmpty(this.statsChunk.delim) ? this.buildDelim(this.statsChunk.delim) : '',
+      !isEmpty(this.statsChunk.aggregations)
+        ? this.buildAggList(this.statsChunk.aggregations)
+        : ([] as PPLNode[]),
+      !isEmpty(this.statsChunk.groupby)
+        ? this.buildGroupList(this.statsChunk.groupby)
+        : new GroupBy('stats_by_clause', [] as PPLNode[], [], null),
+      !isEmpty(this.statsChunk.dedup_split_value)
+        ? this.buildDedupSplitValue(this.statsChunk.dedup_split_value)
+        : ''
+    );
+  }
+
+  /**
+   * Flags
+   */
+  buildParttions(partitions: ExpressionChunk) {
+    return `${partitions.keyword} ${partitions.sign} ${partitions.value}`;
+  }
+
+  buildAllNum(allNum: ExpressionChunk) {
+    return `${allNum.keyword} ${allNum.sign} ${allNum.value}`;
+  }
+
+  buildDelim(delim: ExpressionChunk) {
+    return `${delim.keyword} ${delim.sign} ${delim.value}`;
+  }
+
+  buildDedupSplitValue(dedupSplitvalue: ExpressionChunk) {
+    return `${dedupSplitvalue.keyword} ${dedupSplitvalue.sign} ${dedupSplitvalue.value}`;
+  }
+
+  /**
+   * Aggregations
+   */
+  buildAggList(aggregations: StatsAggregationChunk[]) {
+    return aggregations.map((aggregation) => {
+      return this.buildAggTerm(aggregation);
+    });
+  }
+
+  buildAggTerm(aggTerm: StatsAggregationChunk) {
+    return new AggregateTerm(
+      'stats_agg_term',
+      [] as PPLNode[],
+      this.buildAggregateFunction(aggTerm.function),
+      aggTerm.function_alias
+    );
+  }
+
+  buildAggregateFunction(aggFunction: StatsAggregationFunctionChunk) {
+    return new AggregateFunction(
+      'stats_function',
+      [] as PPLNode[],
+      aggFunction.name,
+      aggFunction.value_expression,
+      aggFunction.percentile_agg_function
+    );
+  }
+
+  /**
+   * Groups
+   */
+  buildGroupList(groupby: GroupByChunk) {
+    return new GroupBy(
+      'stats_by_clause',
+      [] as PPLNode[],
+      this.buildFieldList(groupby.group_fields),
+      groupby.span ? this.buildSpan(groupby.span) : null
+    );
+  }
+
+  buildFieldList(group_fields: GroupField[]) {
+    return group_fields.map((gf: GroupField) => {
+      return new Field('field_expression', [] as PPLNode[], gf.name);
+    });
+  }
+
+  buildSpan(span: SpanChunk) {
+    return new Span(
+      'span_clause',
+      [] as PPLNode[],
+      this.buildeSpanExpression(span.span_expression),
+      span[CUSTOM_LABEL]
+    );
+  }
+
+  buildeSpanExpression(spanExpression: SpanExpressionChunk) {
+    return new SpanExpression(
+      'span_expression',
+      [] as PPLNode[],
+      spanExpression.field,
+      spanExpression.literal_value,
+      spanExpression.time_unit
+    );
+  }
+}
diff --git a/common/query_manager/ast/expression/AggregateFunction.ts b/common/query_manager/ast/expression/AggregateFunction.ts
new file mode 100644
index 0000000000..06c05cec60
--- /dev/null
+++ b/common/query_manager/ast/expression/AggregateFunction.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PPLNode } from '../node';
+
+export class AggregateFunction extends PPLNode {
+  constructor(
+    name: string,
+    children: Array<PPLNode>,
+    private statsFunctionName: string,
+    private valueExpression: string,
+    private percentileAggFunction: string
+  ) {
+    super(name, children);
+  }
+
+  getTokens() {
+    return {
+      name: this.statsFunctionName,
+      value_expression: this.valueExpression,
+      percentile_agg_function: this.percentileAggFunction,
+    };
+  }
+
+  toString(): string {
+    if (this.statsFunctionName && this.valueExpression) {
+      return `${this.statsFunctionName}(${this.valueExpression})`;
+    } else if (this.statsFunctionName) {
+      return `${this.statsFunctionName}()`;
+    } else if (this.percentileAggFunction) {
+      return `${this.percentileAggFunction}`;
+    }
+    return '';
+  }
+}
diff --git a/common/query_manager/ast/expression/AggregateTerm.ts b/common/query_manager/ast/expression/AggregateTerm.ts
new file mode 100644
index 0000000000..9864bbfcd4
--- /dev/null
+++ b/common/query_manager/ast/expression/AggregateTerm.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CUSTOM_LABEL } from '../../../../common/constants/explorer';
+import { PPLNode } from '../node';
+export class AggregateTerm extends PPLNode {
+  constructor(
+    name: string,
+    children: PPLNode[],
+    private statsFunction: PPLNode,
+    private customLabel: string
+  ) {
+    super(name, children);
+  }
+
+  getTokens() {
+    return {
+      function: this.statsFunction.getTokens(),
+      [CUSTOM_LABEL]: this[CUSTOM_LABEL],
+    };
+  }
+
+  toString(): string {
+    if (this[CUSTOM_LABEL]) {
+      return `${this.statsFunction.toString()}${
+        this[CUSTOM_LABEL] ? ` as ${this[CUSTOM_LABEL]}` : ''
+      }`;
+    }
+    return `${this.statsFunction.toString()}`;
+  }
+}
diff --git a/common/query_manager/ast/expression/field.ts b/common/query_manager/ast/expression/field.ts
new file mode 100644
index 0000000000..3bc35ce70a
--- /dev/null
+++ b/common/query_manager/ast/expression/field.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PPLNode } from '../node';
+
+export class Field extends PPLNode {
+  constructor(name: string, children: Array<PPLNode>, private fieldExpression: string) {
+    super(name, children);
+  }
+
+  getTokens() {
+    return { name: this.fieldExpression ?? '' };
+  }
+
+  toString(): string {
+    return this.fieldExpression ?? '';
+  }
+}
diff --git a/common/query_manager/ast/expression/group_by.ts b/common/query_manager/ast/expression/group_by.ts
new file mode 100644
index 0000000000..1d0a1ad070
--- /dev/null
+++ b/common/query_manager/ast/expression/group_by.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isEmpty } from 'lodash';
+import { PPLNode } from '../node';
+import { Field } from './field';
+
+export class GroupBy extends PPLNode {
+  constructor(
+    name: string,
+    children: Array<PPLNode>,
+    private fields: Array<Field>,
+    private span: PPLNode | null
+  ) {
+    super(name, children);
+  }
+
+  getTokens() {
+    return {
+      group_fields: this.fields.map((field) => field.getTokens()),
+      span: this.span?.getTokens(),
+    };
+  }
+
+  toString(): string {
+    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(', ')}`
+    );
+  }
+}
diff --git a/common/query_manager/ast/expression/index.ts b/common/query_manager/ast/expression/index.ts
new file mode 100644
index 0000000000..222ca12ca2
--- /dev/null
+++ b/common/query_manager/ast/expression/index.ts
@@ -0,0 +1,6 @@
+export { AggregateFunction } from './AggregateFunction';
+export { AggregateTerm } from './AggregateTerm';
+export { GroupBy } from './group_by';
+export { Span } from './span';
+export { SpanExpression } from './spanExpression';
+export { Field } from './field';
diff --git a/common/query_manager/ast/expression/span.ts b/common/query_manager/ast/expression/span.ts
new file mode 100644
index 0000000000..278ca18ebd
--- /dev/null
+++ b/common/query_manager/ast/expression/span.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PPLNode } from '../node';
+
+export class Span extends PPLNode {
+  constructor(
+    name: string,
+    children: PPLNode[],
+    private spanExpression: PPLNode,
+    private customLabel: string
+  ) {
+    super(name, children);
+  }
+
+  getTokens() {
+    return {
+      span_expression: this.spanExpression.getTokens(),
+      customLabel: this.customLabel,
+    };
+  }
+
+  toString(): string {
+    return `${this.spanExpression.toString()}${this.customLabel ? ` as ${this.customLabel}` : ''}`;
+  }
+}
diff --git a/common/query_manager/ast/expression/spanExpression.ts b/common/query_manager/ast/expression/spanExpression.ts
new file mode 100644
index 0000000000..c3f8d15ed7
--- /dev/null
+++ b/common/query_manager/ast/expression/spanExpression.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PPLNode } from '../node';
+
+export class SpanExpression extends PPLNode {
+  constructor(
+    name: string,
+    children: Array<PPLNode>,
+    private fieldExpression: string,
+    private literalValue: string,
+    private timeUnit: string
+  ) {
+    super(name, children);
+  }
+
+  getTokens() {
+    return {
+      field: this.fieldExpression,
+      literal_value: this.literalValue,
+      time_unit: this.timeUnit,
+    };
+  }
+
+  toString(): string {
+    return `span(${this.fieldExpression}, ${this.literalValue}${this.timeUnit})`;
+  }
+}
diff --git a/common/query_manager/ast/index.ts b/common/query_manager/ast/index.ts
new file mode 100644
index 0000000000..eb0dbf6a75
--- /dev/null
+++ b/common/query_manager/ast/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { PPLNode } from './node';
diff --git a/common/query_manager/ast/node.ts b/common/query_manager/ast/node.ts
new file mode 100644
index 0000000000..c288773697
--- /dev/null
+++ b/common/query_manager/ast/node.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+interface PPLNodeProps {
+  getName: () => string;
+  getChildren: () => Array<PPLNode>;
+  toString: () => string;
+  getTokens: () => any;
+}
+
+export class PPLNode implements PPLNodeProps {
+  constructor(private name: string, private children: Array<PPLNode>) {}
+
+  getChildren(): Array<PPLNode> {
+    return this.children;
+  }
+
+  getName(): string {
+    return this.name;
+  }
+
+  toString(): string {
+    return '';
+  }
+
+  getTokens(): any {
+    return null;
+  }
+}
diff --git a/common/query_manager/ast/tree/aggragations.ts b/common/query_manager/ast/tree/aggragations.ts
new file mode 100644
index 0000000000..39281a0a7b
--- /dev/null
+++ b/common/query_manager/ast/tree/aggragations.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isEmpty } from 'lodash';
+import { PPLNode } from '../node';
+import { GroupBy } from '../expression/group_by';
+
+export class Aggregations extends PPLNode {
+  constructor(
+    name: string,
+    children: Array<PPLNode>,
+    private partitions: String,
+    private allNum: string,
+    private delim: string,
+    private aggExprList: Array<PPLNode>,
+    private groupExprList: GroupBy,
+    private dedupSplitValue: string,
+    private indices?: { start: number; end: number }
+  ) {
+    super(name, children);
+  }
+
+  getStartEndIndicesOfOriginQuery(): { start: number; end: number } {
+    if (this.indices === undefined) {
+      return {
+        start: -1,
+        end: -1,
+      };
+    }
+    return {
+      start: this.indices.start,
+      end: this.indices.end,
+    };
+  }
+
+  getTokens() {
+    return {
+      partitions: this.partitions,
+      all_num: this.allNum,
+      delim: this.delim,
+      aggregations: this.aggExprList.map((aggTerm) => aggTerm.getTokens()),
+      groupby: !isEmpty(this.groupExprList) ? this.groupExprList.getTokens() : '',
+      dedup_split_value: this.dedupSplitValue,
+    };
+  }
+
+  toString() {
+    return `stats ${!isEmpty(this.partitions) ? `${this.partitions} ` : ''}${
+      !isEmpty(this.allNum) ? `${this.allNum} ` : ''
+    }${!isEmpty(this.delim) ? `${this.delim} ` : ''}${this.aggExprList
+      .map((aggTerm) => aggTerm.toString())
+      .join(', ')}${!isEmpty(this.groupExprList) ? ` ${this.groupExprList.toString()}` : ''}${
+      !isEmpty(this.dedupSplitValue) ? ` ${this.dedupSplitValue}` : ''
+    }`;
+  }
+}
diff --git a/common/query_manager/ast/types/index.ts b/common/query_manager/ast/types/index.ts
new file mode 100644
index 0000000000..3256b0992a
--- /dev/null
+++ b/common/query_manager/ast/types/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export {
+  ExpressionChunk,
+  SpanChunk,
+  StatsAggregationChunk,
+  StatsAggregationFunctionChunk,
+  GroupByChunk,
+  GroupField,
+  StatsChunk,
+  SpanExpressionChunk,
+  AggregationConfigurations,
+  PreviouslyParsedStaleStats
+} from './stats';
diff --git a/common/query_manager/ast/types/stats.ts b/common/query_manager/ast/types/stats.ts
new file mode 100644
index 0000000000..a67565042f
--- /dev/null
+++ b/common/query_manager/ast/types/stats.ts
@@ -0,0 +1,75 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * stats chunck types
+ */
+export interface StatsAggregationChunk {
+  function: StatsAggregationFunctionChunk;
+  function_alias: string;
+}
+
+export interface StatsAggregationFunctionChunk {
+  name: string;
+  value_expression: string;
+  percentile_agg_function: string;
+}
+
+export interface GroupField {
+  name: string;
+}
+
+export interface SpanChunk {
+  customLabel: string;
+  span_expression: SpanExpressionChunk;
+}
+
+export interface SpanExpressionChunk {
+  type: string;
+  field: string;
+  time_unit: string;
+  literal_value: string;
+}
+
+export interface GroupByChunk {
+  group_fields: GroupField[];
+  span: SpanChunk | null;
+}
+
+export interface statsChunk {
+  aggregations: StatsAggregationChunk[];
+  groupby: GroupByChunk;
+  partitions: ExpressionChunk;
+  all_num: ExpressionChunk;
+  delim: ExpressionChunk;
+  dedup_split_value: ExpressionChunk;
+}
+
+export interface ExpressionChunk {
+  keyword: string;
+  sign: string;
+  value: string | number;
+}
+
+export interface DataConfigSeries {
+  customLabel: string;
+  label: string;
+  name: string;
+  aggregation: string;
+}
+
+export interface AggregationConfigurations {
+  series: DataConfigSeries[];
+  dimensions: GroupField[];
+  span: SpanChunk;
+  breakdowns: GroupField[];
+}
+
+export interface PreviouslyParsedStaleStats {
+  partitions: ExpressionChunk;
+  all_num: ExpressionChunk;
+  delim: ExpressionChunk;
+  dedup_split_value: ExpressionChunk;
+}
diff --git a/common/query_manager/index.ts b/common/query_manager/index.ts
new file mode 100644
index 0000000000..72b5cd2f64
--- /dev/null
+++ b/common/query_manager/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { QueryManager } from './ppl_query_manager';
diff --git a/common/query_manager/ppl_query_manager.ts b/common/query_manager/ppl_query_manager.ts
new file mode 100644
index 0000000000..513485cf59
--- /dev/null
+++ b/common/query_manager/ppl_query_manager.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PPLQueryBuilder } from './query_builder/ppl_query_builder';
+import { PPLQueryParser } from './query_parser/ppl_query_parser';
+
+export class QueryManager {
+  queryBuilder(): PPLQueryBuilder {
+    return new PPLQueryBuilder();
+  }
+
+  queryParser(): PPLQueryParser {
+    return new PPLQueryParser();
+  }
+}
diff --git a/common/query_manager/query_builder/index.ts b/common/query_manager/query_builder/index.ts
new file mode 100644
index 0000000000..24e0492f5d
--- /dev/null
+++ b/common/query_manager/query_builder/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { PPLQueryBuilder } from './ppl_query_builder';
diff --git a/common/query_manager/query_builder/ppl_query_builder.ts b/common/query_manager/query_builder/ppl_query_builder.ts
new file mode 100644
index 0000000000..50ea50b413
--- /dev/null
+++ b/common/query_manager/query_builder/ppl_query_builder.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PPLSyntaxParser } from '../antlr/ppl_syntax_parser';
+import { StatsBuilder } from '../ast/builder/stats_builder';
+import { StatsAstBuilder } from '../ast/builder/stats_ast_builder';
+
+export class PPLQueryBuilder {
+  parser: PPLSyntaxParser | null = null;
+
+  build(query: string, pplTokens: any) {
+    this.parser = new PPLSyntaxParser().parse(query);
+    return this.buildStats(query, pplTokens);
+  }
+
+  buildStats(query: string, statsTokens: any) {
+    const statsTree = new StatsAstBuilder().visitRoot(this.parser!.root());
+    const newStatsAstTree = new StatsBuilder(statsTokens).build();
+    if (typeof statsTree.getStartEndIndicesOfOriginQuery !== 'function') {
+      return query + ' | ' + newStatsAstTree.toString();
+    }
+
+    const indices = statsTree.getStartEndIndicesOfOriginQuery();
+
+    if (indices.start !== -1 && indices.end !== -1) {
+      return (
+        query.substring(0, indices.start) +
+        newStatsAstTree.toString() +
+        query.substring(indices.end + 1, query.length)
+      );
+    } else if (indices && newStatsAstTree) {
+      return query + ' | ' + newStatsAstTree.toString();
+    }
+
+    return '';
+  }
+}
diff --git a/common/query_manager/query_parser/index.ts b/common/query_manager/query_parser/index.ts
new file mode 100644
index 0000000000..c4afe0e5dd
--- /dev/null
+++ b/common/query_manager/query_parser/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { PPLQueryParser } from './ppl_query_parser';
diff --git a/common/query_manager/query_parser/ppl_query_parser.ts b/common/query_manager/query_parser/ppl_query_parser.ts
new file mode 100644
index 0000000000..9a39276e0c
--- /dev/null
+++ b/common/query_manager/query_parser/ppl_query_parser.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PPLSyntaxParser } from '../antlr/ppl_syntax_parser';
+import { OpenSearchPPLParser } from '../antlr/output/OpenSearchPPLParser';
+import { StatsAstBuilder } from '../ast/builder/stats_ast_builder';
+
+export class PPLQueryParser {
+  parser: OpenSearchPPLParser | null = null;
+  visitor: any = null;
+  rawQuery: string = '';
+
+  parse(pplQuery: string) {
+    this.rawQuery = pplQuery;
+    this.parser = new PPLSyntaxParser().parse(this.rawQuery);
+    return this;
+  }
+
+  getStats() {
+    this.visitor = new StatsAstBuilder();
+    return this.visitor.visitRoot(this.parser!.root()).getTokens();
+  }
+}
diff --git a/common/query_manager/utils/index.ts b/common/query_manager/utils/index.ts
new file mode 100644
index 0000000000..bdc77f38f6
--- /dev/null
+++ b/common/query_manager/utils/index.ts
@@ -0,0 +1,48 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CUSTOM_LABEL } from '../../../common/constants/explorer';
+import { AggregationConfigurations, PreviouslyParsedStaleStats } from '../ast/types';
+import { removeBacktick } from '../../../common/utils';
+
+export const composeAggregations = (
+  aggConfig: AggregationConfigurations,
+  staleStats: PreviouslyParsedStaleStats
+) => {
+  return {
+    aggregations: aggConfig.series.map((metric) => ({
+      function_alias: metric[CUSTOM_LABEL],
+      function: {
+        name: metric.aggregation,
+        value_expression: metric.name,
+        percentile_agg_function: '',
+      },
+    })),
+    groupby: {
+      group_fields: [
+        ...(aggConfig.dimensions || []),
+        ...(aggConfig.breakdowns || []),
+      ].map((dimension) => ({ name: `\`${removeBacktick(dimension.name)}\`` })),
+      ...(aggConfig.span &&
+        JSON.stringify(aggConfig?.span) !== '{}' && { span: composeSpan(aggConfig.span) }),
+    },
+    partitions: staleStats?.partitions ?? {},
+    all_num: staleStats?.all_num ?? {},
+    delim: staleStats?.delim ?? {},
+    dedup_split_value: staleStats?.dedup_split_value ?? {},
+  };
+};
+
+export const composeSpan = (spanConfig) => {
+  return {
+    [CUSTOM_LABEL]: spanConfig[CUSTOM_LABEL] ?? '',
+    span_expression: {
+      type: spanConfig.time_field[0]?.type ?? 'timestamp',
+      field: spanConfig.time_field[0]?.name ?? 'timestamp',
+      time_unit: spanConfig.unit[0]?.value ?? 'd',
+      literal_value: spanConfig.interval ?? 1,
+    },
+  };
+};
diff --git a/common/types/application_analytics.ts b/common/types/application_analytics.ts
new file mode 100644
index 0000000000..11f42c2361
--- /dev/null
+++ b/common/types/application_analytics.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface OptionType {
+  label: string;
+}
+
+export interface ApplicationType {
+  id: string;
+  dateCreated: string;
+  dateModified: string;
+  name: string;
+  description: string;
+  baseQuery: string;
+  servicesEntities: string[];
+  traceGroups: string[];
+  panelId: string;
+  availability: { name: string; color: string; availabilityVisId: string };
+}
+
+export interface ApplicationRequestType {
+  name: string;
+  description: string;
+  baseQuery: string;
+  servicesEntities: string[];
+  traceGroups: string[];
+  panelId: string;
+  availabilityVisId: string;
+}
+
+export interface AvailabilityType {
+  name: string;
+  color: string;
+  availabilityVisId: string;
+}
diff --git a/common/types/custom_panels.ts b/common/types/custom_panels.ts
new file mode 100644
index 0000000000..e397b06076
--- /dev/null
+++ b/common/types/custom_panels.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface CustomPanelListType {
+  name: string;
+  id: string;
+  dateCreated: number;
+  dateModified: number;
+  applicationId?: string;
+}
+
+export interface VisualizationType {
+  id: string;
+  savedVisualizationId: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface PanelType {
+  name: string;
+  visualizations: VisualizationType[];
+  timeRange: { to: string; from: string };
+  queryFilter: { query: string; language: string };
+  applicationId?: string;
+}
+
+export interface SavedVisualizationType {
+  id: string;
+  name: string;
+  query: string;
+  type: string;
+  selected_date_range: { start: string; end: string; text: string };
+  timeField: string;
+  application_id?: string;
+  user_configs: any;
+}
+
+export interface pplResponse {
+  data: any;
+  metadata: any;
+  size: number;
+  status: number;
+}
diff --git a/common/types/explorer.ts b/common/types/explorer.ts
new file mode 100644
index 0000000000..cf4ade2f6b
--- /dev/null
+++ b/common/types/explorer.ts
@@ -0,0 +1,387 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { History } from 'history';
+import Plotly from 'plotly.js-dist';
+import { QueryManager } from 'common/query_manager';
+import { VIS_CHART_TYPES } from '../../common/constants/shared';
+import {
+  RAW_QUERY,
+  SELECTED_FIELDS,
+  UNSELECTED_FIELDS,
+  AVAILABLE_FIELDS,
+  QUERIED_FIELDS,
+  INDEX,
+  FINAL_QUERY,
+  SELECTED_TIMESTAMP,
+  SELECTED_DATE_RANGE,
+  GROUPBY,
+  AGGREGATIONS,
+  CUSTOM_LABEL,
+  BREAKDOWNS,
+} from '../constants/explorer';
+import {
+  CoreStart,
+  CoreSetup,
+  HttpSetup,
+  HttpStart,
+  NotificationsStart,
+} from '../../../../src/core/public';
+import SavedObjects from '../../public/services/saved_objects/event_analytics/saved_objects';
+import TimestampUtils from '../../public/services/timestamp/timestamp';
+import PPLService from '../../public/services/requests/ppl';
+import DSLService from '../../public/services/requests/dsl';
+import { SavedObjectsStart } from '../../../../src/core/public/saved_objects';
+
+export interface IQueryTab {
+  id: string;
+  name: React.ReactNode | string;
+  content: React.ReactNode;
+}
+
+export interface IField {
+  name: string;
+  type: string;
+  label?: string;
+}
+
+export interface TimeUnit {
+  name: string;
+  label: string;
+  value: string;
+}
+
+export interface ExplorerFields {
+  availableFields: IField[];
+  queriedFields: IField[];
+  selectedFields: IField[];
+  unselectedFields: IField[];
+}
+
+export interface ITabQueryResults {
+  [tabId: string]: any;
+}
+
+export interface ITabQueries {
+  [tabId: string]: IQuery;
+}
+
+export interface IQuery {
+  [RAW_QUERY]: string;
+  [FINAL_QUERY]: string;
+  [INDEX]: string;
+  [SELECTED_DATE_RANGE]: string[];
+  [SELECTED_TIMESTAMP]: string;
+}
+
+export interface IExplorerTabFields {
+  [tabId: string]: IExplorerFields;
+}
+
+export interface IExplorerFields {
+  [SELECTED_FIELDS]: IField[];
+  [UNSELECTED_FIELDS]: IField[];
+  [AVAILABLE_FIELDS]: IField[];
+  [QUERIED_FIELDS]: IField[];
+}
+
+export interface EmptyTabParams {
+  tabIds: string[] | undefined;
+  queries: any | undefined;
+  explorerData: any | undefined;
+}
+
+export interface ILogExplorerProps {
+  pplService: PPLService;
+  dslService: DSLService;
+  savedObjects: SavedObjects;
+  http: HttpStart;
+  history: History;
+  notifications: NotificationsStart;
+  timestampUtils: TimestampUtils;
+  setToast: (
+    title: string,
+    color?: string,
+    text?: React.ReactChild | undefined,
+    side?: string | undefined
+  ) => void;
+  savedObjectId: string;
+  getExistingEmptyTab: (params: EmptyTabParams) => string;
+  queryManager: QueryManager;
+}
+
+export interface IExplorerProps {
+  pplService: PPLService;
+  dslService: DSLService;
+  tabId: string;
+  savedObjects: SavedObjects;
+  timestampUtils: TimestampUtils;
+  history: History;
+  notifications: NotificationsStart;
+  savedObjectId: string;
+  curSelectedTabId: React.MutableRefObject<undefined>;
+  setToast: (
+    title: string,
+    color?: string,
+    text?: React.ReactChild | undefined,
+    side?: string | undefined
+  ) => void;
+  http: CoreStart['http'];
+  tabCreatedTypes?: any;
+  searchBarConfigs?: any;
+  appId?: string;
+  addVisualizationToPanel?: any;
+  startTime?: string;
+  endTime?: string;
+  setStartTime?: any;
+  setEndTime?: any;
+  appBaseQuery?: string;
+  callback?: any;
+  callbackInApp?: any;
+  queryManager?: QueryManager;
+}
+
+export interface SavedQuery {
+  description: string;
+  name: string;
+  query: string;
+  selected_date_range: { start: string; end: string; text: string };
+  selected_fields: { text: string; tokens: IField[] };
+  selected_timestamp: IField;
+}
+
+export interface SavedVisualization {
+  description: string;
+  name: string;
+  query: string;
+  selected_date_range: { start: string; end: string; text: string };
+  selected_fields: { text: string; tokens: [] };
+  selected_timestamp: IField;
+  type: string;
+  application_id?: string;
+}
+
+export interface SavedQueryRes {
+  createdTimeMs: number;
+  lastUpdatedTimeMs: number;
+  objectId: string;
+  savedQuery: SavedQuery;
+  tenant: string;
+}
+
+export interface SavedVizRes {
+  createdTimeMs: number;
+  lastUpdatedTimeMs: number;
+  objectId: string;
+  savedVisualization: SavedVisualization;
+  tenant: string;
+}
+
+export interface ExplorerDataType {
+  jsonData: object[];
+  jsonDataAll: object[];
+}
+
+export interface Query {
+  index: string;
+  isLoaded: boolean;
+  objectType: string;
+  rawQuery: string;
+  savedObjectId: string;
+  selectedDateRange: string[];
+  selectedTimestamp: string;
+  tabCreatedType: string;
+  finalQuery?: string;
+}
+
+export interface ExplorerData {
+  explorerData?: ExplorerDataType;
+  explorerFields?: IExplorerFields;
+  query?: Query;
+  http?: HttpSetup;
+  pplService?: PPLService;
+}
+
+export interface IVisualizationContainerPropsData {
+  appData?: { fromApp: boolean };
+  rawVizData?: any;
+  query?: IQuery;
+  indexFields?: IField[];
+  userConfigs?: any;
+  defaultAxes?: {
+    xaxis: IField[];
+    yaxis: IField[];
+  };
+  explorer?: ExplorerData;
+}
+
+export interface IVisualizationContainerPropsVis {
+  vis: IVisualizationTypeDefination;
+}
+
+export interface IConfigPanelTab {
+  id: string;
+  name: string;
+  mapTo: string;
+  editor: React.ReactNode;
+  sections: IConfigPanelOptions[];
+  props?: any;
+}
+
+export interface IConfigPanelOptions {
+  id: string;
+  name: string;
+  mapTo: string;
+  editor: React.ReactNode;
+  schemas: IConfigPanelOptionSection[];
+}
+
+export interface IConfigPanelOptionSection {
+  name: string;
+  component: null;
+  mapTo: string;
+  props?: any;
+  isSingleSelection?: boolean;
+  defaultState?: boolean | string;
+  eleType?: string;
+}
+
+export interface IVisualizationTypeDefination {
+  name: string;
+  type: string;
+  id: string;
+  label: string;
+  fulllabel: string;
+  category: string;
+  icon: React.ReactNode;
+  editorconfig: {
+    panelTabs: IConfigPanelTab;
+  };
+  visconfig: {
+    layout: Partial<Plotly.Layout>;
+    config: Partial<Plotly.Config>;
+  };
+  component: React.ReactNode;
+}
+
+export interface IVisualizationContainerProps {
+  data: IVisualizationContainerPropsData;
+  vis: IVisualizationContainerPropsVis;
+}
+
+export interface IDefaultTimestampState {
+  hasSchemaConflict: boolean;
+  default_timestamp: string;
+  message: string;
+}
+
+export interface LiveTailProps {
+  isLiveTailOn: boolean;
+  setIsLiveTailPopoverOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  liveTailName: string;
+  isLiveTailPopoverOpen: boolean;
+  dataTestSubj: string;
+}
+
+export interface PatternTableData {
+  count: number;
+  pattern: string;
+  sampleLog: string;
+  anomalyCount?: number;
+};
+
+export interface ConfigListEntry {
+  label: string;
+  aggregation: string;
+  [CUSTOM_LABEL]: string;
+  name: string;
+  side: string;
+  type: string;
+  alias?: string;
+}
+
+export interface HistogramConfigList {
+  bucketSize: string;
+  bucketOffset: string;
+}
+
+export interface DimensionSpan {
+  time_field: IField[];
+  interval: number;
+  unit: TimeUnit[];
+}
+
+export interface ConfigList {
+  [GROUPBY]?: ConfigListEntry[] | HistogramConfigList[];
+  [AGGREGATIONS]?: ConfigListEntry[];
+  [BREAKDOWNS]?: ConfigListEntry[] | HistogramConfigList[];
+  span?: DimensionSpan;
+}
+
+export interface Breadcrumbs {
+  text: string;
+  href: string;
+}
+
+export interface EventAnalyticsProps {
+  chrome: CoreSetup;
+  parentBreadcrumbs: Breadcrumbs[];
+  pplService: any;
+  dslService: any;
+  savedObjects: SavedObjectsStart;
+  timestampUtils: TimestampUtils;
+  http: HttpStart;
+  notifications: NotificationsStart;
+  queryManager: QueryManager;
+}
+
+export interface DataConfigPanelProps {
+  fieldOptionList: IField[];
+  visualizations: IVisualizationContainerProps;
+  queryManager?: QueryManager;
+}
+export interface GetTooltipHoverInfoType {
+  tooltipMode: string;
+  tooltipText: string;
+}
+
+export interface SelectedConfigItem {
+  index: number;
+  name: string;
+}
+
+export interface ParentUnitType {
+  name: string;
+  label: string;
+  type: string;
+}
+
+export interface TreemapParentsProps {
+  selectedAxis: ParentUnitType[];
+  setSelectedParentItem: (item: { isClicked: boolean; index: number }) => void;
+  handleUpdateParentFields: (arr: ParentUnitType[]) => void;
+}
+
+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: (arrIndex: number, sectionName: string, isTimeStamp: boolean) => void;
+}
+
+export interface VisMeta {
+  visId: string;
+}
+
+export interface VisualizationState {
+  query: Query;
+  visData: any;
+  visConfMetadata: ConfigList;
+  visMeta: VisMeta;
+}
diff --git a/common/types/metrics.ts b/common/types/metrics.ts
new file mode 100644
index 0000000000..64ebd07aba
--- /dev/null
+++ b/common/types/metrics.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { VisualizationType } from './custom_panels';
+
+export interface MetricData {
+  metricId: string;
+  metricType: 'savedCustomMetric' | 'prometheusMetric';
+  metricName: string;
+}
+
+export interface MetricType extends VisualizationType {
+  id: string;
+  savedVisualizationId: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  metricType: 'savedCustomMetric' | 'prometheusMetric';
+}
diff --git a/common/types/notebooks.ts b/common/types/notebooks.ts
new file mode 100644
index 0000000000..5c193ab5db
--- /dev/null
+++ b/common/types/notebooks.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { RefObject } from 'react';
+import { DashboardStart } from "../../../../src/plugins/dashboard/public";
+import { NavigationPublicPluginStart } from "../../../../src/plugins/navigation/public";
+
+export interface NotebooksPluginSetup {
+  getGreeting: () => string;
+}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface NotebooksPluginStart {}
+
+export interface optionsType {
+  baseUrl: string;
+  payload?: any;
+  headers?: any;
+  redirects?: number;
+  beforeRedirect?: any;
+  redirected?: any;
+  timeout?: number; // default: unlimited
+  maxBytes?: number; // default: unlimited
+  rejectUnauthorized?: boolean;
+  secureProtocol?: string; // The SSL method to use
+  ciphers?: string; // The TLS ciphers to support
+}
+
+export type ParaType = {
+  uniqueId: string;
+  isRunning: boolean;
+  inQueue: boolean;
+  isSelected: boolean;
+  isInputHidden: boolean;
+  isOutputHidden: boolean;
+  showAddPara: boolean;
+  isVizualisation: boolean;
+  vizObjectInput: string;
+  id: number;
+  inp: string;
+  lang: string;
+  editorLanguage: string;
+  typeOut: Array<string>;
+  out: any[];
+  isInputExpanded: boolean;
+  isOutputStale: boolean;
+  paraRef: RefObject<React.ReactElement>;
+  paraDivRef: RefObject<HTMLDivElement>;
+  visStartTime?: string;
+  visEndTime?: string;
+  visSavedObjId?: string;
+};
diff --git a/common/utils/index.ts b/common/utils/index.ts
new file mode 100644
index 0000000000..8ec98b14ff
--- /dev/null
+++ b/common/utils/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export {
+  getIndexPatternFromRawQuery,
+  preprocessQuery,
+  buildQuery,
+  composeFinalQuery,
+  removeBacktick,
+} from './query_utils';
+export { uiSettingsService } from './settings_service';
diff --git a/common/utils/query_utils.ts b/common/utils/query_utils.ts
new file mode 100644
index 0000000000..eec15aa2d7
--- /dev/null
+++ b/common/utils/query_utils.ts
@@ -0,0 +1,147 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import datemath from '@elastic/datemath';
+import { isEmpty } from 'lodash';
+import {
+  DATE_PICKER_FORMAT,
+  PPL_DEFAULT_PATTERN_REGEX_FILETER,
+} from '../../common/constants/explorer';
+import {
+  PPL_INDEX_INSERT_POINT_REGEX,
+  PPL_INDEX_REGEX,
+  PPL_NEWLINE_REGEX,
+  PPL_STATS_REGEX,
+} from '../../common/constants/shared';
+
+/**
+ * @param literal - string literal that will be put inside single quotes in PPL command
+ * @returns string with inner single quotes escaped
+ */
+const escapeQuotes = (literal: string) => {
+  return literal.replaceAll("'", "''");
+};
+
+export const getIndexPatternFromRawQuery = (query: string): string => {
+  const matches = query.match(PPL_INDEX_REGEX);
+  if (matches) {
+    return matches[2];
+  }
+  return '';
+};
+
+// insert time filter command and additional commands based on raw query
+export const preprocessQuery = ({
+  rawQuery,
+  startTime,
+  endTime,
+  timeField,
+  isLiveQuery,
+  selectedPatternField,
+  patternRegex,
+  filteredPattern,
+}: {
+  rawQuery: string;
+  startTime: string;
+  endTime: string;
+  timeField?: string;
+  isLiveQuery: boolean;
+  selectedPatternField?: string;
+  patternRegex?: string;
+  filteredPattern?: string;
+}) => {
+  let finalQuery = '';
+
+  if (isEmpty(rawQuery)) return finalQuery;
+
+  // convert to moment
+  const start = datemath.parse(startTime)?.utc().format(DATE_PICKER_FORMAT);
+  const end = datemath.parse(endTime, { roundUp: true })?.utc().format(DATE_PICKER_FORMAT);
+  const tokens = rawQuery.replaceAll(PPL_NEWLINE_REGEX, '').match(PPL_INDEX_INSERT_POINT_REGEX);
+
+  if (isEmpty(tokens)) return finalQuery;
+
+  finalQuery = `${tokens![1]}=${
+    tokens![2]
+  } | where ${timeField} >= '${start}' and ${timeField} <= '${end}'${tokens![3]}`;
+
+  if (isLiveQuery) {
+    finalQuery = finalQuery + ` | sort - ${timeField}`;
+  }
+
+  // if a pattern is selected as filter, build it into finalQuery
+  if (selectedPatternField && filteredPattern)
+    finalQuery = buildPatternsQuery(
+      finalQuery,
+      selectedPatternField,
+      patternRegex,
+      filteredPattern
+    );
+
+  return finalQuery;
+};
+
+export const buildPatternsQuery = (
+  baseQuery: string,
+  selectedPatternField?: string,
+  patternRegex?: string,
+  filteredPattern?: string
+) => {
+  let finalQuery = baseQuery;
+  if (selectedPatternField) {
+    finalQuery += ` | patterns `;
+    if (patternRegex && patternRegex !== PPL_DEFAULT_PATTERN_REGEX_FILETER) {
+      finalQuery += `pattern='${escapeQuotes(patternRegex)}' `;
+    }
+    finalQuery += `\`${selectedPatternField}\` `;
+    if (filteredPattern) {
+      finalQuery += `| where patterns_field='${escapeQuotes(filteredPattern)}'`;
+    }
+  }
+  return finalQuery;
+};
+
+export const buildQuery = (baseQuery: string, currQuery: string) => {
+  let fullQuery: string;
+  if (baseQuery) {
+    fullQuery = baseQuery;
+    if (currQuery) {
+      fullQuery += '| ' + currQuery;
+    }
+  } else {
+    fullQuery = currQuery;
+  }
+  return fullQuery;
+};
+
+export const composeFinalQuery = (
+  curQuery: string,
+  startingTime: string,
+  endingTime: string,
+  timeField: string,
+  isLiveQuery: boolean,
+  appBaseQuery: string,
+  selectedPatternField?: string,
+  patternRegex?: string,
+  filteredPattern?: string
+) => {
+  const fullQuery = curQuery.includes(appBaseQuery) ? curQuery : buildQuery(appBaseQuery, curQuery);
+  if (isEmpty(fullQuery)) return '';
+  return preprocessQuery({
+    rawQuery: fullQuery,
+    startTime: startingTime,
+    endTime: endingTime,
+    timeField,
+    isLiveQuery,
+    selectedPatternField,
+    patternRegex,
+    filteredPattern,
+  });
+};
+
+export const removeBacktick = (stringContainsBacktick: string) => {
+  if (!stringContainsBacktick) return '';
+  return stringContainsBacktick.replace(/`/g, '');
+};
diff --git a/common/utils/settings_service.ts b/common/utils/settings_service.ts
new file mode 100644
index 0000000000..f22912127d
--- /dev/null
+++ b/common/utils/settings_service.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { IUiSettingsClient, NotificationsStart, ToastInput } from '../../../../src/core/public';
+
+let uiSettings: IUiSettingsClient;
+let notifications: NotificationsStart;
+
+export const uiSettingsService = {
+  init: (client: IUiSettingsClient, notificationsStart: NotificationsStart) => {
+    uiSettings = client;
+    notifications = notificationsStart;
+  },
+  get: (key: string, defaultOverride?: any) => {
+    return uiSettings?.get(key, defaultOverride) || '';
+  },
+  set: (key: string, value: any) => {
+    return uiSettings?.set(key, value) || Promise.reject("uiSettings client not initialized.");
+  },
+  addToast: (toast: ToastInput) => {
+    return notifications.toasts.add(toast);
+  }
+};
\ No newline at end of file
diff --git a/cypress.json b/cypress.json
new file mode 100644
index 0000000000..5c55805ba6
--- /dev/null
+++ b/cypress.json
@@ -0,0 +1,22 @@
+{
+  "baseUrl": "http://localhost:5601",
+  "video": true,
+  "chromeWebSecurity": false,
+  "fixturesFolder": ".cypress/fixtures",
+  "integrationFolder": ".cypress/integration",
+  "pluginsFile": ".cypress/plugins/index.js",
+  "screenshotsFolder": ".cypress/screenshots",
+  "supportFile": ".cypress/support/index.js",
+  "videosFolder": ".cypress/videos",
+  "viewportWidth": 2000,
+  "viewportHeight": 1320,
+  "requestTimeout": 60000,
+  "responseTimeout": 60000,
+  "defaultCommandTimeout": 60000,
+  "experimentalNetworkStubbing": true,
+  "env": {
+    "opensearch": "localhost:9200",
+    "opensearchDashboards": "localhost:5601",
+    "security_enabled": true
+  }
+}
diff --git a/opensearch-dashboards-plugin-helpers.dev.json b/opensearch-dashboards-plugin-helpers.dev.json
new file mode 100644
index 0000000000..23260a3b2e
--- /dev/null
+++ b/opensearch-dashboards-plugin-helpers.dev.json
@@ -0,0 +1,9 @@
+{
+  "serverSourcePatterns": [
+    "package.json",
+    "yarn.lock",
+    "tsconfig.json",
+    "{common,public,server,test}/**/*",
+    "!__tests__"
+  ]
+}
diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json
new file mode 100644
index 0000000000..0d145f1a91
--- /dev/null
+++ b/opensearch_dashboards.json
@@ -0,0 +1,19 @@
+{
+  "id": "observabilityDashboards",
+  "version": "3.0.0.0",
+  "opensearchDashboardsVersion": "3.0.0",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": [
+    "charts",
+    "data",
+    "embeddable",
+    "inspector",
+    "urlForwarding",
+    "navigation",
+    "uiActions",
+    "dashboard",
+    "visualizations",
+    "opensearchDashboardsReact"
+  ]
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..617f86afbf
--- /dev/null
+++ b/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "observability-dashboards",
+  "version": "3.0.0.0",
+  "main": "index.ts",
+  "license": "Apache-2.0",
+  "scripts": {
+    "osd": "node ../../scripts/osd",
+    "build": "yarn plugin_helpers build",
+    "test": "../../node_modules/.bin/jest --config ./test/jest.config.js",
+    "cypress:run": "TZ=America/Los_Angeles cypress run",
+    "cypress:open": "TZ=America/Los_Angeles cypress open",
+    "plugin_helpers": "node ../../scripts/plugin_helpers",
+    "postinstall": "antlr4ts -visitor ./common/query_manager/antlr/grammar/OpenSearchPPLLexer.g4 -Xexact-output-dir -o ./common/query_manager/antlr/output && antlr4ts -visitor ./common/query_manager/antlr/grammar/OpenSearchPPLParser.g4 -Xexact-output-dir -o ./common/query_manager/antlr/output"
+  },
+  "dependencies": {
+    "@algolia/autocomplete-core": "^1.4.1",
+    "@algolia/autocomplete-theme-classic": "^1.2.1",
+    "@nteract/outputs": "^3.0.11",
+    "@nteract/presentational-components": "^3.4.3",
+    "@reduxjs/toolkit": "^1.6.1",
+    "ag-grid-community": "^27.3.0",
+    "ag-grid-react": "^27.3.0",
+    "antlr4": "4.8.0",
+    "antlr4ts": "^0.5.0-alpha.4",
+    "plotly.js-dist": "^2.2.0",
+    "postinstall": "^0.7.4",
+    "react-graph-vis": "^1.0.5",
+    "react-paginate": "^8.1.3",
+    "react-plotly.js": "^2.5.1",
+    "redux-persist": "^6.0.0"
+  },
+  "devDependencies": {
+    "@cypress/skip-test": "^2.6.1",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/react-plotly.js": "^2.5.0",
+    "@types/react-test-renderer": "^16.9.1",
+    "antlr4ts-cli": "^0.5.0-alpha.4",
+    "cypress": "^5.0.0",
+    "eslint": "^6.8.0",
+    "jest-dom": "^4.0.0",
+    "performance-now": "^2.1.0"
+  },
+  "resolutions": {
+    "react-syntax-highlighter": "^15.4.3",
+    "prismjs": "^1.22.0",
+    "trim": "^1.0.0",
+    "lodash": "^4.17.21",
+    "glob-parent": "^6.0.1",
+    "ansi-regex": "^5.0.1",
+    "json-schema": "^0.4.0",
+    "qs": "~6.5.3",
+    "minimatch": "^3.0.5"
+  }
+}
diff --git a/public/.DS_Store b/public/.DS_Store
new file mode 100644
index 0000000000..dbd07c1a1c
Binary files /dev/null and b/public/.DS_Store differ
diff --git a/public/components/app.tsx b/public/components/app.tsx
new file mode 100644
index 0000000000..20538007ab
--- /dev/null
+++ b/public/components/app.tsx
@@ -0,0 +1,170 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { I18nProvider } from '@osd/i18n/react';
+import { QueryManager } from 'common/query_manager';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { HashRouter, Route, Switch } from 'react-router-dom';
+import { CoreStart } from '../../../../src/core/public';
+import { observabilityID, observabilityTitle } from '../../common/constants/shared';
+import store from '../framework/redux/store';
+import { AppPluginStartDependencies } from '../types';
+import { Home as ApplicationAnalyticsHome } from './application_analytics/home';
+import { MetricsListener } from './common/metrics_listener';
+import { Home as CustomPanelsHome } from './custom_panels/home';
+import { EventAnalytics } from './event_analytics';
+import { Home as MetricsHome } from './metrics/index';
+import { Main as NotebooksHome } from './notebooks/components/main';
+import { Home as TraceAnalyticsHome } from './trace_analytics/home';
+
+interface ObservabilityAppDeps {
+  CoreStartProp: CoreStart;
+  DepsStart: AppPluginStartDependencies;
+  pplService: any;
+  dslService: any;
+  savedObjects: any;
+  timestampUtils: any;
+  queryManager: QueryManager;
+}
+
+// for cypress to test redux store
+if (window.Cypress) {
+  window.store = store;
+}
+
+export const App = ({
+  CoreStartProp,
+  DepsStart,
+  pplService,
+  dslService,
+  savedObjects,
+  timestampUtils,
+  queryManager,
+}: ObservabilityAppDeps) => {
+  const { chrome, http, notifications } = CoreStartProp;
+  const parentBreadcrumb = {
+    text: observabilityTitle,
+    href: `${observabilityID}#/`,
+  };
+
+  const customPanelBreadcrumb = {
+    text: 'Operational panels',
+    href: '#/operational_panels/',
+  };
+
+  return (
+    <Provider store={store}>
+      <HashRouter>
+        <I18nProvider>
+          <MetricsListener http={http}>
+            <Switch>
+              <Route
+                path="/metrics_analytics/"
+                render={(props) => {
+                  chrome.setBreadcrumbs([
+                    parentBreadcrumb,
+                    { text: 'Metrics analytics', href: '#/metrics_analytics/' },
+                  ]);
+                  return (
+                    <MetricsHome
+                      http={http}
+                      chrome={chrome}
+                      parentBreadcrumb={parentBreadcrumb}
+                      renderProps={props}
+                      pplService={pplService}
+                      savedObjects={savedObjects}
+                    />
+                  );
+                }}
+              />
+              <Route
+                path={'/application_analytics'}
+                render={(props) => {
+                  return (
+                    <ApplicationAnalyticsHome
+                      {...props}
+                      chrome={chrome}
+                      http={http}
+                      notifications={notifications}
+                      parentBreadcrumbs={[parentBreadcrumb]}
+                      pplService={pplService}
+                      dslService={dslService}
+                      savedObjects={savedObjects}
+                      timestampUtils={timestampUtils}
+                      queryManager={queryManager}
+                    />
+                  );
+                }}
+              />
+              <Route
+                path="/notebooks"
+                render={(props) => (
+                  <NotebooksHome
+                    {...props}
+                    DashboardContainerByValueRenderer={
+                      DepsStart.dashboard.DashboardContainerByValueRenderer
+                    }
+                    http={http}
+                    pplService={pplService}
+                    setBreadcrumbs={chrome.setBreadcrumbs}
+                    parentBreadcrumb={parentBreadcrumb}
+                    notifications={notifications}
+                  />
+                )}
+              />
+              <Route
+                path="/operational_panels"
+                render={(props) => {
+                  chrome.setBreadcrumbs([parentBreadcrumb, customPanelBreadcrumb]);
+                  return (
+                    <CustomPanelsHome
+                      http={http}
+                      chrome={chrome}
+                      parentBreadcrumbs={[parentBreadcrumb, customPanelBreadcrumb]}
+                      pplService={pplService}
+                      dslService={dslService}
+                      renderProps={props}
+                    />
+                  );
+                }}
+              />
+              <Route
+                path={['/trace_analytics', '/trace_analytics/home']}
+                render={(props) => (
+                  <TraceAnalyticsHome
+                    {...props}
+                    chrome={chrome}
+                    http={http}
+                    parentBreadcrumbs={[parentBreadcrumb]}
+                  />
+                )}
+              />
+              <Route
+                path={['/', '/event_analytics']}
+                render={(props) => {
+                  return (
+                    <EventAnalytics
+                      chrome={chrome}
+                      parentBreadcrumbs={[parentBreadcrumb]}
+                      pplService={pplService}
+                      dslService={dslService}
+                      savedObjects={savedObjects}
+                      timestampUtils={timestampUtils}
+                      http={http}
+                      notifications={notifications}
+                      queryManager={queryManager}
+                      {...props}
+                    />
+                  );
+                }}
+              />
+            </Switch>
+          </MetricsListener>
+        </I18nProvider>
+      </HashRouter>
+    </Provider>
+  );
+};
diff --git a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
new file mode 100644
index 0000000000..fd2d3f4e4b
--- /dev/null
+++ b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
@@ -0,0 +1,19055 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Create Page can clear query 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body
+    class="euiBody-hasOverlayMask"
+  >
+    <div
+      aria-hidden="true"
+      data-aria-hidden="true"
+    >
+      <div
+        style="max-width: 1130px;"
+      >
+        <div
+          class="euiPage euiPage--paddingMedium euiPage--grow"
+        >
+          <div
+            class="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <header
+              class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+            >
+              <div
+                class="euiPageHeaderSection"
+              >
+                <h1
+                  class="euiTitle euiTitle--large"
+                  data-test-subj="createPageTitle"
+                >
+                  Create
+                   application
+                </h1>
+              </div>
+            </header>
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="appInfo"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Application information
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <form
+                class="euiForm"
+              >
+                <div
+                  class="euiFormRow"
+                  data-test-subj="nameFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Name
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="name"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFormRow"
+                  data-test-subj="descriptionFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Description
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="description"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="composition"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Composition
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion euiAccordion-isOpen"
+                  data-test-subj="logSourceAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="logSource"
+                      aria-expanded="true"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Log source
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Configure your application base query
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small"
+                        data-test-subj="clearLogSourceButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="logSource"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiCallOut euiCallOut--primary euiCallOut--small"
+                              id="baseQueryCallout"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <div
+                                  class="euiTextColor euiTextColor--default"
+                                >
+                                  You can't change the base query after the application is created.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormRow"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                class="euiFormRow__labelWrapper"
+                              >
+                                <label
+                                  class="euiFormLabel euiFormRow__label"
+                                  for="random_html_id"
+                                >
+                                  Base Query
+                                </label>
+                              </div>
+                              <div
+                                class="euiFormRow__fieldWrapper"
+                              >
+                                <div
+                                  aria-describedby="random_html_id-help-0"
+                                  class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                  id="random_html_id"
+                                >
+                                  <div
+                                    aria-expanded="false"
+                                    aria-haspopup="listbox"
+                                    aria-labelledby="autocomplete-3-label"
+                                    class="aa-Autocomplete"
+                                    id="autocomplete-root"
+                                    role="combobox"
+                                  >
+                                    <textarea
+                                      aria-autocomplete="both"
+                                      aria-labelledby="autocomplete-3-label"
+                                      autocapitalize="off"
+                                      autocomplete="off"
+                                      autocorrect="off"
+                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      data-test-subj="searchAutocompleteTextArea"
+                                      enterkeyhint="search"
+                                      id="autocomplete-textarea"
+                                      maxlength="512"
+                                      placeholder="Enter PPL query"
+                                      rows="6"
+                                      spellcheck="false"
+                                      type="search"
+                                    >
+                                      source = openserach_dashboard_sample_logs
+                                    </textarea>
+                                  </div>
+                                  <button
+                                    aria-label="pplLinkShowFlyout"
+                                    class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                    title="PPL"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        PPL
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiFormHelpText euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                >
+                                  The default logs view in the application will be filtered by this query.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="servicesEntitiesAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="servicesEntities"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Services & entities
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="servicesEntitiesCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Select services & entities to include in this application
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearServicesEntitiesButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="servicesEntities"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Services & entities
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select services and entities"
+                              class="euiComboBox"
+                              data-test-subj="servicesEntitiesComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select services and entities
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiText euiText--medium"
+                          >
+                            <span
+                              class="panel-title"
+                            >
+                              Service map
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <fieldset
+                            class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                          >
+                            <legend
+                              class="euiScreenReaderOnly"
+                            />
+                            <div
+                              class="euiButtonGroup__buttons"
+                            >
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Latency"
+                                    title="Latency"
+                                  >
+                                    <input
+                                      checked=""
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="latency"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Latency
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Error rate"
+                                    title="Error rate"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="error_rate"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Error rate
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Throughput"
+                                    title="Throughput"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="throughput"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Throughput
+                                  </span>
+                                </span>
+                              </label>
+                            </div>
+                          </fieldset>
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                          />
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                Focus on
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <input
+                                    class="euiFieldSearch"
+                                    placeholder="Service name"
+                                    type="search"
+                                    value=""
+                                  />
+                                  <div
+                                    class="euiFormControlLayoutIcons"
+                                  >
+                                    <span
+                                      class="euiFormControlLayoutCustomIcon"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--l"
+                          />
+                          <div
+                            style="min-height: 434px;"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                            <div
+                              class="euiEmptyPrompt"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                              <span
+                                class="euiTextColor euiTextColor--subdued"
+                              >
+                                <div
+                                  class="euiSpacer euiSpacer--m"
+                                />
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  <div
+                                    class="euiText euiText--medium"
+                                  >
+                                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                  </div>
+                                </div>
+                              </span>
+                            </div>
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="traceGroupsAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="traceGroups"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Trace groups
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="traceGroupsCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Constrain your application to specific trace groups
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearTraceGroupsButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="traceGroups"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Trace Groups
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-describedby="random_html_id-help-0"
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select trace groups"
+                              class="euiComboBox"
+                              data-test-subj="traceGroupsComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select or add trace groups
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFormHelpText euiFormRow__text"
+                              id="random_html_id-help-0"
+                            >
+                              Select one or multiple trace groups, or type a custom one
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow10"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <span
+                                  class="panel-title"
+                                >
+                                  Latency by trace group
+                                </span>
+                                <span
+                                  class="panel-title-count"
+                                >
+                                   (0)
+                                </span>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-1"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    □
+                                  </span>
+                                   &lt; 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-2"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    ■
+                                  </span>
+                                   &gt;= 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full"
+                          />
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButton euiButton--primary"
+                  data-test-subj="cancelCreateButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Cancel
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    data-test-subj="createButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    data-test-subj="createAndSetButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create and Set Availability
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="euiOverlayMask euiOverlayMask--aboveHeader"
+      data-aria-hidden="true"
+    />
+    <div
+      class="euiOverlayMask euiOverlayMask--aboveHeader"
+    >
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <div
+          class="euiModal euiModal--maxWidth-default euiModal--confirmation"
+          tabindex="0"
+        >
+          <button
+            aria-label="Closes this modal window"
+            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+              />
+            </svg>
+          </button>
+          <div
+            class="euiModal__flex"
+          >
+            <div
+              class="euiModalHeader"
+            >
+              <div
+                class="euiModalHeader__title"
+                data-test-subj="confirmModalTitleText"
+              >
+                Clear log source?
+              </div>
+            </div>
+            <div
+              class="euiModalBody"
+            >
+              <div
+                class="euiModalBody__overflow"
+              >
+                <div
+                  class="euiText euiText--medium"
+                  data-test-subj="confirmModalBodyText"
+                >
+                  <p>
+                    This will clear all information in log source configuration.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiModalFooter"
+            >
+              <button
+                class="euiButtonEmpty euiButtonEmpty--primary"
+                data-test-subj="confirmModalCancelButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButtonEmpty__content"
+                >
+                  <span
+                    class="euiButtonEmpty__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+              <button
+                class="euiButton euiButton--danger euiButton--fill"
+                data-test-subj="confirmModalConfirmButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Clear
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+    </div>
+  </body>,
+  "container": <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+  >
+    <div
+      style="max-width: 1130px;"
+    >
+      <div
+        class="euiPage euiPage--paddingMedium euiPage--grow"
+      >
+        <div
+          class="euiPageBody euiPageBody--borderRadiusNone"
+        >
+          <header
+            class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+          >
+            <div
+              class="euiPageHeaderSection"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+                data-test-subj="createPageTitle"
+              >
+                Create
+                 application
+              </h1>
+            </div>
+          </header>
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="appInfo"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Application information
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <form
+              class="euiForm"
+            >
+              <div
+                class="euiFormRow"
+                data-test-subj="nameFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Name
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="name"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFormRow"
+                data-test-subj="descriptionFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Description
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="description"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="composition"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Composition
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion euiAccordion-isOpen"
+                data-test-subj="logSourceAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="logSource"
+                    aria-expanded="true"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Log source
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Configure your application base query
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small"
+                      data-test-subj="clearLogSourceButton"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="logSource"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                      >
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiCallOut euiCallOut--primary euiCallOut--small"
+                            id="baseQueryCallout"
+                          >
+                            <div
+                              class="euiText euiText--extraSmall"
+                            >
+                              <div
+                                class="euiTextColor euiTextColor--default"
+                              >
+                                You can't change the base query after the application is created.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiFormRow"
+                            id="random_html_id-row"
+                          >
+                            <div
+                              class="euiFormRow__labelWrapper"
+                            >
+                              <label
+                                class="euiFormLabel euiFormRow__label"
+                                for="random_html_id"
+                              >
+                                Base Query
+                              </label>
+                            </div>
+                            <div
+                              class="euiFormRow__fieldWrapper"
+                            >
+                              <div
+                                aria-describedby="random_html_id-help-0"
+                                class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                id="random_html_id"
+                              >
+                                <div
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  aria-labelledby="autocomplete-3-label"
+                                  class="aa-Autocomplete"
+                                  id="autocomplete-root"
+                                  role="combobox"
+                                >
+                                  <textarea
+                                    aria-autocomplete="both"
+                                    aria-labelledby="autocomplete-3-label"
+                                    autocapitalize="off"
+                                    autocomplete="off"
+                                    autocorrect="off"
+                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    data-test-subj="searchAutocompleteTextArea"
+                                    enterkeyhint="search"
+                                    id="autocomplete-textarea"
+                                    maxlength="512"
+                                    placeholder="Enter PPL query"
+                                    rows="6"
+                                    spellcheck="false"
+                                    type="search"
+                                  >
+                                    source = openserach_dashboard_sample_logs
+                                  </textarea>
+                                </div>
+                                <button
+                                  aria-label="pplLinkShowFlyout"
+                                  class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                  title="PPL"
+                                >
+                                  <span
+                                    class="euiBadge__content"
+                                  >
+                                    <span
+                                      class="euiBadge__text"
+                                    >
+                                      PPL
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiFormHelpText euiFormRow__text"
+                                id="random_html_id-help-0"
+                              >
+                                The default logs view in the application will be filtered by this query.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="servicesEntitiesAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="servicesEntities"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Services & entities
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="servicesEntitiesCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Select services & entities to include in this application
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearServicesEntitiesButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="servicesEntities"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Services & entities
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select services and entities"
+                            class="euiComboBox"
+                            data-test-subj="servicesEntitiesComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select services and entities
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                        >
+                          <span
+                            class="panel-title"
+                          >
+                            Service map
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <fieldset
+                          class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                        >
+                          <legend
+                            class="euiScreenReaderOnly"
+                          />
+                          <div
+                            class="euiButtonGroup__buttons"
+                          >
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Latency"
+                                  title="Latency"
+                                >
+                                  <input
+                                    checked=""
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="latency"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Latency
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Error rate"
+                                  title="Error rate"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="error_rate"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Error rate
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Throughput"
+                                  title="Throughput"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="throughput"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Throughput
+                                </span>
+                              </span>
+                            </label>
+                          </div>
+                        </fieldset>
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                        />
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              Focus on
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldSearch"
+                                  placeholder="Service name"
+                                  type="search"
+                                  value=""
+                                />
+                                <div
+                                  class="euiFormControlLayoutIcons"
+                                >
+                                  <span
+                                    class="euiFormControlLayoutCustomIcon"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          style="min-height: 434px;"
+                        >
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="traceGroupsAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="traceGroups"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Trace groups
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="traceGroupsCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Constrain your application to specific trace groups
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearTraceGroupsButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="traceGroups"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Trace Groups
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="random_html_id-help-0"
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select trace groups"
+                            class="euiComboBox"
+                            data-test-subj="traceGroupsComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select or add trace groups
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            id="random_html_id-help-0"
+                          >
+                            Select one or multiple trace groups, or type a custom one
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow10"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <span
+                                class="panel-title"
+                              >
+                                Latency by trace group
+                              </span>
+                              <span
+                                class="panel-title-count"
+                              >
+                                 (0)
+                              </span>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-1"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  □
+                                </span>
+                                 &lt; 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-2"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  ■
+                                </span>
+                                 &gt;= 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full"
+                        />
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                        <div
+                          class="euiEmptyPrompt"
+                        >
+                          <h2
+                            class="euiTitle euiTitle--medium"
+                          >
+                            No matches
+                          </h2>
+                          <span
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--m"
+                            />
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="cancelCreateButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  data-test-subj="createButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  data-test-subj="createAndSetButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create and Set Availability
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Create Page clears one trace selected 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body
+    class=""
+  >
+    <div>
+      <div
+        style="max-width: 1130px;"
+      >
+        <div
+          class="euiPage euiPage--paddingMedium euiPage--grow"
+        >
+          <div
+            class="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <header
+              class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+            >
+              <div
+                class="euiPageHeaderSection"
+              >
+                <h1
+                  class="euiTitle euiTitle--large"
+                  data-test-subj="createPageTitle"
+                >
+                  Create
+                   application
+                </h1>
+              </div>
+            </header>
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="appInfo"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Application information
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <form
+                class="euiForm"
+              >
+                <div
+                  class="euiFormRow"
+                  data-test-subj="nameFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Name
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="name"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFormRow"
+                  data-test-subj="descriptionFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Description
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="description"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="composition"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Composition
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="logSourceAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="logSource"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Log source
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Configure your application base query
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearLogSourceButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="logSource"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiCallOut euiCallOut--primary euiCallOut--small"
+                              id="baseQueryCallout"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <div
+                                  class="euiTextColor euiTextColor--default"
+                                >
+                                  You can't change the base query after the application is created.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormRow"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                class="euiFormRow__labelWrapper"
+                              >
+                                <label
+                                  class="euiFormLabel euiFormRow__label"
+                                  for="random_html_id"
+                                >
+                                  Base Query
+                                </label>
+                              </div>
+                              <div
+                                class="euiFormRow__fieldWrapper"
+                              >
+                                <div
+                                  aria-describedby="random_html_id-help-0"
+                                  class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                  id="random_html_id"
+                                >
+                                  <div
+                                    aria-expanded="false"
+                                    aria-haspopup="listbox"
+                                    aria-labelledby="autocomplete-7-label"
+                                    class="aa-Autocomplete"
+                                    id="autocomplete-root"
+                                    role="combobox"
+                                  >
+                                    <textarea
+                                      aria-autocomplete="both"
+                                      aria-labelledby="autocomplete-7-label"
+                                      autocapitalize="off"
+                                      autocomplete="off"
+                                      autocorrect="off"
+                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      data-test-subj="searchAutocompleteTextArea"
+                                      enterkeyhint="search"
+                                      id="autocomplete-textarea"
+                                      maxlength="512"
+                                      placeholder="Enter PPL query"
+                                      rows="6"
+                                      spellcheck="false"
+                                      type="search"
+                                    />
+                                  </div>
+                                  <button
+                                    aria-label="pplLinkShowFlyout"
+                                    class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                    title="PPL"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        PPL
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiFormHelpText euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                >
+                                  The default logs view in the application will be filtered by this query.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="servicesEntitiesAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="servicesEntities"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Services & entities
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="servicesEntitiesCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Select services & entities to include in this application
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearServicesEntitiesButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="servicesEntities"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Services & entities
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select services and entities"
+                              class="euiComboBox"
+                              data-test-subj="servicesEntitiesComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select services and entities
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiText euiText--medium"
+                          >
+                            <span
+                              class="panel-title"
+                            >
+                              Service map
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <fieldset
+                            class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                          >
+                            <legend
+                              class="euiScreenReaderOnly"
+                            />
+                            <div
+                              class="euiButtonGroup__buttons"
+                            >
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Latency"
+                                    title="Latency"
+                                  >
+                                    <input
+                                      checked=""
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="latency"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Latency
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Error rate"
+                                    title="Error rate"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="error_rate"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Error rate
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Throughput"
+                                    title="Throughput"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="throughput"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Throughput
+                                  </span>
+                                </span>
+                              </label>
+                            </div>
+                          </fieldset>
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                          />
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                Focus on
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <input
+                                    class="euiFieldSearch"
+                                    placeholder="Service name"
+                                    type="search"
+                                    value=""
+                                  />
+                                  <div
+                                    class="euiFormControlLayoutIcons"
+                                  >
+                                    <span
+                                      class="euiFormControlLayoutCustomIcon"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--l"
+                          />
+                          <div
+                            style="min-height: 434px;"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                            <div
+                              class="euiEmptyPrompt"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                              <span
+                                class="euiTextColor euiTextColor--subdued"
+                              >
+                                <div
+                                  class="euiSpacer euiSpacer--m"
+                                />
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  <div
+                                    class="euiText euiText--medium"
+                                  >
+                                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                  </div>
+                                </div>
+                              </span>
+                            </div>
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion euiAccordion-isOpen"
+                  data-test-subj="traceGroupsAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="traceGroups"
+                      aria-expanded="true"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Trace groups
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="traceGroupsCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="1"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                <span
+                                  class="euiBadge__text"
+                                >
+                                  1
+                                </span>
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Constrain your application to specific trace groups
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small"
+                        data-test-subj="clearTraceGroupsButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="traceGroups"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Trace Groups
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-describedby="random_html_id-help-0"
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select trace groups"
+                              class="euiComboBox"
+                              data-test-subj="traceGroupsComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <span
+                                      class="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                      title="test.auto"
+                                    >
+                                      <span
+                                        class="euiBadge__content"
+                                      >
+                                        <span
+                                          class="euiBadge__text"
+                                        >
+                                          test.auto
+                                        </span>
+                                        <button
+                                          aria-label="Remove test.auto from selection in this group"
+                                          class="euiBadge__iconButton"
+                                          title="Remove test.auto from selection in this group"
+                                          type="button"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
+                                            focusable="false"
+                                            height="16"
+                                            role="img"
+                                            tabindex="-1"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                            />
+                                          </svg>
+                                        </button>
+                                      </span>
+                                    </span>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFormHelpText euiFormRow__text"
+                              id="random_html_id-help-0"
+                            >
+                              Select one or multiple trace groups, or type a custom one
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow10"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <span
+                                  class="panel-title"
+                                >
+                                  Latency by trace group
+                                </span>
+                                <span
+                                  class="panel-title-count"
+                                >
+                                   (0)
+                                </span>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-1"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    □
+                                  </span>
+                                   &lt; 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-2"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    ■
+                                  </span>
+                                   &gt;= 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full"
+                          />
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButton euiButton--primary"
+                  data-test-subj="cancelCreateButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Cancel
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    data-test-subj="createButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    data-test-subj="createAndSetButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create and Set Availability
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      style="max-width: 1130px;"
+    >
+      <div
+        class="euiPage euiPage--paddingMedium euiPage--grow"
+      >
+        <div
+          class="euiPageBody euiPageBody--borderRadiusNone"
+        >
+          <header
+            class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+          >
+            <div
+              class="euiPageHeaderSection"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+                data-test-subj="createPageTitle"
+              >
+                Create
+                 application
+              </h1>
+            </div>
+          </header>
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="appInfo"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Application information
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <form
+              class="euiForm"
+            >
+              <div
+                class="euiFormRow"
+                data-test-subj="nameFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Name
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="name"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFormRow"
+                data-test-subj="descriptionFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Description
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="description"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="composition"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Composition
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="logSourceAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="logSource"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Log source
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Configure your application base query
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearLogSourceButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="logSource"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                      >
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiCallOut euiCallOut--primary euiCallOut--small"
+                            id="baseQueryCallout"
+                          >
+                            <div
+                              class="euiText euiText--extraSmall"
+                            >
+                              <div
+                                class="euiTextColor euiTextColor--default"
+                              >
+                                You can't change the base query after the application is created.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiFormRow"
+                            id="random_html_id-row"
+                          >
+                            <div
+                              class="euiFormRow__labelWrapper"
+                            >
+                              <label
+                                class="euiFormLabel euiFormRow__label"
+                                for="random_html_id"
+                              >
+                                Base Query
+                              </label>
+                            </div>
+                            <div
+                              class="euiFormRow__fieldWrapper"
+                            >
+                              <div
+                                aria-describedby="random_html_id-help-0"
+                                class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                id="random_html_id"
+                              >
+                                <div
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  aria-labelledby="autocomplete-7-label"
+                                  class="aa-Autocomplete"
+                                  id="autocomplete-root"
+                                  role="combobox"
+                                >
+                                  <textarea
+                                    aria-autocomplete="both"
+                                    aria-labelledby="autocomplete-7-label"
+                                    autocapitalize="off"
+                                    autocomplete="off"
+                                    autocorrect="off"
+                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    data-test-subj="searchAutocompleteTextArea"
+                                    enterkeyhint="search"
+                                    id="autocomplete-textarea"
+                                    maxlength="512"
+                                    placeholder="Enter PPL query"
+                                    rows="6"
+                                    spellcheck="false"
+                                    type="search"
+                                  />
+                                </div>
+                                <button
+                                  aria-label="pplLinkShowFlyout"
+                                  class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                  title="PPL"
+                                >
+                                  <span
+                                    class="euiBadge__content"
+                                  >
+                                    <span
+                                      class="euiBadge__text"
+                                    >
+                                      PPL
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiFormHelpText euiFormRow__text"
+                                id="random_html_id-help-0"
+                              >
+                                The default logs view in the application will be filtered by this query.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="servicesEntitiesAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="servicesEntities"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Services & entities
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="servicesEntitiesCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Select services & entities to include in this application
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearServicesEntitiesButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="servicesEntities"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Services & entities
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select services and entities"
+                            class="euiComboBox"
+                            data-test-subj="servicesEntitiesComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select services and entities
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                        >
+                          <span
+                            class="panel-title"
+                          >
+                            Service map
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <fieldset
+                          class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                        >
+                          <legend
+                            class="euiScreenReaderOnly"
+                          />
+                          <div
+                            class="euiButtonGroup__buttons"
+                          >
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Latency"
+                                  title="Latency"
+                                >
+                                  <input
+                                    checked=""
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="latency"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Latency
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Error rate"
+                                  title="Error rate"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="error_rate"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Error rate
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Throughput"
+                                  title="Throughput"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="throughput"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Throughput
+                                </span>
+                              </span>
+                            </label>
+                          </div>
+                        </fieldset>
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                        />
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              Focus on
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldSearch"
+                                  placeholder="Service name"
+                                  type="search"
+                                  value=""
+                                />
+                                <div
+                                  class="euiFormControlLayoutIcons"
+                                >
+                                  <span
+                                    class="euiFormControlLayoutCustomIcon"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          style="min-height: 434px;"
+                        >
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion euiAccordion-isOpen"
+                data-test-subj="traceGroupsAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="traceGroups"
+                    aria-expanded="true"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Trace groups
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="traceGroupsCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="1"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              <span
+                                class="euiBadge__text"
+                              >
+                                1
+                              </span>
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Constrain your application to specific trace groups
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small"
+                      data-test-subj="clearTraceGroupsButton"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="traceGroups"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Trace Groups
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="random_html_id-help-0"
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select trace groups"
+                            class="euiComboBox"
+                            data-test-subj="traceGroupsComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <span
+                                    class="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                    title="test.auto"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        test.auto
+                                      </span>
+                                      <button
+                                        aria-label="Remove test.auto from selection in this group"
+                                        class="euiBadge__iconButton"
+                                        title="Remove test.auto from selection in this group"
+                                        type="button"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
+                                          focusable="false"
+                                          height="16"
+                                          role="img"
+                                          tabindex="-1"
+                                          viewBox="0 0 16 16"
+                                          width="16"
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </span>
+                                  </span>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            id="random_html_id-help-0"
+                          >
+                            Select one or multiple trace groups, or type a custom one
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow10"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <span
+                                class="panel-title"
+                              >
+                                Latency by trace group
+                              </span>
+                              <span
+                                class="panel-title-count"
+                              >
+                                 (0)
+                              </span>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-1"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  □
+                                </span>
+                                 &lt; 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-2"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  ■
+                                </span>
+                                 &gt;= 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full"
+                        />
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                        <div
+                          class="euiEmptyPrompt"
+                        >
+                          <h2
+                            class="euiTitle euiTitle--medium"
+                          >
+                            No matches
+                          </h2>
+                          <span
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--m"
+                            />
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="cancelCreateButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  data-test-subj="createButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  data-test-subj="createAndSetButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create and Set Availability
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Create Page clears service selected 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body
+    class=""
+  >
+    <div>
+      <div
+        style="max-width: 1130px;"
+      >
+        <div
+          class="euiPage euiPage--paddingMedium euiPage--grow"
+        >
+          <div
+            class="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <header
+              class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+            >
+              <div
+                class="euiPageHeaderSection"
+              >
+                <h1
+                  class="euiTitle euiTitle--large"
+                  data-test-subj="createPageTitle"
+                >
+                  Create
+                   application
+                </h1>
+              </div>
+            </header>
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="appInfo"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Application information
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <form
+                class="euiForm"
+              >
+                <div
+                  class="euiFormRow"
+                  data-test-subj="nameFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Name
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="name"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFormRow"
+                  data-test-subj="descriptionFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Description
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="description"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="composition"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Composition
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="logSourceAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="logSource"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Log source
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Configure your application base query
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearLogSourceButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="logSource"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiCallOut euiCallOut--primary euiCallOut--small"
+                              id="baseQueryCallout"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <div
+                                  class="euiTextColor euiTextColor--default"
+                                >
+                                  You can't change the base query after the application is created.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormRow"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                class="euiFormRow__labelWrapper"
+                              >
+                                <label
+                                  class="euiFormLabel euiFormRow__label"
+                                  for="random_html_id"
+                                >
+                                  Base Query
+                                </label>
+                              </div>
+                              <div
+                                class="euiFormRow__fieldWrapper"
+                              >
+                                <div
+                                  aria-describedby="random_html_id-help-0"
+                                  class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                  id="random_html_id"
+                                >
+                                  <div
+                                    aria-expanded="false"
+                                    aria-haspopup="listbox"
+                                    aria-labelledby="autocomplete-5-label"
+                                    class="aa-Autocomplete"
+                                    id="autocomplete-root"
+                                    role="combobox"
+                                  >
+                                    <textarea
+                                      aria-autocomplete="both"
+                                      aria-labelledby="autocomplete-5-label"
+                                      autocapitalize="off"
+                                      autocomplete="off"
+                                      autocorrect="off"
+                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      data-test-subj="searchAutocompleteTextArea"
+                                      enterkeyhint="search"
+                                      id="autocomplete-textarea"
+                                      maxlength="512"
+                                      placeholder="Enter PPL query"
+                                      rows="6"
+                                      spellcheck="false"
+                                      type="search"
+                                    />
+                                  </div>
+                                  <button
+                                    aria-label="pplLinkShowFlyout"
+                                    class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                    title="PPL"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        PPL
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiFormHelpText euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                >
+                                  The default logs view in the application will be filtered by this query.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion euiAccordion-isOpen"
+                  data-test-subj="servicesEntitiesAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="servicesEntities"
+                      aria-expanded="true"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Services & entities
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="servicesEntitiesCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="1"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                <span
+                                  class="euiBadge__text"
+                                >
+                                  1
+                                </span>
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Select services & entities to include in this application
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small"
+                        data-test-subj="clearServicesEntitiesButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="servicesEntities"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Services & entities
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select services and entities"
+                              class="euiComboBox"
+                              data-test-subj="servicesEntitiesComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <span
+                                      class="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                      title="User"
+                                    >
+                                      <span
+                                        class="euiBadge__content"
+                                      >
+                                        <span
+                                          class="euiBadge__text"
+                                        >
+                                          User
+                                        </span>
+                                        <button
+                                          aria-label="Remove User from selection in this group"
+                                          class="euiBadge__iconButton"
+                                          title="Remove User from selection in this group"
+                                          type="button"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
+                                            focusable="false"
+                                            height="16"
+                                            role="img"
+                                            tabindex="-1"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                            />
+                                          </svg>
+                                        </button>
+                                      </span>
+                                    </span>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiText euiText--medium"
+                          >
+                            <span
+                              class="panel-title"
+                            >
+                              Service map
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <fieldset
+                            class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                          >
+                            <legend
+                              class="euiScreenReaderOnly"
+                            />
+                            <div
+                              class="euiButtonGroup__buttons"
+                            >
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Latency"
+                                    title="Latency"
+                                  >
+                                    <input
+                                      checked=""
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="latency"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Latency
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Error rate"
+                                    title="Error rate"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="error_rate"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Error rate
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Throughput"
+                                    title="Throughput"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="throughput"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Throughput
+                                  </span>
+                                </span>
+                              </label>
+                            </div>
+                          </fieldset>
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                          />
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                Focus on
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <input
+                                    class="euiFieldSearch"
+                                    placeholder="Service name"
+                                    type="search"
+                                    value=""
+                                  />
+                                  <div
+                                    class="euiFormControlLayoutIcons"
+                                  >
+                                    <span
+                                      class="euiFormControlLayoutCustomIcon"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--l"
+                          />
+                          <div
+                            style="min-height: 434px;"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                            <div
+                              class="euiEmptyPrompt"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                              <span
+                                class="euiTextColor euiTextColor--subdued"
+                              >
+                                <div
+                                  class="euiSpacer euiSpacer--m"
+                                />
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  <div
+                                    class="euiText euiText--medium"
+                                  >
+                                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                  </div>
+                                </div>
+                              </span>
+                            </div>
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="traceGroupsAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="traceGroups"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Trace groups
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="traceGroupsCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Constrain your application to specific trace groups
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearTraceGroupsButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="traceGroups"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Trace Groups
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-describedby="random_html_id-help-0"
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select trace groups"
+                              class="euiComboBox"
+                              data-test-subj="traceGroupsComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select or add trace groups
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFormHelpText euiFormRow__text"
+                              id="random_html_id-help-0"
+                            >
+                              Select one or multiple trace groups, or type a custom one
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow10"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <span
+                                  class="panel-title"
+                                >
+                                  Latency by trace group
+                                </span>
+                                <span
+                                  class="panel-title-count"
+                                >
+                                   (0)
+                                </span>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-1"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    □
+                                  </span>
+                                   &lt; 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-2"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    ■
+                                  </span>
+                                   &gt;= 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full"
+                          />
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButton euiButton--primary"
+                  data-test-subj="cancelCreateButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Cancel
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    data-test-subj="createButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    data-test-subj="createAndSetButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create and Set Availability
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      style="max-width: 1130px;"
+    >
+      <div
+        class="euiPage euiPage--paddingMedium euiPage--grow"
+      >
+        <div
+          class="euiPageBody euiPageBody--borderRadiusNone"
+        >
+          <header
+            class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+          >
+            <div
+              class="euiPageHeaderSection"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+                data-test-subj="createPageTitle"
+              >
+                Create
+                 application
+              </h1>
+            </div>
+          </header>
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="appInfo"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Application information
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <form
+              class="euiForm"
+            >
+              <div
+                class="euiFormRow"
+                data-test-subj="nameFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Name
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="name"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFormRow"
+                data-test-subj="descriptionFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Description
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="description"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="composition"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Composition
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="logSourceAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="logSource"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Log source
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Configure your application base query
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearLogSourceButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="logSource"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                      >
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiCallOut euiCallOut--primary euiCallOut--small"
+                            id="baseQueryCallout"
+                          >
+                            <div
+                              class="euiText euiText--extraSmall"
+                            >
+                              <div
+                                class="euiTextColor euiTextColor--default"
+                              >
+                                You can't change the base query after the application is created.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiFormRow"
+                            id="random_html_id-row"
+                          >
+                            <div
+                              class="euiFormRow__labelWrapper"
+                            >
+                              <label
+                                class="euiFormLabel euiFormRow__label"
+                                for="random_html_id"
+                              >
+                                Base Query
+                              </label>
+                            </div>
+                            <div
+                              class="euiFormRow__fieldWrapper"
+                            >
+                              <div
+                                aria-describedby="random_html_id-help-0"
+                                class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                id="random_html_id"
+                              >
+                                <div
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  aria-labelledby="autocomplete-5-label"
+                                  class="aa-Autocomplete"
+                                  id="autocomplete-root"
+                                  role="combobox"
+                                >
+                                  <textarea
+                                    aria-autocomplete="both"
+                                    aria-labelledby="autocomplete-5-label"
+                                    autocapitalize="off"
+                                    autocomplete="off"
+                                    autocorrect="off"
+                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    data-test-subj="searchAutocompleteTextArea"
+                                    enterkeyhint="search"
+                                    id="autocomplete-textarea"
+                                    maxlength="512"
+                                    placeholder="Enter PPL query"
+                                    rows="6"
+                                    spellcheck="false"
+                                    type="search"
+                                  />
+                                </div>
+                                <button
+                                  aria-label="pplLinkShowFlyout"
+                                  class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                  title="PPL"
+                                >
+                                  <span
+                                    class="euiBadge__content"
+                                  >
+                                    <span
+                                      class="euiBadge__text"
+                                    >
+                                      PPL
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiFormHelpText euiFormRow__text"
+                                id="random_html_id-help-0"
+                              >
+                                The default logs view in the application will be filtered by this query.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion euiAccordion-isOpen"
+                data-test-subj="servicesEntitiesAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="servicesEntities"
+                    aria-expanded="true"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Services & entities
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="servicesEntitiesCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="1"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              <span
+                                class="euiBadge__text"
+                              >
+                                1
+                              </span>
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Select services & entities to include in this application
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small"
+                      data-test-subj="clearServicesEntitiesButton"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="servicesEntities"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Services & entities
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select services and entities"
+                            class="euiComboBox"
+                            data-test-subj="servicesEntitiesComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <span
+                                    class="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                    title="User"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        User
+                                      </span>
+                                      <button
+                                        aria-label="Remove User from selection in this group"
+                                        class="euiBadge__iconButton"
+                                        title="Remove User from selection in this group"
+                                        type="button"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
+                                          focusable="false"
+                                          height="16"
+                                          role="img"
+                                          tabindex="-1"
+                                          viewBox="0 0 16 16"
+                                          width="16"
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </span>
+                                  </span>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                        >
+                          <span
+                            class="panel-title"
+                          >
+                            Service map
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <fieldset
+                          class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                        >
+                          <legend
+                            class="euiScreenReaderOnly"
+                          />
+                          <div
+                            class="euiButtonGroup__buttons"
+                          >
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Latency"
+                                  title="Latency"
+                                >
+                                  <input
+                                    checked=""
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="latency"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Latency
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Error rate"
+                                  title="Error rate"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="error_rate"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Error rate
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Throughput"
+                                  title="Throughput"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="throughput"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Throughput
+                                </span>
+                              </span>
+                            </label>
+                          </div>
+                        </fieldset>
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                        />
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              Focus on
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldSearch"
+                                  placeholder="Service name"
+                                  type="search"
+                                  value=""
+                                />
+                                <div
+                                  class="euiFormControlLayoutIcons"
+                                >
+                                  <span
+                                    class="euiFormControlLayoutCustomIcon"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          style="min-height: 434px;"
+                        >
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="traceGroupsAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="traceGroups"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Trace groups
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="traceGroupsCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Constrain your application to specific trace groups
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearTraceGroupsButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="traceGroups"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Trace Groups
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="random_html_id-help-0"
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select trace groups"
+                            class="euiComboBox"
+                            data-test-subj="traceGroupsComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select or add trace groups
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            id="random_html_id-help-0"
+                          >
+                            Select one or multiple trace groups, or type a custom one
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow10"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <span
+                                class="panel-title"
+                              >
+                                Latency by trace group
+                              </span>
+                              <span
+                                class="panel-title-count"
+                              >
+                                 (0)
+                              </span>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-1"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  □
+                                </span>
+                                 &lt; 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-2"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  ■
+                                </span>
+                                 &gt;= 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full"
+                        />
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                        <div
+                          class="euiEmptyPrompt"
+                        >
+                          <h2
+                            class="euiTitle euiTitle--medium"
+                          >
+                            No matches
+                          </h2>
+                          <span
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--m"
+                            />
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="cancelCreateButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  data-test-subj="createButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  data-test-subj="createAndSetButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create and Set Availability
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Create Page renders empty 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        style="max-width: 1130px;"
+      >
+        <div
+          class="euiPage euiPage--paddingMedium euiPage--grow"
+        >
+          <div
+            class="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <header
+              class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+            >
+              <div
+                class="euiPageHeaderSection"
+              >
+                <h1
+                  class="euiTitle euiTitle--large"
+                  data-test-subj="createPageTitle"
+                >
+                  Create
+                   application
+                </h1>
+              </div>
+            </header>
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="appInfo"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Application information
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <form
+                class="euiForm"
+              >
+                <div
+                  class="euiFormRow"
+                  data-test-subj="nameFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Name
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="name"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFormRow"
+                  data-test-subj="descriptionFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Description
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="description"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="composition"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Composition
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="logSourceAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="logSource"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Log source
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Configure your application base query
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearLogSourceButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="logSource"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiCallOut euiCallOut--primary euiCallOut--small"
+                              id="baseQueryCallout"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <div
+                                  class="euiTextColor euiTextColor--default"
+                                >
+                                  You can't change the base query after the application is created.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormRow"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                class="euiFormRow__labelWrapper"
+                              >
+                                <label
+                                  class="euiFormLabel euiFormRow__label"
+                                  for="random_html_id"
+                                >
+                                  Base Query
+                                </label>
+                              </div>
+                              <div
+                                class="euiFormRow__fieldWrapper"
+                              >
+                                <div
+                                  aria-describedby="random_html_id-help-0"
+                                  class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                  id="random_html_id"
+                                >
+                                  <div
+                                    aria-expanded="false"
+                                    aria-haspopup="listbox"
+                                    aria-labelledby="autocomplete-0-label"
+                                    class="aa-Autocomplete"
+                                    id="autocomplete-root"
+                                    role="combobox"
+                                  >
+                                    <textarea
+                                      aria-autocomplete="both"
+                                      aria-labelledby="autocomplete-0-label"
+                                      autocapitalize="off"
+                                      autocomplete="off"
+                                      autocorrect="off"
+                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      data-test-subj="searchAutocompleteTextArea"
+                                      enterkeyhint="search"
+                                      id="autocomplete-textarea"
+                                      maxlength="512"
+                                      placeholder="Enter PPL query"
+                                      rows="6"
+                                      spellcheck="false"
+                                      type="search"
+                                    />
+                                  </div>
+                                  <button
+                                    aria-label="pplLinkShowFlyout"
+                                    class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                    title="PPL"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        PPL
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiFormHelpText euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                >
+                                  The default logs view in the application will be filtered by this query.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="servicesEntitiesAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="servicesEntities"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Services & entities
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="servicesEntitiesCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Select services & entities to include in this application
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearServicesEntitiesButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="servicesEntities"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Services & entities
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select services and entities"
+                              class="euiComboBox"
+                              data-test-subj="servicesEntitiesComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select services and entities
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiText euiText--medium"
+                          >
+                            <span
+                              class="panel-title"
+                            >
+                              Service map
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <fieldset
+                            class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                          >
+                            <legend
+                              class="euiScreenReaderOnly"
+                            />
+                            <div
+                              class="euiButtonGroup__buttons"
+                            >
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Latency"
+                                    title="Latency"
+                                  >
+                                    <input
+                                      checked=""
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="latency"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Latency
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Error rate"
+                                    title="Error rate"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="error_rate"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Error rate
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Throughput"
+                                    title="Throughput"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="throughput"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Throughput
+                                  </span>
+                                </span>
+                              </label>
+                            </div>
+                          </fieldset>
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                          />
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                Focus on
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <input
+                                    class="euiFieldSearch"
+                                    placeholder="Service name"
+                                    type="search"
+                                    value=""
+                                  />
+                                  <div
+                                    class="euiFormControlLayoutIcons"
+                                  >
+                                    <span
+                                      class="euiFormControlLayoutCustomIcon"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--l"
+                          />
+                          <div
+                            style="min-height: 434px;"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                            <div
+                              class="euiEmptyPrompt"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                              <span
+                                class="euiTextColor euiTextColor--subdued"
+                              >
+                                <div
+                                  class="euiSpacer euiSpacer--m"
+                                />
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  <div
+                                    class="euiText euiText--medium"
+                                  >
+                                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                  </div>
+                                </div>
+                              </span>
+                            </div>
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="traceGroupsAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="traceGroups"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Trace groups
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="traceGroupsCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Constrain your application to specific trace groups
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearTraceGroupsButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="traceGroups"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Trace Groups
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-describedby="random_html_id-help-0"
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select trace groups"
+                              class="euiComboBox"
+                              data-test-subj="traceGroupsComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select or add trace groups
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFormHelpText euiFormRow__text"
+                              id="random_html_id-help-0"
+                            >
+                              Select one or multiple trace groups, or type a custom one
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow10"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <span
+                                  class="panel-title"
+                                >
+                                  Latency by trace group
+                                </span>
+                                <span
+                                  class="panel-title-count"
+                                >
+                                   (0)
+                                </span>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-1"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    □
+                                  </span>
+                                   &lt; 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-2"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    ■
+                                  </span>
+                                   &gt;= 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full"
+                          />
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButton euiButton--primary"
+                  data-test-subj="cancelCreateButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Cancel
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    data-test-subj="createButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    data-test-subj="createAndSetButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create and Set Availability
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      style="max-width: 1130px;"
+    >
+      <div
+        class="euiPage euiPage--paddingMedium euiPage--grow"
+      >
+        <div
+          class="euiPageBody euiPageBody--borderRadiusNone"
+        >
+          <header
+            class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+          >
+            <div
+              class="euiPageHeaderSection"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+                data-test-subj="createPageTitle"
+              >
+                Create
+                 application
+              </h1>
+            </div>
+          </header>
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="appInfo"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Application information
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <form
+              class="euiForm"
+            >
+              <div
+                class="euiFormRow"
+                data-test-subj="nameFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Name
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="name"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFormRow"
+                data-test-subj="descriptionFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Description
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="description"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="composition"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Composition
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="logSourceAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="logSource"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Log source
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Configure your application base query
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearLogSourceButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="logSource"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                      >
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiCallOut euiCallOut--primary euiCallOut--small"
+                            id="baseQueryCallout"
+                          >
+                            <div
+                              class="euiText euiText--extraSmall"
+                            >
+                              <div
+                                class="euiTextColor euiTextColor--default"
+                              >
+                                You can't change the base query after the application is created.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiFormRow"
+                            id="random_html_id-row"
+                          >
+                            <div
+                              class="euiFormRow__labelWrapper"
+                            >
+                              <label
+                                class="euiFormLabel euiFormRow__label"
+                                for="random_html_id"
+                              >
+                                Base Query
+                              </label>
+                            </div>
+                            <div
+                              class="euiFormRow__fieldWrapper"
+                            >
+                              <div
+                                aria-describedby="random_html_id-help-0"
+                                class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                id="random_html_id"
+                              >
+                                <div
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  aria-labelledby="autocomplete-0-label"
+                                  class="aa-Autocomplete"
+                                  id="autocomplete-root"
+                                  role="combobox"
+                                >
+                                  <textarea
+                                    aria-autocomplete="both"
+                                    aria-labelledby="autocomplete-0-label"
+                                    autocapitalize="off"
+                                    autocomplete="off"
+                                    autocorrect="off"
+                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    data-test-subj="searchAutocompleteTextArea"
+                                    enterkeyhint="search"
+                                    id="autocomplete-textarea"
+                                    maxlength="512"
+                                    placeholder="Enter PPL query"
+                                    rows="6"
+                                    spellcheck="false"
+                                    type="search"
+                                  />
+                                </div>
+                                <button
+                                  aria-label="pplLinkShowFlyout"
+                                  class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                  title="PPL"
+                                >
+                                  <span
+                                    class="euiBadge__content"
+                                  >
+                                    <span
+                                      class="euiBadge__text"
+                                    >
+                                      PPL
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiFormHelpText euiFormRow__text"
+                                id="random_html_id-help-0"
+                              >
+                                The default logs view in the application will be filtered by this query.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="servicesEntitiesAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="servicesEntities"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Services & entities
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="servicesEntitiesCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Select services & entities to include in this application
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearServicesEntitiesButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="servicesEntities"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Services & entities
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select services and entities"
+                            class="euiComboBox"
+                            data-test-subj="servicesEntitiesComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select services and entities
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                        >
+                          <span
+                            class="panel-title"
+                          >
+                            Service map
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <fieldset
+                          class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                        >
+                          <legend
+                            class="euiScreenReaderOnly"
+                          />
+                          <div
+                            class="euiButtonGroup__buttons"
+                          >
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Latency"
+                                  title="Latency"
+                                >
+                                  <input
+                                    checked=""
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="latency"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Latency
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Error rate"
+                                  title="Error rate"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="error_rate"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Error rate
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Throughput"
+                                  title="Throughput"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="throughput"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Throughput
+                                </span>
+                              </span>
+                            </label>
+                          </div>
+                        </fieldset>
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                        />
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              Focus on
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldSearch"
+                                  placeholder="Service name"
+                                  type="search"
+                                  value=""
+                                />
+                                <div
+                                  class="euiFormControlLayoutIcons"
+                                >
+                                  <span
+                                    class="euiFormControlLayoutCustomIcon"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          style="min-height: 434px;"
+                        >
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="traceGroupsAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="traceGroups"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Trace groups
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="traceGroupsCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Constrain your application to specific trace groups
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearTraceGroupsButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="traceGroups"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Trace Groups
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="random_html_id-help-0"
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select trace groups"
+                            class="euiComboBox"
+                            data-test-subj="traceGroupsComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select or add trace groups
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            id="random_html_id-help-0"
+                          >
+                            Select one or multiple trace groups, or type a custom one
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow10"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <span
+                                class="panel-title"
+                              >
+                                Latency by trace group
+                              </span>
+                              <span
+                                class="panel-title-count"
+                              >
+                                 (0)
+                              </span>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-1"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  □
+                                </span>
+                                 &lt; 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-2"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  ■
+                                </span>
+                                 &gt;= 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full"
+                        />
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                        <div
+                          class="euiEmptyPrompt"
+                        >
+                          <h2
+                            class="euiTitle euiTitle--medium"
+                          >
+                            No matches
+                          </h2>
+                          <span
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--m"
+                            />
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="cancelCreateButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  data-test-subj="createButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  data-test-subj="createAndSetButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create and Set Availability
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Create Page renders with name and description 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        style="max-width: 1130px;"
+      >
+        <div
+          class="euiPage euiPage--paddingMedium euiPage--grow"
+        >
+          <div
+            class="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <header
+              class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+            >
+              <div
+                class="euiPageHeaderSection"
+              >
+                <h1
+                  class="euiTitle euiTitle--large"
+                  data-test-subj="createPageTitle"
+                >
+                  Create
+                   application
+                </h1>
+              </div>
+            </header>
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="appInfo"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Application information
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <form
+                class="euiForm"
+              >
+                <div
+                  class="euiFormRow"
+                  data-test-subj="nameFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Name
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="name"
+                          type="text"
+                          value="Chic Application"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFormRow"
+                  data-test-subj="descriptionFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Description
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="description"
+                          type="text"
+                          value="This is my chic application."
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="composition"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Composition
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="logSourceAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="logSource"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Log source
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Configure your application base query
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearLogSourceButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="logSource"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiCallOut euiCallOut--primary euiCallOut--small"
+                              id="baseQueryCallout"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <div
+                                  class="euiTextColor euiTextColor--default"
+                                >
+                                  You can't change the base query after the application is created.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormRow"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                class="euiFormRow__labelWrapper"
+                              >
+                                <label
+                                  class="euiFormLabel euiFormRow__label"
+                                  for="random_html_id"
+                                >
+                                  Base Query
+                                </label>
+                              </div>
+                              <div
+                                class="euiFormRow__fieldWrapper"
+                              >
+                                <div
+                                  aria-describedby="random_html_id-help-0"
+                                  class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                  id="random_html_id"
+                                >
+                                  <div
+                                    aria-expanded="false"
+                                    aria-haspopup="listbox"
+                                    aria-labelledby="autocomplete-1-label"
+                                    class="aa-Autocomplete"
+                                    id="autocomplete-root"
+                                    role="combobox"
+                                  >
+                                    <textarea
+                                      aria-autocomplete="both"
+                                      aria-labelledby="autocomplete-1-label"
+                                      autocapitalize="off"
+                                      autocomplete="off"
+                                      autocorrect="off"
+                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      data-test-subj="searchAutocompleteTextArea"
+                                      enterkeyhint="search"
+                                      id="autocomplete-textarea"
+                                      maxlength="512"
+                                      placeholder="Enter PPL query"
+                                      rows="6"
+                                      spellcheck="false"
+                                      type="search"
+                                    >
+                                      source = openserach_dashboard_sample_logs
+                                    </textarea>
+                                  </div>
+                                  <button
+                                    aria-label="pplLinkShowFlyout"
+                                    class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                    title="PPL"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        PPL
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiFormHelpText euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                >
+                                  The default logs view in the application will be filtered by this query.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="servicesEntitiesAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="servicesEntities"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Services & entities
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="servicesEntitiesCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Select services & entities to include in this application
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearServicesEntitiesButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="servicesEntities"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Services & entities
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select services and entities"
+                              class="euiComboBox"
+                              data-test-subj="servicesEntitiesComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select services and entities
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiText euiText--medium"
+                          >
+                            <span
+                              class="panel-title"
+                            >
+                              Service map
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <fieldset
+                            class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                          >
+                            <legend
+                              class="euiScreenReaderOnly"
+                            />
+                            <div
+                              class="euiButtonGroup__buttons"
+                            >
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Latency"
+                                    title="Latency"
+                                  >
+                                    <input
+                                      checked=""
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="latency"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Latency
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Error rate"
+                                    title="Error rate"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="error_rate"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Error rate
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Throughput"
+                                    title="Throughput"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="throughput"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Throughput
+                                  </span>
+                                </span>
+                              </label>
+                            </div>
+                          </fieldset>
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                          />
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                Focus on
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <input
+                                    class="euiFieldSearch"
+                                    placeholder="Service name"
+                                    type="search"
+                                    value=""
+                                  />
+                                  <div
+                                    class="euiFormControlLayoutIcons"
+                                  >
+                                    <span
+                                      class="euiFormControlLayoutCustomIcon"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--l"
+                          />
+                          <div
+                            style="min-height: 434px;"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                            <div
+                              class="euiEmptyPrompt"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                              <span
+                                class="euiTextColor euiTextColor--subdued"
+                              >
+                                <div
+                                  class="euiSpacer euiSpacer--m"
+                                />
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  <div
+                                    class="euiText euiText--medium"
+                                  >
+                                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                  </div>
+                                </div>
+                              </span>
+                            </div>
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="traceGroupsAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="traceGroups"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Trace groups
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="traceGroupsCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Constrain your application to specific trace groups
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearTraceGroupsButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="traceGroups"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Trace Groups
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-describedby="random_html_id-help-0"
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select trace groups"
+                              class="euiComboBox"
+                              data-test-subj="traceGroupsComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select or add trace groups
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFormHelpText euiFormRow__text"
+                              id="random_html_id-help-0"
+                            >
+                              Select one or multiple trace groups, or type a custom one
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow10"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <span
+                                  class="panel-title"
+                                >
+                                  Latency by trace group
+                                </span>
+                                <span
+                                  class="panel-title-count"
+                                >
+                                   (0)
+                                </span>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-1"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    □
+                                  </span>
+                                   &lt; 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-2"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    ■
+                                  </span>
+                                   &gt;= 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full"
+                          />
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButton euiButton--primary"
+                  data-test-subj="cancelCreateButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Cancel
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary"
+                    data-test-subj="createButton"
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton--fill"
+                    data-test-subj="createAndSetButton"
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create and Set Availability
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      style="max-width: 1130px;"
+    >
+      <div
+        class="euiPage euiPage--paddingMedium euiPage--grow"
+      >
+        <div
+          class="euiPageBody euiPageBody--borderRadiusNone"
+        >
+          <header
+            class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+          >
+            <div
+              class="euiPageHeaderSection"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+                data-test-subj="createPageTitle"
+              >
+                Create
+                 application
+              </h1>
+            </div>
+          </header>
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="appInfo"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Application information
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <form
+              class="euiForm"
+            >
+              <div
+                class="euiFormRow"
+                data-test-subj="nameFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Name
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="name"
+                        type="text"
+                        value="Chic Application"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFormRow"
+                data-test-subj="descriptionFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Description
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="description"
+                        type="text"
+                        value="This is my chic application."
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="composition"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Composition
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="logSourceAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="logSource"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Log source
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Configure your application base query
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearLogSourceButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="logSource"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                      >
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiCallOut euiCallOut--primary euiCallOut--small"
+                            id="baseQueryCallout"
+                          >
+                            <div
+                              class="euiText euiText--extraSmall"
+                            >
+                              <div
+                                class="euiTextColor euiTextColor--default"
+                              >
+                                You can't change the base query after the application is created.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiFormRow"
+                            id="random_html_id-row"
+                          >
+                            <div
+                              class="euiFormRow__labelWrapper"
+                            >
+                              <label
+                                class="euiFormLabel euiFormRow__label"
+                                for="random_html_id"
+                              >
+                                Base Query
+                              </label>
+                            </div>
+                            <div
+                              class="euiFormRow__fieldWrapper"
+                            >
+                              <div
+                                aria-describedby="random_html_id-help-0"
+                                class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                id="random_html_id"
+                              >
+                                <div
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  aria-labelledby="autocomplete-1-label"
+                                  class="aa-Autocomplete"
+                                  id="autocomplete-root"
+                                  role="combobox"
+                                >
+                                  <textarea
+                                    aria-autocomplete="both"
+                                    aria-labelledby="autocomplete-1-label"
+                                    autocapitalize="off"
+                                    autocomplete="off"
+                                    autocorrect="off"
+                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    data-test-subj="searchAutocompleteTextArea"
+                                    enterkeyhint="search"
+                                    id="autocomplete-textarea"
+                                    maxlength="512"
+                                    placeholder="Enter PPL query"
+                                    rows="6"
+                                    spellcheck="false"
+                                    type="search"
+                                  >
+                                    source = openserach_dashboard_sample_logs
+                                  </textarea>
+                                </div>
+                                <button
+                                  aria-label="pplLinkShowFlyout"
+                                  class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                  title="PPL"
+                                >
+                                  <span
+                                    class="euiBadge__content"
+                                  >
+                                    <span
+                                      class="euiBadge__text"
+                                    >
+                                      PPL
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiFormHelpText euiFormRow__text"
+                                id="random_html_id-help-0"
+                              >
+                                The default logs view in the application will be filtered by this query.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="servicesEntitiesAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="servicesEntities"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Services & entities
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="servicesEntitiesCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Select services & entities to include in this application
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearServicesEntitiesButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="servicesEntities"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Services & entities
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select services and entities"
+                            class="euiComboBox"
+                            data-test-subj="servicesEntitiesComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select services and entities
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                        >
+                          <span
+                            class="panel-title"
+                          >
+                            Service map
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <fieldset
+                          class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                        >
+                          <legend
+                            class="euiScreenReaderOnly"
+                          />
+                          <div
+                            class="euiButtonGroup__buttons"
+                          >
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Latency"
+                                  title="Latency"
+                                >
+                                  <input
+                                    checked=""
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="latency"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Latency
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Error rate"
+                                  title="Error rate"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="error_rate"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Error rate
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Throughput"
+                                  title="Throughput"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="throughput"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Throughput
+                                </span>
+                              </span>
+                            </label>
+                          </div>
+                        </fieldset>
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                        />
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              Focus on
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldSearch"
+                                  placeholder="Service name"
+                                  type="search"
+                                  value=""
+                                />
+                                <div
+                                  class="euiFormControlLayoutIcons"
+                                >
+                                  <span
+                                    class="euiFormControlLayoutCustomIcon"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          style="min-height: 434px;"
+                        >
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="traceGroupsAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="traceGroups"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Trace groups
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="traceGroupsCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Constrain your application to specific trace groups
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearTraceGroupsButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="traceGroups"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Trace Groups
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="random_html_id-help-0"
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select trace groups"
+                            class="euiComboBox"
+                            data-test-subj="traceGroupsComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select or add trace groups
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            id="random_html_id-help-0"
+                          >
+                            Select one or multiple trace groups, or type a custom one
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow10"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <span
+                                class="panel-title"
+                              >
+                                Latency by trace group
+                              </span>
+                              <span
+                                class="panel-title-count"
+                              >
+                                 (0)
+                              </span>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-1"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  □
+                                </span>
+                                 &lt; 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-2"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  ■
+                                </span>
+                                 &gt;= 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full"
+                        />
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                        <div
+                          class="euiEmptyPrompt"
+                        >
+                          <h2
+                            class="euiTitle euiTitle--medium"
+                          >
+                            No matches
+                          </h2>
+                          <span
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--m"
+                            />
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="cancelCreateButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary"
+                  data-test-subj="createButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill"
+                  data-test-subj="createAndSetButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create and Set Availability
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Create Page renders with one service selected 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body
+    class=""
+  >
+    <div>
+      <div
+        style="max-width: 1130px;"
+      >
+        <div
+          class="euiPage euiPage--paddingMedium euiPage--grow"
+        >
+          <div
+            class="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <header
+              class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+            >
+              <div
+                class="euiPageHeaderSection"
+              >
+                <h1
+                  class="euiTitle euiTitle--large"
+                  data-test-subj="createPageTitle"
+                >
+                  Create
+                   application
+                </h1>
+              </div>
+            </header>
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="appInfo"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Application information
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <form
+                class="euiForm"
+              >
+                <div
+                  class="euiFormRow"
+                  data-test-subj="nameFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Name
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="name"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFormRow"
+                  data-test-subj="descriptionFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Description
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="description"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="composition"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Composition
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="logSourceAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="logSource"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Log source
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Configure your application base query
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearLogSourceButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="logSource"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiCallOut euiCallOut--primary euiCallOut--small"
+                              id="baseQueryCallout"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <div
+                                  class="euiTextColor euiTextColor--default"
+                                >
+                                  You can't change the base query after the application is created.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormRow"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                class="euiFormRow__labelWrapper"
+                              >
+                                <label
+                                  class="euiFormLabel euiFormRow__label"
+                                  for="random_html_id"
+                                >
+                                  Base Query
+                                </label>
+                              </div>
+                              <div
+                                class="euiFormRow__fieldWrapper"
+                              >
+                                <div
+                                  aria-describedby="random_html_id-help-0"
+                                  class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                  id="random_html_id"
+                                >
+                                  <div
+                                    aria-expanded="false"
+                                    aria-haspopup="listbox"
+                                    aria-labelledby="autocomplete-4-label"
+                                    class="aa-Autocomplete"
+                                    id="autocomplete-root"
+                                    role="combobox"
+                                  >
+                                    <textarea
+                                      aria-autocomplete="both"
+                                      aria-labelledby="autocomplete-4-label"
+                                      autocapitalize="off"
+                                      autocomplete="off"
+                                      autocorrect="off"
+                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      data-test-subj="searchAutocompleteTextArea"
+                                      enterkeyhint="search"
+                                      id="autocomplete-textarea"
+                                      maxlength="512"
+                                      placeholder="Enter PPL query"
+                                      rows="6"
+                                      spellcheck="false"
+                                      type="search"
+                                    />
+                                  </div>
+                                  <button
+                                    aria-label="pplLinkShowFlyout"
+                                    class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                    title="PPL"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        PPL
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiFormHelpText euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                >
+                                  The default logs view in the application will be filtered by this query.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion euiAccordion-isOpen"
+                  data-test-subj="servicesEntitiesAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="servicesEntities"
+                      aria-expanded="true"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Services & entities
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="servicesEntitiesCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="1"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                <span
+                                  class="euiBadge__text"
+                                >
+                                  1
+                                </span>
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Select services & entities to include in this application
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small"
+                        data-test-subj="clearServicesEntitiesButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="servicesEntities"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Services & entities
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select services and entities"
+                              class="euiComboBox"
+                              data-test-subj="servicesEntitiesComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <span
+                                      class="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                      title="User"
+                                    >
+                                      <span
+                                        class="euiBadge__content"
+                                      >
+                                        <span
+                                          class="euiBadge__text"
+                                        >
+                                          User
+                                        </span>
+                                        <button
+                                          aria-label="Remove User from selection in this group"
+                                          class="euiBadge__iconButton"
+                                          title="Remove User from selection in this group"
+                                          type="button"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
+                                            focusable="false"
+                                            height="16"
+                                            role="img"
+                                            tabindex="-1"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                            />
+                                          </svg>
+                                        </button>
+                                      </span>
+                                    </span>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiText euiText--medium"
+                          >
+                            <span
+                              class="panel-title"
+                            >
+                              Service map
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <fieldset
+                            class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                          >
+                            <legend
+                              class="euiScreenReaderOnly"
+                            />
+                            <div
+                              class="euiButtonGroup__buttons"
+                            >
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Latency"
+                                    title="Latency"
+                                  >
+                                    <input
+                                      checked=""
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="latency"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Latency
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Error rate"
+                                    title="Error rate"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="error_rate"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Error rate
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Throughput"
+                                    title="Throughput"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="throughput"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Throughput
+                                  </span>
+                                </span>
+                              </label>
+                            </div>
+                          </fieldset>
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                          />
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                Focus on
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <input
+                                    class="euiFieldSearch"
+                                    placeholder="Service name"
+                                    type="search"
+                                    value=""
+                                  />
+                                  <div
+                                    class="euiFormControlLayoutIcons"
+                                  >
+                                    <span
+                                      class="euiFormControlLayoutCustomIcon"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--l"
+                          />
+                          <div
+                            style="min-height: 434px;"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                            <div
+                              class="euiEmptyPrompt"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                              <span
+                                class="euiTextColor euiTextColor--subdued"
+                              >
+                                <div
+                                  class="euiSpacer euiSpacer--m"
+                                />
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  <div
+                                    class="euiText euiText--medium"
+                                  >
+                                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                  </div>
+                                </div>
+                              </span>
+                            </div>
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="traceGroupsAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="traceGroups"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Trace groups
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="traceGroupsCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Constrain your application to specific trace groups
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearTraceGroupsButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="traceGroups"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Trace Groups
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-describedby="random_html_id-help-0"
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select trace groups"
+                              class="euiComboBox"
+                              data-test-subj="traceGroupsComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select or add trace groups
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFormHelpText euiFormRow__text"
+                              id="random_html_id-help-0"
+                            >
+                              Select one or multiple trace groups, or type a custom one
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow10"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <span
+                                  class="panel-title"
+                                >
+                                  Latency by trace group
+                                </span>
+                                <span
+                                  class="panel-title-count"
+                                >
+                                   (0)
+                                </span>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-1"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    □
+                                  </span>
+                                   &lt; 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-2"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    ■
+                                  </span>
+                                   &gt;= 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full"
+                          />
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButton euiButton--primary"
+                  data-test-subj="cancelCreateButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Cancel
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    data-test-subj="createButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    data-test-subj="createAndSetButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create and Set Availability
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      style="max-width: 1130px;"
+    >
+      <div
+        class="euiPage euiPage--paddingMedium euiPage--grow"
+      >
+        <div
+          class="euiPageBody euiPageBody--borderRadiusNone"
+        >
+          <header
+            class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+          >
+            <div
+              class="euiPageHeaderSection"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+                data-test-subj="createPageTitle"
+              >
+                Create
+                 application
+              </h1>
+            </div>
+          </header>
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="appInfo"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Application information
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <form
+              class="euiForm"
+            >
+              <div
+                class="euiFormRow"
+                data-test-subj="nameFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Name
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="name"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFormRow"
+                data-test-subj="descriptionFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Description
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="description"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="composition"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Composition
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="logSourceAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="logSource"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Log source
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Configure your application base query
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearLogSourceButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="logSource"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                      >
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiCallOut euiCallOut--primary euiCallOut--small"
+                            id="baseQueryCallout"
+                          >
+                            <div
+                              class="euiText euiText--extraSmall"
+                            >
+                              <div
+                                class="euiTextColor euiTextColor--default"
+                              >
+                                You can't change the base query after the application is created.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiFormRow"
+                            id="random_html_id-row"
+                          >
+                            <div
+                              class="euiFormRow__labelWrapper"
+                            >
+                              <label
+                                class="euiFormLabel euiFormRow__label"
+                                for="random_html_id"
+                              >
+                                Base Query
+                              </label>
+                            </div>
+                            <div
+                              class="euiFormRow__fieldWrapper"
+                            >
+                              <div
+                                aria-describedby="random_html_id-help-0"
+                                class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                id="random_html_id"
+                              >
+                                <div
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  aria-labelledby="autocomplete-4-label"
+                                  class="aa-Autocomplete"
+                                  id="autocomplete-root"
+                                  role="combobox"
+                                >
+                                  <textarea
+                                    aria-autocomplete="both"
+                                    aria-labelledby="autocomplete-4-label"
+                                    autocapitalize="off"
+                                    autocomplete="off"
+                                    autocorrect="off"
+                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    data-test-subj="searchAutocompleteTextArea"
+                                    enterkeyhint="search"
+                                    id="autocomplete-textarea"
+                                    maxlength="512"
+                                    placeholder="Enter PPL query"
+                                    rows="6"
+                                    spellcheck="false"
+                                    type="search"
+                                  />
+                                </div>
+                                <button
+                                  aria-label="pplLinkShowFlyout"
+                                  class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                  title="PPL"
+                                >
+                                  <span
+                                    class="euiBadge__content"
+                                  >
+                                    <span
+                                      class="euiBadge__text"
+                                    >
+                                      PPL
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiFormHelpText euiFormRow__text"
+                                id="random_html_id-help-0"
+                              >
+                                The default logs view in the application will be filtered by this query.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion euiAccordion-isOpen"
+                data-test-subj="servicesEntitiesAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="servicesEntities"
+                    aria-expanded="true"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Services & entities
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="servicesEntitiesCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="1"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              <span
+                                class="euiBadge__text"
+                              >
+                                1
+                              </span>
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Select services & entities to include in this application
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small"
+                      data-test-subj="clearServicesEntitiesButton"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="servicesEntities"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Services & entities
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select services and entities"
+                            class="euiComboBox"
+                            data-test-subj="servicesEntitiesComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <span
+                                    class="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                    title="User"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        User
+                                      </span>
+                                      <button
+                                        aria-label="Remove User from selection in this group"
+                                        class="euiBadge__iconButton"
+                                        title="Remove User from selection in this group"
+                                        type="button"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
+                                          focusable="false"
+                                          height="16"
+                                          role="img"
+                                          tabindex="-1"
+                                          viewBox="0 0 16 16"
+                                          width="16"
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </span>
+                                  </span>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                        >
+                          <span
+                            class="panel-title"
+                          >
+                            Service map
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <fieldset
+                          class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                        >
+                          <legend
+                            class="euiScreenReaderOnly"
+                          />
+                          <div
+                            class="euiButtonGroup__buttons"
+                          >
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Latency"
+                                  title="Latency"
+                                >
+                                  <input
+                                    checked=""
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="latency"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Latency
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Error rate"
+                                  title="Error rate"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="error_rate"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Error rate
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Throughput"
+                                  title="Throughput"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="throughput"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Throughput
+                                </span>
+                              </span>
+                            </label>
+                          </div>
+                        </fieldset>
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                        />
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              Focus on
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldSearch"
+                                  placeholder="Service name"
+                                  type="search"
+                                  value=""
+                                />
+                                <div
+                                  class="euiFormControlLayoutIcons"
+                                >
+                                  <span
+                                    class="euiFormControlLayoutCustomIcon"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          style="min-height: 434px;"
+                        >
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="traceGroupsAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="traceGroups"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Trace groups
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="traceGroupsCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Constrain your application to specific trace groups
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearTraceGroupsButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="traceGroups"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Trace Groups
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="random_html_id-help-0"
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select trace groups"
+                            class="euiComboBox"
+                            data-test-subj="traceGroupsComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select or add trace groups
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            id="random_html_id-help-0"
+                          >
+                            Select one or multiple trace groups, or type a custom one
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow10"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <span
+                                class="panel-title"
+                              >
+                                Latency by trace group
+                              </span>
+                              <span
+                                class="panel-title-count"
+                              >
+                                 (0)
+                              </span>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-1"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  □
+                                </span>
+                                 &lt; 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-2"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  ■
+                                </span>
+                                 &gt;= 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full"
+                        />
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                        <div
+                          class="euiEmptyPrompt"
+                        >
+                          <h2
+                            class="euiTitle euiTitle--medium"
+                          >
+                            No matches
+                          </h2>
+                          <span
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--m"
+                            />
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="cancelCreateButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  data-test-subj="createButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  data-test-subj="createAndSetButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create and Set Availability
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Create Page renders with one trace selected 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body
+    class=""
+  >
+    <div>
+      <div
+        style="max-width: 1130px;"
+      >
+        <div
+          class="euiPage euiPage--paddingMedium euiPage--grow"
+        >
+          <div
+            class="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <header
+              class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+            >
+              <div
+                class="euiPageHeaderSection"
+              >
+                <h1
+                  class="euiTitle euiTitle--large"
+                  data-test-subj="createPageTitle"
+                >
+                  Create
+                   application
+                </h1>
+              </div>
+            </header>
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="appInfo"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Application information
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <form
+                class="euiForm"
+              >
+                <div
+                  class="euiFormRow"
+                  data-test-subj="nameFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Name
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="name"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFormRow"
+                  data-test-subj="descriptionFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Description
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="description"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="composition"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Composition
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="logSourceAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="logSource"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Log source
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Configure your application base query
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearLogSourceButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="logSource"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiCallOut euiCallOut--primary euiCallOut--small"
+                              id="baseQueryCallout"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <div
+                                  class="euiTextColor euiTextColor--default"
+                                >
+                                  You can't change the base query after the application is created.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormRow"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                class="euiFormRow__labelWrapper"
+                              >
+                                <label
+                                  class="euiFormLabel euiFormRow__label"
+                                  for="random_html_id"
+                                >
+                                  Base Query
+                                </label>
+                              </div>
+                              <div
+                                class="euiFormRow__fieldWrapper"
+                              >
+                                <div
+                                  aria-describedby="random_html_id-help-0"
+                                  class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                  id="random_html_id"
+                                >
+                                  <div
+                                    aria-expanded="false"
+                                    aria-haspopup="listbox"
+                                    aria-labelledby="autocomplete-6-label"
+                                    class="aa-Autocomplete"
+                                    id="autocomplete-root"
+                                    role="combobox"
+                                  >
+                                    <textarea
+                                      aria-autocomplete="both"
+                                      aria-labelledby="autocomplete-6-label"
+                                      autocapitalize="off"
+                                      autocomplete="off"
+                                      autocorrect="off"
+                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      data-test-subj="searchAutocompleteTextArea"
+                                      enterkeyhint="search"
+                                      id="autocomplete-textarea"
+                                      maxlength="512"
+                                      placeholder="Enter PPL query"
+                                      rows="6"
+                                      spellcheck="false"
+                                      type="search"
+                                    />
+                                  </div>
+                                  <button
+                                    aria-label="pplLinkShowFlyout"
+                                    class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                    title="PPL"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        PPL
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiFormHelpText euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                >
+                                  The default logs view in the application will be filtered by this query.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="servicesEntitiesAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="servicesEntities"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Services & entities
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="servicesEntitiesCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Select services & entities to include in this application
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearServicesEntitiesButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="servicesEntities"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Services & entities
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select services and entities"
+                              class="euiComboBox"
+                              data-test-subj="servicesEntitiesComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select services and entities
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiText euiText--medium"
+                          >
+                            <span
+                              class="panel-title"
+                            >
+                              Service map
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <fieldset
+                            class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                          >
+                            <legend
+                              class="euiScreenReaderOnly"
+                            />
+                            <div
+                              class="euiButtonGroup__buttons"
+                            >
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Latency"
+                                    title="Latency"
+                                  >
+                                    <input
+                                      checked=""
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="latency"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Latency
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Error rate"
+                                    title="Error rate"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="error_rate"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Error rate
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Throughput"
+                                    title="Throughput"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="throughput"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Throughput
+                                  </span>
+                                </span>
+                              </label>
+                            </div>
+                          </fieldset>
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                          />
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                Focus on
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <input
+                                    class="euiFieldSearch"
+                                    placeholder="Service name"
+                                    type="search"
+                                    value=""
+                                  />
+                                  <div
+                                    class="euiFormControlLayoutIcons"
+                                  >
+                                    <span
+                                      class="euiFormControlLayoutCustomIcon"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--l"
+                          />
+                          <div
+                            style="min-height: 434px;"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                            <div
+                              class="euiEmptyPrompt"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                              <span
+                                class="euiTextColor euiTextColor--subdued"
+                              >
+                                <div
+                                  class="euiSpacer euiSpacer--m"
+                                />
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  <div
+                                    class="euiText euiText--medium"
+                                  >
+                                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                  </div>
+                                </div>
+                              </span>
+                            </div>
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion euiAccordion-isOpen"
+                  data-test-subj="traceGroupsAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="traceGroups"
+                      aria-expanded="true"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Trace groups
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="traceGroupsCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="1"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                <span
+                                  class="euiBadge__text"
+                                >
+                                  1
+                                </span>
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Constrain your application to specific trace groups
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small"
+                        data-test-subj="clearTraceGroupsButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="traceGroups"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Trace Groups
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-describedby="random_html_id-help-0"
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select trace groups"
+                              class="euiComboBox"
+                              data-test-subj="traceGroupsComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <span
+                                      class="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                      title="test.auto"
+                                    >
+                                      <span
+                                        class="euiBadge__content"
+                                      >
+                                        <span
+                                          class="euiBadge__text"
+                                        >
+                                          test.auto
+                                        </span>
+                                        <button
+                                          aria-label="Remove test.auto from selection in this group"
+                                          class="euiBadge__iconButton"
+                                          title="Remove test.auto from selection in this group"
+                                          type="button"
+                                        >
+                                          <svg
+                                            aria-hidden="true"
+                                            class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
+                                            focusable="false"
+                                            height="16"
+                                            role="img"
+                                            tabindex="-1"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                            />
+                                          </svg>
+                                        </button>
+                                      </span>
+                                    </span>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFormHelpText euiFormRow__text"
+                              id="random_html_id-help-0"
+                            >
+                              Select one or multiple trace groups, or type a custom one
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow10"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <span
+                                  class="panel-title"
+                                >
+                                  Latency by trace group
+                                </span>
+                                <span
+                                  class="panel-title-count"
+                                >
+                                   (0)
+                                </span>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-1"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    □
+                                  </span>
+                                   &lt; 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-2"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    ■
+                                  </span>
+                                   &gt;= 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full"
+                          />
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButton euiButton--primary"
+                  data-test-subj="cancelCreateButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Cancel
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    data-test-subj="createButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    data-test-subj="createAndSetButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create and Set Availability
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      style="max-width: 1130px;"
+    >
+      <div
+        class="euiPage euiPage--paddingMedium euiPage--grow"
+      >
+        <div
+          class="euiPageBody euiPageBody--borderRadiusNone"
+        >
+          <header
+            class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+          >
+            <div
+              class="euiPageHeaderSection"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+                data-test-subj="createPageTitle"
+              >
+                Create
+                 application
+              </h1>
+            </div>
+          </header>
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="appInfo"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Application information
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <form
+              class="euiForm"
+            >
+              <div
+                class="euiFormRow"
+                data-test-subj="nameFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Name
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="name"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFormRow"
+                data-test-subj="descriptionFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Description
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="description"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="composition"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Composition
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="logSourceAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="logSource"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Log source
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Configure your application base query
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearLogSourceButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="logSource"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                      >
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiCallOut euiCallOut--primary euiCallOut--small"
+                            id="baseQueryCallout"
+                          >
+                            <div
+                              class="euiText euiText--extraSmall"
+                            >
+                              <div
+                                class="euiTextColor euiTextColor--default"
+                              >
+                                You can't change the base query after the application is created.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiFormRow"
+                            id="random_html_id-row"
+                          >
+                            <div
+                              class="euiFormRow__labelWrapper"
+                            >
+                              <label
+                                class="euiFormLabel euiFormRow__label"
+                                for="random_html_id"
+                              >
+                                Base Query
+                              </label>
+                            </div>
+                            <div
+                              class="euiFormRow__fieldWrapper"
+                            >
+                              <div
+                                aria-describedby="random_html_id-help-0"
+                                class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                id="random_html_id"
+                              >
+                                <div
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  aria-labelledby="autocomplete-6-label"
+                                  class="aa-Autocomplete"
+                                  id="autocomplete-root"
+                                  role="combobox"
+                                >
+                                  <textarea
+                                    aria-autocomplete="both"
+                                    aria-labelledby="autocomplete-6-label"
+                                    autocapitalize="off"
+                                    autocomplete="off"
+                                    autocorrect="off"
+                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    data-test-subj="searchAutocompleteTextArea"
+                                    enterkeyhint="search"
+                                    id="autocomplete-textarea"
+                                    maxlength="512"
+                                    placeholder="Enter PPL query"
+                                    rows="6"
+                                    spellcheck="false"
+                                    type="search"
+                                  />
+                                </div>
+                                <button
+                                  aria-label="pplLinkShowFlyout"
+                                  class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                  title="PPL"
+                                >
+                                  <span
+                                    class="euiBadge__content"
+                                  >
+                                    <span
+                                      class="euiBadge__text"
+                                    >
+                                      PPL
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiFormHelpText euiFormRow__text"
+                                id="random_html_id-help-0"
+                              >
+                                The default logs view in the application will be filtered by this query.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="servicesEntitiesAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="servicesEntities"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Services & entities
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="servicesEntitiesCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Select services & entities to include in this application
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearServicesEntitiesButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="servicesEntities"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Services & entities
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select services and entities"
+                            class="euiComboBox"
+                            data-test-subj="servicesEntitiesComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select services and entities
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                        >
+                          <span
+                            class="panel-title"
+                          >
+                            Service map
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <fieldset
+                          class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                        >
+                          <legend
+                            class="euiScreenReaderOnly"
+                          />
+                          <div
+                            class="euiButtonGroup__buttons"
+                          >
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Latency"
+                                  title="Latency"
+                                >
+                                  <input
+                                    checked=""
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="latency"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Latency
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Error rate"
+                                  title="Error rate"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="error_rate"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Error rate
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Throughput"
+                                  title="Throughput"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="throughput"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Throughput
+                                </span>
+                              </span>
+                            </label>
+                          </div>
+                        </fieldset>
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                        />
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              Focus on
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldSearch"
+                                  placeholder="Service name"
+                                  type="search"
+                                  value=""
+                                />
+                                <div
+                                  class="euiFormControlLayoutIcons"
+                                >
+                                  <span
+                                    class="euiFormControlLayoutCustomIcon"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          style="min-height: 434px;"
+                        >
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion euiAccordion-isOpen"
+                data-test-subj="traceGroupsAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="traceGroups"
+                    aria-expanded="true"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Trace groups
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="traceGroupsCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="1"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              <span
+                                class="euiBadge__text"
+                              >
+                                1
+                              </span>
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Constrain your application to specific trace groups
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small"
+                      data-test-subj="clearTraceGroupsButton"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="traceGroups"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Trace Groups
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="random_html_id-help-0"
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select trace groups"
+                            class="euiComboBox"
+                            data-test-subj="traceGroupsComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <span
+                                    class="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                    title="test.auto"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        test.auto
+                                      </span>
+                                      <button
+                                        aria-label="Remove test.auto from selection in this group"
+                                        class="euiBadge__iconButton"
+                                        title="Remove test.auto from selection in this group"
+                                        type="button"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="euiIcon euiIcon--small euiIcon--inherit euiBadge__icon"
+                                          focusable="false"
+                                          height="16"
+                                          role="img"
+                                          tabindex="-1"
+                                          viewBox="0 0 16 16"
+                                          width="16"
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </span>
+                                  </span>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            id="random_html_id-help-0"
+                          >
+                            Select one or multiple trace groups, or type a custom one
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow10"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <span
+                                class="panel-title"
+                              >
+                                Latency by trace group
+                              </span>
+                              <span
+                                class="panel-title-count"
+                              >
+                                 (0)
+                              </span>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-1"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  □
+                                </span>
+                                 &lt; 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-2"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  ■
+                                </span>
+                                 &gt;= 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full"
+                        />
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                        <div
+                          class="euiEmptyPrompt"
+                        >
+                          <h2
+                            class="euiTitle euiTitle--medium"
+                          >
+                            No matches
+                          </h2>
+                          <span
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--m"
+                            />
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="cancelCreateButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  data-test-subj="createButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  data-test-subj="createAndSetButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create and Set Availability
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Create Page renders with query 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body
+    class="euiBody-hasOverlayMask"
+  >
+    <div
+      aria-hidden="true"
+      data-aria-hidden="true"
+    >
+      <div
+        style="max-width: 1130px;"
+      >
+        <div
+          class="euiPage euiPage--paddingMedium euiPage--grow"
+        >
+          <div
+            class="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <header
+              class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+            >
+              <div
+                class="euiPageHeaderSection"
+              >
+                <h1
+                  class="euiTitle euiTitle--large"
+                  data-test-subj="createPageTitle"
+                >
+                  Create
+                   application
+                </h1>
+              </div>
+            </header>
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="appInfo"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Application information
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <form
+                class="euiForm"
+              >
+                <div
+                  class="euiFormRow"
+                  data-test-subj="nameFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Name
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="name"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="euiFormRow"
+                  data-test-subj="descriptionFormRow"
+                  id="random_html_id-row"
+                >
+                  <div
+                    class="euiFormRow__labelWrapper"
+                  >
+                    <label
+                      class="euiFormLabel euiFormRow__label"
+                      for="random_html_id"
+                    >
+                      Description
+                    </label>
+                  </div>
+                  <div
+                    class="euiFormRow__fieldWrapper"
+                  >
+                    <div
+                      class="euiFormControlLayout"
+                    >
+                      <div
+                        class="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          class="euiFieldText"
+                          id="random_html_id"
+                          name="description"
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </form>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+              id="composition"
+              role="main"
+            >
+              <div
+                class="euiPageContentHeader euiPageContentHeader--responsive"
+              >
+                <div
+                  class="euiPageContentHeaderSection"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Composition
+                  </h2>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion euiAccordion-isOpen"
+                  data-test-subj="logSourceAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="logSource"
+                      aria-expanded="true"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Log source
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Configure your application base query
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small"
+                        data-test-subj="clearLogSourceButton"
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="logSource"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiCallOut euiCallOut--primary euiCallOut--small"
+                              id="baseQueryCallout"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <div
+                                  class="euiTextColor euiTextColor--default"
+                                >
+                                  You can't change the base query after the application is created.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormRow"
+                              id="random_html_id-row"
+                            >
+                              <div
+                                class="euiFormRow__labelWrapper"
+                              >
+                                <label
+                                  class="euiFormLabel euiFormRow__label"
+                                  for="random_html_id"
+                                >
+                                  Base Query
+                                </label>
+                              </div>
+                              <div
+                                class="euiFormRow__fieldWrapper"
+                              >
+                                <div
+                                  aria-describedby="random_html_id-help-0"
+                                  class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                  id="random_html_id"
+                                >
+                                  <div
+                                    aria-expanded="false"
+                                    aria-haspopup="listbox"
+                                    aria-labelledby="autocomplete-2-label"
+                                    class="aa-Autocomplete"
+                                    id="autocomplete-root"
+                                    role="combobox"
+                                  >
+                                    <textarea
+                                      aria-autocomplete="both"
+                                      aria-labelledby="autocomplete-2-label"
+                                      autocapitalize="off"
+                                      autocomplete="off"
+                                      autocorrect="off"
+                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      data-test-subj="searchAutocompleteTextArea"
+                                      enterkeyhint="search"
+                                      id="autocomplete-textarea"
+                                      maxlength="512"
+                                      placeholder="Enter PPL query"
+                                      rows="6"
+                                      spellcheck="false"
+                                      type="search"
+                                    >
+                                      source = openserach_dashboard_sample_logs
+                                    </textarea>
+                                  </div>
+                                  <button
+                                    aria-label="pplLinkShowFlyout"
+                                    class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                    title="PPL"
+                                  >
+                                    <span
+                                      class="euiBadge__content"
+                                    >
+                                      <span
+                                        class="euiBadge__text"
+                                      >
+                                        PPL
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiFormHelpText euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                >
+                                  The default logs view in the application will be filtered by this query.
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="servicesEntitiesAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="servicesEntities"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Services & entities
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="servicesEntitiesCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Select services & entities to include in this application
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearServicesEntitiesButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="servicesEntities"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Services & entities
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select services and entities"
+                              class="euiComboBox"
+                              data-test-subj="servicesEntitiesComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select services and entities
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiText euiText--medium"
+                          >
+                            <span
+                              class="panel-title"
+                            >
+                              Service map
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <fieldset
+                            class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                          >
+                            <legend
+                              class="euiScreenReaderOnly"
+                            />
+                            <div
+                              class="euiButtonGroup__buttons"
+                            >
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Latency"
+                                    title="Latency"
+                                  >
+                                    <input
+                                      checked=""
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="latency"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Latency
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Error rate"
+                                    title="Error rate"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="error_rate"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Error rate
+                                  </span>
+                                </span>
+                              </label>
+                              <label
+                                class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                for="random_html_id"
+                              >
+                                <span
+                                  class="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    class="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Throughput"
+                                    title="Throughput"
+                                  >
+                                    <input
+                                      class="euiScreenReaderOnly"
+                                      data-test-subj="throughput"
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      type="radio"
+                                      value=""
+                                    />
+                                    Throughput
+                                  </span>
+                                </span>
+                              </label>
+                            </div>
+                          </fieldset>
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                          />
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                Focus on
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <input
+                                    class="euiFieldSearch"
+                                    placeholder="Service name"
+                                    type="search"
+                                    value=""
+                                  />
+                                  <div
+                                    class="euiFormControlLayoutIcons"
+                                  >
+                                    <span
+                                      class="euiFormControlLayoutCustomIcon"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--l"
+                          />
+                          <div
+                            style="min-height: 434px;"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                            <div
+                              class="euiEmptyPrompt"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                              <span
+                                class="euiTextColor euiTextColor--subdued"
+                              >
+                                <div
+                                  class="euiSpacer euiSpacer--m"
+                                />
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  <div
+                                    class="euiText euiText--medium"
+                                  >
+                                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                  </div>
+                                </div>
+                              </span>
+                            </div>
+                            <div
+                              class="euiSpacer euiSpacer--s"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <hr
+                class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+              />
+              <div>
+                <div
+                  class="euiAccordion"
+                  data-test-subj="traceGroupsAccordion"
+                >
+                  <div
+                    class="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="traceGroups"
+                      aria-expanded="false"
+                      class="euiAccordion__button"
+                      id="random_html_id"
+                      type="button"
+                    >
+                      <span
+                        class="euiAccordion__iconWrapper"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiAccordion__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                            fill-rule="nonzero"
+                          />
+                        </svg>
+                      </span>
+                      <span
+                        class="euiIEFlexWrapFix"
+                      >
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <h3>
+                            Trace groups
+                             
+                            <span
+                              class="euiBadge euiBadge--iconLeft"
+                              data-test-subj="traceGroupsCountBadge"
+                              style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                              title="0"
+                            >
+                              <span
+                                class="euiBadge__content"
+                              >
+                                0
+                              </span>
+                            </span>
+                          </h3>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--s"
+                        />
+                        <div
+                          class="euiText euiText--small"
+                        >
+                          <div
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            Constrain your application to specific trace groups
+                          </div>
+                        </div>
+                      </span>
+                    </button>
+                    <div
+                      class="euiAccordion__optionalAction"
+                    >
+                      <button
+                        class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                        data-test-subj="clearTraceGroupsButton"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            class="euiButton__text"
+                          >
+                            Clear all
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    class="euiAccordion__childWrapper"
+                    id="traceGroups"
+                    role="region"
+                    tabindex="-1"
+                  >
+                    <div>
+                      <div
+                        class="euiAccordion__padding--l"
+                      >
+                        <div
+                          class="euiFormRow"
+                          id="random_html_id-row"
+                        >
+                          <div
+                            class="euiFormRow__labelWrapper"
+                          >
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="random_html_id"
+                            >
+                              Trace Groups
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
+                            <div
+                              aria-describedby="random_html_id-help-0"
+                              aria-expanded="false"
+                              aria-haspopup="listbox"
+                              aria-label="Select trace groups"
+                              class="euiComboBox"
+                              data-test-subj="traceGroupsComboBox"
+                              role="combobox"
+                            >
+                              <div
+                                class="euiFormControlLayout"
+                              >
+                                <div
+                                  class="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    class="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    tabindex="-1"
+                                  >
+                                    <p
+                                      class="euiComboBoxPlaceholder"
+                                    >
+                                      Select or add trace groups
+                                    </p>
+                                    <div
+                                      class="euiComboBox__input"
+                                      style="font-size: 14px; display: inline-block;"
+                                    >
+                                      <input
+                                        aria-controls=""
+                                        data-test-subj="comboBoxSearchInput"
+                                        id="random_html_id"
+                                        role="textbox"
+                                        style="box-sizing: content-box; width: 2px;"
+                                        value=""
+                                      />
+                                      <div
+                                        style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                          fill-rule="non-zero"
+                                        />
+                                      </svg>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFormHelpText euiFormRow__text"
+                              id="random_html_id-help-0"
+                            >
+                              Select one or multiple trace groups, or type a custom one
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                        >
+                          <div
+                            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow10"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <span
+                                  class="panel-title"
+                                >
+                                  Latency by trace group
+                                </span>
+                                <span
+                                  class="panel-title-count"
+                                >
+                                   (0)
+                                </span>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-1"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    □
+                                  </span>
+                                   &lt; 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <button
+                                class="euiLink euiLink--primary"
+                                data-test-subj="dashboard-table-percentile-button-2"
+                                type="button"
+                              >
+                                <div
+                                  class="euiText euiText--extraSmall"
+                                >
+                                  <span
+                                    style="color: rgb(149, 122, 201);"
+                                  >
+                                    ■
+                                  </span>
+                                   &gt;= 95 percentile
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              class="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--m"
+                          />
+                          <hr
+                            class="euiHorizontalRule euiHorizontalRule--full"
+                          />
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--xl"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiSpacer euiSpacer--l"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  class="euiButton euiButton--primary"
+                  data-test-subj="cancelCreateButton"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Cancel
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    data-test-subj="createButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <span
+                  class="euiToolTipAnchor"
+                >
+                  <button
+                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    data-test-subj="createAndSetButton"
+                    disabled=""
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Create and Set Availability
+                      </span>
+                    </span>
+                  </button>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      class="euiOverlayMask euiOverlayMask--aboveHeader"
+      data-aria-hidden="true"
+    />
+    <div
+      class="euiOverlayMask euiOverlayMask--aboveHeader"
+    >
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <div
+          class="euiModal euiModal--maxWidth-default euiModal--confirmation"
+          tabindex="0"
+        >
+          <button
+            aria-label="Closes this modal window"
+            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </button>
+          <div
+            class="euiModal__flex"
+          >
+            <div
+              class="euiModalHeader"
+            >
+              <div
+                class="euiModalHeader__title"
+                data-test-subj="confirmModalTitleText"
+              >
+                Clear log source?
+              </div>
+            </div>
+            <div
+              class="euiModalBody"
+            >
+              <div
+                class="euiModalBody__overflow"
+              >
+                <div
+                  class="euiText euiText--medium"
+                  data-test-subj="confirmModalBodyText"
+                >
+                  <p>
+                    This will clear all information in log source configuration.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiModalFooter"
+            >
+              <button
+                class="euiButtonEmpty euiButtonEmpty--primary"
+                data-test-subj="confirmModalCancelButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButtonEmpty__content"
+                >
+                  <span
+                    class="euiButtonEmpty__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+              <button
+                class="euiButton euiButton--danger euiButton--fill"
+                data-test-subj="confirmModalConfirmButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Clear
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+    </div>
+  </body>,
+  "container": <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+  >
+    <div
+      style="max-width: 1130px;"
+    >
+      <div
+        class="euiPage euiPage--paddingMedium euiPage--grow"
+      >
+        <div
+          class="euiPageBody euiPageBody--borderRadiusNone"
+        >
+          <header
+            class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+          >
+            <div
+              class="euiPageHeaderSection"
+            >
+              <h1
+                class="euiTitle euiTitle--large"
+                data-test-subj="createPageTitle"
+              >
+                Create
+                 application
+              </h1>
+            </div>
+          </header>
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="appInfo"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Application information
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <form
+              class="euiForm"
+            >
+              <div
+                class="euiFormRow"
+                data-test-subj="nameFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Name
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="name"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFormRow"
+                data-test-subj="descriptionFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  class="euiFormRow__labelWrapper"
+                >
+                  <label
+                    class="euiFormLabel euiFormRow__label"
+                    for="random_html_id"
+                  >
+                    Description
+                  </label>
+                </div>
+                <div
+                  class="euiFormRow__fieldWrapper"
+                >
+                  <div
+                    class="euiFormControlLayout"
+                  >
+                    <div
+                      class="euiFormControlLayout__childrenWrapper"
+                    >
+                      <input
+                        class="euiFieldText"
+                        id="random_html_id"
+                        name="description"
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+            id="composition"
+            role="main"
+          >
+            <div
+              class="euiPageContentHeader euiPageContentHeader--responsive"
+            >
+              <div
+                class="euiPageContentHeaderSection"
+              >
+                <h2
+                  class="euiTitle euiTitle--medium"
+                >
+                  Composition
+                </h2>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion euiAccordion-isOpen"
+                data-test-subj="logSourceAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="logSource"
+                    aria-expanded="true"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon euiAccordion__icon-isOpen"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Log source
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Configure your application base query
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small"
+                      data-test-subj="clearLogSourceButton"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="logSource"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                      >
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiCallOut euiCallOut--primary euiCallOut--small"
+                            id="baseQueryCallout"
+                          >
+                            <div
+                              class="euiText euiText--extraSmall"
+                            >
+                              <div
+                                class="euiTextColor euiTextColor--default"
+                              >
+                                You can't change the base query after the application is created.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlexItem"
+                        >
+                          <div
+                            class="euiFormRow"
+                            id="random_html_id-row"
+                          >
+                            <div
+                              class="euiFormRow__labelWrapper"
+                            >
+                              <label
+                                class="euiFormLabel euiFormRow__label"
+                                for="random_html_id"
+                              >
+                                Base Query
+                              </label>
+                            </div>
+                            <div
+                              class="euiFormRow__fieldWrapper"
+                            >
+                              <div
+                                aria-describedby="random_html_id-help-0"
+                                class="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                id="random_html_id"
+                              >
+                                <div
+                                  aria-expanded="false"
+                                  aria-haspopup="listbox"
+                                  aria-labelledby="autocomplete-2-label"
+                                  class="aa-Autocomplete"
+                                  id="autocomplete-root"
+                                  role="combobox"
+                                >
+                                  <textarea
+                                    aria-autocomplete="both"
+                                    aria-labelledby="autocomplete-2-label"
+                                    autocapitalize="off"
+                                    autocomplete="off"
+                                    autocorrect="off"
+                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    data-test-subj="searchAutocompleteTextArea"
+                                    enterkeyhint="search"
+                                    id="autocomplete-textarea"
+                                    maxlength="512"
+                                    placeholder="Enter PPL query"
+                                    rows="6"
+                                    spellcheck="false"
+                                    type="search"
+                                  >
+                                    source = openserach_dashboard_sample_logs
+                                  </textarea>
+                                </div>
+                                <button
+                                  aria-label="pplLinkShowFlyout"
+                                  class="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                  title="PPL"
+                                >
+                                  <span
+                                    class="euiBadge__content"
+                                  >
+                                    <span
+                                      class="euiBadge__text"
+                                    >
+                                      PPL
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiFormHelpText euiFormRow__text"
+                                id="random_html_id-help-0"
+                              >
+                                The default logs view in the application will be filtered by this query.
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="servicesEntitiesAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="servicesEntities"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Services & entities
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="servicesEntitiesCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Select services & entities to include in this application
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearServicesEntitiesButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="servicesEntities"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Services & entities
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select services and entities"
+                            class="euiComboBox"
+                            data-test-subj="servicesEntitiesComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select services and entities
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiText euiText--medium"
+                        >
+                          <span
+                            class="panel-title"
+                          >
+                            Service map
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <fieldset
+                          class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                        >
+                          <legend
+                            class="euiScreenReaderOnly"
+                          />
+                          <div
+                            class="euiButtonGroup__buttons"
+                          >
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Latency"
+                                  title="Latency"
+                                >
+                                  <input
+                                    checked=""
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="latency"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Latency
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Error rate"
+                                  title="Error rate"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="error_rate"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Error rate
+                                </span>
+                              </span>
+                            </label>
+                            <label
+                              class="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              for="random_html_id"
+                            >
+                              <span
+                                class="euiButtonContent euiButton__content"
+                              >
+                                <span
+                                  class="euiButton__text euiButtonGroupButton__textShift"
+                                  data-text="Throughput"
+                                  title="Throughput"
+                                >
+                                  <input
+                                    class="euiScreenReaderOnly"
+                                    data-test-subj="throughput"
+                                    id="random_html_id"
+                                    name="random_html_id"
+                                    type="radio"
+                                    value=""
+                                  />
+                                  Throughput
+                                </span>
+                              </span>
+                            </label>
+                          </div>
+                        </fieldset>
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                        />
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              Focus on
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <input
+                                  class="euiFieldSearch"
+                                  placeholder="Service name"
+                                  type="search"
+                                  value=""
+                                />
+                                <div
+                                  class="euiFormControlLayoutIcons"
+                                >
+                                  <span
+                                    class="euiFormControlLayoutCustomIcon"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--l"
+                        />
+                        <div
+                          style="min-height: 434px;"
+                        >
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                          <div
+                            class="euiEmptyPrompt"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                            <span
+                              class="euiTextColor euiTextColor--subdued"
+                            >
+                              <div
+                                class="euiSpacer euiSpacer--m"
+                              />
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                <div
+                                  class="euiText euiText--medium"
+                                >
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </div>
+                              </div>
+                            </span>
+                          </div>
+                          <div
+                            class="euiSpacer euiSpacer--s"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <hr
+              class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
+            />
+            <div>
+              <div
+                class="euiAccordion"
+                data-test-subj="traceGroupsAccordion"
+              >
+                <div
+                  class="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="traceGroups"
+                    aria-expanded="false"
+                    class="euiAccordion__button"
+                    id="random_html_id"
+                    type="button"
+                  >
+                    <span
+                      class="euiAccordion__iconWrapper"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiAccordion__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                          fill-rule="nonzero"
+                        />
+                      </svg>
+                    </span>
+                    <span
+                      class="euiIEFlexWrapFix"
+                    >
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <h3>
+                          Trace groups
+                           
+                          <span
+                            class="euiBadge euiBadge--iconLeft"
+                            data-test-subj="traceGroupsCountBadge"
+                            style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
+                            title="0"
+                          >
+                            <span
+                              class="euiBadge__content"
+                            >
+                              0
+                            </span>
+                          </span>
+                        </h3>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--s"
+                      />
+                      <div
+                        class="euiText euiText--small"
+                      >
+                        <div
+                          class="euiTextColor euiTextColor--subdued"
+                        >
+                          Constrain your application to specific trace groups
+                        </div>
+                      </div>
+                    </span>
+                  </button>
+                  <div
+                    class="euiAccordion__optionalAction"
+                  >
+                    <button
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                      data-test-subj="clearTraceGroupsButton"
+                      disabled=""
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButton__content"
+                      >
+                        <span
+                          class="euiButton__text"
+                        >
+                          Clear all
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  class="euiAccordion__childWrapper"
+                  id="traceGroups"
+                  role="region"
+                  tabindex="-1"
+                >
+                  <div>
+                    <div
+                      class="euiAccordion__padding--l"
+                    >
+                      <div
+                        class="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          class="euiFormRow__labelWrapper"
+                        >
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="random_html_id"
+                          >
+                            Trace Groups
+                          </label>
+                        </div>
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <div
+                            aria-describedby="random_html_id-help-0"
+                            aria-expanded="false"
+                            aria-haspopup="listbox"
+                            aria-label="Select trace groups"
+                            class="euiComboBox"
+                            data-test-subj="traceGroupsComboBox"
+                            role="combobox"
+                          >
+                            <div
+                              class="euiFormControlLayout"
+                            >
+                              <div
+                                class="euiFormControlLayout__childrenWrapper"
+                              >
+                                <div
+                                  class="euiComboBox__inputWrap"
+                                  data-test-subj="comboBoxInput"
+                                  tabindex="-1"
+                                >
+                                  <p
+                                    class="euiComboBoxPlaceholder"
+                                  >
+                                    Select or add trace groups
+                                  </p>
+                                  <div
+                                    class="euiComboBox__input"
+                                    style="font-size: 14px; display: inline-block;"
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      role="textbox"
+                                      style="box-sizing: content-box; width: 2px;"
+                                      value=""
+                                    />
+                                    <div
+                                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                                    />
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <button
+                                    aria-label="Open list of options"
+                                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                        fill-rule="non-zero"
+                                      />
+                                    </svg>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            id="random_html_id-help-0"
+                          >
+                            Select one or multiple trace groups, or type a custom one
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="euiSpacer euiSpacer--l"
+                      />
+                      <div
+                        class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                      >
+                        <div
+                          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow10"
+                          >
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <span
+                                class="panel-title"
+                              >
+                                Latency by trace group
+                              </span>
+                              <span
+                                class="panel-title-count"
+                              >
+                                 (0)
+                              </span>
+                            </div>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-1"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  □
+                                </span>
+                                 &lt; 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <button
+                              class="euiLink euiLink--primary"
+                              data-test-subj="dashboard-table-percentile-button-2"
+                              type="button"
+                            >
+                              <div
+                                class="euiText euiText--extraSmall"
+                              >
+                                <span
+                                  style="color: rgb(149, 122, 201);"
+                                >
+                                  ■
+                                </span>
+                                 &gt;= 95 percentile
+                              </div>
+                            </button>
+                          </div>
+                          <div
+                            class="euiFlexItem euiFlexItem--flexGrow1"
+                          />
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--m"
+                        />
+                        <hr
+                          class="euiHorizontalRule euiHorizontalRule--full"
+                        />
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                        <div
+                          class="euiEmptyPrompt"
+                        >
+                          <h2
+                            class="euiTitle euiTitle--medium"
+                          >
+                            No matches
+                          </h2>
+                          <span
+                            class="euiTextColor euiTextColor--subdued"
+                          >
+                            <div
+                              class="euiSpacer euiSpacer--m"
+                            />
+                            <div
+                              class="euiText euiText--medium"
+                            >
+                              <div
+                                class="euiText euiText--medium"
+                              >
+                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                              </div>
+                            </div>
+                          </span>
+                        </div>
+                        <div
+                          class="euiSpacer euiSpacer--xl"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="cancelCreateButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  data-test-subj="createButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <span
+                class="euiToolTipAnchor"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  data-test-subj="createAndSetButton"
+                  disabled=""
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create and Set Availability
+                    </span>
+                  </span>
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
new file mode 100644
index 0000000000..18c3c8847e
--- /dev/null
+++ b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
@@ -0,0 +1,1006 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Log Config component renders empty log config 1`] = `
+<LogConfig
+  appConfigs={Array []}
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction],
+    }
+  }
+  description=""
+  dslService={
+    Object {
+      "fetch": [MockFunction],
+      "fetchFields": [MockFunction],
+      "fetchIndices": [MockFunction],
+      "http": [MockFunction],
+    }
+  }
+  editMode={false}
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  indicesExist={true}
+  name=""
+  parentBreadcrumb={
+    Object {
+      "href": "test#/",
+      "text": "test",
+    }
+  }
+  query=""
+  setAppConfigs={[MockFunction]}
+  setDescriptionWithStorage={[MockFunction]}
+  setEndTime={[MockFunction]}
+  setEndTimeWithStorage={[MockFunction]}
+  setFilters={[MockFunction]}
+  setFiltersWithStorage={[MockFunction]}
+  setIsFlyoutVisible={[MockFunction]}
+  setNameWithStorage={[MockFunction]}
+  setQuery={[MockFunction]}
+  setQueryWithStorage={[MockFunction]}
+  setStartTime={[MockFunction]}
+  setStartTimeWithStorage={[MockFunction]}
+  startTime="now-5m"
+>
+  <div>
+    <EuiAccordion
+      arrowDisplay="left"
+      buttonContent={
+        <React.Fragment>
+          <EuiText
+            size="s"
+          >
+            <h3>
+              Log source
+            </h3>
+          </EuiText>
+          <EuiSpacer
+            size="s"
+          />
+          <EuiText
+            color="subdued"
+            size="s"
+          >
+            Configure your application base query
+          </EuiText>
+        </React.Fragment>
+      }
+      data-test-subj="logSourceAccordion"
+      extraAction={
+        <EuiButton
+          data-test-subj="clearLogSourceButton"
+          disabled={true}
+          onClick={[Function]}
+          size="s"
+        >
+          Clear
+        </EuiButton>
+      }
+      id="logSource"
+      initialIsOpen={false}
+      isLoading={false}
+      isLoadingMessage={false}
+      onToggle={[Function]}
+      paddingSize="l"
+    >
+      <div
+        className="euiAccordion"
+        data-test-subj="logSourceAccordion"
+        onToggle={[Function]}
+      >
+        <div
+          className="euiAccordion__triggerWrapper"
+        >
+          <button
+            aria-controls="logSource"
+            aria-expanded={false}
+            className="euiAccordion__button"
+            id="random_html_id"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="euiAccordion__iconWrapper"
+            >
+              <EuiIcon
+                className="euiAccordion__icon"
+                size="m"
+                type="arrowRight"
+              >
+                <EuiIconEmpty
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                  focusable="false"
+                  role="img"
+                  style={null}
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </EuiIconEmpty>
+              </EuiIcon>
+            </span>
+            <span
+              className="euiIEFlexWrapFix"
+            >
+              <EuiText
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <h3>
+                    Log source
+                  </h3>
+                </div>
+              </EuiText>
+              <EuiSpacer
+                size="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <EuiText
+                color="subdued"
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <EuiTextColor
+                    color="subdued"
+                    component="div"
+                  >
+                    <div
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      Configure your application base query
+                    </div>
+                  </EuiTextColor>
+                </div>
+              </EuiText>
+            </span>
+          </button>
+          <div
+            className="euiAccordion__optionalAction"
+          >
+            <EuiButton
+              data-test-subj="clearLogSourceButton"
+              disabled={true}
+              onClick={[Function]}
+              size="s"
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                data-test-subj="clearLogSourceButton"
+                disabled={true}
+                element="button"
+                isDisabled={true}
+                onClick={[Function]}
+                size="s"
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                  data-test-subj="clearLogSourceButton"
+                  disabled={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Clear
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </div>
+        <div
+          aria-labelledby="random_html_id"
+          className="euiAccordion__childWrapper"
+          id="logSource"
+          role="region"
+          tabIndex={-1}
+        >
+          <EuiResizeObserver
+            onResize={[Function]}
+          >
+            <div>
+              <div
+                className="euiAccordion__padding--l"
+              >
+                <EuiFlexGroup
+                  direction="column"
+                  gutterSize="s"
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                  >
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiCallOut
+                          iconType="iInCircle"
+                          id="baseQueryCallout"
+                          size="s"
+                        >
+                          <div
+                            className="euiCallOut euiCallOut--primary euiCallOut--small"
+                            id="baseQueryCallout"
+                          >
+                            <EuiText
+                              color="default"
+                              size="xs"
+                            >
+                              <div
+                                className="euiText euiText--extraSmall"
+                              >
+                                <EuiTextColor
+                                  color="default"
+                                  component="div"
+                                >
+                                  <div
+                                    className="euiTextColor euiTextColor--default"
+                                  >
+                                    You can't change the base query after the application is created.
+                                  </div>
+                                </EuiTextColor>
+                              </div>
+                            </EuiText>
+                          </div>
+                        </EuiCallOut>
+                      </div>
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiFormRow
+                          describedByIds={Array []}
+                          display="row"
+                          fullWidth={false}
+                          hasChildLabel={true}
+                          hasEmptyLabelSpace={false}
+                          helpText="The default logs view in the application will be filtered by this query."
+                          label="Base Query"
+                          labelType="label"
+                        >
+                          <div
+                            className="euiFormRow"
+                            id="random_html_id-row"
+                          >
+                            <div
+                              className="euiFormRow__labelWrapper"
+                            >
+                              <EuiFormLabel
+                                className="euiFormRow__label"
+                                htmlFor="random_html_id"
+                                isFocused={false}
+                                type="label"
+                              >
+                                <label
+                                  className="euiFormLabel euiFormRow__label"
+                                  htmlFor="random_html_id"
+                                >
+                                  Base Query
+                                </label>
+                              </EuiFormLabel>
+                            </div>
+                            <div
+                              className="euiFormRow__fieldWrapper"
+                            >
+                              <EuiFlexItem
+                                aria-describedby="random_html_id-help-0"
+                                className="query-area"
+                                grow={false}
+                                id="random_html_id"
+                                key="query-bar"
+                                onBlur={[Function]}
+                                onFocus={[Function]}
+                              >
+                                <div
+                                  aria-describedby="random_html_id-help-0"
+                                  className="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                  id="random_html_id"
+                                  onBlur={[Function]}
+                                  onFocus={[Function]}
+                                >
+                                  <Autocomplete
+                                    baseQuery=""
+                                    dslService={
+                                      Object {
+                                        "fetch": [MockFunction],
+                                        "fetchFields": [MockFunction],
+                                        "fetchIndices": [MockFunction],
+                                        "http": [MockFunction],
+                                      }
+                                    }
+                                    getSuggestions={[Function]}
+                                    handleQueryChange={[Function]}
+                                    handleQuerySearch={[Function]}
+                                    isDisabled={false}
+                                    key="autocomplete-bar"
+                                    onItemSelect={[Function]}
+                                    possibleCommands={
+                                      Array [
+                                        Object {
+                                          "label": "dedup",
+                                        },
+                                        Object {
+                                          "label": "eval",
+                                        },
+                                        Object {
+                                          "label": "fields",
+                                        },
+                                        Object {
+                                          "label": "parse",
+                                        },
+                                        Object {
+                                          "label": "rename",
+                                        },
+                                        Object {
+                                          "label": "sort",
+                                        },
+                                        Object {
+                                          "label": "where",
+                                        },
+                                      ]
+                                    }
+                                    query=""
+                                    tabId="application-analytics-tab"
+                                    tempQuery=""
+                                  >
+                                    <div
+                                      aria-expanded={false}
+                                      aria-haspopup="listbox"
+                                      aria-labelledby="autocomplete-0-label"
+                                      className="aa-Autocomplete"
+                                      id="autocomplete-root"
+                                      role="combobox"
+                                    >
+                                      <EuiTextArea
+                                        aria-autocomplete="both"
+                                        aria-labelledby="autocomplete-0-label"
+                                        autoCapitalize="off"
+                                        autoComplete="off"
+                                        autoCorrect="off"
+                                        autoFocus={false}
+                                        data-test-subj="searchAutocompleteTextArea"
+                                        disabled={false}
+                                        enterKeyHint="search"
+                                        id="autocomplete-textarea"
+                                        maxLength={512}
+                                        onBlur={[Function]}
+                                        onChange={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        placeholder="Enter PPL query"
+                                        spellCheck="false"
+                                        type="search"
+                                        value=""
+                                      >
+                                        <EuiValidatableControl>
+                                          <textarea
+                                            aria-autocomplete="both"
+                                            aria-labelledby="autocomplete-0-label"
+                                            autoCapitalize="off"
+                                            autoComplete="off"
+                                            autoCorrect="off"
+                                            autoFocus={false}
+                                            className="euiTextArea euiTextArea--resizeVertical"
+                                            data-test-subj="searchAutocompleteTextArea"
+                                            disabled={false}
+                                            enterKeyHint="search"
+                                            id="autocomplete-textarea"
+                                            maxLength={512}
+                                            onBlur={[Function]}
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onKeyDown={[Function]}
+                                            placeholder="Enter PPL query"
+                                            rows={6}
+                                            spellCheck="false"
+                                            type="search"
+                                            value=""
+                                          />
+                                        </EuiValidatableControl>
+                                      </EuiTextArea>
+                                    </div>
+                                  </Autocomplete>
+                                  <EuiBadge
+                                    className="ppl-link ppl-link-light"
+                                    color="hollow"
+                                    onClick={[Function]}
+                                    onClickAriaLabel="pplLinkShowFlyout"
+                                  >
+                                    <EuiInnerText>
+                                      <button
+                                        aria-label="pplLinkShowFlyout"
+                                        className="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        title="PPL"
+                                      >
+                                        <span
+                                          className="euiBadge__content"
+                                        >
+                                          <span
+                                            className="euiBadge__text"
+                                          >
+                                            PPL
+                                          </span>
+                                        </span>
+                                      </button>
+                                    </EuiInnerText>
+                                  </EuiBadge>
+                                </div>
+                              </EuiFlexItem>
+                              <EuiFormHelpText
+                                className="euiFormRow__text"
+                                id="random_html_id-help-0"
+                                key="The default logs view in the application will be filtered by this query."
+                              >
+                                <div
+                                  className="euiFormHelpText euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                >
+                                  The default logs view in the application will be filtered by this query.
+                                </div>
+                              </EuiFormHelpText>
+                            </div>
+                          </div>
+                        </EuiFormRow>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </div>
+            </div>
+          </EuiResizeObserver>
+        </div>
+      </div>
+    </EuiAccordion>
+  </div>
+</LogConfig>
+`;
+
+exports[`Log Config component renders with query 1`] = `
+<LogConfig
+  appConfigs={Array []}
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction],
+    }
+  }
+  description=""
+  dslService={
+    Object {
+      "fetch": [MockFunction],
+      "fetchFields": [MockFunction],
+      "fetchIndices": [MockFunction],
+      "http": [MockFunction],
+    }
+  }
+  editMode={false}
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  indicesExist={true}
+  name=""
+  parentBreadcrumb={
+    Object {
+      "href": "test#/",
+      "text": "test",
+    }
+  }
+  query="source = openserach_dashboard_sample_logs"
+  setAppConfigs={[MockFunction]}
+  setDescriptionWithStorage={[MockFunction]}
+  setEndTime={[MockFunction]}
+  setEndTimeWithStorage={[MockFunction]}
+  setFilters={[MockFunction]}
+  setFiltersWithStorage={[MockFunction]}
+  setIsFlyoutVisible={[MockFunction]}
+  setNameWithStorage={[MockFunction]}
+  setQuery={[MockFunction]}
+  setQueryWithStorage={[MockFunction]}
+  setStartTime={[MockFunction]}
+  setStartTimeWithStorage={[MockFunction]}
+  startTime="now-5m"
+>
+  <div>
+    <EuiAccordion
+      arrowDisplay="left"
+      buttonContent={
+        <React.Fragment>
+          <EuiText
+            size="s"
+          >
+            <h3>
+              Log source
+            </h3>
+          </EuiText>
+          <EuiSpacer
+            size="s"
+          />
+          <EuiText
+            color="subdued"
+            size="s"
+          >
+            Configure your application base query
+          </EuiText>
+        </React.Fragment>
+      }
+      data-test-subj="logSourceAccordion"
+      extraAction={
+        <EuiButton
+          data-test-subj="clearLogSourceButton"
+          disabled={true}
+          onClick={[Function]}
+          size="s"
+        >
+          Clear
+        </EuiButton>
+      }
+      id="logSource"
+      initialIsOpen={false}
+      isLoading={false}
+      isLoadingMessage={false}
+      onToggle={[Function]}
+      paddingSize="l"
+    >
+      <div
+        className="euiAccordion"
+        data-test-subj="logSourceAccordion"
+        onToggle={[Function]}
+      >
+        <div
+          className="euiAccordion__triggerWrapper"
+        >
+          <button
+            aria-controls="logSource"
+            aria-expanded={false}
+            className="euiAccordion__button"
+            id="random_html_id"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="euiAccordion__iconWrapper"
+            >
+              <EuiIcon
+                className="euiAccordion__icon"
+                size="m"
+                type="arrowRight"
+              >
+                <EuiIconArrowRight
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiAccordion__icon"
+                  focusable="false"
+                  role="img"
+                  style={null}
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiAccordion__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                      fillRule="nonzero"
+                    />
+                  </svg>
+                </EuiIconArrowRight>
+              </EuiIcon>
+            </span>
+            <span
+              className="euiIEFlexWrapFix"
+            >
+              <EuiText
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <h3>
+                    Log source
+                  </h3>
+                </div>
+              </EuiText>
+              <EuiSpacer
+                size="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <EuiText
+                color="subdued"
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <EuiTextColor
+                    color="subdued"
+                    component="div"
+                  >
+                    <div
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      Configure your application base query
+                    </div>
+                  </EuiTextColor>
+                </div>
+              </EuiText>
+            </span>
+          </button>
+          <div
+            className="euiAccordion__optionalAction"
+          >
+            <EuiButton
+              data-test-subj="clearLogSourceButton"
+              disabled={true}
+              onClick={[Function]}
+              size="s"
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                data-test-subj="clearLogSourceButton"
+                disabled={true}
+                element="button"
+                isDisabled={true}
+                onClick={[Function]}
+                size="s"
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                  data-test-subj="clearLogSourceButton"
+                  disabled={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Clear
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </div>
+        <div
+          aria-labelledby="random_html_id"
+          className="euiAccordion__childWrapper"
+          id="logSource"
+          role="region"
+          tabIndex={-1}
+        >
+          <EuiResizeObserver
+            onResize={[Function]}
+          >
+            <div>
+              <div
+                className="euiAccordion__padding--l"
+              >
+                <EuiFlexGroup
+                  direction="column"
+                  gutterSize="s"
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionColumn euiFlexGroup--responsive"
+                  >
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiCallOut
+                          iconType="iInCircle"
+                          id="baseQueryCallout"
+                          size="s"
+                        >
+                          <div
+                            className="euiCallOut euiCallOut--primary euiCallOut--small"
+                            id="baseQueryCallout"
+                          >
+                            <EuiText
+                              color="default"
+                              size="xs"
+                            >
+                              <div
+                                className="euiText euiText--extraSmall"
+                              >
+                                <EuiTextColor
+                                  color="default"
+                                  component="div"
+                                >
+                                  <div
+                                    className="euiTextColor euiTextColor--default"
+                                  >
+                                    You can't change the base query after the application is created.
+                                  </div>
+                                </EuiTextColor>
+                              </div>
+                            </EuiText>
+                          </div>
+                        </EuiCallOut>
+                      </div>
+                    </EuiFlexItem>
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiFormRow
+                          describedByIds={Array []}
+                          display="row"
+                          fullWidth={false}
+                          hasChildLabel={true}
+                          hasEmptyLabelSpace={false}
+                          helpText="The default logs view in the application will be filtered by this query."
+                          label="Base Query"
+                          labelType="label"
+                        >
+                          <div
+                            className="euiFormRow"
+                            id="random_html_id-row"
+                          >
+                            <div
+                              className="euiFormRow__labelWrapper"
+                            >
+                              <EuiFormLabel
+                                className="euiFormRow__label"
+                                htmlFor="random_html_id"
+                                isFocused={false}
+                                type="label"
+                              >
+                                <label
+                                  className="euiFormLabel euiFormRow__label"
+                                  htmlFor="random_html_id"
+                                >
+                                  Base Query
+                                </label>
+                              </EuiFormLabel>
+                            </div>
+                            <div
+                              className="euiFormRow__fieldWrapper"
+                            >
+                              <EuiFlexItem
+                                aria-describedby="random_html_id-help-0"
+                                className="query-area"
+                                grow={false}
+                                id="random_html_id"
+                                key="query-bar"
+                                onBlur={[Function]}
+                                onFocus={[Function]}
+                              >
+                                <div
+                                  aria-describedby="random_html_id-help-0"
+                                  className="euiFlexItem euiFlexItem--flexGrowZero query-area"
+                                  id="random_html_id"
+                                  onBlur={[Function]}
+                                  onFocus={[Function]}
+                                >
+                                  <Autocomplete
+                                    baseQuery=""
+                                    dslService={
+                                      Object {
+                                        "fetch": [MockFunction],
+                                        "fetchFields": [MockFunction],
+                                        "fetchIndices": [MockFunction],
+                                        "http": [MockFunction],
+                                      }
+                                    }
+                                    getSuggestions={[Function]}
+                                    handleQueryChange={[Function]}
+                                    handleQuerySearch={[Function]}
+                                    isDisabled={false}
+                                    key="autocomplete-bar"
+                                    onItemSelect={[Function]}
+                                    possibleCommands={
+                                      Array [
+                                        Object {
+                                          "label": "dedup",
+                                        },
+                                        Object {
+                                          "label": "eval",
+                                        },
+                                        Object {
+                                          "label": "fields",
+                                        },
+                                        Object {
+                                          "label": "parse",
+                                        },
+                                        Object {
+                                          "label": "rename",
+                                        },
+                                        Object {
+                                          "label": "sort",
+                                        },
+                                        Object {
+                                          "label": "where",
+                                        },
+                                      ]
+                                    }
+                                    query="source = openserach_dashboard_sample_logs"
+                                    tabId="application-analytics-tab"
+                                    tempQuery=""
+                                  >
+                                    <div
+                                      aria-expanded={false}
+                                      aria-haspopup="listbox"
+                                      aria-labelledby="autocomplete-1-label"
+                                      className="aa-Autocomplete"
+                                      id="autocomplete-root"
+                                      role="combobox"
+                                    >
+                                      <EuiTextArea
+                                        aria-autocomplete="both"
+                                        aria-labelledby="autocomplete-1-label"
+                                        autoCapitalize="off"
+                                        autoComplete="off"
+                                        autoCorrect="off"
+                                        autoFocus={false}
+                                        data-test-subj="searchAutocompleteTextArea"
+                                        disabled={false}
+                                        enterKeyHint="search"
+                                        id="autocomplete-textarea"
+                                        maxLength={512}
+                                        onBlur={[Function]}
+                                        onChange={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        placeholder="Enter PPL query"
+                                        spellCheck="false"
+                                        type="search"
+                                        value="source = openserach_dashboard_sample_logs"
+                                      >
+                                        <EuiValidatableControl>
+                                          <textarea
+                                            aria-autocomplete="both"
+                                            aria-labelledby="autocomplete-1-label"
+                                            autoCapitalize="off"
+                                            autoComplete="off"
+                                            autoCorrect="off"
+                                            autoFocus={false}
+                                            className="euiTextArea euiTextArea--resizeVertical"
+                                            data-test-subj="searchAutocompleteTextArea"
+                                            disabled={false}
+                                            enterKeyHint="search"
+                                            id="autocomplete-textarea"
+                                            maxLength={512}
+                                            onBlur={[Function]}
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onKeyDown={[Function]}
+                                            placeholder="Enter PPL query"
+                                            rows={6}
+                                            spellCheck="false"
+                                            type="search"
+                                            value="source = openserach_dashboard_sample_logs"
+                                          />
+                                        </EuiValidatableControl>
+                                      </EuiTextArea>
+                                    </div>
+                                  </Autocomplete>
+                                  <EuiBadge
+                                    className="ppl-link ppl-link-light"
+                                    color="hollow"
+                                    onClick={[Function]}
+                                    onClickAriaLabel="pplLinkShowFlyout"
+                                  >
+                                    <EuiInnerText>
+                                      <button
+                                        aria-label="pplLinkShowFlyout"
+                                        className="euiBadge euiBadge-isClickable euiBadge--hollow euiBadge--iconLeft ppl-link ppl-link-light"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        title="PPL"
+                                      >
+                                        <span
+                                          className="euiBadge__content"
+                                        >
+                                          <span
+                                            className="euiBadge__text"
+                                          >
+                                            PPL
+                                          </span>
+                                        </span>
+                                      </button>
+                                    </EuiInnerText>
+                                  </EuiBadge>
+                                </div>
+                              </EuiFlexItem>
+                              <EuiFormHelpText
+                                className="euiFormRow__text"
+                                id="random_html_id-help-0"
+                                key="The default logs view in the application will be filtered by this query."
+                              >
+                                <div
+                                  className="euiFormHelpText euiFormRow__text"
+                                  id="random_html_id-help-0"
+                                >
+                                  The default logs view in the application will be filtered by this query.
+                                </div>
+                              </EuiFormHelpText>
+                            </div>
+                          </div>
+                        </EuiFormRow>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </div>
+            </div>
+          </EuiResizeObserver>
+        </div>
+      </div>
+    </EuiAccordion>
+  </div>
+</LogConfig>
+`;
diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
new file mode 100644
index 0000000000..72c328ba59
--- /dev/null
+++ b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
@@ -0,0 +1,2169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Service Config component renders empty service config 1`] = `
+<ServiceConfig
+  appConfigs={Array []}
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction],
+    }
+  }
+  description=""
+  dslService={
+    Object {
+      "fetch": [MockFunction],
+      "fetchFields": [MockFunction],
+      "fetchIndices": [MockFunction],
+      "http": [MockFunction],
+    }
+  }
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  indicesExist={true}
+  name=""
+  parentBreadcrumb={
+    Object {
+      "href": "test#/",
+      "text": "test",
+    }
+  }
+  query=""
+  selectedServices={Array []}
+  setAppConfigs={[MockFunction]}
+  setDescriptionWithStorage={[MockFunction]}
+  setEndTime={[MockFunction]}
+  setEndTimeWithStorage={[MockFunction]}
+  setFilters={[MockFunction]}
+  setFiltersWithStorage={[MockFunction]}
+  setNameWithStorage={[MockFunction]}
+  setQuery={[MockFunction]}
+  setQueryWithStorage={[MockFunction]}
+  setSelectedServices={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setStartTime={[MockFunction]}
+  setStartTimeWithStorage={[MockFunction]}
+  startTime="now-5m"
+>
+  <div>
+    <EuiAccordion
+      arrowDisplay="left"
+      buttonContent={
+        <React.Fragment>
+          <EuiText
+            size="s"
+          >
+            <h3>
+              Services & entities
+               
+              <EuiBadge
+                data-test-subj="servicesEntitiesCountBadge"
+              >
+                0
+              </EuiBadge>
+            </h3>
+          </EuiText>
+          <EuiSpacer
+            size="s"
+          />
+          <EuiText
+            color="subdued"
+            size="s"
+          >
+            Select services & entities to include in this application
+          </EuiText>
+        </React.Fragment>
+      }
+      data-test-subj="servicesEntitiesAccordion"
+      extraAction={
+        <EuiButton
+          data-test-subj="clearServicesEntitiesButton"
+          disabled={true}
+          onClick={[Function]}
+          size="s"
+        >
+          Clear all
+        </EuiButton>
+      }
+      id="servicesEntities"
+      initialIsOpen={false}
+      isLoading={false}
+      isLoadingMessage={false}
+      onToggle={[Function]}
+      paddingSize="l"
+    >
+      <div
+        className="euiAccordion"
+        data-test-subj="servicesEntitiesAccordion"
+        onToggle={[Function]}
+      >
+        <div
+          className="euiAccordion__triggerWrapper"
+        >
+          <button
+            aria-controls="servicesEntities"
+            aria-expanded={false}
+            className="euiAccordion__button"
+            id="random_html_id"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="euiAccordion__iconWrapper"
+            >
+              <EuiIcon
+                className="euiAccordion__icon"
+                size="m"
+                type="arrowRight"
+              >
+                <EuiIconEmpty
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                  focusable="false"
+                  role="img"
+                  style={null}
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </EuiIconEmpty>
+              </EuiIcon>
+            </span>
+            <span
+              className="euiIEFlexWrapFix"
+            >
+              <EuiText
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <h3>
+                    Services & entities
+                     
+                    <EuiBadge
+                      data-test-subj="servicesEntitiesCountBadge"
+                    >
+                      <EuiInnerText>
+                        <span
+                          className="euiBadge euiBadge--iconLeft"
+                          data-test-subj="servicesEntitiesCountBadge"
+                          style={
+                            Object {
+                              "backgroundColor": "#d3dae6",
+                              "color": "#000",
+                            }
+                          }
+                          title="0"
+                        >
+                          <span
+                            className="euiBadge__content"
+                          >
+                            0
+                          </span>
+                        </span>
+                      </EuiInnerText>
+                    </EuiBadge>
+                  </h3>
+                </div>
+              </EuiText>
+              <EuiSpacer
+                size="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <EuiText
+                color="subdued"
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <EuiTextColor
+                    color="subdued"
+                    component="div"
+                  >
+                    <div
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      Select services & entities to include in this application
+                    </div>
+                  </EuiTextColor>
+                </div>
+              </EuiText>
+            </span>
+          </button>
+          <div
+            className="euiAccordion__optionalAction"
+          >
+            <EuiButton
+              data-test-subj="clearServicesEntitiesButton"
+              disabled={true}
+              onClick={[Function]}
+              size="s"
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                data-test-subj="clearServicesEntitiesButton"
+                disabled={true}
+                element="button"
+                isDisabled={true}
+                onClick={[Function]}
+                size="s"
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                  data-test-subj="clearServicesEntitiesButton"
+                  disabled={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Clear all
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </div>
+        <div
+          aria-labelledby="random_html_id"
+          className="euiAccordion__childWrapper"
+          id="servicesEntities"
+          role="region"
+          tabIndex={-1}
+        >
+          <EuiResizeObserver
+            onResize={[Function]}
+          >
+            <div>
+              <div
+                className="euiAccordion__padding--l"
+              >
+                <EuiFormRow
+                  describedByIds={Array []}
+                  display="row"
+                  fullWidth={false}
+                  hasChildLabel={true}
+                  hasEmptyLabelSpace={false}
+                  label="Services & entities"
+                  labelType="label"
+                >
+                  <div
+                    className="euiFormRow"
+                    id="random_html_id-row"
+                  >
+                    <div
+                      className="euiFormRow__labelWrapper"
+                    >
+                      <EuiFormLabel
+                        className="euiFormRow__label"
+                        htmlFor="random_html_id"
+                        isFocused={false}
+                        type="label"
+                      >
+                        <label
+                          className="euiFormLabel euiFormRow__label"
+                          htmlFor="random_html_id"
+                        >
+                          Services & entities
+                        </label>
+                      </EuiFormLabel>
+                    </div>
+                    <div
+                      className="euiFormRow__fieldWrapper"
+                    >
+                      <EuiComboBox
+                        aria-label="Select services and entities"
+                        async={false}
+                        compressed={false}
+                        data-test-subj="servicesEntitiesComboBox"
+                        fullWidth={false}
+                        id="random_html_id"
+                        isClearable={false}
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        options={Array []}
+                        placeholder="Select services and entities"
+                        selectedOptions={Array []}
+                        singleSelection={false}
+                        sortMatchesBy="none"
+                      >
+                        <div
+                          aria-expanded={false}
+                          aria-haspopup="listbox"
+                          aria-label="Select services and entities"
+                          className="euiComboBox"
+                          data-test-subj="servicesEntitiesComboBox"
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          role="combobox"
+                        >
+                          <EuiComboBoxInput
+                            autoSizeInputRef={[Function]}
+                            compressed={false}
+                            fullWidth={false}
+                            hasSelectedOptions={false}
+                            id="random_html_id"
+                            inputRef={[Function]}
+                            isListOpen={false}
+                            noIcon={false}
+                            onChange={[Function]}
+                            onClick={[Function]}
+                            onCloseListClick={[Function]}
+                            onFocus={[Function]}
+                            onOpenListClick={[Function]}
+                            onRemoveOption={[Function]}
+                            placeholder="Select services and entities"
+                            rootId={[Function]}
+                            searchValue=""
+                            selectedOptions={Array []}
+                            singleSelection={false}
+                            toggleButtonRef={[Function]}
+                            updatePosition={[Function]}
+                            value=""
+                          >
+                            <EuiFormControlLayout
+                              compressed={false}
+                              fullWidth={false}
+                              icon={
+                                Object {
+                                  "aria-label": "Open list of options",
+                                  "data-test-subj": "comboBoxToggleListButton",
+                                  "disabled": undefined,
+                                  "onClick": [Function],
+                                  "ref": [Function],
+                                  "side": "right",
+                                  "type": "arrowDown",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiFormControlLayout"
+                              >
+                                <div
+                                  className="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    className="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    onClick={[Function]}
+                                    tabIndex={-1}
+                                  >
+                                    <p
+                                      className="euiComboBoxPlaceholder"
+                                    >
+                                      Select services and entities
+                                    </p>
+                                    <AutosizeInput
+                                      aria-controls=""
+                                      className="euiComboBox__input"
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      injectStyles={true}
+                                      inputRef={[Function]}
+                                      minWidth={1}
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "fontSize": 14,
+                                        }
+                                      }
+                                      value=""
+                                    >
+                                      <div
+                                        className="euiComboBox__input"
+                                        style={
+                                          Object {
+                                            "display": "inline-block",
+                                            "fontSize": 14,
+                                          }
+                                        }
+                                      >
+                                        <input
+                                          aria-controls=""
+                                          data-test-subj="comboBoxSearchInput"
+                                          id="random_html_id"
+                                          onBlur={[Function]}
+                                          onChange={[Function]}
+                                          onFocus={[Function]}
+                                          role="textbox"
+                                          style={
+                                            Object {
+                                              "boxSizing": "content-box",
+                                              "width": "2px",
+                                            }
+                                          }
+                                          value=""
+                                        />
+                                        <div
+                                          style={
+                                            Object {
+                                              "height": 0,
+                                              "left": 0,
+                                              "overflow": "scroll",
+                                              "position": "absolute",
+                                              "top": 0,
+                                              "visibility": "hidden",
+                                              "whiteSpace": "pre",
+                                            }
+                                          }
+                                        />
+                                      </div>
+                                    </AutosizeInput>
+                                  </div>
+                                  <EuiFormControlLayoutIcons
+                                    compressed={false}
+                                    icon={
+                                      Object {
+                                        "aria-label": "Open list of options",
+                                        "data-test-subj": "comboBoxToggleListButton",
+                                        "disabled": undefined,
+                                        "onClick": [Function],
+                                        "ref": [Function],
+                                        "side": "right",
+                                        "type": "arrowDown",
+                                      }
+                                    }
+                                  >
+                                    <div
+                                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                    >
+                                      <EuiFormControlLayoutCustomIcon
+                                        aria-label="Open list of options"
+                                        data-test-subj="comboBoxToggleListButton"
+                                        iconRef={[Function]}
+                                        onClick={[Function]}
+                                        size="m"
+                                        type="arrowDown"
+                                      >
+                                        <button
+                                          aria-label="Open list of options"
+                                          className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                          data-test-subj="comboBoxToggleListButton"
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <EuiIcon
+                                            aria-hidden="true"
+                                            className="euiFormControlLayoutCustomIcon__icon"
+                                            size="m"
+                                            type="arrowDown"
+                                          >
+                                            <EuiIconEmpty
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              />
+                                            </EuiIconEmpty>
+                                          </EuiIcon>
+                                        </button>
+                                      </EuiFormControlLayoutCustomIcon>
+                                    </div>
+                                  </EuiFormControlLayoutIcons>
+                                </div>
+                              </div>
+                            </EuiFormControlLayout>
+                          </EuiComboBoxInput>
+                        </div>
+                      </EuiComboBox>
+                    </div>
+                  </div>
+                </EuiFormRow>
+                <EuiSpacer>
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <ServiceMap
+                  addFilter={[Function]}
+                  idSelected="latency"
+                  page="appCreate"
+                  serviceMap={Object {}}
+                  setIdSelected={[Function]}
+                >
+                  <EuiPanel>
+                    <div
+                      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                    >
+                      <PanelTitle
+                        title="Service map"
+                      >
+                        <EuiText
+                          size="m"
+                        >
+                          <div
+                            className="euiText euiText--medium"
+                          >
+                            <span
+                              className="panel-title"
+                            >
+                              Service map
+                            </span>
+                          </div>
+                        </EuiText>
+                      </PanelTitle>
+                      <EuiSpacer
+                        size="m"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--m"
+                        />
+                      </EuiSpacer>
+                      <EuiButtonGroup
+                        buttonSize="s"
+                        color="text"
+                        idSelected="latency"
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "id": "latency",
+                              "label": "Latency",
+                            },
+                            Object {
+                              "id": "error_rate",
+                              "label": "Error rate",
+                            },
+                            Object {
+                              "id": "throughput",
+                              "label": "Throughput",
+                            },
+                          ]
+                        }
+                      >
+                        <fieldset
+                          className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                          disabled={false}
+                        >
+                          <EuiScreenReaderOnly>
+                            <legend
+                              className="euiScreenReaderOnly"
+                            />
+                          </EuiScreenReaderOnly>
+                          <div
+                            className="euiButtonGroup__buttons"
+                          >
+                            <EuiButtonGroupButton
+                              color="text"
+                              element="label"
+                              id="latency"
+                              isDisabled={false}
+                              isIconOnly={false}
+                              isSelected={true}
+                              key="0"
+                              label="Latency"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              size="s"
+                            >
+                              <EuiButtonDisplay
+                                baseClassName="euiButtonGroupButton"
+                                className="euiButtonGroupButton-isSelected"
+                                color="text"
+                                element="label"
+                                fill={true}
+                                htmlFor="random_html_id"
+                                isDisabled={false}
+                                onClick={[Function]}
+                                size="s"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonGroupButton__textShift",
+                                    "data-text": "Latency",
+                                    "ref": [Function],
+                                    "title": "Latency",
+                                  }
+                                }
+                              >
+                                <label
+                                  className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                  disabled={false}
+                                  htmlFor="random_html_id"
+                                  onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text euiButtonGroupButton__textShift",
+                                        "data-text": "Latency",
+                                        "ref": [Function],
+                                        "title": "Latency",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButton__content"
+                                    >
+                                      <span
+                                        className="euiButton__text euiButtonGroupButton__textShift"
+                                        data-text="Latency"
+                                        title="Latency"
+                                      >
+                                        <input
+                                          checked={true}
+                                          className="euiScreenReaderOnly"
+                                          data-test-subj="latency"
+                                          disabled={false}
+                                          id="random_html_id"
+                                          name="random_html_id"
+                                          onChange={[Function]}
+                                          type="radio"
+                                        />
+                                        Latency
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </label>
+                              </EuiButtonDisplay>
+                            </EuiButtonGroupButton>
+                            <EuiButtonGroupButton
+                              color="text"
+                              element="label"
+                              id="error_rate"
+                              isDisabled={false}
+                              isIconOnly={false}
+                              isSelected={false}
+                              key="1"
+                              label="Error rate"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              size="s"
+                            >
+                              <EuiButtonDisplay
+                                baseClassName="euiButtonGroupButton"
+                                className=""
+                                color="text"
+                                element="label"
+                                fill={false}
+                                htmlFor="random_html_id"
+                                isDisabled={false}
+                                onClick={[Function]}
+                                size="s"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonGroupButton__textShift",
+                                    "data-text": "Error rate",
+                                    "ref": [Function],
+                                    "title": "Error rate",
+                                  }
+                                }
+                              >
+                                <label
+                                  className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                  disabled={false}
+                                  htmlFor="random_html_id"
+                                  onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text euiButtonGroupButton__textShift",
+                                        "data-text": "Error rate",
+                                        "ref": [Function],
+                                        "title": "Error rate",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButton__content"
+                                    >
+                                      <span
+                                        className="euiButton__text euiButtonGroupButton__textShift"
+                                        data-text="Error rate"
+                                        title="Error rate"
+                                      >
+                                        <input
+                                          checked={false}
+                                          className="euiScreenReaderOnly"
+                                          data-test-subj="error_rate"
+                                          disabled={false}
+                                          id="random_html_id"
+                                          name="random_html_id"
+                                          onChange={[Function]}
+                                          type="radio"
+                                        />
+                                        Error rate
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </label>
+                              </EuiButtonDisplay>
+                            </EuiButtonGroupButton>
+                            <EuiButtonGroupButton
+                              color="text"
+                              element="label"
+                              id="throughput"
+                              isDisabled={false}
+                              isIconOnly={false}
+                              isSelected={false}
+                              key="2"
+                              label="Throughput"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              size="s"
+                            >
+                              <EuiButtonDisplay
+                                baseClassName="euiButtonGroupButton"
+                                className=""
+                                color="text"
+                                element="label"
+                                fill={false}
+                                htmlFor="random_html_id"
+                                isDisabled={false}
+                                onClick={[Function]}
+                                size="s"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonGroupButton__textShift",
+                                    "data-text": "Throughput",
+                                    "ref": [Function],
+                                    "title": "Throughput",
+                                  }
+                                }
+                              >
+                                <label
+                                  className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                  disabled={false}
+                                  htmlFor="random_html_id"
+                                  onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text euiButtonGroupButton__textShift",
+                                        "data-text": "Throughput",
+                                        "ref": [Function],
+                                        "title": "Throughput",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButton__content"
+                                    >
+                                      <span
+                                        className="euiButton__text euiButtonGroupButton__textShift"
+                                        data-text="Throughput"
+                                        title="Throughput"
+                                      >
+                                        <input
+                                          checked={false}
+                                          className="euiScreenReaderOnly"
+                                          data-test-subj="throughput"
+                                          disabled={false}
+                                          id="random_html_id"
+                                          name="random_html_id"
+                                          onChange={[Function]}
+                                          type="radio"
+                                        />
+                                        Throughput
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </label>
+                              </EuiButtonDisplay>
+                            </EuiButtonGroupButton>
+                          </div>
+                        </fieldset>
+                      </EuiButtonGroup>
+                      <EuiHorizontalRule
+                        margin="m"
+                      >
+                        <hr
+                          className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                        />
+                      </EuiHorizontalRule>
+                      <EuiFlexGroup
+                        alignItems="center"
+                        gutterSize="s"
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <EuiText>
+                                <div
+                                  className="euiText euiText--medium"
+                                >
+                                  Focus on
+                                </div>
+                              </EuiText>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem>
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiFieldSearch
+                                compressed={false}
+                                fullWidth={false}
+                                incremental={false}
+                                isClearable={true}
+                                isInvalid={false}
+                                isLoading={false}
+                                onChange={[Function]}
+                                onSearch={[Function]}
+                                placeholder="Service name"
+                                value=""
+                              >
+                                <EuiFormControlLayout
+                                  compressed={false}
+                                  fullWidth={false}
+                                  icon="search"
+                                  isLoading={false}
+                                >
+                                  <div
+                                    className="euiFormControlLayout"
+                                  >
+                                    <div
+                                      className="euiFormControlLayout__childrenWrapper"
+                                    >
+                                      <EuiValidatableControl
+                                        isInvalid={false}
+                                      >
+                                        <input
+                                          className="euiFieldSearch"
+                                          onChange={[Function]}
+                                          onKeyUp={[Function]}
+                                          placeholder="Service name"
+                                          type="search"
+                                          value=""
+                                        />
+                                      </EuiValidatableControl>
+                                      <EuiFormControlLayoutIcons
+                                        compressed={false}
+                                        icon="search"
+                                        isLoading={false}
+                                      >
+                                        <div
+                                          className="euiFormControlLayoutIcons"
+                                        >
+                                          <EuiFormControlLayoutCustomIcon
+                                            size="m"
+                                            type="search"
+                                          >
+                                            <span
+                                              className="euiFormControlLayoutCustomIcon"
+                                            >
+                                              <EuiIcon
+                                                aria-hidden="true"
+                                                className="euiFormControlLayoutCustomIcon__icon"
+                                                size="m"
+                                                type="search"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </span>
+                                          </EuiFormControlLayoutCustomIcon>
+                                        </div>
+                                      </EuiFormControlLayoutIcons>
+                                    </div>
+                                  </div>
+                                </EuiFormControlLayout>
+                              </EuiFieldSearch>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                      <EuiSpacer>
+                        <div
+                          className="euiSpacer euiSpacer--l"
+                        />
+                      </EuiSpacer>
+                      <div
+                        style={
+                          Object {
+                            "minHeight": 434,
+                          }
+                        }
+                      >
+                        <NoMatchMessage
+                          size="s"
+                        >
+                          <EuiSpacer
+                            size="s"
+                          >
+                            <div
+                              className="euiSpacer euiSpacer--s"
+                            />
+                          </EuiSpacer>
+                          <EuiEmptyPrompt
+                            body={
+                              <EuiText>
+                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                              </EuiText>
+                            }
+                            title={
+                              <h2>
+                                No matches
+                              </h2>
+                            }
+                          >
+                            <div
+                              className="euiEmptyPrompt"
+                            >
+                              <EuiTitle
+                                size="m"
+                              >
+                                <h2
+                                  className="euiTitle euiTitle--medium"
+                                >
+                                  No matches
+                                </h2>
+                              </EuiTitle>
+                              <EuiTextColor
+                                color="subdued"
+                              >
+                                <span
+                                  className="euiTextColor euiTextColor--subdued"
+                                >
+                                  <EuiSpacer
+                                    size="m"
+                                  >
+                                    <div
+                                      className="euiSpacer euiSpacer--m"
+                                    />
+                                  </EuiSpacer>
+                                  <EuiText>
+                                    <div
+                                      className="euiText euiText--medium"
+                                    >
+                                      <EuiText>
+                                        <div
+                                          className="euiText euiText--medium"
+                                        >
+                                          No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                        </div>
+                                      </EuiText>
+                                    </div>
+                                  </EuiText>
+                                </span>
+                              </EuiTextColor>
+                            </div>
+                          </EuiEmptyPrompt>
+                          <EuiSpacer
+                            size="s"
+                          >
+                            <div
+                              className="euiSpacer euiSpacer--s"
+                            />
+                          </EuiSpacer>
+                        </NoMatchMessage>
+                      </div>
+                    </div>
+                  </EuiPanel>
+                </ServiceMap>
+              </div>
+            </div>
+          </EuiResizeObserver>
+        </div>
+      </div>
+    </EuiAccordion>
+  </div>
+</ServiceConfig>
+`;
+
+exports[`Service Config component renders with one service selected 1`] = `
+<ServiceConfig
+  appConfigs={Array []}
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction],
+    }
+  }
+  description=""
+  dslService={
+    Object {
+      "fetch": [MockFunction],
+      "fetchFields": [MockFunction],
+      "fetchIndices": [MockFunction],
+      "http": [MockFunction],
+    }
+  }
+  endTime="now"
+  filters={
+    Array [
+      Object {
+        "disabled": false,
+        "field": "serviceName",
+        "inverted": false,
+        "operator": "is",
+        "value": "User",
+      },
+    ]
+  }
+  http={[MockFunction]}
+  indicesExist={true}
+  name=""
+  parentBreadcrumb={
+    Object {
+      "href": "test#/",
+      "text": "test",
+    }
+  }
+  query=""
+  selectedServices={Array []}
+  setAppConfigs={[MockFunction]}
+  setDescriptionWithStorage={[MockFunction]}
+  setEndTime={[MockFunction]}
+  setEndTimeWithStorage={[MockFunction]}
+  setFilters={[MockFunction]}
+  setFiltersWithStorage={[MockFunction]}
+  setNameWithStorage={[MockFunction]}
+  setQuery={[MockFunction]}
+  setQueryWithStorage={[MockFunction]}
+  setSelectedServices={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [
+            Object {
+              "label": "User",
+            },
+          ],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setStartTime={[MockFunction]}
+  setStartTimeWithStorage={[MockFunction]}
+  startTime="now-5m"
+>
+  <div>
+    <EuiAccordion
+      arrowDisplay="left"
+      buttonContent={
+        <React.Fragment>
+          <EuiText
+            size="s"
+          >
+            <h3>
+              Services & entities
+               
+              <EuiBadge
+                data-test-subj="servicesEntitiesCountBadge"
+              >
+                0
+              </EuiBadge>
+            </h3>
+          </EuiText>
+          <EuiSpacer
+            size="s"
+          />
+          <EuiText
+            color="subdued"
+            size="s"
+          >
+            Select services & entities to include in this application
+          </EuiText>
+        </React.Fragment>
+      }
+      data-test-subj="servicesEntitiesAccordion"
+      extraAction={
+        <EuiButton
+          data-test-subj="clearServicesEntitiesButton"
+          disabled={true}
+          onClick={[Function]}
+          size="s"
+        >
+          Clear all
+        </EuiButton>
+      }
+      id="servicesEntities"
+      initialIsOpen={false}
+      isLoading={false}
+      isLoadingMessage={false}
+      onToggle={[Function]}
+      paddingSize="l"
+    >
+      <div
+        className="euiAccordion"
+        data-test-subj="servicesEntitiesAccordion"
+        onToggle={[Function]}
+      >
+        <div
+          className="euiAccordion__triggerWrapper"
+        >
+          <button
+            aria-controls="servicesEntities"
+            aria-expanded={false}
+            className="euiAccordion__button"
+            id="random_html_id"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="euiAccordion__iconWrapper"
+            >
+              <EuiIcon
+                className="euiAccordion__icon"
+                size="m"
+                type="arrowRight"
+              >
+                <EuiIconArrowRight
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiAccordion__icon"
+                  focusable="false"
+                  role="img"
+                  style={null}
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiAccordion__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                      fillRule="nonzero"
+                    />
+                  </svg>
+                </EuiIconArrowRight>
+              </EuiIcon>
+            </span>
+            <span
+              className="euiIEFlexWrapFix"
+            >
+              <EuiText
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <h3>
+                    Services & entities
+                     
+                    <EuiBadge
+                      data-test-subj="servicesEntitiesCountBadge"
+                    >
+                      <EuiInnerText>
+                        <span
+                          className="euiBadge euiBadge--iconLeft"
+                          data-test-subj="servicesEntitiesCountBadge"
+                          style={
+                            Object {
+                              "backgroundColor": "#d3dae6",
+                              "color": "#000",
+                            }
+                          }
+                          title="0"
+                        >
+                          <span
+                            className="euiBadge__content"
+                          >
+                            0
+                          </span>
+                        </span>
+                      </EuiInnerText>
+                    </EuiBadge>
+                  </h3>
+                </div>
+              </EuiText>
+              <EuiSpacer
+                size="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <EuiText
+                color="subdued"
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <EuiTextColor
+                    color="subdued"
+                    component="div"
+                  >
+                    <div
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      Select services & entities to include in this application
+                    </div>
+                  </EuiTextColor>
+                </div>
+              </EuiText>
+            </span>
+          </button>
+          <div
+            className="euiAccordion__optionalAction"
+          >
+            <EuiButton
+              data-test-subj="clearServicesEntitiesButton"
+              disabled={true}
+              onClick={[Function]}
+              size="s"
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                data-test-subj="clearServicesEntitiesButton"
+                disabled={true}
+                element="button"
+                isDisabled={true}
+                onClick={[Function]}
+                size="s"
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                  data-test-subj="clearServicesEntitiesButton"
+                  disabled={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Clear all
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </div>
+        <div
+          aria-labelledby="random_html_id"
+          className="euiAccordion__childWrapper"
+          id="servicesEntities"
+          role="region"
+          tabIndex={-1}
+        >
+          <EuiResizeObserver
+            onResize={[Function]}
+          >
+            <div>
+              <div
+                className="euiAccordion__padding--l"
+              >
+                <EuiFormRow
+                  describedByIds={Array []}
+                  display="row"
+                  fullWidth={false}
+                  hasChildLabel={true}
+                  hasEmptyLabelSpace={false}
+                  label="Services & entities"
+                  labelType="label"
+                >
+                  <div
+                    className="euiFormRow"
+                    id="random_html_id-row"
+                  >
+                    <div
+                      className="euiFormRow__labelWrapper"
+                    >
+                      <EuiFormLabel
+                        className="euiFormRow__label"
+                        htmlFor="random_html_id"
+                        isFocused={false}
+                        type="label"
+                      >
+                        <label
+                          className="euiFormLabel euiFormRow__label"
+                          htmlFor="random_html_id"
+                        >
+                          Services & entities
+                        </label>
+                      </EuiFormLabel>
+                    </div>
+                    <div
+                      className="euiFormRow__fieldWrapper"
+                    >
+                      <EuiComboBox
+                        aria-label="Select services and entities"
+                        async={false}
+                        compressed={false}
+                        data-test-subj="servicesEntitiesComboBox"
+                        fullWidth={false}
+                        id="random_html_id"
+                        isClearable={false}
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        options={Array []}
+                        placeholder="Select services and entities"
+                        selectedOptions={Array []}
+                        singleSelection={false}
+                        sortMatchesBy="none"
+                      >
+                        <div
+                          aria-expanded={false}
+                          aria-haspopup="listbox"
+                          aria-label="Select services and entities"
+                          className="euiComboBox"
+                          data-test-subj="servicesEntitiesComboBox"
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          role="combobox"
+                        >
+                          <EuiComboBoxInput
+                            autoSizeInputRef={[Function]}
+                            compressed={false}
+                            fullWidth={false}
+                            hasSelectedOptions={false}
+                            id="random_html_id"
+                            inputRef={[Function]}
+                            isListOpen={false}
+                            noIcon={false}
+                            onChange={[Function]}
+                            onClick={[Function]}
+                            onCloseListClick={[Function]}
+                            onFocus={[Function]}
+                            onOpenListClick={[Function]}
+                            onRemoveOption={[Function]}
+                            placeholder="Select services and entities"
+                            rootId={[Function]}
+                            searchValue=""
+                            selectedOptions={Array []}
+                            singleSelection={false}
+                            toggleButtonRef={[Function]}
+                            updatePosition={[Function]}
+                            value=""
+                          >
+                            <EuiFormControlLayout
+                              compressed={false}
+                              fullWidth={false}
+                              icon={
+                                Object {
+                                  "aria-label": "Open list of options",
+                                  "data-test-subj": "comboBoxToggleListButton",
+                                  "disabled": undefined,
+                                  "onClick": [Function],
+                                  "ref": [Function],
+                                  "side": "right",
+                                  "type": "arrowDown",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiFormControlLayout"
+                              >
+                                <div
+                                  className="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    className="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    onClick={[Function]}
+                                    tabIndex={-1}
+                                  >
+                                    <p
+                                      className="euiComboBoxPlaceholder"
+                                    >
+                                      Select services and entities
+                                    </p>
+                                    <AutosizeInput
+                                      aria-controls=""
+                                      className="euiComboBox__input"
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      injectStyles={true}
+                                      inputRef={[Function]}
+                                      minWidth={1}
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "fontSize": 14,
+                                        }
+                                      }
+                                      value=""
+                                    >
+                                      <div
+                                        className="euiComboBox__input"
+                                        style={
+                                          Object {
+                                            "display": "inline-block",
+                                            "fontSize": 14,
+                                          }
+                                        }
+                                      >
+                                        <input
+                                          aria-controls=""
+                                          data-test-subj="comboBoxSearchInput"
+                                          id="random_html_id"
+                                          onBlur={[Function]}
+                                          onChange={[Function]}
+                                          onFocus={[Function]}
+                                          role="textbox"
+                                          style={
+                                            Object {
+                                              "boxSizing": "content-box",
+                                              "width": "2px",
+                                            }
+                                          }
+                                          value=""
+                                        />
+                                        <div
+                                          style={
+                                            Object {
+                                              "height": 0,
+                                              "left": 0,
+                                              "overflow": "scroll",
+                                              "position": "absolute",
+                                              "top": 0,
+                                              "visibility": "hidden",
+                                              "whiteSpace": "pre",
+                                            }
+                                          }
+                                        />
+                                      </div>
+                                    </AutosizeInput>
+                                  </div>
+                                  <EuiFormControlLayoutIcons
+                                    compressed={false}
+                                    icon={
+                                      Object {
+                                        "aria-label": "Open list of options",
+                                        "data-test-subj": "comboBoxToggleListButton",
+                                        "disabled": undefined,
+                                        "onClick": [Function],
+                                        "ref": [Function],
+                                        "side": "right",
+                                        "type": "arrowDown",
+                                      }
+                                    }
+                                  >
+                                    <div
+                                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                    >
+                                      <EuiFormControlLayoutCustomIcon
+                                        aria-label="Open list of options"
+                                        data-test-subj="comboBoxToggleListButton"
+                                        iconRef={[Function]}
+                                        onClick={[Function]}
+                                        size="m"
+                                        type="arrowDown"
+                                      >
+                                        <button
+                                          aria-label="Open list of options"
+                                          className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                          data-test-subj="comboBoxToggleListButton"
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <EuiIcon
+                                            aria-hidden="true"
+                                            className="euiFormControlLayoutCustomIcon__icon"
+                                            size="m"
+                                            type="arrowDown"
+                                          >
+                                            <EuiIconArrowDown
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                <path
+                                                  d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                  fillRule="non-zero"
+                                                />
+                                              </svg>
+                                            </EuiIconArrowDown>
+                                          </EuiIcon>
+                                        </button>
+                                      </EuiFormControlLayoutCustomIcon>
+                                    </div>
+                                  </EuiFormControlLayoutIcons>
+                                </div>
+                              </div>
+                            </EuiFormControlLayout>
+                          </EuiComboBoxInput>
+                        </div>
+                      </EuiComboBox>
+                    </div>
+                  </div>
+                </EuiFormRow>
+                <EuiSpacer>
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <ServiceMap
+                  addFilter={[Function]}
+                  idSelected="latency"
+                  page="appCreate"
+                  serviceMap={Object {}}
+                  setIdSelected={[Function]}
+                >
+                  <EuiPanel>
+                    <div
+                      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                    >
+                      <PanelTitle
+                        title="Service map"
+                      >
+                        <EuiText
+                          size="m"
+                        >
+                          <div
+                            className="euiText euiText--medium"
+                          >
+                            <span
+                              className="panel-title"
+                            >
+                              Service map
+                            </span>
+                          </div>
+                        </EuiText>
+                      </PanelTitle>
+                      <EuiSpacer
+                        size="m"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--m"
+                        />
+                      </EuiSpacer>
+                      <EuiButtonGroup
+                        buttonSize="s"
+                        color="text"
+                        idSelected="latency"
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "id": "latency",
+                              "label": "Latency",
+                            },
+                            Object {
+                              "id": "error_rate",
+                              "label": "Error rate",
+                            },
+                            Object {
+                              "id": "throughput",
+                              "label": "Throughput",
+                            },
+                          ]
+                        }
+                      >
+                        <fieldset
+                          className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                          disabled={false}
+                        >
+                          <EuiScreenReaderOnly>
+                            <legend
+                              className="euiScreenReaderOnly"
+                            />
+                          </EuiScreenReaderOnly>
+                          <div
+                            className="euiButtonGroup__buttons"
+                          >
+                            <EuiButtonGroupButton
+                              color="text"
+                              element="label"
+                              id="latency"
+                              isDisabled={false}
+                              isIconOnly={false}
+                              isSelected={true}
+                              key="0"
+                              label="Latency"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              size="s"
+                            >
+                              <EuiButtonDisplay
+                                baseClassName="euiButtonGroupButton"
+                                className="euiButtonGroupButton-isSelected"
+                                color="text"
+                                element="label"
+                                fill={true}
+                                htmlFor="random_html_id"
+                                isDisabled={false}
+                                onClick={[Function]}
+                                size="s"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonGroupButton__textShift",
+                                    "data-text": "Latency",
+                                    "ref": [Function],
+                                    "title": "Latency",
+                                  }
+                                }
+                              >
+                                <label
+                                  className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                                  disabled={false}
+                                  htmlFor="random_html_id"
+                                  onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text euiButtonGroupButton__textShift",
+                                        "data-text": "Latency",
+                                        "ref": [Function],
+                                        "title": "Latency",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButton__content"
+                                    >
+                                      <span
+                                        className="euiButton__text euiButtonGroupButton__textShift"
+                                        data-text="Latency"
+                                        title="Latency"
+                                      >
+                                        <input
+                                          checked={true}
+                                          className="euiScreenReaderOnly"
+                                          data-test-subj="latency"
+                                          disabled={false}
+                                          id="random_html_id"
+                                          name="random_html_id"
+                                          onChange={[Function]}
+                                          type="radio"
+                                        />
+                                        Latency
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </label>
+                              </EuiButtonDisplay>
+                            </EuiButtonGroupButton>
+                            <EuiButtonGroupButton
+                              color="text"
+                              element="label"
+                              id="error_rate"
+                              isDisabled={false}
+                              isIconOnly={false}
+                              isSelected={false}
+                              key="1"
+                              label="Error rate"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              size="s"
+                            >
+                              <EuiButtonDisplay
+                                baseClassName="euiButtonGroupButton"
+                                className=""
+                                color="text"
+                                element="label"
+                                fill={false}
+                                htmlFor="random_html_id"
+                                isDisabled={false}
+                                onClick={[Function]}
+                                size="s"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonGroupButton__textShift",
+                                    "data-text": "Error rate",
+                                    "ref": [Function],
+                                    "title": "Error rate",
+                                  }
+                                }
+                              >
+                                <label
+                                  className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                  disabled={false}
+                                  htmlFor="random_html_id"
+                                  onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text euiButtonGroupButton__textShift",
+                                        "data-text": "Error rate",
+                                        "ref": [Function],
+                                        "title": "Error rate",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButton__content"
+                                    >
+                                      <span
+                                        className="euiButton__text euiButtonGroupButton__textShift"
+                                        data-text="Error rate"
+                                        title="Error rate"
+                                      >
+                                        <input
+                                          checked={false}
+                                          className="euiScreenReaderOnly"
+                                          data-test-subj="error_rate"
+                                          disabled={false}
+                                          id="random_html_id"
+                                          name="random_html_id"
+                                          onChange={[Function]}
+                                          type="radio"
+                                        />
+                                        Error rate
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </label>
+                              </EuiButtonDisplay>
+                            </EuiButtonGroupButton>
+                            <EuiButtonGroupButton
+                              color="text"
+                              element="label"
+                              id="throughput"
+                              isDisabled={false}
+                              isIconOnly={false}
+                              isSelected={false}
+                              key="2"
+                              label="Throughput"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              size="s"
+                            >
+                              <EuiButtonDisplay
+                                baseClassName="euiButtonGroupButton"
+                                className=""
+                                color="text"
+                                element="label"
+                                fill={false}
+                                htmlFor="random_html_id"
+                                isDisabled={false}
+                                onClick={[Function]}
+                                size="s"
+                                textProps={
+                                  Object {
+                                    "className": "euiButtonGroupButton__textShift",
+                                    "data-text": "Throughput",
+                                    "ref": [Function],
+                                    "title": "Throughput",
+                                  }
+                                }
+                              >
+                                <label
+                                  className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                  disabled={false}
+                                  htmlFor="random_html_id"
+                                  onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text euiButtonGroupButton__textShift",
+                                        "data-text": "Throughput",
+                                        "ref": [Function],
+                                        "title": "Throughput",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButton__content"
+                                    >
+                                      <span
+                                        className="euiButton__text euiButtonGroupButton__textShift"
+                                        data-text="Throughput"
+                                        title="Throughput"
+                                      >
+                                        <input
+                                          checked={false}
+                                          className="euiScreenReaderOnly"
+                                          data-test-subj="throughput"
+                                          disabled={false}
+                                          id="random_html_id"
+                                          name="random_html_id"
+                                          onChange={[Function]}
+                                          type="radio"
+                                        />
+                                        Throughput
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </label>
+                              </EuiButtonDisplay>
+                            </EuiButtonGroupButton>
+                          </div>
+                        </fieldset>
+                      </EuiButtonGroup>
+                      <EuiHorizontalRule
+                        margin="m"
+                      >
+                        <hr
+                          className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                        />
+                      </EuiHorizontalRule>
+                      <EuiFlexGroup
+                        alignItems="center"
+                        gutterSize="s"
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <EuiText>
+                                <div
+                                  className="euiText euiText--medium"
+                                >
+                                  Focus on
+                                </div>
+                              </EuiText>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem>
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiFieldSearch
+                                compressed={false}
+                                fullWidth={false}
+                                incremental={false}
+                                isClearable={true}
+                                isInvalid={false}
+                                isLoading={false}
+                                onChange={[Function]}
+                                onSearch={[Function]}
+                                placeholder="Service name"
+                                value=""
+                              >
+                                <EuiFormControlLayout
+                                  compressed={false}
+                                  fullWidth={false}
+                                  icon="search"
+                                  isLoading={false}
+                                >
+                                  <div
+                                    className="euiFormControlLayout"
+                                  >
+                                    <div
+                                      className="euiFormControlLayout__childrenWrapper"
+                                    >
+                                      <EuiValidatableControl
+                                        isInvalid={false}
+                                      >
+                                        <input
+                                          className="euiFieldSearch"
+                                          onChange={[Function]}
+                                          onKeyUp={[Function]}
+                                          placeholder="Service name"
+                                          type="search"
+                                          value=""
+                                        />
+                                      </EuiValidatableControl>
+                                      <EuiFormControlLayoutIcons
+                                        compressed={false}
+                                        icon="search"
+                                        isLoading={false}
+                                      >
+                                        <div
+                                          className="euiFormControlLayoutIcons"
+                                        >
+                                          <EuiFormControlLayoutCustomIcon
+                                            size="m"
+                                            type="search"
+                                          >
+                                            <span
+                                              className="euiFormControlLayoutCustomIcon"
+                                            >
+                                              <EuiIcon
+                                                aria-hidden="true"
+                                                className="euiFormControlLayoutCustomIcon__icon"
+                                                size="m"
+                                                type="search"
+                                              >
+                                                <EuiIconSearch
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                                    />
+                                                  </svg>
+                                                </EuiIconSearch>
+                                              </EuiIcon>
+                                            </span>
+                                          </EuiFormControlLayoutCustomIcon>
+                                        </div>
+                                      </EuiFormControlLayoutIcons>
+                                    </div>
+                                  </div>
+                                </EuiFormControlLayout>
+                              </EuiFieldSearch>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                      <EuiSpacer>
+                        <div
+                          className="euiSpacer euiSpacer--l"
+                        />
+                      </EuiSpacer>
+                      <div
+                        style={
+                          Object {
+                            "minHeight": 434,
+                          }
+                        }
+                      >
+                        <NoMatchMessage
+                          size="s"
+                        >
+                          <EuiSpacer
+                            size="s"
+                          >
+                            <div
+                              className="euiSpacer euiSpacer--s"
+                            />
+                          </EuiSpacer>
+                          <EuiEmptyPrompt
+                            body={
+                              <EuiText>
+                                No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                              </EuiText>
+                            }
+                            title={
+                              <h2>
+                                No matches
+                              </h2>
+                            }
+                          >
+                            <div
+                              className="euiEmptyPrompt"
+                            >
+                              <EuiTitle
+                                size="m"
+                              >
+                                <h2
+                                  className="euiTitle euiTitle--medium"
+                                >
+                                  No matches
+                                </h2>
+                              </EuiTitle>
+                              <EuiTextColor
+                                color="subdued"
+                              >
+                                <span
+                                  className="euiTextColor euiTextColor--subdued"
+                                >
+                                  <EuiSpacer
+                                    size="m"
+                                  >
+                                    <div
+                                      className="euiSpacer euiSpacer--m"
+                                    />
+                                  </EuiSpacer>
+                                  <EuiText>
+                                    <div
+                                      className="euiText euiText--medium"
+                                    >
+                                      <EuiText>
+                                        <div
+                                          className="euiText euiText--medium"
+                                        >
+                                          No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                        </div>
+                                      </EuiText>
+                                    </div>
+                                  </EuiText>
+                                </span>
+                              </EuiTextColor>
+                            </div>
+                          </EuiEmptyPrompt>
+                          <EuiSpacer
+                            size="s"
+                          >
+                            <div
+                              className="euiSpacer euiSpacer--s"
+                            />
+                          </EuiSpacer>
+                        </NoMatchMessage>
+                      </div>
+                    </div>
+                  </EuiPanel>
+                </ServiceMap>
+              </div>
+            </div>
+          </EuiResizeObserver>
+        </div>
+      </div>
+    </EuiAccordion>
+  </div>
+</ServiceConfig>
+`;
diff --git a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
new file mode 100644
index 0000000000..ef6b391eeb
--- /dev/null
+++ b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
@@ -0,0 +1,1613 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Trace Config component renders empty trace config 1`] = `
+<TraceConfig
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction],
+    }
+  }
+  description=""
+  dslService={
+    Object {
+      "fetch": [MockFunction],
+      "fetchFields": [MockFunction],
+      "fetchIndices": [MockFunction],
+      "http": [MockFunction],
+    }
+  }
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  indicesExist={true}
+  name=""
+  parentBreadcrumb={
+    Object {
+      "href": "test#/",
+      "text": "test",
+    }
+  }
+  query=""
+  selectedTraces={Array []}
+  setDescriptionWithStorage={[MockFunction]}
+  setEndTime={[MockFunction]}
+  setFilters={[MockFunction]}
+  setFiltersWithStorage={[MockFunction]}
+  setNameWithStorage={[MockFunction]}
+  setQuery={[MockFunction]}
+  setQueryWithStorage={[MockFunction]}
+  setSelectedTraces={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+>
+  <div>
+    <EuiAccordion
+      arrowDisplay="left"
+      buttonContent={
+        <React.Fragment>
+          <EuiText
+            size="s"
+          >
+            <h3>
+              Trace groups
+               
+              <EuiBadge
+                data-test-subj="traceGroupsCountBadge"
+              >
+                0
+              </EuiBadge>
+            </h3>
+          </EuiText>
+          <EuiSpacer
+            size="s"
+          />
+          <EuiText
+            color="subdued"
+            size="s"
+          >
+            Constrain your application to specific trace groups
+          </EuiText>
+        </React.Fragment>
+      }
+      data-test-subj="traceGroupsAccordion"
+      extraAction={
+        <EuiButton
+          data-test-subj="clearTraceGroupsButton"
+          disabled={true}
+          onClick={[Function]}
+          size="s"
+        >
+          Clear all
+        </EuiButton>
+      }
+      id="traceGroups"
+      initialIsOpen={false}
+      isLoading={false}
+      isLoadingMessage={false}
+      onToggle={[Function]}
+      paddingSize="l"
+    >
+      <div
+        className="euiAccordion"
+        data-test-subj="traceGroupsAccordion"
+        onToggle={[Function]}
+      >
+        <div
+          className="euiAccordion__triggerWrapper"
+        >
+          <button
+            aria-controls="traceGroups"
+            aria-expanded={false}
+            className="euiAccordion__button"
+            id="random_html_id"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="euiAccordion__iconWrapper"
+            >
+              <EuiIcon
+                className="euiAccordion__icon"
+                size="m"
+                type="arrowRight"
+              >
+                <EuiIconEmpty
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                  focusable="false"
+                  role="img"
+                  style={null}
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </EuiIconEmpty>
+              </EuiIcon>
+            </span>
+            <span
+              className="euiIEFlexWrapFix"
+            >
+              <EuiText
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <h3>
+                    Trace groups
+                     
+                    <EuiBadge
+                      data-test-subj="traceGroupsCountBadge"
+                    >
+                      <EuiInnerText>
+                        <span
+                          className="euiBadge euiBadge--iconLeft"
+                          data-test-subj="traceGroupsCountBadge"
+                          style={
+                            Object {
+                              "backgroundColor": "#d3dae6",
+                              "color": "#000",
+                            }
+                          }
+                          title="0"
+                        >
+                          <span
+                            className="euiBadge__content"
+                          >
+                            0
+                          </span>
+                        </span>
+                      </EuiInnerText>
+                    </EuiBadge>
+                  </h3>
+                </div>
+              </EuiText>
+              <EuiSpacer
+                size="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <EuiText
+                color="subdued"
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <EuiTextColor
+                    color="subdued"
+                    component="div"
+                  >
+                    <div
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      Constrain your application to specific trace groups
+                    </div>
+                  </EuiTextColor>
+                </div>
+              </EuiText>
+            </span>
+          </button>
+          <div
+            className="euiAccordion__optionalAction"
+          >
+            <EuiButton
+              data-test-subj="clearTraceGroupsButton"
+              disabled={true}
+              onClick={[Function]}
+              size="s"
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                data-test-subj="clearTraceGroupsButton"
+                disabled={true}
+                element="button"
+                isDisabled={true}
+                onClick={[Function]}
+                size="s"
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                  data-test-subj="clearTraceGroupsButton"
+                  disabled={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Clear all
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </div>
+        <div
+          aria-labelledby="random_html_id"
+          className="euiAccordion__childWrapper"
+          id="traceGroups"
+          role="region"
+          tabIndex={-1}
+        >
+          <EuiResizeObserver
+            onResize={[Function]}
+          >
+            <div>
+              <div
+                className="euiAccordion__padding--l"
+              >
+                <EuiFormRow
+                  describedByIds={Array []}
+                  display="row"
+                  fullWidth={false}
+                  hasChildLabel={true}
+                  hasEmptyLabelSpace={false}
+                  helpText="Select one or multiple trace groups, or type a custom one"
+                  label="Trace Groups"
+                  labelType="label"
+                >
+                  <div
+                    className="euiFormRow"
+                    id="random_html_id-row"
+                  >
+                    <div
+                      className="euiFormRow__labelWrapper"
+                    >
+                      <EuiFormLabel
+                        className="euiFormRow__label"
+                        htmlFor="random_html_id"
+                        isFocused={false}
+                        type="label"
+                      >
+                        <label
+                          className="euiFormLabel euiFormRow__label"
+                          htmlFor="random_html_id"
+                        >
+                          Trace Groups
+                        </label>
+                      </EuiFormLabel>
+                    </div>
+                    <div
+                      className="euiFormRow__fieldWrapper"
+                    >
+                      <EuiComboBox
+                        aria-describedby="random_html_id-help-0"
+                        aria-label="Select trace groups"
+                        async={false}
+                        compressed={false}
+                        data-test-subj="traceGroupsComboBox"
+                        fullWidth={false}
+                        id="random_html_id"
+                        isClearable={false}
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onCreateOption={[Function]}
+                        onFocus={[Function]}
+                        options={Array []}
+                        placeholder="Select or add trace groups"
+                        selectedOptions={Array []}
+                        singleSelection={false}
+                        sortMatchesBy="none"
+                      >
+                        <div
+                          aria-describedby="random_html_id-help-0"
+                          aria-expanded={false}
+                          aria-haspopup="listbox"
+                          aria-label="Select trace groups"
+                          className="euiComboBox"
+                          data-test-subj="traceGroupsComboBox"
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          role="combobox"
+                        >
+                          <EuiComboBoxInput
+                            autoSizeInputRef={[Function]}
+                            compressed={false}
+                            fullWidth={false}
+                            hasSelectedOptions={false}
+                            id="random_html_id"
+                            inputRef={[Function]}
+                            isListOpen={false}
+                            noIcon={false}
+                            onChange={[Function]}
+                            onClick={[Function]}
+                            onCloseListClick={[Function]}
+                            onFocus={[Function]}
+                            onOpenListClick={[Function]}
+                            onRemoveOption={[Function]}
+                            placeholder="Select or add trace groups"
+                            rootId={[Function]}
+                            searchValue=""
+                            selectedOptions={Array []}
+                            singleSelection={false}
+                            toggleButtonRef={[Function]}
+                            updatePosition={[Function]}
+                            value=""
+                          >
+                            <EuiFormControlLayout
+                              compressed={false}
+                              fullWidth={false}
+                              icon={
+                                Object {
+                                  "aria-label": "Open list of options",
+                                  "data-test-subj": "comboBoxToggleListButton",
+                                  "disabled": undefined,
+                                  "onClick": [Function],
+                                  "ref": [Function],
+                                  "side": "right",
+                                  "type": "arrowDown",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiFormControlLayout"
+                              >
+                                <div
+                                  className="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    className="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    onClick={[Function]}
+                                    tabIndex={-1}
+                                  >
+                                    <p
+                                      className="euiComboBoxPlaceholder"
+                                    >
+                                      Select or add trace groups
+                                    </p>
+                                    <AutosizeInput
+                                      aria-controls=""
+                                      className="euiComboBox__input"
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      injectStyles={true}
+                                      inputRef={[Function]}
+                                      minWidth={1}
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "fontSize": 14,
+                                        }
+                                      }
+                                      value=""
+                                    >
+                                      <div
+                                        className="euiComboBox__input"
+                                        style={
+                                          Object {
+                                            "display": "inline-block",
+                                            "fontSize": 14,
+                                          }
+                                        }
+                                      >
+                                        <input
+                                          aria-controls=""
+                                          data-test-subj="comboBoxSearchInput"
+                                          id="random_html_id"
+                                          onBlur={[Function]}
+                                          onChange={[Function]}
+                                          onFocus={[Function]}
+                                          role="textbox"
+                                          style={
+                                            Object {
+                                              "boxSizing": "content-box",
+                                              "width": "2px",
+                                            }
+                                          }
+                                          value=""
+                                        />
+                                        <div
+                                          style={
+                                            Object {
+                                              "height": 0,
+                                              "left": 0,
+                                              "overflow": "scroll",
+                                              "position": "absolute",
+                                              "top": 0,
+                                              "visibility": "hidden",
+                                              "whiteSpace": "pre",
+                                            }
+                                          }
+                                        />
+                                      </div>
+                                    </AutosizeInput>
+                                  </div>
+                                  <EuiFormControlLayoutIcons
+                                    compressed={false}
+                                    icon={
+                                      Object {
+                                        "aria-label": "Open list of options",
+                                        "data-test-subj": "comboBoxToggleListButton",
+                                        "disabled": undefined,
+                                        "onClick": [Function],
+                                        "ref": [Function],
+                                        "side": "right",
+                                        "type": "arrowDown",
+                                      }
+                                    }
+                                  >
+                                    <div
+                                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                    >
+                                      <EuiFormControlLayoutCustomIcon
+                                        aria-label="Open list of options"
+                                        data-test-subj="comboBoxToggleListButton"
+                                        iconRef={[Function]}
+                                        onClick={[Function]}
+                                        size="m"
+                                        type="arrowDown"
+                                      >
+                                        <button
+                                          aria-label="Open list of options"
+                                          className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                          data-test-subj="comboBoxToggleListButton"
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <EuiIcon
+                                            aria-hidden="true"
+                                            className="euiFormControlLayoutCustomIcon__icon"
+                                            size="m"
+                                            type="arrowDown"
+                                          >
+                                            <EuiIconEmpty
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              />
+                                            </EuiIconEmpty>
+                                          </EuiIcon>
+                                        </button>
+                                      </EuiFormControlLayoutCustomIcon>
+                                    </div>
+                                  </EuiFormControlLayoutIcons>
+                                </div>
+                              </div>
+                            </EuiFormControlLayout>
+                          </EuiComboBoxInput>
+                        </div>
+                      </EuiComboBox>
+                      <EuiFormHelpText
+                        className="euiFormRow__text"
+                        id="random_html_id-help-0"
+                        key="Select one or multiple trace groups, or type a custom one"
+                      >
+                        <div
+                          className="euiFormHelpText euiFormRow__text"
+                          id="random_html_id-help-0"
+                        >
+                          Select one or multiple trace groups, or type a custom one
+                        </div>
+                      </EuiFormHelpText>
+                    </div>
+                  </div>
+                </EuiFormRow>
+                <EuiSpacer>
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <DashboardTable
+                  addFilter={[Function]}
+                  addPercentileFilter={[Function]}
+                  filters={Array []}
+                  items={Array []}
+                  loading={true}
+                  page="app"
+                  setRedirect={[Function]}
+                >
+                  <EuiPanel>
+                    <div
+                      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                    >
+                      <EuiFlexGroup
+                        alignItems="center"
+                        gutterSize="s"
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <EuiFlexItem
+                            grow={10}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrow10"
+                            >
+                              <PanelTitle
+                                title="Latency by trace group"
+                                totalItems={0}
+                              >
+                                <EuiText
+                                  size="m"
+                                >
+                                  <div
+                                    className="euiText euiText--medium"
+                                  >
+                                    <span
+                                      className="panel-title"
+                                    >
+                                      Latency by trace group
+                                    </span>
+                                    <span
+                                      className="panel-title-count"
+                                    >
+                                       (0)
+                                    </span>
+                                  </div>
+                                </EuiText>
+                              </PanelTitle>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <EuiLink
+                                data-test-subj="dashboard-table-percentile-button-1"
+                                onClick={[Function]}
+                              >
+                                <button
+                                  className="euiLink euiLink--primary"
+                                  data-test-subj="dashboard-table-percentile-button-1"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <EuiText
+                                    size="xs"
+                                  >
+                                    <div
+                                      className="euiText euiText--extraSmall"
+                                    >
+                                      <span
+                                        style={
+                                          Object {
+                                            "color": "#957ac9",
+                                          }
+                                        }
+                                      >
+                                        □
+                                      </span>
+                                       &lt; 95 percentile
+                                    </div>
+                                  </EuiText>
+                                </button>
+                              </EuiLink>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={1}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <EuiLink
+                                data-test-subj="dashboard-table-percentile-button-2"
+                                onClick={[Function]}
+                              >
+                                <button
+                                  className="euiLink euiLink--primary"
+                                  data-test-subj="dashboard-table-percentile-button-2"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <EuiText
+                                    size="xs"
+                                  >
+                                    <div
+                                      className="euiText euiText--extraSmall"
+                                    >
+                                      <span
+                                        style={
+                                          Object {
+                                            "color": "#957ac9",
+                                          }
+                                        }
+                                      >
+                                        ■
+                                      </span>
+                                       &gt;= 95 percentile
+                                    </div>
+                                  </EuiText>
+                                </button>
+                              </EuiLink>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={1}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                      <EuiSpacer
+                        size="m"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--m"
+                        />
+                      </EuiSpacer>
+                      <EuiHorizontalRule
+                        margin="none"
+                      >
+                        <hr
+                          className="euiHorizontalRule euiHorizontalRule--full"
+                        />
+                      </EuiHorizontalRule>
+                      <NoMatchMessage
+                        size="xl"
+                      >
+                        <EuiSpacer
+                          size="xl"
+                        >
+                          <div
+                            className="euiSpacer euiSpacer--xl"
+                          />
+                        </EuiSpacer>
+                        <EuiEmptyPrompt
+                          body={
+                            <EuiText>
+                              No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                            </EuiText>
+                          }
+                          title={
+                            <h2>
+                              No matches
+                            </h2>
+                          }
+                        >
+                          <div
+                            className="euiEmptyPrompt"
+                          >
+                            <EuiTitle
+                              size="m"
+                            >
+                              <h2
+                                className="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                            </EuiTitle>
+                            <EuiTextColor
+                              color="subdued"
+                            >
+                              <span
+                                className="euiTextColor euiTextColor--subdued"
+                              >
+                                <EuiSpacer
+                                  size="m"
+                                >
+                                  <div
+                                    className="euiSpacer euiSpacer--m"
+                                  />
+                                </EuiSpacer>
+                                <EuiText>
+                                  <div
+                                    className="euiText euiText--medium"
+                                  >
+                                    <EuiText>
+                                      <div
+                                        className="euiText euiText--medium"
+                                      >
+                                        No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                      </div>
+                                    </EuiText>
+                                  </div>
+                                </EuiText>
+                              </span>
+                            </EuiTextColor>
+                          </div>
+                        </EuiEmptyPrompt>
+                        <EuiSpacer
+                          size="xl"
+                        >
+                          <div
+                            className="euiSpacer euiSpacer--xl"
+                          />
+                        </EuiSpacer>
+                      </NoMatchMessage>
+                    </div>
+                  </EuiPanel>
+                </DashboardTable>
+              </div>
+            </div>
+          </EuiResizeObserver>
+        </div>
+      </div>
+    </EuiAccordion>
+  </div>
+</TraceConfig>
+`;
+
+exports[`Trace Config component renders with one trace selected 1`] = `
+<TraceConfig
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction],
+    }
+  }
+  description=""
+  dslService={
+    Object {
+      "fetch": [MockFunction],
+      "fetchFields": [MockFunction],
+      "fetchIndices": [MockFunction],
+      "http": [MockFunction],
+    }
+  }
+  endTime="now"
+  filters={
+    Array [
+      Object {
+        "disabled": false,
+        "field": "traceGroup",
+        "inverted": false,
+        "operator": "is",
+        "value": "test.auto",
+      },
+    ]
+  }
+  http={[MockFunction]}
+  indicesExist={true}
+  name=""
+  parentBreadcrumb={
+    Object {
+      "href": "test#/",
+      "text": "test",
+    }
+  }
+  query=""
+  selectedTraces={Array []}
+  setDescriptionWithStorage={[MockFunction]}
+  setEndTime={[MockFunction]}
+  setFilters={[MockFunction]}
+  setFiltersWithStorage={[MockFunction]}
+  setNameWithStorage={[MockFunction]}
+  setQuery={[MockFunction]}
+  setQueryWithStorage={[MockFunction]}
+  setSelectedTraces={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [
+            Object {
+              "label": "test.auto",
+            },
+          ],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+>
+  <div>
+    <EuiAccordion
+      arrowDisplay="left"
+      buttonContent={
+        <React.Fragment>
+          <EuiText
+            size="s"
+          >
+            <h3>
+              Trace groups
+               
+              <EuiBadge
+                data-test-subj="traceGroupsCountBadge"
+              >
+                0
+              </EuiBadge>
+            </h3>
+          </EuiText>
+          <EuiSpacer
+            size="s"
+          />
+          <EuiText
+            color="subdued"
+            size="s"
+          >
+            Constrain your application to specific trace groups
+          </EuiText>
+        </React.Fragment>
+      }
+      data-test-subj="traceGroupsAccordion"
+      extraAction={
+        <EuiButton
+          data-test-subj="clearTraceGroupsButton"
+          disabled={true}
+          onClick={[Function]}
+          size="s"
+        >
+          Clear all
+        </EuiButton>
+      }
+      id="traceGroups"
+      initialIsOpen={false}
+      isLoading={false}
+      isLoadingMessage={false}
+      onToggle={[Function]}
+      paddingSize="l"
+    >
+      <div
+        className="euiAccordion"
+        data-test-subj="traceGroupsAccordion"
+        onToggle={[Function]}
+      >
+        <div
+          className="euiAccordion__triggerWrapper"
+        >
+          <button
+            aria-controls="traceGroups"
+            aria-expanded={false}
+            className="euiAccordion__button"
+            id="random_html_id"
+            onClick={[Function]}
+            type="button"
+          >
+            <span
+              className="euiAccordion__iconWrapper"
+            >
+              <EuiIcon
+                className="euiAccordion__icon"
+                size="m"
+                type="arrowRight"
+              >
+                <EuiIconArrowRight
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiAccordion__icon"
+                  focusable="false"
+                  role="img"
+                  style={null}
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiAccordion__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
+                      fillRule="nonzero"
+                    />
+                  </svg>
+                </EuiIconArrowRight>
+              </EuiIcon>
+            </span>
+            <span
+              className="euiIEFlexWrapFix"
+            >
+              <EuiText
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <h3>
+                    Trace groups
+                     
+                    <EuiBadge
+                      data-test-subj="traceGroupsCountBadge"
+                    >
+                      <EuiInnerText>
+                        <span
+                          className="euiBadge euiBadge--iconLeft"
+                          data-test-subj="traceGroupsCountBadge"
+                          style={
+                            Object {
+                              "backgroundColor": "#d3dae6",
+                              "color": "#000",
+                            }
+                          }
+                          title="0"
+                        >
+                          <span
+                            className="euiBadge__content"
+                          >
+                            0
+                          </span>
+                        </span>
+                      </EuiInnerText>
+                    </EuiBadge>
+                  </h3>
+                </div>
+              </EuiText>
+              <EuiSpacer
+                size="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <EuiText
+                color="subdued"
+                size="s"
+              >
+                <div
+                  className="euiText euiText--small"
+                >
+                  <EuiTextColor
+                    color="subdued"
+                    component="div"
+                  >
+                    <div
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      Constrain your application to specific trace groups
+                    </div>
+                  </EuiTextColor>
+                </div>
+              </EuiText>
+            </span>
+          </button>
+          <div
+            className="euiAccordion__optionalAction"
+          >
+            <EuiButton
+              data-test-subj="clearTraceGroupsButton"
+              disabled={true}
+              onClick={[Function]}
+              size="s"
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                data-test-subj="clearTraceGroupsButton"
+                disabled={true}
+                element="button"
+                isDisabled={true}
+                onClick={[Function]}
+                size="s"
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                  data-test-subj="clearTraceGroupsButton"
+                  disabled={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Clear all
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </div>
+        <div
+          aria-labelledby="random_html_id"
+          className="euiAccordion__childWrapper"
+          id="traceGroups"
+          role="region"
+          tabIndex={-1}
+        >
+          <EuiResizeObserver
+            onResize={[Function]}
+          >
+            <div>
+              <div
+                className="euiAccordion__padding--l"
+              >
+                <EuiFormRow
+                  describedByIds={Array []}
+                  display="row"
+                  fullWidth={false}
+                  hasChildLabel={true}
+                  hasEmptyLabelSpace={false}
+                  helpText="Select one or multiple trace groups, or type a custom one"
+                  label="Trace Groups"
+                  labelType="label"
+                >
+                  <div
+                    className="euiFormRow"
+                    id="random_html_id-row"
+                  >
+                    <div
+                      className="euiFormRow__labelWrapper"
+                    >
+                      <EuiFormLabel
+                        className="euiFormRow__label"
+                        htmlFor="random_html_id"
+                        isFocused={false}
+                        type="label"
+                      >
+                        <label
+                          className="euiFormLabel euiFormRow__label"
+                          htmlFor="random_html_id"
+                        >
+                          Trace Groups
+                        </label>
+                      </EuiFormLabel>
+                    </div>
+                    <div
+                      className="euiFormRow__fieldWrapper"
+                    >
+                      <EuiComboBox
+                        aria-describedby="random_html_id-help-0"
+                        aria-label="Select trace groups"
+                        async={false}
+                        compressed={false}
+                        data-test-subj="traceGroupsComboBox"
+                        fullWidth={false}
+                        id="random_html_id"
+                        isClearable={false}
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onCreateOption={[Function]}
+                        onFocus={[Function]}
+                        options={Array []}
+                        placeholder="Select or add trace groups"
+                        selectedOptions={Array []}
+                        singleSelection={false}
+                        sortMatchesBy="none"
+                      >
+                        <div
+                          aria-describedby="random_html_id-help-0"
+                          aria-expanded={false}
+                          aria-haspopup="listbox"
+                          aria-label="Select trace groups"
+                          className="euiComboBox"
+                          data-test-subj="traceGroupsComboBox"
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          role="combobox"
+                        >
+                          <EuiComboBoxInput
+                            autoSizeInputRef={[Function]}
+                            compressed={false}
+                            fullWidth={false}
+                            hasSelectedOptions={false}
+                            id="random_html_id"
+                            inputRef={[Function]}
+                            isListOpen={false}
+                            noIcon={false}
+                            onChange={[Function]}
+                            onClick={[Function]}
+                            onCloseListClick={[Function]}
+                            onFocus={[Function]}
+                            onOpenListClick={[Function]}
+                            onRemoveOption={[Function]}
+                            placeholder="Select or add trace groups"
+                            rootId={[Function]}
+                            searchValue=""
+                            selectedOptions={Array []}
+                            singleSelection={false}
+                            toggleButtonRef={[Function]}
+                            updatePosition={[Function]}
+                            value=""
+                          >
+                            <EuiFormControlLayout
+                              compressed={false}
+                              fullWidth={false}
+                              icon={
+                                Object {
+                                  "aria-label": "Open list of options",
+                                  "data-test-subj": "comboBoxToggleListButton",
+                                  "disabled": undefined,
+                                  "onClick": [Function],
+                                  "ref": [Function],
+                                  "side": "right",
+                                  "type": "arrowDown",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiFormControlLayout"
+                              >
+                                <div
+                                  className="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <div
+                                    className="euiComboBox__inputWrap"
+                                    data-test-subj="comboBoxInput"
+                                    onClick={[Function]}
+                                    tabIndex={-1}
+                                  >
+                                    <p
+                                      className="euiComboBoxPlaceholder"
+                                    >
+                                      Select or add trace groups
+                                    </p>
+                                    <AutosizeInput
+                                      aria-controls=""
+                                      className="euiComboBox__input"
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      injectStyles={true}
+                                      inputRef={[Function]}
+                                      minWidth={1}
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "fontSize": 14,
+                                        }
+                                      }
+                                      value=""
+                                    >
+                                      <div
+                                        className="euiComboBox__input"
+                                        style={
+                                          Object {
+                                            "display": "inline-block",
+                                            "fontSize": 14,
+                                          }
+                                        }
+                                      >
+                                        <input
+                                          aria-controls=""
+                                          data-test-subj="comboBoxSearchInput"
+                                          id="random_html_id"
+                                          onBlur={[Function]}
+                                          onChange={[Function]}
+                                          onFocus={[Function]}
+                                          role="textbox"
+                                          style={
+                                            Object {
+                                              "boxSizing": "content-box",
+                                              "width": "2px",
+                                            }
+                                          }
+                                          value=""
+                                        />
+                                        <div
+                                          style={
+                                            Object {
+                                              "height": 0,
+                                              "left": 0,
+                                              "overflow": "scroll",
+                                              "position": "absolute",
+                                              "top": 0,
+                                              "visibility": "hidden",
+                                              "whiteSpace": "pre",
+                                            }
+                                          }
+                                        />
+                                      </div>
+                                    </AutosizeInput>
+                                  </div>
+                                  <EuiFormControlLayoutIcons
+                                    compressed={false}
+                                    icon={
+                                      Object {
+                                        "aria-label": "Open list of options",
+                                        "data-test-subj": "comboBoxToggleListButton",
+                                        "disabled": undefined,
+                                        "onClick": [Function],
+                                        "ref": [Function],
+                                        "side": "right",
+                                        "type": "arrowDown",
+                                      }
+                                    }
+                                  >
+                                    <div
+                                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                    >
+                                      <EuiFormControlLayoutCustomIcon
+                                        aria-label="Open list of options"
+                                        data-test-subj="comboBoxToggleListButton"
+                                        iconRef={[Function]}
+                                        onClick={[Function]}
+                                        size="m"
+                                        type="arrowDown"
+                                      >
+                                        <button
+                                          aria-label="Open list of options"
+                                          className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                          data-test-subj="comboBoxToggleListButton"
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <EuiIcon
+                                            aria-hidden="true"
+                                            className="euiFormControlLayoutCustomIcon__icon"
+                                            size="m"
+                                            type="arrowDown"
+                                          >
+                                            <EuiIconArrowDown
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                <path
+                                                  d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                  fillRule="non-zero"
+                                                />
+                                              </svg>
+                                            </EuiIconArrowDown>
+                                          </EuiIcon>
+                                        </button>
+                                      </EuiFormControlLayoutCustomIcon>
+                                    </div>
+                                  </EuiFormControlLayoutIcons>
+                                </div>
+                              </div>
+                            </EuiFormControlLayout>
+                          </EuiComboBoxInput>
+                        </div>
+                      </EuiComboBox>
+                      <EuiFormHelpText
+                        className="euiFormRow__text"
+                        id="random_html_id-help-0"
+                        key="Select one or multiple trace groups, or type a custom one"
+                      >
+                        <div
+                          className="euiFormHelpText euiFormRow__text"
+                          id="random_html_id-help-0"
+                        >
+                          Select one or multiple trace groups, or type a custom one
+                        </div>
+                      </EuiFormHelpText>
+                    </div>
+                  </div>
+                </EuiFormRow>
+                <EuiSpacer>
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <DashboardTable
+                  addFilter={[Function]}
+                  addPercentileFilter={[Function]}
+                  filters={Array []}
+                  items={Array []}
+                  loading={true}
+                  page="app"
+                  setRedirect={[Function]}
+                >
+                  <EuiPanel>
+                    <div
+                      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                    >
+                      <EuiFlexGroup
+                        alignItems="center"
+                        gutterSize="s"
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        >
+                          <EuiFlexItem
+                            grow={10}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrow10"
+                            >
+                              <PanelTitle
+                                title="Latency by trace group"
+                                totalItems={0}
+                              >
+                                <EuiText
+                                  size="m"
+                                >
+                                  <div
+                                    className="euiText euiText--medium"
+                                  >
+                                    <span
+                                      className="panel-title"
+                                    >
+                                      Latency by trace group
+                                    </span>
+                                    <span
+                                      className="panel-title-count"
+                                    >
+                                       (0)
+                                    </span>
+                                  </div>
+                                </EuiText>
+                              </PanelTitle>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <EuiLink
+                                data-test-subj="dashboard-table-percentile-button-1"
+                                onClick={[Function]}
+                              >
+                                <button
+                                  className="euiLink euiLink--primary"
+                                  data-test-subj="dashboard-table-percentile-button-1"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <EuiText
+                                    size="xs"
+                                  >
+                                    <div
+                                      className="euiText euiText--extraSmall"
+                                    >
+                                      <span
+                                        style={
+                                          Object {
+                                            "color": "#957ac9",
+                                          }
+                                        }
+                                      >
+                                        □
+                                      </span>
+                                       &lt; 95 percentile
+                                    </div>
+                                  </EuiText>
+                                </button>
+                              </EuiLink>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={1}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <EuiLink
+                                data-test-subj="dashboard-table-percentile-button-2"
+                                onClick={[Function]}
+                              >
+                                <button
+                                  className="euiLink euiLink--primary"
+                                  data-test-subj="dashboard-table-percentile-button-2"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <EuiText
+                                    size="xs"
+                                  >
+                                    <div
+                                      className="euiText euiText--extraSmall"
+                                    >
+                                      <span
+                                        style={
+                                          Object {
+                                            "color": "#957ac9",
+                                          }
+                                        }
+                                      >
+                                        ■
+                                      </span>
+                                       &gt;= 95 percentile
+                                    </div>
+                                  </EuiText>
+                                </button>
+                              </EuiLink>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={1}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrow1"
+                            />
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                      <EuiSpacer
+                        size="m"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--m"
+                        />
+                      </EuiSpacer>
+                      <EuiHorizontalRule
+                        margin="none"
+                      >
+                        <hr
+                          className="euiHorizontalRule euiHorizontalRule--full"
+                        />
+                      </EuiHorizontalRule>
+                      <NoMatchMessage
+                        size="xl"
+                      >
+                        <EuiSpacer
+                          size="xl"
+                        >
+                          <div
+                            className="euiSpacer euiSpacer--xl"
+                          />
+                        </EuiSpacer>
+                        <EuiEmptyPrompt
+                          body={
+                            <EuiText>
+                              No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                            </EuiText>
+                          }
+                          title={
+                            <h2>
+                              No matches
+                            </h2>
+                          }
+                        >
+                          <div
+                            className="euiEmptyPrompt"
+                          >
+                            <EuiTitle
+                              size="m"
+                            >
+                              <h2
+                                className="euiTitle euiTitle--medium"
+                              >
+                                No matches
+                              </h2>
+                            </EuiTitle>
+                            <EuiTextColor
+                              color="subdued"
+                            >
+                              <span
+                                className="euiTextColor euiTextColor--subdued"
+                              >
+                                <EuiSpacer
+                                  size="m"
+                                >
+                                  <div
+                                    className="euiSpacer euiSpacer--m"
+                                  />
+                                </EuiSpacer>
+                                <EuiText>
+                                  <div
+                                    className="euiText euiText--medium"
+                                  >
+                                    <EuiText>
+                                      <div
+                                        className="euiText euiText--medium"
+                                      >
+                                        No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                      </div>
+                                    </EuiText>
+                                  </div>
+                                </EuiText>
+                              </span>
+                            </EuiTextColor>
+                          </div>
+                        </EuiEmptyPrompt>
+                        <EuiSpacer
+                          size="xl"
+                        >
+                          <div
+                            className="euiSpacer euiSpacer--xl"
+                          />
+                        </EuiSpacer>
+                      </NoMatchMessage>
+                    </div>
+                  </EuiPanel>
+                </DashboardTable>
+              </div>
+            </div>
+          </EuiResizeObserver>
+        </div>
+      </div>
+    </EuiAccordion>
+  </div>
+</TraceConfig>
+`;
diff --git a/public/components/application_analytics/__tests__/create.test.tsx b/public/components/application_analytics/__tests__/create.test.tsx
new file mode 100644
index 0000000000..5fda0c03a8
--- /dev/null
+++ b/public/components/application_analytics/__tests__/create.test.tsx
@@ -0,0 +1,583 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { CreateApp } from '../components/create';
+import { coreStartMock } from '../../../../test/__mocks__/coreMocks';
+import DSLService from 'public/services/requests/dsl';
+import PPLService from 'public/services/requests/ppl';
+import { render } from '@testing-library/react';
+
+describe('Create Page', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const createApp = jest.fn();
+    const setToasts = jest.fn();
+    const updateApp = jest.fn();
+    const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
+    const utils = render(
+      <CreateApp
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        setFilters={setFilters}
+        startTime="now-24h"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        dslService={dslService}
+        createApp={createApp}
+        clearStorage={clearStorage}
+        setToasts={setToasts}
+        updateApp={updateApp}
+        existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+      />
+    );
+
+    expect(utils).toMatchSnapshot();
+  });
+
+  it('renders with name and description', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const createApp = jest.fn();
+    const setToasts = jest.fn();
+    const updateApp = jest.fn();
+    const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
+    const utils = render(
+      <CreateApp
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
+        query="source = openserach_dashboard_sample_logs"
+        setQuery={setQuery}
+        filters={[]}
+        setFilters={setFilters}
+        startTime="now-24h"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        name="Chic Application"
+        description="This is my chic application."
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        dslService={dslService}
+        createApp={createApp}
+        clearStorage={clearStorage}
+        setToasts={setToasts}
+        updateApp={updateApp}
+        existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+      />
+    );
+
+    expect(utils).toMatchSnapshot();
+  });
+
+  it('renders with query', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const createApp = jest.fn();
+    const setToasts = jest.fn();
+    const updateApp = jest.fn();
+    const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
+    const utils = render(
+      <CreateApp
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
+        query="source = openserach_dashboard_sample_logs"
+        setQuery={setQuery}
+        filters={[]}
+        setFilters={setFilters}
+        startTime="now-24h"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        dslService={dslService}
+        createApp={createApp}
+        clearStorage={clearStorage}
+        setToasts={setToasts}
+        updateApp={updateApp}
+        existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+      />
+    );
+    utils.getByText('Log source').click();
+    utils.getByText('Clear').click();
+    utils.getByText('Cancel').click();
+
+    expect(utils).toMatchSnapshot();
+  });
+
+  it('can clear query', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const createApp = jest.fn();
+    const setToasts = jest.fn();
+    const updateApp = jest.fn();
+    const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
+    const utils = render(
+      <CreateApp
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
+        query="source = openserach_dashboard_sample_logs"
+        setQuery={setQuery}
+        filters={[]}
+        setFilters={setFilters}
+        startTime="now-24h"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        dslService={dslService}
+        createApp={createApp}
+        clearStorage={clearStorage}
+        setToasts={setToasts}
+        updateApp={updateApp}
+        existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+      />
+    );
+    utils.getByText('Log source').click();
+    utils.getByText('Clear').click();
+    utils.getByText('Clear').click();
+
+    expect(utils).toMatchSnapshot();
+  });
+
+  it('renders with one service selected', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const createApp = jest.fn();
+    const setToasts = jest.fn();
+    const updateApp = jest.fn();
+    const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
+    const serviceFilters = [
+      {
+        field: 'serviceName',
+        operator: 'is',
+        value: 'User',
+        inverted: false,
+        disabled: false,
+      },
+    ];
+    const utils = render(
+      <CreateApp
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
+        query=""
+        setQuery={setQuery}
+        filters={serviceFilters}
+        setFilters={setFilters}
+        startTime="now-24h"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        dslService={dslService}
+        createApp={createApp}
+        clearStorage={clearStorage}
+        setToasts={setToasts}
+        updateApp={updateApp}
+        existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+      />
+    );
+    utils.getByText('Select services & entities to include in this application').click();
+    utils.getByText('Clear').click();
+    utils.getByText('Cancel').click();
+
+    expect(utils).toMatchSnapshot();
+  });
+
+  it('clears service selected', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const createApp = jest.fn();
+    const setToasts = jest.fn();
+    const updateApp = jest.fn();
+    const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
+    const serviceFilters = [
+      {
+        field: 'serviceName',
+        operator: 'is',
+        value: 'User',
+        inverted: false,
+        disabled: false,
+      },
+    ];
+    const utils = render(
+      <CreateApp
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
+        query=""
+        setQuery={setQuery}
+        filters={serviceFilters}
+        setFilters={setFilters}
+        startTime="now-24h"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        dslService={dslService}
+        createApp={createApp}
+        clearStorage={clearStorage}
+        setToasts={setToasts}
+        updateApp={updateApp}
+        existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+      />
+    );
+    utils.getByText('Select services & entities to include in this application').click();
+    utils.getByText('Clear').click();
+    utils.getByText('Clear').click();
+
+    expect(utils).toMatchSnapshot();
+  });
+
+  it('renders with one trace selected', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const createApp = jest.fn();
+    const setToasts = jest.fn();
+    const updateApp = jest.fn();
+    const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
+    const traceFilters = [
+      {
+        field: 'traceGroup',
+        operator: 'is',
+        value: 'test.auto',
+        inverted: false,
+        disabled: false,
+      },
+    ];
+    const utils = render(
+      <CreateApp
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
+        query=""
+        setQuery={setQuery}
+        filters={traceFilters}
+        setFilters={setFilters}
+        startTime="now-24h"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        dslService={dslService}
+        createApp={createApp}
+        clearStorage={clearStorage}
+        setToasts={setToasts}
+        updateApp={updateApp}
+        existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+      />
+    );
+    utils.getByText('Constrain your application to specific trace groups').click();
+    utils.getByText('Clear').click();
+    utils.getByText('Cancel').click();
+
+    expect(utils).toMatchSnapshot();
+  });
+
+  it('clears one trace selected', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const createApp = jest.fn();
+    const setToasts = jest.fn();
+    const updateApp = jest.fn();
+    const clearStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const pplService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+    } as unknown) as PPLService;
+    const traceFilters = [
+      {
+        field: 'traceGroup',
+        operator: 'is',
+        value: 'test.auto',
+        inverted: false,
+        disabled: false,
+      },
+    ];
+    const utils = render(
+      <CreateApp
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        pplService={pplService}
+        query=""
+        setQuery={setQuery}
+        filters={traceFilters}
+        setFilters={setFilters}
+        startTime="now-24h"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        dslService={dslService}
+        createApp={createApp}
+        clearStorage={clearStorage}
+        setToasts={setToasts}
+        updateApp={updateApp}
+        existingAppId="undefined"
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+      />
+    );
+    utils.getByText('Constrain your application to specific trace groups').click();
+    utils.getByText('Clear').click();
+    utils.getByText('Clear').click();
+
+    expect(utils).toMatchSnapshot();
+  });
+});
diff --git a/public/components/application_analytics/__tests__/log_config.test.tsx b/public/components/application_analytics/__tests__/log_config.test.tsx
new file mode 100644
index 0000000000..f1d0781d81
--- /dev/null
+++ b/public/components/application_analytics/__tests__/log_config.test.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { LogConfig } from '../components/config_components/log_config';
+import { coreStartMock } from '../../../../test/__mocks__/coreMocks';
+import DSLService from 'public/services/requests/dsl';
+
+describe('Log Config component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty log config', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setIsFlyoutVisible = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const wrapper = mount(
+      <LogConfig
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        dslService={dslService}
+        setIsFlyoutVisible={setIsFlyoutVisible}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+        editMode={false}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders with query', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setIsFlyoutVisible = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const wrapper = mount(
+      <LogConfig
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        query="source = openserach_dashboard_sample_logs"
+        setQuery={setQuery}
+        filters={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        dslService={dslService}
+        setIsFlyoutVisible={setIsFlyoutVisible}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+        editMode={false}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/application_analytics/__tests__/service_config.test.tsx b/public/components/application_analytics/__tests__/service_config.test.tsx
new file mode 100644
index 0000000000..d574ba9427
--- /dev/null
+++ b/public/components/application_analytics/__tests__/service_config.test.tsx
@@ -0,0 +1,130 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { ServiceConfig } from '../components/config_components/service_config';
+import { coreStartMock } from '../../../../test/__mocks__/coreMocks';
+import DSLService from 'public/services/requests/dsl';
+
+describe('Service Config component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty service config', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setSelectedServices = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const wrapper = mount(
+      <ServiceConfig
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        dslService={dslService}
+        selectedServices={[]}
+        setSelectedServices={setSelectedServices}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders with one service selected', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setSelectedServices = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const setAppConfigs = jest.fn();
+    const setStartTimeWithStorage = jest.fn();
+    const setEndTimeWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const serviceFilter = [
+      {
+        field: 'serviceName',
+        operator: 'is',
+        value: 'User',
+        inverted: false,
+        disabled: false,
+      },
+    ];
+    const wrapper = mount(
+      <ServiceConfig
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        query=""
+        setQuery={setQuery}
+        filters={serviceFilter}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        dslService={dslService}
+        selectedServices={[]}
+        setSelectedServices={setSelectedServices}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+        appConfigs={[]}
+        setAppConfigs={setAppConfigs}
+        setStartTimeWithStorage={setStartTimeWithStorage}
+        setEndTimeWithStorage={setEndTimeWithStorage}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/application_analytics/__tests__/trace_config.test.tsx b/public/components/application_analytics/__tests__/trace_config.test.tsx
new file mode 100644
index 0000000000..10a524fe2a
--- /dev/null
+++ b/public/components/application_analytics/__tests__/trace_config.test.tsx
@@ -0,0 +1,116 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { TraceConfig } from '../components/config_components/trace_config';
+import { coreStartMock } from '../../../../test/__mocks__/coreMocks';
+import DSLService from 'public/services/requests/dsl';
+
+describe('Trace Config component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty trace config', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setSelectedTraces = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const wrapper = mount(
+      <TraceConfig
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        dslService={dslService}
+        selectedTraces={[]}
+        setSelectedTraces={setSelectedTraces}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders with one trace selected', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setSelectedTraces = jest.fn();
+    const setNameWithStorage = jest.fn();
+    const setDescriptionWithStorage = jest.fn();
+    const setQueryWithStorage = jest.fn();
+    const setFiltersWithStorage = jest.fn();
+    const dslService = ({
+      http: jest.fn(),
+      fetch: jest.fn(),
+      fetchIndices: jest.fn(),
+      fetchFields: jest.fn(),
+    } as unknown) as DSLService;
+    const traceFilter = [
+      {
+        field: 'traceGroup',
+        operator: 'is',
+        value: 'test.auto',
+        inverted: false,
+        disabled: false,
+      },
+    ];
+    const wrapper = mount(
+      <TraceConfig
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumb={{ text: 'test', href: 'test#/' }}
+        query=""
+        setQuery={setQuery}
+        filters={traceFilter}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        dslService={dslService}
+        selectedTraces={[]}
+        setSelectedTraces={setSelectedTraces}
+        name=""
+        description=""
+        setNameWithStorage={setNameWithStorage}
+        setDescriptionWithStorage={setDescriptionWithStorage}
+        setQueryWithStorage={setQueryWithStorage}
+        setFiltersWithStorage={setFiltersWithStorage}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/application_analytics/app_analytics.scss b/public/components/application_analytics/app_analytics.scss
new file mode 100644
index 0000000000..ad05f65448
--- /dev/null
+++ b/public/components/application_analytics/app_analytics.scss
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.query-area {
+  width: 900px;
+}
+
+#logSource {
+  overflow: visible;
+  position: relative;
+  z-index: 10;
+  .ppl-link {
+    top: 103px;
+    right: 140px;
+  }
+}
+
+#baseQueryCallout {
+  max-width: 900px;
+}
+
+#compositionColumn {
+  width: 300px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
diff --git a/public/components/application_analytics/components/app_table.tsx b/public/components/application_analytics/components/app_table.tsx
new file mode 100644
index 0000000000..75fe228af8
--- /dev/null
+++ b/public/components/application_analytics/components/app_table.tsx
@@ -0,0 +1,344 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import '../app_analytics.scss';
+import {
+  EuiBadge,
+  EuiButton,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiLoadingSpinner,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPopover,
+  EuiSpacer,
+  EuiTableFieldDataColumnType,
+  EuiText,
+  EuiTitle,
+  EuiToolTip,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { ReactElement, useEffect, useState } from 'react';
+import moment from 'moment';
+import { DeleteModal } from '../../common/helpers/delete_modal';
+import { AppAnalyticsComponentDeps } from '../home';
+import { getCustomModal } from '../../custom_panels/helpers/modal_containers';
+import { pageStyles, UI_DATE_FORMAT } from '../../../../common/constants/shared';
+import { ApplicationType, AvailabilityType } from '../../../../common/types/application_analytics';
+
+interface AppTableProps extends AppAnalyticsComponentDeps {
+  loading: boolean;
+  applications: ApplicationType[];
+  fetchApplications: () => void;
+  renameApplication: (newAppName: string, appId: string) => void;
+  deleteApplication: (appList: string[], panelIdList: string[], toastMessage?: string) => void;
+  clearStorage: () => void;
+  moveToApp: (id: string, type: string) => void;
+}
+
+export function AppTable(props: AppTableProps) {
+  const {
+    chrome,
+    applications,
+    parentBreadcrumbs,
+    fetchApplications,
+    renameApplication,
+    deleteApplication,
+    setFilters,
+    clearStorage,
+    moveToApp,
+  } = props;
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
+  const [selectedApplications, setSelectedApplications] = useState<ApplicationType[]>([]);
+  const createButtonText = 'Create application';
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([
+      ...parentBreadcrumbs,
+      {
+        text: 'Application analytics',
+        href: '#/application_analytics',
+      },
+    ]);
+    clear();
+    fetchApplications();
+  }, []);
+
+  const clear = () => {
+    setFilters([]);
+    clearStorage();
+  };
+
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const onRename = async (newApplicationName: string) => {
+    renameApplication(newApplicationName, selectedApplications[0].id);
+    closeModal();
+  };
+
+  const onDelete = async () => {
+    closeModal();
+    const toastMessage = `Application${
+      selectedApplications.length > 1 ? 's' : ' "' + selectedApplications[0].name + '"'
+    } successfully deleted!`;
+    await deleteApplication(
+      selectedApplications.map((app) => app.id),
+      selectedApplications.map((app) => app.panelId),
+      toastMessage
+    );
+  };
+
+  const renameApp = () => {
+    setModalLayout(
+      getCustomModal(
+        onRename,
+        closeModal,
+        'Name',
+        'Rename application',
+        'Cancel',
+        'Rename',
+        selectedApplications[0].name
+      )
+    );
+    showModal();
+  };
+
+  const deleteApp = () => {
+    const applicationString = `application${selectedApplications.length > 1 ? 's' : ''}`;
+    setModalLayout(
+      <DeleteModal
+        onConfirm={onDelete}
+        onCancel={closeModal}
+        title={`Delete ${selectedApplications.length} ${applicationString}`}
+        message={`Are you sure you want to delete the selected ${selectedApplications.length} ${applicationString}?`}
+      />
+    );
+    showModal();
+  };
+
+  const popoverButton = (
+    <EuiButton
+      data-test-subj="appAnalyticsActionsButton"
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={() => setIsActionsPopoverOpen(!isActionsPopoverOpen)}
+    >
+      Actions
+    </EuiButton>
+  );
+
+  const popoverItems: ReactElement[] = [
+    <EuiContextMenuItem
+      key="rename"
+      data-test-subj="renameApplicationContextMenuItem"
+      disabled={applications.length === 0 || selectedApplications.length !== 1}
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        renameApp();
+      }}
+    >
+      Rename
+    </EuiContextMenuItem>,
+    // <EuiContextMenuItem
+    //   key="duplicate"
+    //   disabled={applications.length === 0 || selectedApplications.length !== 1}
+    // >
+    //   Duplicate
+    // </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="delete"
+      data-test-subj="deleteApplicationContextMenuItem"
+      disabled={applications.length === 0 || selectedApplications.length === 0}
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        deleteApp();
+      }}
+    >
+      Delete
+    </EuiContextMenuItem>,
+    // <EuiContextMenuItem key="addSample">Add sample application</EuiContextMenuItem>,
+  ];
+
+  const renderAvailability = (value: AvailabilityType, record: ApplicationType) => {
+    if (value.color === 'loading') {
+      return <EuiLoadingSpinner />;
+    } else if (value.name) {
+      return (
+        <EuiBadge
+          data-test-subj={`${value.name}AvailabilityBadge`}
+          color={value.color || 'default'}
+        >
+          {value.name}
+        </EuiBadge>
+      );
+    } else if (value.color === 'undefined') {
+      return <EuiText>No match</EuiText>;
+    } else if (value.color === 'null') {
+      return <EuiText>-</EuiText>;
+    } else {
+      return (
+        <EuiLink
+          data-test-subj="setAvailabilityHomePageLink"
+          onClick={() => moveToApp(record.id, 'createSetAvailability')}
+        >
+          Set Availability
+        </EuiLink>
+      );
+    }
+  };
+
+  const tableColumns = [
+    {
+      field: 'name',
+      name: 'Name',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiLink
+          data-test-subj={`${record.name}ApplicationLink`}
+          href={`#/application_analytics/${record.id}`}
+        >
+          {_.truncate(record.name, { length: 100 })}
+        </EuiLink>
+      ),
+    },
+    {
+      field: 'composition',
+      name: 'Composition',
+      sortable: false,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiToolTip content={record.servicesEntities.concat(record.traceGroups).join(', ')}>
+          <EuiText id="compositionColumn" data-test-subj="appAnalytics__compositionColumn">
+            {record.servicesEntities.concat(record.traceGroups).join(', ')}
+          </EuiText>
+        </EuiToolTip>
+      ),
+    },
+    {
+      field: 'availability',
+      name: 'Current Availability',
+      sortable: true,
+      render: renderAvailability,
+    },
+    {
+      field: 'dateModified',
+      name: 'Date Modified',
+      sortable: true,
+      render: (value) => <EuiText>{moment(value).format(UI_DATE_FORMAT)}</EuiText>,
+    },
+  ] as Array<EuiTableFieldDataColumnType<ApplicationType>>;
+
+  return (
+    <div style={pageStyles}>
+      <EuiPage>
+        <EuiPageBody component="div">
+          <EuiPageHeader>
+            <EuiPageHeaderSection>
+              <EuiTitle size="l">
+                <h1>Overview</h1>
+              </EuiTitle>
+            </EuiPageHeaderSection>
+          </EuiPageHeader>
+          <EuiPageContent id="applicationArea">
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle data-test-subj="applicationHomePageTitle" size="s">
+                  <h3>
+                    Applications<span className="panel-header-count"> ({applications.length})</span>
+                  </h3>
+                </EuiTitle>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup gutterSize="s">
+                  <EuiFlexItem>
+                    <EuiPopover
+                      panelPaddingSize="none"
+                      button={popoverButton}
+                      isOpen={isActionsPopoverOpen}
+                      closePopover={() => setIsActionsPopoverOpen(false)}
+                    >
+                      <EuiContextMenuPanel items={popoverItems} />
+                    </EuiPopover>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiButton fill href="#/application_analytics/create">
+                      {createButtonText}
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+            <EuiHorizontalRule />
+            {applications.length > 0 ? (
+              <EuiInMemoryTable
+                loading={props.loading}
+                items={applications}
+                itemId="id"
+                columns={tableColumns}
+                tableLayout="auto"
+                pagination={{
+                  initialPageSize: 10,
+                  pageSizeOptions: [8, 10, 13],
+                }}
+                sorting={{
+                  sort: {
+                    field: 'dateModified',
+                    direction: 'desc',
+                  },
+                }}
+                allowNeutralSort={false}
+                isSelectable={true}
+                selection={{
+                  onSelectionChange: (items) => setSelectedApplications(items),
+                }}
+              />
+            ) : (
+              <>
+                <EuiSpacer size="xxl" />
+                <EuiText textAlign="center">
+                  <h2>No applications</h2>
+                </EuiText>
+                <EuiSpacer size="m" />
+                <EuiFlexGroup justifyContent="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiButton fullWidth={false} href={`#/application_analytics/create`}>
+                      {createButtonText}
+                    </EuiButton>
+                  </EuiFlexItem>
+                  {/* <EuiFlexItem grow={false}>
+                    <EuiButton fullWidth={false}>Add sample applications</EuiButton>
+                  </EuiFlexItem> */}
+                </EuiFlexGroup>
+                <EuiSpacer size="xxl" />
+              </>
+            )}
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+      {isModalVisible && modalLayout}
+    </div>
+  );
+}
diff --git a/public/components/application_analytics/components/application.tsx b/public/components/application_analytics/components/application.tsx
new file mode 100644
index 0000000000..69006f179f
--- /dev/null
+++ b/public/components/application_analytics/components/application.tsx
@@ -0,0 +1,580 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable no-console */
+
+import {
+  EuiHorizontalRule,
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPanel,
+  EuiSelectOption,
+  EuiSpacer,
+  EuiTabbedContent,
+  EuiTabbedContentTab,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import DSLService from 'public/services/requests/dsl';
+import PPLService from 'public/services/requests/ppl';
+import SavedObjects from 'public/services/saved_objects/event_analytics/saved_objects';
+import TimestampUtils from 'public/services/timestamp/timestamp';
+import React, { ReactChild, useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { last } from 'lodash';
+import { VisualizationType } from 'common/types/custom_panels';
+import { TracesContent } from '../../../components/trace_analytics/components/traces/traces_content';
+import { DashboardContent } from '../../../components/trace_analytics/components/dashboard/dashboard_content';
+import { ServicesContent } from '../../trace_analytics/components/services/services_content';
+import {
+  filtersToDsl,
+  PanelTitle,
+} from '../../../../public/components/trace_analytics/components/common/helper_functions';
+import { SpanDetailTable } from '../../../../public/components/trace_analytics/components/traces/span_detail_table';
+import { Explorer } from '../../event_analytics/explorer/explorer';
+import { Configuration } from './configuration';
+import {
+  TAB_CONFIG_ID,
+  TAB_CONFIG_TITLE,
+  TAB_LOG_ID,
+  TAB_LOG_TITLE,
+  TAB_OVERVIEW_ID,
+  TAB_OVERVIEW_TITLE,
+  TAB_PANEL_ID,
+  TAB_PANEL_TITLE,
+  TAB_SERVICE_ID,
+  TAB_SERVICE_TITLE,
+  TAB_TRACE_ID,
+  TAB_TRACE_TITLE,
+} from '../../../../common/constants/application_analytics';
+import { TAB_EVENT_ID, TAB_CHART_ID, NEW_TAB } from '../../../../common/constants/explorer';
+import { IQueryTab } from '../../../../common/types/explorer';
+import { NotificationsStart } from '../../../../../../src/core/public';
+import { AppAnalyticsComponentDeps } from '../home';
+import { CustomPanelView } from '../../../../public/components/custom_panels/custom_panel_view';
+import {
+  ApplicationRequestType,
+  ApplicationType,
+} from '../../../../common/types/application_analytics';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
+import { ServiceDetailFlyout } from './flyout_components/service_detail_flyout';
+import { SpanDetailFlyout } from '../../../../public/components/trace_analytics/components/traces/span_detail_flyout';
+import { TraceDetailFlyout } from './flyout_components/trace_detail_flyout';
+import { fetchAppById, initializeTabData } from '../helpers/utils';
+import { QueryManager } from '../../../../common/query_manager/ppl_query_manager';
+
+const searchBarConfigs = {
+  [TAB_EVENT_ID]: {
+    showSaveButton: false,
+    showSavePanelOptionsList: false,
+  },
+  [TAB_CHART_ID]: {
+    showSaveButton: true,
+    showSavePanelOptionsList: false,
+  },
+};
+
+interface AppDetailProps extends AppAnalyticsComponentDeps {
+  disabled?: boolean;
+  appId: string;
+  pplService: PPLService;
+  dslService: DSLService;
+  savedObjects: SavedObjects;
+  timestampUtils: TimestampUtils;
+  notifications: NotificationsStart;
+  queryManager: QueryManager;
+  updateApp: (appId: string, updateAppData: Partial<ApplicationRequestType>, type: string) => void;
+  setToasts: (title: string, color?: string, text?: ReactChild) => void;
+  callback: (childfunction: () => void) => void;
+}
+
+export function Application(props: AppDetailProps) {
+  const {
+    pplService,
+    dslService,
+    timestampUtils,
+    savedObjects,
+    http,
+    notifications,
+    appId,
+    chrome,
+    parentBreadcrumbs,
+    query,
+    filters,
+    appConfigs,
+    updateApp,
+    setAppConfigs,
+    setToasts,
+    setFilters,
+    callback,
+    queryManager,
+  } = props;
+  const [application, setApplication] = useState<ApplicationType>({
+    id: '',
+    dateCreated: '',
+    dateModified: '',
+    name: '',
+    description: '',
+    baseQuery: '',
+    servicesEntities: [],
+    traceGroups: [],
+    panelId: '',
+    availability: { name: '', color: '', availabilityVisId: '' },
+  });
+  const dispatch = useDispatch();
+  const [triggerAvailability, setTriggerAvailability] = useState(false);
+  const [selectedTabId, setSelectedTab] = useState<string>(TAB_OVERVIEW_ID);
+  const [serviceFlyoutName, setServiceFlyoutName] = useState<string>('');
+  const [traceFlyoutId, setTraceFlyoutId] = useState<string>('');
+  const [spanFlyoutId, setSpanFlyoutId] = useState<string>('');
+  const [spanDSL, setSpanDSL] = useState<any>({});
+  const [totalSpans, setTotalSpans] = useState<number>(0);
+  const [editVizId, setEditVizId] = useState<string>('');
+  const [visWithAvailability, setVisWithAvailability] = useState<EuiSelectOption[]>([]);
+  const handleContentTabClick = (selectedTab: IQueryTab) => setSelectedTab(selectedTab.id);
+  const [appStartTime, setAppStartTime] = useState<string>(
+    sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h'
+  );
+  const [appEndTime, setAppEndTime] = useState<string>(
+    sessionStorage.getItem(`${application.name}EndTime`) || 'now'
+  );
+
+  const history = useHistory();
+
+  const setStartTimeForApp = (newStartTime: string) => {
+    setAppStartTime(newStartTime);
+    sessionStorage.setItem(`${application.name}StartTime`, newStartTime);
+  };
+  const setEndTimeForApp = (newEndTime: string) => {
+    setAppEndTime(newEndTime);
+    sessionStorage.setItem(`${application.name}EndTime`, newEndTime);
+  };
+
+  const addSpanFilter = (field: string, value: any) => {
+    const newFilters = [...filters];
+    const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
+    if (index === -1) {
+      newFilters.push({ field, operator: 'is', value, inverted: false, disabled: false });
+    } else {
+      newFilters.splice(index, 1, {
+        field,
+        operator: 'is',
+        value,
+        inverted: false,
+        disabled: false,
+      });
+    }
+    setFilters(newFilters);
+  };
+
+  // Add visualization to application's panel
+  const addVisualizationToPanel = async (visualizationId: string, visualizationName: string) => {
+    return http
+      .post(`${CUSTOM_PANELS_API_PREFIX}/visualizations`, {
+        body: JSON.stringify({
+          panelId: application.panelId,
+          savedVisualizationId: visualizationId,
+        }),
+      })
+      .then(() => {
+        fetchAppById(
+          http,
+          pplService,
+          appId,
+          setApplication,
+          setAppConfigs,
+          setVisWithAvailability,
+          setToasts
+        );
+      })
+      .catch((err) => {
+        setToasts(`Error in adding ${visualizationName} visualization to the panel`, 'danger');
+        console.error(err);
+      });
+  };
+
+  useEffect(() => {
+    fetchAppById(
+      http,
+      pplService,
+      appId,
+      setApplication,
+      setAppConfigs,
+      setVisWithAvailability,
+      setToasts
+    );
+    const tabId = `application-analytics-tab-${appId}`;
+    initializeTabData(dispatch, tabId, NEW_TAB);
+    callback(switchToEvent);
+  }, [appId]);
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([
+      ...parentBreadcrumbs,
+      {
+        text: 'Application analytics',
+        href: '#/application_analytics',
+      },
+      {
+        text: application.name,
+        href: `${last(parentBreadcrumbs)!.href}application_analytics/${appId}`,
+      },
+    ]);
+    setStartTimeForApp(sessionStorage.getItem(`${application.name}StartTime`) || 'now-24h');
+    setEndTimeForApp(sessionStorage.getItem(`${application.name}EndTime`) || 'now');
+  }, [appId, application.name]);
+
+  useEffect(() => {
+    const DSL = filtersToDsl(filters, query, appStartTime, appEndTime, 'app', appConfigs);
+    setSpanDSL(DSL);
+  }, [filters, appConfigs, query, appStartTime, appEndTime]);
+
+  useEffect(() => {
+    if (selectedTabId !== TAB_LOG_ID) {
+      switchToEditViz('');
+    }
+  }, [selectedTabId]);
+
+  const openServiceFlyout = (serviceName: string) => {
+    setSpanFlyoutId('');
+    setTraceFlyoutId('');
+    setServiceFlyoutName(serviceName);
+  };
+
+  const closeServiceFlyout = () => {
+    setServiceFlyoutName('');
+  };
+
+  const openSpanFlyout = (spanId: string) => {
+    setServiceFlyoutName('');
+    setTraceFlyoutId('');
+    setSpanFlyoutId(spanId);
+  };
+
+  const closeSpanFlyout = () => {
+    setSpanFlyoutId('');
+  };
+
+  const openTraceFlyout = (traceId: string) => {
+    setServiceFlyoutName('');
+    setSpanFlyoutId('');
+    setTraceFlyoutId(traceId);
+  };
+
+  const closeTraceFlyout = () => {
+    setTraceFlyoutId('');
+  };
+
+  const childBreadcrumbs = [
+    {
+      text: 'Application analytics',
+      href: '#/application_analytics',
+    },
+    {
+      text: `${application.name}`,
+      href: `#/application_analytics/${appId}`,
+    },
+  ];
+
+  const getOverview = () => {
+    return (
+      <>
+        <EuiSpacer size="m" />
+        <DashboardContent
+          {...props}
+          page="app"
+          startTime={appStartTime}
+          endTime={appEndTime}
+          setStartTime={setStartTimeForApp}
+          setEndTime={setEndTimeForApp}
+          childBreadcrumbs={childBreadcrumbs}
+        />
+      </>
+    );
+  };
+
+  const nameColumnAction = (item: any) => openServiceFlyout(item);
+  const traceColumnAction = () => switchToTrace();
+
+  const getService = () => {
+    return (
+      <>
+        <EuiSpacer size="m" />
+        <ServicesContent
+          {...props}
+          page="app"
+          nameColumnAction={nameColumnAction}
+          traceColumnAction={traceColumnAction}
+          childBreadcrumbs={childBreadcrumbs}
+          startTime={appStartTime}
+          endTime={appEndTime}
+          setStartTime={setStartTimeForApp}
+          setEndTime={setEndTimeForApp}
+        />
+      </>
+    );
+  };
+
+  const switchToTrace = () => {
+    setSelectedTab(TAB_TRACE_ID);
+  };
+
+  const traceIdColumnAction = (item: any) => openTraceFlyout(item);
+
+  const getTrace = () => {
+    return (
+      <>
+        <EuiSpacer size="m" />
+        <TracesContent
+          {...props}
+          page="app"
+          childBreadcrumbs={childBreadcrumbs}
+          traceIdColumnAction={traceIdColumnAction}
+          startTime={appStartTime}
+          endTime={appEndTime}
+          setStartTime={setStartTimeForApp}
+          setEndTime={setEndTimeForApp}
+        />
+        <EuiSpacer size="m" />
+        <EuiPanel>
+          <PanelTitle title="Spans" totalItems={totalSpans} />
+          <EuiHorizontalRule margin="m" />
+          <SpanDetailTable
+            http={http}
+            hiddenColumns={[]}
+            openFlyout={setSpanFlyoutId}
+            DSL={spanDSL}
+            setTotal={setTotalSpans}
+          />
+        </EuiPanel>
+      </>
+    );
+  };
+
+  const getLog = () => {
+    return (
+      <Explorer
+        key={`explorer_application-analytics-tab`}
+        pplService={pplService}
+        dslService={dslService}
+        tabId={`application-analytics-tab-${appId}`}
+        savedObjects={savedObjects}
+        timestampUtils={timestampUtils}
+        setToast={setToasts}
+        history={history}
+        notifications={notifications}
+        savedObjectId={editVizId}
+        http={http}
+        searchBarConfigs={searchBarConfigs}
+        appId={appId}
+        addVisualizationToPanel={addVisualizationToPanel}
+        startTime={appStartTime}
+        endTime={appEndTime}
+        setStartTime={setStartTimeForApp}
+        setEndTime={setEndTimeForApp}
+        appBaseQuery={application.baseQuery.trim()}
+        callback={callback}
+        callbackInApp={callbackInApp}
+        queryManager={queryManager}
+        curSelectedTabId={selectedTabId}
+      />
+    );
+  };
+
+  const onEditClick = (savedVisualizationId: string) => {
+    switchToEditViz(savedVisualizationId);
+  };
+
+  const updateAvailabilityVizId = (vizs: VisualizationType[]) => {
+    if (
+      !vizs
+        .map((viz) => viz.savedVisualizationId)
+        .includes(application.availability.availabilityVisId)
+    ) {
+      updateApp(appId, { availabilityVisId: '' }, 'editAvailability');
+    }
+  };
+
+  const getPanel = () => {
+    return (
+      <CustomPanelView
+        panelId={application.panelId}
+        http={http}
+        pplService={pplService}
+        dslService={dslService}
+        chrome={chrome}
+        parentBreadcrumbs={parentBreadcrumbs}
+        childBreadcrumbs={childBreadcrumbs}
+        // App analytics will not be renaming/cloning/deleting panels
+        renameCustomPanel={async () => undefined}
+        cloneCustomPanel={async () => Promise.reject()}
+        deleteCustomPanel={async () => Promise.reject()}
+        setToast={setToasts}
+        page="app"
+        appId={appId}
+        updateAvailabilityVizId={updateAvailabilityVizId}
+        startTime={appStartTime}
+        endTime={appEndTime}
+        setStartTime={setStartTimeForApp}
+        setEndTime={setEndTimeForApp}
+        onAddClick={switchToEvent}
+        onEditClick={onEditClick}
+      />
+    );
+  };
+
+  const switchToEvent = () => {
+    setSelectedTab(TAB_LOG_ID);
+  };
+
+  const switchToEditViz = (savedVizId: string) => {
+    if (savedVizId) {
+      setEditVizId(savedVizId);
+      switchToEvent();
+    } else {
+      setEditVizId('');
+    }
+  };
+
+  const switchToAvailability = () => {
+    switchToEvent();
+    setTriggerAvailability(true);
+  };
+
+  const callbackInApp = (childFunc: () => void) => {
+    if (childFunc && triggerAvailability) {
+      childFunc();
+      setTriggerAvailability(false);
+    }
+  };
+
+  const getConfig = () => {
+    return (
+      <Configuration
+        appId={appId}
+        parentBreadcrumbs={parentBreadcrumbs}
+        application={application}
+        switchToAvailability={switchToAvailability}
+        visWithAvailability={visWithAvailability}
+        updateApp={updateApp}
+      />
+    );
+  };
+
+  function getAppAnalyticsTab({
+    tabId,
+    tabTitle,
+    getContent,
+  }: {
+    tabId: string;
+    tabTitle: string;
+    getContent: () => JSX.Element;
+  }) {
+    return {
+      id: tabId,
+      name: (
+        <>
+          <EuiText data-test-subj={`${tabId}Tab`} size="s" textAlign="left" color="default">
+            <span className="tab-title">{tabTitle}</span>
+          </EuiText>
+        </>
+      ),
+      content: <>{getContent()}</>,
+    };
+  }
+
+  const appAnalyticsTabs = [
+    getAppAnalyticsTab({
+      tabId: TAB_OVERVIEW_ID,
+      tabTitle: TAB_OVERVIEW_TITLE,
+      getContent: () => getOverview(),
+    }),
+    getAppAnalyticsTab({
+      tabId: TAB_SERVICE_ID,
+      tabTitle: TAB_SERVICE_TITLE,
+      getContent: () => getService(),
+    }),
+    getAppAnalyticsTab({
+      tabId: TAB_TRACE_ID,
+      tabTitle: TAB_TRACE_TITLE,
+      getContent: () => getTrace(),
+    }),
+    getAppAnalyticsTab({
+      tabId: TAB_LOG_ID,
+      tabTitle: TAB_LOG_TITLE,
+      getContent: () => getLog(),
+    }),
+    getAppAnalyticsTab({
+      tabId: TAB_PANEL_ID,
+      tabTitle: TAB_PANEL_TITLE,
+      getContent: () => getPanel(),
+    }),
+    getAppAnalyticsTab({
+      tabId: TAB_CONFIG_ID,
+      tabTitle: TAB_CONFIG_TITLE,
+      getContent: () => getConfig(),
+    }),
+  ];
+
+  return (
+    <div>
+      <EuiPage>
+        <EuiPageBody component="div">
+          <EuiPageHeader>
+            <EuiPageHeaderSection>
+              <EuiTitle size="l">
+                <h1 data-test-subj="applicationTitle">{application.name}</h1>
+              </EuiTitle>
+              <EuiText>
+                <p>{application.description}</p>
+              </EuiText>
+            </EuiPageHeaderSection>
+          </EuiPageHeader>
+          <EuiTabbedContent
+            className="appAnalyticsTabs"
+            initialSelectedTab={appAnalyticsTabs[0]}
+            selectedTab={appAnalyticsTabs.find((tab) => {
+              return tab.id === selectedTabId;
+            })}
+            onTabClick={(selectedTab: EuiTabbedContentTab) => handleContentTabClick(selectedTab)}
+            tabs={appAnalyticsTabs}
+          />
+        </EuiPageBody>
+        {serviceFlyoutName && (
+          <ServiceDetailFlyout
+            {...props}
+            serviceName={serviceFlyoutName}
+            startTime={appStartTime}
+            endTime={appEndTime}
+            closeServiceFlyout={closeServiceFlyout}
+            openSpanFlyout={openSpanFlyout}
+            setSelectedTab={setSelectedTab}
+          />
+        )}
+        {spanFlyoutId && (
+          <SpanDetailFlyout
+            http={http}
+            spanId={spanFlyoutId}
+            isFlyoutVisible={!!spanFlyoutId}
+            closeFlyout={closeSpanFlyout}
+            addSpanFilter={addSpanFilter}
+          />
+        )}
+        {traceFlyoutId && (
+          <TraceDetailFlyout
+            {...props}
+            http={http}
+            traceId={traceFlyoutId}
+            closeTraceFlyout={closeTraceFlyout}
+            openSpanFlyout={openSpanFlyout}
+          />
+        )}
+      </EuiPage>
+    </div>
+  );
+}
diff --git a/public/components/application_analytics/components/config_components/log_config.tsx b/public/components/application_analytics/components/config_components/log_config.tsx
new file mode 100644
index 0000000000..fd0371bbdf
--- /dev/null
+++ b/public/components/application_analytics/components/config_components/log_config.tsx
@@ -0,0 +1,167 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiAccordion,
+  EuiText,
+  EuiSpacer,
+  EuiButton,
+  EuiFormRow,
+  EuiFlexItem,
+  EuiBadge,
+  EuiOverlayMask,
+  EuiCallOut,
+  EuiFlexGroup,
+} from '@elastic/eui';
+import DSLService from 'public/services/requests/dsl';
+import React, { useState } from 'react';
+import {
+  parseGetSuggestions,
+  onItemSelect,
+} from '../../../../../public/components/common/search/autocomplete_logic';
+import { uiSettingsService } from '../../../../../common/utils';
+import { Autocomplete } from '../../../common/search/autocomplete';
+import { AppAnalyticsComponentDeps } from '../../home';
+import { getClearModal } from '../../helpers/modal_containers';
+import '../../app_analytics.scss';
+
+interface LogConfigProps extends AppAnalyticsComponentDeps {
+  dslService: DSLService;
+  setIsFlyoutVisible: any;
+  editMode: boolean;
+}
+
+export const LogConfig = (props: LogConfigProps) => {
+  const { dslService, query, setQueryWithStorage, setIsFlyoutVisible, editMode } = props;
+  const [logOpen, setLogOpen] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
+  const [tempQuery, setTempQuery] = useState<string>('');
+
+  const handleQueryChange = async (newQuery: string) => {
+    setTempQuery(newQuery);
+    setQueryWithStorage(newQuery);
+  };
+
+  const showFlyout = () => {
+    setIsFlyoutVisible(true);
+  };
+
+  const onCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const onConfirm = () => {
+    handleQueryChange('');
+    closeModal();
+  };
+
+  const clearAllModal = () => {
+    setModalLayout(
+      getClearModal(
+        onCancel,
+        onConfirm,
+        'Clear log source?',
+        'This will clear all information in log source configuration.',
+        'Clear'
+      )
+    );
+    showModal();
+  };
+
+  const allowedCommands = [
+    { label: 'dedup' },
+    { label: 'eval' },
+    { label: 'fields' },
+    { label: 'parse' },
+    { label: 'rename' },
+    { label: 'sort' },
+    { label: 'where' },
+  ];
+
+  return (
+    <div>
+      <EuiAccordion
+        id="logSource"
+        data-test-subj="logSourceAccordion"
+        buttonContent={
+          <>
+            <EuiText size="s">
+              <h3>Log source</h3>
+            </EuiText>
+            <EuiSpacer size="s" />
+            <EuiText size="s" color="subdued">
+              Configure your application base query
+            </EuiText>
+          </>
+        }
+        extraAction={
+          <EuiButton
+            size="s"
+            data-test-subj="clearLogSourceButton"
+            disabled={!logOpen || !query.length || editMode}
+            onClick={clearAllModal}
+          >
+            Clear
+          </EuiButton>
+        }
+        onToggle={(isOpen) => {
+          setLogOpen(isOpen);
+        }}
+        paddingSize="l"
+      >
+        <EuiFlexGroup direction="column" gutterSize="s">
+          <EuiFlexItem>
+            <EuiCallOut id="baseQueryCallout" iconType={'iInCircle'} size="s">
+              You can&apos;t change the base query after the application is created.
+            </EuiCallOut>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFormRow
+              label="Base Query"
+              helpText="The default logs view in the application will be filtered by this query."
+            >
+              <EuiFlexItem grow={false} key="query-bar" className="query-area">
+                <Autocomplete
+                  key={'autocomplete-bar'}
+                  query={query}
+                  tempQuery={tempQuery}
+                  baseQuery=""
+                  handleQueryChange={handleQueryChange}
+                  handleQuerySearch={() => {}}
+                  dslService={dslService}
+                  getSuggestions={parseGetSuggestions}
+                  onItemSelect={onItemSelect}
+                  isDisabled={editMode}
+                  tabId={'application-analytics-tab'}
+                  possibleCommands={allowedCommands}
+                />
+                <EuiBadge
+                  className={`ppl-link ${
+                    uiSettingsService.get('theme:darkMode') ? 'ppl-link-dark' : 'ppl-link-light'
+                  }`}
+                  color="hollow"
+                  onClick={showFlyout}
+                  onClickAriaLabel={'pplLinkShowFlyout'}
+                >
+                  PPL
+                </EuiBadge>
+              </EuiFlexItem>
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiAccordion>
+      {isModalVisible && modalLayout}
+    </div>
+  );
+};
diff --git a/public/components/application_analytics/components/config_components/service_config.tsx b/public/components/application_analytics/components/config_components/service_config.tsx
new file mode 100644
index 0000000000..30b78adcdc
--- /dev/null
+++ b/public/components/application_analytics/components/config_components/service_config.tsx
@@ -0,0 +1,193 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiAccordion,
+  EuiBadge,
+  EuiButton,
+  EuiComboBox,
+  EuiFormRow,
+  EuiOverlayMask,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import DSLService from 'public/services/requests/dsl';
+import React, { useState } from 'react';
+import { useEffect } from 'react';
+import { FilterType } from '../../../trace_analytics/components/common/filters/filters';
+import { ServiceObject } from '../../../trace_analytics/components/common/plots/service_map';
+import { ServiceMap } from '../../../trace_analytics/components/services';
+import { handleServiceMapRequest } from '../../../trace_analytics/requests/services_request_handler';
+import { AppAnalyticsComponentDeps } from '../../home';
+import { OptionType } from '../../../../../common/types/application_analytics';
+import { getClearModal } from '../../helpers/modal_containers';
+
+interface ServiceConfigProps extends AppAnalyticsComponentDeps {
+  dslService: DSLService;
+  selectedServices: OptionType[];
+  setSelectedServices: (services: OptionType[]) => void;
+}
+
+export const ServiceConfig = (props: ServiceConfigProps) => {
+  const {
+    dslService,
+    filters,
+    setFiltersWithStorage,
+    http,
+    selectedServices,
+    setSelectedServices,
+  } = props;
+  const [servicesOpen, setServicesOpen] = useState(false);
+  const [serviceMap, setServiceMap] = useState<ServiceObject>({});
+  const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
+    'latency' | 'error_rate' | 'throughput'
+  >('latency');
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
+
+  useEffect(() => {
+    handleServiceMapRequest(http, dslService, setServiceMap);
+  }, []);
+
+  useEffect(() => {
+    const serviceOptions = filters
+      .filter((f) => f.field === 'serviceName')
+      .map((f) => {
+        return { label: f.value };
+      });
+    const noDups = serviceOptions.filter((s, index) => {
+      return serviceOptions.findIndex((ser) => ser.label === s.label) === index;
+    });
+    setSelectedServices(noDups);
+  }, [filters]);
+
+  const addFilter = (filter: FilterType) => {
+    for (const addedFilter of filters) {
+      if (
+        addedFilter.field === filter.field &&
+        addedFilter.operator === filter.operator &&
+        addedFilter.value === filter.value
+      ) {
+        return;
+      }
+    }
+    const newFilters = [...filters, filter];
+    setFiltersWithStorage(newFilters);
+  };
+
+  const onServiceChange = (newServices: any) => {
+    const serviceFilters = newServices.map((option: OptionType) => {
+      return {
+        field: 'serviceName',
+        operator: 'is',
+        value: option.label,
+        inverted: false,
+        disabled: false,
+      };
+    });
+    const nonServiceFilters = filters.filter((f) => f.field !== 'serviceName');
+    setFiltersWithStorage([...nonServiceFilters, ...serviceFilters]);
+  };
+
+  const clearServices = () => {
+    const withoutServices = filters.filter((f) => f.field !== 'serviceName');
+    setFiltersWithStorage(withoutServices);
+  };
+
+  const services = Object.keys(serviceMap).map((service) => {
+    return { label: decodeURI(service) };
+  });
+
+  const onCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const onConfirm = () => {
+    clearServices();
+    closeModal();
+  };
+
+  const clearAllModal = () => {
+    setModalLayout(
+      getClearModal(
+        onCancel,
+        onConfirm,
+        'Clear services & entities?',
+        'This will clear all information in services & entities configuration.',
+        'Clear all'
+      )
+    );
+    showModal();
+  };
+
+  return (
+    <div>
+      <EuiAccordion
+        id="servicesEntities"
+        data-test-subj="servicesEntitiesAccordion"
+        buttonContent={
+          <>
+            <EuiText size="s">
+              <h3>
+                Services & entities{' '}
+                <EuiBadge data-test-subj="servicesEntitiesCountBadge">
+                  {selectedServices.length}
+                </EuiBadge>
+              </h3>
+            </EuiText>
+            <EuiSpacer size="s" />
+            <EuiText size="s" color="subdued">
+              Select services & entities to include in this application
+            </EuiText>
+          </>
+        }
+        extraAction={
+          <EuiButton
+            size="s"
+            data-test-subj="clearServicesEntitiesButton"
+            disabled={!servicesOpen || !selectedServices.length}
+            onClick={clearAllModal}
+          >
+            Clear all
+          </EuiButton>
+        }
+        onToggle={(isOpen) => {
+          setServicesOpen(isOpen);
+        }}
+        paddingSize="l"
+      >
+        <EuiFormRow label="Services & entities">
+          <EuiComboBox
+            aria-label="Select services and entities"
+            placeholder="Select services and entities"
+            options={services}
+            selectedOptions={selectedServices}
+            onChange={onServiceChange}
+            isClearable={false}
+            data-test-subj="servicesEntitiesComboBox"
+          />
+        </EuiFormRow>
+        <EuiSpacer />
+        <ServiceMap
+          serviceMap={serviceMap}
+          idSelected={serviceMapIdSelected}
+          setIdSelected={setServiceMapIdSelected}
+          addFilter={addFilter}
+          page="appCreate"
+        />
+      </EuiAccordion>
+      {isModalVisible && modalLayout}
+    </div>
+  );
+};
diff --git a/public/components/application_analytics/components/config_components/trace_config.tsx b/public/components/application_analytics/components/config_components/trace_config.tsx
new file mode 100644
index 0000000000..92d0d40bf1
--- /dev/null
+++ b/public/components/application_analytics/components/config_components/trace_config.tsx
@@ -0,0 +1,274 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import dateMath from '@elastic/datemath';
+import {
+  EuiAccordion,
+  EuiBadge,
+  EuiButton,
+  EuiComboBox,
+  EuiFormRow,
+  EuiOverlayMask,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import DSLService from 'public/services/requests/dsl';
+import React, { useEffect, useState } from 'react';
+import { FilterType } from 'public/components/trace_analytics/components/common/filters/filters';
+import { OptionType } from '../../../../../common/types/application_analytics';
+import { filtersToDsl } from '../../../trace_analytics/components/common/helper_functions';
+import { handleDashboardRequest } from '../../../trace_analytics/requests/dashboard_request_handler';
+import { AppAnalyticsComponentDeps } from '../../home';
+import { DashboardTable } from '../../../trace_analytics/components/dashboard/dashboard_table';
+import { getClearModal } from '../../helpers/modal_containers';
+
+interface TraceConfigProps extends AppAnalyticsComponentDeps {
+  dslService: DSLService;
+  selectedTraces: OptionType[];
+  setSelectedTraces: (traces: OptionType[]) => void;
+}
+
+export const TraceConfig = (props: TraceConfigProps) => {
+  const {
+    dslService,
+    query,
+    filters,
+    setFiltersWithStorage,
+    http,
+    startTime,
+    endTime,
+    selectedTraces,
+    setSelectedTraces,
+  } = props;
+  const [traceOpen, setTraceOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [traceItems, setTraceItems] = useState([]);
+  const [traceOptions, setTraceOptions] = useState<OptionType[]>([]);
+  const [percentileMap, setPercentileMap] = useState<{ [traceGroup: string]: number[] }>({});
+  const [redirect, setRedirect] = useState(true);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
+
+  useEffect(() => {
+    setLoading(true);
+    const timeFilterDSL = filtersToDsl([], '', startTime, endTime);
+    const latencyTrendStartTime = dateMath.parse(endTime, { roundUp: true })?.subtract(24, 'hours').toISOString()!;
+    const latencyTrendDSL = filtersToDsl(filters, query, latencyTrendStartTime, endTime);
+    handleDashboardRequest(
+      http,
+      dslService,
+      timeFilterDSL,
+      latencyTrendDSL,
+      traceItems,
+      setTraceItems,
+      setPercentileMap
+    ).then(() => setLoading(false));
+    setRedirect(false);
+  }, []);
+
+  useEffect(() => {
+    const toOptions = traceItems.map((item: any) => {
+      return { label: decodeURI(item.dashboard_trace_group_name) };
+    });
+    setTraceOptions(toOptions);
+  }, [traceItems]);
+
+  useEffect(() => {
+    const filteredOptions = filters
+      .filter((f) => f.field === 'traceGroup')
+      .map((f) => {
+        return { label: f.value };
+      });
+    const noDups = filteredOptions.filter((t, index) => {
+      return filteredOptions.findIndex((trace) => trace.label === t.label) === index;
+    });
+    setSelectedTraces(noDups);
+  }, [filters]);
+
+  const addFilter = (filter: FilterType) => {
+    for (const addedFilter of filters) {
+      if (
+        addedFilter.field === filter.field &&
+        addedFilter.operator === filter.operator &&
+        addedFilter.value === filter.value
+      ) {
+        const removed = filters.filter((fil) => fil.field !== addedFilter.field);
+        setFiltersWithStorage(removed);
+        return;
+      }
+    }
+    const newFilters = [...filters, filter];
+    setFiltersWithStorage(newFilters);
+  };
+
+  const onTraceChange = (newTraces: any) => {
+    const traceFilters = newTraces.map((option: OptionType) => {
+      return {
+        field: 'traceGroup',
+        operator: 'is',
+        value: option.label,
+        inverted: false,
+        disabled: false,
+      };
+    });
+    const nonTraceFilters = filters.filter((f) => f.field !== 'traceGroup');
+    setFiltersWithStorage([...nonTraceFilters, ...traceFilters]);
+  };
+
+  const onCreateTrace = (searchValue: string, flattenedOptions: any) => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase();
+    if (!normalizedSearchValue) {
+      return;
+    }
+    const newTraceOption = {
+      label: searchValue,
+    };
+    const newTraceFilter = {
+      field: 'traceGroup',
+      operator: 'is',
+      value: searchValue,
+      inverted: false,
+      disabled: false,
+    };
+    // Create the option if it doesn't exist.
+    if (
+      flattenedOptions.findIndex(
+        (option: OptionType) => option.label.trim().toLowerCase() === normalizedSearchValue
+      ) === -1
+    ) {
+      setTraceOptions([...traceOptions, newTraceOption]);
+    }
+    // Select the option.
+    setFiltersWithStorage([...filters, newTraceFilter]);
+  };
+
+  const addPercentileFilter = (condition = 'gte', additionalFilters = [] as FilterType[]) => {
+    if (traceItems.length === 0 || Object.keys(percentileMap).length === 0) return;
+    for (let i = 0; i < filters.length; i++) {
+      if (filters[i].custom) {
+        const newFilter = JSON.parse(JSON.stringify(filters[i]));
+        newFilter.custom.query.bool.should.forEach((should: any) =>
+          should.bool.must.forEach((must: any) => {
+            const range = must?.range?.['traceGroupFields.durationInNanos'];
+            if (range) {
+              const duration = range.lt || range.lte || range.gt || range.gte;
+              if (duration || duration === 0) {
+                must.range['traceGroupFields.durationInNanos'] = {
+                  [condition]: duration,
+                };
+              }
+            }
+          })
+        );
+        newFilter.value = condition === 'gte' ? '>= 95th' : '< 95th';
+        const newFilters = [...filters, ...additionalFilters];
+        newFilters.splice(i, 1, newFilter);
+        setFiltersWithStorage(newFilters);
+        return;
+      }
+    }
+  };
+
+  const clearTraces = () => {
+    const withoutTraces = filters.filter((f) => f.field !== 'traceGroup');
+    setFiltersWithStorage(withoutTraces);
+  };
+
+  const onCancel = () => {
+    setIsModalVisible(false);
+  };
+
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const onConfirm = () => {
+    clearTraces();
+    closeModal();
+  };
+
+  const clearAllModal = () => {
+    setModalLayout(
+      getClearModal(
+        onCancel,
+        onConfirm,
+        'Clear trace groups?',
+        'This will clear all information in trace groups configuration.',
+        'Clear all'
+      )
+    );
+    showModal();
+  };
+
+  return (
+    <div>
+      <EuiAccordion
+        id="traceGroups"
+        data-test-subj="traceGroupsAccordion"
+        buttonContent={
+          <>
+            <EuiText size="s">
+              <h3>
+                Trace groups{' '}
+                <EuiBadge data-test-subj="traceGroupsCountBadge">{selectedTraces.length}</EuiBadge>
+              </h3>
+            </EuiText>
+            <EuiSpacer size="s" />
+            <EuiText size="s" color="subdued">
+              Constrain your application to specific trace groups
+            </EuiText>
+          </>
+        }
+        extraAction={
+          <EuiButton
+            size="s"
+            data-test-subj="clearTraceGroupsButton"
+            disabled={!traceOpen || !selectedTraces.length}
+            onClick={clearAllModal}
+          >
+            Clear all
+          </EuiButton>
+        }
+        onToggle={(isOpen) => {
+          setTraceOpen(isOpen);
+        }}
+        paddingSize="l"
+      >
+        <EuiFormRow
+          label="Trace Groups"
+          helpText="Select one or multiple trace groups, or type a custom one"
+        >
+          <EuiComboBox
+            aria-label="Select trace groups"
+            placeholder="Select or add trace groups"
+            options={traceOptions}
+            selectedOptions={selectedTraces}
+            onChange={onTraceChange}
+            onCreateOption={onCreateTrace}
+            isClearable={false}
+            data-test-subj="traceGroupsComboBox"
+          />
+        </EuiFormRow>
+        <EuiSpacer />
+        <DashboardTable
+          items={traceItems}
+          // We want table to display all traces regardless of added filters
+          filters={[]}
+          addFilter={addFilter}
+          addPercentileFilter={addPercentileFilter}
+          setRedirect={setRedirect}
+          loading={loading}
+          page="app"
+        />
+      </EuiAccordion>
+      {isModalVisible && modalLayout}
+    </div>
+  );
+};
diff --git a/public/components/application_analytics/components/configuration.tsx b/public/components/application_analytics/components/configuration.tsx
new file mode 100644
index 0000000000..8cb8080ffc
--- /dev/null
+++ b/public/components/application_analytics/components/configuration.tsx
@@ -0,0 +1,151 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiBreadcrumb,
+  EuiButton,
+  EuiCode,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiLink,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentBody,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiSelect,
+  EuiSelectOption,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { ApplicationRequestType, ApplicationType } from 'common/types/application_analytics';
+import { last } from 'lodash';
+import React, { useState } from 'react';
+
+interface ConfigProps {
+  appId: string;
+  application: ApplicationType;
+  parentBreadcrumbs: EuiBreadcrumb[];
+  visWithAvailability: EuiSelectOption[];
+  switchToAvailability: () => void;
+  updateApp: (appId: string, updateAppData: Partial<ApplicationRequestType>, type: string) => void;
+}
+
+export const Configuration = (props: ConfigProps) => {
+  const {
+    appId,
+    application,
+    parentBreadcrumbs,
+    visWithAvailability,
+    updateApp,
+    switchToAvailability,
+  } = props;
+  const [availabilityVisId, setAvailabilityVisId] = useState(
+    application.availability.availabilityVisId || ''
+  );
+
+  const onAvailabilityVisChange = (event: any) => {
+    setAvailabilityVisId(event.target.value);
+    updateApp(appId, { availabilityVisId: event.target.value }, 'editAvailability');
+  };
+
+  return (
+    <div>
+      <EuiPage>
+        <EuiPageBody component="div">
+          <EuiPageContent>
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle>
+                  <h3 style={{ paddingTop: '10px' }}>Configuration details</h3>
+                </EuiTitle>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup gutterSize="s">
+                  <EuiFlexItem>
+                    <EuiButton
+                      fill
+                      data-test-subj="editApplicationButton"
+                      onClick={() => {
+                        window.location.assign(
+                          `${last(parentBreadcrumbs)!.href}application_analytics/edit/${appId}`
+                        );
+                      }}
+                    >
+                      Edit
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+            <EuiHorizontalRule margin="m" />
+            <EuiPageContentBody>
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiText>
+                    <h4>Log source</h4>
+                  </EuiText>
+                  <EuiSpacer size="m" />
+                  <p>
+                    <EuiCode data-test-subj="configBaseQueryCode">{application.baseQuery}</EuiCode>
+                  </p>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiText>
+                    <h4>Services & entities</h4>
+                  </EuiText>
+                  <EuiSpacer size="m" />
+                  <EuiText size="m">
+                    <ul aria-label="List of services and entities">
+                      {application.servicesEntities.map((group) => (
+                        <li key={`${decodeURI(group)}-item`}>{decodeURI(group)}</li>
+                      ))}
+                    </ul>
+                  </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiText>
+                    <h4>Trace groups</h4>
+                  </EuiText>
+                  <EuiSpacer size="m" />
+                  <EuiText size="m">
+                    <ul aria-label="List of trace groups">
+                      {application.traceGroups.map((group) => (
+                        <li key={`${decodeURI(group)}-item`}>{decodeURI(group)}</li>
+                      ))}
+                    </ul>
+                  </EuiText>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiText>
+                    <h4>Availability</h4>
+                  </EuiText>
+                  <EuiSpacer size="m" />
+                  {visWithAvailability.length > 0 ? (
+                    <EuiSelect
+                      options={visWithAvailability}
+                      value={availabilityVisId}
+                      onChange={onAvailabilityVisChange}
+                    />
+                  ) : (
+                    <EuiLink
+                      data-test-subj="setAvailabilityConfigLink"
+                      onClick={() => switchToAvailability()}
+                    >
+                      Set Availability
+                    </EuiLink>
+                  )}
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPageContentBody>
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    </div>
+  );
+};
diff --git a/public/components/application_analytics/components/create.tsx b/public/components/application_analytics/components/create.tsx
new file mode 100644
index 0000000000..084d53b17d
--- /dev/null
+++ b/public/components/application_analytics/components/create.tsx
@@ -0,0 +1,278 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiButton,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiForm,
+  EuiFormRow,
+  EuiHorizontalRule,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiSpacer,
+  EuiTitle,
+  EuiToolTip,
+} from '@elastic/eui';
+import DSLService from 'public/services/requests/dsl';
+import React, { ReactChild, useEffect, useState } from 'react';
+import PPLService from 'public/services/requests/ppl';
+import { last } from 'lodash';
+import { AppAnalyticsComponentDeps } from '../home';
+import { TraceConfig } from './config_components/trace_config';
+import { ServiceConfig } from './config_components/service_config';
+import { LogConfig } from './config_components/log_config';
+import { PPLReferenceFlyout } from '../../../components/common/helpers';
+import {
+  ApplicationRequestType,
+  ApplicationType,
+  OptionType,
+} from '../../../../common/types/application_analytics';
+import { fetchAppById } from '../helpers/utils';
+
+interface CreateAppProps extends AppAnalyticsComponentDeps {
+  dslService: DSLService;
+  pplService: PPLService;
+  setToasts: (title: string, color?: string, text?: ReactChild) => void;
+  createApp: (app: ApplicationRequestType, type: string) => void;
+  updateApp: (appId: string, updateAppData: Partial<ApplicationRequestType>, type: string) => void;
+  clearStorage: () => void;
+  existingAppId: string;
+}
+
+export const CreateApp = (props: CreateAppProps) => {
+  const {
+    parentBreadcrumbs,
+    chrome,
+    http,
+    query,
+    name,
+    description,
+    pplService,
+    createApp,
+    updateApp,
+    setToasts,
+    setNameWithStorage,
+    setDescriptionWithStorage,
+    setQueryWithStorage,
+    setFilters,
+    clearStorage,
+    existingAppId,
+  } = props;
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const [selectedServices, setSelectedServices] = useState<OptionType[]>([]);
+  const [selectedTraces, setSelectedTraces] = useState<OptionType[]>([]);
+
+  const editMode = existingAppId !== 'undefined';
+  const [existingApp, setExistingApp] = useState<ApplicationType>({
+    id: existingAppId,
+    dateCreated: '',
+    dateModified: '',
+    name: '',
+    description: '',
+    baseQuery: '',
+    servicesEntities: [],
+    traceGroups: [],
+    panelId: '',
+    availability: { name: '', color: '', availabilityVisId: '' },
+  });
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([
+      ...parentBreadcrumbs,
+      {
+        text: 'Application analytics',
+        href: '#/application_analytics',
+      },
+      {
+        text: editMode ? 'Edit' : 'Create',
+        href: `#/application_analytics/${editMode ? 'edit' : 'create'}`,
+      },
+    ]);
+  }, []);
+
+  useEffect(() => {
+    if (editMode && existingAppId) {
+      fetchAppById(
+        http,
+        pplService,
+        existingAppId,
+        setExistingApp,
+        setFilters,
+        () => {},
+        setToasts
+      );
+    }
+  }, [existingAppId]);
+
+  useEffect(() => {
+    if (editMode) {
+      setNameWithStorage(existingApp.name);
+      setDescriptionWithStorage(existingApp.description);
+      setQueryWithStorage(existingApp.baseQuery);
+    }
+  }, [existingApp]);
+
+  const closeFlyout = () => {
+    setIsFlyoutVisible(false);
+  };
+
+  let flyout;
+  if (isFlyoutVisible) {
+    flyout = <PPLReferenceFlyout module="explorer" closeFlyout={closeFlyout} />;
+  }
+
+  const isDisabled = !name || (!query && !selectedTraces.length && !selectedServices.length);
+
+  const missingField = (needLog: boolean) => {
+    let popoverContent = '';
+    if (isDisabled || (needLog && !query)) {
+      if (!name) {
+        popoverContent = 'Name is required.';
+      } else if (!query && !selectedServices.length && !selectedTraces.length) {
+        popoverContent = 'Provide at least one log source, service, entity or trace group.';
+      } else if (needLog && !query) {
+        popoverContent = 'Log source is required to set availability.';
+      }
+      return <p>{popoverContent}</p>;
+    }
+  };
+
+  const onCreate = (type: string) => {
+    const appData = {
+      name,
+      description,
+      baseQuery: query,
+      servicesEntities: selectedServices.map((option) => option.label),
+      traceGroups: selectedTraces.map((option) => option.label),
+      panelId: '',
+      availabilityVisId: '',
+    };
+    createApp(appData, type);
+  };
+
+  const onUpdate = () => {
+    const appData = {
+      name,
+      description,
+      servicesEntities: selectedServices.map((option) => option.label),
+      traceGroups: selectedTraces.map((option) => option.label),
+    };
+    updateApp(existingAppId, appData, 'update');
+  };
+
+  const onCancel = () => {
+    clearStorage();
+    window.location.assign(`${last(parentBreadcrumbs)!.href}application_analytics`);
+  };
+
+  return (
+    <div style={{ maxWidth: '1130px' }}>
+      <EuiPage>
+        <EuiPageBody component="div">
+          <EuiPageHeader>
+            <EuiPageHeaderSection>
+              <EuiTitle data-test-subj="createPageTitle" size="l">
+                <h1>{editMode ? 'Edit' : 'Create'} application</h1>
+              </EuiTitle>
+            </EuiPageHeaderSection>
+          </EuiPageHeader>
+          <EuiPageContent id="appInfo">
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="m">
+                  <h2>Application information</h2>
+                </EuiTitle>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+            <EuiHorizontalRule />
+            <EuiForm component="form">
+              <EuiFormRow label="Name" data-test-subj="nameFormRow">
+                <EuiFieldText
+                  name="name"
+                  value={name}
+                  onChange={(e) => setNameWithStorage(e.target.value)}
+                />
+              </EuiFormRow>
+              <EuiFormRow label="Description" data-test-subj="descriptionFormRow">
+                <EuiFieldText
+                  name="description"
+                  value={description}
+                  onChange={(e) => setDescriptionWithStorage(e.target.value)}
+                />
+              </EuiFormRow>
+            </EuiForm>
+          </EuiPageContent>
+          <EuiSpacer />
+          <EuiPageContent id="composition">
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="m">
+                  <h2>Composition</h2>
+                </EuiTitle>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+            <EuiHorizontalRule />
+            <LogConfig editMode={editMode} setIsFlyoutVisible={setIsFlyoutVisible} {...props} />
+            <EuiHorizontalRule />
+            <ServiceConfig
+              selectedServices={selectedServices}
+              setSelectedServices={setSelectedServices}
+              {...props}
+            />
+            <EuiHorizontalRule />
+            <TraceConfig
+              selectedTraces={selectedTraces}
+              setSelectedTraces={setSelectedTraces}
+              {...props}
+            />
+          </EuiPageContent>
+          <EuiSpacer />
+          <EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <EuiButton data-test-subj="cancelCreateButton" onClick={onCancel}>
+                Cancel
+              </EuiButton>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiToolTip position="top" content={missingField(false)}>
+                <EuiButton
+                  data-test-subj="createButton"
+                  isDisabled={isDisabled}
+                  onClick={editMode ? onUpdate : () => onCreate('create')}
+                  fill={editMode ? true : false}
+                >
+                  {editMode ? 'Save' : 'Create'}
+                </EuiButton>
+              </EuiToolTip>
+            </EuiFlexItem>
+            {editMode || (
+              <EuiFlexItem grow={false}>
+                <EuiToolTip position="top" content={missingField(true)}>
+                  <EuiButton
+                    data-test-subj="createAndSetButton"
+                    fill
+                    isDisabled={isDisabled || !query}
+                    onClick={() => onCreate('createSetAvailability')}
+                  >
+                    Create and Set Availability
+                  </EuiButton>
+                </EuiToolTip>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </EuiPageBody>
+      </EuiPage>
+      {flyout}
+    </div>
+  );
+};
diff --git a/public/components/application_analytics/components/flyout_components/availability_info_flyout.tsx b/public/components/application_analytics/components/flyout_components/availability_info_flyout.tsx
new file mode 100644
index 0000000000..86e668f417
--- /dev/null
+++ b/public/components/application_analytics/components/flyout_components/availability_info_flyout.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiFlyoutBody,
+  EuiText,
+  EuiCodeBlock,
+  EuiFlyoutFooter,
+  EuiButton,
+} from '@elastic/eui';
+import React from 'react';
+
+interface AvailabilityInfoFlyoutProps {
+  closeFlyout: () => void;
+}
+
+export function AvailabilityInfoFlyout(props: AvailabilityInfoFlyoutProps) {
+  const { closeFlyout } = props;
+
+  return (
+    <EuiFlyout onClose={closeFlyout} size="s" type="push">
+      <EuiFlyoutHeader>
+        <EuiTitle>
+          <h2>Availability</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <EuiText>
+          <h3>Configure availability</h3>
+          Availability is the status of your application determined by availability levels set on a
+          time series metric. To create an availability level, you must configure the following:
+          <ul>
+            <li>color: The color of the availability badge on the home page</li>
+            <li>name: The text in the availability badge on the home page</li>
+            <li>expression: Comparison operator to determine the availability</li>
+            <li>value: Value to use when calculating availability</li>
+          </ul>
+          <h3>Configuring availability</h3>
+          By default, Application analytics shows results from the last 24 hours of your data. To
+          see data from a different timeframe, use the date and time selector.
+          <h3>Time series metric</h3>A time series metric is any visualization that has a query that
+          spans over a timestamp and is a bar/line chart. You can use the PPL language to define
+          arbitrary conditions on your logs to create a visualization over time.
+          <h4>Example</h4>
+          <EuiCodeBlock>
+            {'source = <index_name> | ... | ... | stats ... by span(<timestamp_field>, 1h)'}
+          </EuiCodeBlock>
+          You can then choose <strong>Bar</strong> or <strong>Line</strong> in visualization
+          configurations to create a time series metric.
+        </EuiText>
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiButton onClick={closeFlyout}>Close</EuiButton>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+  );
+}
diff --git a/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx b/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx
new file mode 100644
index 0000000000..07a7e0a5a2
--- /dev/null
+++ b/public/components/application_analytics/components/flyout_components/service_detail_flyout.tsx
@@ -0,0 +1,141 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import _ from 'lodash';
+import {
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiHorizontalRule,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  handleServiceMapRequest,
+  handleServiceViewRequest,
+} from '../../../../../public/components/trace_analytics/requests/services_request_handler';
+import { filtersToDsl } from '../../../../../public/components/trace_analytics/components/common/helper_functions';
+import { ServiceMap } from '../../../../../public/components/trace_analytics/components/services';
+import { ServiceObject } from '../../../../../public/components/trace_analytics/components/common/plots/service_map';
+import { SpanDetailTable } from '../../../../../public/components/trace_analytics/components/traces/span_detail_table';
+import { TraceAnalyticsComponentDeps } from '../../../../../public/components/trace_analytics/home';
+import { getListItem } from '../../helpers/utils';
+
+interface ServiceFlyoutProps extends TraceAnalyticsComponentDeps {
+  serviceName: string;
+  closeServiceFlyout: () => void;
+  openSpanFlyout: (spanId: string) => void;
+  setSelectedTab: (newTab: string) => void;
+}
+
+export function ServiceDetailFlyout(props: ServiceFlyoutProps) {
+  const {
+    serviceName,
+    http,
+    startTime,
+    endTime,
+    filters,
+    appConfigs,
+    query,
+    closeServiceFlyout,
+    openSpanFlyout,
+  } = props;
+  const [fields, setFields] = useState<any>({});
+  const [serviceMap, setServiceMap] = useState<ServiceObject>({});
+  const [total, setTotal] = useState(0);
+  const [DSL, setDSL] = useState<any>({});
+  const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
+    'latency' | 'error_rate' | 'throughput'
+  >('latency');
+
+  const renderContent = useMemo(() => {
+    if (!serviceName) return '-';
+    const overviewList = [
+      getListItem('Name', serviceName),
+      getListItem(
+        'Number of connected services',
+        fields.number_of_connected_services !== undefined ? fields.number_of_connected_services : 0
+      ),
+      getListItem(
+        'Connected services',
+        fields.connected_services
+          ? fields.connected_services.reduce((prev: string, curr: string) => {
+              return [prev, ', ', curr];
+            })
+          : '-'
+      ),
+      getListItem(
+        'Average latency (ms)',
+        fields.average_latency !== undefined ? fields.average_latency : '-'
+      ),
+      getListItem(
+        'Error rate',
+        fields.error_rate !== undefined ? _.round(fields.error_rate, 2).toString() + '%' : '-'
+      ),
+      getListItem('Throughput', fields.throughput !== undefined ? fields.throughput : '-'),
+      getListItem('Traces', fields.traces === 0 || fields.traces ? fields.traces : '-'),
+    ];
+
+    return (
+      <>
+        <EuiText size="m">
+          <span className="panel-title">Overview</span>
+        </EuiText>
+        <EuiSpacer size="s" />
+        {overviewList}
+        <EuiSpacer size="xs" />
+        <EuiHorizontalRule margin="s" />
+        <ServiceMap
+          serviceMap={serviceMap}
+          idSelected={serviceMapIdSelected}
+          setIdSelected={setServiceMapIdSelected}
+          currService={serviceName}
+          page="detailFlyout"
+        />
+        <EuiSpacer size="xs" />
+        <EuiHorizontalRule margin="s" />
+        <EuiText size="m">
+          <span className="panel-title">Spans</span>
+          {total === 0 || total ? <span className="panel-title-count">{` (${total})`}</span> : null}
+        </EuiText>
+        <EuiSpacer size="s" />
+        <SpanDetailTable
+          http={http}
+          hiddenColumns={['serviceName']}
+          DSL={DSL}
+          openFlyout={openSpanFlyout}
+          setTotal={setTotal}
+        />
+      </>
+    );
+  }, [serviceName, fields, serviceMap, DSL, serviceMapIdSelected]);
+
+  useEffect(() => {
+    const serviceDSL = filtersToDsl(filters, query, startTime, endTime, 'app', appConfigs);
+    handleServiceViewRequest(serviceName, http, serviceDSL, setFields);
+    handleServiceMapRequest(http, serviceDSL, setServiceMap, serviceName);
+    const spanDSL = filtersToDsl(filters, query, startTime, endTime, 'app', appConfigs);
+    spanDSL.query.bool.must.push({
+      term: {
+        serviceName,
+      },
+    });
+    setDSL(spanDSL);
+  }, [serviceName, startTime, endTime]);
+
+  return (
+    <EuiFlyout data-test-subj="serviceDetailFlyout" onClose={closeServiceFlyout} size="s">
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle data-test-subj="serviceDetailFlyoutTitle">
+          <h2>Service detail</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>{renderContent}</EuiFlyoutBody>
+    </EuiFlyout>
+  );
+}
diff --git a/public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx b/public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx
new file mode 100644
index 0000000000..ce687f306c
--- /dev/null
+++ b/public/components/application_analytics/components/flyout_components/trace_detail_flyout.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
+import React from 'react';
+import { TraceAnalyticsComponentDeps } from '../../../../../public/components/trace_analytics/home';
+import { TraceDetailRender } from './trace_detail_render';
+
+interface TraceFlyoutProps extends TraceAnalyticsComponentDeps {
+  traceId: string;
+  closeTraceFlyout: () => void;
+  openSpanFlyout: (spanId: string) => void;
+}
+
+export function TraceDetailFlyout(props: TraceFlyoutProps) {
+  const { traceId, http, closeTraceFlyout, openSpanFlyout } = props;
+  const renderContent = (
+    <TraceDetailRender traceId={traceId} http={http} openSpanFlyout={openSpanFlyout} />
+  );
+  return (
+    <EuiFlyout data-test-subj="traceDetailFlyout" onClose={closeTraceFlyout} size="m">
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle data-test-subj="traceDetailFlyoutTitle">
+          <h2>Trace detail</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>{renderContent}</EuiFlyoutBody>
+    </EuiFlyout>
+  );
+}
diff --git a/public/components/application_analytics/components/flyout_components/trace_detail_render.tsx b/public/components/application_analytics/components/flyout_components/trace_detail_render.tsx
new file mode 100644
index 0000000000..34a91e01b1
--- /dev/null
+++ b/public/components/application_analytics/components/flyout_components/trace_detail_render.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiText, EuiSpacer, EuiHorizontalRule, EuiCodeBlock } from '@elastic/eui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { ServiceBreakdownPanel } from '../../../trace_analytics/components/traces/service_breakdown_panel';
+import { SpanDetailPanel } from '../../../trace_analytics/components/traces/span_detail_panel';
+import {
+  handleTraceViewRequest,
+  handleServicesPieChartRequest,
+  handlePayloadRequest,
+} from '../../../trace_analytics/requests/traces_request_handler';
+import { HttpStart } from '../../../../../../../src/core/public';
+import { getListItem } from '../../helpers/utils';
+
+interface TraceDetailRenderProps {
+  traceId: string;
+  http: HttpStart;
+  openSpanFlyout: (spanId: string) => void;
+}
+
+export const TraceDetailRender = ({ traceId, http, openSpanFlyout }: TraceDetailRenderProps) => {
+  const [fields, setFields] = useState<any>({});
+  const [serviceBreakdownData, setServiceBreakdownData] = useState([]);
+  const [payloadData, setPayloadData] = useState('');
+  const [colorMap, setColorMap] = useState({});
+
+  const renderContent = useMemo(() => {
+    if (!traceId) return <></>;
+    const overviewList = [
+      getListItem('Trace ID', traceId),
+      getListItem('Trace group name', fields.trace_group || '-'),
+      getListItem('Latency', fields.latency),
+      getListItem('Last updated', fields.last_updated),
+      getListItem(
+        'Errors',
+        fields.error_count == null ? (
+          <></>
+        ) : fields.error_count > 0 ? (
+          <EuiText color="danger" size="s" style={{ fontWeight: 430 }}>
+            Yes
+          </EuiText>
+        ) : (
+          'No'
+        )
+      ),
+    ];
+
+    return (
+      <>
+        <EuiText size="m">
+          <span className="panel-title">Overview</span>
+        </EuiText>
+        <EuiSpacer size="s" />
+        {overviewList}
+        <EuiSpacer size="xs" />
+        <EuiHorizontalRule margin="s" />
+        <ServiceBreakdownPanel data={serviceBreakdownData} />
+        <EuiSpacer size="xs" />
+        <EuiHorizontalRule margin="s" />
+        <SpanDetailPanel
+          traceId={traceId}
+          http={http}
+          colorMap={colorMap}
+          page="app"
+          openSpanFlyout={openSpanFlyout}
+        />
+        <EuiSpacer size="xs" />
+        <EuiHorizontalRule margin="s" />
+        <EuiText size="m">
+          <span className="panel-title">Payload</span>
+        </EuiText>
+        <EuiSpacer size="s" />
+        {payloadData.length > 0 ? (
+          <EuiCodeBlock language="json" paddingSize="s" isCopyable overflowHeight={500}>
+            {payloadData}
+          </EuiCodeBlock>
+        ) : null}
+      </>
+    );
+  }, [traceId, fields, serviceBreakdownData, colorMap, payloadData]);
+
+  useEffect(() => {
+    handleTraceViewRequest(traceId, http, fields, setFields);
+    handleServicesPieChartRequest(traceId, http, setServiceBreakdownData, setColorMap);
+    handlePayloadRequest(traceId, http, payloadData, setPayloadData);
+  }, [traceId]);
+
+  return renderContent;
+};
diff --git a/public/components/application_analytics/helpers/modal_containers.tsx b/public/components/application_analytics/helpers/modal_containers.tsx
new file mode 100644
index 0000000000..e9670bc3bc
--- /dev/null
+++ b/public/components/application_analytics/helpers/modal_containers.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
+
+/* The file contains helper functions for modal layouts
+ * getClearModal - returns a confirm-modal with clear option
+ */
+
+export const getClearModal = (
+  onCancel: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void,
+  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
+  title: string,
+  message: string,
+  confirmMessage?: string
+) => {
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title={title}
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelButtonText="Cancel"
+        confirmButtonText={confirmMessage || 'Delete'}
+        buttonColor="danger"
+        defaultFocusedButton="confirm"
+      >
+        {message}
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};
diff --git a/public/components/application_analytics/helpers/utils.tsx b/public/components/application_analytics/helpers/utils.tsx
new file mode 100644
index 0000000000..a9df996b16
--- /dev/null
+++ b/public/components/application_analytics/helpers/utils.tsx
@@ -0,0 +1,340 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable no-console */
+
+import { EuiDescriptionList, EuiSelectOption, EuiSpacer, EuiText } from '@elastic/eui';
+import { ApplicationType, AvailabilityType } from 'common/types/application_analytics';
+import { FilterType } from 'public/components/trace_analytics/components/common/filters/filters';
+import React, { Dispatch, ReactChild } from 'react';
+import { batch } from 'react-redux';
+import PPLService from 'public/services/requests/ppl';
+import { IField } from '../../../../common/types/explorer';
+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';
+import { VisualizationType } from '../../../../common/types/custom_panels';
+import { NEW_SELECTED_QUERY_TAB, TAB_CREATED_TYPE } from '../../../../common/constants/explorer';
+import { APP_ANALYTICS_API_PREFIX } from '../../../../common/constants/application_analytics';
+import { HttpSetup } from '../../../../../../src/core/public';
+import {
+  init as initFields,
+  remove as removefields,
+} from '../../event_analytics/redux/slices/field_slice';
+import {
+  init as initVisualizationConfig,
+  reset as resetVisualizationConfig,
+} from '../../event_analytics/redux/slices/viualization_config_slice';
+import {
+  init as initQuery,
+  remove as removeQuery,
+  changeQuery,
+} from '../../event_analytics/redux/slices/query_slice';
+import {
+  init as initQueryResult,
+  remove as removeQueryResult,
+} from '../../event_analytics/redux/slices/query_result_slice';
+import { addTab, removeTab } from '../../event_analytics/redux/slices/query_tab_slice';
+import {
+  init as initPatterns,
+  remove as removePatterns,
+} from '../../event_analytics/redux/slices/patterns_slice';
+
+// Name validation
+export const isNameValid = (name: string, existingNames: string[]) => {
+  const toast: string[] = [];
+  if (name.length >= 50) {
+    toast.push('Name must be less than 50 characters.');
+  }
+  if (name.trim().length === 0) {
+    toast.push('Name must not be empty.');
+  }
+  if (existingNames.includes(name)) {
+    toast.push('Name must be unique.');
+  }
+  return toast;
+};
+
+export const getListItem = (title: string, description: string | React.ReactElement) => {
+  const titleComponent = (
+    <EuiText size="s" color="subdued" style={{ wordBreak: 'break-all', wordWrap: 'break-word' }}>
+      {title}
+    </EuiText>
+  );
+
+  const descriptionComponent = (
+    <EuiText
+      size="s"
+      style={{ wordBreak: 'break-all', wordWrap: 'break-word', whiteSpace: 'pre-line' }}
+    >
+      <b>{description}</b>
+    </EuiText>
+  );
+
+  return (
+    <div key={`list-item-${title}`}>
+      <EuiDescriptionList
+        data-test-subj={`${title}DescriptionList`}
+        listItems={[
+          {
+            title: titleComponent,
+            description: descriptionComponent || '-',
+          },
+        ]}
+        type="column"
+        align="center"
+        compressed
+      />
+      <EuiSpacer size="s" />
+    </div>
+  );
+};
+
+// Fetch application by id
+export const fetchAppById = async (
+  http: HttpSetup,
+  pplService: PPLService,
+  applicationId: string,
+  setApplication: (application: ApplicationType) => void,
+  setFilters: (filters: FilterType[]) => void,
+  setVisWithAvailability: (visList: EuiSelectOption[]) => void,
+  setToasts: (title: string, color?: string, text?: ReactChild) => void
+) => {
+  return http
+    .get(`${APP_ANALYTICS_API_PREFIX}/${applicationId}`)
+    .then(async (res: ApplicationType) => {
+      res.availability.availabilityVisId = (
+        await calculateAvailability(
+          http,
+          pplService,
+          res,
+          res.availability.availabilityVisId,
+          setVisWithAvailability
+        )
+      ).availabilityVisId;
+      setApplication(res);
+      const serviceFilters = res.servicesEntities.map((ser: string) => {
+        return {
+          field: 'serviceName',
+          operator: 'is',
+          value: ser,
+          inverted: false,
+          disabled: false,
+        };
+      });
+      const traceFilters = res.traceGroups.map((tra: string) => {
+        return {
+          field: 'traceGroup',
+          operator: 'is',
+          value: tra,
+          inverted: false,
+          disabled: false,
+        };
+      });
+      setFilters([...serviceFilters, ...traceFilters]);
+    })
+    .catch((err) => {
+      setToasts('Error occurred while fetching application', 'danger');
+      console.error(err);
+    });
+};
+
+// Remove tab data when closed
+export const removeTabData = (
+  dispatch: Dispatch<any>,
+  TabIdToBeClosed: string,
+  newIdToFocus: string
+) => {
+  batch(() => {
+    dispatch(removeQuery({ tabId: TabIdToBeClosed }));
+    dispatch(removefields({ tabId: TabIdToBeClosed }));
+    dispatch(removeQueryResult({ tabId: TabIdToBeClosed }));
+    dispatch(resetVisualizationConfig({ tabId: TabIdToBeClosed }));
+    dispatch(
+      removeTab({
+        tabId: TabIdToBeClosed,
+        [NEW_SELECTED_QUERY_TAB]: newIdToFocus,
+      })
+    );
+    dispatch(removePatterns({ tabId: TabIdToBeClosed }));
+  });
+};
+
+// Create a new tab and initialize its data
+export const initializeTabData = async (dispatch: Dispatch<any>, tabId: string, where: string) => {
+  await batch(() => {
+    dispatch(initQuery({ tabId }));
+    dispatch(initQueryResult({ tabId }));
+    dispatch(initFields({ tabId }));
+    dispatch(addTab({ tabId }));
+    dispatch(initVisualizationConfig({ tabId }));
+    dispatch(
+      changeQuery({
+        tabId,
+        query: {
+          [TAB_CREATED_TYPE]: where,
+        },
+      })
+    );
+    dispatch(initPatterns({ tabId }));
+  });
+};
+
+export const fetchPanelsVizIdList = async (http: HttpSetup, appPanelId: string) => {
+  return await http
+    .get(`${CUSTOM_PANELS_API_PREFIX}/panels/${appPanelId}`)
+    .then((res) => {
+      const visIds = res.operationalPanel.visualizations.map(
+        (viz: VisualizationType) => viz.savedVisualizationId
+      );
+      return visIds;
+    })
+    .catch((err) => {
+      console.error('Error occurred while fetching visualizations for panel', err);
+      return [];
+    });
+};
+
+export const calculateAvailability = async (
+  http: HttpSetup,
+  pplService: PPLService,
+  application: ApplicationType,
+  availabilityVisId: string,
+  setVisWithAvailability: (visList: EuiSelectOption[]) => void
+): Promise<AvailabilityType> => {
+  let availability = { name: '', color: '', availabilityVisId: '' };
+  const panelId = application.panelId;
+  if (!panelId) return availability;
+  // Fetches saved visualizations associated to application's panel
+  // Order visualizations by most recently created
+  const savedVisualizationsIds = (await fetchPanelsVizIdList(http, panelId)).reverse();
+  if (!savedVisualizationsIds) return availability;
+  const visWithAvailability = [];
+  let availabilityFound = false;
+  for (let i = 0; i < savedVisualizationsIds.length; i++) {
+    const visualizationId = savedVisualizationsIds[i];
+    // Fetches data for visualization
+    const visData = await fetchVisualizationById(http, visualizationId, (value: string) =>
+      console.error(value)
+    );
+    // If there are levels, we get the current value
+    if (visData.user_configs.availabilityConfig?.hasOwnProperty('level')) {
+      // For every saved visualization with availability levels we push it to visWithAvailability
+      // This is used to populate the options in configuration
+      visWithAvailability.push({ value: visualizationId, text: visData.name });
+
+      const levels = visData.user_configs.availabilityConfig.level.reverse();
+      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: finalQuery,
+          format: 'viz',
+        })
+        .then((res) => {
+          const stat = res.metadata.fields.filter(
+            (field: IField) => !field.name.match(SPAN_REGEX)
+          )[0].name;
+          const value = res.data[stat];
+          currValue = value[value.length - 1];
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+      for (let j = 0; j < levels.length; j++) {
+        const level = levels[j];
+        // If there is an availiabilityVisId selected we only want to compute availability based on that
+        if (availabilityVisId ? availabilityVisId === visualizationId : true) {
+          if (level.value !== null) {
+            if (currValue === null) {
+              availability = {
+                name: '',
+                color: 'null',
+                availabilityVisId: '',
+              };
+            } else {
+              if (!availabilityFound) {
+                const expression = level.expression;
+                switch (expression) {
+                  case '≥':
+                    if (currValue >= parseFloat(level.value)) {
+                      availability = {
+                        name: level.name,
+                        color: level.color,
+                        availabilityVisId: visualizationId,
+                      };
+                      availabilityFound = true;
+                    }
+                    break;
+                  case '≤':
+                    if (currValue <= parseFloat(level.value)) {
+                      availability = {
+                        name: level.name,
+                        color: level.color,
+                        availabilityVisId: visualizationId,
+                      };
+                      availabilityFound = true;
+                    }
+                    break;
+                  case '>':
+                    if (currValue > parseFloat(level.value)) {
+                      availability = {
+                        name: level.name,
+                        color: level.color,
+                        availabilityVisId: visualizationId,
+                      };
+                      availabilityFound = true;
+                    }
+                    break;
+                  case '<':
+                    if (currValue < parseFloat(level.value)) {
+                      availability = {
+                        name: level.name,
+                        color: level.color,
+                        availabilityVisId: visualizationId,
+                      };
+                      availabilityFound = true;
+                    }
+                    break;
+                  case '=':
+                    if (currValue === parseFloat(level.value)) {
+                      availability = {
+                        name: level.name,
+                        color: level.color,
+                        availabilityVisId: visualizationId,
+                      };
+                      availabilityFound = true;
+                    }
+                    break;
+                  case '≠':
+                    if (currValue !== parseFloat(level.value)) {
+                      availability = {
+                        name: level.name,
+                        color: level.color,
+                        availabilityVisId: visualizationId,
+                      };
+                      availabilityFound = true;
+                    }
+                    break;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  setVisWithAvailability(visWithAvailability);
+  if (!availabilityFound && visWithAvailability.length > 0) {
+    return { name: '', color: 'undefined', availabilityVisId: '' };
+  }
+  return availability;
+};
diff --git a/public/components/application_analytics/home.tsx b/public/components/application_analytics/home.tsx
new file mode 100644
index 0000000000..4e44470fd3
--- /dev/null
+++ b/public/components/application_analytics/home.tsx
@@ -0,0 +1,449 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable no-console */
+
+import React, { ReactChild, useEffect, useState } from 'react';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import DSLService from 'public/services/requests/dsl';
+import PPLService from 'public/services/requests/ppl';
+import SavedObjects from 'public/services/saved_objects/event_analytics/saved_objects';
+import TimestampUtils from 'public/services/timestamp/timestamp';
+import { EuiGlobalToastList, EuiLink } from '@elastic/eui';
+import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
+import { isEmpty, last } from 'lodash';
+import { useDispatch } from 'react-redux';
+import { AppTable } from './components/app_table';
+import { Application } from './components/application';
+import { CreateApp } from './components/create';
+import { TraceAnalyticsComponentDeps, TraceAnalyticsCoreDeps } from '../trace_analytics/home';
+import { FilterType } from '../trace_analytics/components/common/filters/filters';
+import { handleIndicesExistRequest } from '../trace_analytics/requests/request_handler';
+import { ObservabilitySideBar } from '../common/side_nav';
+import { NotificationsStart } from '../../../../../src/core/public';
+import { APP_ANALYTICS_API_PREFIX } from '../../../common/constants/application_analytics';
+import {
+  ApplicationRequestType,
+  ApplicationType,
+} from '../../../common/types/application_analytics';
+import {
+  calculateAvailability,
+  fetchPanelsVizIdList,
+  isNameValid,
+  removeTabData,
+} from './helpers/utils';
+import {
+  CUSTOM_PANELS_API_PREFIX,
+  CUSTOM_PANELS_DOCUMENTATION_URL,
+} from '../../../common/constants/custom_panels';
+import { QueryManager } from '../../../common/query_manager/ppl_query_manager';
+
+export type AppAnalyticsCoreDeps = TraceAnalyticsCoreDeps;
+
+interface HomeProps extends RouteComponentProps, AppAnalyticsCoreDeps {
+  pplService: PPLService;
+  dslService: DSLService;
+  savedObjects: SavedObjects;
+  timestampUtils: TimestampUtils;
+  notifications: NotificationsStart;
+  queryManager: QueryManager;
+}
+
+export interface AppAnalyticsComponentDeps extends TraceAnalyticsComponentDeps {
+  name: string;
+  description: string;
+  setNameWithStorage: (newName: string) => void;
+  setDescriptionWithStorage: (newDescription: string) => void;
+  setQueryWithStorage: (newQuery: string) => void;
+  setFiltersWithStorage: (newFilters: FilterType[]) => void;
+  setAppConfigs: (newAppConfigs: FilterType[]) => void;
+}
+
+export const Home = (props: HomeProps) => {
+  const {
+    pplService,
+    dslService,
+    timestampUtils,
+    savedObjects,
+    parentBreadcrumbs,
+    http,
+    chrome,
+    notifications,
+    queryManager,
+  } = props;
+  const [triggerSwitchToEvent, setTriggerSwitchToEvent] = useState(0);
+  const dispatch = useDispatch();
+  const [applicationList, setApplicationList] = useState<ApplicationType[]>([]);
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [indicesExist, setIndicesExist] = useState(true);
+  const [appConfigs, setAppConfigs] = useState<FilterType[]>([]);
+  const storedFilters = sessionStorage.getItem('AppAnalyticsFilters');
+  const [filters, setFilters] = useState<FilterType[]>(
+    storedFilters ? JSON.parse(storedFilters) : []
+  );
+  const [name, setName] = useState(sessionStorage.getItem('AppAnalyticsName') || '');
+  const [description, setDescription] = useState(
+    sessionStorage.getItem('AppAnalyticsDescription') || ''
+  );
+  const [query, setQuery] = useState<string>(sessionStorage.getItem('AppAnalyticsQuery') || '');
+  const [startTime, setStartTime] = useState<string>(
+    sessionStorage.getItem('AppAnalyticsStartTime') || 'now-24h'
+  );
+  const [endTime, setEndTime] = useState<string>(
+    sessionStorage.getItem('AppAnalyticsEndTime') || 'now'
+  );
+
+  // Setting state with storage to save input when user refreshes page
+  const setFiltersWithStorage = (newFilters: FilterType[]) => {
+    setFilters(newFilters);
+    sessionStorage.setItem('AppAnalyticsFilters', JSON.stringify(newFilters));
+  };
+  const setNameWithStorage = (newName: string) => {
+    setName(newName);
+    sessionStorage.setItem('AppAnalyticsName', newName);
+  };
+  const setDescriptionWithStorage = (newDescription: string) => {
+    setDescription(newDescription);
+    sessionStorage.setItem('AppAnalyticsDescription', newDescription);
+  };
+  const setQueryWithStorage = (newQuery: string) => {
+    setQuery(newQuery);
+    sessionStorage.setItem('AppAnalyticsQuery', newQuery);
+  };
+
+  useEffect(() => {
+    handleIndicesExistRequest(http, setIndicesExist);
+  }, []);
+
+  const commonProps: AppAnalyticsComponentDeps = {
+    parentBreadcrumbs,
+    http,
+    chrome,
+    name,
+    setNameWithStorage,
+    description,
+    setDescriptionWithStorage,
+    query,
+    setQuery,
+    setQueryWithStorage,
+    appConfigs,
+    setAppConfigs,
+    filters,
+    setFilters,
+    setFiltersWithStorage,
+    startTime,
+    setStartTime,
+    endTime,
+    setEndTime,
+    indicesExist,
+  };
+
+  const setToast = (title: string, color = 'success', text?: ReactChild) => {
+    if (!text) text = '';
+    setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
+  };
+
+  const clearStorage = () => {
+    setNameWithStorage('');
+    setDescriptionWithStorage('');
+    setFiltersWithStorage([]);
+    setQueryWithStorage('');
+  };
+
+  const moveToApp = (id: string, type: string) => {
+    window.location.assign(`${last(parentBreadcrumbs)!.href}application_analytics/${id}`);
+    if (type === 'createSetAvailability') {
+      setTriggerSwitchToEvent(2);
+    }
+  };
+
+  const createPanelForApp = (applicationId: string, appName: string, type: string) => {
+    return http
+      .post(`${CUSTOM_PANELS_API_PREFIX}/panels`, {
+        body: JSON.stringify({
+          panelName: `${appName}'s Panel`,
+          applicationId,
+        }),
+      })
+      .then((res) => {
+        updateApp(applicationId, { panelId: res.newPanelId }, type);
+      })
+      .catch((err) => {
+        setToast(
+          'Please ask your administrator to enable Operational Panels for you.',
+          'danger',
+          <EuiLink href={CUSTOM_PANELS_DOCUMENTATION_URL} target="_blank">
+            Documentation
+          </EuiLink>
+        );
+        console.error(err);
+      });
+  };
+
+  const deletePanelForApp = (appPanelId: string) => {
+    const concatList = [appPanelId].toString();
+    return http.delete(`${CUSTOM_PANELS_API_PREFIX}/panelList/` + concatList).catch((err) => {
+      setToast(
+        'Error occurred while deleting Operational Panels, please make sure you have the correct permission.',
+        'danger'
+      );
+      console.error(err.body.message);
+    });
+  };
+
+  const deleteSavedVisualizationsForPanel = async (appPanelId: string) => {
+    const savedVizIdsToDelete = await fetchPanelsVizIdList(http, appPanelId);
+    if (!isEmpty(savedVizIdsToDelete)) {
+      savedObjects
+        .deleteSavedObjectsList({ objectIdList: savedVizIdsToDelete })
+        .then((res) => {
+          deletePanelForApp(appPanelId);
+        })
+        .catch((err) => {
+          setToast('Error occurred while deleting Saved Visualizations', 'danger');
+          console.error(err);
+        });
+    }
+  };
+
+  // Fetches all existing applications
+  const fetchApps = () => {
+    return http
+      .get(`${APP_ANALYTICS_API_PREFIX}/`)
+      .then(async (res) => {
+        // Want to calculate availability going down the table
+        const availabilityVisIdStore: Record<string, string> = {};
+        for (let i = 0; i < res.data.length; i++) {
+          availabilityVisIdStore[res.data[i].id] = res.data[i].availability.availabilityVisId;
+          res.data[i].availability = { name: '', color: 'loading', availabilityVisId: '' };
+        }
+        setApplicationList(res.data);
+        for (let i = res.data.length - 1; i > -1; i--) {
+          res.data[i].availability = await calculateAvailability(
+            http,
+            pplService,
+            res.data[i],
+            availabilityVisIdStore[res.data[i].id],
+            () => {}
+          );
+          // Need to set state with new object to trigger re-render
+          setApplicationList([
+            ...res.data.filter((app: ApplicationType) => app.id !== res.data[i].id),
+            res.data[i],
+          ]);
+        }
+      })
+      .catch((err) => {
+        setToast('Error occurred while fetching applications', 'danger');
+        console.error(err);
+      });
+  };
+
+  // Create a new application
+  const createApp = (application: ApplicationRequestType, type: string) => {
+    const toast = isNameValid(
+      application.name,
+      applicationList.map((obj) => obj.name)
+    );
+    if (toast.length > 0) {
+      setToast(toast.join(', '), 'danger');
+      return;
+    }
+
+    const requestBody = {
+      name: application.name,
+      description: application.description || '',
+      baseQuery: application.baseQuery,
+      servicesEntities: application.servicesEntities,
+      traceGroups: application.traceGroups,
+      availabilityVisId: '',
+    };
+
+    return http
+      .post(`${APP_ANALYTICS_API_PREFIX}/`, {
+        body: JSON.stringify(requestBody),
+      })
+      .then(async (res) => {
+        createPanelForApp(res.newAppId, application.name, type);
+        setToast(`Application "${application.name}" successfully created!`);
+        clearStorage();
+      })
+      .catch((err) => {
+        setToast(`Error occurred while creating new application "${application.name}"`, 'danger');
+        console.error(err);
+      });
+  };
+
+  // Rename an existing application
+  const renameApp = (newAppName: string, appId: string) => {
+    const toast = isNameValid(
+      newAppName,
+      applicationList.map((obj) => obj.name)
+    );
+    if (toast.length > 0) {
+      setToast(toast.join(', '), 'danger');
+      return;
+    }
+
+    const requestBody = {
+      appId,
+      name: newAppName,
+    };
+
+    return http
+      .put(`${APP_ANALYTICS_API_PREFIX}/rename`, {
+        body: JSON.stringify(requestBody),
+      })
+      .then((res) => {
+        setApplicationList((prevApplicationList) => {
+          const newApplicationData = [...prevApplicationList];
+          const renamedApplication = newApplicationData.find(
+            (application) => application.id === appId
+          );
+          if (renamedApplication) renamedApplication.name = newAppName;
+          return newApplicationData;
+        });
+        setToast(`Application successfully renamed to "${newAppName}"`);
+      })
+      .catch((err) => {
+        setToast('Error occurred while renaming application', 'danger');
+        console.error(err);
+      });
+  };
+
+  // Update existing application
+  const updateApp = (
+    appId: string,
+    updateAppData: Partial<ApplicationRequestType>,
+    type: string
+  ) => {
+    const requestBody = {
+      appId,
+      updateBody: updateAppData,
+    };
+
+    return http
+      .put(`${APP_ANALYTICS_API_PREFIX}/`, {
+        body: JSON.stringify(requestBody),
+      })
+      .then((res) => {
+        if (type === 'update') {
+          setToast('Application successfully updated.');
+          clearStorage();
+          moveToApp(res.updatedAppId, type);
+        }
+        if (type.startsWith('create')) {
+          moveToApp(res.updatedAppId, type);
+        }
+      })
+      .catch((err) => {
+        setToast('Error occurred while updating application', 'danger');
+        console.error(err);
+      });
+  };
+
+  // Delete existing applications
+  const deleteApp = (appList: string[], panelList: string[], toastMessage?: string) => {
+    return http
+      .delete(`${APP_ANALYTICS_API_PREFIX}/${appList.join(',')}`)
+      .then((res) => {
+        setApplicationList((prevApplicationList) => {
+          return prevApplicationList.filter((app) => !appList.includes(app.id));
+        });
+
+        for (let i = 0; i < appList.length; i++) {
+          removeTabData(dispatch, appList[i], '');
+        }
+
+        for (let i = 0; i < panelList.length; i++) {
+          deleteSavedVisualizationsForPanel(panelList[i]);
+        }
+
+        const message =
+          toastMessage || `Application${appList.length > 1 ? 's' : ''} successfully deleted!`;
+        setToast(message);
+        return res;
+      })
+      .catch((err: any) => {
+        setToast('Error occured while deleting application', 'danger');
+        console.error(err);
+      });
+  };
+
+  const callback = (childFunc: () => void) => {
+    if (childFunc && triggerSwitchToEvent > 0) {
+      childFunc();
+      setTriggerSwitchToEvent(triggerSwitchToEvent - 1);
+    }
+  };
+
+  return (
+    <div>
+      <EuiGlobalToastList
+        toasts={toasts}
+        dismissToast={(removedToast) => {
+          setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
+        }}
+        toastLifeTimeMs={6000}
+      />
+      <Switch>
+        <Route
+          exact
+          path={['/', '/application_analytics']}
+          render={() => (
+            <ObservabilitySideBar>
+              <AppTable
+                loading={false}
+                applications={applicationList}
+                fetchApplications={fetchApps}
+                renameApplication={renameApp}
+                deleteApplication={deleteApp}
+                clearStorage={clearStorage}
+                moveToApp={moveToApp}
+                {...commonProps}
+              />
+            </ObservabilitySideBar>
+          )}
+        />
+        <Route
+          exact
+          path={['/application_analytics/create', '/application_analytics/edit/:id+']}
+          render={(routerProps) => (
+            <CreateApp
+              dslService={dslService}
+              pplService={pplService}
+              createApp={createApp}
+              updateApp={updateApp}
+              setToasts={setToast}
+              clearStorage={clearStorage}
+              existingAppId={decodeURIComponent(routerProps.match.params.id) || ''}
+              {...commonProps}
+            />
+          )}
+        />
+        <Route
+          exact
+          path={'/application_analytics/:id+'}
+          render={(routerProps) => (
+            <Application
+              disabled={false}
+              appId={decodeURIComponent(routerProps.match.params.id)}
+              pplService={pplService}
+              dslService={dslService}
+              savedObjects={savedObjects}
+              timestampUtils={timestampUtils}
+              notifications={notifications}
+              setToasts={setToast}
+              updateApp={updateApp}
+              callback={callback}
+              queryManager={queryManager}
+              {...commonProps}
+            />
+          )}
+        />
+      </Switch>
+    </div>
+  );
+};
diff --git a/public/components/common/debounced_component/debounced_component.tsx b/public/components/common/debounced_component/debounced_component.tsx
new file mode 100644
index 0000000000..710c16c9c2
--- /dev/null
+++ b/public/components/common/debounced_component/debounced_component.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useMemo, useEffect, memo, FunctionComponent } from 'react';
+import { debounce } from 'lodash';
+
+/**
+ * debouncedComponent wraps the specified React component, returning a component which
+ * only renders once there is a pause in props changes for at least `delay` milliseconds.
+ * During the debounce phase, it will return the previously rendered value.
+ */
+export function debouncedComponent<TProps>(component: FunctionComponent<TProps>, delay = 256) {
+  const MemoizedComponent = (memo(component) as unknown) as FunctionComponent<TProps>;
+
+  return (props: TProps) => {
+    const [cachedProps, setCachedProps] = useState(props);
+    const debouncePropsChange = useMemo(() => debounce(setCachedProps, delay), [setCachedProps]);
+
+    // cancel debounced prop change if component has been unmounted in the meantime
+    useEffect(() => () => debouncePropsChange.cancel(), [debouncePropsChange]);
+    debouncePropsChange(props);
+
+    return React.createElement(MemoizedComponent, cachedProps);
+  };
+}
diff --git a/public/components/common/debounced_component/index.ts b/public/components/common/debounced_component/index.ts
new file mode 100644
index 0000000000..aa1308791a
--- /dev/null
+++ b/public/components/common/debounced_component/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './debounced_component';
diff --git a/public/components/common/field_button/field_button.scss b/public/components/common/field_button/field_button.scss
new file mode 100644
index 0000000000..e9fdd6a308
--- /dev/null
+++ b/public/components/common/field_button/field_button.scss
@@ -0,0 +1,122 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+ 
+.osdFieldButton {
+  @include euiFontSizeS;
+  border-radius: $euiBorderRadius;
+  margin-bottom: $euiSizeXS;
+  display: flex;
+  align-items: center;
+  transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance,
+    background-color $euiAnimSpeedFast $euiAnimSlightResistance; // sass-lint:disable-line indentation
+
+  &:focus-within,
+  &-isActive {
+    @include euiFocusRing;
+  }
+}
+
+.osdFieldButton--isDraggable {
+  background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
+
+  &:hover,
+  &:focus,
+  &:focus-within {
+    @include euiBottomShadowMedium;
+    border-radius: $euiBorderRadius;
+    z-index: 2;
+  }
+
+  .osdFieldButton__button {
+    &:hover,
+    &:focus {
+      cursor: grab;
+    }
+  }
+}
+
+.osdFieldButton__button {
+  flex-grow: 1;
+  text-align: left;
+  padding: $euiSizeS;
+  display: flex;
+  align-items: flex-start;
+}
+
+.osdFieldButton__fieldIcon {
+  flex-shrink: 0;
+  line-height: 0;
+  margin-right: $euiSizeS;
+}
+
+.osdFieldButton__name {
+  flex-grow: 1;
+  word-break: break-word;
+}
+
+.osdFieldButton__infoIcon {
+  flex-shrink: 0;
+  margin-left: $euiSizeXS;
+}
+
+.osdFieldButton__fieldAction {
+  margin-right: $euiSizeS;
+}
+
+// Reduce text size and spacing for the small size
+.osdFieldButton--small {
+  font-size: $euiFontSizeXS;
+
+  .osdFieldButton__button {
+    padding: $euiSizeXS;
+  }
+
+  .osdFieldButton__fieldIcon,
+  .osdFieldButton__fieldAction {
+    margin-right: $euiSizeXS;
+  }
+}
+
+.shard__fieldSelectorField {
+  &:hover,
+  &:focus-within,
+  &[class*='-isActive'] {
+    .dscSidebarItem__action {
+      opacity: 1;
+    }
+  }
+
+  & > .osdFieldButton__button {
+    padding: 0;
+  }
+
+  & .osdFieldButton__name {
+    padding: $euiSizeS $euiSizeS $euiSizeS 0;
+  }
+
+  & > button {
+    align-items: stretch;
+  }
+
+  & .osdFieldIcon {
+    box-shadow: none;
+    height: 100%;
+    flex-shrink: 0;
+    line-height: 0;
+  }
+
+  & .osdFieldButton__fieldIcon {
+    box-shadow: none;
+    margin-right: 8px;
+  }
+}
+
+#vis__mainContent .explorer__fieldSelectorField {
+  @include euiBottomShadowSmall;
+
+  background-color: $euiColorEmptyShade;
+  border: $euiBorderThin;
+  margin-top: $euiSizeS;
+}
diff --git a/public/components/common/field_button/field_button.tsx b/public/components/common/field_button/field_button.tsx
new file mode 100644
index 0000000000..963cdf84a9
--- /dev/null
+++ b/public/components/common/field_button/field_button.tsx
@@ -0,0 +1,123 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './field_button.scss';
+import classNames from 'classnames';
+import React, { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { CommonProps } from '@elastic/eui';
+
+export interface FieldButtonProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Label for the button
+   */
+  fieldName: ReactNode;
+  /**
+   * Icon representing the field type.
+   * Recommend using FieldIcon
+   */
+  fieldIcon?: ReactNode;
+  /**
+   * An optional node to place inside and at the end of the <button>
+   */
+  fieldInfoIcon?: ReactNode;
+  /**
+   * An optional node to place outside of and to the right of the <button>
+   */
+  fieldAction?: ReactNode;
+  /**
+   * Adds a forced focus ring to the whole component
+   */
+  isActive?: boolean;
+  /**
+   * Styles the component differently to indicate it is draggable
+   */
+  isDraggable?: boolean;
+  /**
+   * Use the small size in condensed areas
+   */
+  size?: ButtonSize;
+  className?: string;
+  /**
+   * The component will render a `<button>` when provided an `onClick`
+   */
+  onClick?: () => void;
+  /**
+   * Applies to the inner `<button>`  or `<div>`
+   */
+  dataTestSubj?: string;
+  /**
+   * Pass more button props to the `<button>` element
+   */
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement> & CommonProps;
+}
+
+const sizeToClassNameMap = {
+  s: 'osdFieldButton--small',
+  m: null,
+} as const;
+
+export type ButtonSize = keyof typeof sizeToClassNameMap;
+
+export const SIZES = Object.keys(sizeToClassNameMap) as ButtonSize[];
+
+export function FieldButton({
+  size = 'm',
+  isActive = false,
+  fieldIcon,
+  fieldName,
+  fieldInfoIcon,
+  fieldAction,
+  className,
+  isDraggable = false,
+  onClick,
+  dataTestSubj,
+  buttonProps,
+  ...rest
+}: FieldButtonProps) {
+  
+  const classes = classNames(
+    'osdFieldButton',
+    size ? sizeToClassNameMap[size] : null,
+    { 'osdFieldButton-isActive': isActive },
+    { 'osdFieldButton--isDraggable': isDraggable },
+    className
+  );
+
+  const contentClasses = classNames('osd-resetFocusState', 'osdFieldButton__button');
+
+  const innerContent = (
+    <>
+      {fieldIcon && <span className="osdFieldButton__fieldIcon">{fieldIcon}</span>}
+      {fieldName && <span className="osdFieldButton__name">{fieldName}</span>}
+      {fieldInfoIcon && <div className="osdFieldButton__infoIcon">{fieldInfoIcon}</div>}
+    </>
+  );
+
+  return (
+    <div className={classes} {...rest}>
+      {onClick ? (
+        <button
+          onClick={(e) => {
+            if (e.type === 'click') {
+              e.currentTarget.focus();
+            }
+            onClick();
+          }}
+          data-test-subj={dataTestSubj}
+          className={contentClasses}
+          {...buttonProps}
+        >
+          {innerContent}
+        </button>
+      ) : (
+        <div className={contentClasses} data-test-subj={dataTestSubj}>
+          {innerContent}
+        </div>
+      )}
+
+      {fieldAction && <div className="osdFieldButton__fieldAction">{fieldAction}</div>}
+    </div>
+  );
+}
diff --git a/public/components/common/field_button/index.ts b/public/components/common/field_button/index.ts
new file mode 100644
index 0000000000..70274f800f
--- /dev/null
+++ b/public/components/common/field_button/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './field_button';
diff --git a/public/components/common/field_icon/field_icon.tsx b/public/components/common/field_icon/field_icon.tsx
new file mode 100644
index 0000000000..467c2c7c0b
--- /dev/null
+++ b/public/components/common/field_icon/field_icon.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import classNames from 'classnames';
+import { EuiToken, EuiTokenProps } from '@elastic/eui';
+
+export interface FieldIconProps extends Omit<EuiTokenProps, 'iconType'> {
+  type:
+    | 'boolean'
+    | 'conflict'
+    | 'date'
+    | 'geo_point'
+    | 'geo_shape'
+    | 'ip'
+    | 'murmur3'
+    | 'number'
+    | '_source'
+    | 'string'
+    | string
+    | 'nested';
+  label?: string;
+  scripted?: boolean;
+}
+
+// defaultIcon => a unknown datatype
+const defaultIcon = { iconType: 'tokenString' };
+
+export const typeToEuiIconMap: Partial<Record<string, EuiTokenProps>> = {
+  boolean: { iconType: 'tokenBoolean' },
+  // icon for an index pattern mapping conflict in discover
+  conflict: { iconType: 'alert', color: 'euiVisColor9' },
+  date: { iconType: 'tokenDate' },
+  geo_point: { iconType: 'tokenGeo' },
+  geo_shape: { iconType: 'tokenGeo' },
+  ip: { iconType: 'tokenIP' },
+  // is a plugin's data type https://www.elastic.co/guide/en/elasticsearch/plugins/current/mapper-murmur3-usage.html
+  murmur3: { iconType: 'tokenFile' },
+  number: { iconType: 'tokenNumber' },
+  _source: { iconType: 'editorCodeBlock', color: 'gray' },
+  string: { iconType: 'tokenString' },
+  nested: { iconType: 'tokenNested' },
+};
+
+/**
+ * Field token icon used across the app
+ */
+export function FieldIcon({
+  type,
+  label,
+  size = 'l',
+  scripted,
+  className,
+  ...rest
+}: FieldIconProps) {
+  const token = typeToEuiIconMap[type] || defaultIcon;
+  return (
+    <EuiToken
+      {...token}
+      className={classNames('osdFieldIcon', className)}
+      aria-label={label || type}
+      title={label || type}
+      size={size as EuiTokenProps['size']}
+      fill={scripted ? 'dark' : undefined}
+      {...rest}
+    />
+  );
+}
diff --git a/public/components/common/field_icon/index.ts b/public/components/common/field_icon/index.ts
new file mode 100644
index 0000000000..87023615e0
--- /dev/null
+++ b/public/components/common/field_icon/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './field_icon';
diff --git a/public/components/common/field_name/field_name.tsx b/public/components/common/field_name/field_name.tsx
new file mode 100644
index 0000000000..b7ea2a5929
--- /dev/null
+++ b/public/components/common/field_name/field_name.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
+
+// import { FieldIcon, FieldIconProps } from '../../../../../kibana_react/public';
+// import { shortenDottedString } from '../../helpers';
+import { getFieldTypeName } from './field_type_name';
+
+// properties fieldType and fieldName are provided in osd_doc_view
+// this should be changed when both components are deangularized
+interface Props {
+  fieldName: string;
+  fieldType: string;
+  useShortDots?: boolean;
+  // fieldIconProps?: Omit<FieldIconProps, 'type'>;
+  scripted?: boolean;
+}
+
+export function FieldName({
+  fieldName,
+  fieldType,
+  useShortDots,
+  // fieldIconProps,
+  scripted = false,
+}: Props) {
+  const typeName = getFieldTypeName(fieldType);
+  // const displayName = useShortDots ? shortenDottedString(fieldName) : fieldName;
+  const displayName = fieldName;
+
+  return (
+    <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+      {/* <EuiFlexItem grow={false}>
+        <FieldIcon type={fieldType} label={typeName} scripted={scripted} {...fieldIconProps} />
+      </EuiFlexItem> */}
+      <EuiFlexItem className="eui-textTruncate">
+        <EuiToolTip
+          position="top"
+          content={displayName}
+          delay="long"
+          anchorClassName="eui-textTruncate"
+        >
+          <span>{displayName}</span>
+        </EuiToolTip>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/public/components/common/field_name/field_type_name.ts b/public/components/common/field_name/field_type_name.ts
new file mode 100644
index 0000000000..f44eeb79c1
--- /dev/null
+++ b/public/components/common/field_name/field_type_name.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { i18n } from '@osd/i18n';
+
+export function getFieldTypeName(type: string) {
+  switch (type) {
+    case 'boolean':
+      return i18n.translate('discover.fieldNameIcons.booleanAriaLabel', {
+        defaultMessage: 'Boolean field',
+      });
+    case 'conflict':
+      return i18n.translate('discover.fieldNameIcons.conflictFieldAriaLabel', {
+        defaultMessage: 'Conflicting field',
+      });
+    case 'date':
+      return i18n.translate('discover.fieldNameIcons.dateFieldAriaLabel', {
+        defaultMessage: 'Date field',
+      });
+    case 'geo_point':
+      return i18n.translate('discover.fieldNameIcons.geoPointFieldAriaLabel', {
+        defaultMessage: 'Geo point field',
+      });
+    case 'geo_shape':
+      return i18n.translate('discover.fieldNameIcons.geoShapeFieldAriaLabel', {
+        defaultMessage: 'Geo shape field',
+      });
+    case 'ip':
+      return i18n.translate('discover.fieldNameIcons.ipAddressFieldAriaLabel', {
+        defaultMessage: 'IP address field',
+      });
+    case 'murmur3':
+      return i18n.translate('discover.fieldNameIcons.murmur3FieldAriaLabel', {
+        defaultMessage: 'Murmur3 field',
+      });
+    case 'number':
+      return i18n.translate('discover.fieldNameIcons.numberFieldAriaLabel', {
+        defaultMessage: 'Number field',
+      });
+    case 'source':
+      // Note that this type is currently not provided, type for _source is undefined
+      return i18n.translate('discover.fieldNameIcons.sourceFieldAriaLabel', {
+        defaultMessage: 'Source field',
+      });
+    case 'string':
+      return i18n.translate('discover.fieldNameIcons.stringFieldAriaLabel', {
+        defaultMessage: 'String field',
+      });
+    case 'nested':
+      return i18n.translate('discover.fieldNameIcons.nestedFieldAriaLabel', {
+        defaultMessage: 'Nested field',
+      });
+    default:
+      return i18n.translate('discover.fieldNameIcons.unknownFieldAriaLabel', {
+        defaultMessage: 'Unknown field',
+      });
+  }
+}
diff --git a/public/components/common/flyout_containers/flyout_containers.tsx b/public/components/common/flyout_containers/flyout_containers.tsx
new file mode 100644
index 0000000000..182a811aac
--- /dev/null
+++ b/public/components/common/flyout_containers/flyout_containers.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiFlyout } from '@elastic/eui';
+import React from 'react';
+
+/*
+ * "FlyoutContainers" component used to create flyouts
+ *
+ * Props taken in as params are:
+ * flyoutHeader - header JSX element of flyout
+ * flyoutBody - body JSX element of flyout
+ * flyoutFooter - footer JSX element of flyout
+ * ariaLabel - aria-label for focus of flyout
+ */
+
+type Props = {
+  closeFlyout: () => void;
+  flyoutHeader: JSX.Element;
+  flyoutBody: JSX.Element;
+  flyoutFooter: JSX.Element;
+  ariaLabel: string;
+  size?: string;
+};
+
+export const FlyoutContainers = ({
+  closeFlyout,
+  flyoutHeader,
+  flyoutBody,
+  flyoutFooter,
+  ariaLabel,
+  size,
+}: Props) => {
+  return (
+    <div>
+      <EuiFlyout
+        className="observability-flyout"
+        ownFocus={false}
+        onClose={() => closeFlyout()}
+        size={size ? size : 'm'}
+        aria-labelledby={ariaLabel}
+      >
+        {flyoutHeader}
+        {flyoutBody}
+        {flyoutFooter}
+      </EuiFlyout>
+    </div>
+  );
+};
diff --git a/public/components/common/flyout_containers/index.ts b/public/components/common/flyout_containers/index.ts
new file mode 100644
index 0000000000..bff9741937
--- /dev/null
+++ b/public/components/common/flyout_containers/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { FlyoutContainers } from './flyout_containers';
diff --git a/public/components/common/helpers/add_sample_modal.tsx b/public/components/common/helpers/add_sample_modal.tsx
new file mode 100644
index 0000000000..d027b73543
--- /dev/null
+++ b/public/components/common/helpers/add_sample_modal.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
+
+export const getSampleDataModal = (
+  onCancel: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void,
+  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+) => {
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title="Add samples"
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelButtonText="Cancel"
+        confirmButtonText="Yes"
+        defaultFocusedButton="confirm"
+      >
+        <p>
+          Do you want to add sample data? This will also add Dashboards sample flights and logs
+          data if they have not been added.
+        </p>
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};
diff --git a/public/components/common/helpers/delete_modal.tsx b/public/components/common/helpers/delete_modal.tsx
new file mode 100644
index 0000000000..9bf80ec1fb
--- /dev/null
+++ b/public/components/common/helpers/delete_modal.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiOverlayMask,
+  EuiModal,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+
+export const DeleteModal = ({
+  onCancel,
+  onConfirm,
+  title,
+  message,
+}: {
+  onCancel: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void;
+  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  title: string;
+  message: string;
+}) => {
+  const [value, setValue] = useState('');
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+  return (
+    <EuiOverlayMask>
+      <EuiModal onClose={onCancel} initialFocus="[name=input]">
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <EuiText>{message}</EuiText>
+          <EuiText>The action cannot be undone.</EuiText>
+          <EuiSpacer />
+          <EuiForm>
+            <EuiFormRow label={'To confirm deletion, enter "delete" in the text field'}>
+              <EuiFieldText
+                name="input"
+                placeholder="delete"
+                value={value}
+                onChange={(e) => onChange(e)}
+                data-test-subj="popoverModal__deleteTextInput"
+              />
+            </EuiFormRow>
+          </EuiForm>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButtonEmpty onClick={onCancel}>Cancel</EuiButtonEmpty>
+          <EuiButton
+            onClick={() => onConfirm()}
+            color="danger"
+            fill
+            disabled={value !== 'delete'}
+            data-test-subj="popoverModal__deleteButton"
+          >
+            Delete
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};
diff --git a/public/components/common/helpers/format_number_with_commas.ts b/public/components/common/helpers/format_number_with_commas.ts
new file mode 100644
index 0000000000..861f62ad12
--- /dev/null
+++ b/public/components/common/helpers/format_number_with_commas.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const COMMA_SEPARATOR_RE = /(\d)(?=(\d{3})+(?!\d))/g;
+
+/**
+ * Converts a number to a string and adds commas
+ * as thousands separators
+ */
+export const formatNumWithCommas = (input: number) =>
+  String(input).replace(COMMA_SEPARATOR_RE, '$1,');
diff --git a/public/components/common/helpers/index.ts b/public/components/common/helpers/index.ts
new file mode 100644
index 0000000000..6aa2e95271
--- /dev/null
+++ b/public/components/common/helpers/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { formatNumWithCommas } from './format_number_with_commas';
+export { PPLReferenceFlyout } from './ppl_reference_flyout';
diff --git a/public/components/common/helpers/ppl_docs/commands/dedup.ts b/public/components/common/helpers/ppl_docs/commands/dedup.ts
new file mode 100644
index 0000000000..2de86921be
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/dedup.ts
@@ -0,0 +1,114 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const dedupCmd = `## dedup
+---
+
+### Description
+
+Using \'dedup\' command to remove identical document defined by field from
+the search result.
+
+### Syntax
+
+dedup \[int\] &lt;field-list&gt; \[keepempty=&lt;bool&gt;\]
+\[consecutive=&lt;bool&gt;\]
+
+-   int: optional. The \'dedup\' command retains multiple events for each
+    combination when you specify &lt;int&gt;. The number for &lt;int&gt;
+    must be greater than 0. If you do not specify a number, only the
+    first occurring event is kept. All other duplicates are removed from
+    the results. **Default:** 1
+-   keepempty: optional. if true, keep the document if the any field in
+    the field-list has NULL value or field is MISSING. **Default:**
+    false.
+-   consecutive: optional. If set to true, removes only events with
+    duplicate combinations of values that are consecutive. **Default:**
+    false.
+-   field-list: mandatory. The comma-delimited field list. At least one
+    field is required.
+
+### Example 1: Dedup by one field
+
+The example show dedup the document with gender field.
+
+PPL query:
+
+    os> source=accounts | dedup gender | fields account_number, gender;
+    fetched rows / total rows = 2/2
+    +------------------+----------+
+    | account_number   | gender   |
+    |------------------+----------|
+    | 1                | M        |
+    | 13               | F        |
+    +------------------+----------+
+
+### Example 2: Keep 2 duplicates documents
+
+The example show dedup the document with gender field keep 2
+duplication.
+
+PPL query:
+
+    os> source=accounts | dedup 2 gender | fields account_number, gender;
+    fetched rows / total rows = 3/3
+    +------------------+----------+
+    | account_number   | gender   |
+    |------------------+----------|
+    | 1                | M        |
+    | 6                | M        |
+    | 13               | F        |
+    +------------------+----------+
+
+### Example 3: Keep or Ignore the empty field by default
+
+The example show dedup the document by keep null value field.
+
+PPL query:
+
+    os> source=accounts | dedup email keepempty=true | fields account_number, email;
+    fetched rows / total rows = 4/4
+    +------------------+-----------------------+
+    | account_number   | email                 |
+    |------------------+-----------------------|
+    | 1                | amberduke@pyrami.com  |
+    | 6                | hattiebond@netagy.com |
+    | 13               | null                  |
+    | 18               | daleadams@boink.com   |
+    +------------------+-----------------------+
+
+The example show dedup the document by ignore the empty value field.
+
+PPL query:
+
+    os> source=accounts | dedup email | fields account_number, email;
+    fetched rows / total rows = 3/3
+    +------------------+-----------------------+
+    | account_number   | email                 |
+    |------------------+-----------------------|
+    | 1                | amberduke@pyrami.com  |
+    | 6                | hattiebond@netagy.com |
+    | 18               | daleadams@boink.com   |
+    +------------------+-----------------------+
+
+#### Example 4: Dedup in consecutive document
+
+The example show dedup the consecutive document.
+
+PPL query:
+
+    os> source=accounts | dedup gender consecutive=true | fields account_number, gender;
+    fetched rows / total rows = 3/3
+    +------------------+----------+
+    | account_number   | gender   |
+    |------------------+----------|
+    | 1                | M        |
+    | 13               | F        |
+    | 18               | M        |
+    +------------------+----------+
+
+#### Limitation
+The \`dedup\` command is not rewritten to OpenSearch DSL, it is only executed on the coordination node.
+`;
\ No newline at end of file
diff --git a/public/components/common/helpers/ppl_docs/commands/eval.ts b/public/components/common/helpers/ppl_docs/commands/eval.ts
new file mode 100644
index 0000000000..52a9429ed1
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/eval.ts
@@ -0,0 +1,79 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const evalCmd = `## eval
+---
+
+### Description
+
+The \'eval\' command evaluate the expression and append the result to the
+search result.
+
+### Syntax
+
+eval &lt;field&gt;=&lt;expression&gt; \[","
+&lt;field&gt;=&lt;expression&gt; \]...
+
+-   field: mandatory. If the field name not exist, a new field is added.
+    If the field name already exists, it will be overrided.
+-   expression: mandatory. Any expression support by the system.
+
+### Example 1: Create the new field
+
+The example show to create new field doubleAge for each document. The
+new doubleAge is the evaluation result of age multiply by 2.
+
+PPL query:
+
+    os> source=accounts | eval doubleAge = age * 2 | fields age, doubleAge ;
+    fetched rows / total rows = 4/4
+    +-------+-------------+
+    | age   | doubleAge   |
+    |-------+-------------|
+    | 32    | 64          |
+    | 36    | 72          |
+    | 28    | 56          |
+    | 33    | 66          |
+    +-------+-------------+
+
+### Example 2: Override the existing field
+
+The example show to override the exist age field with age plus 1.
+
+PPL query:
+
+    os> source=accounts | eval age = age + 1 | fields age ;
+    fetched rows / total rows = 4/4
+    +-------+
+    | age   |
+    |-------|
+    | 33    |
+    | 37    |
+    | 29    |
+    | 34    |
+    +-------+
+
+### Example 3: Create the new field with field defined in eval
+
+The example show to create a new field ddAge with field defined in eval
+command. The new field ddAge is the evaluation result of doubleAge
+multiply by 2, the doubleAge is defined in the eval command.
+
+PPL query:
+
+    os> source=accounts | eval doubleAge = age * 2, ddAge = doubleAge * 2 | fields age, doubleAge, ddAge ;
+    fetched rows / total rows = 4/4
+    +-------+-------------+---------+
+    | age   | doubleAge   | ddAge   |
+    |-------+-------------+---------|
+    | 32    | 64          | 128     |
+    | 36    | 72          | 144     |
+    | 28    | 56          | 112     |
+    | 33    | 66          | 132     |
+    +-------+-------------+---------+
+
+#### Limitation
+The \`eval\` command is not rewritten to OpenSearch DSL, it is only executed on the coordination node.
+`;
\ No newline at end of file
diff --git a/public/components/common/helpers/ppl_docs/commands/fields.ts b/public/components/common/helpers/ppl_docs/commands/fields.ts
new file mode 100644
index 0000000000..61a6954fd6
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/fields.ts
@@ -0,0 +1,55 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const fieldsCmd = `## fields
+---
+### Description
+
+Using \`fields\` command to keep or remove fields from the search result.
+
+### Syntax
+
+fields \[+\|-\] &lt;field-list&gt;
+
+-   index: optional. if the plus (+) is used, only the fields specified
+    in the field list will be keep. if the minus (-) is used, all the
+    fields specified in the field list will be removed. **Default** +
+-   field list: mandatory. comma-delimited keep or remove fields.
+
+### Example 1: Select specified fields from result
+
+The example show fetch account\_number, firstname and lastname fields
+from search results.
+
+PPL query:
+
+    os> source=accounts | fields account_number, firstname, lastname;
+    fetched rows / total rows = 4/4
+    +------------------+-------------+------------+
+    | account_number   | firstname   | lastname   |
+    |------------------+-------------+------------|
+    | 1                | Amber       | Duke       |
+    | 6                | Hattie      | Bond       |
+    | 13               | Nanette     | Bates      |
+    | 18               | Dale        | Adams      |
+    +------------------+-------------+------------+
+
+### Example 2: Remove specified fields from result
+
+The example show fetch remove account\_number field from search results.
+
+PPL query:
+
+    os> source=accounts | fields account_number, firstname, lastname | fields - account_number ;
+    fetched rows / total rows = 4/4
+    +-------------+------------+
+    | firstname   | lastname   |
+    |-------------+------------|
+    | Amber       | Duke       |
+    | Hattie      | Bond       |
+    | Nanette     | Bates      |
+    | Dale        | Adams      |
+    +-------------+------------+
+`;
\ No newline at end of file
diff --git a/public/components/common/helpers/ppl_docs/commands/head.ts b/public/components/common/helpers/ppl_docs/commands/head.ts
new file mode 100644
index 0000000000..78ffe7b947
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/head.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const headCmd = `## head
+---
+
+### Description
+
+The \`head\` command returns the first N number of specified results in
+search order.
+
+### Syntax
+
+head \[N\]
+
+-   N: optional. number of results to return. **Default:** 10
+
+### Example 1: Get first 10 results
+
+The example show first 10 results from accounts index.
+
+PPL query:
+
+    os> source=accounts | fields firstname, age | head;
+    fetched rows / total rows = 10/10
+    +---------------+-----------+
+    | firstname     | age       |
+    |---------------+-----------|
+    | Amber         | 32        |
+    | Hattie        | 36        |
+    | Nanette       | 28        |
+    | Dale          | 33        |
+    | Elinor        | 36        |
+    | Virginia      | 39        |
+    | Dillard       | 34        |
+    | Mcgee         | 39        |
+    | Aurelia       | 37        |
+    | Fulton        | 23        |
+    +---------------+-----------+
+
+### Example 2: Get first N results
+
+The example show first N results from accounts index.
+
+PPL query:
+
+    os> source=accounts | fields firstname, age | head 3;
+    fetched rows / total rows = 3/3
+    +---------------+-----------+
+    | firstname     | age       |
+    |---------------+-----------|
+    | Amber         | 32        |
+    | Hattie        | 36        |
+    | Nanette       | 28        |
+    +---------------+-----------+
+
+#### Limitation
+The \`head\` command is not rewritten to OpenSearch DSL, it is only executed on the coordination node.
+`;
\ No newline at end of file
diff --git a/public/components/common/helpers/ppl_docs/commands/index.ts b/public/components/common/helpers/ppl_docs/commands/index.ts
new file mode 100644
index 0000000000..27328a4c2b
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/index.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { dedupCmd } from './dedup';
+export { evalCmd } from './eval';
+export { fieldsCmd } from './fields';
+export { headCmd } from './head';
+export { parseCmd } from './parse';
+export { rareCmd } from './rare';
+export { renameCmd } from './rename';
+export { searchCmd } from './search';
+export { sortCmd } from './sort';
+export { statsCmd } from './stats';
+export { syntaxCmd } from './syntax';
+export { topCmd } from './top';
+export { whereCmd } from './where';
diff --git a/public/components/common/helpers/ppl_docs/commands/parse.ts b/public/components/common/helpers/ppl_docs/commands/parse.ts
new file mode 100644
index 0000000000..ee752c1ea6
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/parse.ts
@@ -0,0 +1,110 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const parseCmd = `## parse 
+---
+### Description
+
+The \`parse\` command parses a text field using a regular expression and append
+the result to the search result.
+
+### Syntax
+
+parse &lt;field&gt; &lt;regular-expression&gt;
+
+- field: mandatory. The field must be a text field.
+- regular-expression: mandatory. The regular expression used to extract new
+fields from given text field. If a new field name already exists, it will
+replace the original field.
+
+### Regular Expression
+
+The regular expression is used to match the whole text field of each document
+with Java regex engine. Each named capture group in the expression will become
+a new \`STRING\` field.
+
+### Example 1: Create the new field
+
+The example shows how to create new field \`host\` for each document. \`host\`
+will be the host name after \`@\` in \`email\` field. Parsing a null field will
+return an empty string.
+
+PPL query:
+
+    os> source=accounts | parse email '.+@(?<host>.+)' | fields email, host ;
+    fetched rows / total rows = 4/4
+    +-----------------------+------------+
+    | email                 | host       |
+    |-----------------------+------------|
+    | amberduke@pyrami.com  | pyrami.com |
+    | hattiebond@netagy.com | netagy.com |
+    | null                  |            |
+    | daleadams@boink.com   | boink.com  |
+    +-----------------------+------------+
+
+### Example 2: Override the existing field
+
+The example shows how to override the existing \`address\` field with street
+number removed.
+
+PPL query:
+
+    os> source=accounts | parse address '\\d+ (?<address>.+)' | fields address ;
+    fetched rows / total rows = 4/4
+    +------------------+
+    | address          |
+    |------------------|
+    | Holmes Lane      |
+    | Bristol Street   |
+    | Madison Street   |
+    | Hutchinson Court |
+    +------------------+
+
+### Example 3: Filter and sort by casted parsed field
+
+The example shows how to sort street numbers that are higher than 500 in
+\`address\` field.
+
+PPL query:
+
+    os> source=accounts | parse address '(?<streetNumber>\d+) (?<street>.+)' | where cast(streetNumber as int) > 500 | sort num(streetNumber) | fields streetNumber, street ;
+    fetched rows / total rows = 3/3
+    +----------------+----------------+
+    | streetNumber   | street         |
+    |----------------+----------------|
+    | 671            | Bristol Street |
+    | 789            | Madison Street |
+    | 880            | Holmes Lane    |
+    +----------------+----------------+
+
+### Limitation
+
+There are a few limitations with parse command:
+
+- Fields defined by parse cannot be parsed again.
+
+  The following command will not work:
+
+      source=accounts | parse address '\\d+ (?<street>.+)' | parse street '\\w+ (?<road>\\w+)' ;
+
+- Fields defined by parse cannot be overridden with other commands.
+
+  \`where\` will not match any documents since \`street\` cannot be overridden:
+
+      source=accounts | parse address '\\d+ (?<street>.+)' | eval street='1' | where street='1' ;
+
+- The text field used by parse cannot be overridden.
+
+  \`street\` will not be successfully parsed since \`address\` is overridden:
+
+      source=accounts | parse address '\\d+ (?<street>.+)' | eval address='1' ;
+
+- Fields defined by parse cannot be filtered/sorted after using them in
+\`stats\` command.
+
+  \`where\` in the following command will not work:
+
+      source=accounts | parse email '.+@(?<host>.+)' | stats avg(age) by host | where host=pyrami.com ;
+`;
diff --git a/public/components/common/helpers/ppl_docs/commands/rare.ts b/public/components/common/helpers/ppl_docs/commands/rare.ts
new file mode 100644
index 0000000000..37e504f338
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/rare.ts
@@ -0,0 +1,75 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const rareCmd = `## rare
+---
+
+### Description
+
+Using \`rare\` command to find the least common tuple of values of all
+fields in the field list.
+
+**Note**: A maximum of 10 results is returned for each distinct tuple of
+values of the group-by fields.
+
+### Syntax
+
+rare &lt;field-list&gt; \[by-clause\]
+
+-   field-list: mandatory. comma-delimited list of field names.
+-   by-clause: optional. one or more fields to group the results by.
+
+### Example 1: Find the least common values in a field
+
+The example finds least common gender of all the accounts.
+
+PPL query:
+
+    os> source=accounts | rare gender;
+    fetched rows / total rows = 2/2
+    +------------+
+    | gender     |
+    |------------|
+    | F          |
+    |------------|
+    | M          |
+    +------------+
+
+### Example 2: Find the least common values organized by gender
+
+The example finds least common age of all the accounts group by gender.
+
+PPL query:
+
+    os> source=accounts | rare age by gender;
+    fetched rows / total rows = 20/20
+    +----------+----------+
+    | gender   | age      |
+    |----------+----------|
+    | F        | 29       |
+    | F        | 20       |
+    | F        | 23       |
+    | F        | 25       |
+    | F        | 37       |
+    | F        | 38       |
+    | F        | 40       |
+    | F        | 27       |
+    | F        | 36       |
+    | F        | 24       |
+    | M        | 27       |
+    | M        | 24       |
+    | M        | 34       |
+    | M        | 38       |
+    | M        | 28       |
+    | M        | 39       |
+    | M        | 21       |
+    | M        | 30       |
+    | M        | 25       |
+    | M        | 29       |
+    +----------+----------+
+
+#### Limitation
+The \`rare\` command is not rewritten to OpenSearch DSL, it is only executed on the coordination node.
+`;
\ No newline at end of file
diff --git a/public/components/common/helpers/ppl_docs/commands/rename.ts b/public/components/common/helpers/ppl_docs/commands/rename.ts
new file mode 100644
index 0000000000..46238384ba
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/rename.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const renameCmd = `## rename
+---
+### Description
+
+Using \`rename\` command to rename one or more fields in the search
+result.
+
+### Syntax
+
+rename &lt;source-field&gt; AS &lt;target-field&gt;\[","
+&lt;source-field&gt; AS &lt;target-field&gt;\]...
+
+-   source-field: mandatory. The name of the field you want to rename.
+-   field list: mandatory. The name you want to rename to.
+
+### Example 1: Rename one field
+
+The example show rename one field.
+
+PPL query:
+
+    os> source=accounts | rename account_number as an | fields an;
+    fetched rows / total rows = 4/4
+    +------+
+    | an   |
+    |------|
+    | 1    |
+    | 6    |
+    | 13   |
+    | 18   |
+    +------+
+
+### Example 2: Rename multiple fields
+
+The example show rename multiple fields.
+
+PPL query:
+
+    os> source=accounts | rename account_number as an, employer as emp | fields an, emp;
+    fetched rows / total rows = 4/4
+    +------+---------+
+    | an   | emp     |
+    |------+---------|
+    | 1    | Pyrami  |
+    | 6    | Netagy  |
+    | 13   | Quility |
+    | 18   | null    |
+    +------+---------+
+
+#### Limitation
+The \`rename\` command is not rewritten to OpenSearch DSL, it is only executed on the coordination node.
+`;
\ No newline at end of file
diff --git a/public/components/common/helpers/ppl_docs/commands/search.ts b/public/components/common/helpers/ppl_docs/commands/search.ts
new file mode 100644
index 0000000000..b54d5a739d
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/search.ts
@@ -0,0 +1,55 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const searchCmd = `## search 
+---
+
+### Description
+
+Using \`search\` command to retrieve document from the index. \`search\`
+command could be only used as the first command in the PPL query.
+
+### Syntax
+
+search source=&lt;index&gt; \[boolean-expression\]
+
+-   search: search keywords, which could be ignore.
+-   index: mandatory. search command must specify which index to query
+    from.
+-   bool-expression: optional. any expression which could be evaluated
+    to boolean value.
+
+### Example 1: Fetch all the data
+
+The example show fetch all the document from accounts index.
+
+PPL query:
+
+    os> source=accounts;
+    fetched rows / total rows = 4/4
+    +----------------+-----------+----------------------+---------+--------+--------+----------+-------+-----+-----------------------+----------+
+    | account_number | firstname | address              | balance | gender | city   | employer | state | age | email                 | lastname |
+    +----------------+-----------+----------------------+---------+--------+--------+----------+-------+-----+-----------------------+----------+
+    | 1              | Amber     | 880 Holmes Lane      | 39225   | M      | Brogan | Pyrami   | IL    | 32  | amberduke@pyrami.com  | Duke     |
+    | 6              | Hattie    | 671 Bristol Street   | 5686    | M      | Dante  | Netagy   | TN    | 36  | hattiebond@netagy.com | Bond     |
+    | 13             | Nanette   | 789 Madison Street   | 32838   | F      | Nogal  | Quility  | VA    | 28  | null                  | Bates    |
+    | 18             | Dale      | 467 Hutchinson Court | 4180    | M      | Orick  | null     | MD    | 33  | daleadams@boink.com   | Adams    |
+    +----------------+-----------+----------------------+---------+--------+--------+----------+-------+-----+-----------------------+----------+
+
+### Example 2: Fetch data with condition
+
+The example show fetch all the document from accounts index with .
+
+PPL query:
+
+    os> source=accounts account_number=1 or gender="F";
+    fetched rows / total rows = 2/2
+    +------------------+-------------+--------------------+-----------+----------+--------+------------+---------+-------+----------------------+------------+
+    | account_number   | firstname   | address            | balance   | gender   | city   | employer   | state   | age   | email                | lastname   |
+    |------------------+-------------+--------------------+-----------+----------+--------+------------+---------+-------+----------------------+------------|
+    | 1                | Amber       | 880 Holmes Lane    | 39225     | M        | Brogan | Pyrami     | IL      | 32    | amberduke@pyrami.com | Duke       |
+    | 13               | Nanette     | 789 Madison Street | 32838     | F        | Nogal  | Quility    | VA      | 28    | null                 | Bates      |
+    +------------------+-------------+--------------------+-----------+----------+--------+------------+---------+-------+----------------------+------------+
+`;
\ No newline at end of file
diff --git a/public/components/common/helpers/ppl_docs/commands/sort.ts b/public/components/common/helpers/ppl_docs/commands/sort.ts
new file mode 100644
index 0000000000..e4c1f94044
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/sort.ts
@@ -0,0 +1,112 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const sortCmd = `## sort 
+---
+### Description
+
+Using \`sort\` command to sorts all the search result by the specified
+fields.
+
+### Syntax
+
+sort &lt;\[+\|-\] sort-field&gt;...
+
+-   \[+\|-\]: optional. The plus \[+\] stands for ascending order and
+    NULL/MISSING first and a minus \[-\] stands for descending order and
+    NULL/MISSING last. **Default:** ascending order and NULL/MISSING
+    first.
+-   sort-field: mandatory. The field used to sort.
+
+### Example 1: Sort by one field
+
+The example show sort all the document with age field in ascending
+order.
+
+PPL query:
+
+    os> source=accounts | sort age | fields account_number, age;
+    fetched rows / total rows = 4/4
+    +------------------+-------+
+    | account_number   | age   |
+    |------------------+-------|
+    | 13               | 28    |
+    | 1                | 32    |
+    | 18               | 33    |
+    | 6                | 36    |
+    +------------------+-------+
+
+### Example 2: Sort by one field return all the result
+
+The example show sort all the document with age field in ascending
+order.
+
+PPL query:
+
+    os> source=accounts | sort age | fields account_number, age;
+    fetched rows / total rows = 4/4
+    +------------------+-------+
+    | account_number   | age   |
+    |------------------+-------|
+    | 13               | 28    |
+    | 1                | 32    |
+    | 18               | 33    |
+    | 6                | 36    |
+    +------------------+-------+
+
+### Example 3: Sort by one field in descending order
+
+The example show sort all the document with age field in descending
+order.
+
+PPL query:
+
+    os> source=accounts | sort - age | fields account_number, age;
+    fetched rows / total rows = 4/4
+    +------------------+-------+
+    | account_number   | age   |
+    |------------------+-------|
+    | 6                | 36    |
+    | 18               | 33    |
+    | 1                | 32    |
+    | 13               | 28    |
+    +------------------+-------+
+
+### Example 4: Sort by multiple field 
+
+The example show sort all the document with gender field in ascending
+order and age field in descending.
+
+PPL query:
+
+    os> source=accounts | sort + gender, - age | fields account_number, gender, age;
+    fetched rows / total rows = 4/4
+    +------------------+----------+-------+
+    | account_number   | gender   | age   |
+    |------------------+----------+-------|
+    | 13               | F        | 28    |
+    | 6                | M        | 36    |
+    | 18               | M        | 33    |
+    | 1                | M        | 32    |
+    +------------------+----------+-------+
+
+### Example 5: Sort by field include null value
+
+The example show sort employer field by default option (ascending order
+and null first), the result show that null value is in the first row.
+
+PPL query:
+
+    os> source=accounts | sort employer | fields employer;
+    fetched rows / total rows = 4/4
+    +------------+
+    | employer   |
+    |------------|
+    | null       |
+    | Netagy     |
+    | Pyrami     |
+    | Quility    |
+    +------------+
+`;
\ No newline at end of file
diff --git a/public/components/common/helpers/ppl_docs/commands/stats.ts b/public/components/common/helpers/ppl_docs/commands/stats.ts
new file mode 100644
index 0000000000..a3533193ba
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/stats.ts
@@ -0,0 +1,353 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const statsCmd = `## stats
+---
+
+### Description
+
+Using \`stats\` command to calculate the aggregation from search result.
+
+The following table catalogs the aggregation functions and also
+indicates how the NULL/MISSING values is handled:
+
+|          |             |             |
+|----------|-------------|-------------|
+| Function | NULL        | MISSING     |
+| COUNT    | Not counted | Not counted |
+| SUM      | Ignore      | Ignore      |
+| AVG      | Ignore      | Ignore      |
+| MAX      | Ignore      | Ignore      |
+| MIN      | Ignore      | Ignore      |
+
+### Syntax
+
+stats &lt;aggregation&gt;... \[by-clause\]...
+
+-   aggregation: mandatory. A aggregation function. The argument of
+    aggregation must be field.
+-   by-clause: optional. The one or more fields to group the results by.
+    **Default**: If no &lt;by-clause&gt; is specified, the stats command
+    returns only one row, which is the aggregation over the entire
+    result set.
+
+### **Aggregation Functions**
+---
+### **COUNT**
+
+**Description**
+
+Usage: Returns a count of the number of expr in the rows retrieved by a
+SELECT statement.
+
+Example:
+
+    os> source=accounts | stats count();
+    fetched rows / total rows = 1/1
+    +-----------+
+    | count()   |
+    |-----------|
+    | 4         |
+    +-----------+
+
+### **SUM**
+
+**Description**
+
+Usage: SUM(expr). Returns the sum of expr.
+
+Example:
+
+    os> source=accounts | stats sum(age) by gender;
+    fetched rows / total rows = 2/2
+    +------------+----------+
+    | sum(age)   | gender   |
+    |------------+----------|
+    | 28         | F        |
+    | 101        | M        |
+    +------------+----------+
+
+### **AVG**
+
+**Description**
+
+Usage: AVG(expr). Returns the average value of expr.
+
+Example:
+
+    os> source=accounts | stats avg(age) by gender;
+    fetched rows / total rows = 2/2
+    +--------------------+----------+
+    | avg(age)           | gender   |
+    |--------------------+----------|
+    | 28.0               | F        |
+    | 33.666666666666664 | M        |
+    +--------------------+----------+
+
+### **MAX**
+
+**Description**
+
+Usage: MAX(expr). Returns the maximum value of expr.
+
+Example:
+
+    os> source=accounts | stats max(age);
+    fetched rows / total rows = 1/1
+    +------------+
+    | max(age)   |
+    |------------|
+    | 36         |
+    +------------+
+
+### **MIN**
+
+**Description**
+
+Usage: MIN(expr). Returns the minimum value of expr.
+
+Example:
+
+    os> source=accounts | stats min(age);
+    fetched rows / total rows = 1/1
+    +------------+
+    | min(age)   |
+    |------------|
+    | 28         |
+    +------------+
+
+### **VAR\_SAMP**
+
+**Description**
+
+Usage: VAR\_SAMP(expr). Returns the sample variance of expr.
+
+Example:
+
+    os> source=accounts | stats var_samp(age);
+    fetched rows / total rows = 1/1
+    +--------------------+
+    | var_samp(age)      |
+    |--------------------|
+    | 10.916666666666666 |
+    +--------------------+
+
+### **VAR\_POP**
+
+**Description**
+
+Usage: VAR\_POP(expr). Returns the population standard variance of expr.
+
+Example:
+
+    os> source=accounts | stats var_pop(age);
+    fetched rows / total rows = 1/1
+    +----------------+
+    | var_pop(age)   |
+    |----------------|
+    | 8.1875         |
+    +----------------+
+
+### **STDDEV\_SAMP**
+
+**Description**
+
+Usage: STDDEV\_SAMP(expr). Return the sample standard deviation of expr.
+
+Example:
+
+    os> source=accounts | stats stddev_samp(age);
+    fetched rows / total rows = 1/1
+    +--------------------+
+    | stddev_samp(age)   |
+    |--------------------|
+    | 3.304037933599835  |
+    +--------------------+
+
+### **STDDEV\_POP**
+
+**Description**
+
+Usage: STDDEV\_POP(expr). Return the population standard deviation of
+expr.
+
+Example:
+
+    os> source=accounts | stats stddev_pop(age);
+    fetched rows / total rows = 1/1
+    +--------------------+
+    | stddev_pop(age)    |
+    |--------------------|
+    | 2.8613807855648994 |
+    +--------------------+
+
+### **By Clause**
+
+The by clause could be the fields and expressions like scalar functions
+and aggregation functions. Besides, the span clause can also be used in
+the by clause to split specific field into buckets in the same interval,
+the stats then does the aggregation by these span buckets.
+
+The span syntax is \`span(field_expr, interval_expr)\`, the unit of the
+interval expression is the natural unit by default. If the field is a
+date and time type field, and the interval is in date/time units, you
+will need to specify the unit in the interval expression. For example,
+to split the field \`age\` into buckets by 10 years, it looks like
+\`span(age, 10)\`. And here is another example of time span, the span to
+split a \`timestamp\` field into hourly intervals, it looks like
+\`span(timestamp, 1h)\`.
+
+Available time unit:
+
+| Span Interval Units        |
+|----------------------------|
+| millisecond (ms)           |
+| second (s)                 |
+| minute (m, case sensitive) |
+| hour (h)                   |
+| day (d)                    |
+| week (w)                   |
+| month (M, case sensitive)  |
+| quarter (q)                |
+| year (y)                   |
+
+### Example 1: Calculate the count of events
+
+The example show calculate the count of events in the accounts.
+
+PPL query:
+
+    os> source=accounts | stats count();
+    fetched rows / total rows = 1/1
+    +-----------+
+    | count()   |
+    |-----------|
+    | 4         |
+    +-----------+
+
+### Example 2: Calculate the average of a field
+
+The example show calculate the average age of all the accounts.
+
+PPL query:
+
+    os> source=accounts | stats avg(age);
+    fetched rows / total rows = 1/1
+    +------------+
+    | avg(age)   |
+    |------------|
+    | 32.25      |
+    +------------+
+
+### Example 3: Calculate the average of a field by group
+
+The example show calculate the average age of all the accounts group by
+gender.
+
+PPL query:
+
+    os> source=accounts | stats avg(age) by gender;
+    fetched rows / total rows = 2/2
+    +--------------------+----------+
+    | avg(age)           | gender   |
+    |--------------------+----------|
+    | 28.0               | F        |
+    | 33.666666666666664 | M        |
+    +--------------------+----------+
+
+### Example 4: Calculate the average, sum and count of a field by group
+
+The example show calculate the average age, sum age and count of events
+of all the accounts group by gender.
+
+PPL query:
+
+    os> source=accounts | stats avg(age), sum(age), count() by gender;
+    fetched rows / total rows = 2/2
+    +--------------------+------------+-----------+----------+
+    | avg(age)           | sum(age)   | count()   | gender   |
+    |--------------------+------------+-----------+----------|
+    | 28.0               | 28         | 1         | F        |
+    | 33.666666666666664 | 101        | 3         | M        |
+    +--------------------+------------+-----------+----------+
+
+### Example 5: Calculate the maximum of a field
+
+The example calculates the max age of all the accounts.
+
+PPL query:
+
+    os> source=accounts | stats max(age);
+    fetched rows / total rows = 1/1
+    +------------+
+    | max(age)   |
+    |------------|
+    | 36         |
+    +------------+
+
+### Example 6: Calculate the maximum and minimum of a field by group
+
+The example calculates the max and min age values of all the accounts
+group by gender.
+
+PPL query:
+
+    os> source=accounts | stats max(age), min(age) by gender;
+    fetched rows / total rows = 2/2
+    +------------+------------+----------+
+    | max(age)   | min(age)   | gender   |
+    |------------+------------+----------|
+    | 28         | 28         | F        |
+    | 36         | 32         | M        |
+    +------------+------------+----------+
+
+### Example 7: Calculate the distinct count of a field
+
+To get the count of distinct values of a field, you can use
+\`DISTINCT_COUNT\` (or \`DC\`) function instead of \`COUNT\`. The example
+calculates both the count and the distinct count of gender field of all
+the accounts.
+
+PPL query:
+
+    os> source=accounts | stats count(gender), distinct_count(gender);
+    fetched rows / total rows = 1/1
+    +-----------------+--------------------------+
+    | count(gender)   | distinct_count(gender)   |
+    |-----------------+--------------------------|
+    | 4               | 2                        |
+    +-----------------+--------------------------+
+
+### Example 8: Calculate the count by a span
+
+The example gets the count of age by the interval of 10 years.
+
+PPL query:
+
+    os> source=accounts | stats count(age) by span(age, 10) as age_span
+    fetched rows / total rows = 2/2
+    +--------------+------------+
+    | count(age)   | age_span   |
+    |--------------+------------|
+    | 1            | 20         |
+    | 3            | 30         |
+    +--------------+------------+
+
+### Example 9: Calculate the count by a gender and span
+
+The example gets the count of age by the interval of 10 years and group by gender.
+
+PPL query::
+
+    os> source=accounts | stats count() as cnt by span(age, 5) as age_span, gender
+    fetched rows / total rows = 3/3
+    +-------+------------+----------+
+    | cnt   | age_span   | gender   |
+    |-------+------------+----------|
+    | 1     | 25         | F        |
+    | 2     | 30         | M        |
+    | 1     | 35         | M        |
+    +-------+------------+----------+
+`;
\ No newline at end of file
diff --git a/public/components/common/helpers/ppl_docs/commands/syntax.ts b/public/components/common/helpers/ppl_docs/commands/syntax.ts
new file mode 100644
index 0000000000..b579ac5172
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/syntax.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const syntaxCmd = `## Syntax
+---
+### Command Order
+
+The PPL query started with \`search\` command to reference a table search
+from. All the following command could be in any order. In the following
+example, \`search\` command refer the accounts index as the source, then
+using fields and where command to do the further processing.
+
+\`\`\` 
+search source=accounts
+| where age > 18
+| fields firstname, lastname
+\`\`\`
+
+### Required arguments
+
+Required arguments are shown in angle brackets \< \>.
+
+### Optional arguments
+
+Optional arguments are enclosed in square brackets \[ \].`;
\ No newline at end of file
diff --git a/public/components/common/helpers/ppl_docs/commands/top.ts b/public/components/common/helpers/ppl_docs/commands/top.ts
new file mode 100644
index 0000000000..aa7db2958d
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/top.ts
@@ -0,0 +1,68 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const topCmd = `## top
+---
+### Description
+
+Using \`top\` command to find the most common tuple of values of all
+fields in the field list.
+
+### Syntax
+
+top \[N\] &lt;field-list&gt; \[by-clause\]
+
+-   N: number of results to return. **Default**: 10
+-   field-list: mandatory. comma-delimited list of field names.
+-   by-clause: optional. one or more fields to group the results by.
+
+### Example 1: Find the most common values in a field
+
+The example finds most common gender of all the accounts.
+
+PPL query:
+
+    os> source=accounts | top gender;
+    fetched rows / total rows = 2/2
+    +------------+
+    | gender     |
+    |------------|
+    | M          |
+    |------------|
+    | F          |
+    +------------+
+
+### Example 2: Find the most common values in a field
+
+The example finds most common gender of all the accounts.
+
+PPL query:
+
+    os> source=accounts | top 1 gender;
+    fetched rows / total rows = 1/1
+    +------------+
+    | gender     |
+    |------------|
+    | M          |
+    +------------+
+
+### Example 3: Find the most common values organized by gender
+
+The example finds most common age of all the accounts group by gender.
+
+PPL query:
+
+    os> source=accounts | top 1 age by gender;
+    fetched rows / total rows = 2/2
+    +----------+----------+
+    | gender   | age      |
+    |----------+----------|
+    | F        | 39       |
+    | M        | 31       |
+    +----------+----------+
+
+#### Limitation
+The \`top\` command is not rewritten to OpenSearch DSL, it is only executed on the coordination node.
+`;
diff --git a/public/components/common/helpers/ppl_docs/commands/where.ts b/public/components/common/helpers/ppl_docs/commands/where.ts
new file mode 100644
index 0000000000..9adbcb739e
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/commands/where.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const whereCmd = `## where
+---
+
+### Description
+
+The \`where\` command bool-expression to filter the search result. The
+\`where\` command only return the result when bool-expression evaluated to
+true.
+
+### Syntax
+
+where &lt;boolean-expression&gt;
+
+-   bool-expression: optional. any expression which could be evaluated
+    to boolean value.
+
+### Example 1: Filter result set with condition
+
+The example show fetch all the document from accounts index with .
+
+PPL query:
+
+    os> source=accounts | where account_number=1 or gender="F" | fields account_number, gender;
+    fetched rows / total rows = 2/2
+    +------------------+----------+
+    | account_number   | gender   |
+    |------------------+----------|
+    | 1                | M        |
+    | 13               | F        |
+    +------------------+----------+
+`;
diff --git a/public/components/common/helpers/ppl_docs/functions/condition.ts b/public/components/common/helpers/ppl_docs/functions/condition.ts
new file mode 100644
index 0000000000..85e3ed0747
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/functions/condition.ts
@@ -0,0 +1,176 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const conditionFunction = `## Condition
+---
+
+### Description
+
+Usage: isnull(field) return true if field is null.
+
+Argument type: all the supported data type.
+
+Return type: BOOLEAN
+
+Example:
+
+    os> source=accounts | eval result = isnull(employer) | fields result, employer, firstname
+    fetched rows / total rows = 4/4
+    +----------+------------+-------------+
+    | result   | employer   | firstname   |
+    |----------+------------+-------------|
+    | False    | Pyrami     | Amber       |
+    | False    | Netagy     | Hattie      |
+    | False    | Quility    | Nanette     |
+    | True     | null       | Dale        |
+    +----------+------------+-------------+
+
+### **ISNOTNULL**
+
+**Description**
+
+Usage: isnotnull(field) return true if field is not null.
+
+Argument type: all the supported data type.
+
+Return type: BOOLEAN
+
+Example:
+
+    os> source=accounts | where not isnotnull(employer) | fields account_number, employer
+    fetched rows / total rows = 1/1
+    +------------------+------------+
+    | account_number   | employer   |
+    |------------------+------------|
+    | 18               | null       |
+    +------------------+------------+
+
+### **EXISTS**
+
+[Because OpenSearch doesn't differentiate null and
+missing](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-exists-query.html).
+so we can't provide function like ismissing/isnotmissing to test field
+exist or not. But you can still use isnull/isnotnull for such purpose.
+
+Example, the account 13 doesn't have email field:
+
+    os> source=accounts | where isnull(email) | fields account_number, email
+    fetched rows / total rows = 1/1
+    +------------------+---------+
+    | account_number   | email   |
+    |------------------+---------|
+    | 13               | null    |
+    +------------------+---------+
+
+### **IFNULL**
+
+**Description**
+
+Usage: ifnull(field1, field2) return field2 if field1 is null.
+
+Argument type: all the supported data type, (NOTE : if two parameters
+has different type, you will fail semantic check.)
+
+Return type: any
+
+Example:
+
+    os> source=accounts | eval result = ifnull(employer, 'default') | fields result, employer, firstname
+    fetched rows / total rows = 4/4
+    +----------+------------+-------------+
+    | result   | employer   | firstname   |
+    |----------+------------+-------------|
+    | Pyrami   | Pyrami     | Amber       |
+    | Netagy   | Netagy     | Hattie      |
+    | Quility  | Quility    | Nanette     |
+    | default  | null       | Dale        |
+    +----------+------------+-------------+
+
+### **NULLIF**
+
+**Description**
+
+Usage: nullif(field1, field2) return null if two parameters are same,
+otherwiser return field1.
+
+Argument type: all the supported data type, (NOTE : if two parameters
+has different type, if two parameters has different type, you will fail
+semantic check)
+
+Return type: any
+
+Example:
+
+    os> source=accounts | eval result = nullif(employer, 'Pyrami') | fields result, employer, firstname
+    fetched rows / total rows = 4/4
+    +----------+------------+-------------+
+    | result   | employer   | firstname   |
+    |----------+------------+-------------|
+    | null     | Pyrami     | Amber       |
+    | Netagy   | Netagy     | Hattie      |
+    | Quility  | Quility    | Nanette     |
+    | null     | null       | Dale        |
+    +----------+------------+-------------+
+
+### **ISNULL**
+
+**Description**
+
+Usage: isnull(field1, field2) return null if two parameters are same,
+otherwise return field1.
+
+Argument type: all the supported data type
+
+Return type: any
+
+Example:
+
+    os> source=accounts | eval result = isnull(employer) | fields result, employer, firstname
+    fetched rows / total rows = 4/4
+    +----------+------------+-------------+
+    | result   | employer   | firstname   |
+    |----------+------------+-------------|
+    | False    | Pyrami     | Amber       |
+    | False    | Netagy     | Hattie      |
+    | False    | Quility    | Nanette     |
+    | True     | null       | Dale        |
+    +----------+------------+-------------+
+
+### **IF**
+
+**Description**
+
+Usage: if(condition, expr1, expr2) return expr1 if condition is true,
+otherwiser return expr2.
+
+Argument type: all the supported data type, (NOTE : if expr1 and expr2
+are different type, you will fail semantic check
+
+Return type: any
+
+Example:
+
+    os> source=accounts | eval result = if(true, firstname, lastname) | fields result, firstname, lastname
+    fetched rows / total rows = 4/4
+    +----------+-------------+------------+
+    | result   | firstname   | lastname   |
+    |----------+-------------+------------|
+    | Amber    | Amber       | Duke       |
+    | Hattie   | Hattie      | Bond       |
+    | Nanette  | Nanette     | Bates      |
+    | Dale     | Dale        | Adams      |
+    +----------+-------------+------------+
+
+    os> source=accounts | eval result = if(false, firstname, lastname) | fields result, firstname, lastname
+    fetched rows / total rows = 4/4
+    +----------+-------------+------------+
+    | result   | firstname   | lastname   |
+    |----------+-------------+------------|
+    | Duke     | Amber       | Duke       |
+    | Bond     | Hattie      | Bond       |
+    | Bates    | Nanette     | Bates      |
+    | Adams    | Dale        | Adams      |
+    +----------+-------------+------------+
+`;
diff --git a/public/components/common/helpers/ppl_docs/functions/datetime.ts b/public/components/common/helpers/ppl_docs/functions/datetime.ts
new file mode 100644
index 0000000000..a593b1c560
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/functions/datetime.ts
@@ -0,0 +1,640 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const datetimeFunction = `## Datetime
+---
+
+### **ADDDATE**
+
+Description
+
+Usage: adddate(date, INTERVAL expr unit)/ adddate(date, expr) adds the
+time interval of second argument to date; adddate(date, days) adds the
+second argument as integer number of days to date.
+
+Argument type: DATE/DATETIME/TIMESTAMP/STRING, INTERVAL/LONG
+
+Return type map:
+
+(DATE/DATETIME/TIMESTAMP/STRING, INTERVAL) -&gt; DATETIME
+
+(DATE, LONG) -&gt; DATE
+
+(DATETIME/TIMESTAMP/STRING, LONG) -&gt; DATETIME
+
+Synonyms: [DATE\_ADD](#date_add)
+
+Example:
+
+    os> source=people | eval \`ADDDATE(DATE('2020-08-26'), INTERVAL 1 HOUR)\` = ADDDATE(DATE('2020-08-26'), INTERVAL 1 HOUR), \`ADDDATE(DATE('2020-08-26'), 1)\` = ADDDATE(DATE('2020-08-26'), 1), \`ADDDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)\` = ADDDATE(TIMESTAMP('2020-08-26 01:01:01'), 1) | fields \`ADDDATE(DATE('2020-08-26'), INTERVAL 1 HOUR)\`, \`ADDDATE(DATE('2020-08-26'), 1)\`, \`ADDDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)\`
+    fetched rows / total rows = 1/1
+    +------------------------------------------------+----------------------------------+------------------------------------------------+
+    | ADDDATE(DATE('2020-08-26'), INTERVAL 1 HOUR)   | ADDDATE(DATE('2020-08-26'), 1)   | ADDDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)   |
+    |------------------------------------------------+----------------------------------+------------------------------------------------|
+    | 2020-08-26 01:00:00                            | 2020-08-27                       | 2020-08-27 01:01:01                            |
+    +------------------------------------------------+----------------------------------+------------------------------------------------+
+
+### **DATE**
+
+**Description**
+
+Usage: date(expr) constructs a date type with the input string expr as a
+date. If the argument is of date/datetime/timestamp, it extracts the
+date value part from the expression.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: DATE
+
+Example:
+
+    >od source=people | eval \`DATE('2020-08-26')\` = DATE('2020-08-26'), \`DATE(TIMESTAMP('2020-08-26 13:49:00'))\` = DATE(TIMESTAMP('2020-08-26 13:49:00')) | fields \`DATE('2020-08-26')\`, \`DATE(TIMESTAMP('2020-08-26 13:49:00'))\`
+    fetched rows / total rows = 1/1
+    +----------------------+------------------------------------------+
+    | DATE('2020-08-26')   | DATE(TIMESTAMP('2020-08-26 13:49:00'))   |
+    |----------------------+------------------------------------------|
+    | DATE '2020-08-26'    | DATE '2020-08-26'                        |
+    +----------------------+------------------------------------------+
+
+### **DATE\_ADD**
+
+**Description**
+
+Usage: date\_add(date, INTERVAL expr unit)/ date\_add(date, expr) adds
+the time interval expr to date
+
+Argument type: DATE/DATETIME/TIMESTAMP/STRING, INTERVAL/LONG
+
+Return type map:
+
+DATE/DATETIME/TIMESTAMP/STRING, INTERVAL -&gt; DATETIME
+
+DATE, LONG -&gt; DATE
+
+DATETIME/TIMESTAMP/STRING, LONG -&gt; DATETIME
+
+Synonyms: [ADDDATE](#adddate)
+
+Example:
+
+    os> source=people | eval \`DATE_ADD(DATE('2020-08-26'), INTERVAL 1 HOUR)\` = DATE_ADD(DATE('2020-08-26'), INTERVAL 1 HOUR), \`DATE_ADD(DATE('2020-08-26'), 1)\` = DATE_ADD(DATE('2020-08-26'), 1), \`DATE_ADD(TIMESTAMP('2020-08-26 01:01:01'), 1)\` = DATE_ADD(TIMESTAMP('2020-08-26 01:01:01'), 1) | fields \`DATE_ADD(DATE('2020-08-26'), INTERVAL 1 HOUR)\`, \`DATE_ADD(DATE('2020-08-26'), 1)\`, \`DATE_ADD(TIMESTAMP('2020-08-26 01:01:01'), 1)\`
+    fetched rows / total rows = 1/1
+    +-------------------------------------------------+-----------------------------------+-------------------------------------------------+
+    | DATE_ADD(DATE('2020-08-26'), INTERVAL 1 HOUR)   | DATE_ADD(DATE('2020-08-26'), 1)   | DATE_ADD(TIMESTAMP('2020-08-26 01:01:01'), 1)   |
+    |-------------------------------------------------+-----------------------------------+-------------------------------------------------|
+    | 2020-08-26 01:00:00                             | 2020-08-27                        | 2020-08-27 01:01:01                             |
+    +-------------------------------------------------+-----------------------------------+-------------------------------------------------+
+
+### **DATE\_FORMAT**
+
+**Description**
+
+Usage: date\_format(date, format) formats the date argument using the
+specifiers in the format argument.
+
+| Specifier | Description                                                                                      |
+|-----------|--------------------------------------------------------------------------------------------------|
+| %a        | Abbreviated weekday name (Sun..Sat)                                                              |
+| %b        | Abbreviated month name (Jan..Dec)                                                                |
+| %c        | Month, numeric (0..12)                                                                           |
+| %D        | Day of the month with English suffix (0th, 1st, 2nd, 3rd, …)                                     |
+| %d        | Day of the month, numeric (00..31)                                                               |
+| %e        | Day of the month, numeric (0..31)                                                                |
+| %f        | Microseconds (000000..999999)                                                                    |
+| %H        | Hour (00..23)                                                                                    |
+| %h        | Hour (01..12)                                                                                    |
+| %I        | Hour (01..12)                                                                                    |
+| %i        | Minutes, numeric (00..59)                                                                        |
+| %j        | Day of year (001..366)                                                                           |
+| %k        | Hour (0..23)                                                                                     |
+| %l        | Hour (1..12)                                                                                     |
+| %M        | Month name (January..December)                                                                   |
+| %m        | Month, numeric (00..12)                                                                          |
+| %p        | AM or PM                                                                                         |
+| %r        | Time, 12-hour (hh:mm&#58;ss followed by AM or PM)                                                    |
+| %S        | Seconds (00..59)                                                                                 |
+| %s        | Seconds (00..59)                                                                                 |
+| %T        | Time, 24-hour (hh:mm:ss)                                                                         |
+| %U        | Week (00..53), where Sunday is the first day of the week; WEEK() mode 0                          |
+| %u        | Week (00..53), where Monday is the first day of the week; WEEK() mode 1                          |
+| %V        | Week (01..53), where Sunday is the first day of the week; WEEK() mode 2; used with %X            |
+| %v        | Week (01..53), where Monday is the first day of the week; WEEK() mode 3; used with %x            |
+| %W        | Weekday name (Sunday..Saturday)                                                                  |
+| %w        | Day of the week (0=Sunday..6&#61;Saturday)                                                           |
+| %X        | Year for the week where Sunday is the first day of the week, numeric, four digits; used with %V  |
+| %x        | Year for the week, where Monday is the first day of the week, numeric, four digits; used with %v |
+| %Y        | Year, numeric, four digits                                                                       |
+| %y        | Year, numeric (two digits)                                                                       |
+| %%        | A literal % character                                                                            |
+| %x        | x, for any “x” not listed above                                                                  |
+
+The following table describes the available specifier arguments.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP, STRING
+
+Return type: STRING
+
+Example:
+
+    >od source=people | eval \`DATE_FORMAT('1998-01-31 13:14:15.012345', '%T.%f')\` = DATE_FORMAT('1998-01-31 13:14:15.012345', '%T.%f'), \`DATE_FORMAT(TIMESTAMP('1998-01-31 13:14:15.012345'), '%Y-%b-%D %r')\` = DATE_FORMAT(TIMESTAMP('1998-01-31 13:14:15.012345'), '%Y-%b-%D %r') | fields \`DATE_FORMAT('1998-01-31 13:14:15.012345', '%T.%f')\`, \`DATE_FORMAT(TIMESTAMP('1998-01-31 13:14:15.012345'), '%Y-%b-%D %r')\`
+    fetched rows / total rows = 1/1
+    +-----------------------------------------------+----------------------------------------------------------------+
+    | DATE('1998-01-31 13:14:15.012345', '%T.%f')   | DATE(TIMESTAMP('1998-01-31 13:14:15.012345'), '%Y-%b-%D %r')   |
+    |-----------------------------------------------+----------------------------------------------------------------|
+    | '13:14:15.012345'                             | '1998-Jan-31st 01:14:15 PM'                                    |
+    +-----------------------------------------------+----------------------------------------------------------------+
+
+### **DATE\_SUB**
+
+**Description**
+
+Usage: date\_sub(date, INTERVAL expr unit)/ date\_sub(date, expr)
+subtracts the time interval expr from date
+
+Argument type: DATE/DATETIME/TIMESTAMP/STRING, INTERVAL/LONG
+
+Return type map:
+
+DATE/DATETIME/TIMESTAMP/STRING, INTERVAL -&gt; DATETIME
+
+DATE, LONG -&gt; DATE
+
+DATETIME/TIMESTAMP/STRING, LONG -&gt; DATETIME
+
+Synonyms: [SUBDATE](#subdate)
+
+Example:
+
+    os> source=people | eval \`DATE_SUB(DATE('2008-01-02'), INTERVAL 31 DAY)\` = DATE_SUB(DATE('2008-01-02'), INTERVAL 31 DAY), \`DATE_SUB(DATE('2020-08-26'), 1)\` = DATE_SUB(DATE('2020-08-26'), 1), \`DATE_SUB(TIMESTAMP('2020-08-26 01:01:01'), 1)\` = DATE_SUB(TIMESTAMP('2020-08-26 01:01:01'), 1) | fields \`DATE_SUB(DATE('2008-01-02'), INTERVAL 31 DAY)\`, \`DATE_SUB(DATE('2020-08-26'), 1)\`, \`DATE_SUB(TIMESTAMP('2020-08-26 01:01:01'), 1)\`
+    fetched rows / total rows = 1/1
+    +-------------------------------------------------+-----------------------------------+-------------------------------------------------+
+    | DATE_SUB(DATE('2008-01-02'), INTERVAL 31 DAY)   | DATE_SUB(DATE('2020-08-26'), 1)   | DATE_SUB(TIMESTAMP('2020-08-26 01:01:01'), 1)   |
+    |-------------------------------------------------+-----------------------------------+-------------------------------------------------|
+    | 2007-12-02                                      | 2020-08-25                        | 2020-08-25 01:01:01                             |
+    +-------------------------------------------------+-----------------------------------+-------------------------------------------------+
+
+### **DAY**
+
+**Description**
+
+Usage: day(date) extracts the day of the month for date, in the range 1
+to 31. The dates with value 0 such as '0000-00-00' or '2008-00-00' are
+invalid.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: INTEGER
+
+Synonyms: DAYOFMONTH
+
+Example:
+
+    os> source=people | eval \`DAY(DATE('2020-08-26'))\` = DAY(DATE('2020-08-26')) | fields \`DAY(DATE('2020-08-26'))\`
+    fetched rows / total rows = 1/1
+    +---------------------------+
+    | DAY(DATE('2020-08-26'))   |
+    |---------------------------|
+    | 26                        |
+    +---------------------------+
+
+### **DAYNAME**
+
+**Description**
+
+Usage: dayname(date) returns the name of the weekday for date, including
+Monday, Tuesday, Wednesday, Thursday, Friday, Saturday and Sunday.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: STRING
+
+Example:
+
+    os> source=people | eval \`DAYNAME(DATE('2020-08-26'))\` = DAYNAME(DATE('2020-08-26')) | fields \`DAYNAME(DATE('2020-08-26'))\`
+    fetched rows / total rows = 1/1
+    +-------------------------------+
+    | DAYNAME(DATE('2020-08-26'))   |
+    |-------------------------------|
+    | Wednesday                     |
+    +-------------------------------+
+
+### **DAYOFMONTH**
+
+**Description**
+
+Usage: dayofmonth(date) extracts the day of the month for date, in the
+range 1 to 31. The dates with value 0 such as '0000-00-00' or
+'2008-00-00' are invalid.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: INTEGER
+
+Synonyms: DAY
+
+Example:
+
+    os> source=people | eval \`DAYOFMONTH(DATE('2020-08-26'))\` = DAYOFMONTH(DATE('2020-08-26')) | fields \`DAYOFMONTH(DATE('2020-08-26'))\`
+    fetched rows / total rows = 1/1
+    +----------------------------------+
+    | DAYOFMONTH(DATE('2020-08-26'))   |
+    |----------------------------------|
+    | 26                               |
+    +----------------------------------+
+
+### **DAYOFWEEK**
+
+**Description**
+
+Usage: dayofweek(date) returns the weekday index for date (1 = Sunday, 2
+= Monday, …, 7 = Saturday).
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`DAYOFWEEK(DATE('2020-08-26'))\` = DAYOFWEEK(DATE('2020-08-26')) | fields \`DAYOFWEEK(DATE('2020-08-26'))\`
+    fetched rows / total rows = 1/1
+    +---------------------------------+
+    | DAYOFWEEK(DATE('2020-08-26'))   |
+    |---------------------------------|
+    | 4                               |
+    +---------------------------------+
+
+### **DAYOFYEAR**
+
+**Description**
+
+Usage: dayofyear(date) returns the day of the year for date, in the
+range 1 to 366.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`DAYOFYEAR(DATE('2020-08-26'))\` = DAYOFYEAR(DATE('2020-08-26')) | fields \`DAYOFYEAR(DATE('2020-08-26'))\`
+    fetched rows / total rows = 1/1
+    +---------------------------------+
+    | DAYOFYEAR(DATE('2020-08-26'))   |
+    |---------------------------------|
+    | 239                             |
+    +---------------------------------+
+
+### **FROM\_DAYS**
+
+**Description**
+
+Usage: from\_days(N) returns the date value given the day number N.
+
+Argument type: INTEGER/LONG
+
+Return type: DATE
+
+Example:
+
+    os> source=people | eval \`FROM_DAYS(733687)\` = FROM_DAYS(733687) | fields \`FROM_DAYS(733687)\`
+    fetched rows / total rows = 1/1
+    +---------------------+
+    | FROM_DAYS(733687)   |
+    |---------------------|
+    | 2008-10-07          |
+    +---------------------+
+
+### **HOUR**
+
+**Description**
+
+Usage: hour(time) extracts the hour value for time. Different from the
+time of day value, the time value has a large range and can be greater
+than 23, so the return value of hour(time) can be also greater than 23.
+
+Argument type: STRING/TIME/DATETIME/TIMESTAMP
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`HOUR(TIME('01:02:03'))\` = HOUR(TIME('01:02:03')) | fields \`HOUR(TIME('01:02:03'))\`
+    fetched rows / total rows = 1/1
+    +--------------------------+
+    | HOUR(TIME('01:02:03'))   |
+    |--------------------------|
+    | 1                        |
+    +--------------------------+
+
+### **MAKETIME**
+
+**Description**
+
+Specifications:
+
+1.  MAKETIME(INTEGER, INTEGER, INTEGER) -&gt; DATE
+
+### **MICROSECOND**
+
+**Description**
+
+Usage: microsecond(expr) returns the microseconds from the time or
+datetime expression expr as a number in the range from 0 to 999999.
+
+Argument type: STRING/TIME/DATETIME/TIMESTAMP
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`MICROSECOND(TIME('01:02:03.123456'))\` = MICROSECOND(TIME('01:02:03.123456')) | fields \`MICROSECOND(TIME('01:02:03.123456'))\`
+    fetched rows / total rows = 1/1
+    +----------------------------------------+
+    | MICROSECOND(TIME('01:02:03.123456'))   |
+    |----------------------------------------|
+    | 123456                                 |
+    +----------------------------------------+
+
+### **MINUTE**
+
+**Description**
+
+Usage: minute(time) returns the minute for time, in the range 0 to 59.
+
+Argument type: STRING/TIME/DATETIME/TIMESTAMP
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`MINUTE(TIME('01:02:03'))\` =  MINUTE(TIME('01:02:03')) | fields \`MINUTE(TIME('01:02:03'))\`
+    fetched rows / total rows = 1/1
+    +----------------------------+
+    | MINUTE(TIME('01:02:03'))   |
+    |----------------------------|
+    | 2                          |
+    +----------------------------+
+
+### **MONTH**
+
+**Description**
+
+Usage: month(date) returns the month for date, in the range 1 to 12 for
+January to December. The dates with value 0 such as '0000-00-00' or
+'2008-00-00' are invalid.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`MONTH(DATE('2020-08-26'))\` =  MONTH(DATE('2020-08-26')) | fields \`MONTH(DATE('2020-08-26'))\`
+    fetched rows / total rows = 1/1
+    +-----------------------------+
+    | MONTH(DATE('2020-08-26'))   |
+    |-----------------------------|
+    | 8                           |
+    +-----------------------------+
+
+### **MONTHNAME**
+
+**Description**
+
+Usage: monthname(date) returns the full name of the month for date.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: STRING
+
+Example:
+
+    os> source=people | eval \`MONTHNAME(DATE('2020-08-26'))\` = MONTHNAME(DATE('2020-08-26')) | fields \`MONTHNAME(DATE('2020-08-26'))\`
+    fetched rows / total rows = 1/1
+    +---------------------------------+
+    | MONTHNAME(DATE('2020-08-26'))   |
+    |---------------------------------|
+    | August                          |
+    +---------------------------------+
+
+### **NOW**
+
+**Description**
+
+Specifications:
+
+1.  NOW() -&gt; DATE
+
+### **QUARTER**
+
+**Description**
+
+Usage: quarter(date) returns the quarter of the year for date, in the
+range 1 to 4.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`QUARTER(DATE('2020-08-26'))\` = QUARTER(DATE('2020-08-26')) | fields \`QUARTER(DATE('2020-08-26'))\`
+    fetched rows / total rows = 1/1
+    +-------------------------------+
+    | QUARTER(DATE('2020-08-26'))   |
+    |-------------------------------|
+    | 3                             |
+    +-------------------------------+
+
+### **SECOND**
+
+**Description**
+
+Usage: second(time) returns the second for time, in the range 0 to 59.
+
+Argument type: STRING/TIME/DATETIME/TIMESTAMP
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`SECOND(TIME('01:02:03'))\` = SECOND(TIME('01:02:03')) | fields \`SECOND(TIME('01:02:03'))\`
+    fetched rows / total rows = 1/1
+    +----------------------------+
+    | SECOND(TIME('01:02:03'))   |
+    |----------------------------|
+    | 3                          |
+    +----------------------------+
+
+### **SUBDATE**
+
+**Description**
+
+Usage: subdate(date, INTERVAL expr unit)/ subdate(date, expr) subtracts
+the time interval expr from date
+
+Argument type: DATE/DATETIME/TIMESTAMP/STRING, INTERVAL/LONG
+
+Return type map:
+
+DATE/DATETIME/TIMESTAMP/STRING, INTERVAL -&gt; DATETIME
+
+DATE, LONG -&gt; DATE
+
+DATETIME/TIMESTAMP/STRING, LONG -&gt; DATETIME
+
+Synonyms: [DATE\_SUB](#date_sub)
+
+Example:
+
+    os> source=people | eval \`SUBDATE(DATE('2008-01-02'), INTERVAL 31 DAY)\` = SUBDATE(DATE('2008-01-02'), INTERVAL 31 DAY), \`SUBDATE(DATE('2020-08-26'), 1)\` = SUBDATE(DATE('2020-08-26'), 1), \`SUBDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)\` = SUBDATE(TIMESTAMP('2020-08-26 01:01:01'), 1) | fields \`SUBDATE(DATE('2008-01-02'), INTERVAL 31 DAY)\`, \`SUBDATE(DATE('2020-08-26'), 1)\`, \`SUBDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)\`
+    fetched rows / total rows = 1/1
+    +------------------------------------------------+----------------------------------+------------------------------------------------+
+    | SUBDATE(DATE('2008-01-02'), INTERVAL 31 DAY)   | SUBDATE(DATE('2020-08-26'), 1)   | SUBDATE(TIMESTAMP('2020-08-26 01:01:01'), 1)   |
+    |------------------------------------------------+----------------------------------+------------------------------------------------|
+    | 2007-12-02                                     | 2020-08-25                       | 2020-08-25 01:01:01                            |
+    +------------------------------------------------+----------------------------------+------------------------------------------------+
+
+### **TIME**
+
+**Description**
+
+Usage: time(expr) constructs a time type with the input string expr as a
+time. If the argument is of date/datetime/time/timestamp, it extracts
+the time value part from the expression.
+
+Argument type: STRING/DATE/DATETIME/TIME/TIMESTAMP
+
+Return type: TIME
+
+Example:
+
+    >od source=people | eval \`TIME('13:49:00')\` = TIME('13:49:00'), \`TIME(TIMESTAMP('2020-08-26 13:49:00'))\` = TIME(TIMESTAMP('2020-08-26 13:49:00')) | fields \`TIME('13:49:00')\`, \`TIME(TIMESTAMP('2020-08-26 13:49:00'))\`
+    fetched rows / total rows = 1/1
+    +--------------------+------------------------------------------+
+    | TIME('13:49:00')   | TIME(TIMESTAMP('2020-08-26 13:49:00'))   |
+    |--------------------+------------------------------------------|
+    | TIME '13:49:00'    | TIME '13:49:00'                          |
+    +--------------------+------------------------------------------+
+
+### **TIME\_TO\_SEC**
+
+**Description**
+
+Usage: time\_to\_sec(time) returns the time argument, converted to
+seconds.
+
+Argument type: STRING/TIME/DATETIME/TIMESTAMP
+
+Return type: LONG
+
+Example:
+
+    os> source=people | eval \`TIME_TO_SEC(TIME('22:23:00'))\` = TIME_TO_SEC(TIME('22:23:00')) | fields \`TIME_TO_SEC(TIME('22:23:00'))\`
+    fetched rows / total rows = 1/1
+    +---------------------------------+
+    | TIME_TO_SEC(TIME('22:23:00'))   |
+    |---------------------------------|
+    | 80580                           |
+    +---------------------------------+
+
+### **TIMESTAMP**
+
+**Description**
+
+Usage: timestamp(expr) construct a timestamp type with the input string
+expr as an timestamp. If the argument is of date/datetime/timestamp
+type, cast expr to timestamp type with default timezone UTC.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: TIMESTAMP
+
+Example:
+
+    >od source=people | eval \`TIMESTAMP('2020-08-26 13:49:00')\` = TIMESTAMP('2020-08-26 13:49:00') | fields \`TIMESTAMP('2020-08-26 13:49:00')\`
+    fetched rows / total rows = 1/1
+    +------------------------------------+
+    | TIMESTAMP('2020-08-26 13:49:00')   |
+    |------------------------------------|
+    | TIMESTAMP '2020-08-26 13:49:00     |
+    +------------------------------------+
+
+### **TO\_DAYS**
+
+**Description**
+
+Usage: to\_days(date) returns the day number (the number of days since
+year 0) of the given date. Returns NULL if date is invalid.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: LONG
+
+Example:
+
+    os> source=people | eval \`TO_DAYS(DATE('2008-10-07'))\` = TO_DAYS(DATE('2008-10-07')) | fields \`TO_DAYS(DATE('2008-10-07'))\`
+    fetched rows / total rows = 1/1
+    +-------------------------------+
+    | TO_DAYS(DATE('2008-10-07'))   |
+    |-------------------------------|
+    | 733687                        |
+    +-------------------------------+
+
+### **WEEK**
+
+**Description**
+
+Usage: week(date\[, mode\]) returns the week number for date. If the
+mode argument is omitted, the default mode 0 is used.
+
+| Mode | First day of week | Range | Week 1 is the first week …    |
+|------|-------------------|-------|-------------------------------|
+| 0    | Sunday            | 0-53  | with a Sunday in this year    |
+| 1    | Monday            | 0-53  | with 4 or more days this year |
+| 2    | Sunday            | 1-53  | with a Sunday in this year    |
+| 3    | Monday            | 1-53  | with 4 or more days this year |
+| 4    | Sunday            | 0-53  | with 4 or more days this year |
+| 5    | Monday            | 0-53  | with a Monday in this year    |
+| 6    | Sunday            | 1-53  | with 4 or more days this year |
+| 7    | Monday            | 1-53  | with a Monday in this year    |
+
+The following table describes how the mode argument works.
+
+Argument type: DATE/DATETIME/TIMESTAMP/STRING
+
+Return type: INTEGER
+
+Example:
+
+    >od source=people | eval \`WEEK(DATE('2008-02-20'))\` = WEEK(DATE('2008-02-20')), \`WEEK(DATE('2008-02-20'), 1)\` = WEEK(DATE('2008-02-20'), 1) | fields \`WEEK(DATE('2008-02-20'))\`, \`WEEK(DATE('2008-02-20'), 1)\`
+    fetched rows / total rows = 1/1
+    +----------------------------+-------------------------------+
+    | WEEK(DATE('2008-02-20'))   | WEEK(DATE('2008-02-20'), 1)   |
+    |----------------------------|-------------------------------|
+    | 7                          | 8                             |
+    +----------------------------+-------------------------------+
+
+### **YEAR**
+
+**Description**
+
+Usage: year(date) returns the year for date, in the range 1000 to 9999,
+or 0 for the “zero” date.
+
+Argument type: STRING/DATE/DATETIME/TIMESTAMP
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`YEAR(DATE('2020-08-26'))\` = YEAR(DATE('2020-08-26')) | fields \`YEAR(DATE('2020-08-26'))\`
+    fetched rows / total rows = 1/1
+    +----------------------------+
+    | YEAR(DATE('2020-08-26'))   |
+    |----------------------------|
+    | 2020                       |
+    +----------------------------+
+`;
diff --git a/public/components/common/helpers/ppl_docs/functions/full_text_search.ts b/public/components/common/helpers/ppl_docs/functions/full_text_search.ts
new file mode 100644
index 0000000000..4704df6ade
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/functions/full_text_search.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const fullTextSearchFunction = `## Full Text Search
+---
+
+The full text search based functions enable users to search the index for
+documents by the full text search of the input query. The functions are built
+on the top of the search queries of the OpenSearch engine, but in memory
+execution within the plugin is not supported. These functions are able
+to perform the global filter of a query, for example the condition
+expression in a \`WHERE\` clause or in a \`HAVING\` clause. For more details
+of the full text search based search, check out the design here: [Relevance
+Based Search With SQL/PPL Query
+Engine](https://github.com/opensearch-project/sql/issues/182)
+
+### MATCH
+
+**Description**
+
+\`match(field_expression, query_expression[, option=<option_value>]*)\`
+
+The match function maps to the match query used in search engine, to
+return the documents that match a provided text, number, date or boolean
+value with a given field. Available parameters include:
+
+-   analyzer
+-   auto\_generate\_synonyms\_phrase
+-   fuzziness
+-   max\_expansions
+-   prefix\_length
+-   fuzzy\_transpositions
+-   fuzzy\_rewrite
+-   lenient
+-   operator
+-   minimum\_should\_match
+-   zero\_terms\_query
+-   boost
+
+Example with only \`field\` and \`query\` expressions, and all other
+parameters are set default values:
+
+    os> source=accounts | where match(address, 'Street') | fields lastname, address;
+    fetched rows / total rows = 2/2
+    +------------+--------------------+
+    | lastname   | address            |
+    |------------+--------------------|
+    | Bond       | 671 Bristol Street |
+    | Bates      | 789 Madison Street |
+    +------------+--------------------+
+
+Another example to show how to set custom values for the optional
+parameters:
+
+    os> source=accounts | where match(firstname, 'Hattie', operator='AND', boost=2.0) | fields lastname;
+    fetched rows / total rows = 1/1
+    +------------+
+    | lastname   |
+    |------------|
+    | Bond       |
+    +------------+
+
+### Limitations
+
+The full text search functions are available to execute only in OpenSearch DSL
+but not in memory as of now, so the full text search might fail for
+queries that are too complex to translate into DSL if the full text search
+function is following after a complex PPL query. To make your queries
+always work-able, it is recommended to place the full text search commands as
+close to the search command as possible, to ensure the full text search
+functions are eligible to push down. For example, a complex query like
+\`search source = people | rename firstname as name | dedup account_number | fields name, account_number, balance, employer | where match(employer, 'Open Search') | stats count() by city\`
+could fail because it is difficult to translate to DSL, but it would be
+better if we rewrite it to an equivalent query as
+\`search source = people | where match(employer, 'Open Search') | rename firstname as name | dedup account_number | fields name, account_number, balance, employer | stats count() by city\`
+by moving the where command with full text search function to the second
+command right after the search command, and the full text search would be
+optimized and executed smoothly in OpenSearch DSL. See [Optimization](https://github.com/opensearch-project/sql/blob/22924b13d9cb46759c8d213a7ce903effe06ab47/docs/user/optimization/optimization.rst)
+to get more details about the query engine optimization.
+`;
diff --git a/public/components/common/helpers/ppl_docs/functions/index.ts b/public/components/common/helpers/ppl_docs/functions/index.ts
new file mode 100644
index 0000000000..e061c6188e
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/functions/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { datetimeFunction } from './datetime';
+export { conditionFunction } from './condition';
+export { mathFunction } from './math';
+export { stringFunction } from './string';
+export { fullTextSearchFunction } from './full_text_search';
diff --git a/public/components/common/helpers/ppl_docs/functions/math.ts b/public/components/common/helpers/ppl_docs/functions/math.ts
new file mode 100644
index 0000000000..33d63f17c5
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/functions/math.ts
@@ -0,0 +1,600 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const mathFunction = `## Math
+---
+
+### ABS
+
+**Description**
+
+Usage: abs(x) calculate the abs x.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: INTEGER/LONG/FLOAT/DOUBLE
+
+Example:
+
+    os> source=people | eval \`ABS(-1)\` = ABS(-1) | fields \`ABS(-1)\`
+    fetched rows / total rows = 1/1
+    +-----------+
+    | ABS(-1)   |
+    |-----------|
+    | 1         |
+    +-----------+
+
+### ACOS
+
+**Description**
+
+Usage: acos(x) calculate the arc cosine of x. Returns NULL if x is not
+in the range -1 to 1.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`ACOS(0)\` = ACOS(0) | fields \`ACOS(0)\`
+    fetched rows / total rows = 1/1
+    +--------------------+
+    | ACOS(0)            |
+    |--------------------|
+    | 1.5707963267948966 |
+    +--------------------+
+
+### ASIN
+
+**Description**
+
+Usage: asin(x) calculate the arc sine of x. Returns NULL if x is not in
+the range -1 to 1.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`ASIN(0)\` = ASIN(0) | fields \`ASIN(0)\`
+    fetched rows / total rows = 1/1
+    +-----------+
+    | ASIN(0)   |
+    |-----------|
+    | 0.0       |
+    +-----------+
+
+### ATAN
+
+**Description**
+
+Usage: atan(x) calculates the arc tangent of x. atan(y, x&#41; calculates
+the arc tangent of y / x, except that the signs of both arguments are
+used to determine the quadrant of the result.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`ATAN(2)\` = ATAN(2), \`ATAN(2, 3)\` = ATAN(2, 3) | fields \`ATAN(2)\`, \`ATAN(2, 3)\`
+    fetched rows / total rows = 1/1
+    +--------------------+--------------------+
+    | ATAN(2)            | ATAN(2, 3)         |
+    |--------------------+--------------------|
+    | 1.1071487177940904 | 0.5880026035475675 |
+    +--------------------+--------------------+
+
+### ATAN2
+
+**Description**
+
+Usage: atan2(y, x&#41; calculates the arc tangent of y / x, except that the
+signs of both arguments are used to determine the quadrant of the
+result.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`ATAN2(2, 3)\` = ATAN2(2, 3) | fields \`ATAN2(2, 3)\`
+    fetched rows / total rows = 1/1
+    +--------------------+
+    | ATAN2(2, 3)        |
+    |--------------------|
+    | 0.5880026035475675 |
+    +--------------------+
+
+### CEIL
+
+**Description**
+
+Usage: ceil(x) return the smallest integer value this is greater or
+equal to x.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`CEIL(2.75)\` = CEIL(2.75) | fields \`CEIL(2.75)\`
+    fetched rows / total rows = 1/1
+    +--------------+
+    | CEIL(2.75)   |
+    |--------------|
+    | 3            |
+    +--------------+
+
+### CONV
+
+**Description**
+
+Usage: CONV(x, a, b) converts the number x from a base to b base.
+
+Argument type: x: STRING, a: INTEGER, b: INTEGER
+
+Return type: STRING
+
+Example:
+
+    os> source=people | eval \`CONV('12', 10, 16)\` = CONV('12', 10, 16), \`CONV('2C', 16, 10)\` = CONV('2C', 16, 10), \`CONV(12, 10, 2)\` = CONV(12, 10, 2), \`CONV(1111, 2, 10)\` = CONV(1111, 2, 10) | fields \`CONV('12', 10, 16)\`, \`CONV('2C', 16, 10)\`, \`CONV(12, 10, 2)\`, \`CONV(1111, 2, 10)\`
+    fetched rows / total rows = 1/1
+    +----------------------+----------------------+-------------------+---------------------+
+    | CONV('12', 10, 16)   | CONV('2C', 16, 10)   | CONV(12, 10, 2)   | CONV(1111, 2, 10)   |
+    |----------------------+----------------------+-------------------+---------------------|
+    | c                    | 44                   | 1100              | 15                  |
+    +----------------------+----------------------+-------------------+---------------------+
+
+### COS
+
+**Description**
+
+Usage: cos(x) calculate the cosine of x, where x is given in radians.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`COS(0)\` = COS(0) | fields \`COS(0)\`
+    fetched rows / total rows = 1/1
+    +----------+
+    | COS(0)   |
+    |----------|
+    | 1.0      |
+    +----------+
+
+### COT
+
+**Description**
+
+Usage: cot(x) calculate the cotangent of x. Returns out-of-range error
+if x equals to 0.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`COT(1)\` = COT(1) | fields \`COT(1)\`
+    fetched rows / total rows = 1/1
+    +--------------------+
+    | COT(1)             |
+    |--------------------|
+    | 0.6420926159343306 |
+    +--------------------+
+
+### CRC32
+
+**Description**
+
+Usage: Calculates a cyclic redundancy check value and returns a 32-bit
+unsigned value.
+
+Argument type: STRING
+
+Return type: LONG
+
+Example:
+
+    os> source=people | eval \`CRC32('MySQL')\` = CRC32('MySQL') | fields \`CRC32('MySQL')\`
+    fetched rows / total rows = 1/1
+    +------------------+
+    | CRC32('MySQL')   |
+    |------------------|
+    | 3259397556       |
+    +------------------+
+
+### DEGREES
+
+**Description**
+
+Usage: degrees(x) converts x from radians to degrees.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`DEGREES(1.57)\` = DEGREES(1.57) | fields \`DEGREES(1.57)\`
+    fetched rows / total rows  = 1/1
+    +-------------------+
+    | DEGREES(1.57)     |
+    |-------------------|
+    | 89.95437383553924 |
+    +-------------------+
+
+### E
+
+**Description**
+
+Usage: E() returns the Euler's number
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`E()\` = E() | fields \`E()\`
+    fetched rows / total rows = 1/1
+    +-------------------+
+    | E()               |
+    |-------------------|
+    | 2.718281828459045 |
+    +-------------------+
+
+### EXP
+
+**Description**
+
+Usage: exp(x) return e raised to the power of x.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`EXP(2)\` = EXP(2) | fields \`EXP(2)\`
+    fetched rows / total rows = 1/1
+    +------------------+
+    | EXP(2)           |
+    |------------------|
+    | 7.38905609893065 |
+    +------------------+
+
+### FLOOR
+
+**Description**
+
+Usage: floor(x) return the largest integer value this is smaller or
+equal to x.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`FLOOR(2.75)\` = FLOOR(2.75) | fields \`FLOOR(2.75)\`
+    fetched rows / total rows = 1/1
+    +---------------+
+    | FLOOR(2.75)   |
+    |---------------|
+    | 2             |
+    +---------------+
+
+### LN
+
+**Description**
+
+Usage: ln(x) return the the natural logarithm of x.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`LN(2)\` = LN(2) | fields \`LN(2)\`
+    fetched rows / total rows = 1/1
+    +--------------------+
+    | LN(2)              |
+    |--------------------|
+    | 0.6931471805599453 |
+    +--------------------+
+
+### LOG
+
+**Description**
+
+Specifications:
+
+Usage: log(x) returns the natural logarithm of x that is the base e
+logarithm of the x. log(B, x&#41; is equivalent to log(x)/log(B).
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`LOG(2)\` = LOG(2), \`LOG(2, 8)\` = LOG(2, 8) | fields \`LOG(2)\`, \`LOG(2, 8)\`
+    fetched rows / total rows = 1/1
+    +--------------------+-------------+
+    | LOG(2)             | LOG(2, 8)   |
+    |--------------------+-------------|
+    | 0.6931471805599453 | 3.0         |
+    +--------------------+-------------+
+
+### LOG2
+
+**Description**
+
+Specifications:
+
+Usage: log2(x) is equivalent to log(x)/log(2).
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`LOG2(8)\` = LOG2(8) | fields \`LOG2(8)\`
+    fetched rows / total rows = 1/1
+    +-----------+
+    | LOG2(8)   |
+    |-----------|
+    | 3.0       |
+    +-----------+
+
+### LOG10
+
+**Description**
+
+Specifications:
+
+Usage: log10(x) is equivalent to log(x)/log(10).
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`LOG10(100)\` = LOG10(100) | fields \`LOG10(100)\`
+    fetched rows / total rows = 1/1
+    +--------------+
+    | LOG10(100)   |
+    |--------------|
+    | 2.0          |
+    +--------------+
+
+### MOD
+
+**Description**
+
+Usage: MOD(n, m) calculates the remainder of the number n divided by m.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: Wider type between types of n and m if m is nonzero value.
+If m equals to 0, then returns NULL.
+
+Example:
+
+    os> source=people | eval \`MOD(3, 2)\` = MOD(3, 2), \`MOD(3.1, 2)\` = MOD(3.1, 2) | fields \`MOD(3, 2)\`, \`MOD(3.1, 2)\`
+    fetched rows / total rows = 1/1
+    +-------------+---------------+
+    | MOD(3, 2)   | MOD(3.1, 2)   |
+    |-------------+---------------|
+    | 1           | 1.1           |
+    +-------------+---------------+
+
+### PI
+
+**Description**
+
+Usage: PI() returns the constant pi
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`PI()\` = PI() | fields \`PI()\`
+    fetched rows / total rows = 1/1
+    +-------------------+
+    | PI()              |
+    |-------------------|
+    | 3.141592653589793 |
+    +-------------------+
+
+### POW
+
+**Description**
+
+Usage: POW(x, y) calculates the value of x raised to the power of y. Bad
+inputs return NULL result.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Synonyms: [POWER](#power)
+
+Example:
+
+    os> source=people | eval \`POW(3, 2)\` = POW(3, 2), \`POW(-3, 2)\` = POW(-3, 2), \`POW(3, -2)\` = POW(3, -2) | fields \`POW(3, 2)\`, \`POW(-3, 2)\`, \`POW(3, -2)\`
+    fetched rows / total rows = 1/1
+    +-------------+--------------+--------------------+
+    | POW(3, 2)   | POW(-3, 2)   | POW(3, -2)         |
+    |-------------+--------------+--------------------|
+    | 9.0         | 9.0          | 0.1111111111111111 |
+    +-------------+--------------+--------------------+
+
+### POWER
+
+**Description**
+
+Usage: POWER(x, y) calculates the value of x raised to the power of y.
+Bad inputs return NULL result.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Synonyms: [POW](#pow)
+
+Example:
+
+    os> source=people | eval \`POWER(3, 2)\` = POWER(3, 2), \`POWER(-3, 2)\` = POWER(-3, 2), \`POWER(3, -2)\` = POWER(3, -2) | fields \`POWER(3, 2)\`, \`POWER(-3, 2)\`, \`POWER(3, -2)\`
+    fetched rows / total rows = 1/1
+    +---------------+----------------+--------------------+
+    | POWER(3, 2)   | POWER(-3, 2)   | POWER(3, -2)       |
+    |---------------+----------------+--------------------|
+    | 9.0           | 9.0            | 0.1111111111111111 |
+    +---------------+----------------+--------------------+
+
+### RADIANS
+
+**Description**
+
+Usage: radians(x) converts x from degrees to radians.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`RADIANS(90)\` = RADIANS(90) | fields \`RADIANS(90)\`
+    fetched rows / total rows  = 1/1
+    +--------------------+
+    | RADIANS(90)        |
+    |--------------------|
+    | 1.5707963267948966 |
+    +--------------------+
+
+### RAND
+
+**Description**
+
+Usage: RAND()/RAND(N) returns a random floating-point value in the range
+0 &lt;= value &lt; 1.0. If integer N is specified, the seed is
+initialized prior to execution. One implication of this behavior is with
+identical argument N, rand(N) returns the same value each time, and thus
+produces a repeatable sequence of column values.
+
+Argument type: INTEGER
+
+Return type: FLOAT
+
+Example:
+
+    os> source=people | eval \`RAND(3)\` = RAND(3) | fields \`RAND(3)\`
+    fetched rows / total rows = 1/1
+    +------------+
+    | RAND(3)    |
+    |------------|
+    | 0.73105735 |
+    +------------+
+
+### ROUND
+
+**Description**
+
+Usage: ROUND(x, d) rounds the argument x to d decimal places, d defaults
+to 0 if not specified
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type map:
+
+(INTEGER/LONG \[,INTEGER\]) -&gt; LONG (FLOAT/DOUBLE \[,INTEGER\]) -&gt;
+LONG
+
+Example:
+
+    os> source=people | eval \`ROUND(12.34)\` = ROUND(12.34), \`ROUND(12.34, 1)\` = ROUND(12.34, 1), \`ROUND(12.34, -1)\` = ROUND(12.34, -1), \`ROUND(12, 1)\` = ROUND(12, 1) | fields \`ROUND(12.34)\`, \`ROUND(12.34, 1)\`, \`ROUND(12.34, -1)\`, \`ROUND(12, 1)\`
+    fetched rows / total rows = 1/1
+    +----------------+-------------------+--------------------+----------------+
+    | ROUND(12.34)   | ROUND(12.34, 1)   | ROUND(12.34, -1)   | ROUND(12, 1)   |
+    |----------------+-------------------+--------------------+----------------|
+    | 12.0           | 12.3              | 10.0               | 12             |
+    +----------------+-------------------+--------------------+----------------+
+
+### SIGN
+
+**Description**
+
+Usage: Returns the sign of the argument as -1, 0, or 1, depending on
+whether the number is negative, zero, or positive
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`SIGN(1)\` = SIGN(1), \`SIGN(0)\` = SIGN(0), \`SIGN(-1.1)\` = SIGN(-1.1) | fields \`SIGN(1)\`, \`SIGN(0)\`, \`SIGN(-1.1)\`
+    fetched rows / total rows = 1/1
+    +-----------+-----------+--------------+
+    | SIGN(1)   | SIGN(0)   | SIGN(-1.1)   |
+    |-----------+-----------+--------------|
+    | 1         | 0         | -1           |
+    +-----------+-----------+--------------+
+
+### SIN
+
+**Description**
+
+Usage: sin(x) calculate the sine of x, where x is given in radians.
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type: DOUBLE
+
+Example:
+
+    os> source=people | eval \`SIN(0)\` = SIN(0) | fields \`SIN(0)\`
+    fetched rows / total rows = 1/1
+    +----------+
+    | SIN(0)   |
+    |----------|
+    | 0.0      |
+    +----------+
+
+### SQRT
+
+**Description**
+
+Usage: Calculates the square root of a non-negative number
+
+Argument type: INTEGER/LONG/FLOAT/DOUBLE
+
+Return type map:
+
+(Non-negative) INTEGER/LONG/FLOAT/DOUBLE -&gt; DOUBLE (Negative)
+INTEGER/LONG/FLOAT/DOUBLE -&gt; NULL
+
+Example:
+
+    os> source=people | eval \`SQRT(4)\` = SQRT(4), \`SQRT(4.41)\` = SQRT(4.41) | fields \`SQRT(4)\`, \`SQRT(4.41)\`
+    fetched rows / total rows = 1/1
+    +-----------+--------------+
+    | SQRT(4)   | SQRT(4.41)   |
+    |-----------+--------------|
+    | 2.0       | 2.1          |
+    +-----------+--------------+
+`;
diff --git a/public/components/common/helpers/ppl_docs/functions/string.ts b/public/components/common/helpers/ppl_docs/functions/string.ts
new file mode 100644
index 0000000000..824727ae80
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/functions/string.ts
@@ -0,0 +1,240 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const stringFunction = `## String
+---
+
+### CONCAT
+
+**Description**
+
+Usage: CONCAT(str1, str2) returns str1 and str strings concatenated
+together.
+
+Argument type: STRING, STRING
+
+Return type: STRING
+
+Example:
+
+    os> source=people | eval \`CONCAT('hello', 'world')\` = CONCAT('hello', 'world') | fields \`CONCAT('hello', 'world')\`
+    fetched rows / total rows = 1/1
+    +----------------------------+
+    | CONCAT('hello', 'world')   |
+    |----------------------------|
+    | helloworld                 |
+    +----------------------------+
+
+### CONCAT\_WS
+
+**Description**
+
+Usage: CONCAT\_WS(sep, str1, str2) returns str1 concatenated with str2
+using sep as a separator between them.
+
+Argument type: STRING, STRING, STRING
+
+Return type: STRING
+
+Example:
+
+    os> source=people | eval \`CONCAT_WS(',', 'hello', 'world')\` = CONCAT_WS(',', 'hello', 'world') | fields \`CONCAT_WS(',', 'hello', 'world')\`
+    fetched rows / total rows = 1/1
+    +------------------------------------+
+    | CONCAT_WS(',', 'hello', 'world')   |
+    |------------------------------------|
+    | hello,world                        |
+    +------------------------------------+
+
+### LENGTH
+
+**Description**
+
+Specifications:
+
+1.  LENGTH(STRING) -&gt; INTEGER
+
+Usage: length(str) returns length of string measured in bytes.
+
+Argument type: STRING
+
+Return type: INTEGER
+
+Example:
+
+    os> source=people | eval \`LENGTH('helloworld')\` = LENGTH('helloworld') | fields \`LENGTH('helloworld')\`
+    fetched rows / total rows = 1/1
+    +------------------------+
+    | LENGTH('helloworld')   |
+    |------------------------|
+    | 10                     |
+    +------------------------+
+
+### LIKE
+
+**Description**
+
+Usage: like(string, PATTERN) return true if the string match the
+PATTERN.
+
+There are two wildcards often used in conjunction with the LIKE
+operator:
+
+-   \`%\` - The percent sign represents zero, one, or multiple characters
+-   \`_\` - The underscore represents a single character
+
+Example:
+
+    os> source=people | eval \`LIKE('hello world', '_ello%')\` = LIKE('hello world', '_ello%') | fields \`LIKE('hello world', '_ello%')\`
+    fetched rows / total rows = 1/1
+    +---------------------------------+
+    | LIKE('hello world', '_ello%')   |
+    |---------------------------------|
+    | True                            |
+    +---------------------------------+
+
+### LOWER
+
+**Description**
+
+Usage: lower(string) converts the string to lowercase.
+
+Argument type: STRING
+
+Return type: STRING
+
+Example:
+
+    os> source=people | eval \`LOWER('helloworld')\` = LOWER('helloworld'), \`LOWER('HELLOWORLD')\` = LOWER('HELLOWORLD') | fields \`LOWER('helloworld')\`, \`LOWER('HELLOWORLD')\`
+    fetched rows / total rows = 1/1
+    +-----------------------+-----------------------+
+    | LOWER('helloworld')   | LOWER('HELLOWORLD')   |
+    |-----------------------+-----------------------|
+    | helloworld            | helloworld            |
+    +-----------------------+-----------------------+
+
+### LTRIM
+
+**Description**
+
+Usage: ltrim(str) trims leading space characters from the string.
+
+Argument type: STRING
+
+Return type: STRING
+
+Example:
+
+    os> source=people | eval \`LTRIM('   hello')\` = LTRIM('   hello'), \`LTRIM('hello   ')\` = LTRIM('hello   ') | fields \`LTRIM('   hello')\`, \`LTRIM('hello   ')\`
+    fetched rows / total rows = 1/1
+    +---------------------+---------------------+
+    | LTRIM('   hello')   | LTRIM('hello   ')   |
+    |---------------------+---------------------|
+    | hello               | hello               |
+    +---------------------+---------------------+
+
+### RIGHT
+
+**Description**
+
+Usage: right(str, len) returns the rightmost len characters from the
+string str, or NULL if any argument is NULL.
+
+Argument type: STRING, INTEGER
+
+Return type: STRING
+
+Example:
+
+    os> source=people | eval \`RIGHT('helloworld', 5)\` = RIGHT('helloworld', 5), \`RIGHT('HELLOWORLD', 0)\` = RIGHT('HELLOWORLD', 0) | fields \`RIGHT('helloworld', 5)\`, \`RIGHT('HELLOWORLD', 0)\`
+    fetched rows / total rows = 1/1
+    +--------------------------+--------------------------+
+    | RIGHT('helloworld', 5)   | RIGHT('HELLOWORLD', 0)   |
+    |--------------------------+--------------------------|
+    | world                    |                          |
+    +--------------------------+--------------------------+
+
+### RTRIM
+
+**Description**
+
+Usage: rtrim(str) trims trailing space characters from the string.
+
+Argument type: STRING
+
+Return type: STRING
+
+Example:
+
+    os> source=people | eval \`RTRIM('   hello')\` = RTRIM('   hello'), \`RTRIM('hello   ')\` = RTRIM('hello   ') | fields \`RTRIM('   hello')\`, \`RTRIM('hello   ')\`
+    fetched rows / total rows = 1/1
+    +---------------------+---------------------+
+    | RTRIM('   hello')   | RTRIM('hello   ')   |
+    |---------------------+---------------------|
+    |    hello            | hello               |
+    +---------------------+---------------------+
+
+### SUBSTRING
+
+**Description**
+
+Usage: substring(str, start) or substring(str, start, length) returns
+substring using start and length. With no length, entire string from
+start is returned.
+
+Argument type: STRING, INTEGER, INTEGER
+
+Return type: STRING
+
+Synonyms: SUBSTR
+
+Example:
+
+    os> source=people | eval \`SUBSTRING('helloworld', 5)\` = SUBSTRING('helloworld', 5), \`SUBSTRING('helloworld', 5, 3)\` = SUBSTRING('helloworld', 5, 3) | fields \`SUBSTRING('helloworld', 5)\`, \`SUBSTRING('helloworld', 5, 3)\`
+    fetched rows / total rows = 1/1
+    +------------------------------+---------------------------------+
+    | SUBSTRING('helloworld', 5)   | SUBSTRING('helloworld', 5, 3)   |
+    |------------------------------+---------------------------------|
+    | oworld                       | owo                             |
+    +------------------------------+---------------------------------+
+
+### TRIM
+
+**Description**
+
+Argument Type: STRING
+
+Return type: STRING
+
+Example:
+
+    os> source=people | eval \`TRIM('   hello')\` = TRIM('   hello'), \`TRIM('hello   ')\` = TRIM('hello   ') | fields \`TRIM('   hello')\`, \`TRIM('hello   ')\`
+    fetched rows / total rows = 1/1
+    +--------------------+--------------------+
+    | TRIM('   hello')   | TRIM('hello   ')   |
+    |--------------------+--------------------|
+    | hello              | hello              |
+    +--------------------+--------------------+
+
+### UPPER
+
+**Description**
+
+Usage: upper(string) converts the string to uppercase.
+
+Argument type: STRING
+
+Return type: STRING
+
+Example:
+
+    os> source=people | eval \`UPPER('helloworld')\` = UPPER('helloworld'), \`UPPER('HELLOWORLD')\` = UPPER('HELLOWORLD') | fields \`UPPER('helloworld')\`, \`UPPER('HELLOWORLD')\`
+    fetched rows / total rows = 1/1
+    +-----------------------+-----------------------+
+    | UPPER('helloworld')   | UPPER('HELLOWORLD')   |
+    |-----------------------+-----------------------|
+    | HELLOWORLD            | HELLOWORLD            |
+    +-----------------------+-----------------------+
+`;
diff --git a/public/components/common/helpers/ppl_docs/groups.tsx b/public/components/common/helpers/ppl_docs/groups.tsx
new file mode 100644
index 0000000000..633def3014
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/groups.tsx
@@ -0,0 +1,126 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  dedupCmd,
+  evalCmd,
+  fieldsCmd,
+  headCmd,
+  parseCmd,
+  rareCmd,
+  renameCmd,
+  searchCmd,
+  sortCmd,
+  statsCmd,
+  syntaxCmd,
+  topCmd,
+  whereCmd,
+} from './commands';
+import {
+  mathFunction,
+  datetimeFunction,
+  stringFunction,
+  conditionFunction,
+  fullTextSearchFunction,
+} from './functions';
+import { pplDatatypes, pplIdentifiers } from './language_structure';
+
+export const Group1 = {
+  label: 'Commands',
+  options: [
+    {
+      label: 'Syntax',
+      value: syntaxCmd,
+    },
+    {
+      label: 'dedup',
+      value: dedupCmd,
+    },
+    {
+      label: 'eval',
+      value: evalCmd,
+    },
+    {
+      label: 'fields',
+      value: fieldsCmd,
+    },
+    {
+      label: 'rename',
+      value: renameCmd,
+    },
+    {
+      label: 'search',
+      value: searchCmd,
+    },
+    {
+      label: 'sort',
+      value: sortCmd,
+    },
+    {
+      label: 'stats',
+      value: statsCmd,
+    },
+    {
+      label: 'where',
+      value: whereCmd,
+    },
+    {
+      label: 'head',
+      value: headCmd,
+    },
+    {
+      label: 'parse',
+      value: parseCmd,
+    },
+    {
+      label: 'rare',
+      value: rareCmd,
+    },
+    {
+      label: 'top',
+      value: topCmd,
+    },
+  ],
+};
+
+export const Group2 = {
+  label: 'Functions',
+  options: [
+    {
+      label: 'Math',
+      value: mathFunction,
+    },
+    {
+      label: 'Date and Time',
+      value: datetimeFunction,
+    },
+    {
+      label: 'String',
+      value: stringFunction,
+    },
+    {
+      label: 'Condition',
+      value: conditionFunction,
+    },
+    {
+      label: 'Full Text Search',
+      value: fullTextSearchFunction,
+    },
+  ],
+};
+
+export const Group3 = {
+  label: 'Language Structure',
+  options: [
+    {
+      label: 'Identifiers',
+      value: pplIdentifiers,
+    },
+    {
+      label: 'Data Types',
+      value: pplDatatypes,
+    },
+  ],
+};
diff --git a/public/components/common/helpers/ppl_docs/language_structure/datatypes.ts b/public/components/common/helpers/ppl_docs/language_structure/datatypes.ts
new file mode 100644
index 0000000000..b01149143b
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/language_structure/datatypes.ts
@@ -0,0 +1,412 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const pplDatatypes = `## Data Types
+---
+### **Overview**
+
+### PPL Data Types
+
+The PPL support the following data types.
+
+| PPL Data Type |
+|---------------|
+| boolean       |
+| byte          |
+| short         |
+| integer       |
+| long          |
+| float         |
+| double        |
+| string        |
+| text          |
+| timestamp     |
+| datetime      |
+| date          |
+| time          |
+| interval      |
+| ip            |
+| geo\_point    |
+| binary        |
+| struct        |
+| array         |
+
+### Data Types Mapping
+
+The table below list the mapping between OpenSearch Data Type, PPL Data
+Type and SQL Type.
+
+| OpenSearch Type | PPL Type  | SQL Type  |
+|-----------------|-----------|-----------|
+| boolean         | boolean   | BOOLEAN   |
+| byte            | byte      | TINYINT   |
+| short           | byte      | SMALLINT  |
+| integer         | integer   | INTEGER   |
+| long            | long      | BIGINT    |
+| float           | float     | REAL      |
+| half\_float     | float     | FLOAT     |
+| scaled\_float   | float     | DOUBLE    |
+| double          | double    | DOUBLE    |
+| keyword         | string    | VARCHAR   |
+| text            | text      | VARCHAR   |
+| date            | timestamp | TIMESTAMP |
+| ip              | ip        | VARCHAR   |
+| date            | timestamp | TIMESTAMP |
+| binary          | binary    | VARBINARY |
+| object          | struct    | STRUCT    |
+| nested          | array     | STRUCT    |
+
+Notes: Not all the PPL Type has correspond OpenSearch Type. e.g. data
+and time. To use function which required such data type, user should
+explict convert the data type.
+
+### **Numeric Data Types**
+
+Numeric values ranged from -2147483648 to +2147483647 are recognized as
+integer with type name \`INTEGER\`. For others outside the range, \`LONG\`
+integer will be the data type after parsed.
+
+### **Date and Time Data Types**
+
+The date and time data types are the types that represent temporal
+values and PPL plugin supports types including DATE, TIME, DATETIME,
+TIMESTAMP and INTERVAL. By default, the OpenSearch DSL uses date type as
+the only date and time related type, which has contained all information
+about an absolute time point. To integrate with PPL language, each of
+the types other than timestamp is holding part of temporal or timezone
+information, and the usage to explicitly clarify the date and time types
+is reflected in the datetime functions (see [Functions](functions.rst)
+for details), where some functions might have restrictions in the input
+argument type.
+
+#### **Date**
+
+Date represents the calendar date regardless of the time zone. A given
+date value represents a 24-hour period, or say a day, but this period
+varies in different timezones and might have flexible hours during
+Daylight Savings Time programs. Besides, the date type does not contain
+time information as well. The supported range is '1000-01-01' to
+'9999-12-31'.
+
+| Type | Syntax       | Range                        |
+|------|--------------|------------------------------|
+| Date | 'yyyy-MM-dd' | '0001-01-01' to '9999-12-31' |
+
+#### **Time**
+
+Time represents the time on the clock or watch with no regard for which
+timezone it might be related with. Time type data does not have date
+information.
+
+| Type | Syntax                  | Range                                  |
+|------|-------------------------|----------------------------------------|
+| Time | 'hh:mm&#58;ss\[.fraction\]' | '00:00:00.000000' to '23:59:59.999999' |
+
+#### **Datetime**
+
+Datetime type is the combination of date and time. The conversion rule
+of date or time to datetime is described in [Conversion between date and
+time types](#conversion-between-date-and-time-types). Datetime type does
+not contain timezone information. For an absolute time point that
+contains both date time and timezone information, see
+[Timestamp](#timestamp).
+
+| Type     | Syntax                             | Range                                                        |
+|----------|------------------------------------|--------------------------------------------------------------|
+| Datetime | 'yyyy-MM-dd hh:mm&#58;ss\[.fraction\]' | '0001-01-01 00:00:00.000000' to '9999-12-31 23:59:59.999999' |
+
+#### **Timestamp**
+
+A timestamp instance is an absolute instant independent of timezone or
+convention. For example, for a given point of time, if we set the
+timestamp of this time point into another timezone, the value should
+also be different accordingly. Besides, the storage of timestamp type is
+also different from the other types. The timestamp is converted from the
+current timezone to UTC for storage, and is converted back to the set
+timezone from UTC when retrieving.
+
+| Type      | Syntax                             | Range                                                            |
+|-----------|------------------------------------|------------------------------------------------------------------|
+| Timestamp | 'yyyy-MM-dd hh:mm&#58;ss\[.fraction\]' | '0001-01-01 00:00&#58;01.000000' UTC to '9999-12-31 23:59:59.999999' |
+
+####  **Interval**
+
+Interval data type represents a temporal duration or a period. The
+syntax is as follows:
+
+| Type     | Syntax             |
+|----------|--------------------|
+| Interval | INTERVAL expr unit |
+
+The expr is any expression that can be iterated to a quantity value
+eventually, see [Expressions](expressions.rst) for details. The unit
+represents the unit for interpreting the quantity, including
+MICROSECOND, SECOND, MINUTE, HOUR, DAY, WEEK, MONTH, QUARTER and
+YEAR.The INTERVAL keyword and the unit specifier are not case sensitive.
+Note that there are two classes of intervals. Year-week intervals can
+store years, quarters, months and weeks. Day-time intervals can store
+days, hours, minutes, seconds and microseconds. Year-week intervals are
+comparable only with another year-week intervals. These two types of
+intervals can only comparable with the same type of themselves.
+
+### **Conversion between date and time types**
+
+Basically the date and time types except interval can be converted to
+each other, but might suffer some alteration of the value or some
+information loss, for example extracting the time value from a datetime
+value, or convert a date value to a datetime value and so forth. Here
+lists the summary of the conversion rules that PPL plugin supports for
+each of the types:
+
+#### **Conversion from DATE**
+
+-   Since the date value does not have any time information, conversion
+    to [Time](#time) type is not useful, and will always return a zero
+    time value '00:00:00'.
+-   Conversion from date to datetime has a data fill-up due to the lack
+    of time information, and it attaches the time '00:00:00' to the
+    original date by default and forms a datetime instance. For example,
+    the result to covert date '2020-08-17' to datetime type is datetime
+    '2020-08-17 00:00:00'.
+-   Conversion to timestamp is to alternate both the time value and the
+    timezone information, and it attaches the zero time value '00:00:00'
+    and the session timezone (UTC by default) to the date. For example,
+    the result to covert date '2020-08-17' to datetime type with session
+    timezone UTC is datetime '2020-08-17 00:00:00' UTC.
+
+#### **Conversion from TIME**
+
+-   Time value cannot be converted to any other date and time types
+    since it does not contain any date information, so it is not
+    meaningful to give no date info to a date/datetime/timestamp
+    instance.
+
+#### **Conversion from DATETIME**
+
+-   Conversion from datetime to date is to extract the date part from
+    the datetime value. For example, the result to convert datetime
+    '2020-08-17 14&#58;09&#58;00' to date is date '2020-08-08'.
+-   Conversion to time is to extract the time part from the datetime
+    value. For example, the result to convert datetime '2020-08-17
+    14&#58;09&#58;00' to time is time '14&#58;09&#58;00'.
+-   Since the datetime type does not contain timezone information, the
+    conversion to timestamp needs to fill up the timezone part with the
+    session timezone. For example, the result to convert datetime
+    '2020-08-17 14&#58;09&#58;00' with system timezone of UTC, to timestamp is
+    timestamp '2020-08-17 14&#58;09&#58;00' UTC.
+
+#### **Conversion from TIMESTAMP**
+
+-   Conversion from timestamp is much more straightforward. To convert
+    it to date is to extract the date value, and conversion to time is
+    to extract the time value. Conversion to datetime, it will extracts
+    the datetime value and leave the timezone information over. For
+    example, the result to convert datetime '2020-08-17 14&#58;09&#58;00' UTC to
+    date is date '2020-08-17', to time is '14&#58;09&#58;00' and to datetime is
+    datetime '2020-08-17 14&#58;09&#58;00'.
+
+### **String Data Types**
+
+A string is a sequence of characters enclosed in either single or double
+quotes. For example, both 'text' and "text" will be treated as string
+literal.
+
+### **Query Struct Data Types**
+
+In PPL, the Struct Data Types corresponding to the [Object field type in
+OpenSearch](https://www.elastic.co/guide/en/elasticsearch/reference/current/object.html).
+The "." is used as the path selector when access the inner attribute of
+the struct data.
+
+#### **Example: People**
+
+There are three fields in test index \`people\`: 1) deep nested object
+field \`city\`; 2) object field of array value \`account\`; 3) nested field
+\`projects\`:
+
+    {
+      "mappings": {
+        "properties": {
+          "city": {
+            "properties": {
+              "name": {
+                "type": "keyword"
+              },
+              "location": {
+                "properties": {
+                  "latitude": {
+                    "type": "double"
+                  }
+                }
+              }
+            }
+          },
+          "account": {
+            "properties": {
+              "id": {
+                "type": "keyword"
+              }
+            }
+          },
+          "projects": {
+            "type": "nested",
+            "properties": {
+              "name": {
+                "type": "keyword"
+              }
+            }
+          }
+        }
+      }
+    }
+
+#### **Example: Employees**
+
+Here is the mapping for test index \`employees_nested\`. Note that field
+\`projects\` is a nested field:
+
+    {
+      "mappings": {
+        "properties": {
+          "id": {
+            "type": "long"
+          },
+          "name": {
+            "type": "text",
+            "fields": {
+              "keyword": {
+                "type": "keyword",
+                "ignore_above": 256
+              }
+            }
+          },
+          "projects": {
+            "type": "nested",
+            "properties": {
+              "name": {
+                "type": "text",
+                "fields": {
+                  "keyword": {
+                    "type": "keyword"
+                  }
+                },
+                "fielddata": true
+              },
+              "started_year": {
+                "type": "long"
+              }
+            }
+          },
+          "title": {
+            "type": "text",
+            "fields": {
+              "keyword": {
+                "type": "keyword",
+                "ignore_above": 256
+              }
+            }
+          }
+        }
+      }
+    }
+
+Result set:
+
+    {
+      "employees_nested" : [
+        {
+          "id" : 3,
+          "name" : "Bob Smith",
+          "title" : null,
+          "projects" : [
+            {
+              "name" : "AWS Redshift Spectrum querying",
+              "started_year" : 1990
+            },
+            {
+              "name" : "AWS Redshift security",
+              "started_year" : 1999
+            },
+            {
+              "name" : "AWS Aurora security",
+              "started_year" : 2015
+            }
+          ]
+        },
+        {
+          "id" : 4,
+          "name" : "Susan Smith",
+          "title" : "Dev Mgr",
+          "projects" : [ ]
+        },
+        {
+          "id" : 6,
+          "name" : "Jane Smith",
+          "title" : "Software Eng 2",
+          "projects" : [
+            {
+              "name" : "AWS Redshift security",
+              "started_year" : 1998
+            },
+            {
+              "name" : "AWS Hello security",
+              "started_year" : 2015,
+              "address" : [
+                {
+                  "city" : "Dallas",
+                  "state" : "TX"
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+
+#### **Example 1: Select struct inner attribute**
+
+The example show fetch city (top level), city.name (second level),
+city.location.latitude (deeper level) struct type data from people
+results.
+
+PPL query:
+
+    os> source=people | fields city, city.name, city.location.latitude;
+    fetched rows / total rows = 1/1
+    +-----------------------------------------------------+-------------+--------------------------+
+    | city                                                | city.name   | city.location.latitude   |
+    |-----------------------------------------------------+-------------+--------------------------|
+    | {'name': 'Seattle', 'location': {'latitude': 10.5}} | Seattle     | 10.5                     |
+    +-----------------------------------------------------+-------------+--------------------------+
+
+#### **Example 2: Group by struct inner attribute**
+
+The example show group by object field inner attribute.
+
+PPL query:
+
+    os> source=people | stats count() by city.name;
+    fetched rows / total rows = 1/1
+    +-----------+-------------+
+    | count()   | city.name   |
+    |-----------+-------------|
+    | 1         | Seattle     |
+    +-----------+-------------+
+
+#### **Example 3: Selecting Field of Array Value**
+
+Select deeper level for object fields of array value which returns the
+first element in the array. For example, because inner field
+\`accounts.id\` has three values instead of a tuple in this document, the
+first entry is returned.:
+
+    os> source = people | fields accounts, accounts.id;
+    fetched rows / total rows = 1/1
+    +------------+---------------+
+    | accounts   | accounts.id   |
+    |------------+---------------|
+    | {'id': 1}  | 1             |
+    +------------+---------------+
+`;
diff --git a/public/components/common/helpers/ppl_docs/language_structure/identifiers.ts b/public/components/common/helpers/ppl_docs/language_structure/identifiers.ts
new file mode 100644
index 0000000000..1a931f6424
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/language_structure/identifiers.ts
@@ -0,0 +1,107 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const pplIdentifiers = `## Indentifiers
+---
+
+### **Introduction**
+
+Identifiers are used for naming your database objects, such as index
+name, field name, customLabel etc. Basically there are two types of
+identifiers: regular identifiers and delimited identifiers.
+
+### **Regular Identifiers**
+
+**Description**
+
+A regular identifier is a string of characters that must start with
+ASCII letter (lower or upper case). The subsequent character can be a
+combination of letter, digit, underscore (\`_\`). It cannot be a reversed
+key word. And whitespace and other special characters are not allowed.
+
+For OpenSearch, the following identifiers are supported extensionally:
+
+1.  Identifiers prefixed by dot \`.\`: this is called hidden index in
+    OpenSearch, for example \`.opensearch_dashboards\`.
+2.  Identifiers prefixed by at sign \`@\`: this is common for meta fields
+    generated in Logstash ingestion.
+3.  Identifiers with \`-\` in the middle: this is mostly the case for
+    index name with date information.
+4.  Identifiers with star \`*\` present: this is mostly an index pattern
+    for wildcard match.
+
+Index name with date suffix separated by dash or dots, such as
+\`cwl-2020.01.11\` or \`logs-7.0-2020.01.11\`, is common for those created
+by Logstash or FileBeat ingestion. So, this kind of identifier used as
+index name is also supported without the need of being quoted for user
+convenience. In this case, wildcard within date pattern is also allowed
+to search for data across indices of different date range. For example,
+you can use \`logs-2020.1*\` to search in indices for October, November
+and December 2020.
+
+#### **Examples**
+
+Here are examples for using index pattern directly without quotes:
+
+    os> source=accounts | fields account_number, firstname, lastname;
+    fetched rows / total rows = 4/4
+    +------------------+-------------+------------+
+    | account_number   | firstname   | lastname   |
+    |------------------+-------------+------------|
+    | 1                | Amber       | Duke       |
+    | 6                | Hattie      | Bond       |
+    | 13               | Nanette     | Bates      |
+    | 18               | Dale        | Adams      |
+    +------------------+-------------+------------+
+
+### **Delimited Identifiers**
+
+**Description**
+
+A delimited identifier is an identifier enclosed in back ticks \`\`. In
+this case, the identifier enclosed is not necessarily a regular
+identifier. In other words, it can contain any special character not
+allowed by regular identifier.
+
+#### **Use Cases**
+
+Here are typical examples of the use of delimited identifiers:
+
+1.  Identifiers of reserved key word name
+2.  Identifiers with dot \`.\` present: similarly as \`-\` in index name to
+    include date information, it is required to be quoted so parser can
+    differentiate it from identifier with qualifiers.
+3.  Identifiers with other special character: OpenSearch has its own
+    rule which allows more special character, for example Unicode
+    character is supported in index name.
+
+#### **Examples**
+
+Here are examples for quoting an index name by back ticks:
+
+    os> source=\`accounts\` | fields \`account_number\`;
+    fetched rows / total rows = 4/4
+    +------------------+
+    | account_number   |
+    |------------------|
+    | 1                |
+    | 6                |
+    | 13               |
+    | 18               |
+    +------------------+
+
+### **Case Sensitivity**
+
+**Description**
+
+Identifiers are treated in case sensitive manner. So it must be exactly
+same as what is stored in OpenSearch.
+
+### **Examples**
+
+For example, if you run \`source=Accounts\`, it will end up with an index
+not found exception from our plugin because the actual index name is
+under lower case.
+`;
diff --git a/public/components/common/helpers/ppl_docs/language_structure/index.ts b/public/components/common/helpers/ppl_docs/language_structure/index.ts
new file mode 100644
index 0000000000..34ab26c26e
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/language_structure/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export {pplDatatypes} from './datatypes';
+export {pplIdentifiers} from './identifiers';
\ No newline at end of file
diff --git a/public/components/common/helpers/ppl_docs/overview.tsx b/public/components/common/helpers/ppl_docs/overview.tsx
new file mode 100644
index 0000000000..0bb3bd71ff
--- /dev/null
+++ b/public/components/common/helpers/ppl_docs/overview.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const overview = `## Overview
+---
+Piped Processing Language (PPL), powered by OpenSearch, enables
+OpenSearch users with exploration and discovery of, and finding search
+patterns in data stored in OpenSearch, using a set of commands delimited
+by pipes (\|). These are essentially read-only requests to process data
+and return results.
+
+Currently, OpenSearch users can query data using either Query DSL or
+SQL. Query DSL is powerful and fast. However, it has a steep learning
+curve, and was not designed as a human interface to easily create ad hoc
+queries and explore user data. SQL allows users to extract and analyze
+data in OpenSearch in a declarative manner. OpenSearch now makes its
+search and query engine robust by introducing Piped Processing Language
+(PPL). It enables users to extract insights from OpenSearch with a
+sequence of commands delimited by pipes () syntax. It enables
+developers, DevOps engineers, support engineers, site reliability
+engineers (SREs), and IT managers to effectively discover and explore
+log, monitoring and observability data stored in OpenSearch.
+
+We expand the capabilities of our Workbench, a comprehensive and
+integrated visual query tool currently supporting only SQL, to run
+on-demand PPL commands, and view and save results as text and JSON. We
+also add a new interactive standalone command line tool, the PPL CLI, to
+run on-demand PPL commands, and view and save results as text and JSON.
+
+The query start with search command and then flowing a set of command
+delimited by pipe ( for example, the following query retrieve firstname
+and lastname from accounts if age large than 18.
+
+\`\`\` 
+source=accounts
+| where age > 18
+| fields firstname, lastname
+\`\`\`
+`;
diff --git a/public/components/common/helpers/ppl_reference_flyout.tsx b/public/components/common/helpers/ppl_reference_flyout.tsx
new file mode 100644
index 0000000000..bf5e522612
--- /dev/null
+++ b/public/components/common/helpers/ppl_reference_flyout.tsx
@@ -0,0 +1,102 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiLink,
+  EuiMarkdownFormat,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { PPL_DOCUMENTATION_URL } from '../../../../common/constants/shared';
+import _ from 'lodash';
+import React, { useState } from 'react';
+import { FlyoutContainers } from '../flyout_containers';
+import { Group1, Group2, Group3 } from './ppl_docs/groups';
+import { overview } from './ppl_docs/overview';
+
+type Props = {
+  module: string;
+  closeFlyout: () => void;
+};
+
+export const PPLReferenceFlyout = ({ module, closeFlyout }: Props) => {
+  const allOptionsStatic = [{ label: 'Overview', value: overview }, Group1, Group2, Group3];
+  const defaultOption =
+    module === 'explorer' ? [allOptionsStatic[0]] : [_.find(Group1.options, ['label', 'where'])];
+  const [selectedOptions, setSelected] = useState(defaultOption);
+  const [flyoutContent, setFlyoutContent] = useState(
+    <EuiMarkdownFormat>{defaultOption[0].value}</EuiMarkdownFormat>
+  );
+
+  const onChange = (selectedOptions: any) => {
+    setSelected(selectedOptions);
+
+    const newContent = selectedOptions.map((option: EuiComboBoxOptionOption<string>) => (
+      <EuiMarkdownFormat>{option.value}</EuiMarkdownFormat>
+    ));
+    setFlyoutContent(newContent);
+  };
+
+  const flyoutHeader = (
+    <EuiFlyoutHeader hasBorder>
+      <EuiTitle size="m">
+        <h2 id="pplReferenceFlyout">OpenSearch PPL Reference Manual</h2>
+      </EuiTitle>
+    </EuiFlyoutHeader>
+  );
+
+  const flyoutBody = (
+    <EuiFlyoutBody>
+      <EuiFlexGroup component="span">
+        <EuiFlexItem>
+          <EuiComboBox
+            placeholder="Refer commands, functions and language structures"
+            options={allOptionsStatic}
+            selectedOptions={selectedOptions}
+            onChange={onChange}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem style={{ justifyContent: 'center' }}>
+          <EuiText size="s" color="subdued">
+            <EuiLink target="_blank" href={PPL_DOCUMENTATION_URL} external>
+              Learn More
+            </EuiLink>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="l" />
+      {flyoutContent}
+    </EuiFlyoutBody>
+  );
+
+  const flyoutFooter = (
+    <EuiFlyoutFooter>
+      <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiButton onClick={closeFlyout}>Close</EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlyoutFooter>
+  );
+
+  return (
+    <FlyoutContainers
+      closeFlyout={closeFlyout}
+      flyoutHeader={flyoutHeader}
+      flyoutBody={flyoutBody}
+      flyoutFooter={flyoutFooter}
+      ariaLabel="pplReferenceFlyout"
+    />
+  );
+};
diff --git a/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap b/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap
new file mode 100644
index 0000000000..78104e6528
--- /dev/null
+++ b/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap
@@ -0,0 +1,275 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Live tail button change live tail to 10s interval 1`] = `
+<LiveTailButton
+  dataTestSubj=""
+  isLiveTailOn={true}
+  isLiveTailPopoverOpen={false}
+  liveTailName="10s"
+  setIsLiveTailPopoverOpen={[MockFunction]}
+>
+  <EuiButton
+    data-test-subj=""
+    iconSide="left"
+    iconType="stop"
+    onClick={[Function]}
+  >
+    <EuiButtonDisplay
+      baseClassName="euiButton"
+      data-test-subj=""
+      disabled={false}
+      element="button"
+      iconSide="left"
+      iconType="stop"
+      isDisabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      <button
+        className="euiButton euiButton--primary"
+        data-test-subj=""
+        disabled={false}
+        onClick={[Function]}
+        style={
+          Object {
+            "minWidth": undefined,
+          }
+        }
+        type="button"
+      >
+        <EuiButtonContent
+          className="euiButton__content"
+          iconSide="left"
+          iconType="stop"
+          textProps={
+            Object {
+              "className": "euiButton__text",
+            }
+          }
+        >
+          <span
+            className="euiButtonContent euiButton__content"
+          >
+            <EuiIcon
+              className="euiButtonContent__icon"
+              color="inherit"
+              size="m"
+              type="stop"
+            >
+              <EuiIconStop
+                aria-hidden={true}
+                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                focusable="false"
+                role="img"
+                style={null}
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M4 2h8a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2zm0 1a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V4a1 1 0 00-1-1H4z"
+                    fillRule="evenodd"
+                  />
+                </svg>
+              </EuiIconStop>
+            </EuiIcon>
+            <span
+              className="euiButton__text"
+            >
+              10s
+            </span>
+          </span>
+        </EuiButtonContent>
+      </button>
+    </EuiButtonDisplay>
+  </EuiButton>
+</LiveTailButton>
+`;
+
+exports[`Live tail button starts live tail with 5s interval 1`] = `
+<LiveTailButton
+  dataTestSubj=""
+  isLiveTailOn={true}
+  isLiveTailPopoverOpen={false}
+  liveTailName="5s"
+  setIsLiveTailPopoverOpen={[MockFunction]}
+>
+  <EuiButton
+    data-test-subj=""
+    iconSide="left"
+    iconType="stop"
+    onClick={[Function]}
+  >
+    <EuiButtonDisplay
+      baseClassName="euiButton"
+      data-test-subj=""
+      disabled={false}
+      element="button"
+      iconSide="left"
+      iconType="stop"
+      isDisabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      <button
+        className="euiButton euiButton--primary"
+        data-test-subj=""
+        disabled={false}
+        onClick={[Function]}
+        style={
+          Object {
+            "minWidth": undefined,
+          }
+        }
+        type="button"
+      >
+        <EuiButtonContent
+          className="euiButton__content"
+          iconSide="left"
+          iconType="stop"
+          textProps={
+            Object {
+              "className": "euiButton__text",
+            }
+          }
+        >
+          <span
+            className="euiButtonContent euiButton__content"
+          >
+            <EuiIcon
+              className="euiButtonContent__icon"
+              color="inherit"
+              size="m"
+              type="stop"
+            >
+              <EuiIconEmpty
+                aria-hidden={true}
+                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                focusable="false"
+                role="img"
+                style={null}
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </EuiIconEmpty>
+            </EuiIcon>
+            <span
+              className="euiButton__text"
+            >
+              5s
+            </span>
+          </span>
+        </EuiButtonContent>
+      </button>
+    </EuiButtonDisplay>
+  </EuiButton>
+</LiveTailButton>
+`;
+
+exports[`Live tail off button stop live tail 1`] = `
+<StopLiveButton
+  StopLive={[MockFunction]}
+  dataTestSubj=""
+>
+  <EuiButton
+    color="danger"
+    data-test-subj=""
+    iconType="stop"
+    onClick={[Function]}
+  >
+    <EuiButtonDisplay
+      baseClassName="euiButton"
+      color="danger"
+      data-test-subj=""
+      disabled={false}
+      element="button"
+      iconType="stop"
+      isDisabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      <button
+        className="euiButton euiButton--danger"
+        data-test-subj=""
+        disabled={false}
+        onClick={[Function]}
+        style={
+          Object {
+            "minWidth": undefined,
+          }
+        }
+        type="button"
+      >
+        <EuiButtonContent
+          className="euiButton__content"
+          iconSide="left"
+          iconType="stop"
+          textProps={
+            Object {
+              "className": "euiButton__text",
+            }
+          }
+        >
+          <span
+            className="euiButtonContent euiButton__content"
+          >
+            <EuiIcon
+              className="euiButtonContent__icon"
+              color="inherit"
+              size="m"
+              type="stop"
+            >
+              <EuiIconStop
+                aria-hidden={true}
+                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                focusable="false"
+                role="img"
+                style={null}
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M4 2h8a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2zm0 1a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V4a1 1 0 00-1-1H4z"
+                    fillRule="evenodd"
+                  />
+                </svg>
+              </EuiIconStop>
+            </EuiIcon>
+            <span
+              className="euiButton__text"
+            >
+              Stop
+            </span>
+          </span>
+        </EuiButtonContent>
+      </button>
+    </EuiButtonDisplay>
+  </EuiButton>
+</StopLiveButton>
+`;
diff --git a/public/components/common/live_tail/__tests__/live_tail_button.test.tsx b/public/components/common/live_tail/__tests__/live_tail_button.test.tsx
new file mode 100644
index 0000000000..4cb2a478fb
--- /dev/null
+++ b/public/components/common/live_tail/__tests__/live_tail_button.test.tsx
@@ -0,0 +1,75 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { LiveTailButton, StopLiveButton } from '../live_tail_button';
+import { waitFor } from '@testing-library/dom';
+
+  describe('Live tail button', () => {
+    configure({ adapter: new Adapter() });
+  
+    it('starts live tail with 5s interval', async () => {
+      const setIsLiveTailPopoverOpen = jest.fn();
+
+      const wrapper = mount(
+        <LiveTailButton 
+        isLiveTailOn={true} 
+        setIsLiveTailPopoverOpen={setIsLiveTailPopoverOpen} 
+        liveTailName={'5s'} 
+        isLiveTailPopoverOpen={false} 
+        dataTestSubj={''}   
+        />
+      );
+      
+      wrapper.update();
+  
+      await waitFor(() => {
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
+
+    it('change live tail to 10s interval', async () => {
+        const setIsLiveTailPopoverOpen = jest.fn();
+        
+        const wrapper = mount(
+          <LiveTailButton 
+          isLiveTailOn={true} 
+          setIsLiveTailPopoverOpen={setIsLiveTailPopoverOpen} 
+          liveTailName={'10s'} 
+          isLiveTailPopoverOpen={false} 
+          dataTestSubj={''}   
+          />
+        );
+        
+        wrapper.update();
+    
+        await waitFor(() => {
+          expect(wrapper).toMatchSnapshot();
+        });
+      });
+  });
+
+  describe('Live tail off button', () => {
+    configure({ adapter: new Adapter() });
+
+    it('stop live tail', async () => {
+        const StopLive = jest.fn();
+        
+        const wrapper = mount(
+          <StopLiveButton 
+             StopLive={StopLive}
+             dataTestSubj={''}
+          />
+        );
+        
+        wrapper.update();
+    
+        await waitFor(() => {
+          expect(wrapper).toMatchSnapshot();
+        });
+      });
+ });
\ No newline at end of file
diff --git a/public/components/common/live_tail/live_tail_button.tsx b/public/components/common/live_tail/live_tail_button.tsx
new file mode 100644
index 0000000000..0e53152fa3
--- /dev/null
+++ b/public/components/common/live_tail/live_tail_button.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+//Define pop over interval options for live tail button in your plugin
+
+import { EuiButton } from "@elastic/eui";
+import React, { useMemo } from "react";
+import { LiveTailProps } from "common/types/explorer";
+
+//Live Tail Button
+export const LiveTailButton = ({
+  isLiveTailOn,
+  isLiveTailPopoverOpen,
+  setIsLiveTailPopoverOpen,
+  liveTailName,
+  dataTestSubj,
+}: LiveTailProps) => {
+  const liveButton = useMemo(() => {
+    return (
+      <EuiButton
+        iconType={isLiveTailOn ? "stop" : "play"}
+        iconSide="left"
+        onClick={() => setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)}
+        data-test-subj={dataTestSubj}
+      >
+        {liveTailName}
+      </EuiButton>
+    );
+  }, [isLiveTailPopoverOpen, isLiveTailOn]);
+  return liveButton;
+};
+
+export const StopLiveButton = (props: any) => {
+  const { StopLive, dataTestSubj } = props;
+
+  const stopButton = () => {
+    return (
+      <EuiButton
+        iconType="stop"
+        onClick={() => StopLive()}
+        color="danger"
+        data-test-subj={dataTestSubj}
+      >
+        Stop
+      </EuiButton>
+    );
+  };
+  return stopButton();
+};
+
+export const sleep = (milliseconds: number | undefined) => {
+  return new Promise((resolve) => setTimeout(resolve, milliseconds));
+};
diff --git a/public/components/common/metrics_listener.tsx b/public/components/common/metrics_listener.tsx
new file mode 100644
index 0000000000..ab971bb51a
--- /dev/null
+++ b/public/components/common/metrics_listener.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { HttpStart } from '../../../../../src/core/public';
+import { OBSERVABILITY_BASE } from '../../../common/constants/shared';
+
+interface MetricsListenerProps {
+  http: HttpStart;
+}
+
+export const MetricsListener: React.FC<MetricsListenerProps> = (props) => {
+  const incrementCountMetric = (element?: string | null) => {
+    if (!element) return;
+    props.http.post(`${OBSERVABILITY_BASE}/stats`, {
+      body: JSON.stringify({ element }),
+    });
+  };
+
+  const onClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    incrementCountMetric(
+      (e.target as HTMLElement | null)
+        ?.closest('[data-click-metric-element]')
+        ?.getAttribute('data-click-metric-element')
+    );
+  };
+
+  return <div onClick={onClick}>{props.children}</div>;
+};
diff --git a/public/components/common/search/autocomplete.test.tsx b/public/components/common/search/autocomplete.test.tsx
new file mode 100644
index 0000000000..fd50171010
--- /dev/null
+++ b/public/components/common/search/autocomplete.test.tsx
@@ -0,0 +1,733 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import DSLService from 'public/services/requests/dsl';
+import React from 'react';
+import { Autocomplete } from './autocomplete';
+import { parseGetSuggestions } from './autocomplete_logic';
+import {
+  AutocompleteItem,
+  pipeCommands,
+  statsCommands,
+} from '../../../../common/constants/autocomplete';
+import { act } from 'react-dom/test-utils';
+
+configure({ adapter: new Adapter() });
+
+describe('renders autocomplete', function () {
+  const query = '';
+  const tempQuery = '';
+  const handleQueryChange = jest.fn();
+  const handleQuerySearch = jest.fn();
+  const dslService = ({
+    http: jest.fn(),
+    fetch: jest.fn(),
+    fetchIndices: jest.fn(),
+    fetchFields: jest.fn(),
+  } as unknown) as DSLService;
+  const getSuggestions = jest.fn();
+  const onItemSelect = jest.fn();
+  const utils = render(
+    <Autocomplete
+      key={'autocomplete-search-bar'}
+      tabId={'application-analytics-tab'}
+      query={query}
+      tempQuery={tempQuery}
+      baseQuery={''}
+      handleQueryChange={handleQueryChange}
+      handleQuerySearch={handleQuerySearch}
+      dslService={dslService}
+      getSuggestions={getSuggestions}
+      onItemSelect={onItemSelect}
+    />
+  );
+
+  const searchBar = utils.getByPlaceholderText('Enter PPL query');
+
+  it('handles query change', () => {
+    act(() => {
+      fireEvent.change(searchBar, { target: { value: 'new query' } });
+    });
+    expect(handleQueryChange).toBeCalledWith('new query');
+  });
+
+  it('handles query search on shift enter', () => {
+    act(() => {
+      fireEvent.keyDown(searchBar, { keyCode: 13, shiftKey: true });
+    });
+    expect(handleQuerySearch).toBeCalled();
+  });
+});
+
+describe('autocomplete logic', function () {
+  const dslService = ({
+    http: jest.fn(),
+    fetch: jest
+      .fn()
+      .mockReturnValueOnce({
+        aggregations: { top_tags: { buckets: [{ key: 'data', doc_count: 1 }] } },
+      })
+      .mockReturnValueOnce({
+        aggregations: {
+          top_tags: {
+            buckets: [
+              { key: 1, doc_count: 1 },
+              { key: 0, doc_count: 1 },
+            ],
+          },
+        },
+      })
+      .mockReturnValue({ aggregations: { top_tags: { buckets: [{ key: 24, doc_count: 1 }] } } }),
+    fetchIndices: jest.fn().mockReturnValue([{ index: 'test_index' }]),
+    fetchFields: jest.fn().mockReturnValue({
+      test_index: {
+        mappings: {
+          properties: {
+            str_field: { type: 'string' },
+            bool_field: { type: 'boolean' },
+            num_field: { type: 'integer' },
+          },
+        },
+      },
+    }),
+  } as unknown) as DSLService;
+
+  it('suggests source if empty', async () => {
+    const input = '';
+    const expected = [
+      {
+        label: 'source',
+        input,
+        suggestion: 'source',
+        itemName: 'source',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(dslService.fetchIndices).toBeCalled();
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('continues to suggest source after S', async () => {
+    const input = 'S';
+    const expected = [
+      {
+        label: 'source',
+        input,
+        suggestion: 'ource',
+        itemName: 'source',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+  it('suggests = after source', async () => {
+    const input = 'source ';
+    const expected = [
+      {
+        label: 'source =',
+        input,
+        suggestion: '=',
+        itemName: '=',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests index after source =', async () => {
+    const input = 'source = ';
+    const expected = [
+      {
+        label: 'source = test_index',
+        input,
+        suggestion: 'test_index',
+        itemName: 'test_index',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('continues to suggest index after source = TeSt', async () => {
+    const input = 'source = TeSt';
+    const expected = [
+      {
+        label: 'source = test_index',
+        input,
+        suggestion: '_index',
+        itemName: 'test_index',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests | after source = test_index', async () => {
+    const input = 'source = test_index ';
+    const expected = [
+      {
+        label: 'source = test_index |',
+        input,
+        suggestion: '|',
+        itemName: '|',
+      },
+      {
+        label: 'source = test_index,',
+        input,
+        suggestion: ',',
+        itemName: ',',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests pipeCommands after |', async () => {
+    const input = 'source = test_index | ';
+    const expected = pipeCommands.map((c) => {
+      return {
+        label: `source = test_index | ${c.label}`,
+        input,
+        suggestion: c.label,
+        itemName: c.label,
+      };
+    }) as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(dslService.fetchFields).toBeCalled();
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('continues to suggest field after where StR_F', async () => {
+    const input = 'source = test_index | where StR_F';
+    const expected = [
+      {
+        label: 'source = test_index | where str_field',
+        input,
+        suggestion: 'ield',
+        itemName: 'str_field',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests = after where str_field', async () => {
+    const input = 'source = test_index | where str_field ';
+    const expected = [
+      {
+        label: 'source = test_index | where str_field =',
+        input,
+        suggestion: '=',
+        itemName: '=',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(dslService.fetch).toBeCalled();
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests data after where str_field = ', async () => {
+    const input = 'source = test_index | where str_field = ';
+    const expected = [
+      {
+        label: 'source = test_index | where str_field = "data"',
+        input,
+        suggestion: '"data"',
+        itemName: '"data"',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('continues to suggest data after where str_field = "D', async () => {
+    const input = 'source = test_index | where str_field = "D';
+    const expected = [
+      {
+        label: 'source = test_index | where str_field = "data"',
+        input,
+        suggestion: 'ata"',
+        itemName: '"data"',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests | after where str_field = "data"', async () => {
+    const input = 'source = test_index | where str_field = "data" ';
+    const expected = [
+      {
+        label: 'source = test_index | where str_field = "data" |',
+        input,
+        suggestion: '|',
+        itemName: '|',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('continues to suggest field after where BoOl_F', async () => {
+    const input = 'source = test_index | where BoOl_F';
+    const expected = [
+      {
+        label: 'source = test_index | where bool_field',
+        input,
+        suggestion: 'ield',
+        itemName: 'bool_field',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests = after where bool_field', async () => {
+    const input = 'source = test_index | where bool_field ';
+    const expected = [
+      {
+        label: 'source = test_index | where bool_field =',
+        input,
+        suggestion: '=',
+        itemName: '=',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(dslService.fetch).toBeCalled();
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests data after where bool_field = ', async () => {
+    const input = 'source = test_index | where bool_field = ';
+    const expected = [
+      {
+        label: 'source = test_index | where bool_field = True',
+        input,
+        suggestion: 'True',
+        itemName: 'True',
+      },
+      {
+        label: 'source = test_index | where bool_field = False',
+        input,
+        suggestion: 'False',
+        itemName: 'False',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('continues to suggest data after where bool_field = fA', async () => {
+    const input = 'source = test_index | where bool_field = fA';
+    const expected = [
+      {
+        label: 'source = test_index | where bool_field = False',
+        input,
+        suggestion: 'lse',
+        itemName: 'False',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests | after where bool_field = True', async () => {
+    const input = 'source = test_index | where bool_field = True ';
+    const expected = [
+      {
+        label: 'source = test_index | where bool_field = True |',
+        input,
+        suggestion: '|',
+        itemName: '|',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('continues to suggest match( after where Ma', async () => {
+    const input = 'source = test_index | where Ma';
+    const expected = [
+      {
+        label: 'source = test_index | where match(',
+        input,
+        suggestion: 'tch(',
+        itemName: 'match(',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests fields after where match(', async () => {
+    const input = 'source = test_index | where match( ';
+    const expected = [
+      {
+        label: 'source = test_index | where match( str_field',
+        input,
+        suggestion: 'str_field',
+        itemName: 'str_field',
+      },
+      {
+        label: 'source = test_index | where match( bool_field',
+        input,
+        suggestion: 'bool_field',
+        itemName: 'bool_field',
+      },
+      {
+        label: 'source = test_index | where match( num_field',
+        input,
+        suggestion: 'num_field',
+        itemName: 'num_field',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests , after where match( num_field', async () => {
+    const input = 'source = test_index | where match( num_field ';
+    const expected = [
+      {
+        label: 'source = test_index | where match( num_field ,',
+        input,
+        suggestion: ',',
+        itemName: ',',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(dslService.fetch).toBeCalled();
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests data after where match( num_field ,', async () => {
+    const input = 'source = test_index | where match( num_field , ';
+    const expected = [
+      {
+        label: 'source = test_index | where match( num_field , 24',
+        input,
+        suggestion: '24',
+        itemName: '24',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests ) after where match( num_field , 24', async () => {
+    const input = 'source = test_index | where match( num_field , 24 ';
+    const expected = [
+      {
+        label: 'source = test_index | where match( num_field , 24 )',
+        input,
+        suggestion: ')',
+        itemName: ')',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests | after where match( num_field , 24 )', async () => {
+    const input = 'source = test_index | where match( num_field , 24 ) ';
+    const expected = [
+      {
+        label: 'source = test_index | where match( num_field , 24 ) |',
+        input,
+        suggestion: '|',
+        itemName: '|',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests statsCommands after stats', async () => {
+    const input = 'source = test_index | stats ';
+    const expected = statsCommands.map((c) => {
+      return {
+        label: `source = test_index | stats ${c.label}`,
+        input,
+        suggestion: c.label,
+        itemName: c.label,
+      };
+    }) as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests by, comma, pipe after stats count()', async () => {
+    const input = 'source = test_index | stats count() ';
+    const expected = [',', '|', 'by'].map((suggestion) => {
+      return {
+        label: `source = test_index | stats count() ${suggestion}`,
+        input,
+        suggestion,
+        itemName: suggestion,
+      };
+    }) as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests fields after stats count() by', async () => {
+    const input = 'source = test_index | stats count() by ';
+    const expected = [
+      {
+        label: 'source = test_index | stats count() by span(',
+        input,
+        suggestion: 'span(',
+        itemName: 'span(',
+      },
+      {
+        label: 'source = test_index | stats count() by str_field',
+        input,
+        suggestion: 'str_field',
+        itemName: 'str_field',
+      },
+      {
+        label: 'source = test_index | stats count() by bool_field',
+        input,
+        suggestion: 'bool_field',
+        itemName: 'bool_field',
+      },
+      {
+        label: 'source = test_index | stats count() by num_field',
+        input,
+        suggestion: 'num_field',
+        itemName: 'num_field',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests | after stats count() by str_field', async () => {
+    const input = 'source = test_index | stats count() by str_field ';
+    const expected = [
+      {
+        label: 'source = test_index | stats count() by str_field |',
+        input,
+        suggestion: '|',
+        itemName: '|',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests num_field after stats sum(', async () => {
+    const input = 'source = test_index | stats sum( ';
+    const expected = [
+      {
+        label: 'source = test_index | stats sum( num_field',
+        input,
+        suggestion: 'num_field',
+        itemName: 'num_field',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests by after stats sum( num_field )', async () => {
+    const input = 'source = test_index | stats sum( num_field ) ';
+    const expected = [
+      {
+        label: 'source = test_index | stats sum( num_field ) ,',
+        input,
+        suggestion: ',',
+        itemName: ',',
+      },
+      {
+        label: 'source = test_index | stats sum( num_field ) |',
+        input,
+        suggestion: '|',
+        itemName: '|',
+      },
+      {
+        label: 'source = test_index | stats sum( num_field ) by',
+        input,
+        suggestion: 'by',
+        itemName: 'by',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests fields after stats sum( num_field ) by', async () => {
+    const input = 'source = test_index | stats sum( num_field ) by ';
+    const expected = [
+      {
+        label: 'source = test_index | stats sum( num_field ) by span(',
+        input,
+        suggestion: 'span(',
+        itemName: 'span(',
+      },
+      {
+        label: 'source = test_index | stats sum( num_field ) by str_field',
+        input,
+        suggestion: 'str_field',
+        itemName: 'str_field',
+      },
+      {
+        label: 'source = test_index | stats sum( num_field ) by bool_field',
+        input,
+        suggestion: 'bool_field',
+        itemName: 'bool_field',
+      },
+      {
+        label: 'source = test_index | stats sum( num_field ) by num_field',
+        input,
+        suggestion: 'num_field',
+        itemName: 'num_field',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('continues to suggest fields after FiE', async () => {
+    const input = 'source = test_index | FiE';
+    const expected = [
+      {
+        label: 'source = test_index | fields',
+        input,
+        suggestion: 'lds',
+        itemName: 'fields',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests fields after fields', async () => {
+    const input = 'source = test_index | fields ';
+    const expected = [
+      {
+        label: 'source = test_index | fields +',
+        input,
+        suggestion: '+',
+        itemName: '+',
+      },
+      {
+        label: 'source = test_index | fields -',
+        input,
+        suggestion: '-',
+        itemName: '-',
+      },
+      {
+        label: 'source = test_index | fields str_field',
+        input,
+        suggestion: 'str_field',
+        itemName: 'str_field',
+      },
+      {
+        label: 'source = test_index | fields bool_field',
+        input,
+        suggestion: 'bool_field',
+        itemName: 'bool_field',
+      },
+      {
+        label: 'source = test_index | fields num_field',
+        input,
+        suggestion: 'num_field',
+        itemName: 'num_field',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests , after fields str_field', async () => {
+    const input = 'source = test_index | fields str_field ';
+    const expected = [
+      {
+        label: 'source = test_index | fields str_field ,',
+        input,
+        suggestion: ',',
+        itemName: ',',
+      },
+      {
+        label: 'source = test_index | fields str_field |',
+        input,
+        suggestion: '|',
+        itemName: '|',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests fields after fields str_field, ', async () => {
+    const input = 'source = test_index | fields str_field , ';
+    const expected = [
+      {
+        label: 'source = test_index | fields str_field , str_field',
+        input,
+        suggestion: 'str_field',
+        itemName: 'str_field',
+      },
+      {
+        label: 'source = test_index | fields str_field , bool_field',
+        input,
+        suggestion: 'bool_field',
+        itemName: 'bool_field',
+      },
+      {
+        label: 'source = test_index | fields str_field , num_field',
+        input,
+        suggestion: 'num_field',
+        itemName: 'num_field',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('continues to suggest dedup after DE', async () => {
+    const input = 'source = test_index | DE';
+    const expected = [
+      {
+        label: 'source = test_index | dedup',
+        input,
+        suggestion: 'dup',
+        itemName: 'dedup',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+
+  it('suggests fields after dedup', async () => {
+    const input = 'source = test_index | dedup ';
+    const expected = [
+      {
+        label: 'source = test_index | dedup str_field',
+        input,
+        suggestion: 'str_field',
+        itemName: 'str_field',
+      },
+      {
+        label: 'source = test_index | dedup bool_field',
+        input,
+        suggestion: 'bool_field',
+        itemName: 'bool_field',
+      },
+      {
+        label: 'source = test_index | dedup num_field',
+        input,
+        suggestion: 'num_field',
+        itemName: 'num_field',
+      },
+    ] as AutocompleteItem[];
+    const suggestion = await parseGetSuggestions('', input, dslService);
+    expect(suggestion).toStrictEqual(expected);
+  });
+});
diff --git a/public/components/common/search/autocomplete.tsx b/public/components/common/search/autocomplete.tsx
new file mode 100644
index 0000000000..a8c4007a74
--- /dev/null
+++ b/public/components/common/search/autocomplete.tsx
@@ -0,0 +1,221 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import './search.scss';
+import $ from 'jquery';
+import React, { useEffect, useMemo, useState } from 'react';
+import { AutocompleteState, createAutocomplete } from '@algolia/autocomplete-core';
+import { EuiFieldText, EuiTextArea } from '@elastic/eui';
+import DSLService from 'public/services/requests/dsl';
+import { IQueryBarProps } from './search';
+import { uiSettingsService } from '../../../../common/utils';
+import { AutocompleteItem } from '../../../../common/constants/autocomplete';
+
+interface AutocompleteProps extends IQueryBarProps {
+  getSuggestions: (
+    base: string,
+    query: string,
+    dslService: DSLService,
+    possibleCommands: Array<{ label: string }>
+  ) => Promise<AutocompleteItem[]>;
+  onItemSelect: any;
+  isDisabled?: boolean;
+  baseQuery: string;
+  tabId: string;
+  placeholder?: string;
+  possibleCommands?: Array<{ label: string }>;
+  append?: any;
+}
+
+export const Autocomplete = (props: AutocompleteProps) => {
+  const {
+    query,
+    tempQuery,
+    handleQueryChange,
+    handleQuerySearch,
+    dslService,
+    getSuggestions,
+    onItemSelect,
+    isDisabled,
+    baseQuery,
+    tabId = '',
+    placeholder = 'Enter PPL query',
+    possibleCommands,
+    append,
+  } = props;
+
+  const [autocompleteState, setAutocompleteState] = useState<AutocompleteState<AutocompleteItem>>({
+    collections: [],
+    completion: null,
+    context: {},
+    isOpen: false,
+    query: tempQuery,
+    activeItemId: null,
+    status: 'idle',
+  });
+
+  const appLogEvents = tabId.startsWith('application-analytics-tab');
+  const panelsFilter = tabId === 'panels-filter';
+
+  useEffect(() => {
+    const searchBar = document.getElementById('autocomplete-textarea');
+
+    searchBar?.addEventListener('keydown', (e) => {
+      const keyCode = e.which || e.keyCode;
+      if (keyCode === 13 && e.shiftKey) {
+        handleQuerySearch();
+      }
+      return () => {
+        $('#autocomplete-textarea').unbind('keydown');
+      };
+    });
+  }, []);
+
+  const depArray =
+    appLogEvents || panelsFilter
+      ? [baseQuery, query, dslService, autocompleteState]
+      : [baseQuery, query, dslService];
+
+  const autocomplete = useMemo(() => {
+    return createAutocomplete<
+      AutocompleteItem,
+      React.BaseSyntheticEvent,
+      React.MouseEvent,
+      React.KeyboardEvent
+    >({
+      openOnFocus: true,
+      defaultActiveItemId: 0,
+      onStateChange: ({ state }) => {
+        setAutocompleteState({
+          ...state,
+        });
+        handleQueryChange(state.query);
+      },
+      initialState: {
+        ...autocompleteState,
+        query: query || '',
+      },
+      getSources() {
+        return [
+          {
+            sourceId: 'querySuggestions',
+            // eslint-disable-next-line no-shadow
+            async getItems({ query }) {
+              const suggestions = await getSuggestions(
+                baseQuery,
+                query,
+                dslService,
+                possibleCommands
+              );
+              return suggestions;
+            },
+            onSelect: ({ setQuery, item }) => {
+              onItemSelect(
+                {
+                  setQuery,
+                  item,
+                },
+                dslService
+              );
+              $('#autocomplete-textarea').blur();
+              $('#autocomplete-textarea').focus();
+            },
+          },
+        ];
+      },
+    });
+  }, depArray);
+
+  const TextArea = panelsFilter ? EuiFieldText : EuiTextArea;
+
+  return (
+    <div className="aa-Autocomplete" {...autocomplete.getRootProps({ id: 'autocomplete-root' })}>
+      <TextArea
+        {...autocomplete.getInputProps({
+          id: 'autocomplete-textarea',
+          'data-test-subj': 'searchAutocompleteTextArea',
+          placeholder,
+          inputElement: null,
+        })}
+        {...(panelsFilter && { append, fullWidth: true })}
+        disabled={isDisabled}
+      />
+      {autocompleteState.isOpen && (
+        <div
+          className={[
+            'aa-Panel',
+            'aa-Panel--desktop',
+            autocompleteState.status === 'stalled' && 'aa-Panel--stalled',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+          {...autocomplete.getPanelProps({})}
+        >
+          {autocompleteState.collections.map((collection, index) => {
+            const { source, items } = collection;
+            const filteredItems = items.filter((item, itemIndex) => {
+              return items.findIndex((i) => i.itemName === item.itemName) === itemIndex;
+            });
+            return (
+              <div
+                key={`scrollable-${index}`}
+                className={`aa-PanelLayout aa-Panel--scrollable ${
+                  uiSettingsService.get('theme:darkMode') ? 'aa-Panel--scrollable-dark' : ''
+                }`}
+              >
+                <div key={`source-${index}`} className="aa-Source">
+                  {items.length > 0 && (
+                    <ul className="aa-List" {...autocomplete.getListProps()}>
+                      {filteredItems.map((item) => {
+                        const fullWord = item.itemName;
+                        return (
+                          <li
+                            key={item.__autocomplete_id}
+                            className={`aa-Item ${
+                              uiSettingsService.get('theme:darkMode') ? 'aa-Item-dark' : ''
+                            }`}
+                            {...autocomplete.getItemProps({
+                              item,
+                              source,
+                            })}
+                          >
+                            <div className="aa-ItemWrapper">
+                              <div className="aa-ItemContent">
+                                <div className="aa-ItemContentBody">
+                                  <div>
+                                    <span>
+                                      <b>{fullWord.slice(0, -item.suggestion.length)}</b>
+                                      {item.suggestion}
+                                    </span>
+                                  </div>
+                                  {/* <div
+                                    className="aa-ItemContentTitle"
+                                    // eslint-disable-next-line react/no-danger
+                                    dangerouslySetInnerHTML={{
+                                      __html: `<div>
+                                        <span><b>${fullWord.slice(0, -item.suggestion.length)}</b>${
+                                        item.suggestion
+                                      }</span>
+                                      </div>`,
+                                    }}
+                                  /> */}
+                                </div>
+                              </div>
+                            </div>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/public/components/common/search/autocomplete_logic.ts b/public/components/common/search/autocomplete_logic.ts
new file mode 100644
index 0000000000..347d0e3b37
--- /dev/null
+++ b/public/components/common/search/autocomplete_logic.ts
@@ -0,0 +1,378 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import DSLService from 'public/services/requests/dsl';
+import { isEmpty } from 'lodash';
+import { getDataValueQuery } from './queries/data_queries';
+import {
+  statsCommands,
+  numberTypes,
+  pipeCommands,
+  DataItem,
+  FieldItem,
+  IndexItem,
+  AutocompleteItem,
+  regexForIndex,
+  regexForSuggestion,
+  PIPE_AFTER_WHERE,
+  DATA_AFTER_WHERE_EQUAL,
+  EMPTY_REGEX,
+  EQUAL_AFTER_WHERE_FIELD,
+  MATCH_FIELD_AFTER_WHERE,
+  COMMA_AFTER_FIELD,
+  DATA_AFTER_COMMA,
+  CLOSE_AFTER_DATA,
+  PIPE_AFTER_MATCH,
+  FIELD_IN_FIELD_LOOP,
+  COMMA_PIPE_AFTER_FIELD,
+  PIPE_AFTER_KEEP_EMPTY,
+  PIPE_AFTER_CONSECUTIVE,
+  EQUAL_AFTER_EVAL_FIELD,
+  FIELD_AFTER_EVAL_EQUAL,
+  MATH_AFTER_FIELD,
+  PIPE_MATH_AFTER_EXPRESSIONS,
+  PLUS_MINUS_FIELD_AFTER_FIELDS,
+  FIELD_AFTER_PLUS_MINUS,
+  COMMA_PIPE_AFTER_FIELDS,
+  FIELD_IN_FIELDS_LOOP,
+  RARE_TOP_FIELD_LOOP,
+  COMMA_PIPE_BY_AFTER_FIELD,
+  FIELD_AFTER_BY,
+  PIPE_AFTER_GROUP_BY,
+  AS_AFTER_FIELD,
+  COMMA_PIPE_AFTER_RENAME_FIELD,
+  FIELD_AFTER_COMMA,
+  PIPE_AFTER_HEAD,
+  PLUS_MINUS_FIELD_AFTER_SORT,
+  FIELD_AFTER_PLUS_MINUS_SORT,
+  COMMA_PIPE_AFTER_SORT_FIELD,
+  PLUS_MINUS_FIELD_IN_FIELDS_LOOP,
+  FIELD_AFTER_COMMAND,
+  FIELD_SPAN_AFTER_GROUP_BY,
+  NUM_FIELD_AFTER_AGGREGATION,
+  CLOSE_AFTER_FIELD,
+  COMMA_PIPE_BY_AFTER_AGGREGATION,
+  PIPE_AFTER_STATS_GROUP_BY,
+  AGGREGATION_FOR_STATS,
+  FIELD_AFTER_SPAN,
+  CLOSE_AFTER_SPAN,
+  PIPE_AFTER_SPAN,
+  STRING_FIELD_AFTER_PARSE,
+  PIPE_AFTER_PARSE,
+  EQUAL_AFTER_SOURCE,
+  INDEX_AFTER_EQUAL,
+  PIPE_COMMA_AFTER_INDEX,
+  MORE_INDEX_AFTER_COMMA,
+} from '../../../../common/constants/autocomplete';
+
+let currIndices: string[] = [];
+let currField: string = '';
+let currFieldType: string = '';
+
+const indexList: string[] = [];
+const fieldList: string[] = [];
+const fieldsFromBackend: FieldItem[] = [];
+const indicesFromBackend: IndexItem[] = [];
+const dataValuesFromBackend: DataItem[] = [];
+
+const getIndices = async (dslService: DSLService): Promise<void> => {
+  if (indicesFromBackend.length === 0) {
+    const indices = (await dslService.fetchIndices()).filter(
+      ({ index }: { index: any }) => !index.startsWith('.')
+    );
+    for (let i = 0; i < indices.length; i++) {
+      indicesFromBackend.push({
+        label: indices[i].index,
+      });
+      indexList.push(indices[i].index);
+    }
+  }
+};
+
+const getFields = async (dslService: DSLService): Promise<void> => {
+  if (!isEmpty(currIndices)) {
+    fieldsFromBackend.length = 0;
+    for (let i = 0; i < currIndices.length; i++) {
+      const index = currIndices[i];
+      const res = await dslService.fetchFields(index);
+      if (!res) {
+        return;
+      }
+      const resFieldList = Object.keys(res?.[index].mappings.properties);
+      for (let j = 0; j < resFieldList.length; j++) {
+        const element = resFieldList[j];
+        if (
+          res?.[index].mappings.properties[element].properties ||
+          res?.[index].mappings.properties[element].fields
+        ) {
+          fieldsFromBackend.push({ label: element, type: 'string' });
+        } else if (res?.[index].mappings.properties[element].type === 'keyword') {
+          fieldsFromBackend.push({ label: element, type: 'string' });
+        } else {
+          fieldsFromBackend.push({
+            label: element,
+            type: res?.[index].mappings.properties[element].type,
+          });
+        }
+        fieldList.push(element);
+      }
+    }
+  }
+};
+
+const getDataValues = async (
+  indices: string[],
+  field: string,
+  fieldType: string,
+  dslService: DSLService
+): Promise<DataItem[]> => {
+  for (let i = 0; i < indices.length; i++) {
+    const index = indices[i];
+    const res = (await dslService.fetch(getDataValueQuery(index, field)))?.aggregations?.top_tags
+      ?.buckets;
+    if (isEmpty(res)) {
+      continue;
+    }
+    dataValuesFromBackend.length = 0;
+    res.forEach((e: any) => {
+      if (fieldType === 'string') {
+        dataValuesFromBackend.push({ label: '"' + e.key + '"', doc_count: e.doc_count });
+      } else if (fieldType === 'boolean') {
+        if (e.key === 1) {
+          dataValuesFromBackend.push({ label: 'True', doc_count: e.doc_count });
+        } else {
+          dataValuesFromBackend.push({ label: 'False', doc_count: e.doc_count });
+        }
+      } else if (fieldType !== 'geo_point') {
+        dataValuesFromBackend.push({ label: String(e.key), doc_count: e.doc_count });
+      }
+    });
+    return dataValuesFromBackend;
+  }
+  return [];
+};
+
+export const onItemSelect = async (
+  { setQuery, item }: { setQuery: any; item: any },
+  dslService: DSLService
+) => {
+  if (fieldsFromBackend.length === 0 && indexList.includes(item.itemName)) {
+    currIndices = [item.itemName];
+    getFields(dslService);
+  }
+  setQuery(item.label + ' ');
+};
+
+// Function to create the array of objects to be suggested
+const fillSuggestions = (str: string, word: string, items: any): AutocompleteItem[] => {
+  const lowerWord = word.toLowerCase();
+  const suggestionList = [];
+  for (let i = 0; i < items.length; i++) {
+    suggestionList.push({
+      label: str.substring(0, str.lastIndexOf(word)) + items[i].label,
+      input: str,
+      suggestion: items[i].label.substring(word.length),
+      itemName: items[i].label,
+    });
+  }
+  return filterSuggestions(suggestionList, lowerWord);
+};
+
+// Function to filter out currently inputed suggestions
+const filterSuggestions = (suggestions: AutocompleteItem[], prefix: string) => {
+  return suggestions.filter(
+    ({ itemName }) =>
+      itemName.toLowerCase().startsWith(prefix) && prefix.localeCompare(itemName.toLowerCase())
+  );
+};
+
+export const parseForIndices = (query: string) => {
+  for (let i = 0; i < regexForIndex.length; i++) {
+    const groupArray = regexForIndex[i].exec(query);
+    if (groupArray) {
+      const afterEqual = query.substring(query.indexOf('=') + 1);
+      const noSpaces = afterEqual.replace(/\s/g, '');
+      return noSpaces.split(',');
+    }
+  }
+  return [];
+};
+
+const parseForNextSuggestion = (command: string) => {
+  for (let i = 0; i < regexForSuggestion.length; i++) {
+    const groupArray = regexForSuggestion[i].exec(command);
+    if (groupArray) {
+      return regexForSuggestion[i];
+    }
+  }
+};
+
+export const parseGetSuggestions = async (
+  base: string,
+  currQuery: string,
+  dslService: DSLService,
+  possibleCommands: Array<{ label: string }> = pipeCommands
+) => {
+  const fullQuery = base ? base + '| ' + currQuery : currQuery;
+  const splitSpaceQuery = fullQuery.split(' ');
+  const splitPipeQuery = fullQuery.split('|');
+
+  const lastWord = splitSpaceQuery[splitSpaceQuery.length - 1];
+  const lastCommand = splitPipeQuery[splitPipeQuery.length - 1];
+  const firstCommand = splitPipeQuery[0];
+
+  if (!base && isEmpty(indicesFromBackend)) {
+    await getIndices(dslService);
+  }
+
+  if (fullQuery.match(EMPTY_REGEX)) {
+    return fillSuggestions(currQuery, lastWord, [{ label: 'source' }]);
+  }
+
+  const next = parseForNextSuggestion(lastCommand);
+  if (next) {
+    switch (next) {
+      case AGGREGATION_FOR_STATS:
+        return fillSuggestions(currQuery, lastWord, statsCommands);
+      case AS_AFTER_FIELD:
+        return fillSuggestions(currQuery, lastWord, [{ label: 'as' }]);
+      case COMMA_PIPE_BY_AFTER_FIELD:
+      case COMMA_PIPE_BY_AFTER_AGGREGATION:
+        return fillSuggestions(currQuery, lastWord, [
+          { label: ',' },
+          { label: '|' },
+          { label: 'by' },
+        ]);
+      case COMMA_PIPE_AFTER_FIELDS:
+      case COMMA_PIPE_AFTER_RENAME_FIELD:
+      case COMMA_PIPE_AFTER_SORT_FIELD:
+        return fillSuggestions(currQuery, lastWord, [{ label: ',' }, { label: '|' }]);
+      case PIPE_COMMA_AFTER_INDEX:
+        return filterSuggestions(
+          [
+            { label: currQuery + '|', input: currQuery, suggestion: '|', itemName: '|' },
+            { label: currQuery.trim() + ',', input: currQuery, suggestion: ',', itemName: ',' },
+          ],
+          lastWord
+        );
+      case PLUS_MINUS_FIELD_AFTER_FIELDS:
+      case PLUS_MINUS_FIELD_AFTER_SORT:
+      case PLUS_MINUS_FIELD_IN_FIELDS_LOOP:
+        return fillSuggestions(currQuery, lastWord, [
+          { label: '+' },
+          { label: '-' },
+          ...fieldsFromBackend,
+        ]);
+      case PIPE_MATH_AFTER_EXPRESSIONS:
+        return fillSuggestions(currQuery, lastWord, [
+          { label: '|' },
+          { label: '+' },
+          { label: '-' },
+          { label: '*' },
+          { label: '/' },
+        ]);
+      case MATH_AFTER_FIELD:
+        return fillSuggestions(currQuery, lastWord, [
+          { label: '+' },
+          { label: '-' },
+          { label: '*' },
+          { label: '/' },
+        ]);
+      case COMMA_PIPE_AFTER_FIELD:
+        return fillSuggestions(currQuery, lastWord, [
+          { label: ',' },
+          { label: '|' },
+          { label: 'keepempty=true' },
+          { label: 'consecutive=true' },
+        ]);
+      case CLOSE_AFTER_DATA:
+      case CLOSE_AFTER_FIELD:
+      case CLOSE_AFTER_SPAN:
+        return fillSuggestions(currQuery, lastWord, [{ label: ')' }]);
+      case COMMA_AFTER_FIELD:
+        currField = COMMA_AFTER_FIELD.exec(lastCommand)![1];
+        currFieldType = fieldsFromBackend.find((field) => field.label === currField)?.type || '';
+        await getDataValues(currIndices, currField, currFieldType, dslService);
+        return fillSuggestions(currQuery, lastWord, [{ label: ',' }]);
+      case FIELD_AFTER_SPAN:
+        const matchArray = FIELD_AFTER_SPAN.exec(lastCommand);
+        const tempField = matchArray![matchArray!.length - 1];
+        if (fieldList.includes(tempField)) {
+          currField = tempField;
+          currFieldType = fieldsFromBackend.find((field) => field.label === currField)?.type || '';
+          await getDataValues(currIndices, currField, currFieldType, dslService);
+          return fillSuggestions(currQuery, lastWord, [{ label: ',' }]);
+        } else {
+          return fillSuggestions(currQuery, lastWord, fieldsFromBackend);
+        }
+      case FIELD_AFTER_COMMAND:
+      case FIELD_IN_FIELD_LOOP:
+      case FIELD_AFTER_EVAL_EQUAL:
+      case FIELD_AFTER_PLUS_MINUS:
+      case FIELD_IN_FIELDS_LOOP:
+      case RARE_TOP_FIELD_LOOP:
+      case FIELD_AFTER_BY:
+      case FIELD_AFTER_COMMA:
+      case FIELD_AFTER_PLUS_MINUS_SORT:
+        return fillSuggestions(currQuery, lastWord, fieldsFromBackend);
+      case FIELD_SPAN_AFTER_GROUP_BY:
+        return fillSuggestions(currQuery, lastWord, [{ label: 'span(' }, ...fieldsFromBackend]);
+      case NUM_FIELD_AFTER_AGGREGATION:
+        const numberFields = fieldsFromBackend.filter((field: { type: string }) =>
+          numberTypes.includes(field.type)
+        );
+        return fillSuggestions(currQuery, lastWord, numberFields);
+      case STRING_FIELD_AFTER_PARSE:
+        return fillSuggestions(
+          currQuery,
+          lastWord,
+          fieldsFromBackend.filter((field) => field.type === 'string')
+        );
+      case PIPE_AFTER_WHERE:
+      case PIPE_AFTER_MATCH:
+      case PIPE_AFTER_KEEP_EMPTY:
+      case PIPE_AFTER_CONSECUTIVE:
+      case PIPE_AFTER_GROUP_BY:
+      case PIPE_AFTER_HEAD:
+      case PIPE_AFTER_STATS_GROUP_BY:
+      case PIPE_AFTER_SPAN:
+      case PIPE_AFTER_PARSE:
+        return fillSuggestions(currQuery, lastWord, [{ label: '|' }]);
+      case DATA_AFTER_WHERE_EQUAL:
+      case DATA_AFTER_COMMA:
+        return fillSuggestions(currQuery, lastWord, dataValuesFromBackend);
+      case EQUAL_AFTER_WHERE_FIELD:
+      case EQUAL_AFTER_EVAL_FIELD:
+        currField = next.exec(lastCommand)![1];
+        currFieldType = fieldsFromBackend.find((field) => field.label === currField)?.type || '';
+        await getDataValues(currIndices, currField, currFieldType, dslService);
+        return fillSuggestions(currQuery, lastWord, [{ label: '=' }]);
+      case MATCH_FIELD_AFTER_WHERE:
+        return fillSuggestions(currQuery, lastWord, [{ label: 'match(' }, ...fieldsFromBackend]);
+      case EQUAL_AFTER_SOURCE:
+        return fillSuggestions(currQuery, lastWord, [{ label: '=' }]);
+      case INDEX_AFTER_EQUAL:
+        return fillSuggestions(currQuery, lastWord, indicesFromBackend);
+      case MORE_INDEX_AFTER_COMMA:
+        const trimmedIndices = indicesFromBackend.map((index) => {
+          return {
+            label: currQuery.substring(0, currQuery.lastIndexOf(lastWord)).trim() + index.label,
+            input: currQuery,
+            suggestion: index.label.substring(lastWord.length),
+            itemName: index.label,
+          };
+        });
+        return filterSuggestions(trimmedIndices, lastWord);
+      case EMPTY_REGEX:
+        currIndices = parseForIndices(firstCommand);
+        await getFields(dslService);
+        currField = '';
+        currFieldType = '';
+        return fillSuggestions(currQuery, lastWord, possibleCommands);
+    }
+  }
+
+  return [];
+};
diff --git a/public/components/common/search/date_picker.tsx b/public/components/common/search/date_picker.tsx
new file mode 100644
index 0000000000..75087c9f13
--- /dev/null
+++ b/public/components/common/search/date_picker.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiSuperDatePicker } from '@elastic/eui';
+import { IDatePickerProps } from './search';
+import { uiSettingsService } from '../../../../common/utils';
+
+export function DatePicker(props: IDatePickerProps) {
+  const { startTime, endTime, handleTimePickerChange, handleTimeRangePickerRefresh } = props;
+
+  const handleTimeChange = (e: any) => handleTimePickerChange([e.start, e.end]);
+
+  return (
+    <EuiSuperDatePicker
+      data-test-subj="pplSearchDatePicker"
+      start={startTime}
+      end={endTime}
+      dateFormat={uiSettingsService.get('dateFormat')}
+      onTimeChange={handleTimeChange}
+      onRefresh={handleTimeRangePickerRefresh}
+      className="osdQueryBar__datePicker"
+    />
+  );
+}
diff --git a/public/components/common/search/queries/data_queries.ts b/public/components/common/search/queries/data_queries.ts
new file mode 100644
index 0000000000..69ee9dcf21
--- /dev/null
+++ b/public/components/common/search/queries/data_queries.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const getDataValueQuery = (index: string, field: string) => {
+  const query = {
+    index: index,
+    'size': 0,
+    'aggs': {
+      'top_tags': {
+        'terms': {
+          'field': field,
+        }
+      }
+    }
+  }
+  return query;
+}
diff --git a/public/components/common/search/request_handler.tsx b/public/components/common/search/request_handler.tsx
new file mode 100644
index 0000000000..e263f39dcf
--- /dev/null
+++ b/public/components/common/search/request_handler.tsx
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import _ from 'lodash';
+import { CoreStart } from '../../../../../../src/core/public';
+
+const DSL_ROUTE = '/api/dsl/search';
+
+export function handleDslRequest(http: CoreStart['http'], query) {
+  return http
+    .post(DSL_ROUTE, {
+      body: JSON.stringify(query),
+    })
+    .catch((error) => console.error(error));
+}
diff --git a/public/components/common/search/search.scss b/public/components/common/search/search.scss
new file mode 100644
index 0000000000..1b0666a6d1
--- /dev/null
+++ b/public/components/common/search/search.scss
@@ -0,0 +1,79 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.globalQueryBar {
+  margin: .5rem 0;
+  padding: .5rem;
+}
+.aa-Autocomplete {
+  width: 100%;
+  position: relative;
+  margin: 4px;
+  margin-left: 8px;
+  --aa-search-input-height: 38px;
+  --aa-panel-border-color-rgb: rgba(227,230,238,255);
+  --aa-input-background-color-rbg: rgba(250,251,253,255);
+}
+.styling {
+  font-weight: bold;
+}
+
+#servicesEntities {
+  position: relative;
+  z-index: 0;
+}
+
+#autocomplete-textarea {
+  width: 100%;
+  outline: none;
+  min-height: 48px;
+  max-width: unset;
+  height: 45px;
+  resize: vertical;
+  font-size: 16px;
+  padding-right: 40px;
+}
+
+.aa-Panel {
+  width: 100%;
+  z-index: 2500;
+}
+
+.aa-Panel--scrollable-dark {
+  background-color: #1D1E24;
+  border: 2px groove #383444;
+}
+
+.aa-Item-dark {
+  color: #DFE5EF;
+}
+
+.event-date-picker {
+  max-width: 35vw;
+}
+
+.ppl-link {
+  border: unset;
+  position: absolute;
+  top: 14px;
+  right: 15px;
+  background-color: transparent;
+}
+.ppl-link-light {
+  color: #006BB4;
+}
+
+.ppl-link-dark {
+  color: #1BA9F5;
+}
+
+.base-query-popover {
+  border: unset;
+  font-size: 17px;
+  position: absolute;
+  top: 20px;
+  left: 8px;
+  background-color: transparent;
+}
diff --git a/public/components/common/search/search.test.tsx b/public/components/common/search/search.test.tsx
new file mode 100644
index 0000000000..f204369c41
--- /dev/null
+++ b/public/components/common/search/search.test.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { Search } from './search';
+
+describe('Search bar', () => {
+  it('handles query change', () => {
+    const query = 'rawQuery';
+    const tempQuery = 'rawQuery';
+    const handleQueryChange = jest.fn();
+    const handleQuerySearch = jest.fn();
+    const dslService = jest.fn();
+    const handleTimePickerChange = jest.fn();
+    const selectedPanelName = jest.fn();
+    const selectedCustomPanelOptions = jest.fn();
+    const setSelectedPanelName = jest.fn();
+    const setSelectedCustomPanelOptions = jest.fn();
+    const handleSavingObject = jest.fn();
+    const isPanelTextFieldInvalid = jest.fn();
+    const showSavePanelOptionsList = jest.fn();
+    const handleTimeRangePickerRefresh = jest.fn();
+    const savedObjects = jest.fn();
+    const getFullSuggestions = jest.fn();
+    const onItemSelect = jest.fn();
+    const dateRange = ['now-15m', 'now'];
+    const liveTailButton = jest.fn();
+    const isLiveTailPopoverOpen = jest.fn();
+    const closeLiveTailPopover = jest.fn();
+    const popoverItems = jest.fn();
+    const isLiveTailOn = jest.fn();
+    const countDistribution = jest.fn();
+    const setMetricLabel = jest.fn();
+    const utils = render(
+      <Search
+        key="search-component"
+        query={query}
+        tempQuery={tempQuery}
+        handleQueryChange={handleQueryChange}
+        handleQuerySearch={handleQuerySearch}
+        dslService={dslService}
+        startTime={dateRange[0]}
+        endTime={dateRange[1]}
+        handleTimePickerChange={handleTimePickerChange}
+        selectedPanelName={selectedPanelName}
+        selectedCustomPanelOptions={selectedCustomPanelOptions}
+        setSelectedPanelName={setSelectedPanelName}
+        setSelectedCustomPanelOptions={setSelectedCustomPanelOptions}
+        handleSavingObject={handleSavingObject}
+        isPanelTextFieldInvalid={isPanelTextFieldInvalid}
+        savedObjects={savedObjects}
+        showSavePanelOptionsList={showSavePanelOptionsList}
+        handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
+        getSuggestions={getFullSuggestions}
+        onItemSelect={onItemSelect}
+        liveTailButton={liveTailButton}
+        isLiveTailPopoverOpen={isLiveTailPopoverOpen}
+        closeLiveTailPopover={closeLiveTailPopover}
+        popoverItems={popoverItems}
+        isLiveTailOn={isLiveTailOn}
+        countDistribution={countDistribution}
+        curVisId={'line'} 
+        spanValue={false}
+        setSubType={'metric'}
+        setMetricMeasure={'hours (h)'}
+        setMetricLabel={setMetricLabel}
+      />
+    );
+
+    const searchBar = utils.getByPlaceholderText('Enter PPL query');
+    fireEvent.change(searchBar, { target: { value: 'new query' } });
+    expect(handleQueryChange).toBeCalledWith('new query');
+  });
+});
diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
new file mode 100644
index 0000000000..f6d30725ad
--- /dev/null
+++ b/public/components/common/search/search.tsx
@@ -0,0 +1,279 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './search.scss';
+
+import React, { useState } from 'react';
+import {
+  EuiFlexGroup,
+  EuiButton,
+  EuiFlexItem,
+  EuiPopover,
+  EuiButtonEmpty,
+  EuiPopoverFooter,
+  EuiBadge,
+  EuiContextMenuPanel,
+  EuiToolTip,
+  EuiCallOut
+} from '@elastic/eui';
+import { DatePicker } from './date_picker';
+import '@algolia/autocomplete-theme-classic';
+import { Autocomplete } from './autocomplete';
+import { SavePanel } from '../../event_analytics/explorer/save_panel';
+import { PPLReferenceFlyout } from '../helpers';
+import { uiSettingsService } from '../../../../common/utils';
+import { APP_ANALYTICS_TAB_ID_REGEX } from '../../../../common/constants/explorer';
+import { LiveTailButton, StopLiveButton } from '../live_tail/live_tail_button';
+export interface IQueryBarProps {
+  query: string;
+  tempQuery: string;
+  handleQueryChange: (query: string) => void;
+  handleQuerySearch: () => void;
+  dslService: any;
+}
+
+export interface IDatePickerProps {
+  startTime: string;
+  endTime: string;
+  setStartTime: () => void;
+  setEndTime: () => void;
+  setTimeRange: () => void;
+  setIsOutputStale: () => void;
+  handleTimePickerChange: (timeRange: string[]) => any;
+  handleTimeRangePickerRefresh: () => any;
+}
+
+export const Search = (props: any) => {
+  const {
+    query,
+    tempQuery,
+    handleQueryChange,
+    handleQuerySearch,
+    handleTimePickerChange,
+    dslService,
+    startTime,
+    endTime,
+    setStartTime,
+    setEndTime,
+    setIsOutputStale,
+    selectedPanelName,
+    selectedCustomPanelOptions,
+    setSelectedPanelName,
+    setSelectedCustomPanelOptions,
+    handleSavingObject,
+    isPanelTextFieldInvalid,
+    savedObjects,
+    showSavePanelOptionsList,
+    showSaveButton = true,
+    handleTimeRangePickerRefresh,
+    liveTailButton,
+    isLiveTailPopoverOpen,
+    closeLiveTailPopover,
+    popoverItems,
+    isLiveTailOn,
+    selectedSubTabId,
+    searchBarConfigs = {},
+    getSuggestions,
+    onItemSelect,
+    tabId = '',
+    baseQuery = '',
+    stopLive,
+    setIsLiveTailPopoverOpen,
+    liveTailName,
+    searchError = null,
+    curVisId,
+    spanValue,
+    setSubType,
+    metricMeasure,
+    setMetricMeasure,
+    setMetricLabel,
+    metricChecked,
+  } = props;
+  
+  const appLogEvents = tabId.match(APP_ANALYTICS_TAB_ID_REGEX);
+  const [isSavePanelOpen, setIsSavePanelOpen] = useState(false);
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+
+  const closeFlyout = () => {
+    setIsFlyoutVisible(false);
+  };
+
+  const showFlyout = () => {
+    setIsFlyoutVisible(true);
+  };
+
+  let flyout;
+  if (isFlyoutVisible) {
+    flyout = <PPLReferenceFlyout module="explorer" closeFlyout={closeFlyout} />;
+  }
+
+  const Savebutton = (
+    <EuiButton
+      iconSide="right"
+      onClick={() => {
+        setIsSavePanelOpen((staleState) => {
+          return !staleState;
+        });
+      }}
+      data-test-subj="eventExplorer__saveManagementPopover"
+      iconType="arrowDown"
+    >
+      Save
+    </EuiButton>
+  );
+
+  const liveButton = (
+    <LiveTailButton
+      isLiveTailOn={isLiveTailOn}
+      setIsLiveTailPopoverOpen={setIsLiveTailPopoverOpen}
+      liveTailName={liveTailName}
+      isLiveTailPopoverOpen={isLiveTailPopoverOpen}
+      dataTestSubj="eventLiveTail"
+    />
+  );
+
+  return (
+    <div className="globalQueryBar">
+      <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart">
+        {appLogEvents && (
+          <EuiFlexItem style={{ minWidth: 110 }} grow={false}>
+            <EuiToolTip position="top" content={baseQuery}>
+              <EuiBadge className="base-query-popover" color="hollow">
+                Base Query
+              </EuiBadge>
+            </EuiToolTip>
+          </EuiFlexItem>
+        )}
+        <EuiFlexItem key="search-bar" className="search-area">
+          <Autocomplete
+            key={'autocomplete-search-bar'}
+            query={query}
+            tempQuery={tempQuery}
+            baseQuery={baseQuery}
+            handleQueryChange={handleQueryChange}
+            handleQuerySearch={handleQuerySearch}
+            dslService={dslService}
+            getSuggestions={getSuggestions}
+            onItemSelect={onItemSelect}
+            tabId={tabId}
+          />
+          <EuiBadge
+            className={`ppl-link ${
+              uiSettingsService.get('theme:darkMode') ? 'ppl-link-dark' : 'ppl-link-light'
+            }`}
+            color="hollow"
+            onClick={() => showFlyout()}
+            onClickAriaLabel={'pplLinkShowFlyout'}
+          >
+            PPL
+          </EuiBadge>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} />
+        <EuiFlexItem className="euiFlexItem--flexGrowZero event-date-picker" grow={false}>
+          {!isLiveTailOn && (
+            <DatePicker
+              startTime={startTime}
+              endTime={endTime}
+              setStartTime={setStartTime}
+              setEndTime={setEndTime}
+              setIsOutputStale={setIsOutputStale}
+              liveStreamChecked={props.liveStreamChecked}
+              onLiveStreamChange={props.onLiveStreamChange}
+              handleTimePickerChange={(timeRange: string[]) => handleTimePickerChange(timeRange)}
+              handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
+            />
+          )}
+        </EuiFlexItem>
+        {showSaveButton && !showSavePanelOptionsList && (
+          <EuiFlexItem className="euiFlexItem--flexGrowZero live-tail">
+            <EuiPopover
+              panelPaddingSize="none"
+              button={liveButton}
+              isOpen={isLiveTailPopoverOpen}
+              closePopover={closeLiveTailPopover}
+            >
+              <EuiContextMenuPanel items={popoverItems} />
+            </EuiPopover>
+          </EuiFlexItem>
+        )}
+        {isLiveTailOn && (
+          <EuiFlexItem grow={false}>
+            <StopLiveButton StopLive={stopLive} dataTestSubj="eventLiveTail__off" />
+          </EuiFlexItem>
+        )}
+        {showSaveButton && searchBarConfigs[selectedSubTabId]?.showSaveButton && (
+          <>
+            <EuiFlexItem key={'search-save-'} className="euiFlexItem--flexGrowZero">
+              <EuiPopover
+                button={Savebutton}
+                isOpen={isSavePanelOpen}
+                closePopover={() => setIsSavePanelOpen(false)}
+              >
+                <SavePanel
+                  selectedOptions={selectedCustomPanelOptions}
+                  handleNameChange={setSelectedPanelName}
+                  handleOptionChange={setSelectedCustomPanelOptions}
+                  savedObjects={savedObjects}
+                  isTextFieldInvalid={isPanelTextFieldInvalid}
+                  savePanelName={selectedPanelName}
+                  showOptionList={
+                    showSavePanelOptionsList &&
+                    searchBarConfigs[selectedSubTabId]?.showSavePanelOptionsList
+                    
+                  }
+                  curVisId={curVisId}
+                  spanValue={spanValue}
+                  setSubType={setSubType}
+                  metricMeasure={metricMeasure}
+                  setMetricMeasure={setMetricMeasure}
+                  setMetricLabel={setMetricLabel}
+                  metricChecked={metricChecked}
+                />
+                <EuiPopoverFooter>
+                  <EuiFlexGroup justifyContent="flexEnd">
+                    <EuiFlexItem grow={false}>
+                      <EuiButtonEmpty
+                        size="s"
+                        onClick={() => setIsSavePanelOpen(false)}
+                        data-test-subj="eventExplorer__querySaveCancel"
+                      >
+                        Cancel
+                      </EuiButtonEmpty>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiButton
+                        size="s"
+                        fill
+                        onClick={() => {
+                          handleSavingObject();
+                          setIsSavePanelOpen(false);
+                        }}
+                        data-test-subj="eventExplorer__querySaveConfirm"
+                      >
+                        Save
+                      </EuiButton>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiPopoverFooter>
+              </EuiPopover>
+            </EuiFlexItem>
+          </>
+        )}
+      </EuiFlexGroup>
+      { searchError && searchError.error && (
+        <EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="flexStart">
+          <EuiFlexItem>
+            <EuiCallOut title={JSON.parse(searchError.message).error.reason} color="danger" iconType="alert">
+              <p>
+                {JSON.parse(searchError.message).error.details}
+              </p>
+            </EuiCallOut>
+          </EuiFlexItem>
+        </EuiFlexGroup>)
+      }
+      {flyout}
+    </div>
+  );
+};
diff --git a/public/components/common/search/searchindex.tsx b/public/components/common/search/searchindex.tsx
new file mode 100644
index 0000000000..0a7fe44606
--- /dev/null
+++ b/public/components/common/search/searchindex.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiComboBox } from '@elastic/eui';
+import React, { useState, useEffect, memo } from 'react';
+
+
+export const IndexPicker = memo(function indexDropdown(props: any) {
+  return <SearchIndex {...props} />;
+});
+
+interface Fetch {
+  dslService: any;
+  query: any;
+  handleQueryChange: (query: string, index: string)  => void;
+}
+
+export function SearchIndex(options: Fetch) {
+
+  const [indicesFromBackend, setindicesFromBackend] = useState([]);
+
+  // fetch indices from backend
+  const getIndices = async (dslService: any) => {
+    if (indicesFromBackend.length === 0) {
+      const indices = (await dslService.fetchIndices()).filter(
+        ({ index }) => !index.startsWith('.')
+      );
+      for (let i = 0; i < indices.length; i++) {
+        indicesFromBackend.push({
+          label: indices[i].index,
+        });
+      }
+    }
+  };
+
+  useEffect(() => {
+    getIndices(options.dslService);
+  }, []);
+
+  const [selectedOptions, setSelected] = useState(
+     []
+  );
+
+  // handle Index Change
+  const onChange = (selectedOptions) => {
+    options.handleQueryChange(options.query, selectedOptions);
+    setSelected(selectedOptions);
+  };
+
+  return (
+    <EuiComboBox
+      placeholder="Select one or more index"
+      options={indicesFromBackend}
+      selectedOptions={selectedOptions}
+      onChange={(e) => onChange(e)}
+    />
+  );
+}
diff --git a/public/components/common/side_nav.tsx b/public/components/common/side_nav.tsx
new file mode 100644
index 0000000000..cf6f467146
--- /dev/null
+++ b/public/components/common/side_nav.tsx
@@ -0,0 +1,145 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPage,
+  EuiPageBody,
+  EuiPageSideBar,
+  EuiSideNav,
+  EuiSideNavItemType,
+  EuiSwitch,
+} from '@elastic/eui';
+import React from 'react';
+import { useState } from 'react';
+import { toMountPoint } from '../../../../../src/plugins/opensearch_dashboards_react/public';
+import { uiSettingsService } from '../../../common/utils';
+
+export function ObservabilitySideBar(props: { children: React.ReactNode }) {
+  // set items.isSelected based on location.hash passed in
+  // tries to find an item where href is a prefix of the hash
+  // if none will try to find an item where the hash is a prefix of href
+  function setIsSelected(
+    items: EuiSideNavItemType<React.ReactNode>[],
+    hash: string,
+    initial = true,
+    reverse = false
+  ): boolean {
+    // Default page is Events Analytics
+    // But it is kept as second option in side nav
+    if (hash === '#/') {
+      items[0].items[2].isSelected = true;
+      return true;
+    }
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.href && ((reverse && item.href.startsWith(hash)) || hash.startsWith(item.href))) {
+        item.isSelected = true;
+        return true;
+      }
+      if (item.items?.length && setIsSelected(item.items, hash, false, reverse)) return true;
+    }
+    return initial && setIsSelected(items, hash, false, !reverse);
+  }
+
+  const items = [
+    {
+      name: 'Observability',
+      id: 0,
+      items: [
+        {
+          name: 'Application analytics',
+          id: 1,
+          href: '#/application_analytics',
+        },
+        {
+          name: 'Trace analytics',
+          id: 2,
+          href: '#/trace_analytics/home',
+          items: [
+            {
+              name: 'Traces',
+              id: 2.1,
+              href: '#/trace_analytics/traces',
+            },
+            {
+              name: 'Services',
+              id: 2.2,
+              href: '#/trace_analytics/services',
+            },
+          ],
+        },
+        {
+          name: 'Event analytics',
+          id: 3,
+          href: '#/event_analytics',
+        },
+        {
+          name: 'Metrics analytics',
+          id: 4,
+          href: '#/metrics_analytics/',
+        },
+        {
+          name: 'Operational panels',
+          id: 5,
+          href: '#/operational_panels/',
+        },
+        {
+          name: 'Notebooks',
+          id: 6,
+          href: '#/notebooks',
+        },
+      ],
+    },
+  ];
+  setIsSelected(items, location.hash);
+  const [isDarkMode, setIsDarkMode] = useState(uiSettingsService.get('theme:darkMode'));
+
+  return (
+    <EuiPage>
+      <EuiPageSideBar>
+        <EuiFlexGroup
+          direction="column"
+          justifyContent="spaceBetween"
+          style={{ height: '100%' }}
+          gutterSize="none"
+        >
+          <EuiFlexItem>
+            <EuiSideNav items={items} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false} style={{ marginBottom: 20 }}>
+            <EuiSwitch
+              label="Dark mode"
+              checked={isDarkMode}
+              onChange={() => {
+                uiSettingsService.set('theme:darkMode', !isDarkMode).then((resp) => {
+                  setIsDarkMode(!isDarkMode);
+                  uiSettingsService.addToast({
+                    title: 'Theme setting changes require you to reload the page to take effect.',
+                    text: toMountPoint(
+                      <>
+                        <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+                          <EuiFlexItem grow={false}>
+                            <EuiButton size="s" onClick={() => window.location.reload()}>
+                              Reload page
+                            </EuiButton>
+                          </EuiFlexItem>
+                        </EuiFlexGroup>
+                      </>
+                    ),
+                    color: 'success',
+                  });
+                });
+              }}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPageSideBar>
+      <EuiPageBody>{props.children}</EuiPageBody>
+    </EuiPage>
+  );
+}
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
new file mode 100644
index 0000000000..879d250c58
--- /dev/null
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
@@ -0,0 +1,2862 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Panels Table Component renders empty panel table container 1`] = `
+<CustomPanelTable
+  addSamplePanels={[MockFunction]}
+  cloneCustomPanel={[MockFunction]}
+  createCustomPanel={[MockFunction]}
+  customPanels={Array []}
+  deleteCustomPanelList={[MockFunction]}
+  fetchCustomPanels={
+    [MockFunction] {
+      "calls": Array [
+        Array [],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  loading={false}
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/operational_panels/",
+        "text": "Operational panels",
+      },
+      Object {
+        "href": "observability#/",
+        "text": "Observability",
+      },
+    ]
+  }
+  renameCustomPanel={[MockFunction]}
+  setBreadcrumbs={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [
+            Object {
+              "href": "#/operational_panels/",
+              "text": "Operational panels",
+            },
+            Object {
+              "href": "observability#/",
+              "text": "Observability",
+            },
+          ],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "float": "left",
+        "maxWidth": "1130px",
+        "width": "100%",
+      }
+    }
+  >
+    <EuiPage>
+      <div
+        className="euiPage euiPage--paddingMedium euiPage--grow"
+      >
+        <EuiPageBody
+          component="div"
+        >
+          <div
+            className="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <EuiPageHeader>
+              <header
+                className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+              >
+                <EuiPageHeaderSection>
+                  <div
+                    className="euiPageHeaderSection"
+                  >
+                    <EuiTitle
+                      size="l"
+                    >
+                      <h1
+                        className="euiTitle euiTitle--large"
+                      >
+                        Operational panels
+                      </h1>
+                    </EuiTitle>
+                  </div>
+                </EuiPageHeaderSection>
+              </header>
+            </EuiPageHeader>
+            <EuiPageContent
+              id="customPanelArea"
+            >
+              <EuiPanel
+                className="euiPageContent"
+                id="customPanelArea"
+                paddingSize="l"
+                role="main"
+              >
+                <div
+                  className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+                  id="customPanelArea"
+                  role="main"
+                >
+                  <EuiPageContentHeader>
+                    <div
+                      className="euiPageContentHeader euiPageContentHeader--responsive"
+                    >
+                      <EuiPageContentHeaderSection>
+                        <div
+                          className="euiPageContentHeaderSection"
+                        >
+                          <EuiTitle
+                            size="s"
+                          >
+                            <h3
+                              className="euiTitle euiTitle--small"
+                            >
+                              Panels
+                              <span
+                                className="panel-header-count"
+                              >
+                                 (
+                                0
+                                )
+                              </span>
+                            </h3>
+                          </EuiTitle>
+                          <EuiSpacer
+                            size="s"
+                          >
+                            <div
+                              className="euiSpacer euiSpacer--s"
+                            />
+                          </EuiSpacer>
+                          <EuiText
+                            color="subdued"
+                            size="s"
+                          >
+                            <div
+                              className="euiText euiText--small"
+                            >
+                              <EuiTextColor
+                                color="subdued"
+                                component="div"
+                              >
+                                <div
+                                  className="euiTextColor euiTextColor--subdued"
+                                >
+                                  Use Operational panels to create and view different visualizations on ingested observability data, using PPL (Piped Processing Language) queries.
+                                   
+                                  <EuiLink
+                                    external={true}
+                                    href="https://opensearch.org/docs/latest/observability-plugin/operational-panels/"
+                                    target="blank"
+                                  >
+                                    <a
+                                      className="euiLink euiLink--primary"
+                                      href="https://opensearch.org/docs/latest/observability-plugin/operational-panels/"
+                                      rel="noreferrer"
+                                      target="blank"
+                                    >
+                                      Learn more
+                                      <EuiIcon
+                                        aria-label="External link"
+                                        className="euiLink__externalIcon"
+                                        size="s"
+                                        type="popout"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          aria-label="External link"
+                                          className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            aria-label="External link"
+                                            className="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </a>
+                                  </EuiLink>
+                                </div>
+                              </EuiTextColor>
+                            </div>
+                          </EuiText>
+                        </div>
+                      </EuiPageContentHeaderSection>
+                      <EuiPageContentHeaderSection>
+                        <div
+                          className="euiPageContentHeaderSection"
+                        >
+                          <EuiFlexGroup
+                            gutterSize="s"
+                          >
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                            >
+                              <EuiFlexItem>
+                                <div
+                                  className="euiFlexItem"
+                                >
+                                  <EuiPopover
+                                    anchorPosition="downCenter"
+                                    button={
+                                      <EuiButton
+                                        data-test-subj="operationalPanelsActionsButton"
+                                        iconSide="right"
+                                        iconType="arrowDown"
+                                        onClick={[Function]}
+                                      >
+                                        Actions
+                                      </EuiButton>
+                                    }
+                                    closePopover={[Function]}
+                                    display="inlineBlock"
+                                    hasArrow={true}
+                                    isOpen={false}
+                                    ownFocus={true}
+                                    panelPaddingSize="none"
+                                  >
+                                    <div
+                                      className="euiPopover euiPopover--anchorDownCenter"
+                                    >
+                                      <div
+                                        className="euiPopover__anchor"
+                                      >
+                                        <EuiButton
+                                          data-test-subj="operationalPanelsActionsButton"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          onClick={[Function]}
+                                        >
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
+                                            data-test-subj="operationalPanelsActionsButton"
+                                            disabled={false}
+                                            element="button"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            isDisabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <button
+                                              className="euiButton euiButton--primary"
+                                              data-test-subj="operationalPanelsActionsButton"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              style={
+                                                Object {
+                                                  "minWidth": undefined,
+                                                }
+                                              }
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="right"
+                                                iconType="arrowDown"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                                >
+                                                  <EuiIcon
+                                                    className="euiButtonContent__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="arrowDown"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiButton__text"
+                                                  >
+                                                    Actions
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </div>
+                                    </div>
+                                  </EuiPopover>
+                                </div>
+                              </EuiFlexItem>
+                              <EuiFlexItem>
+                                <div
+                                  className="euiFlexItem"
+                                >
+                                  <EuiButton
+                                    data-test-subj="customPanels__createNewPanels"
+                                    fill={true}
+                                    onClick={[Function]}
+                                  >
+                                    <EuiButtonDisplay
+                                      baseClassName="euiButton"
+                                      data-test-subj="customPanels__createNewPanels"
+                                      disabled={false}
+                                      element="button"
+                                      fill={true}
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <button
+                                        className="euiButton euiButton--primary euiButton--fill"
+                                        data-test-subj="customPanels__createNewPanels"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        style={
+                                          Object {
+                                            "minWidth": undefined,
+                                          }
+                                        }
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButton__content"
+                                          iconSide="left"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButton__text",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButton__content"
+                                          >
+                                            <span
+                                              className="euiButton__text"
+                                            >
+                                              Create panel
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonDisplay>
+                                  </EuiButton>
+                                </div>
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </div>
+                      </EuiPageContentHeaderSection>
+                    </div>
+                  </EuiPageContentHeader>
+                  <EuiHorizontalRule
+                    margin="m"
+                  >
+                    <hr
+                      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                    />
+                  </EuiHorizontalRule>
+                  <EuiSpacer
+                    size="xxl"
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--xxl"
+                    />
+                  </EuiSpacer>
+                  <EuiText
+                    textAlign="center"
+                  >
+                    <div
+                      className="euiText euiText--medium"
+                    >
+                      <EuiTextAlign
+                        textAlign="center"
+                      >
+                        <div
+                          className="euiTextAlign euiTextAlign--center"
+                        >
+                          <h2>
+                            No Operational Panels
+                          </h2>
+                          <EuiSpacer
+                            size="m"
+                          >
+                            <div
+                              className="euiSpacer euiSpacer--m"
+                            />
+                          </EuiSpacer>
+                          <EuiText
+                            color="subdued"
+                          >
+                            <div
+                              className="euiText euiText--medium"
+                            >
+                              <EuiTextColor
+                                color="subdued"
+                                component="div"
+                              >
+                                <div
+                                  className="euiTextColor euiTextColor--subdued"
+                                >
+                                  Use operational panels to dive deeper into observability
+                                  <br />
+                                  using PPL queries and insightful visualizations
+                                </div>
+                              </EuiTextColor>
+                            </div>
+                          </EuiText>
+                        </div>
+                      </EuiTextAlign>
+                    </div>
+                  </EuiText>
+                  <EuiSpacer
+                    size="m"
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--m"
+                    />
+                  </EuiSpacer>
+                  <EuiFlexGroup
+                    justifyContent="center"
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiButton
+                            data-test-subj="customPanels__emptyCreateNewPanels"
+                            fullWidth={false}
+                            onClick={[Function]}
+                          >
+                            <EuiButtonDisplay
+                              baseClassName="euiButton"
+                              data-test-subj="customPanels__emptyCreateNewPanels"
+                              disabled={false}
+                              element="button"
+                              fullWidth={false}
+                              isDisabled={false}
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <button
+                                className="euiButton euiButton--primary"
+                                data-test-subj="customPanels__emptyCreateNewPanels"
+                                disabled={false}
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "minWidth": undefined,
+                                  }
+                                }
+                                type="button"
+                              >
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButton__content"
+                                  >
+                                    <span
+                                      className="euiButton__text"
+                                    >
+                                      Create panel
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </button>
+                            </EuiButtonDisplay>
+                          </EuiButton>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiButton
+                            fullWidth={false}
+                            onClick={[Function]}
+                          >
+                            <EuiButtonDisplay
+                              baseClassName="euiButton"
+                              disabled={false}
+                              element="button"
+                              fullWidth={false}
+                              isDisabled={false}
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <button
+                                className="euiButton euiButton--primary"
+                                disabled={false}
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "minWidth": undefined,
+                                  }
+                                }
+                                type="button"
+                              >
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButton__content"
+                                  >
+                                    <span
+                                      className="euiButton__text"
+                                    >
+                                      Add samples
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </button>
+                            </EuiButtonDisplay>
+                          </EuiButton>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                  <EuiSpacer
+                    size="xxl"
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--xxl"
+                    />
+                  </EuiSpacer>
+                </div>
+              </EuiPanel>
+            </EuiPageContent>
+          </div>
+        </EuiPageBody>
+      </div>
+    </EuiPage>
+  </div>
+</CustomPanelTable>
+`;
+
+exports[`Panels Table Component renders panel table container 1`] = `
+<CustomPanelTable
+  addSamplePanels={[MockFunction]}
+  cloneCustomPanel={[MockFunction]}
+  createCustomPanel={[MockFunction]}
+  customPanels={
+    Array [
+      Object {
+        "dateCreated": 1635974761179,
+        "dateModified": 1635974771296,
+        "id": "L8Sx53wBDp0rvEg3yoLb",
+        "name": "Test Panel 1",
+      },
+      Object {
+        "dateCreated": 1635545733895,
+        "dateModified": 1635979024055,
+        "id": "lsQfznwBDp0rvEg3W2wH",
+        "name": "Test Panel 2",
+      },
+      Object {
+        "dateCreated": 1635889452900,
+        "dateModified": 1635979888682,
+        "id": "b8Sc4nwBDp0rvEg3F3Fk",
+        "name": "Test Panel 3",
+      },
+      Object {
+        "dateCreated": 1635881186494,
+        "dateModified": 1636049456718,
+        "id": "P8Qd4nwBDp0rvEg39HG_",
+        "name": "Test Panel 4",
+      },
+    ]
+  }
+  deleteCustomPanelList={[MockFunction]}
+  fetchCustomPanels={
+    [MockFunction] {
+      "calls": Array [
+        Array [],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  loading={false}
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/operational_panels/",
+        "text": "Operational panels",
+      },
+      Object {
+        "href": "observability#/",
+        "text": "Observability",
+      },
+    ]
+  }
+  renameCustomPanel={[MockFunction]}
+  setBreadcrumbs={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [
+            Object {
+              "href": "#/operational_panels/",
+              "text": "Operational panels",
+            },
+            Object {
+              "href": "observability#/",
+              "text": "Observability",
+            },
+          ],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "float": "left",
+        "maxWidth": "1130px",
+        "width": "100%",
+      }
+    }
+  >
+    <EuiPage>
+      <div
+        className="euiPage euiPage--paddingMedium euiPage--grow"
+      >
+        <EuiPageBody
+          component="div"
+        >
+          <div
+            className="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <EuiPageHeader>
+              <header
+                className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+              >
+                <EuiPageHeaderSection>
+                  <div
+                    className="euiPageHeaderSection"
+                  >
+                    <EuiTitle
+                      size="l"
+                    >
+                      <h1
+                        className="euiTitle euiTitle--large"
+                      >
+                        Operational panels
+                      </h1>
+                    </EuiTitle>
+                  </div>
+                </EuiPageHeaderSection>
+              </header>
+            </EuiPageHeader>
+            <EuiPageContent
+              id="customPanelArea"
+            >
+              <EuiPanel
+                className="euiPageContent"
+                id="customPanelArea"
+                paddingSize="l"
+                role="main"
+              >
+                <div
+                  className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+                  id="customPanelArea"
+                  role="main"
+                >
+                  <EuiPageContentHeader>
+                    <div
+                      className="euiPageContentHeader euiPageContentHeader--responsive"
+                    >
+                      <EuiPageContentHeaderSection>
+                        <div
+                          className="euiPageContentHeaderSection"
+                        >
+                          <EuiTitle
+                            size="s"
+                          >
+                            <h3
+                              className="euiTitle euiTitle--small"
+                            >
+                              Panels
+                              <span
+                                className="panel-header-count"
+                              >
+                                 (
+                                4
+                                )
+                              </span>
+                            </h3>
+                          </EuiTitle>
+                          <EuiSpacer
+                            size="s"
+                          >
+                            <div
+                              className="euiSpacer euiSpacer--s"
+                            />
+                          </EuiSpacer>
+                          <EuiText
+                            color="subdued"
+                            size="s"
+                          >
+                            <div
+                              className="euiText euiText--small"
+                            >
+                              <EuiTextColor
+                                color="subdued"
+                                component="div"
+                              >
+                                <div
+                                  className="euiTextColor euiTextColor--subdued"
+                                >
+                                  Use Operational panels to create and view different visualizations on ingested observability data, using PPL (Piped Processing Language) queries.
+                                   
+                                  <EuiLink
+                                    external={true}
+                                    href="https://opensearch.org/docs/latest/observability-plugin/operational-panels/"
+                                    target="blank"
+                                  >
+                                    <a
+                                      className="euiLink euiLink--primary"
+                                      href="https://opensearch.org/docs/latest/observability-plugin/operational-panels/"
+                                      rel="noreferrer"
+                                      target="blank"
+                                    >
+                                      Learn more
+                                      <EuiIcon
+                                        aria-label="External link"
+                                        className="euiLink__externalIcon"
+                                        size="s"
+                                        type="popout"
+                                      >
+                                        <EuiIconPopout
+                                          aria-label="External link"
+                                          className="euiIcon euiIcon--small euiLink__externalIcon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-label="External link"
+                                            className="euiIcon euiIcon--small euiLink__externalIcon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                                            />
+                                          </svg>
+                                        </EuiIconPopout>
+                                      </EuiIcon>
+                                    </a>
+                                  </EuiLink>
+                                </div>
+                              </EuiTextColor>
+                            </div>
+                          </EuiText>
+                        </div>
+                      </EuiPageContentHeaderSection>
+                      <EuiPageContentHeaderSection>
+                        <div
+                          className="euiPageContentHeaderSection"
+                        >
+                          <EuiFlexGroup
+                            gutterSize="s"
+                          >
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                            >
+                              <EuiFlexItem>
+                                <div
+                                  className="euiFlexItem"
+                                >
+                                  <EuiPopover
+                                    anchorPosition="downCenter"
+                                    button={
+                                      <EuiButton
+                                        data-test-subj="operationalPanelsActionsButton"
+                                        iconSide="right"
+                                        iconType="arrowDown"
+                                        onClick={[Function]}
+                                      >
+                                        Actions
+                                      </EuiButton>
+                                    }
+                                    closePopover={[Function]}
+                                    display="inlineBlock"
+                                    hasArrow={true}
+                                    isOpen={false}
+                                    ownFocus={true}
+                                    panelPaddingSize="none"
+                                  >
+                                    <div
+                                      className="euiPopover euiPopover--anchorDownCenter"
+                                    >
+                                      <div
+                                        className="euiPopover__anchor"
+                                      >
+                                        <EuiButton
+                                          data-test-subj="operationalPanelsActionsButton"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          onClick={[Function]}
+                                        >
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
+                                            data-test-subj="operationalPanelsActionsButton"
+                                            disabled={false}
+                                            element="button"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            isDisabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <button
+                                              className="euiButton euiButton--primary"
+                                              data-test-subj="operationalPanelsActionsButton"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              style={
+                                                Object {
+                                                  "minWidth": undefined,
+                                                }
+                                              }
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="right"
+                                                iconType="arrowDown"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                                >
+                                                  <EuiIcon
+                                                    className="euiButtonContent__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="arrowDown"
+                                                  >
+                                                    <EuiIconArrowDown
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                          fillRule="non-zero"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconArrowDown>
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiButton__text"
+                                                  >
+                                                    Actions
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </div>
+                                    </div>
+                                  </EuiPopover>
+                                </div>
+                              </EuiFlexItem>
+                              <EuiFlexItem>
+                                <div
+                                  className="euiFlexItem"
+                                >
+                                  <EuiButton
+                                    data-test-subj="customPanels__createNewPanels"
+                                    fill={true}
+                                    onClick={[Function]}
+                                  >
+                                    <EuiButtonDisplay
+                                      baseClassName="euiButton"
+                                      data-test-subj="customPanels__createNewPanels"
+                                      disabled={false}
+                                      element="button"
+                                      fill={true}
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <button
+                                        className="euiButton euiButton--primary euiButton--fill"
+                                        data-test-subj="customPanels__createNewPanels"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        style={
+                                          Object {
+                                            "minWidth": undefined,
+                                          }
+                                        }
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButton__content"
+                                          iconSide="left"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButton__text",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButton__content"
+                                          >
+                                            <span
+                                              className="euiButton__text"
+                                            >
+                                              Create panel
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonDisplay>
+                                  </EuiButton>
+                                </div>
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </div>
+                      </EuiPageContentHeaderSection>
+                    </div>
+                  </EuiPageContentHeader>
+                  <EuiHorizontalRule
+                    margin="m"
+                  >
+                    <hr
+                      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                    />
+                  </EuiHorizontalRule>
+                  <EuiFieldSearch
+                    compressed={false}
+                    data-test-subj="operationalPanelSearchBar"
+                    fullWidth={true}
+                    incremental={false}
+                    isClearable={true}
+                    isLoading={false}
+                    onChange={[Function]}
+                    placeholder="Search operational panel name"
+                    value=""
+                  >
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={true}
+                      icon="search"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiValidatableControl>
+                            <input
+                              className="euiFieldSearch euiFieldSearch--fullWidth"
+                              data-test-subj="operationalPanelSearchBar"
+                              onChange={[Function]}
+                              onKeyUp={[Function]}
+                              placeholder="Search operational panel name"
+                              type="search"
+                              value=""
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
+                            >
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
+                              >
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                  <EuiHorizontalRule
+                    margin="m"
+                  >
+                    <hr
+                      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                    />
+                  </EuiHorizontalRule>
+                  <EuiInMemoryTable
+                    allowNeutralSort={false}
+                    columns={
+                      Array [
+                        Object {
+                          "field": "name",
+                          "name": "Name",
+                          "render": [Function],
+                          "sortable": true,
+                          "truncateText": true,
+                        },
+                        Object {
+                          "field": "dateModified",
+                          "name": "Last updated",
+                          "render": [Function],
+                          "sortable": true,
+                        },
+                        Object {
+                          "field": "dateCreated",
+                          "name": "Created",
+                          "render": [Function],
+                          "sortable": true,
+                        },
+                      ]
+                    }
+                    isSelectable={true}
+                    itemId="id"
+                    items={
+                      Array [
+                        Object {
+                          "dateCreated": 1635974761179,
+                          "dateModified": 1635974771296,
+                          "id": "L8Sx53wBDp0rvEg3yoLb",
+                          "name": "Test Panel 1",
+                        },
+                        Object {
+                          "dateCreated": 1635545733895,
+                          "dateModified": 1635979024055,
+                          "id": "lsQfznwBDp0rvEg3W2wH",
+                          "name": "Test Panel 2",
+                        },
+                        Object {
+                          "dateCreated": 1635889452900,
+                          "dateModified": 1635979888682,
+                          "id": "b8Sc4nwBDp0rvEg3F3Fk",
+                          "name": "Test Panel 3",
+                        },
+                        Object {
+                          "dateCreated": 1635881186494,
+                          "dateModified": 1636049456718,
+                          "id": "P8Qd4nwBDp0rvEg39HG_",
+                          "name": "Test Panel 4",
+                        },
+                      ]
+                    }
+                    loading={false}
+                    pagination={
+                      Object {
+                        "initialPageSize": 10,
+                        "pageSizeOptions": Array [
+                          8,
+                          10,
+                          13,
+                        ],
+                      }
+                    }
+                    responsive={true}
+                    selection={
+                      Object {
+                        "onSelectionChange": [Function],
+                      }
+                    }
+                    sorting={
+                      Object {
+                        "sort": Object {
+                          "direction": "desc",
+                          "field": "dateModified",
+                        },
+                      }
+                    }
+                    tableLayout="auto"
+                  >
+                    <EuiBasicTable
+                      columns={
+                        Array [
+                          Object {
+                            "field": "name",
+                            "name": "Name",
+                            "render": [Function],
+                            "sortable": true,
+                            "truncateText": true,
+                          },
+                          Object {
+                            "field": "dateModified",
+                            "name": "Last updated",
+                            "render": [Function],
+                            "sortable": true,
+                          },
+                          Object {
+                            "field": "dateCreated",
+                            "name": "Created",
+                            "render": [Function],
+                            "sortable": true,
+                          },
+                        ]
+                      }
+                      isSelectable={true}
+                      itemId="id"
+                      items={
+                        Array [
+                          Object {
+                            "dateCreated": 1635881186494,
+                            "dateModified": 1636049456718,
+                            "id": "P8Qd4nwBDp0rvEg39HG_",
+                            "name": "Test Panel 4",
+                          },
+                          Object {
+                            "dateCreated": 1635889452900,
+                            "dateModified": 1635979888682,
+                            "id": "b8Sc4nwBDp0rvEg3F3Fk",
+                            "name": "Test Panel 3",
+                          },
+                          Object {
+                            "dateCreated": 1635545733895,
+                            "dateModified": 1635979024055,
+                            "id": "lsQfznwBDp0rvEg3W2wH",
+                            "name": "Test Panel 2",
+                          },
+                          Object {
+                            "dateCreated": 1635974761179,
+                            "dateModified": 1635974771296,
+                            "id": "L8Sx53wBDp0rvEg3yoLb",
+                            "name": "Test Panel 1",
+                          },
+                        ]
+                      }
+                      loading={false}
+                      noItemsMessage="No items found"
+                      onChange={[Function]}
+                      pagination={
+                        Object {
+                          "hidePerPageOptions": undefined,
+                          "pageIndex": 0,
+                          "pageSize": 10,
+                          "pageSizeOptions": Array [
+                            8,
+                            10,
+                            13,
+                          ],
+                          "totalItemCount": 4,
+                        }
+                      }
+                      responsive={true}
+                      selection={
+                        Object {
+                          "onSelectionChange": [Function],
+                        }
+                      }
+                      sorting={
+                        Object {
+                          "allowNeutralSort": false,
+                          "sort": Object {
+                            "direction": "desc",
+                            "field": "Last updated",
+                          },
+                        }
+                      }
+                      tableLayout="auto"
+                    >
+                      <div
+                        className="euiBasicTable"
+                      >
+                        <div>
+                          <EuiTableHeaderMobile>
+                            <div
+                              className="euiTableHeaderMobile"
+                            >
+                              <EuiFlexGroup
+                                alignItems="baseline"
+                                justifyContent="spaceBetween"
+                                responsive={false}
+                              >
+                                <div
+                                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                                >
+                                  <EuiFlexItem
+                                    grow={false}
+                                  >
+                                    <div
+                                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                                    >
+                                      <EuiI18n
+                                        default="Select all rows"
+                                        token="euiBasicTable.selectAllRows"
+                                      >
+                                        <EuiCheckbox
+                                          aria-label="Select all rows"
+                                          checked={false}
+                                          compressed={false}
+                                          disabled={false}
+                                          id="_selection_column-checkbox_random_html_id"
+                                          indeterminate={false}
+                                          label="Select all rows"
+                                          onChange={[Function]}
+                                        >
+                                          <div
+                                            className="euiCheckbox"
+                                          >
+                                            <input
+                                              aria-label="Select all rows"
+                                              checked={false}
+                                              className="euiCheckbox__input"
+                                              disabled={false}
+                                              id="_selection_column-checkbox_random_html_id"
+                                              onChange={[Function]}
+                                              type="checkbox"
+                                            />
+                                            <div
+                                              className="euiCheckbox__square"
+                                            />
+                                            <label
+                                              className="euiCheckbox__label"
+                                              htmlFor="_selection_column-checkbox_random_html_id"
+                                            >
+                                              Select all rows
+                                            </label>
+                                          </div>
+                                        </EuiCheckbox>
+                                      </EuiI18n>
+                                    </div>
+                                  </EuiFlexItem>
+                                  <EuiFlexItem
+                                    grow={false}
+                                  >
+                                    <div
+                                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                                    >
+                                      <EuiTableSortMobile
+                                        items={
+                                          Array [
+                                            Object {
+                                              "isSortAscending": undefined,
+                                              "isSorted": false,
+                                              "key": "_data_s_name_0",
+                                              "name": "Name",
+                                              "onSort": [Function],
+                                            },
+                                            Object {
+                                              "isSortAscending": false,
+                                              "isSorted": true,
+                                              "key": "_data_s_dateModified_1",
+                                              "name": "Last updated",
+                                              "onSort": [Function],
+                                            },
+                                            Object {
+                                              "isSortAscending": undefined,
+                                              "isSorted": false,
+                                              "key": "_data_s_dateCreated_2",
+                                              "name": "Created",
+                                              "onSort": [Function],
+                                            },
+                                          ]
+                                        }
+                                      >
+                                        <div
+                                          className="euiTableSortMobile"
+                                        >
+                                          <EuiPopover
+                                            anchorPosition="downRight"
+                                            button={
+                                              <EuiButtonEmpty
+                                                flush="right"
+                                                iconSide="right"
+                                                iconType="arrowDown"
+                                                onClick={[Function]}
+                                                size="xs"
+                                              >
+                                                <EuiI18n
+                                                  default="Sorting"
+                                                  token="euiTableSortMobile.sorting"
+                                                />
+                                              </EuiButtonEmpty>
+                                            }
+                                            closePopover={[Function]}
+                                            display="inlineBlock"
+                                            hasArrow={true}
+                                            isOpen={false}
+                                            ownFocus={true}
+                                            panelPaddingSize="none"
+                                          >
+                                            <div
+                                              className="euiPopover euiPopover--anchorDownRight"
+                                            >
+                                              <div
+                                                className="euiPopover__anchor"
+                                              >
+                                                <EuiButtonEmpty
+                                                  flush="right"
+                                                  iconSide="right"
+                                                  iconType="arrowDown"
+                                                  onClick={[Function]}
+                                                  size="xs"
+                                                >
+                                                  <button
+                                                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                                    disabled={false}
+                                                    onClick={[Function]}
+                                                    type="button"
+                                                  >
+                                                    <EuiButtonContent
+                                                      className="euiButtonEmpty__content"
+                                                      iconSide="right"
+                                                      iconSize="s"
+                                                      iconType="arrowDown"
+                                                      textProps={
+                                                        Object {
+                                                          "className": "euiButtonEmpty__text",
+                                                        }
+                                                      }
+                                                    >
+                                                      <span
+                                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                                      >
+                                                        <EuiIcon
+                                                          className="euiButtonContent__icon"
+                                                          color="inherit"
+                                                          size="s"
+                                                          type="arrowDown"
+                                                        >
+                                                          <EuiIconArrowDown
+                                                            aria-hidden={true}
+                                                            className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                            focusable="false"
+                                                            role="img"
+                                                            style={null}
+                                                          >
+                                                            <svg
+                                                              aria-hidden={true}
+                                                              className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                              focusable="false"
+                                                              height={16}
+                                                              role="img"
+                                                              style={null}
+                                                              viewBox="0 0 16 16"
+                                                              width={16}
+                                                              xmlns="http://www.w3.org/2000/svg"
+                                                            >
+                                                              <path
+                                                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                                fillRule="non-zero"
+                                                              />
+                                                            </svg>
+                                                          </EuiIconArrowDown>
+                                                        </EuiIcon>
+                                                        <span
+                                                          className="euiButtonEmpty__text"
+                                                        >
+                                                          <EuiI18n
+                                                            default="Sorting"
+                                                            token="euiTableSortMobile.sorting"
+                                                          >
+                                                            Sorting
+                                                          </EuiI18n>
+                                                        </span>
+                                                      </span>
+                                                    </EuiButtonContent>
+                                                  </button>
+                                                </EuiButtonEmpty>
+                                              </div>
+                                            </div>
+                                          </EuiPopover>
+                                        </div>
+                                      </EuiTableSortMobile>
+                                    </div>
+                                  </EuiFlexItem>
+                                </div>
+                              </EuiFlexGroup>
+                            </div>
+                          </EuiTableHeaderMobile>
+                          <EuiTable
+                            id="random_html_id"
+                            responsive={true}
+                            tableLayout="auto"
+                          >
+                            <table
+                              className="euiTable euiTable--responsive euiTable--auto"
+                              id="random_html_id"
+                              tabIndex={-1}
+                            >
+                              <EuiScreenReaderOnly>
+                                <caption
+                                  className="euiScreenReaderOnly euiTableCaption"
+                                >
+                                  <EuiDelayRender
+                                    delay={500}
+                                  />
+                                </caption>
+                              </EuiScreenReaderOnly>
+                              <EuiTableHeader>
+                                <thead>
+                                  <tr>
+                                    <EuiTableHeaderCellCheckbox
+                                      key="_selection_column_h"
+                                    >
+                                      <th
+                                        className="euiTableHeaderCellCheckbox"
+                                        scope="col"
+                                        style={
+                                          Object {
+                                            "width": undefined,
+                                          }
+                                        }
+                                      >
+                                        <div
+                                          className="euiTableCellContent"
+                                        >
+                                          <EuiI18n
+                                            default="Select all rows"
+                                            token="euiBasicTable.selectAllRows"
+                                          >
+                                            <EuiCheckbox
+                                              aria-label="Select all rows"
+                                              checked={false}
+                                              compressed={false}
+                                              data-test-subj="checkboxSelectAll"
+                                              disabled={false}
+                                              id="_selection_column-checkbox_random_html_id"
+                                              indeterminate={false}
+                                              label={null}
+                                              onChange={[Function]}
+                                              type="inList"
+                                            >
+                                              <div
+                                                className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                              >
+                                                <input
+                                                  aria-label="Select all rows"
+                                                  checked={false}
+                                                  className="euiCheckbox__input"
+                                                  data-test-subj="checkboxSelectAll"
+                                                  disabled={false}
+                                                  id="_selection_column-checkbox_random_html_id"
+                                                  onChange={[Function]}
+                                                  type="checkbox"
+                                                />
+                                                <div
+                                                  className="euiCheckbox__square"
+                                                />
+                                              </div>
+                                            </EuiCheckbox>
+                                          </EuiI18n>
+                                        </div>
+                                      </th>
+                                    </EuiTableHeaderCellCheckbox>
+                                    <EuiTableHeaderCell
+                                      align="left"
+                                      data-test-subj="tableHeaderCell_name_0"
+                                      isSorted={false}
+                                      key="_data_h_name_0"
+                                      onSort={[Function]}
+                                    >
+                                      <th
+                                        aria-live="polite"
+                                        aria-sort="none"
+                                        className="euiTableHeaderCell"
+                                        data-test-subj="tableHeaderCell_name_0"
+                                        role="columnheader"
+                                        scope="col"
+                                        style={
+                                          Object {
+                                            "width": undefined,
+                                          }
+                                        }
+                                      >
+                                        <button
+                                          className="euiTableHeaderButton"
+                                          data-test-subj="tableHeaderSortButton"
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <CellContents
+                                            className="euiTableCellContent"
+                                            isSorted={false}
+                                            showSortMsg={true}
+                                          >
+                                            <span
+                                              className="euiTableCellContent"
+                                            >
+                                              <EuiInnerText>
+                                                <EuiI18n
+                                                  default="{innerText}; {description}"
+                                                  token="euiTableHeaderCell.titleTextWithDesc"
+                                                  values={
+                                                    Object {
+                                                      "description": undefined,
+                                                      "innerText": "Name",
+                                                    }
+                                                  }
+                                                >
+                                                  <span
+                                                    className="euiTableCellContent__text"
+                                                    title="Name"
+                                                  >
+                                                    Name
+                                                  </span>
+                                                </EuiI18n>
+                                              </EuiInnerText>
+                                            </span>
+                                          </CellContents>
+                                        </button>
+                                      </th>
+                                    </EuiTableHeaderCell>
+                                    <EuiTableHeaderCell
+                                      align="left"
+                                      data-test-subj="tableHeaderCell_dateModified_1"
+                                      isSortAscending={false}
+                                      isSorted={true}
+                                      key="_data_h_dateModified_1"
+                                      onSort={[Function]}
+                                    >
+                                      <th
+                                        aria-live="polite"
+                                        aria-sort="descending"
+                                        className="euiTableHeaderCell"
+                                        data-test-subj="tableHeaderCell_dateModified_1"
+                                        role="columnheader"
+                                        scope="col"
+                                        style={
+                                          Object {
+                                            "width": undefined,
+                                          }
+                                        }
+                                      >
+                                        <button
+                                          className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                                          data-test-subj="tableHeaderSortButton"
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <CellContents
+                                            className="euiTableCellContent"
+                                            isSortAscending={false}
+                                            isSorted={true}
+                                            showSortMsg={true}
+                                          >
+                                            <span
+                                              className="euiTableCellContent"
+                                            >
+                                              <EuiInnerText>
+                                                <EuiI18n
+                                                  default="{innerText}; {description}"
+                                                  token="euiTableHeaderCell.titleTextWithDesc"
+                                                  values={
+                                                    Object {
+                                                      "description": undefined,
+                                                      "innerText": "Last updated",
+                                                    }
+                                                  }
+                                                >
+                                                  <span
+                                                    className="euiTableCellContent__text"
+                                                    title="Last updated"
+                                                  >
+                                                    Last updated
+                                                  </span>
+                                                </EuiI18n>
+                                              </EuiInnerText>
+                                              <EuiIcon
+                                                className="euiTableSortIcon"
+                                                size="m"
+                                                type="sortDown"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </span>
+                                          </CellContents>
+                                        </button>
+                                      </th>
+                                    </EuiTableHeaderCell>
+                                    <EuiTableHeaderCell
+                                      align="left"
+                                      data-test-subj="tableHeaderCell_dateCreated_2"
+                                      isSorted={false}
+                                      key="_data_h_dateCreated_2"
+                                      onSort={[Function]}
+                                    >
+                                      <th
+                                        aria-live="polite"
+                                        aria-sort="none"
+                                        className="euiTableHeaderCell"
+                                        data-test-subj="tableHeaderCell_dateCreated_2"
+                                        role="columnheader"
+                                        scope="col"
+                                        style={
+                                          Object {
+                                            "width": undefined,
+                                          }
+                                        }
+                                      >
+                                        <button
+                                          className="euiTableHeaderButton"
+                                          data-test-subj="tableHeaderSortButton"
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <CellContents
+                                            className="euiTableCellContent"
+                                            isSorted={false}
+                                            showSortMsg={true}
+                                          >
+                                            <span
+                                              className="euiTableCellContent"
+                                            >
+                                              <EuiInnerText>
+                                                <EuiI18n
+                                                  default="{innerText}; {description}"
+                                                  token="euiTableHeaderCell.titleTextWithDesc"
+                                                  values={
+                                                    Object {
+                                                      "description": undefined,
+                                                      "innerText": "Created",
+                                                    }
+                                                  }
+                                                >
+                                                  <span
+                                                    className="euiTableCellContent__text"
+                                                    title="Created"
+                                                  >
+                                                    Created
+                                                  </span>
+                                                </EuiI18n>
+                                              </EuiInnerText>
+                                            </span>
+                                          </CellContents>
+                                        </button>
+                                      </th>
+                                    </EuiTableHeaderCell>
+                                  </tr>
+                                </thead>
+                              </EuiTableHeader>
+                              <EuiTableBody
+                                bodyRef={[Function]}
+                              >
+                                <tbody>
+                                  <EuiTableRow
+                                    isSelectable={true}
+                                    isSelected={false}
+                                  >
+                                    <tr
+                                      className="euiTableRow euiTableRow-isSelectable"
+                                    >
+                                      <EuiTableRowCellCheckbox
+                                        key="_selection_column_P8Qd4nwBDp0rvEg39HG_"
+                                      >
+                                        <td
+                                          className="euiTableRowCellCheckbox"
+                                        >
+                                          <div
+                                            className="euiTableCellContent"
+                                          >
+                                            <EuiI18n
+                                              default="Select this row"
+                                              token="euiBasicTable.selectThisRow"
+                                            >
+                                              <EuiCheckbox
+                                                aria-label="Select this row"
+                                                checked={false}
+                                                compressed={false}
+                                                data-test-subj="checkboxSelectRow-P8Qd4nwBDp0rvEg39HG_"
+                                                disabled={false}
+                                                id="_selection_column_P8Qd4nwBDp0rvEg39HG_-checkbox"
+                                                indeterminate={false}
+                                                onChange={[Function]}
+                                                title="Select this row"
+                                                type="inList"
+                                              >
+                                                <div
+                                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                                >
+                                                  <input
+                                                    aria-label="Select this row"
+                                                    checked={false}
+                                                    className="euiCheckbox__input"
+                                                    data-test-subj="checkboxSelectRow-P8Qd4nwBDp0rvEg39HG_"
+                                                    disabled={false}
+                                                    id="_selection_column_P8Qd4nwBDp0rvEg39HG_-checkbox"
+                                                    onChange={[Function]}
+                                                    title="Select this row"
+                                                    type="checkbox"
+                                                  />
+                                                  <div
+                                                    className="euiCheckbox__square"
+                                                  />
+                                                </div>
+                                              </EuiCheckbox>
+                                            </EuiI18n>
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCellCheckbox>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_name_P8Qd4nwBDp0rvEg39HG__0"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Name",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                        truncateText={true}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Name
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                                          >
+                                            <EuiLink
+                                              className=""
+                                              href="observability#/P8Qd4nwBDp0rvEg39HG_"
+                                              key=".0"
+                                            >
+                                              <a
+                                                className="euiLink euiLink--primary"
+                                                href="observability#/P8Qd4nwBDp0rvEg39HG_"
+                                                rel="noreferrer"
+                                              >
+                                                Test Panel 4
+                                              </a>
+                                            </EuiLink>
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_dateModified_P8Qd4nwBDp0rvEg39HG__1"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Last updated",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Last updated
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
+                                          >
+                                            11/04/2021 06:10 PM
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_dateCreated_P8Qd4nwBDp0rvEg39HG__2"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Created",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Created
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
+                                          >
+                                            11/02/2021 07:26 PM
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                    </tr>
+                                  </EuiTableRow>
+                                  <EuiTableRow
+                                    isSelectable={true}
+                                    isSelected={false}
+                                  >
+                                    <tr
+                                      className="euiTableRow euiTableRow-isSelectable"
+                                    >
+                                      <EuiTableRowCellCheckbox
+                                        key="_selection_column_b8Sc4nwBDp0rvEg3F3Fk"
+                                      >
+                                        <td
+                                          className="euiTableRowCellCheckbox"
+                                        >
+                                          <div
+                                            className="euiTableCellContent"
+                                          >
+                                            <EuiI18n
+                                              default="Select this row"
+                                              token="euiBasicTable.selectThisRow"
+                                            >
+                                              <EuiCheckbox
+                                                aria-label="Select this row"
+                                                checked={false}
+                                                compressed={false}
+                                                data-test-subj="checkboxSelectRow-b8Sc4nwBDp0rvEg3F3Fk"
+                                                disabled={false}
+                                                id="_selection_column_b8Sc4nwBDp0rvEg3F3Fk-checkbox"
+                                                indeterminate={false}
+                                                onChange={[Function]}
+                                                title="Select this row"
+                                                type="inList"
+                                              >
+                                                <div
+                                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                                >
+                                                  <input
+                                                    aria-label="Select this row"
+                                                    checked={false}
+                                                    className="euiCheckbox__input"
+                                                    data-test-subj="checkboxSelectRow-b8Sc4nwBDp0rvEg3F3Fk"
+                                                    disabled={false}
+                                                    id="_selection_column_b8Sc4nwBDp0rvEg3F3Fk-checkbox"
+                                                    onChange={[Function]}
+                                                    title="Select this row"
+                                                    type="checkbox"
+                                                  />
+                                                  <div
+                                                    className="euiCheckbox__square"
+                                                  />
+                                                </div>
+                                              </EuiCheckbox>
+                                            </EuiI18n>
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCellCheckbox>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_name_b8Sc4nwBDp0rvEg3F3Fk_0"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Name",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                        truncateText={true}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Name
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                                          >
+                                            <EuiLink
+                                              className=""
+                                              href="observability#/b8Sc4nwBDp0rvEg3F3Fk"
+                                              key=".0"
+                                            >
+                                              <a
+                                                className="euiLink euiLink--primary"
+                                                href="observability#/b8Sc4nwBDp0rvEg3F3Fk"
+                                                rel="noreferrer"
+                                              >
+                                                Test Panel 3
+                                              </a>
+                                            </EuiLink>
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_dateModified_b8Sc4nwBDp0rvEg3F3Fk_1"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Last updated",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Last updated
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
+                                          >
+                                            11/03/2021 10:51 PM
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_dateCreated_b8Sc4nwBDp0rvEg3F3Fk_2"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Created",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Created
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
+                                          >
+                                            11/02/2021 09:44 PM
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                    </tr>
+                                  </EuiTableRow>
+                                  <EuiTableRow
+                                    isSelectable={true}
+                                    isSelected={false}
+                                  >
+                                    <tr
+                                      className="euiTableRow euiTableRow-isSelectable"
+                                    >
+                                      <EuiTableRowCellCheckbox
+                                        key="_selection_column_lsQfznwBDp0rvEg3W2wH"
+                                      >
+                                        <td
+                                          className="euiTableRowCellCheckbox"
+                                        >
+                                          <div
+                                            className="euiTableCellContent"
+                                          >
+                                            <EuiI18n
+                                              default="Select this row"
+                                              token="euiBasicTable.selectThisRow"
+                                            >
+                                              <EuiCheckbox
+                                                aria-label="Select this row"
+                                                checked={false}
+                                                compressed={false}
+                                                data-test-subj="checkboxSelectRow-lsQfznwBDp0rvEg3W2wH"
+                                                disabled={false}
+                                                id="_selection_column_lsQfznwBDp0rvEg3W2wH-checkbox"
+                                                indeterminate={false}
+                                                onChange={[Function]}
+                                                title="Select this row"
+                                                type="inList"
+                                              >
+                                                <div
+                                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                                >
+                                                  <input
+                                                    aria-label="Select this row"
+                                                    checked={false}
+                                                    className="euiCheckbox__input"
+                                                    data-test-subj="checkboxSelectRow-lsQfznwBDp0rvEg3W2wH"
+                                                    disabled={false}
+                                                    id="_selection_column_lsQfznwBDp0rvEg3W2wH-checkbox"
+                                                    onChange={[Function]}
+                                                    title="Select this row"
+                                                    type="checkbox"
+                                                  />
+                                                  <div
+                                                    className="euiCheckbox__square"
+                                                  />
+                                                </div>
+                                              </EuiCheckbox>
+                                            </EuiI18n>
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCellCheckbox>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_name_lsQfznwBDp0rvEg3W2wH_0"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Name",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                        truncateText={true}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Name
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                                          >
+                                            <EuiLink
+                                              className=""
+                                              href="observability#/lsQfznwBDp0rvEg3W2wH"
+                                              key=".0"
+                                            >
+                                              <a
+                                                className="euiLink euiLink--primary"
+                                                href="observability#/lsQfznwBDp0rvEg3W2wH"
+                                                rel="noreferrer"
+                                              >
+                                                Test Panel 2
+                                              </a>
+                                            </EuiLink>
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_dateModified_lsQfznwBDp0rvEg3W2wH_1"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Last updated",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Last updated
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
+                                          >
+                                            11/03/2021 10:37 PM
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_dateCreated_lsQfznwBDp0rvEg3W2wH_2"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Created",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Created
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
+                                          >
+                                            10/29/2021 10:15 PM
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                    </tr>
+                                  </EuiTableRow>
+                                  <EuiTableRow
+                                    isSelectable={true}
+                                    isSelected={false}
+                                  >
+                                    <tr
+                                      className="euiTableRow euiTableRow-isSelectable"
+                                    >
+                                      <EuiTableRowCellCheckbox
+                                        key="_selection_column_L8Sx53wBDp0rvEg3yoLb"
+                                      >
+                                        <td
+                                          className="euiTableRowCellCheckbox"
+                                        >
+                                          <div
+                                            className="euiTableCellContent"
+                                          >
+                                            <EuiI18n
+                                              default="Select this row"
+                                              token="euiBasicTable.selectThisRow"
+                                            >
+                                              <EuiCheckbox
+                                                aria-label="Select this row"
+                                                checked={false}
+                                                compressed={false}
+                                                data-test-subj="checkboxSelectRow-L8Sx53wBDp0rvEg3yoLb"
+                                                disabled={false}
+                                                id="_selection_column_L8Sx53wBDp0rvEg3yoLb-checkbox"
+                                                indeterminate={false}
+                                                onChange={[Function]}
+                                                title="Select this row"
+                                                type="inList"
+                                              >
+                                                <div
+                                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                                >
+                                                  <input
+                                                    aria-label="Select this row"
+                                                    checked={false}
+                                                    className="euiCheckbox__input"
+                                                    data-test-subj="checkboxSelectRow-L8Sx53wBDp0rvEg3yoLb"
+                                                    disabled={false}
+                                                    id="_selection_column_L8Sx53wBDp0rvEg3yoLb-checkbox"
+                                                    onChange={[Function]}
+                                                    title="Select this row"
+                                                    type="checkbox"
+                                                  />
+                                                  <div
+                                                    className="euiCheckbox__square"
+                                                  />
+                                                </div>
+                                              </EuiCheckbox>
+                                            </EuiI18n>
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCellCheckbox>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_name_L8Sx53wBDp0rvEg3yoLb_0"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Name",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                        truncateText={true}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Name
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                                          >
+                                            <EuiLink
+                                              className=""
+                                              href="observability#/L8Sx53wBDp0rvEg3yoLb"
+                                              key=".0"
+                                            >
+                                              <a
+                                                className="euiLink euiLink--primary"
+                                                href="observability#/L8Sx53wBDp0rvEg3yoLb"
+                                                rel="noreferrer"
+                                              >
+                                                Test Panel 1
+                                              </a>
+                                            </EuiLink>
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_dateModified_L8Sx53wBDp0rvEg3yoLb_1"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Last updated",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Last updated
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
+                                          >
+                                            11/03/2021 09:26 PM
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                      <EuiTableRowCell
+                                        align="left"
+                                        key="_data_column_dateCreated_L8Sx53wBDp0rvEg3yoLb_2"
+                                        mobileOptions={
+                                          Object {
+                                            "header": "Created",
+                                            "render": undefined,
+                                          }
+                                        }
+                                        setScopeRow={false}
+                                        textOnly={false}
+                                      >
+                                        <td
+                                          className="euiTableRowCell"
+                                          style={
+                                            Object {
+                                              "width": undefined,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                                          >
+                                            Created
+                                          </div>
+                                          <div
+                                            className="euiTableCellContent euiTableCellContent--overflowingContent"
+                                          >
+                                            11/03/2021 09:26 PM
+                                          </div>
+                                        </td>
+                                      </EuiTableRowCell>
+                                    </tr>
+                                  </EuiTableRow>
+                                </tbody>
+                              </EuiTableBody>
+                            </table>
+                          </EuiTable>
+                        </div>
+                        <PaginationBar
+                          aria-controls="random_html_id"
+                          onPageChange={[Function]}
+                          onPageSizeChange={[Function]}
+                          pagination={
+                            Object {
+                              "hidePerPageOptions": undefined,
+                              "pageIndex": 0,
+                              "pageSize": 10,
+                              "pageSizeOptions": Array [
+                                8,
+                                10,
+                                13,
+                              ],
+                              "totalItemCount": 4,
+                            }
+                          }
+                        >
+                          <div>
+                            <EuiSpacer
+                              size="m"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--m"
+                              />
+                            </EuiSpacer>
+                            <EuiTablePagination
+                              activePage={0}
+                              aria-controls="random_html_id"
+                              itemsPerPage={10}
+                              itemsPerPageOptions={
+                                Array [
+                                  8,
+                                  10,
+                                  13,
+                                ]
+                              }
+                              onChangeItemsPerPage={[Function]}
+                              onChangePage={[Function]}
+                              pageCount={1}
+                            >
+                              <EuiFlexGroup
+                                alignItems="center"
+                                justifyContent="spaceBetween"
+                                responsive={false}
+                              >
+                                <div
+                                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                                >
+                                  <EuiFlexItem
+                                    grow={false}
+                                  >
+                                    <div
+                                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                                    >
+                                      <EuiPopover
+                                        anchorPosition="upRight"
+                                        button={
+                                          <EuiButtonEmpty
+                                            color="text"
+                                            data-test-subj="tablePaginationPopoverButton"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            onClick={[Function]}
+                                            size="xs"
+                                          >
+                                            <EuiI18n
+                                              default="Rows per page"
+                                              token="euiTablePagination.rowsPerPage"
+                                            />
+                                            : 
+                                            10
+                                          </EuiButtonEmpty>
+                                        }
+                                        closePopover={[Function]}
+                                        display="inlineBlock"
+                                        hasArrow={true}
+                                        isOpen={false}
+                                        ownFocus={true}
+                                        panelPaddingSize="none"
+                                      >
+                                        <div
+                                          className="euiPopover euiPopover--anchorUpRight"
+                                        >
+                                          <div
+                                            className="euiPopover__anchor"
+                                          >
+                                            <EuiButtonEmpty
+                                              color="text"
+                                              data-test-subj="tablePaginationPopoverButton"
+                                              iconSide="right"
+                                              iconType="arrowDown"
+                                              onClick={[Function]}
+                                              size="xs"
+                                            >
+                                              <button
+                                                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                                                data-test-subj="tablePaginationPopoverButton"
+                                                disabled={false}
+                                                onClick={[Function]}
+                                                type="button"
+                                              >
+                                                <EuiButtonContent
+                                                  className="euiButtonEmpty__content"
+                                                  iconSide="right"
+                                                  iconSize="s"
+                                                  iconType="arrowDown"
+                                                  textProps={
+                                                    Object {
+                                                      "className": "euiButtonEmpty__text",
+                                                    }
+                                                  }
+                                                >
+                                                  <span
+                                                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                                  >
+                                                    <EuiIcon
+                                                      className="euiButtonContent__icon"
+                                                      color="inherit"
+                                                      size="s"
+                                                      type="arrowDown"
+                                                    >
+                                                      <EuiIconArrowDown
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                        focusable="false"
+                                                        role="img"
+                                                        style={null}
+                                                      >
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                          <path
+                                                            d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                            fillRule="non-zero"
+                                                          />
+                                                        </svg>
+                                                      </EuiIconArrowDown>
+                                                    </EuiIcon>
+                                                    <span
+                                                      className="euiButtonEmpty__text"
+                                                    >
+                                                      <EuiI18n
+                                                        default="Rows per page"
+                                                        token="euiTablePagination.rowsPerPage"
+                                                      >
+                                                        Rows per page
+                                                      </EuiI18n>
+                                                      : 
+                                                      10
+                                                    </span>
+                                                  </span>
+                                                </EuiButtonContent>
+                                              </button>
+                                            </EuiButtonEmpty>
+                                          </div>
+                                        </div>
+                                      </EuiPopover>
+                                    </div>
+                                  </EuiFlexItem>
+                                  <EuiFlexItem
+                                    grow={false}
+                                  >
+                                    <div
+                                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                                    >
+                                      <EuiPagination
+                                        activePage={0}
+                                        aria-controls="random_html_id"
+                                        onPageClick={[Function]}
+                                        pageCount={1}
+                                      >
+                                        <nav
+                                          className="euiPagination"
+                                        >
+                                          <EuiI18n
+                                            default="Previous page, {page}"
+                                            token="euiPagination.previousPage"
+                                            values={
+                                              Object {
+                                                "page": 0,
+                                              }
+                                            }
+                                          >
+                                            <EuiI18n
+                                              default="Previous page"
+                                              token="euiPagination.disabledPreviousPage"
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Previous page"
+                                                color="text"
+                                                data-test-subj="pagination-button-previous"
+                                                disabled={true}
+                                                iconType="arrowLeft"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Previous page"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                  data-test-subj="pagination-button-previous"
+                                                  disabled={true}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="arrowLeft"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </EuiI18n>
+                                          </EuiI18n>
+                                          <ul
+                                            className="euiPagination__list"
+                                          >
+                                            <PaginationButton
+                                              key="0"
+                                              pageIndex={0}
+                                            >
+                                              <li
+                                                className="euiPagination__item"
+                                              >
+                                                <EuiPaginationButton
+                                                  aria-controls="random_html_id"
+                                                  hideOnMobile={true}
+                                                  isActive={true}
+                                                  onClick={[Function]}
+                                                  pageIndex={0}
+                                                  totalPages={1}
+                                                >
+                                                  <EuiI18n
+                                                    default="Page {page} of {totalPages}"
+                                                    token="euiPaginationButton.longPageString"
+                                                    values={
+                                                      Object {
+                                                        "page": 1,
+                                                        "totalPages": 1,
+                                                      }
+                                                    }
+                                                  >
+                                                    <EuiI18n
+                                                      default="Page {page}"
+                                                      token="euiPaginationButton.shortPageString"
+                                                      values={
+                                                        Object {
+                                                          "page": 1,
+                                                        }
+                                                      }
+                                                    >
+                                                      <EuiButtonEmpty
+                                                        aria-controls="random_html_id"
+                                                        aria-current={true}
+                                                        aria-label="Page 1 of 1"
+                                                        className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                                        color="text"
+                                                        data-test-subj="pagination-button-0"
+                                                        href="#random_html_id"
+                                                        isDisabled={true}
+                                                        onClick={[Function]}
+                                                        size="s"
+                                                      >
+                                                        <button
+                                                          aria-controls="random_html_id"
+                                                          aria-current={true}
+                                                          aria-label="Page 1 of 1"
+                                                          className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                                          data-test-subj="pagination-button-0"
+                                                          disabled={true}
+                                                          onClick={[Function]}
+                                                          type="button"
+                                                        >
+                                                          <EuiButtonContent
+                                                            className="euiButtonEmpty__content"
+                                                            iconSide="left"
+                                                            iconSize="m"
+                                                            textProps={
+                                                              Object {
+                                                                "className": "euiButtonEmpty__text",
+                                                              }
+                                                            }
+                                                          >
+                                                            <span
+                                                              className="euiButtonContent euiButtonEmpty__content"
+                                                            >
+                                                              <span
+                                                                className="euiButtonEmpty__text"
+                                                              >
+                                                                1
+                                                              </span>
+                                                            </span>
+                                                          </EuiButtonContent>
+                                                        </button>
+                                                      </EuiButtonEmpty>
+                                                    </EuiI18n>
+                                                  </EuiI18n>
+                                                </EuiPaginationButton>
+                                              </li>
+                                            </PaginationButton>
+                                          </ul>
+                                          <EuiI18n
+                                            default="Next page, {page}"
+                                            token="euiPagination.nextPage"
+                                            values={
+                                              Object {
+                                                "page": 2,
+                                              }
+                                            }
+                                          >
+                                            <EuiI18n
+                                              default="Next page"
+                                              token="euiPagination.disabledNextPage"
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Next page"
+                                                color="text"
+                                                data-test-subj="pagination-button-next"
+                                                disabled={true}
+                                                iconType="arrowRight"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Next page"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                  data-test-subj="pagination-button-next"
+                                                  disabled={true}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="arrowRight"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </EuiI18n>
+                                          </EuiI18n>
+                                        </nav>
+                                      </EuiPagination>
+                                    </div>
+                                  </EuiFlexItem>
+                                </div>
+                              </EuiFlexGroup>
+                            </EuiTablePagination>
+                          </div>
+                        </PaginationBar>
+                      </div>
+                    </EuiBasicTable>
+                  </EuiInMemoryTable>
+                </div>
+              </EuiPanel>
+            </EuiPageContent>
+          </div>
+        </EuiPageBody>
+      </div>
+    </EuiPage>
+  </div>
+</CustomPanelTable>
+`;
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
new file mode 100644
index 0000000000..ea88b57cd3
--- /dev/null
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -0,0 +1,3236 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Panels View Component renders panel view container with visualizations 1`] = `
+<CustomPanelView
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction] {
+        "calls": Array [
+          Array [],
+          Array [],
+          Array [],
+          Array [],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+        ],
+      },
+      "setBreadcrumbs": [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "href": "#/operational_panels/",
+                "text": "Operational panels",
+              },
+              Object {
+                "href": "observability#/",
+                "text": "Observability",
+              },
+              Object {
+                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
+                "text": "",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  cloneCustomPanel={[MockFunction]}
+  deleteCustomPanel={[MockFunction]}
+  dslService={
+    DSLService {
+      "fetch": [Function],
+      "fetchFields": [Function],
+      "fetchIndices": [Function],
+      "http": [MockFunction],
+    }
+  }
+  endTime="now"
+  http={[MockFunction]}
+  onEditClick={[Function]}
+  page="operationalPanels"
+  panelId="L8Sx53wBDp0rvEg3yoLb"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/operational_panels/",
+        "text": "Operational panels",
+      },
+      Object {
+        "href": "observability#/",
+        "text": "Observability",
+      },
+    ]
+  }
+  pplService={
+    PPLService {
+      "fetch": [Function],
+      "http": [MockFunction],
+    }
+  }
+  renameCustomPanel={[MockFunction]}
+  setEndTime={[MockFunction]}
+  setStartTime={[MockFunction]}
+  setToast={[MockFunction]}
+  startTime="now-30m"
+>
+  <div>
+    <EuiPage
+      id="panelView"
+    >
+      <div
+        className="euiPage euiPage--paddingMedium euiPage--grow"
+        id="panelView"
+      >
+        <EuiPageBody
+          component="div"
+        >
+          <div
+            className="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <EuiPageHeader>
+              <header
+                className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+              >
+                <EuiPageHeaderSection>
+                  <div
+                    className="euiPageHeaderSection"
+                  >
+                    <EuiTitle
+                      size="l"
+                    >
+                      <h1
+                        className="euiTitle euiTitle--large"
+                      />
+                    </EuiTitle>
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiSpacer
+                          size="s"
+                        >
+                          <div
+                            className="euiSpacer euiSpacer--s"
+                          />
+                        </EuiSpacer>
+                      </div>
+                    </EuiFlexItem>
+                    Created on 
+                    Invalid date
+                  </div>
+                </EuiPageHeaderSection>
+                <EuiPageHeaderSection>
+                  <div
+                    className="euiPageHeaderSection"
+                  >
+                    <EuiFlexGroup
+                      gutterSize="s"
+                    >
+                      <div
+                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      >
+                        <EuiFlexItem>
+                          <div
+                            className="euiFlexItem"
+                          >
+                            <EuiButton
+                              disabled={true}
+                              iconType="pencil"
+                              onClick={[Function]}
+                            >
+                              <EuiButtonDisplay
+                                baseClassName="euiButton"
+                                disabled={true}
+                                element="button"
+                                iconType="pencil"
+                                isDisabled={true}
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <button
+                                  className="euiButton euiButton--primary euiButton-isDisabled"
+                                  disabled={true}
+                                  onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                  type="button"
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    iconType="pencil"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButton__content"
+                                    >
+                                      <EuiIcon
+                                        className="euiButtonContent__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="pencil"
+                                      >
+                                        <EuiIconPencil
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M12.148 3.148L11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 01-.708 0 .502.502 0 010-.708l8.002-7.998zM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 010 1.414l-9 9A.997.997 0 015 15H2a1 1 0 01-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0111 1zM5 14H2v-3l3 3z"
+                                            />
+                                          </svg>
+                                        </EuiIconPencil>
+                                      </EuiIcon>
+                                      <span
+                                        className="euiButton__text"
+                                      >
+                                        Edit
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </button>
+                              </EuiButtonDisplay>
+                            </EuiButton>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <EuiPopover
+                              anchorPosition="downCenter"
+                              button={
+                                <EuiButton
+                                  disabled={false}
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  onClick={[Function]}
+                                >
+                                  Panel actions
+                                </EuiButton>
+                              }
+                              closePopover={[Function]}
+                              display="inlineBlock"
+                              hasArrow={true}
+                              isOpen={false}
+                              ownFocus={true}
+                              panelPaddingSize="none"
+                              withTitle={true}
+                            >
+                              <div
+                                className="euiPopover euiPopover--anchorDownCenter"
+                                withTitle={true}
+                              >
+                                <div
+                                  className="euiPopover__anchor"
+                                >
+                                  <EuiButton
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                  >
+                                    <EuiButtonDisplay
+                                      baseClassName="euiButton"
+                                      disabled={false}
+                                      element="button"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <button
+                                        className="euiButton euiButton--primary"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        style={
+                                          Object {
+                                            "minWidth": undefined,
+                                          }
+                                        }
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButton__content"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButton__text",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButton__text"
+                                            >
+                                              Panel actions
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonDisplay>
+                                  </EuiButton>
+                                </div>
+                              </div>
+                            </EuiPopover>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <AddVisualizationPopover
+                              addVizDisabled={false}
+                              showFlyout={[Function]}
+                            >
+                              <EuiPopover
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButton
+                                    data-test-subj="addVisualizationButton"
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                  >
+                                    Add visualization
+                                  </EuiButton>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                id="addVisualizationContextMenu"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                  id="addVisualizationContextMenu"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <EuiButton
+                                      data-test-subj="addVisualizationButton"
+                                      disabled={false}
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                    >
+                                      <EuiButtonDisplay
+                                        baseClassName="euiButton"
+                                        data-test-subj="addVisualizationButton"
+                                        disabled={false}
+                                        element="button"
+                                        iconSide="right"
+                                        iconType="arrowDown"
+                                        isDisabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <button
+                                          className="euiButton euiButton--primary"
+                                          data-test-subj="addVisualizationButton"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          style={
+                                            Object {
+                                              "minWidth": undefined,
+                                            }
+                                          }
+                                          type="button"
+                                        >
+                                          <EuiButtonContent
+                                            className="euiButton__content"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButton__text",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                            >
+                                              <EuiIcon
+                                                className="euiButtonContent__icon"
+                                                color="inherit"
+                                                size="m"
+                                                type="arrowDown"
+                                              >
+                                                <EuiIconArrowDown
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                      fillRule="non-zero"
+                                                    />
+                                                  </svg>
+                                                </EuiIconArrowDown>
+                                              </EuiIcon>
+                                              <span
+                                                className="euiButton__text"
+                                              >
+                                                Add visualization
+                                              </span>
+                                            </span>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonDisplay>
+                                    </EuiButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </AddVisualizationPopover>
+                          </div>
+                        </EuiFlexItem>
+                      </div>
+                    </EuiFlexGroup>
+                  </div>
+                </EuiPageHeaderSection>
+              </header>
+            </EuiPageHeader>
+            <EuiPageContentBody>
+              <div
+                className="euiPageContentBody"
+              >
+                <EuiFlexGroup
+                  gutterSize="s"
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  >
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <Autocomplete
+                          append={
+                            <EuiLink
+                              aria-label="ppl-info"
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "padding": "10px",
+                                }
+                              }
+                            >
+                              PPL
+                            </EuiLink>
+                          }
+                          baseQuery="source = "
+                          dslService={
+                            DSLService {
+                              "fetch": [Function],
+                              "fetchFields": [Function],
+                              "fetchIndices": [Function],
+                              "http": [MockFunction],
+                            }
+                          }
+                          getSuggestions={[Function]}
+                          handleQueryChange={[Function]}
+                          handleQuerySearch={[Function]}
+                          isDisabled={true}
+                          key="autocomplete-search-bar"
+                          onItemSelect={[Function]}
+                          placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                          possibleCommands={
+                            Array [
+                              Object {
+                                "label": "where",
+                              },
+                            ]
+                          }
+                          query=""
+                          tabId="panels-filter"
+                          tempQuery=""
+                        >
+                          <div
+                            aria-expanded={false}
+                            aria-haspopup="listbox"
+                            aria-labelledby="autocomplete-4-label"
+                            className="aa-Autocomplete"
+                            id="autocomplete-root"
+                            role="combobox"
+                          >
+                            <EuiFieldText
+                              append={
+                                <EuiLink
+                                  aria-label="ppl-info"
+                                  onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "padding": "10px",
+                                    }
+                                  }
+                                >
+                                  PPL
+                                </EuiLink>
+                              }
+                              aria-autocomplete="both"
+                              aria-labelledby="autocomplete-4-label"
+                              autoCapitalize="off"
+                              autoComplete="off"
+                              autoCorrect="off"
+                              autoFocus={false}
+                              data-test-subj="searchAutocompleteTextArea"
+                              disabled={true}
+                              enterKeyHint="search"
+                              fullWidth={true}
+                              id="autocomplete-textarea"
+                              maxLength={512}
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                              spellCheck="false"
+                              type="search"
+                              value=""
+                            >
+                              <EuiFormControlLayout
+                                append={
+                                  <EuiLink
+                                    aria-label="ppl-info"
+                                    onClick={[Function]}
+                                    style={
+                                      Object {
+                                        "padding": "10px",
+                                      }
+                                    }
+                                  >
+                                    PPL
+                                  </EuiLink>
+                                }
+                                fullWidth={true}
+                                inputId="autocomplete-textarea"
+                              >
+                                <div
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                                >
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiValidatableControl>
+                                      <input
+                                        aria-autocomplete="both"
+                                        aria-labelledby="autocomplete-4-label"
+                                        autoCapitalize="off"
+                                        autoComplete="off"
+                                        autoCorrect="off"
+                                        autoFocus={false}
+                                        className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                                        data-test-subj="searchAutocompleteTextArea"
+                                        disabled={true}
+                                        enterKeyHint="search"
+                                        id="autocomplete-textarea"
+                                        maxLength={512}
+                                        onBlur={[Function]}
+                                        onChange={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                        spellCheck="false"
+                                        type="search"
+                                        value=""
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons />
+                                  </div>
+                                  <EuiLink
+                                    aria-label="ppl-info"
+                                    className="euiFormControlLayout__append"
+                                    key="0/.0"
+                                    onClick={[Function]}
+                                    style={
+                                      Object {
+                                        "padding": "10px",
+                                      }
+                                    }
+                                  >
+                                    <button
+                                      aria-label="ppl-info"
+                                      className="euiLink euiLink--primary euiFormControlLayout__append"
+                                      disabled={false}
+                                      onClick={[Function]}
+                                      style={
+                                        Object {
+                                          "padding": "10px",
+                                        }
+                                      }
+                                      type="button"
+                                    >
+                                      PPL
+                                    </button>
+                                  </EuiLink>
+                                </div>
+                              </EuiFormControlLayout>
+                            </EuiFieldText>
+                          </div>
+                        </Autocomplete>
+                      </div>
+                    </EuiFlexItem>
+                    <EuiFlexItem
+                      grow={false}
+                    >
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <EuiSuperDatePicker
+                          commonlyUsedRanges={
+                            Array [
+                              Object {
+                                "end": "now/d",
+                                "label": "Today",
+                                "start": "now/d",
+                              },
+                              Object {
+                                "end": "now/w",
+                                "label": "This week",
+                                "start": "now/w",
+                              },
+                              Object {
+                                "end": "now/M",
+                                "label": "This month",
+                                "start": "now/M",
+                              },
+                              Object {
+                                "end": "now/y",
+                                "label": "This year",
+                                "start": "now/y",
+                              },
+                              Object {
+                                "end": "now-1d/d",
+                                "label": "Yesterday",
+                                "start": "now-1d/d",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Week to date",
+                                "start": "now/w",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Month to date",
+                                "start": "now/M",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Year to date",
+                                "start": "now/y",
+                              },
+                            ]
+                          }
+                          dateFormat=""
+                          end="now"
+                          isAutoRefreshOnly={false}
+                          isDisabled={false}
+                          isPaused={true}
+                          onTimeChange={[Function]}
+                          recentlyUsedRanges={Array []}
+                          refreshInterval={0}
+                          showUpdateButton={true}
+                          start="now-30m"
+                          timeFormat="HH:mm"
+                        >
+                          <EuiFlexGroup
+                            className="euiSuperDatePicker__flexWrapper"
+                            gutterSize="s"
+                            responsive={false}
+                          >
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                            >
+                              <EuiFlexItem>
+                                <div
+                                  className="euiFlexItem"
+                                >
+                                  <EuiFormControlLayout
+                                    className="euiSuperDatePicker"
+                                    isDisabled={false}
+                                    prepend={
+                                      <EuiQuickSelectPopover
+                                        applyTime={[Function]}
+                                        commonlyUsedRanges={
+                                          Array [
+                                            Object {
+                                              "end": "now/d",
+                                              "label": "Today",
+                                              "start": "now/d",
+                                            },
+                                            Object {
+                                              "end": "now/w",
+                                              "label": "This week",
+                                              "start": "now/w",
+                                            },
+                                            Object {
+                                              "end": "now/M",
+                                              "label": "This month",
+                                              "start": "now/M",
+                                            },
+                                            Object {
+                                              "end": "now/y",
+                                              "label": "This year",
+                                              "start": "now/y",
+                                            },
+                                            Object {
+                                              "end": "now-1d/d",
+                                              "label": "Yesterday",
+                                              "start": "now-1d/d",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Week to date",
+                                              "start": "now/w",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Month to date",
+                                              "start": "now/M",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Year to date",
+                                              "start": "now/y",
+                                            },
+                                          ]
+                                        }
+                                        dateFormat=""
+                                        end="now"
+                                        isAutoRefreshOnly={false}
+                                        isDisabled={false}
+                                        isPaused={true}
+                                        recentlyUsedRanges={Array []}
+                                        refreshInterval={0}
+                                        start="now-30m"
+                                      />
+                                    }
+                                  >
+                                    <div
+                                      className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                                    >
+                                      <EuiQuickSelectPopover
+                                        applyTime={[Function]}
+                                        className="euiFormControlLayout__prepend"
+                                        commonlyUsedRanges={
+                                          Array [
+                                            Object {
+                                              "end": "now/d",
+                                              "label": "Today",
+                                              "start": "now/d",
+                                            },
+                                            Object {
+                                              "end": "now/w",
+                                              "label": "This week",
+                                              "start": "now/w",
+                                            },
+                                            Object {
+                                              "end": "now/M",
+                                              "label": "This month",
+                                              "start": "now/M",
+                                            },
+                                            Object {
+                                              "end": "now/y",
+                                              "label": "This year",
+                                              "start": "now/y",
+                                            },
+                                            Object {
+                                              "end": "now-1d/d",
+                                              "label": "Yesterday",
+                                              "start": "now-1d/d",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Week to date",
+                                              "start": "now/w",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Month to date",
+                                              "start": "now/M",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Year to date",
+                                              "start": "now/y",
+                                            },
+                                          ]
+                                        }
+                                        dateFormat=""
+                                        end="now"
+                                        isAutoRefreshOnly={false}
+                                        isDisabled={false}
+                                        isPaused={true}
+                                        key="0/.0"
+                                        recentlyUsedRanges={Array []}
+                                        refreshInterval={0}
+                                        start="now-30m"
+                                      >
+                                        <EuiPopover
+                                          anchorClassName="euiQuickSelectPopover__anchor"
+                                          anchorPosition="downLeft"
+                                          button={
+                                            <EuiButtonEmpty
+                                              aria-label="Date quick select"
+                                              className="euiFormControlLayout__prepend"
+                                              data-test-subj="superDatePickerToggleQuickMenuButton"
+                                              iconSide="right"
+                                              iconType="arrowDown"
+                                              isDisabled={false}
+                                              onClick={[Function]}
+                                              size="xs"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiQuickSelectPopover__buttonText",
+                                                }
+                                              }
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              />
+                                            </EuiButtonEmpty>
+                                          }
+                                          closePopover={[Function]}
+                                          display="inlineBlock"
+                                          hasArrow={true}
+                                          isOpen={false}
+                                          ownFocus={true}
+                                          panelPaddingSize="m"
+                                        >
+                                          <div
+                                            className="euiPopover euiPopover--anchorDownLeft"
+                                          >
+                                            <div
+                                              className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                            >
+                                              <EuiButtonEmpty
+                                                aria-label="Date quick select"
+                                                className="euiFormControlLayout__prepend"
+                                                data-test-subj="superDatePickerToggleQuickMenuButton"
+                                                iconSide="right"
+                                                iconType="arrowDown"
+                                                isDisabled={false}
+                                                onClick={[Function]}
+                                                size="xs"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiQuickSelectPopover__buttonText",
+                                                  }
+                                                }
+                                              >
+                                                <button
+                                                  aria-label="Date quick select"
+                                                  className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                                  data-test-subj="superDatePickerToggleQuickMenuButton"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiButtonContent
+                                                    className="euiButtonEmpty__content"
+                                                    iconSide="right"
+                                                    iconSize="s"
+                                                    iconType="arrowDown"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                                      }
+                                                    }
+                                                  >
+                                                    <span
+                                                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                                    >
+                                                      <EuiIcon
+                                                        className="euiButtonContent__icon"
+                                                        color="inherit"
+                                                        size="s"
+                                                        type="arrowDown"
+                                                      >
+                                                        <EuiIconArrowDown
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                          focusable="false"
+                                                          role="img"
+                                                          style={null}
+                                                        >
+                                                          <svg
+                                                            aria-hidden={true}
+                                                            className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                            focusable="false"
+                                                            height={16}
+                                                            role="img"
+                                                            style={null}
+                                                            viewBox="0 0 16 16"
+                                                            width={16}
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                          >
+                                                            <path
+                                                              d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                              fillRule="non-zero"
+                                                            />
+                                                          </svg>
+                                                        </EuiIconArrowDown>
+                                                      </EuiIcon>
+                                                      <span
+                                                        className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                                      >
+                                                        <EuiIcon
+                                                          type="calendar"
+                                                        >
+                                                          <EuiIconCalendar
+                                                            aria-hidden={true}
+                                                            className="euiIcon euiIcon--medium"
+                                                            focusable="false"
+                                                            role="img"
+                                                            style={null}
+                                                          >
+                                                            <svg
+                                                              aria-hidden={true}
+                                                              className="euiIcon euiIcon--medium"
+                                                              focusable="false"
+                                                              height={16}
+                                                              role="img"
+                                                              style={null}
+                                                              viewBox="0 0 16 16"
+                                                              width={16}
+                                                              xmlns="http://www.w3.org/2000/svg"
+                                                            >
+                                                              <path
+                                                                d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                                fillRule="evenodd"
+                                                              />
+                                                            </svg>
+                                                          </EuiIconCalendar>
+                                                        </EuiIcon>
+                                                      </span>
+                                                    </span>
+                                                  </EuiButtonContent>
+                                                </button>
+                                              </EuiButtonEmpty>
+                                            </div>
+                                          </div>
+                                        </EuiPopover>
+                                      </EuiQuickSelectPopover>
+                                      <div
+                                        className="euiFormControlLayout__childrenWrapper"
+                                      >
+                                        <EuiDatePickerRange
+                                          className="euiDatePickerRange--inGroup"
+                                          endDateControl={<div />}
+                                          iconType={false}
+                                          isCustom={true}
+                                          startDateControl={<div />}
+                                        >
+                                          <div
+                                            className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                          >
+                                            <button
+                                              className="euiSuperDatePicker__prettyFormat"
+                                              data-test-subj="superDatePickerShowDatesButton"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                            >
+                                              Last 30 minutes
+                                              <span
+                                                className="euiSuperDatePicker__prettyFormatLink"
+                                              >
+                                                <EuiI18n
+                                                  default="Show dates"
+                                                  token="euiSuperDatePicker.showDatesButtonLabel"
+                                                >
+                                                  Show dates
+                                                </EuiI18n>
+                                              </span>
+                                            </button>
+                                          </div>
+                                        </EuiDatePickerRange>
+                                        <EuiFormControlLayoutIcons />
+                                      </div>
+                                    </div>
+                                  </EuiFormControlLayout>
+                                </div>
+                              </EuiFlexItem>
+                              <EuiFlexItem
+                                grow={false}
+                              >
+                                <div
+                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                >
+                                  <EuiSuperUpdateButton
+                                    data-test-subj="superDatePickerApplyTimeButton"
+                                    isDisabled={false}
+                                    isLoading={false}
+                                    needsUpdate={false}
+                                    onClick={[Function]}
+                                    showTooltip={true}
+                                  >
+                                    <EuiToolTip
+                                      delay="regular"
+                                      position="bottom"
+                                    >
+                                      <span
+                                        className="euiToolTipAnchor"
+                                        onKeyUp={[Function]}
+                                        onMouseOut={[Function]}
+                                        onMouseOver={[Function]}
+                                      >
+                                        <EuiButton
+                                          className="euiSuperUpdateButton"
+                                          color="primary"
+                                          data-test-subj="superDatePickerApplyTimeButton"
+                                          fill={true}
+                                          iconType="refresh"
+                                          isDisabled={false}
+                                          isLoading={false}
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          textProps={
+                                            Object {
+                                              "className": "euiSuperUpdateButton__text",
+                                            }
+                                          }
+                                        >
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
+                                            className="euiSuperUpdateButton"
+                                            color="primary"
+                                            data-test-subj="superDatePickerApplyTimeButton"
+                                            disabled={false}
+                                            element="button"
+                                            fill={true}
+                                            iconType="refresh"
+                                            isDisabled={false}
+                                            isLoading={false}
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            textProps={
+                                              Object {
+                                                "className": "euiSuperUpdateButton__text",
+                                              }
+                                            }
+                                            type="button"
+                                          >
+                                            <button
+                                              className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
+                                              data-test-subj="superDatePickerApplyTimeButton"
+                                              disabled={false}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              style={
+                                                Object {
+                                                  "minWidth": undefined,
+                                                }
+                                              }
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="left"
+                                                iconType="refresh"
+                                                isLoading={false}
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text euiSuperUpdateButton__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButton__content"
+                                                >
+                                                  <EuiIcon
+                                                    className="euiButtonContent__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="refresh"
+                                                  >
+                                                    <EuiIconRefresh
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconRefresh>
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiButton__text euiSuperUpdateButton__text"
+                                                  >
+                                                    <EuiI18n
+                                                      default="Refresh"
+                                                      token="euiSuperUpdateButton.refreshButtonLabel"
+                                                    >
+                                                      Refresh
+                                                    </EuiI18n>
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </span>
+                                    </EuiToolTip>
+                                  </EuiSuperUpdateButton>
+                                </div>
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </EuiSuperDatePicker>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+                <EuiSpacer
+                  size="l"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <EmptyPanelView
+                  addVizDisabled={false}
+                  showFlyout={[Function]}
+                >
+                  <div>
+                    <EuiSpacer
+                      size="xxl"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--xxl"
+                      />
+                    </EuiSpacer>
+                    <EuiText
+                      data-test-subj="addFirstVisualizationText"
+                      textAlign="center"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                        data-test-subj="addFirstVisualizationText"
+                      >
+                        <EuiTextAlign
+                          textAlign="center"
+                        >
+                          <div
+                            className="euiTextAlign euiTextAlign--center"
+                          >
+                            <h2>
+                              Start by adding your first visualization
+                            </h2>
+                            <EuiSpacer
+                              size="m"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--m"
+                              />
+                            </EuiSpacer>
+                            <EuiText
+                              color="subdued"
+                              size="m"
+                            >
+                              <div
+                                className="euiText euiText--medium"
+                              >
+                                <EuiTextColor
+                                  color="subdued"
+                                  component="div"
+                                >
+                                  <div
+                                    className="euiTextColor euiTextColor--subdued"
+                                  >
+                                    Use PPL Queries to fetch & filter observability data and create visualizations
+                                  </div>
+                                </EuiTextColor>
+                              </div>
+                            </EuiText>
+                          </div>
+                        </EuiTextAlign>
+                      </div>
+                    </EuiText>
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiFlexGroup
+                      justifyContent="center"
+                    >
+                      <div
+                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      >
+                        <EuiFlexItem
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <AddVisualizationPopover
+                              addVizDisabled={false}
+                              showFlyout={[Function]}
+                            >
+                              <EuiPopover
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButton
+                                    data-test-subj="addVisualizationButton"
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                  >
+                                    Add visualization
+                                  </EuiButton>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                id="addVisualizationContextMenu"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                  id="addVisualizationContextMenu"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <EuiButton
+                                      data-test-subj="addVisualizationButton"
+                                      disabled={false}
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                    >
+                                      <EuiButtonDisplay
+                                        baseClassName="euiButton"
+                                        data-test-subj="addVisualizationButton"
+                                        disabled={false}
+                                        element="button"
+                                        iconSide="right"
+                                        iconType="arrowDown"
+                                        isDisabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <button
+                                          className="euiButton euiButton--primary"
+                                          data-test-subj="addVisualizationButton"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          style={
+                                            Object {
+                                              "minWidth": undefined,
+                                            }
+                                          }
+                                          type="button"
+                                        >
+                                          <EuiButtonContent
+                                            className="euiButton__content"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButton__text",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                            >
+                                              <EuiIcon
+                                                className="euiButtonContent__icon"
+                                                color="inherit"
+                                                size="m"
+                                                type="arrowDown"
+                                              >
+                                                <EuiIconArrowDown
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                      fillRule="non-zero"
+                                                    />
+                                                  </svg>
+                                                </EuiIconArrowDown>
+                                              </EuiIcon>
+                                              <span
+                                                className="euiButton__text"
+                                              >
+                                                Add visualization
+                                              </span>
+                                            </span>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonDisplay>
+                                    </EuiButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </AddVisualizationPopover>
+                          </div>
+                        </EuiFlexItem>
+                      </div>
+                    </EuiFlexGroup>
+                    <EuiSpacer
+                      size="xxl"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--xxl"
+                      />
+                    </EuiSpacer>
+                  </div>
+                </EmptyPanelView>
+                <PanelGrid
+                  chrome={
+                    Object {
+                      "getIsNavDrawerLocked$": [MockFunction] {
+                        "calls": Array [
+                          Array [],
+                          Array [],
+                          Array [],
+                          Array [],
+                        ],
+                        "results": Array [
+                          Object {
+                            "type": "return",
+                            "value": Observable {
+                              "_isScalar": false,
+                              "_subscribe": [Function],
+                            },
+                          },
+                          Object {
+                            "type": "return",
+                            "value": Observable {
+                              "_isScalar": false,
+                              "_subscribe": [Function],
+                            },
+                          },
+                          Object {
+                            "type": "return",
+                            "value": Observable {
+                              "_isScalar": false,
+                              "_subscribe": [Function],
+                            },
+                          },
+                          Object {
+                            "type": "return",
+                            "value": Observable {
+                              "_isScalar": false,
+                              "_subscribe": [Function],
+                            },
+                          },
+                        ],
+                      },
+                      "setBreadcrumbs": [MockFunction] {
+                        "calls": Array [
+                          Array [
+                            Array [
+                              Object {
+                                "href": "#/operational_panels/",
+                                "text": "Operational panels",
+                              },
+                              Object {
+                                "href": "observability#/",
+                                "text": "Observability",
+                              },
+                              Object {
+                                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
+                                "text": "",
+                              },
+                            ],
+                          ],
+                        ],
+                        "results": Array [
+                          Object {
+                            "type": "return",
+                            "value": undefined,
+                          },
+                        ],
+                      },
+                    }
+                  }
+                  cloneVisualization={[Function]}
+                  editActionType=""
+                  editMode={false}
+                  endTime="now"
+                  http={[MockFunction]}
+                  onEditClick={[Function]}
+                  onRefresh={false}
+                  panelId="L8Sx53wBDp0rvEg3yoLb"
+                  panelVisualizations={Array []}
+                  pplFilterValue=""
+                  pplService={
+                    PPLService {
+                      "fetch": [Function],
+                      "http": [MockFunction],
+                    }
+                  }
+                  setPanelVisualizations={[Function]}
+                  showFlyout={[Function]}
+                  startTime="now-30m"
+                >
+                  <WidthProvider
+                    breakpoints={
+                      Object {
+                        "lg": 1200,
+                        "md": 996,
+                        "sm": 768,
+                        "xs": 480,
+                        "xxs": 0,
+                      }
+                    }
+                    className="layout full-width"
+                    cols={
+                      Object {
+                        "lg": 12,
+                        "md": 12,
+                        "sm": 12,
+                        "xs": 1,
+                        "xxs": 1,
+                      }
+                    }
+                    layouts={
+                      Object {
+                        "lg": Array [],
+                        "md": Array [],
+                        "sm": Array [],
+                      }
+                    }
+                    measureBeforeMount={false}
+                    onLayoutChange={[Function]}
+                  >
+                    <ResponsiveReactGridLayout
+                      breakpoints={
+                        Object {
+                          "lg": 1200,
+                          "md": 996,
+                          "sm": 768,
+                          "xs": 480,
+                          "xxs": 0,
+                        }
+                      }
+                      className="layout full-width"
+                      cols={
+                        Object {
+                          "lg": 12,
+                          "md": 12,
+                          "sm": 12,
+                          "xs": 1,
+                          "xxs": 1,
+                        }
+                      }
+                      layouts={
+                        Object {
+                          "lg": Array [],
+                          "md": Array [],
+                          "sm": Array [],
+                        }
+                      }
+                      onBreakpointChange={[Function]}
+                      onLayoutChange={[Function]}
+                      onWidthChange={[Function]}
+                      width={0}
+                    >
+                      <ReactGridLayout
+                        autoSize={true}
+                        className="layout full-width"
+                        cols={1}
+                        compactType="vertical"
+                        containerPadding={null}
+                        draggableCancel=""
+                        draggableHandle=""
+                        isDraggable={true}
+                        isResizable={true}
+                        layout={Array []}
+                        margin={
+                          Array [
+                            10,
+                            10,
+                          ]
+                        }
+                        maxRows={Infinity}
+                        onDrag={[Function]}
+                        onDragStart={[Function]}
+                        onDragStop={[Function]}
+                        onLayoutChange={[Function]}
+                        onResize={[Function]}
+                        onResizeStart={[Function]}
+                        onResizeStop={[Function]}
+                        preventCollision={false}
+                        rowHeight={150}
+                        style={Object {}}
+                        useCSSTransforms={true}
+                        verticalCompact={true}
+                        width={0}
+                      >
+                        <div
+                          className="react-grid-layout layout full-width"
+                          style={
+                            Object {
+                              "height": "10px",
+                            }
+                          }
+                        />
+                      </ReactGridLayout>
+                    </ResponsiveReactGridLayout>
+                  </WidthProvider>
+                </PanelGrid>
+              </div>
+            </EuiPageContentBody>
+          </div>
+        </EuiPageBody>
+      </div>
+    </EuiPage>
+  </div>
+</CustomPanelView>
+`;
+
+exports[`Panels View Component renders panel view container without visualizations 1`] = `
+<CustomPanelView
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction] {
+        "calls": Array [
+          Array [],
+          Array [],
+          Array [],
+          Array [],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+        ],
+      },
+      "setBreadcrumbs": [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "href": "#/operational_panels/",
+                "text": "Operational panels",
+              },
+              Object {
+                "href": "observability#/",
+                "text": "Observability",
+              },
+              Object {
+                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
+                "text": "",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  cloneCustomPanel={[MockFunction]}
+  deleteCustomPanel={[MockFunction]}
+  dslService={
+    DSLService {
+      "fetch": [Function],
+      "fetchFields": [Function],
+      "fetchIndices": [Function],
+      "http": [MockFunction],
+    }
+  }
+  endTime="now"
+  http={[MockFunction]}
+  onEditClick={[Function]}
+  page="operationalPanels"
+  panelId="L8Sx53wBDp0rvEg3yoLb"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/operational_panels/",
+        "text": "Operational panels",
+      },
+      Object {
+        "href": "observability#/",
+        "text": "Observability",
+      },
+    ]
+  }
+  pplService={
+    PPLService {
+      "fetch": [Function],
+      "http": [MockFunction],
+    }
+  }
+  renameCustomPanel={[MockFunction]}
+  setEndTime={[MockFunction]}
+  setStartTime={[MockFunction]}
+  setToast={[MockFunction]}
+  startTime="now-30m"
+>
+  <div>
+    <EuiPage
+      id="panelView"
+    >
+      <div
+        className="euiPage euiPage--paddingMedium euiPage--grow"
+        id="panelView"
+      >
+        <EuiPageBody
+          component="div"
+        >
+          <div
+            className="euiPageBody euiPageBody--borderRadiusNone"
+          >
+            <EuiPageHeader>
+              <header
+                className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+              >
+                <EuiPageHeaderSection>
+                  <div
+                    className="euiPageHeaderSection"
+                  >
+                    <EuiTitle
+                      size="l"
+                    >
+                      <h1
+                        className="euiTitle euiTitle--large"
+                      />
+                    </EuiTitle>
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiSpacer
+                          size="s"
+                        >
+                          <div
+                            className="euiSpacer euiSpacer--s"
+                          />
+                        </EuiSpacer>
+                      </div>
+                    </EuiFlexItem>
+                    Created on 
+                    Invalid date
+                  </div>
+                </EuiPageHeaderSection>
+                <EuiPageHeaderSection>
+                  <div
+                    className="euiPageHeaderSection"
+                  >
+                    <EuiFlexGroup
+                      gutterSize="s"
+                    >
+                      <div
+                        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      >
+                        <EuiFlexItem>
+                          <div
+                            className="euiFlexItem"
+                          >
+                            <EuiButton
+                              disabled={true}
+                              iconType="pencil"
+                              onClick={[Function]}
+                            >
+                              <EuiButtonDisplay
+                                baseClassName="euiButton"
+                                disabled={true}
+                                element="button"
+                                iconType="pencil"
+                                isDisabled={true}
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <button
+                                  className="euiButton euiButton--primary euiButton-isDisabled"
+                                  disabled={true}
+                                  onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                  type="button"
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    iconType="pencil"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButton__content"
+                                    >
+                                      <EuiIcon
+                                        className="euiButtonContent__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="pencil"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                      <span
+                                        className="euiButton__text"
+                                      >
+                                        Edit
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </button>
+                              </EuiButtonDisplay>
+                            </EuiButton>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <EuiPopover
+                              anchorPosition="downCenter"
+                              button={
+                                <EuiButton
+                                  disabled={false}
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  onClick={[Function]}
+                                >
+                                  Panel actions
+                                </EuiButton>
+                              }
+                              closePopover={[Function]}
+                              display="inlineBlock"
+                              hasArrow={true}
+                              isOpen={false}
+                              ownFocus={true}
+                              panelPaddingSize="none"
+                              withTitle={true}
+                            >
+                              <div
+                                className="euiPopover euiPopover--anchorDownCenter"
+                                withTitle={true}
+                              >
+                                <div
+                                  className="euiPopover__anchor"
+                                >
+                                  <EuiButton
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                  >
+                                    <EuiButtonDisplay
+                                      baseClassName="euiButton"
+                                      disabled={false}
+                                      element="button"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <button
+                                        className="euiButton euiButton--primary"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        style={
+                                          Object {
+                                            "minWidth": undefined,
+                                          }
+                                        }
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButton__content"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButton__text",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButton__text"
+                                            >
+                                              Panel actions
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonDisplay>
+                                  </EuiButton>
+                                </div>
+                              </div>
+                            </EuiPopover>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <AddVisualizationPopover
+                              addVizDisabled={false}
+                              showFlyout={[Function]}
+                            >
+                              <EuiPopover
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButton
+                                    data-test-subj="addVisualizationButton"
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                  >
+                                    Add visualization
+                                  </EuiButton>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                id="addVisualizationContextMenu"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                  id="addVisualizationContextMenu"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <EuiButton
+                                      data-test-subj="addVisualizationButton"
+                                      disabled={false}
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                    >
+                                      <EuiButtonDisplay
+                                        baseClassName="euiButton"
+                                        data-test-subj="addVisualizationButton"
+                                        disabled={false}
+                                        element="button"
+                                        iconSide="right"
+                                        iconType="arrowDown"
+                                        isDisabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <button
+                                          className="euiButton euiButton--primary"
+                                          data-test-subj="addVisualizationButton"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          style={
+                                            Object {
+                                              "minWidth": undefined,
+                                            }
+                                          }
+                                          type="button"
+                                        >
+                                          <EuiButtonContent
+                                            className="euiButton__content"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButton__text",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                            >
+                                              <EuiIcon
+                                                className="euiButtonContent__icon"
+                                                color="inherit"
+                                                size="m"
+                                                type="arrowDown"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                              <span
+                                                className="euiButton__text"
+                                              >
+                                                Add visualization
+                                              </span>
+                                            </span>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonDisplay>
+                                    </EuiButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </AddVisualizationPopover>
+                          </div>
+                        </EuiFlexItem>
+                      </div>
+                    </EuiFlexGroup>
+                  </div>
+                </EuiPageHeaderSection>
+              </header>
+            </EuiPageHeader>
+            <EuiPageContentBody>
+              <div
+                className="euiPageContentBody"
+              >
+                <EuiFlexGroup
+                  gutterSize="s"
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  >
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <Autocomplete
+                          append={
+                            <EuiLink
+                              aria-label="ppl-info"
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "padding": "10px",
+                                }
+                              }
+                            >
+                              PPL
+                            </EuiLink>
+                          }
+                          baseQuery="source = "
+                          dslService={
+                            DSLService {
+                              "fetch": [Function],
+                              "fetchFields": [Function],
+                              "fetchIndices": [Function],
+                              "http": [MockFunction],
+                            }
+                          }
+                          getSuggestions={[Function]}
+                          handleQueryChange={[Function]}
+                          handleQuerySearch={[Function]}
+                          isDisabled={true}
+                          key="autocomplete-search-bar"
+                          onItemSelect={[Function]}
+                          placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                          possibleCommands={
+                            Array [
+                              Object {
+                                "label": "where",
+                              },
+                            ]
+                          }
+                          query=""
+                          tabId="panels-filter"
+                          tempQuery=""
+                        >
+                          <div
+                            aria-expanded={false}
+                            aria-haspopup="listbox"
+                            aria-labelledby="autocomplete-1-label"
+                            className="aa-Autocomplete"
+                            id="autocomplete-root"
+                            role="combobox"
+                          >
+                            <EuiFieldText
+                              append={
+                                <EuiLink
+                                  aria-label="ppl-info"
+                                  onClick={[Function]}
+                                  style={
+                                    Object {
+                                      "padding": "10px",
+                                    }
+                                  }
+                                >
+                                  PPL
+                                </EuiLink>
+                              }
+                              aria-autocomplete="both"
+                              aria-labelledby="autocomplete-1-label"
+                              autoCapitalize="off"
+                              autoComplete="off"
+                              autoCorrect="off"
+                              autoFocus={false}
+                              data-test-subj="searchAutocompleteTextArea"
+                              disabled={true}
+                              enterKeyHint="search"
+                              fullWidth={true}
+                              id="autocomplete-textarea"
+                              maxLength={512}
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                              spellCheck="false"
+                              type="search"
+                              value=""
+                            >
+                              <EuiFormControlLayout
+                                append={
+                                  <EuiLink
+                                    aria-label="ppl-info"
+                                    onClick={[Function]}
+                                    style={
+                                      Object {
+                                        "padding": "10px",
+                                      }
+                                    }
+                                  >
+                                    PPL
+                                  </EuiLink>
+                                }
+                                fullWidth={true}
+                                inputId="autocomplete-textarea"
+                              >
+                                <div
+                                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                                >
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiValidatableControl>
+                                      <input
+                                        aria-autocomplete="both"
+                                        aria-labelledby="autocomplete-1-label"
+                                        autoCapitalize="off"
+                                        autoComplete="off"
+                                        autoCorrect="off"
+                                        autoFocus={false}
+                                        className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                                        data-test-subj="searchAutocompleteTextArea"
+                                        disabled={true}
+                                        enterKeyHint="search"
+                                        id="autocomplete-textarea"
+                                        maxLength={512}
+                                        onBlur={[Function]}
+                                        onChange={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        onKeyDown={[Function]}
+                                        placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                        spellCheck="false"
+                                        type="search"
+                                        value=""
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons />
+                                  </div>
+                                  <EuiLink
+                                    aria-label="ppl-info"
+                                    className="euiFormControlLayout__append"
+                                    key="0/.0"
+                                    onClick={[Function]}
+                                    style={
+                                      Object {
+                                        "padding": "10px",
+                                      }
+                                    }
+                                  >
+                                    <button
+                                      aria-label="ppl-info"
+                                      className="euiLink euiLink--primary euiFormControlLayout__append"
+                                      disabled={false}
+                                      onClick={[Function]}
+                                      style={
+                                        Object {
+                                          "padding": "10px",
+                                        }
+                                      }
+                                      type="button"
+                                    >
+                                      PPL
+                                    </button>
+                                  </EuiLink>
+                                </div>
+                              </EuiFormControlLayout>
+                            </EuiFieldText>
+                          </div>
+                        </Autocomplete>
+                      </div>
+                    </EuiFlexItem>
+                    <EuiFlexItem
+                      grow={false}
+                    >
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <EuiSuperDatePicker
+                          commonlyUsedRanges={
+                            Array [
+                              Object {
+                                "end": "now/d",
+                                "label": "Today",
+                                "start": "now/d",
+                              },
+                              Object {
+                                "end": "now/w",
+                                "label": "This week",
+                                "start": "now/w",
+                              },
+                              Object {
+                                "end": "now/M",
+                                "label": "This month",
+                                "start": "now/M",
+                              },
+                              Object {
+                                "end": "now/y",
+                                "label": "This year",
+                                "start": "now/y",
+                              },
+                              Object {
+                                "end": "now-1d/d",
+                                "label": "Yesterday",
+                                "start": "now-1d/d",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Week to date",
+                                "start": "now/w",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Month to date",
+                                "start": "now/M",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Year to date",
+                                "start": "now/y",
+                              },
+                            ]
+                          }
+                          dateFormat=""
+                          end="now"
+                          isAutoRefreshOnly={false}
+                          isDisabled={false}
+                          isPaused={true}
+                          onTimeChange={[Function]}
+                          recentlyUsedRanges={Array []}
+                          refreshInterval={0}
+                          showUpdateButton={true}
+                          start="now-30m"
+                          timeFormat="HH:mm"
+                        >
+                          <EuiFlexGroup
+                            className="euiSuperDatePicker__flexWrapper"
+                            gutterSize="s"
+                            responsive={false}
+                          >
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                            >
+                              <EuiFlexItem>
+                                <div
+                                  className="euiFlexItem"
+                                >
+                                  <EuiFormControlLayout
+                                    className="euiSuperDatePicker"
+                                    isDisabled={false}
+                                    prepend={
+                                      <EuiQuickSelectPopover
+                                        applyTime={[Function]}
+                                        commonlyUsedRanges={
+                                          Array [
+                                            Object {
+                                              "end": "now/d",
+                                              "label": "Today",
+                                              "start": "now/d",
+                                            },
+                                            Object {
+                                              "end": "now/w",
+                                              "label": "This week",
+                                              "start": "now/w",
+                                            },
+                                            Object {
+                                              "end": "now/M",
+                                              "label": "This month",
+                                              "start": "now/M",
+                                            },
+                                            Object {
+                                              "end": "now/y",
+                                              "label": "This year",
+                                              "start": "now/y",
+                                            },
+                                            Object {
+                                              "end": "now-1d/d",
+                                              "label": "Yesterday",
+                                              "start": "now-1d/d",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Week to date",
+                                              "start": "now/w",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Month to date",
+                                              "start": "now/M",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Year to date",
+                                              "start": "now/y",
+                                            },
+                                          ]
+                                        }
+                                        dateFormat=""
+                                        end="now"
+                                        isAutoRefreshOnly={false}
+                                        isDisabled={false}
+                                        isPaused={true}
+                                        recentlyUsedRanges={Array []}
+                                        refreshInterval={0}
+                                        start="now-30m"
+                                      />
+                                    }
+                                  >
+                                    <div
+                                      className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                                    >
+                                      <EuiQuickSelectPopover
+                                        applyTime={[Function]}
+                                        className="euiFormControlLayout__prepend"
+                                        commonlyUsedRanges={
+                                          Array [
+                                            Object {
+                                              "end": "now/d",
+                                              "label": "Today",
+                                              "start": "now/d",
+                                            },
+                                            Object {
+                                              "end": "now/w",
+                                              "label": "This week",
+                                              "start": "now/w",
+                                            },
+                                            Object {
+                                              "end": "now/M",
+                                              "label": "This month",
+                                              "start": "now/M",
+                                            },
+                                            Object {
+                                              "end": "now/y",
+                                              "label": "This year",
+                                              "start": "now/y",
+                                            },
+                                            Object {
+                                              "end": "now-1d/d",
+                                              "label": "Yesterday",
+                                              "start": "now-1d/d",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Week to date",
+                                              "start": "now/w",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Month to date",
+                                              "start": "now/M",
+                                            },
+                                            Object {
+                                              "end": "now",
+                                              "label": "Year to date",
+                                              "start": "now/y",
+                                            },
+                                          ]
+                                        }
+                                        dateFormat=""
+                                        end="now"
+                                        isAutoRefreshOnly={false}
+                                        isDisabled={false}
+                                        isPaused={true}
+                                        key="0/.0"
+                                        recentlyUsedRanges={Array []}
+                                        refreshInterval={0}
+                                        start="now-30m"
+                                      >
+                                        <EuiPopover
+                                          anchorClassName="euiQuickSelectPopover__anchor"
+                                          anchorPosition="downLeft"
+                                          button={
+                                            <EuiButtonEmpty
+                                              aria-label="Date quick select"
+                                              className="euiFormControlLayout__prepend"
+                                              data-test-subj="superDatePickerToggleQuickMenuButton"
+                                              iconSide="right"
+                                              iconType="arrowDown"
+                                              isDisabled={false}
+                                              onClick={[Function]}
+                                              size="xs"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiQuickSelectPopover__buttonText",
+                                                }
+                                              }
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              />
+                                            </EuiButtonEmpty>
+                                          }
+                                          closePopover={[Function]}
+                                          display="inlineBlock"
+                                          hasArrow={true}
+                                          isOpen={false}
+                                          ownFocus={true}
+                                          panelPaddingSize="m"
+                                        >
+                                          <div
+                                            className="euiPopover euiPopover--anchorDownLeft"
+                                          >
+                                            <div
+                                              className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                            >
+                                              <EuiButtonEmpty
+                                                aria-label="Date quick select"
+                                                className="euiFormControlLayout__prepend"
+                                                data-test-subj="superDatePickerToggleQuickMenuButton"
+                                                iconSide="right"
+                                                iconType="arrowDown"
+                                                isDisabled={false}
+                                                onClick={[Function]}
+                                                size="xs"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiQuickSelectPopover__buttonText",
+                                                  }
+                                                }
+                                              >
+                                                <button
+                                                  aria-label="Date quick select"
+                                                  className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                                  data-test-subj="superDatePickerToggleQuickMenuButton"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiButtonContent
+                                                    className="euiButtonEmpty__content"
+                                                    iconSide="right"
+                                                    iconSize="s"
+                                                    iconType="arrowDown"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                                      }
+                                                    }
+                                                  >
+                                                    <span
+                                                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                                    >
+                                                      <EuiIcon
+                                                        className="euiButtonContent__icon"
+                                                        color="inherit"
+                                                        size="s"
+                                                        type="arrowDown"
+                                                      >
+                                                        <EuiIconEmpty
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                          focusable="false"
+                                                          role="img"
+                                                          style={null}
+                                                        >
+                                                          <svg
+                                                            aria-hidden={true}
+                                                            className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                            focusable="false"
+                                                            height={16}
+                                                            role="img"
+                                                            style={null}
+                                                            viewBox="0 0 16 16"
+                                                            width={16}
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                          />
+                                                        </EuiIconEmpty>
+                                                      </EuiIcon>
+                                                      <span
+                                                        className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                                      >
+                                                        <EuiIcon
+                                                          type="calendar"
+                                                        >
+                                                          <EuiIconEmpty
+                                                            aria-hidden={true}
+                                                            className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                            focusable="false"
+                                                            role="img"
+                                                            style={null}
+                                                          >
+                                                            <svg
+                                                              aria-hidden={true}
+                                                              className="euiIcon euiIcon--medium 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>
+                                                      </span>
+                                                    </span>
+                                                  </EuiButtonContent>
+                                                </button>
+                                              </EuiButtonEmpty>
+                                            </div>
+                                          </div>
+                                        </EuiPopover>
+                                      </EuiQuickSelectPopover>
+                                      <div
+                                        className="euiFormControlLayout__childrenWrapper"
+                                      >
+                                        <EuiDatePickerRange
+                                          className="euiDatePickerRange--inGroup"
+                                          endDateControl={<div />}
+                                          iconType={false}
+                                          isCustom={true}
+                                          startDateControl={<div />}
+                                        >
+                                          <div
+                                            className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                          >
+                                            <button
+                                              className="euiSuperDatePicker__prettyFormat"
+                                              data-test-subj="superDatePickerShowDatesButton"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                            >
+                                              Last 30 minutes
+                                              <span
+                                                className="euiSuperDatePicker__prettyFormatLink"
+                                              >
+                                                <EuiI18n
+                                                  default="Show dates"
+                                                  token="euiSuperDatePicker.showDatesButtonLabel"
+                                                >
+                                                  Show dates
+                                                </EuiI18n>
+                                              </span>
+                                            </button>
+                                          </div>
+                                        </EuiDatePickerRange>
+                                        <EuiFormControlLayoutIcons />
+                                      </div>
+                                    </div>
+                                  </EuiFormControlLayout>
+                                </div>
+                              </EuiFlexItem>
+                              <EuiFlexItem
+                                grow={false}
+                              >
+                                <div
+                                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                                >
+                                  <EuiSuperUpdateButton
+                                    data-test-subj="superDatePickerApplyTimeButton"
+                                    isDisabled={false}
+                                    isLoading={false}
+                                    needsUpdate={false}
+                                    onClick={[Function]}
+                                    showTooltip={true}
+                                  >
+                                    <EuiToolTip
+                                      delay="regular"
+                                      position="bottom"
+                                    >
+                                      <span
+                                        className="euiToolTipAnchor"
+                                        onKeyUp={[Function]}
+                                        onMouseOut={[Function]}
+                                        onMouseOver={[Function]}
+                                      >
+                                        <EuiButton
+                                          className="euiSuperUpdateButton"
+                                          color="primary"
+                                          data-test-subj="superDatePickerApplyTimeButton"
+                                          fill={true}
+                                          iconType="refresh"
+                                          isDisabled={false}
+                                          isLoading={false}
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          textProps={
+                                            Object {
+                                              "className": "euiSuperUpdateButton__text",
+                                            }
+                                          }
+                                        >
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
+                                            className="euiSuperUpdateButton"
+                                            color="primary"
+                                            data-test-subj="superDatePickerApplyTimeButton"
+                                            disabled={false}
+                                            element="button"
+                                            fill={true}
+                                            iconType="refresh"
+                                            isDisabled={false}
+                                            isLoading={false}
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            textProps={
+                                              Object {
+                                                "className": "euiSuperUpdateButton__text",
+                                              }
+                                            }
+                                            type="button"
+                                          >
+                                            <button
+                                              className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
+                                              data-test-subj="superDatePickerApplyTimeButton"
+                                              disabled={false}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              style={
+                                                Object {
+                                                  "minWidth": undefined,
+                                                }
+                                              }
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="left"
+                                                iconType="refresh"
+                                                isLoading={false}
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text euiSuperUpdateButton__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButton__content"
+                                                >
+                                                  <EuiIcon
+                                                    className="euiButtonContent__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="refresh"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiButton__text euiSuperUpdateButton__text"
+                                                  >
+                                                    <EuiI18n
+                                                      default="Refresh"
+                                                      token="euiSuperUpdateButton.refreshButtonLabel"
+                                                    >
+                                                      Refresh
+                                                    </EuiI18n>
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </span>
+                                    </EuiToolTip>
+                                  </EuiSuperUpdateButton>
+                                </div>
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </EuiSuperDatePicker>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+                <EuiSpacer
+                  size="l"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <EmptyPanelView
+                  addVizDisabled={false}
+                  showFlyout={[Function]}
+                >
+                  <div>
+                    <EuiSpacer
+                      size="xxl"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--xxl"
+                      />
+                    </EuiSpacer>
+                    <EuiText
+                      data-test-subj="addFirstVisualizationText"
+                      textAlign="center"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                        data-test-subj="addFirstVisualizationText"
+                      >
+                        <EuiTextAlign
+                          textAlign="center"
+                        >
+                          <div
+                            className="euiTextAlign euiTextAlign--center"
+                          >
+                            <h2>
+                              Start by adding your first visualization
+                            </h2>
+                            <EuiSpacer
+                              size="m"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--m"
+                              />
+                            </EuiSpacer>
+                            <EuiText
+                              color="subdued"
+                              size="m"
+                            >
+                              <div
+                                className="euiText euiText--medium"
+                              >
+                                <EuiTextColor
+                                  color="subdued"
+                                  component="div"
+                                >
+                                  <div
+                                    className="euiTextColor euiTextColor--subdued"
+                                  >
+                                    Use PPL Queries to fetch & filter observability data and create visualizations
+                                  </div>
+                                </EuiTextColor>
+                              </div>
+                            </EuiText>
+                          </div>
+                        </EuiTextAlign>
+                      </div>
+                    </EuiText>
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiFlexGroup
+                      justifyContent="center"
+                    >
+                      <div
+                        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      >
+                        <EuiFlexItem
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          >
+                            <AddVisualizationPopover
+                              addVizDisabled={false}
+                              showFlyout={[Function]}
+                            >
+                              <EuiPopover
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButton
+                                    data-test-subj="addVisualizationButton"
+                                    disabled={false}
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                  >
+                                    Add visualization
+                                  </EuiButton>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                id="addVisualizationContextMenu"
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                  id="addVisualizationContextMenu"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <EuiButton
+                                      data-test-subj="addVisualizationButton"
+                                      disabled={false}
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                    >
+                                      <EuiButtonDisplay
+                                        baseClassName="euiButton"
+                                        data-test-subj="addVisualizationButton"
+                                        disabled={false}
+                                        element="button"
+                                        iconSide="right"
+                                        iconType="arrowDown"
+                                        isDisabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <button
+                                          className="euiButton euiButton--primary"
+                                          data-test-subj="addVisualizationButton"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          style={
+                                            Object {
+                                              "minWidth": undefined,
+                                            }
+                                          }
+                                          type="button"
+                                        >
+                                          <EuiButtonContent
+                                            className="euiButton__content"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButton__text",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                            >
+                                              <EuiIcon
+                                                className="euiButtonContent__icon"
+                                                color="inherit"
+                                                size="m"
+                                                type="arrowDown"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                              <span
+                                                className="euiButton__text"
+                                              >
+                                                Add visualization
+                                              </span>
+                                            </span>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonDisplay>
+                                    </EuiButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </AddVisualizationPopover>
+                          </div>
+                        </EuiFlexItem>
+                      </div>
+                    </EuiFlexGroup>
+                    <EuiSpacer
+                      size="xxl"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--xxl"
+                      />
+                    </EuiSpacer>
+                  </div>
+                </EmptyPanelView>
+                <PanelGrid
+                  chrome={
+                    Object {
+                      "getIsNavDrawerLocked$": [MockFunction] {
+                        "calls": Array [
+                          Array [],
+                          Array [],
+                          Array [],
+                          Array [],
+                        ],
+                        "results": Array [
+                          Object {
+                            "type": "return",
+                            "value": Observable {
+                              "_isScalar": false,
+                              "_subscribe": [Function],
+                            },
+                          },
+                          Object {
+                            "type": "return",
+                            "value": Observable {
+                              "_isScalar": false,
+                              "_subscribe": [Function],
+                            },
+                          },
+                          Object {
+                            "type": "return",
+                            "value": Observable {
+                              "_isScalar": false,
+                              "_subscribe": [Function],
+                            },
+                          },
+                          Object {
+                            "type": "return",
+                            "value": Observable {
+                              "_isScalar": false,
+                              "_subscribe": [Function],
+                            },
+                          },
+                        ],
+                      },
+                      "setBreadcrumbs": [MockFunction] {
+                        "calls": Array [
+                          Array [
+                            Array [
+                              Object {
+                                "href": "#/operational_panels/",
+                                "text": "Operational panels",
+                              },
+                              Object {
+                                "href": "observability#/",
+                                "text": "Observability",
+                              },
+                              Object {
+                                "href": "observability#/L8Sx53wBDp0rvEg3yoLb",
+                                "text": "",
+                              },
+                            ],
+                          ],
+                        ],
+                        "results": Array [
+                          Object {
+                            "type": "return",
+                            "value": undefined,
+                          },
+                        ],
+                      },
+                    }
+                  }
+                  cloneVisualization={[Function]}
+                  editActionType=""
+                  editMode={false}
+                  endTime="now"
+                  http={[MockFunction]}
+                  onEditClick={[Function]}
+                  onRefresh={false}
+                  panelId="L8Sx53wBDp0rvEg3yoLb"
+                  panelVisualizations={Array []}
+                  pplFilterValue=""
+                  pplService={
+                    PPLService {
+                      "fetch": [Function],
+                      "http": [MockFunction],
+                    }
+                  }
+                  setPanelVisualizations={[Function]}
+                  showFlyout={[Function]}
+                  startTime="now-30m"
+                >
+                  <WidthProvider
+                    breakpoints={
+                      Object {
+                        "lg": 1200,
+                        "md": 996,
+                        "sm": 768,
+                        "xs": 480,
+                        "xxs": 0,
+                      }
+                    }
+                    className="layout full-width"
+                    cols={
+                      Object {
+                        "lg": 12,
+                        "md": 12,
+                        "sm": 12,
+                        "xs": 1,
+                        "xxs": 1,
+                      }
+                    }
+                    layouts={
+                      Object {
+                        "lg": Array [],
+                        "md": Array [],
+                        "sm": Array [],
+                      }
+                    }
+                    measureBeforeMount={false}
+                    onLayoutChange={[Function]}
+                  >
+                    <ResponsiveReactGridLayout
+                      breakpoints={
+                        Object {
+                          "lg": 1200,
+                          "md": 996,
+                          "sm": 768,
+                          "xs": 480,
+                          "xxs": 0,
+                        }
+                      }
+                      className="layout full-width"
+                      cols={
+                        Object {
+                          "lg": 12,
+                          "md": 12,
+                          "sm": 12,
+                          "xs": 1,
+                          "xxs": 1,
+                        }
+                      }
+                      layouts={
+                        Object {
+                          "lg": Array [],
+                          "md": Array [],
+                          "sm": Array [],
+                        }
+                      }
+                      onBreakpointChange={[Function]}
+                      onLayoutChange={[Function]}
+                      onWidthChange={[Function]}
+                      width={0}
+                    >
+                      <ReactGridLayout
+                        autoSize={true}
+                        className="layout full-width"
+                        cols={1}
+                        compactType="vertical"
+                        containerPadding={null}
+                        draggableCancel=""
+                        draggableHandle=""
+                        isDraggable={true}
+                        isResizable={true}
+                        layout={Array []}
+                        margin={
+                          Array [
+                            10,
+                            10,
+                          ]
+                        }
+                        maxRows={Infinity}
+                        onDrag={[Function]}
+                        onDragStart={[Function]}
+                        onDragStop={[Function]}
+                        onLayoutChange={[Function]}
+                        onResize={[Function]}
+                        onResizeStart={[Function]}
+                        onResizeStop={[Function]}
+                        preventCollision={false}
+                        rowHeight={150}
+                        style={Object {}}
+                        useCSSTransforms={true}
+                        verticalCompact={true}
+                        width={0}
+                      >
+                        <div
+                          className="react-grid-layout layout full-width"
+                          style={
+                            Object {
+                              "height": "10px",
+                            }
+                          }
+                        />
+                      </ReactGridLayout>
+                    </ResponsiveReactGridLayout>
+                  </WidthProvider>
+                </PanelGrid>
+              </div>
+            </EuiPageContentBody>
+          </div>
+        </EuiPageBody>
+      </div>
+    </EuiPage>
+  </div>
+</CustomPanelView>
+`;
diff --git a/public/components/custom_panels/__tests__/custom_panel_table.test.tsx b/public/components/custom_panels/__tests__/custom_panel_table.test.tsx
new file mode 100644
index 0000000000..fb754bba30
--- /dev/null
+++ b/public/components/custom_panels/__tests__/custom_panel_table.test.tsx
@@ -0,0 +1,82 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { CustomPanelTable } from '../custom_panel_table';
+import { waitFor } from '@testing-library/react';
+import { panelBreadCrumbs, panelsData } from '../../../../test/panels_constants';
+import { CustomPanelListType } from '../../../../common/types/custom_panels';
+
+describe('Panels Table Component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty panel table container', async () => {
+    const loading = false;
+    const fetchCustomPanels = jest.fn();
+    const customPanelData: CustomPanelListType[] = [];
+    const createCustomPanel = jest.fn();
+    const setBreadcrumbs = jest.fn();
+    const parentBreadcrumb = panelBreadCrumbs;
+    const renameCustomPanel = jest.fn();
+    const cloneCustomPanel = jest.fn();
+    const deleteCustomPanelList = jest.fn();
+    const addSamplePanels = jest.fn();
+
+    const wrapper = mount(
+      <CustomPanelTable
+        loading={loading}
+        fetchCustomPanels={fetchCustomPanels}
+        customPanels={customPanelData}
+        createCustomPanel={createCustomPanel}
+        setBreadcrumbs={setBreadcrumbs}
+        parentBreadcrumbs={parentBreadcrumb}
+        renameCustomPanel={renameCustomPanel}
+        cloneCustomPanel={cloneCustomPanel}
+        deleteCustomPanelList={deleteCustomPanelList}
+        addSamplePanels={addSamplePanels}
+      />
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('renders panel table container', async () => {
+    const loading = false;
+    const fetchCustomPanels = jest.fn();
+    const customPanelData: CustomPanelListType[] = panelsData.panels;
+    const createCustomPanel = jest.fn();
+    const setBreadcrumbs = jest.fn();
+    const parentBreadcrumb = panelBreadCrumbs;
+    const renameCustomPanel = jest.fn();
+    const cloneCustomPanel = jest.fn();
+    const deleteCustomPanelList = jest.fn();
+    const addSamplePanels = jest.fn();
+
+    const wrapper = mount(
+      <CustomPanelTable
+        loading={loading}
+        fetchCustomPanels={fetchCustomPanels}
+        customPanels={customPanelData}
+        createCustomPanel={createCustomPanel}
+        setBreadcrumbs={setBreadcrumbs}
+        parentBreadcrumbs={parentBreadcrumb}
+        renameCustomPanel={renameCustomPanel}
+        cloneCustomPanel={cloneCustomPanel}
+        deleteCustomPanelList={deleteCustomPanelList}
+        addSamplePanels={addSamplePanels}
+      />
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/custom_panels/__tests__/custom_panel_view.test.tsx b/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
new file mode 100644
index 0000000000..81cb151cd6
--- /dev/null
+++ b/public/components/custom_panels/__tests__/custom_panel_view.test.tsx
@@ -0,0 +1,134 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { CustomPanelView } from '../custom_panel_view';
+import { waitFor } from '@testing-library/react';
+import {
+  panelBreadCrumbs,
+  sampleEmptyPanel,
+  samplePanel,
+  samplePPLResponse,
+  sampleSavedVisualization,
+} from '../../../../test/panels_constants';
+import httpClientMock from '../../../../test/__mocks__/httpClientMock';
+import PPLService from '../../../../public/services/requests/ppl';
+import DSLService from '../../../../public/services/requests/dsl';
+import { coreStartMock } from '../../../../test/__mocks__/coreMocks';
+import { HttpResponse } from '../../../../../../src/core/public';
+
+describe('Panels View Component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders panel view container without visualizations', async () => {
+    httpClientMock.get = jest.fn(() =>
+      Promise.resolve((sampleEmptyPanel as unknown) as HttpResponse)
+    );
+    const panelId = 'L8Sx53wBDp0rvEg3yoLb';
+    const http = httpClientMock;
+    const pplService = new PPLService(httpClientMock);
+    const dslService = new DSLService(httpClientMock);
+    const core = coreStartMock;
+    const parentBreadcrumbs = panelBreadCrumbs;
+    const start = 'now-30m';
+    const end = 'now';
+    const setStart = jest.fn();
+    const setEnd = jest.fn();
+    const renameCustomPanel = jest.fn();
+    const cloneCustomPanel = jest.fn();
+    const deleteCustomPanel = jest.fn();
+    const setToast = jest.fn();
+    const onEditClick = (savedVisId: string) => {
+      window.location.assign(`#/event_analytics/explorer/${savedVisId}`);
+    };
+
+    const wrapper = mount(
+      <CustomPanelView
+        panelId={panelId}
+        http={http}
+        pplService={pplService}
+        dslService={dslService}
+        chrome={core.chrome}
+        parentBreadcrumbs={parentBreadcrumbs}
+        renameCustomPanel={renameCustomPanel}
+        cloneCustomPanel={cloneCustomPanel}
+        deleteCustomPanel={deleteCustomPanel}
+        setToast={setToast}
+        onEditClick={onEditClick}
+        startTime={start}
+        endTime={end}
+        setStartTime={setStart}
+        setEndTime={setEnd}
+        page="operationalPanels"
+      />
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('renders panel view container with visualizations', async () => {
+    let counter = 0;
+    // Mocks two http get requests first for fetch panel
+    // Others for fetching visualizations in panel
+    httpClientMock.get = jest.fn(() => {
+      if (counter === 0) {
+        counter += 1;
+        return Promise.resolve((samplePanel as unknown) as HttpResponse);
+      } else return Promise.resolve((sampleSavedVisualization as unknown) as HttpResponse);
+    });
+
+    httpClientMock.post = jest.fn(() =>
+      Promise.resolve((samplePPLResponse as unknown) as HttpResponse)
+    );
+    const panelId = 'L8Sx53wBDp0rvEg3yoLb';
+    const http = httpClientMock;
+    const pplService = new PPLService(httpClientMock);
+    const dslService = new DSLService(httpClientMock);
+    const core = coreStartMock;
+    const parentBreadcrumbs = panelBreadCrumbs;
+    const start = 'now-30m';
+    const end = 'now';
+    const setStart = jest.fn();
+    const setEnd = jest.fn();
+    const renameCustomPanel = jest.fn();
+    const cloneCustomPanel = jest.fn();
+    const deleteCustomPanel = jest.fn();
+    const setToast = jest.fn();
+    const onEditClick = (savedVisId: string) => {
+      window.location.assign(`#/event_analytics/explorer/${savedVisId}`);
+    };
+
+    const wrapper = mount(
+      <CustomPanelView
+        panelId={panelId}
+        http={http}
+        pplService={pplService}
+        dslService={dslService}
+        chrome={core.chrome}
+        parentBreadcrumbs={parentBreadcrumbs}
+        renameCustomPanel={renameCustomPanel}
+        cloneCustomPanel={cloneCustomPanel}
+        deleteCustomPanel={deleteCustomPanel}
+        setToast={setToast}
+        onEditClick={onEditClick}
+        startTime={start}
+        endTime={end}
+        setStartTime={setStart}
+        setEndTime={setEnd}
+        page="operationalPanels"
+      />
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/custom_panels/custom_panel_table.tsx b/public/components/custom_panels/custom_panel_table.tsx
new file mode 100644
index 0000000000..a2c7ce8d67
--- /dev/null
+++ b/public/components/custom_panels/custom_panel_table.tsx
@@ -0,0 +1,413 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiBreadcrumb,
+  EuiButton,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPopover,
+  EuiSpacer,
+  EuiTableFieldDataColumnType,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import React, { ReactElement, useEffect, useState } from 'react';
+import moment from 'moment';
+import _ from 'lodash';
+import { ChromeBreadcrumb } from '../../../../../src/core/public';
+import {
+  CREATE_PANEL_MESSAGE,
+  CUSTOM_PANELS_DOCUMENTATION_URL,
+} from '../../../common/constants/custom_panels';
+import { UI_DATE_FORMAT } from '../../../common/constants/shared';
+import { getCustomModal } from './helpers/modal_containers';
+import { CustomPanelListType } from '../../../common/types/custom_panels';
+import { getSampleDataModal } from '../common/helpers/add_sample_modal';
+import { pageStyles } from '../../../common/constants/shared';
+import { DeleteModal } from '../common/helpers/delete_modal';
+
+/*
+ * "CustomPanelTable" module, used to view all the saved panels
+ *
+ * Props taken in as params are:
+ * loading: loader bool for the table
+ * fetchCustomPanels: fetch panels function
+ * customPanels: List of panels available
+ * createCustomPanel: create panel function
+ * setBreadcrumbs: setter for breadcrumbs on top panel
+ * parentBreadcrumb: parent breadcrumb
+ * renameCustomPanel: rename function for the panel
+ * cloneCustomPanel: clone function for the panel
+ * deleteCustomPanelList: delete function for the panels
+ */
+
+interface Props {
+  loading: boolean;
+  fetchCustomPanels: () => void;
+  customPanels: CustomPanelListType[];
+  createCustomPanel: (newCustomPanelName: string) => void;
+  setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
+  parentBreadcrumbs: EuiBreadcrumb[];
+  renameCustomPanel: (newCustomPanelName: string, customPanelId: string) => void;
+  cloneCustomPanel: (newCustomPanelName: string, customPanelId: string) => void;
+  deleteCustomPanelList: (customPanelIdList: string[], toastMessage: string) => any;
+  addSamplePanels: () => void;
+}
+
+export const CustomPanelTable = ({
+  loading,
+  fetchCustomPanels,
+  customPanels,
+  createCustomPanel,
+  setBreadcrumbs,
+  parentBreadcrumbs,
+  renameCustomPanel,
+  cloneCustomPanel,
+  deleteCustomPanelList,
+  addSamplePanels,
+}: Props) => {
+  const [isModalVisible, setIsModalVisible] = useState(false); // Modal Toggle
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />); // Modal Layout
+  const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
+  const [selectedCustomPanels, setselectedCustomPanels] = useState<CustomPanelListType[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    setBreadcrumbs(parentBreadcrumbs);
+    fetchCustomPanels();
+  }, []);
+
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const onCreate = async (newCustomPanelName: string) => {
+    createCustomPanel(newCustomPanelName);
+    closeModal();
+  };
+
+  const onRename = async (newCustomPanelName: string) => {
+    renameCustomPanel(newCustomPanelName, selectedCustomPanels[0].id);
+    closeModal();
+  };
+
+  const onClone = async (newName: string) => {
+    cloneCustomPanel(newName, selectedCustomPanels[0].id);
+    closeModal();
+  };
+
+  const onDelete = async () => {
+    const toastMessage = `Custom Panels ${
+      selectedCustomPanels.length > 1 ? 's' : ' ' + selectedCustomPanels[0].name
+    } successfully deleted!`;
+    const PanelList = selectedCustomPanels.map((panel) => panel.id);
+    deleteCustomPanelList(PanelList, toastMessage);
+    closeModal();
+  };
+
+  const createPanel = () => {
+    setModalLayout(
+      getCustomModal(
+        onCreate,
+        closeModal,
+        'Name',
+        'Create operational panel',
+        'Cancel',
+        'Create',
+        undefined,
+        CREATE_PANEL_MESSAGE
+      )
+    );
+    showModal();
+  };
+
+  const renamePanel = () => {
+    setModalLayout(
+      getCustomModal(
+        onRename,
+        closeModal,
+        'Name',
+        'Rename Panel',
+        'Cancel',
+        'Rename',
+        selectedCustomPanels[0].name,
+        CREATE_PANEL_MESSAGE
+      )
+    );
+    showModal();
+  };
+
+  const clonePanel = () => {
+    setModalLayout(
+      getCustomModal(
+        onClone,
+        closeModal,
+        'Name',
+        'Duplicate Panel',
+        'Cancel',
+        'Duplicate',
+        selectedCustomPanels[0].name + ' (copy)',
+        CREATE_PANEL_MESSAGE
+      )
+    );
+    showModal();
+  };
+
+  const deletePanel = () => {
+    const customPanelString = `operational panel${selectedCustomPanels.length > 1 ? 's' : ''}`;
+    setModalLayout(
+      <DeleteModal
+        onConfirm={onDelete}
+        onCancel={closeModal}
+        title={`Delete ${selectedCustomPanels.length} ${customPanelString}`}
+        message={`Are you sure you want to delete the selected ${selectedCustomPanels.length} ${customPanelString}?`}
+      />
+    );
+    showModal();
+  };
+
+  const addSampledata = async () => {
+    setModalLayout(
+      getSampleDataModal(closeModal, async () => {
+        closeModal();
+        await addSamplePanels();
+      })
+    );
+    showModal();
+  };
+
+  const popoverButton = (
+    <EuiButton
+      data-test-subj="operationalPanelsActionsButton"
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={() => setIsActionsPopoverOpen(!isActionsPopoverOpen)}
+    >
+      Actions
+    </EuiButton>
+  );
+
+  const popoverItems: ReactElement[] = [
+    <EuiContextMenuItem
+      key="rename"
+      disabled={customPanels.length === 0 || selectedCustomPanels.length !== 1}
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        renamePanel();
+      }}
+    >
+      Rename
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="duplicate"
+      disabled={customPanels.length === 0 || selectedCustomPanels.length !== 1}
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        clonePanel();
+      }}
+    >
+      Duplicate
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="delete"
+      data-test-subj="deleteContextMenuItem"
+      disabled={customPanels.length === 0 || selectedCustomPanels.length === 0}
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        deletePanel();
+      }}
+    >
+      Delete
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="addSample"
+      data-test-subj="addSampleContextMenuItem"
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        addSampledata();
+      }}
+    >
+      Add samples
+    </EuiContextMenuItem>,
+  ];
+
+  const tableColumns = [
+    {
+      field: 'name',
+      name: 'Name',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiLink href={`${_.last(parentBreadcrumbs)!.href}${record.id}`}>
+          {_.truncate(value, { length: 100 })}
+        </EuiLink>
+      ),
+    },
+    {
+      field: 'dateModified',
+      name: 'Last updated',
+      sortable: true,
+      render: (value) => moment(new Date(value)).format(UI_DATE_FORMAT),
+    },
+    {
+      field: 'dateCreated',
+      name: 'Created',
+      sortable: true,
+      render: (value) => moment(new Date(value)).format(UI_DATE_FORMAT),
+    },
+  ] as Array<EuiTableFieldDataColumnType<CustomPanelListType>>;
+
+  return (
+    <div style={pageStyles}>
+      <EuiPage>
+        <EuiPageBody component="div">
+          <EuiPageHeader>
+            <EuiPageHeaderSection>
+              <EuiTitle size="l">
+                <h1>Operational panels</h1>
+              </EuiTitle>
+            </EuiPageHeaderSection>
+          </EuiPageHeader>
+          <EuiPageContent id="customPanelArea">
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="s">
+                  <h3>
+                    Panels
+                    <span className="panel-header-count"> ({customPanels.length})</span>
+                  </h3>
+                </EuiTitle>
+                <EuiSpacer size="s" />
+                <EuiText size="s" color="subdued">
+                  Use Operational panels to create and view different visualizations on ingested
+                  observability data, using PPL (Piped Processing Language) queries.{' '}
+                  <EuiLink external={true} href={CUSTOM_PANELS_DOCUMENTATION_URL} target="blank">
+                    Learn more
+                  </EuiLink>
+                </EuiText>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup gutterSize="s">
+                  <EuiFlexItem>
+                    <EuiPopover
+                      panelPaddingSize="none"
+                      button={popoverButton}
+                      isOpen={isActionsPopoverOpen}
+                      closePopover={() => setIsActionsPopoverOpen(false)}
+                    >
+                      <EuiContextMenuPanel items={popoverItems} />
+                    </EuiPopover>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiButton
+                      fill
+                      onClick={() => createPanel()}
+                      data-test-subj="customPanels__createNewPanels"
+                    >
+                      Create panel
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+            <EuiHorizontalRule margin="m" />
+            {customPanels.length > 0 ? (
+              <>
+                <EuiFieldSearch
+                  fullWidth
+                  data-test-subj="operationalPanelSearchBar"
+                  placeholder="Search operational panel name"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+                <EuiHorizontalRule margin="m" />
+                <EuiInMemoryTable
+                  loading={loading}
+                  items={
+                    searchQuery
+                      ? customPanels.filter((customPanel) =>
+                          customPanel.name.toLowerCase().includes(searchQuery.toLowerCase())
+                        )
+                      : customPanels
+                  }
+                  itemId="id"
+                  columns={tableColumns}
+                  tableLayout="auto"
+                  pagination={{
+                    initialPageSize: 10,
+                    pageSizeOptions: [8, 10, 13],
+                  }}
+                  sorting={{
+                    sort: {
+                      field: 'dateModified',
+                      direction: 'desc',
+                    },
+                  }}
+                  allowNeutralSort={false}
+                  isSelectable={true}
+                  selection={{
+                    onSelectionChange: (items) => setselectedCustomPanels(items),
+                  }}
+                />
+              </>
+            ) : (
+              <>
+                <EuiSpacer size="xxl" />
+                <EuiText textAlign="center">
+                  <h2>No Operational Panels</h2>
+                  <EuiSpacer size="m" />
+                  <EuiText color="subdued">
+                    Use operational panels to dive deeper into observability
+                    <br />
+                    using PPL queries and insightful visualizations
+                  </EuiText>
+                </EuiText>
+                <EuiSpacer size="m" />
+                <EuiFlexGroup justifyContent="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      data-test-subj="customPanels__emptyCreateNewPanels"
+                      fullWidth={false}
+                      onClick={() => createPanel()}
+                    >
+                      Create panel
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton fullWidth={false} onClick={() => addSampledata()}>
+                      Add samples
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+                <EuiSpacer size="xxl" />
+              </>
+            )}
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+      {isModalVisible && modalLayout}
+    </div>
+  );
+};
diff --git a/public/components/custom_panels/custom_panel_view.tsx b/public/components/custom_panels/custom_panel_view.tsx
new file mode 100644
index 0000000000..be6ab6ae90
--- /dev/null
+++ b/public/components/custom_panels/custom_panel_view.tsx
@@ -0,0 +1,672 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable no-console */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiBreadcrumb,
+  EuiButton,
+  EuiContextMenu,
+  EuiContextMenuPanelDescriptor,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContentBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPopover,
+  EuiSpacer,
+  EuiSuperDatePicker,
+  EuiTitle,
+  OnTimeChangeProps,
+  ShortDate,
+} from '@elastic/eui';
+import { last } from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import moment from 'moment';
+import DSLService from '../../services/requests/dsl';
+import { CoreStart } from '../../../../../src/core/public';
+import { EmptyPanelView } from './panel_modules/empty_panel';
+import {
+  CREATE_PANEL_MESSAGE,
+  CUSTOM_PANELS_API_PREFIX,
+} from '../../../common/constants/custom_panels';
+import { SavedVisualizationType, VisualizationType } from '../../../common/types/custom_panels';
+import { PanelGrid } from './panel_modules/panel_grid';
+import { getCustomModal } from './helpers/modal_containers';
+import PPLService from '../../services/requests/ppl';
+import {
+  isDateValid,
+  convertDateTime,
+  onTimeChange,
+  isPPLFilterValid,
+  fetchVisualizationById,
+} from './helpers/utils';
+import { UI_DATE_FORMAT } from '../../../common/constants/shared';
+import { VisaulizationFlyout } from './panel_modules/visualization_flyout';
+import { uiSettingsService } from '../../../common/utils';
+import { PPLReferenceFlyout } from '../common/helpers';
+import { Autocomplete } from '../common/search/autocomplete';
+import {
+  parseGetSuggestions,
+  onItemSelect,
+  parseForIndices,
+} from '../common/search/autocomplete_logic';
+import { AddVisualizationPopover } from './helpers/add_visualization_popover';
+import { DeleteModal } from '../common/helpers/delete_modal';
+
+/*
+ * "CustomPanelsView" module used to render an Operational Panel
+ *
+ * Props taken in as params are:
+ * panelId: Name of the panel opened
+ * page: Page where component is called
+ * http: http core service
+ * pplService: ppl requestor service
+ * dslService: dsl requestor service
+ * chrome: chrome core service
+ * parentBreadcrumb: parent breadcrumb
+ * renameCustomPanel: Rename function for the panel
+ * deleteCustomPanel: Delete function for the panel
+ * cloneCustomPanel: Clone function for the panel
+ * setToast: create Toast function
+ * onEditClick: Edit function for visualization
+ * startTime: Starting time
+ * endTime: Ending time
+ * setStartTime: Function to change start time
+ * setEndTime: Function to change end time
+ * childBreadcrumbs: Breadcrumbs to extend
+ * appId: id of application that panel belongs to
+ * onAddClick: Function for add button instead of add visualization popover
+ */
+
+interface CustomPanelViewProps {
+  panelId: string;
+  page: 'app' | 'operationalPanels';
+  http: CoreStart['http'];
+  pplService: PPLService;
+  dslService: DSLService;
+  chrome: CoreStart['chrome'];
+  parentBreadcrumbs: EuiBreadcrumb[];
+  renameCustomPanel: (editedCustomPanelName: string, editedCustomPanelId: string) => Promise<void>;
+  deleteCustomPanel: (customPanelId: string, customPanelName: string) => Promise<any>;
+  cloneCustomPanel: (clonedCustomPanelName: string, clonedCustomPanelId: string) => Promise<string>;
+  setToast: (
+    title: string,
+    color?: string,
+    text?: React.ReactChild | undefined,
+    side?: string | undefined
+  ) => void;
+  onEditClick: (savedVisualizationId: string) => any;
+  startTime: string;
+  endTime: string;
+  setStartTime: any;
+  setEndTime: any;
+  childBreadcrumbs?: EuiBreadcrumb[];
+  appId?: string;
+  updateAvailabilityVizId?: any;
+  onAddClick?: any;
+}
+
+export const CustomPanelView = (props: CustomPanelViewProps) => {
+  const {
+    panelId,
+    page,
+    appId,
+    http,
+    pplService,
+    dslService,
+    chrome,
+    parentBreadcrumbs,
+    childBreadcrumbs,
+    startTime,
+    endTime,
+    setStartTime,
+    setEndTime,
+    updateAvailabilityVizId,
+    renameCustomPanel,
+    deleteCustomPanel,
+    cloneCustomPanel,
+    setToast,
+    onEditClick,
+    onAddClick,
+  } = props;
+  const [openPanelName, setOpenPanelName] = useState('');
+  const [panelCreatedTime, setPanelCreatedTime] = useState('');
+  const [pplFilterValue, setPPLFilterValue] = useState('');
+  const [baseQuery, setBaseQuery] = useState('');
+  const [onRefresh, setOnRefresh] = useState(false);
+
+  const [inputDisabled, setInputDisabled] = useState(true);
+  const [addVizDisabled, setAddVizDisabled] = useState(false);
+  const [editDisabled, setEditDisabled] = useState(false);
+  const [dateDisabled, setDateDisabled] = useState(false);
+  const [panelVisualizations, setPanelVisualizations] = useState<VisualizationType[]>([]);
+  const [editMode, setEditMode] = useState(false);
+  const [isModalVisible, setIsModalVisible] = useState(false); // Modal Toggle
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />); // Modal Layout
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); // Add Visualization Flyout
+  const [isFlyoutReplacement, setisFlyoutReplacement] = useState<boolean | undefined>(false);
+  const [replaceVisualizationId, setReplaceVisualizationId] = useState<string | undefined>('');
+  const [panelsMenuPopover, setPanelsMenuPopover] = useState(false);
+  const [editActionType, setEditActionType] = useState('');
+  const [isHelpFlyoutVisible, setHelpIsFlyoutVisible] = useState(false);
+
+  const appPanel = page === 'app';
+
+  const closeHelpFlyout = () => {
+    setAddVizDisabled(false);
+    setHelpIsFlyoutVisible(false);
+  };
+
+  const showHelpFlyout = () => {
+    setAddVizDisabled(true);
+    setHelpIsFlyoutVisible(true);
+  };
+
+  // DateTimePicker States
+  const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<DurationRange[]>([]);
+
+  // Fetch Panel by id
+  const fetchCustomPanel = async () => {
+    return http
+      .get(`${CUSTOM_PANELS_API_PREFIX}/panels/${panelId}`)
+      .then((res) => {
+        setOpenPanelName(res.operationalPanel.name);
+        setPanelCreatedTime(res.createdTimeMs);
+        setPPLFilterValue(res.operationalPanel.queryFilter.query);
+        setStartTime(startTime ? startTime : res.operationalPanel.timeRange.from);
+        setEndTime(endTime ? endTime : res.operationalPanel.timeRange.to);
+        setPanelVisualizations(res.operationalPanel.visualizations);
+      })
+      .catch((err) => {
+        console.error('Issue in fetching the operational panels', err);
+      });
+  };
+
+  const handleQueryChange = (newQuery: string) => {
+    setPPLFilterValue(newQuery);
+  };
+
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const onDatePickerChange = (timeProps: OnTimeChangeProps) => {
+    onTimeChange(
+      timeProps.start,
+      timeProps.end,
+      recentlyUsedRanges,
+      setRecentlyUsedRanges,
+      setStartTime,
+      setEndTime
+    );
+    onRefreshFilters(timeProps.start, timeProps.end);
+  };
+
+  const onDelete = async () => {
+    deleteCustomPanel(panelId, openPanelName).then((res) => {
+      setTimeout(() => {
+        window.location.assign(`${last(parentBreadcrumbs)!.href}`);
+      }, 1000);
+    });
+    closeModal();
+  };
+
+  const deletePanel = () => {
+    setModalLayout(
+      <DeleteModal
+        onConfirm={onDelete}
+        onCancel={closeModal}
+        title={`Delete ${openPanelName}`}
+        message={`Are you sure you want to delete this Operational Panel?`}
+      />
+    );
+    showModal();
+  };
+
+  const onRename = async (newCustomPanelName: string) => {
+    renameCustomPanel(newCustomPanelName, panelId).then(() => {
+      setOpenPanelName(newCustomPanelName);
+    });
+    closeModal();
+  };
+
+  const renamePanel = () => {
+    setModalLayout(
+      getCustomModal(
+        onRename,
+        closeModal,
+        'Name',
+        'Rename Panel',
+        'Cancel',
+        'Rename',
+        openPanelName,
+        CREATE_PANEL_MESSAGE
+      )
+    );
+    showModal();
+  };
+
+  const onClone = async (newCustomPanelName: string) => {
+    cloneCustomPanel(newCustomPanelName, panelId).then((id: string) => {
+      window.location.assign(`${last(parentBreadcrumbs)!.href}${id}`);
+    });
+    closeModal();
+  };
+
+  const clonePanel = () => {
+    setModalLayout(
+      getCustomModal(
+        onClone,
+        closeModal,
+        'Name',
+        'Duplicate Panel',
+        'Cancel',
+        'Duplicate',
+        openPanelName + ' (copy)',
+        CREATE_PANEL_MESSAGE
+      )
+    );
+    showModal();
+  };
+
+  // toggle between panel edit mode
+  const editPanel = (editType: string) => {
+    setEditMode(!editMode);
+    if (editType === 'cancel') fetchCustomPanel();
+    setEditActionType(editType);
+  };
+
+  const closeFlyout = () => {
+    setIsFlyoutVisible(false);
+    setAddVizDisabled(false);
+    checkDisabledInputs();
+  };
+
+  const showFlyout = (isReplacement?: boolean, replaceVizId?: string) => {
+    setisFlyoutReplacement(isReplacement);
+    setReplaceVisualizationId(replaceVizId);
+    setIsFlyoutVisible(true);
+    setAddVizDisabled(true);
+    setInputDisabled(true);
+  };
+
+  const checkDisabledInputs = () => {
+    // When not in edit mode and panel has no visualizations
+    if (panelVisualizations.length === 0 && !editMode) {
+      setEditDisabled(true);
+      setInputDisabled(true);
+      setAddVizDisabled(false);
+      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);
+    }
+  };
+
+  const buildBaseQuery = async () => {
+    const indices: string[] = [];
+    for (let i = 0; i < panelVisualizations.length; i++) {
+      const visualizationId = panelVisualizations[i].savedVisualizationId;
+      // TODO: create route to get list of visualizations in one call
+      const visData: SavedVisualizationType = await fetchVisualizationById(
+        http,
+        visualizationId,
+        (value: string) => setToast(value, 'danger')
+      );
+      const moreIndices = parseForIndices(visData.query);
+      for (let j = 0; j < moreIndices.length; j++) {
+        if (!indices.includes(moreIndices[j])) {
+          indices.push(moreIndices[j]);
+        }
+      }
+    }
+    setBaseQuery('source = ' + indices.join(', '));
+    return;
+  };
+
+  const onRefreshFilters = (start: ShortDate, end: ShortDate) => {
+    if (!isDateValid(convertDateTime(start), convertDateTime(end, false), setToast)) {
+      return;
+    }
+
+    if (!isPPLFilterValid(pplFilterValue, setToast)) {
+      return;
+    }
+
+    const panelFilterBody = {
+      panelId,
+      query: pplFilterValue,
+      language: 'ppl',
+      to: end,
+      from: start,
+    };
+
+    http
+      .post(`${CUSTOM_PANELS_API_PREFIX}/panels/filter`, {
+        body: JSON.stringify(panelFilterBody),
+      })
+      .then((res) => {
+        setOnRefresh(!onRefresh);
+      })
+      .catch((err) => {
+        setToast('Error is adding filters to the operational panel', 'danger');
+        console.error(err.body.message);
+      });
+  };
+
+  const cloneVisualization = (visualzationTitle: string, savedVisualizationId: string) => {
+    http
+      .post(`${CUSTOM_PANELS_API_PREFIX}/visualizations`, {
+        body: JSON.stringify({
+          panelId,
+          savedVisualizationId,
+        }),
+      })
+      .then(async (res) => {
+        setPanelVisualizations(res.visualizations);
+        setToast(`Visualization ${visualzationTitle} successfully added!`, 'success');
+      })
+      .catch((err) => {
+        setToast(`Error in adding ${visualzationTitle} visualization to the panel`, 'danger');
+        console.error(err);
+      });
+  };
+
+  const cancelButton = (
+    <EuiButton iconType="cross" color="danger" onClick={() => editPanel('cancel')}>
+      Cancel
+    </EuiButton>
+  );
+
+  const saveButton = (
+    <EuiButton iconType="save" onClick={() => editPanel('save')}>
+      Save
+    </EuiButton>
+  );
+
+  const editButton = (
+    <EuiButton iconType="pencil" onClick={() => editPanel('edit')} disabled={editDisabled}>
+      Edit
+    </EuiButton>
+  );
+
+  const addButton = (
+    <EuiButton
+      data-test-subj="addVisualizationButton"
+      iconType="plusInCircle"
+      onClick={onAddClick}
+      isDisabled={addVizDisabled}
+    >
+      Add
+    </EuiButton>
+  );
+
+  // Panel Actions Button
+  const panelActionsButton = (
+    <EuiButton
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={() => setPanelsMenuPopover(true)}
+      disabled={addVizDisabled}
+    >
+      Panel actions
+    </EuiButton>
+  );
+
+  let flyout;
+  if (isFlyoutVisible) {
+    flyout = (
+      <VisaulizationFlyout
+        panelId={panelId}
+        closeFlyout={closeFlyout}
+        pplFilterValue={pplFilterValue}
+        start={startTime}
+        end={endTime}
+        setToast={setToast}
+        http={http}
+        pplService={pplService}
+        setPanelVisualizations={setPanelVisualizations}
+        isFlyoutReplacement={isFlyoutReplacement}
+        replaceVisualizationId={replaceVisualizationId}
+        appId={appId}
+      />
+    );
+  }
+
+  let helpFlyout;
+  if (isHelpFlyoutVisible) {
+    helpFlyout = <PPLReferenceFlyout module="panels" closeFlyout={closeHelpFlyout} />;
+  }
+
+  const panelActionsMenu: EuiContextMenuPanelDescriptor[] = [
+    {
+      id: 0,
+      title: 'Panel actions',
+      items: [
+        {
+          name: 'Reload panel',
+          onClick: () => {
+            setPanelsMenuPopover(false);
+            fetchCustomPanel();
+          },
+        },
+        {
+          name: 'Rename panel',
+          onClick: () => {
+            setPanelsMenuPopover(false);
+            renamePanel();
+          },
+        },
+        {
+          name: 'Duplicate panel',
+          onClick: () => {
+            setPanelsMenuPopover(false);
+            clonePanel();
+          },
+        },
+        {
+          name: 'Delete panel',
+          onClick: () => {
+            setPanelsMenuPopover(false);
+            deletePanel();
+          },
+        },
+      ],
+    },
+  ];
+
+  // Fetch the custom panel on Initial Mount
+  useEffect(() => {
+    fetchCustomPanel();
+  }, [panelId]);
+
+  // Toggle input type (disabled or not disabled)
+  // Disabled when there no visualizations in panels or when the panel is in edit mode
+  useEffect(() => {
+    checkDisabledInputs();
+  }, [editMode]);
+
+  // Build base query with all of the indices included in the current visualizations
+  useEffect(() => {
+    checkDisabledInputs();
+    buildBaseQuery();
+  }, [panelVisualizations]);
+
+  // Edit the breadcrumb when panel name changes
+  useEffect(() => {
+    let newBreadcrumb;
+    if (childBreadcrumbs) {
+      newBreadcrumb = childBreadcrumbs;
+    } else {
+      newBreadcrumb = [
+        {
+          text: openPanelName,
+          href: `${last(parentBreadcrumbs)!.href}${panelId}`,
+        },
+      ];
+    }
+    chrome.setBreadcrumbs([...parentBreadcrumbs, ...newBreadcrumb]);
+  }, [panelId, openPanelName]);
+
+  return (
+    <div>
+      <EuiPage id={`panelView${appPanel ? 'InApp' : ''}`}>
+        <EuiPageBody component="div">
+          <EuiPageHeader>
+            {appPanel || (
+              <>
+                <EuiPageHeaderSection>
+                  <EuiTitle size="l">
+                    <h1>{openPanelName}</h1>
+                  </EuiTitle>
+                  <EuiFlexItem>
+                    <EuiSpacer size="s" />
+                  </EuiFlexItem>
+                  Created on {moment(panelCreatedTime).format(UI_DATE_FORMAT)}
+                </EuiPageHeaderSection>
+                <EuiPageHeaderSection>
+                  <EuiFlexGroup gutterSize="s">
+                    {editMode ? (
+                      <>
+                        <EuiFlexItem>{cancelButton}</EuiFlexItem>
+                        <EuiFlexItem>{saveButton}</EuiFlexItem>
+                      </>
+                    ) : (
+                      <EuiFlexItem>{editButton}</EuiFlexItem>
+                    )}
+                    <EuiFlexItem grow={false}>
+                      <EuiPopover
+                        panelPaddingSize="none"
+                        withTitle
+                        button={panelActionsButton}
+                        isOpen={panelsMenuPopover}
+                        closePopover={() => setPanelsMenuPopover(false)}
+                      >
+                        <EuiContextMenu initialPanelId={0} panels={panelActionsMenu} />
+                      </EuiPopover>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <AddVisualizationPopover
+                        addVizDisabled={addVizDisabled}
+                        showFlyout={showFlyout}
+                      />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiPageHeaderSection>
+              </>
+            )}
+          </EuiPageHeader>
+          <EuiPageContentBody>
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem>
+                <Autocomplete
+                  key={'autocomplete-search-bar'}
+                  query={pplFilterValue}
+                  tempQuery={pplFilterValue}
+                  baseQuery={baseQuery}
+                  handleQueryChange={handleQueryChange}
+                  handleQuerySearch={() => onRefreshFilters(startTime, endTime)}
+                  dslService={dslService}
+                  getSuggestions={parseGetSuggestions}
+                  onItemSelect={onItemSelect}
+                  isDisabled={inputDisabled}
+                  tabId={'panels-filter'}
+                  placeholder={
+                    "Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                  }
+                  possibleCommands={[{ label: 'where' }]}
+                  append={
+                    <EuiLink
+                      aria-label="ppl-info"
+                      onClick={showHelpFlyout}
+                      style={{ padding: '10px' }}
+                    >
+                      PPL
+                    </EuiLink>
+                  }
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiSuperDatePicker
+                  dateFormat={uiSettingsService.get('dateFormat')}
+                  start={startTime}
+                  end={endTime}
+                  onTimeChange={onDatePickerChange}
+                  recentlyUsedRanges={recentlyUsedRanges}
+                  isDisabled={dateDisabled}
+                />
+              </EuiFlexItem>
+              {appPanel && (
+                <>
+                  {editMode ? (
+                    <>
+                      <EuiFlexItem grow={false}>{cancelButton}</EuiFlexItem>
+                      <EuiFlexItem grow={false}>{saveButton}</EuiFlexItem>
+                    </>
+                  ) : (
+                    <EuiFlexItem grow={false}>{editButton}</EuiFlexItem>
+                  )}
+                  <EuiFlexItem grow={false}>{addButton}</EuiFlexItem>
+                </>
+              )}
+            </EuiFlexGroup>
+            <EuiSpacer size="l" />
+            {panelVisualizations.length === 0 && (
+              <EmptyPanelView
+                addVizDisabled={addVizDisabled}
+                showFlyout={showFlyout}
+                {...(appPanel ? { addButton } : {})}
+              />
+            )}
+            <PanelGrid
+              http={http}
+              panelId={panelId}
+              updateAvailabilityVizId={updateAvailabilityVizId}
+              chrome={chrome}
+              panelVisualizations={panelVisualizations}
+              setPanelVisualizations={setPanelVisualizations}
+              editMode={editMode}
+              pplService={pplService}
+              startTime={startTime}
+              endTime={endTime}
+              onRefresh={onRefresh}
+              cloneVisualization={cloneVisualization}
+              pplFilterValue={pplFilterValue}
+              showFlyout={showFlyout}
+              editActionType={editActionType}
+              onEditClick={onEditClick}
+            />
+          </EuiPageContentBody>
+        </EuiPageBody>
+      </EuiPage>
+      {isModalVisible && modalLayout}
+      {flyout}
+      {helpFlyout}
+    </div>
+  );
+};
diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/custom_input_model.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/custom_input_model.test.tsx.snap
new file mode 100644
index 0000000000..bbc895db33
--- /dev/null
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/custom_input_model.test.tsx.snap
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Custom Input Model component renders custom input modal with multiple arguments 1`] = `
+<EuiOverlayMask>
+  <EuiModal
+    initialFocus="[name=input]"
+    onClose={[MockFunction]}
+  >
+    <EuiModalHeader>
+      <EuiModalHeaderTitle>
+        Input test
+      </EuiModalHeaderTitle>
+    </EuiModalHeader>
+    <EuiModalBody>
+      <EuiForm>
+        <EuiFormRow
+          describedByIds={Array []}
+          display="row"
+          fullWidth={false}
+          hasChildLabel={true}
+          hasEmptyLabelSpace={false}
+          helpText="Help Text"
+          label="test label"
+          labelType="label"
+        >
+          <EuiFieldText
+            data-test-subj="customModalFieldText"
+            name="input"
+            onChange={[Function]}
+            value="Test Panel"
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </EuiModalBody>
+    <EuiModalFooter>
+      <EuiButtonEmpty
+        onClick={[MockFunction]}
+      >
+        btn test
+      </EuiButtonEmpty>
+      <EuiButton
+        data-test-subj="runModalButton"
+        fill={true}
+        onClick={[Function]}
+      >
+        btn test 2
+      </EuiButton>
+    </EuiModalFooter>
+  </EuiModal>
+</EuiOverlayMask>
+`;
+
+exports[`Custom Input Model component renders custom input modal with single argument 1`] = `
+<EuiOverlayMask>
+  <EuiModal
+    initialFocus="[name=input]"
+    onClose={[MockFunction]}
+  >
+    <EuiModalHeader>
+      <EuiModalHeaderTitle>
+        Input test
+      </EuiModalHeaderTitle>
+    </EuiModalHeader>
+    <EuiModalBody>
+      <EuiForm>
+        <EuiFormRow
+          describedByIds={Array []}
+          display="row"
+          fullWidth={false}
+          hasChildLabel={true}
+          hasEmptyLabelSpace={false}
+          label="test label"
+          labelType="label"
+        >
+          <EuiFieldText
+            data-test-subj="customModalFieldText"
+            name="input"
+            onChange={[Function]}
+            value=""
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </EuiModalBody>
+    <EuiModalFooter>
+      <EuiButtonEmpty
+        onClick={[MockFunction]}
+      >
+        btn test
+      </EuiButtonEmpty>
+      <EuiButton
+        data-test-subj="runModalButton"
+        fill={true}
+        onClick={[Function]}
+      >
+        btn test 2
+      </EuiButton>
+    </EuiModalFooter>
+  </EuiModal>
+</EuiOverlayMask>
+`;
diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/modal_container.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/modal_container.test.tsx.snap
new file mode 100644
index 0000000000..3d92156d3c
--- /dev/null
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/modal_container.test.tsx.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal Container component renders DeleteModal component 1`] = `
+<EuiOverlayMask>
+  <EuiModal
+    initialFocus="[name=input]"
+    onClose={[MockFunction]}
+  >
+    <EuiModalHeader>
+      <EuiModalHeaderTitle>
+        Test Title
+      </EuiModalHeaderTitle>
+    </EuiModalHeader>
+    <EuiModalBody>
+      <EuiText>
+        Test Message
+      </EuiText>
+      <EuiText>
+        The action cannot be undone.
+      </EuiText>
+      <EuiSpacer />
+      <EuiForm>
+        <EuiFormRow
+          describedByIds={Array []}
+          display="row"
+          fullWidth={false}
+          hasChildLabel={true}
+          hasEmptyLabelSpace={false}
+          label="To confirm deletion, enter \\"delete\\" in the text field"
+          labelType="label"
+        >
+          <EuiFieldText
+            data-test-subj="popoverModal__deleteTextInput"
+            name="input"
+            onChange={[Function]}
+            placeholder="delete"
+            value=""
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </EuiModalBody>
+    <EuiModalFooter>
+      <EuiButtonEmpty
+        onClick={[MockFunction]}
+      >
+        Cancel
+      </EuiButtonEmpty>
+      <EuiButton
+        color="danger"
+        data-test-subj="popoverModal__deleteButton"
+        disabled={true}
+        fill={true}
+        onClick={[Function]}
+      >
+        Delete
+      </EuiButton>
+    </EuiModalFooter>
+  </EuiModal>
+</EuiOverlayMask>
+`;
+
+exports[`Modal Container component renders getCloneModal function 1`] = `""`;
+
+exports[`Modal Container component renders getDeleteModal function 1`] = `""`;
diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
new file mode 100644
index 0000000000..5876133be8
--- /dev/null
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/utils.test.tsx.snap
@@ -0,0 +1,5018 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Utils helper functions renders displayVisualization function 1`] = `
+<div>
+  <Visualization
+    visualizations={
+      Object {
+        "data": Object {
+          "appData": Object {},
+          "defaultAxes": Object {
+            "xaxis": Array [
+              Object {
+                "label": "Carrier",
+                "name": "Carrier",
+                "type": "keyword",
+              },
+            ],
+            "yaxis": Array [
+              Object {
+                "label": "avg(FlightDelayMin)",
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
+              },
+            ],
+          },
+          "explorer": Object {
+            "explorerData": Object {
+              "data": Object {
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "size": 4,
+              "status": 200,
+            },
+            "explorerFields": Array [
+              Object {
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
+              },
+              Object {
+                "name": "Carrier",
+                "type": "keyword",
+              },
+            ],
+          },
+          "indexFields": Object {},
+          "query": Object {
+            "rawQuery": "source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier",
+          },
+          "rawVizData": Object {
+            "data": Object {
+              "Carrier": Array [
+                "BeatsWest",
+                "Logstash Airways",
+                "OpenSearch Dashboards Airlines",
+                "OpenSearch-Air",
+              ],
+              "avg(FlightDelayMin)": Array [
+                53.65384615384615,
+                45.36144578313253,
+                63.1578947368421,
+                46.81318681318681,
+              ],
+            },
+            "jsonData": Array [
+              Object {
+                "Carrier": "BeatsWest",
+                "avg(FlightDelayMin)": 53.65384615384615,
+              },
+              Object {
+                "Carrier": "Logstash Airways",
+                "avg(FlightDelayMin)": 45.36144578313253,
+              },
+              Object {
+                "Carrier": "OpenSearch Dashboards Airlines",
+                "avg(FlightDelayMin)": 63.1578947368421,
+              },
+              Object {
+                "Carrier": "OpenSearch-Air",
+                "avg(FlightDelayMin)": 46.81318681318681,
+              },
+            ],
+            "metadata": Object {
+              "fields": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "size": 4,
+            "status": 200,
+          },
+          "userConfigs": Object {
+            "availabilityConfig": Object {},
+            "dataConfig": Object {
+              "breakdowns": Array [],
+              "dimensions": Array [
+                Object {
+                  "customLabel": "",
+                  "label": "Carrier",
+                  "name": "Carrier",
+                },
+              ],
+              "series": Array [
+                Object {
+                  "aggregation": "sum",
+                  "customLabel": "delays",
+                  "label": "FlightDelayMin",
+                  "name": "FlightDelayMin",
+                },
+              ],
+              "span": undefined,
+            },
+            "layoutConfig": Object {},
+          },
+        },
+        "vis": Object {
+          "barwidth": 0.97,
+          "category": "Visualizations",
+          "categoryaxis": "xaxis",
+          "component": [Function],
+          "editorconfig": Object {
+            "panelTabs": Array [
+              Object {
+                "editor": [Function],
+                "id": "data-panel",
+                "mapTo": "dataConfig",
+                "name": "Style",
+                "sections": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "tooltip_options",
+                    "mapTo": "tooltipOptions",
+                    "name": "Tooltip options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "mapTo": "tooltipMode",
+                        "name": "Tooltip mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                            Object {
+                              "id": "hidden",
+                              "name": "Hidden",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": null,
+                        "mapTo": "tooltipText",
+                        "name": "Tooltip text",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "all",
+                              "name": "All",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "all",
+                              "name": "All",
+                            },
+                            Object {
+                              "id": "x",
+                              "name": "Dimension",
+                            },
+                            Object {
+                              "id": "y",
+                              "name": "Series",
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "legend",
+                    "mapTo": "legend",
+                    "name": "Legend",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "mapTo": "showLegend",
+                        "name": "Show legend",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                            Object {
+                              "id": "hidden",
+                              "name": "Hidden",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": null,
+                        "mapTo": "position",
+                        "name": "Position",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "v",
+                              "name": "Right",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "v",
+                              "name": "Right",
+                            },
+                            Object {
+                              "id": "h",
+                              "name": "Bottom",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "eleType": "input",
+                        "mapTo": "legendSize",
+                        "name": "Legend size",
+                        "title": "Legend size",
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "chart_styles",
+                    "mapTo": "chartStyles",
+                    "name": "Chart styles",
+                    "schemas": Array [
+                      Object {
+                        "component": [Function],
+                        "eleType": "buttons",
+                        "mapTo": "mode",
+                        "name": "Mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "group",
+                              "name": "Group",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "group",
+                              "name": "Group",
+                            },
+                            Object {
+                              "id": "stack",
+                              "name": "Stack",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "eleType": "input",
+                        "mapTo": "labelSize",
+                        "name": "Label size",
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 0,
+                        "eleType": "slider",
+                        "mapTo": "rotateBarLabels",
+                        "name": "Rotate bar labels",
+                        "props": Object {
+                          "max": 90,
+                          "min": -90,
+                          "showTicks": true,
+                          "ticks": Array [
+                            Object {
+                              "label": "-90°",
+                              "value": -90,
+                            },
+                            Object {
+                              "label": "-45°",
+                              "value": -45,
+                            },
+                            Object {
+                              "label": "0°",
+                              "value": 0,
+                            },
+                            Object {
+                              "label": "45°",
+                              "value": 45,
+                            },
+                            Object {
+                              "label": "90°",
+                              "value": 90,
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 0.7,
+                        "eleType": "slider",
+                        "mapTo": "groupWidth",
+                        "name": "Group width",
+                        "props": Object {
+                          "max": 1,
+                          "step": 0.01,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 0.97,
+                        "eleType": "slider",
+                        "mapTo": "barWidth",
+                        "name": "Bar width",
+                        "props": Object {
+                          "max": 1,
+                          "step": 0.01,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 2,
+                        "eleType": "slider",
+                        "mapTo": "lineWidth",
+                        "name": "Line width",
+                        "props": Object {
+                          "max": 10,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 70,
+                        "eleType": "slider",
+                        "mapTo": "fillOpacity",
+                        "name": "Fill opacity",
+                        "props": Object {
+                          "max": 100,
+                        },
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "color-theme",
+                    "mapTo": "colorTheme",
+                    "name": "Color theme",
+                    "schemas": Array [],
+                  },
+                ],
+              },
+              Object {
+                "editor": [Function],
+                "id": "availability-panel",
+                "mapTo": "availabilityConfig",
+                "name": "Availability",
+              },
+            ],
+          },
+          "fillopacity": 70,
+          "fulllabel": "Vertical bar",
+          "groupwidth": 0.7,
+          "icon": [Function],
+          "icontype": "visBarVerticalStacked",
+          "id": "bar",
+          "label": "Vertical bar",
+          "labelangle": 0,
+          "legendposition": "v",
+          "linewidth": 2,
+          "mode": "group",
+          "name": "bar",
+          "orientation": "v",
+          "selection": Object {
+            "dataLoss": "nothing",
+          },
+          "seriesaxis": "yaxis",
+          "showlegend": "show",
+          "type": "bar",
+          "visconfig": Object {
+            "config": Object {
+              "displaylogo": false,
+              "responsive": true,
+            },
+            "isUniColor": false,
+            "layout": Object {
+              "height": 1180,
+              "legend": Object {
+                "orientation": "v",
+                "traceorder": "normal",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
+              },
+              "showlegend": true,
+            },
+          },
+        },
+      }
+    }
+  >
+    <VisualizationChart
+      visualizations={
+        Object {
+          "data": Object {
+            "appData": Object {},
+            "defaultAxes": Object {
+              "xaxis": Array [
+                Object {
+                  "label": "Carrier",
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+              "yaxis": Array [
+                Object {
+                  "label": "avg(FlightDelayMin)",
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+              ],
+            },
+            "explorer": Object {
+              "explorerData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
+                    },
+                    Object {
+                      "name": "Carrier",
+                      "type": "keyword",
+                    },
+                  ],
+                },
+                "size": 4,
+                "status": 200,
+              },
+              "explorerFields": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "indexFields": Object {},
+            "query": Object {
+              "rawQuery": "source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier",
+            },
+            "rawVizData": Object {
+              "data": Object {
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "size": 4,
+              "status": 200,
+            },
+            "userConfigs": Object {
+              "availabilityConfig": Object {},
+              "dataConfig": Object {
+                "breakdowns": Array [],
+                "dimensions": Array [
+                  Object {
+                    "customLabel": "",
+                    "label": "Carrier",
+                    "name": "Carrier",
+                  },
+                ],
+                "series": Array [
+                  Object {
+                    "aggregation": "sum",
+                    "customLabel": "delays",
+                    "label": "FlightDelayMin",
+                    "name": "FlightDelayMin",
+                  },
+                ],
+                "span": undefined,
+              },
+              "layoutConfig": Object {},
+            },
+          },
+          "vis": Object {
+            "barwidth": 0.97,
+            "category": "Visualizations",
+            "categoryaxis": "xaxis",
+            "component": [Function],
+            "editorconfig": Object {
+              "panelTabs": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "data-panel",
+                  "mapTo": "dataConfig",
+                  "name": "Style",
+                  "sections": Array [
+                    Object {
+                      "editor": [Function],
+                      "id": "tooltip_options",
+                      "mapTo": "tooltipOptions",
+                      "name": "Tooltip options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipMode",
+                          "name": "Tooltip mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipText",
+                          "name": "Tooltip text",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                              Object {
+                                "id": "x",
+                                "name": "Dimension",
+                              },
+                              Object {
+                                "id": "y",
+                                "name": "Series",
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "legend",
+                      "mapTo": "legend",
+                      "name": "Legend",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "showLegend",
+                          "name": "Show legend",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "position",
+                          "name": "Position",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                              Object {
+                                "id": "h",
+                                "name": "Bottom",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "legendSize",
+                          "name": "Legend size",
+                          "title": "Legend size",
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "chart_styles",
+                      "mapTo": "chartStyles",
+                      "name": "Chart styles",
+                      "schemas": Array [
+                        Object {
+                          "component": [Function],
+                          "eleType": "buttons",
+                          "mapTo": "mode",
+                          "name": "Mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "group",
+                                "name": "Group",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "group",
+                                "name": "Group",
+                              },
+                              Object {
+                                "id": "stack",
+                                "name": "Stack",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "labelSize",
+                          "name": "Label size",
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0,
+                          "eleType": "slider",
+                          "mapTo": "rotateBarLabels",
+                          "name": "Rotate bar labels",
+                          "props": Object {
+                            "max": 90,
+                            "min": -90,
+                            "showTicks": true,
+                            "ticks": Array [
+                              Object {
+                                "label": "-90°",
+                                "value": -90,
+                              },
+                              Object {
+                                "label": "-45°",
+                                "value": -45,
+                              },
+                              Object {
+                                "label": "0°",
+                                "value": 0,
+                              },
+                              Object {
+                                "label": "45°",
+                                "value": 45,
+                              },
+                              Object {
+                                "label": "90°",
+                                "value": 90,
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0.7,
+                          "eleType": "slider",
+                          "mapTo": "groupWidth",
+                          "name": "Group width",
+                          "props": Object {
+                            "max": 1,
+                            "step": 0.01,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0.97,
+                          "eleType": "slider",
+                          "mapTo": "barWidth",
+                          "name": "Bar width",
+                          "props": Object {
+                            "max": 1,
+                            "step": 0.01,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 2,
+                          "eleType": "slider",
+                          "mapTo": "lineWidth",
+                          "name": "Line width",
+                          "props": Object {
+                            "max": 10,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 70,
+                          "eleType": "slider",
+                          "mapTo": "fillOpacity",
+                          "name": "Fill opacity",
+                          "props": Object {
+                            "max": 100,
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "color-theme",
+                      "mapTo": "colorTheme",
+                      "name": "Color theme",
+                      "schemas": Array [],
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "availability-panel",
+                  "mapTo": "availabilityConfig",
+                  "name": "Availability",
+                },
+              ],
+            },
+            "fillopacity": 70,
+            "fulllabel": "Vertical bar",
+            "groupwidth": 0.7,
+            "icon": [Function],
+            "icontype": "visBarVerticalStacked",
+            "id": "bar",
+            "label": "Vertical bar",
+            "labelangle": 0,
+            "legendposition": "v",
+            "linewidth": 2,
+            "mode": "group",
+            "name": "bar",
+            "orientation": "v",
+            "selection": Object {
+              "dataLoss": "nothing",
+            },
+            "seriesaxis": "yaxis",
+            "showlegend": "show",
+            "type": "bar",
+            "visconfig": Object {
+              "config": Object {
+                "displaylogo": false,
+                "responsive": true,
+              },
+              "isUniColor": false,
+              "layout": Object {
+                "height": 1180,
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "showlegend": true,
+              },
+            },
+          },
+        }
+      }
+    >
+      <Bar
+        config={
+          Object {
+            "displaylogo": false,
+            "responsive": true,
+          }
+        }
+        layout={[Function]}
+        visualizations={
+          Object {
+            "data": Object {
+              "appData": Object {},
+              "defaultAxes": Object {
+                "xaxis": Array [
+                  Object {
+                    "label": "Carrier",
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+                "yaxis": Array [
+                  Object {
+                    "label": "avg(FlightDelayMin)",
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                ],
+              },
+              "explorer": Object {
+                "explorerData": Object {
+                  "data": Object {
+                    "Carrier": Array [
+                      "BeatsWest",
+                      "Logstash Airways",
+                      "OpenSearch Dashboards Airlines",
+                      "OpenSearch-Air",
+                    ],
+                    "avg(FlightDelayMin)": Array [
+                      53.65384615384615,
+                      45.36144578313253,
+                      63.1578947368421,
+                      46.81318681318681,
+                    ],
+                  },
+                  "jsonData": Array [
+                    Object {
+                      "Carrier": "BeatsWest",
+                      "avg(FlightDelayMin)": 53.65384615384615,
+                    },
+                    Object {
+                      "Carrier": "Logstash Airways",
+                      "avg(FlightDelayMin)": 45.36144578313253,
+                    },
+                    Object {
+                      "Carrier": "OpenSearch Dashboards Airlines",
+                      "avg(FlightDelayMin)": 63.1578947368421,
+                    },
+                    Object {
+                      "Carrier": "OpenSearch-Air",
+                      "avg(FlightDelayMin)": 46.81318681318681,
+                    },
+                  ],
+                  "metadata": Object {
+                    "fields": Array [
+                      Object {
+                        "name": "avg(FlightDelayMin)",
+                        "type": "double",
+                      },
+                      Object {
+                        "name": "Carrier",
+                        "type": "keyword",
+                      },
+                    ],
+                  },
+                  "size": 4,
+                  "status": 200,
+                },
+                "explorerFields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "indexFields": Object {},
+              "query": Object {
+                "rawQuery": "source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier",
+              },
+              "rawVizData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
+                    },
+                    Object {
+                      "name": "Carrier",
+                      "type": "keyword",
+                    },
+                  ],
+                },
+                "size": 4,
+                "status": 200,
+              },
+              "userConfigs": Object {
+                "availabilityConfig": Object {},
+                "dataConfig": Object {
+                  "breakdowns": Array [],
+                  "dimensions": Array [
+                    Object {
+                      "customLabel": "",
+                      "label": "Carrier",
+                      "name": "Carrier",
+                    },
+                  ],
+                  "series": Array [
+                    Object {
+                      "aggregation": "sum",
+                      "customLabel": "delays",
+                      "label": "FlightDelayMin",
+                      "name": "FlightDelayMin",
+                    },
+                  ],
+                  "span": undefined,
+                },
+                "layoutConfig": Object {},
+              },
+            },
+            "vis": Object {
+              "barwidth": 0.97,
+              "category": "Visualizations",
+              "categoryaxis": "xaxis",
+              "component": [Function],
+              "editorconfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                                Object {
+                                  "id": "x",
+                                  "name": "Dimension",
+                                },
+                                Object {
+                                  "id": "y",
+                                  "name": "Series",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "showLegend",
+                            "name": "Show legend",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "position",
+                            "name": "Position",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                                Object {
+                                  "id": "h",
+                                  "name": "Bottom",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "legendSize",
+                            "name": "Legend size",
+                            "title": "Legend size",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_styles",
+                        "mapTo": "chartStyles",
+                        "name": "Chart styles",
+                        "schemas": Array [
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                                Object {
+                                  "id": "stack",
+                                  "name": "Stack",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label size",
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0,
+                            "eleType": "slider",
+                            "mapTo": "rotateBarLabels",
+                            "name": "Rotate bar labels",
+                            "props": Object {
+                              "max": 90,
+                              "min": -90,
+                              "showTicks": true,
+                              "ticks": Array [
+                                Object {
+                                  "label": "-90°",
+                                  "value": -90,
+                                },
+                                Object {
+                                  "label": "-45°",
+                                  "value": -45,
+                                },
+                                Object {
+                                  "label": "0°",
+                                  "value": 0,
+                                },
+                                Object {
+                                  "label": "45°",
+                                  "value": 45,
+                                },
+                                Object {
+                                  "label": "90°",
+                                  "value": 90,
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.7,
+                            "eleType": "slider",
+                            "mapTo": "groupWidth",
+                            "name": "Group width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.97,
+                            "eleType": "slider",
+                            "mapTo": "barWidth",
+                            "name": "Bar width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 2,
+                            "eleType": "slider",
+                            "mapTo": "lineWidth",
+                            "name": "Line width",
+                            "props": Object {
+                              "max": 10,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 70,
+                            "eleType": "slider",
+                            "mapTo": "fillOpacity",
+                            "name": "Fill opacity",
+                            "props": Object {
+                              "max": 100,
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "color-theme",
+                        "mapTo": "colorTheme",
+                        "name": "Color theme",
+                        "schemas": Array [],
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "availability-panel",
+                    "mapTo": "availabilityConfig",
+                    "name": "Availability",
+                  },
+                ],
+              },
+              "fillopacity": 70,
+              "fulllabel": "Vertical bar",
+              "groupwidth": 0.7,
+              "icon": [Function],
+              "icontype": "visBarVerticalStacked",
+              "id": "bar",
+              "label": "Vertical bar",
+              "labelangle": 0,
+              "legendposition": "v",
+              "linewidth": 2,
+              "mode": "group",
+              "name": "bar",
+              "orientation": "v",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesaxis": "yaxis",
+              "showlegend": "show",
+              "type": "bar",
+              "visconfig": Object {
+                "config": Object {
+                  "displaylogo": false,
+                  "responsive": true,
+                },
+                "isUniColor": false,
+                "layout": Object {
+                  "height": 1180,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "showlegend": true,
+                },
+              },
+            },
+          }
+        }
+      >
+        <Plt
+          config={
+            Object {
+              "displaylogo": false,
+              "responsive": true,
+            }
+          }
+          data={
+            Array [
+              Object {
+                "hoverinfo": "all",
+                "marker": Object {
+                  "color": "rgba(60,161,199,0.35)",
+                  "line": Object {
+                    "color": "#3CA1C7",
+                    "width": 2,
+                  },
+                },
+                "name": "delays",
+                "orientation": "v",
+                "type": "bar",
+                "x": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "y": Array [
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                ],
+              },
+              Object {
+                "mode": "text",
+                "text": Array [],
+                "x": Array [],
+                "y": Array [],
+              },
+            ]
+          }
+          layout={
+            Object {
+              "bargap": 0.30000000000000004,
+              "bargroupgap": 0.030000000000000027,
+              "barmode": "group",
+              "colorway": Array [
+                "#3CA1C7",
+                "#8C55A3",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+                "#843769",
+                "#374FB8",
+                "#BD6F26",
+                "#4C636F",
+              ],
+              "hovermode": "closest",
+              "legend": Object {
+                "orientation": "v",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 30,
+                "pad": 4,
+                "r": 5,
+                "t": 50,
+              },
+              "shapes": Array [],
+              "showlegend": "show",
+              "title": "",
+              "xaxis": Object {
+                "automargin": true,
+                "tickangle": 0,
+                "tickfont": Object {
+                  "size": 12,
+                },
+              },
+              "yaxis": Object {
+                "automargin": true,
+                "tickfont": Object {
+                  "size": 12,
+                },
+              },
+            }
+          }
+        >
+          <PlotlyComponent
+            config={
+              Object {
+                "displayModeBar": false,
+                "displaylogo": false,
+                "responsive": true,
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "hoverinfo": "all",
+                  "marker": Object {
+                    "color": "rgba(60,161,199,0.35)",
+                    "line": Object {
+                      "color": "#3CA1C7",
+                      "width": 2,
+                    },
+                  },
+                  "name": "delays",
+                  "orientation": "v",
+                  "type": "bar",
+                  "x": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "y": Array [
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                  ],
+                },
+                Object {
+                  "mode": "text",
+                  "text": Array [],
+                  "x": Array [],
+                  "y": Array [],
+                },
+              ]
+            }
+            debug={false}
+            divId="explorerPlotComponent"
+            layout={
+              Object {
+                "autosize": true,
+                "bargap": 0.30000000000000004,
+                "bargroupgap": 0.030000000000000027,
+                "barmode": "group",
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "v",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 30,
+                  "pad": 4,
+                  "r": 5,
+                  "t": 50,
+                },
+                "shapes": Array [],
+                "showlegend": "show",
+                "title": "",
+                "xaxis": Object {
+                  "automargin": true,
+                  "tickangle": 0,
+                  "tickfont": Object {
+                    "size": 12,
+                  },
+                },
+                "yaxis": Object {
+                  "automargin": true,
+                  "tickfont": Object {
+                    "size": 12,
+                  },
+                },
+              }
+            }
+            style={
+              Object {
+                "height": "100%",
+                "width": "100%",
+              }
+            }
+            useResizeHandler={true}
+          >
+            <div
+              id="explorerPlotComponent"
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
+      </Bar>
+    </VisualizationChart>
+  </Visualization>
+</div>
+`;
+
+exports[`Utils helper functions renders displayVisualization function 2`] = `
+<div>
+  <Visualization
+    visualizations={
+      Object {
+        "data": Object {
+          "appData": Object {},
+          "defaultAxes": Object {
+            "xaxis": Array [
+              Object {
+                "label": "",
+                "name": "",
+              },
+            ],
+            "yaxis": Array [
+              Object {
+                "label": "avg(FlightDelayMin)",
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
+              },
+              Object {
+                "label": "Carrier",
+                "name": "Carrier",
+                "type": "keyword",
+              },
+            ],
+          },
+          "explorer": Object {
+            "explorerData": Object {
+              "data": Object {
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "size": 4,
+              "status": 200,
+            },
+            "explorerFields": Array [
+              Object {
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
+              },
+              Object {
+                "name": "Carrier",
+                "type": "keyword",
+              },
+            ],
+          },
+          "indexFields": Object {},
+          "query": Object {
+            "rawQuery": "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1d)",
+          },
+          "rawVizData": Object {
+            "data": Object {
+              "Carrier": Array [
+                "BeatsWest",
+                "Logstash Airways",
+                "OpenSearch Dashboards Airlines",
+                "OpenSearch-Air",
+              ],
+              "avg(FlightDelayMin)": Array [
+                53.65384615384615,
+                45.36144578313253,
+                63.1578947368421,
+                46.81318681318681,
+              ],
+            },
+            "jsonData": Array [
+              Object {
+                "Carrier": "BeatsWest",
+                "avg(FlightDelayMin)": 53.65384615384615,
+              },
+              Object {
+                "Carrier": "Logstash Airways",
+                "avg(FlightDelayMin)": 45.36144578313253,
+              },
+              Object {
+                "Carrier": "OpenSearch Dashboards Airlines",
+                "avg(FlightDelayMin)": 63.1578947368421,
+              },
+              Object {
+                "Carrier": "OpenSearch-Air",
+                "avg(FlightDelayMin)": 46.81318681318681,
+              },
+            ],
+            "metadata": Object {
+              "fields": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "size": 4,
+            "status": 200,
+          },
+          "userConfigs": Object {
+            "availabilityConfig": Object {},
+            "dataConfig": Object {
+              "breakdowns": Array [],
+              "dimensions": Array [],
+              "series": Array [
+                Object {
+                  "aggregation": "avg",
+                  "customLabel": "",
+                  "label": "machine.ram",
+                  "name": "machine.ram",
+                },
+              ],
+              "span": Object {
+                "interval": "1",
+                "time_field": Array [
+                  Object {
+                    "label": "timestamp",
+                    "name": "timestamp",
+                    "type": "timestamp",
+                  },
+                ],
+                "unit": Array [
+                  Object {
+                    "label": "Day",
+                    "text": "Day",
+                    "value": "d",
+                  },
+                ],
+              },
+            },
+            "layoutConfig": Object {},
+          },
+        },
+        "vis": Object {
+          "category": "Visualizations",
+          "categoryaxis": "xaxis",
+          "component": [Function],
+          "editorconfig": Object {
+            "panelTabs": Array [
+              Object {
+                "editor": [Function],
+                "id": "data-panel",
+                "mapTo": "dataConfig",
+                "name": "Style",
+                "sections": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "legend",
+                    "mapTo": "legend",
+                    "name": "Legend",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "mapTo": "showLegend",
+                        "name": "Show legend",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                            Object {
+                              "id": "hidden",
+                              "name": "Hidden",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": null,
+                        "mapTo": "position",
+                        "name": "Position",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "v",
+                              "name": "Right",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "v",
+                              "name": "Right",
+                            },
+                            Object {
+                              "id": "h",
+                              "name": "Bottom",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "eleType": "input",
+                        "mapTo": "legendSize",
+                        "name": "Legend size",
+                        "title": "Legend size",
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "tooltip_options",
+                    "mapTo": "tooltipOptions",
+                    "name": "Tooltip options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "mapTo": "tooltipMode",
+                        "name": "Tooltip mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                            Object {
+                              "id": "hidden",
+                              "name": "Hidden",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": null,
+                        "mapTo": "tooltipText",
+                        "name": "Tooltip text",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "all",
+                              "name": "All",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "all",
+                              "name": "All",
+                            },
+                            Object {
+                              "id": "x",
+                              "name": "Dimension",
+                            },
+                            Object {
+                              "id": "y",
+                              "name": "Series",
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "chart_styles",
+                    "mapTo": "chartStyles",
+                    "name": "Chart styles",
+                    "schemas": Array [
+                      Object {
+                        "component": [Function],
+                        "eleType": "buttons",
+                        "mapTo": "style",
+                        "name": "Mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "lines",
+                              "name": "Lines",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "lines",
+                              "name": "Lines",
+                            },
+                            Object {
+                              "id": "markers",
+                              "name": "Marker",
+                            },
+                            Object {
+                              "id": "lines+markers",
+                              "name": "Lines + Markers",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "eleType": "buttons",
+                        "mapTo": "interpolation",
+                        "name": "Interpolation",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "spline",
+                              "name": "Smooth",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "linear",
+                              "name": "Linear",
+                            },
+                            Object {
+                              "id": "spline",
+                              "name": "Smooth",
+                            },
+                            Object {
+                              "id": "hv",
+                              "name": "Step before",
+                            },
+                            Object {
+                              "id": "vh",
+                              "name": "Step after",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 2,
+                        "eleType": "slider",
+                        "mapTo": "lineWidth",
+                        "name": "Line width",
+                        "props": Object {
+                          "max": 10,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 70,
+                        "eleType": "slider",
+                        "mapTo": "fillOpacity",
+                        "name": "Fill opacity",
+                        "props": Object {
+                          "max": 100,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 5,
+                        "eleType": "slider",
+                        "mapTo": "pointSize",
+                        "name": "Point size",
+                        "props": Object {
+                          "max": 40,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "eleType": "input",
+                        "mapTo": "labelSize",
+                        "name": "Label size",
+                        "title": "Label size",
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 0,
+                        "eleType": "slider",
+                        "mapTo": "rotateLabels",
+                        "name": "Rotate labels",
+                        "props": Object {
+                          "max": 90,
+                          "min": -90,
+                          "showTicks": true,
+                          "ticks": Array [
+                            Object {
+                              "label": "-90°",
+                              "value": -90,
+                            },
+                            Object {
+                              "label": "-45°",
+                              "value": -45,
+                            },
+                            Object {
+                              "label": "0°",
+                              "value": 0,
+                            },
+                            Object {
+                              "label": "45°",
+                              "value": 45,
+                            },
+                            Object {
+                              "label": "90°",
+                              "value": 90,
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                  Object {
+                    "defaultState": Array [],
+                    "editor": [Function],
+                    "id": "thresholds",
+                    "mapTo": "thresholds",
+                    "name": "Thresholds",
+                    "schemas": Array [],
+                  },
+                ],
+              },
+              Object {
+                "editor": [Function],
+                "id": "availability-panel",
+                "mapTo": "availabilityConfig",
+                "name": "Availability",
+              },
+            ],
+          },
+          "fulllabel": "Time series",
+          "icon": [Function],
+          "icontype": "visLine",
+          "id": "line",
+          "label": "Time series",
+          "name": "line",
+          "selection": Object {
+            "dataLoss": "nothing",
+          },
+          "seriesaxis": "yaxis",
+          "type": "line",
+          "visconfig": Object {
+            "config": Object {
+              "barmode": "line",
+              "displaylogo": false,
+              "responsive": true,
+              "xaxis": Object {
+                "automargin": true,
+              },
+              "yaxis": Object {
+                "automargin": true,
+              },
+            },
+            "layout": Object {
+              "colorway": Array [
+                "#3CA1C7",
+                "#8C55A3",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+                "#843769",
+                "#374FB8",
+                "#BD6F26",
+                "#4C636F",
+              ],
+              "height": 1180,
+              "legend": Object {
+                "orientation": "v",
+                "traceorder": "normal",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
+              },
+              "paper_bgcolor": "rgba(0, 0, 0, 0)",
+              "plot_bgcolor": "rgba(0, 0, 0, 0)",
+              "showlegend": true,
+              "xaxis": Object {
+                "fixedrange": true,
+                "showgrid": false,
+                "visible": true,
+              },
+              "yaxis": Object {
+                "fixedrange": true,
+                "showgrid": false,
+                "visible": true,
+              },
+            },
+          },
+        },
+      }
+    }
+  >
+    <VisualizationChart
+      visualizations={
+        Object {
+          "data": Object {
+            "appData": Object {},
+            "defaultAxes": Object {
+              "xaxis": Array [
+                Object {
+                  "label": "",
+                  "name": "",
+                },
+              ],
+              "yaxis": Array [
+                Object {
+                  "label": "avg(FlightDelayMin)",
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "label": "Carrier",
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "explorer": Object {
+              "explorerData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
+                    },
+                    Object {
+                      "name": "Carrier",
+                      "type": "keyword",
+                    },
+                  ],
+                },
+                "size": 4,
+                "status": 200,
+              },
+              "explorerFields": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "indexFields": Object {},
+            "query": Object {
+              "rawQuery": "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1d)",
+            },
+            "rawVizData": Object {
+              "data": Object {
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "size": 4,
+              "status": 200,
+            },
+            "userConfigs": Object {
+              "availabilityConfig": Object {},
+              "dataConfig": Object {
+                "breakdowns": Array [],
+                "dimensions": Array [],
+                "series": Array [
+                  Object {
+                    "aggregation": "avg",
+                    "customLabel": "",
+                    "label": "machine.ram",
+                    "name": "machine.ram",
+                  },
+                ],
+                "span": Object {
+                  "interval": "1",
+                  "time_field": Array [
+                    Object {
+                      "label": "timestamp",
+                      "name": "timestamp",
+                      "type": "timestamp",
+                    },
+                  ],
+                  "unit": Array [
+                    Object {
+                      "label": "Day",
+                      "text": "Day",
+                      "value": "d",
+                    },
+                  ],
+                },
+              },
+              "layoutConfig": Object {},
+            },
+          },
+          "vis": Object {
+            "category": "Visualizations",
+            "categoryaxis": "xaxis",
+            "component": [Function],
+            "editorconfig": Object {
+              "panelTabs": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "data-panel",
+                  "mapTo": "dataConfig",
+                  "name": "Style",
+                  "sections": Array [
+                    Object {
+                      "editor": [Function],
+                      "id": "legend",
+                      "mapTo": "legend",
+                      "name": "Legend",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "showLegend",
+                          "name": "Show legend",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "position",
+                          "name": "Position",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                              Object {
+                                "id": "h",
+                                "name": "Bottom",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "legendSize",
+                          "name": "Legend size",
+                          "title": "Legend size",
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "tooltip_options",
+                      "mapTo": "tooltipOptions",
+                      "name": "Tooltip options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipMode",
+                          "name": "Tooltip mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipText",
+                          "name": "Tooltip text",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                              Object {
+                                "id": "x",
+                                "name": "Dimension",
+                              },
+                              Object {
+                                "id": "y",
+                                "name": "Series",
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "chart_styles",
+                      "mapTo": "chartStyles",
+                      "name": "Chart styles",
+                      "schemas": Array [
+                        Object {
+                          "component": [Function],
+                          "eleType": "buttons",
+                          "mapTo": "style",
+                          "name": "Mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "lines",
+                                "name": "Lines",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "lines",
+                                "name": "Lines",
+                              },
+                              Object {
+                                "id": "markers",
+                                "name": "Marker",
+                              },
+                              Object {
+                                "id": "lines+markers",
+                                "name": "Lines + Markers",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "buttons",
+                          "mapTo": "interpolation",
+                          "name": "Interpolation",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "spline",
+                                "name": "Smooth",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "linear",
+                                "name": "Linear",
+                              },
+                              Object {
+                                "id": "spline",
+                                "name": "Smooth",
+                              },
+                              Object {
+                                "id": "hv",
+                                "name": "Step before",
+                              },
+                              Object {
+                                "id": "vh",
+                                "name": "Step after",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 2,
+                          "eleType": "slider",
+                          "mapTo": "lineWidth",
+                          "name": "Line width",
+                          "props": Object {
+                            "max": 10,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 70,
+                          "eleType": "slider",
+                          "mapTo": "fillOpacity",
+                          "name": "Fill opacity",
+                          "props": Object {
+                            "max": 100,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 5,
+                          "eleType": "slider",
+                          "mapTo": "pointSize",
+                          "name": "Point size",
+                          "props": Object {
+                            "max": 40,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "labelSize",
+                          "name": "Label size",
+                          "title": "Label size",
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0,
+                          "eleType": "slider",
+                          "mapTo": "rotateLabels",
+                          "name": "Rotate labels",
+                          "props": Object {
+                            "max": 90,
+                            "min": -90,
+                            "showTicks": true,
+                            "ticks": Array [
+                              Object {
+                                "label": "-90°",
+                                "value": -90,
+                              },
+                              Object {
+                                "label": "-45°",
+                                "value": -45,
+                              },
+                              Object {
+                                "label": "0°",
+                                "value": 0,
+                              },
+                              Object {
+                                "label": "45°",
+                                "value": 45,
+                              },
+                              Object {
+                                "label": "90°",
+                                "value": 90,
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "defaultState": Array [],
+                      "editor": [Function],
+                      "id": "thresholds",
+                      "mapTo": "thresholds",
+                      "name": "Thresholds",
+                      "schemas": Array [],
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "availability-panel",
+                  "mapTo": "availabilityConfig",
+                  "name": "Availability",
+                },
+              ],
+            },
+            "fulllabel": "Time series",
+            "icon": [Function],
+            "icontype": "visLine",
+            "id": "line",
+            "label": "Time series",
+            "name": "line",
+            "selection": Object {
+              "dataLoss": "nothing",
+            },
+            "seriesaxis": "yaxis",
+            "type": "line",
+            "visconfig": Object {
+              "config": Object {
+                "barmode": "line",
+                "displaylogo": false,
+                "responsive": true,
+                "xaxis": Object {
+                  "automargin": true,
+                },
+                "yaxis": Object {
+                  "automargin": true,
+                },
+              },
+              "layout": Object {
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "height": 1180,
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                "showlegend": true,
+                "xaxis": Object {
+                  "fixedrange": true,
+                  "showgrid": false,
+                  "visible": true,
+                },
+                "yaxis": Object {
+                  "fixedrange": true,
+                  "showgrid": false,
+                  "visible": true,
+                },
+              },
+            },
+          },
+        }
+      }
+    >
+      <Line
+        config={
+          Object {
+            "barmode": "line",
+            "displaylogo": false,
+            "responsive": true,
+            "xaxis": Object {
+              "automargin": true,
+            },
+            "yaxis": Object {
+              "automargin": true,
+            },
+          }
+        }
+        layout={[Function]}
+        visualizations={
+          Object {
+            "data": Object {
+              "appData": Object {},
+              "defaultAxes": Object {
+                "xaxis": Array [
+                  Object {
+                    "label": "",
+                    "name": "",
+                  },
+                ],
+                "yaxis": Array [
+                  Object {
+                    "label": "avg(FlightDelayMin)",
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "label": "Carrier",
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "explorer": Object {
+                "explorerData": Object {
+                  "data": Object {
+                    "Carrier": Array [
+                      "BeatsWest",
+                      "Logstash Airways",
+                      "OpenSearch Dashboards Airlines",
+                      "OpenSearch-Air",
+                    ],
+                    "avg(FlightDelayMin)": Array [
+                      53.65384615384615,
+                      45.36144578313253,
+                      63.1578947368421,
+                      46.81318681318681,
+                    ],
+                  },
+                  "jsonData": Array [
+                    Object {
+                      "Carrier": "BeatsWest",
+                      "avg(FlightDelayMin)": 53.65384615384615,
+                    },
+                    Object {
+                      "Carrier": "Logstash Airways",
+                      "avg(FlightDelayMin)": 45.36144578313253,
+                    },
+                    Object {
+                      "Carrier": "OpenSearch Dashboards Airlines",
+                      "avg(FlightDelayMin)": 63.1578947368421,
+                    },
+                    Object {
+                      "Carrier": "OpenSearch-Air",
+                      "avg(FlightDelayMin)": 46.81318681318681,
+                    },
+                  ],
+                  "metadata": Object {
+                    "fields": Array [
+                      Object {
+                        "name": "avg(FlightDelayMin)",
+                        "type": "double",
+                      },
+                      Object {
+                        "name": "Carrier",
+                        "type": "keyword",
+                      },
+                    ],
+                  },
+                  "size": 4,
+                  "status": 200,
+                },
+                "explorerFields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "indexFields": Object {},
+              "query": Object {
+                "rawQuery": "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1d)",
+              },
+              "rawVizData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
+                    },
+                    Object {
+                      "name": "Carrier",
+                      "type": "keyword",
+                    },
+                  ],
+                },
+                "size": 4,
+                "status": 200,
+              },
+              "userConfigs": Object {
+                "availabilityConfig": Object {},
+                "dataConfig": Object {
+                  "breakdowns": Array [],
+                  "dimensions": Array [],
+                  "series": Array [
+                    Object {
+                      "aggregation": "avg",
+                      "customLabel": "",
+                      "label": "machine.ram",
+                      "name": "machine.ram",
+                    },
+                  ],
+                  "span": Object {
+                    "interval": "1",
+                    "time_field": Array [
+                      Object {
+                        "label": "timestamp",
+                        "name": "timestamp",
+                        "type": "timestamp",
+                      },
+                    ],
+                    "unit": Array [
+                      Object {
+                        "label": "Day",
+                        "text": "Day",
+                        "value": "d",
+                      },
+                    ],
+                  },
+                },
+                "layoutConfig": Object {},
+              },
+            },
+            "vis": Object {
+              "category": "Visualizations",
+              "categoryaxis": "xaxis",
+              "component": [Function],
+              "editorconfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "showLegend",
+                            "name": "Show legend",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "position",
+                            "name": "Position",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                                Object {
+                                  "id": "h",
+                                  "name": "Bottom",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "legendSize",
+                            "name": "Legend size",
+                            "title": "Legend size",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                                Object {
+                                  "id": "x",
+                                  "name": "Dimension",
+                                },
+                                Object {
+                                  "id": "y",
+                                  "name": "Series",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_styles",
+                        "mapTo": "chartStyles",
+                        "name": "Chart styles",
+                        "schemas": Array [
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "style",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "lines",
+                                  "name": "Lines",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "lines",
+                                  "name": "Lines",
+                                },
+                                Object {
+                                  "id": "markers",
+                                  "name": "Marker",
+                                },
+                                Object {
+                                  "id": "lines+markers",
+                                  "name": "Lines + Markers",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "interpolation",
+                            "name": "Interpolation",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "spline",
+                                  "name": "Smooth",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "linear",
+                                  "name": "Linear",
+                                },
+                                Object {
+                                  "id": "spline",
+                                  "name": "Smooth",
+                                },
+                                Object {
+                                  "id": "hv",
+                                  "name": "Step before",
+                                },
+                                Object {
+                                  "id": "vh",
+                                  "name": "Step after",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 2,
+                            "eleType": "slider",
+                            "mapTo": "lineWidth",
+                            "name": "Line width",
+                            "props": Object {
+                              "max": 10,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 70,
+                            "eleType": "slider",
+                            "mapTo": "fillOpacity",
+                            "name": "Fill opacity",
+                            "props": Object {
+                              "max": 100,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 5,
+                            "eleType": "slider",
+                            "mapTo": "pointSize",
+                            "name": "Point size",
+                            "props": Object {
+                              "max": 40,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label size",
+                            "title": "Label size",
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0,
+                            "eleType": "slider",
+                            "mapTo": "rotateLabels",
+                            "name": "Rotate labels",
+                            "props": Object {
+                              "max": 90,
+                              "min": -90,
+                              "showTicks": true,
+                              "ticks": Array [
+                                Object {
+                                  "label": "-90°",
+                                  "value": -90,
+                                },
+                                Object {
+                                  "label": "-45°",
+                                  "value": -45,
+                                },
+                                Object {
+                                  "label": "0°",
+                                  "value": 0,
+                                },
+                                Object {
+                                  "label": "45°",
+                                  "value": 45,
+                                },
+                                Object {
+                                  "label": "90°",
+                                  "value": 90,
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "defaultState": Array [],
+                        "editor": [Function],
+                        "id": "thresholds",
+                        "mapTo": "thresholds",
+                        "name": "Thresholds",
+                        "schemas": Array [],
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "availability-panel",
+                    "mapTo": "availabilityConfig",
+                    "name": "Availability",
+                  },
+                ],
+              },
+              "fulllabel": "Time series",
+              "icon": [Function],
+              "icontype": "visLine",
+              "id": "line",
+              "label": "Time series",
+              "name": "line",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesaxis": "yaxis",
+              "type": "line",
+              "visconfig": Object {
+                "config": Object {
+                  "barmode": "line",
+                  "displaylogo": false,
+                  "responsive": true,
+                  "xaxis": Object {
+                    "automargin": true,
+                  },
+                  "yaxis": Object {
+                    "automargin": true,
+                  },
+                },
+                "layout": Object {
+                  "colorway": Array [
+                    "#3CA1C7",
+                    "#8C55A3",
+                    "#DB748A",
+                    "#F2BE4B",
+                    "#68CCC2",
+                    "#2A7866",
+                    "#843769",
+                    "#374FB8",
+                    "#BD6F26",
+                    "#4C636F",
+                  ],
+                  "height": 1180,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                  "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                  "showlegend": true,
+                  "xaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
+                  "yaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
+                },
+              },
+            },
+          }
+        }
+      >
+        <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 {},
+              },
+            }
+          }
+        >
+          <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
+              id="explorerPlotComponent"
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
+      </Line>
+    </VisualizationChart>
+  </Visualization>
+</div>
+`;
+
+exports[`Utils helper functions renders displayVisualization function 3`] = `
+<div>
+  <Visualization
+    visualizations={
+      Object {
+        "data": Object {
+          "appData": Object {},
+          "defaultAxes": Object {
+            "xaxis": Array [
+              Object {
+                "label": "Carrier",
+                "name": "Carrier",
+                "type": "keyword",
+              },
+            ],
+            "yaxis": Array [
+              Object {
+                "label": "avg(FlightDelayMin)",
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
+              },
+            ],
+          },
+          "explorer": Object {
+            "explorerData": Object {
+              "data": Object {
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "size": 4,
+              "status": 200,
+            },
+            "explorerFields": Array [
+              Object {
+                "name": "avg(FlightDelayMin)",
+                "type": "double",
+              },
+              Object {
+                "name": "Carrier",
+                "type": "keyword",
+              },
+            ],
+          },
+          "indexFields": Object {},
+          "query": Object {
+            "rawQuery": "source = opensearch_dashboards_sample_data_logs |  stats avg(machine.ram) by machine.os",
+          },
+          "rawVizData": Object {
+            "data": Object {
+              "Carrier": Array [
+                "BeatsWest",
+                "Logstash Airways",
+                "OpenSearch Dashboards Airlines",
+                "OpenSearch-Air",
+              ],
+              "avg(FlightDelayMin)": Array [
+                53.65384615384615,
+                45.36144578313253,
+                63.1578947368421,
+                46.81318681318681,
+              ],
+            },
+            "jsonData": Array [
+              Object {
+                "Carrier": "BeatsWest",
+                "avg(FlightDelayMin)": 53.65384615384615,
+              },
+              Object {
+                "Carrier": "Logstash Airways",
+                "avg(FlightDelayMin)": 45.36144578313253,
+              },
+              Object {
+                "Carrier": "OpenSearch Dashboards Airlines",
+                "avg(FlightDelayMin)": 63.1578947368421,
+              },
+              Object {
+                "Carrier": "OpenSearch-Air",
+                "avg(FlightDelayMin)": 46.81318681318681,
+              },
+            ],
+            "metadata": Object {
+              "fields": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "size": 4,
+            "status": 200,
+          },
+          "userConfigs": Object {
+            "availabilityConfig": Object {},
+            "dataConfig": Object {
+              "breakdowns": Array [],
+              "dimensions": Array [
+                Object {
+                  "customLabel": "",
+                  "label": "machine.os",
+                  "name": "machine.os",
+                },
+              ],
+              "series": Array [
+                Object {
+                  "aggregation": "avg",
+                  "customLabel": "",
+                  "label": "machine.ram",
+                  "name": "machine.ram",
+                },
+              ],
+              "span": undefined,
+            },
+            "layoutConfig": Object {},
+          },
+        },
+        "vis": Object {
+          "barwidth": 0.97,
+          "category": "Visualizations",
+          "categoryaxis": "xaxis",
+          "component": [Function],
+          "editorconfig": Object {
+            "panelTabs": Array [
+              Object {
+                "editor": [Function],
+                "id": "data-panel",
+                "mapTo": "dataConfig",
+                "name": "Style",
+                "sections": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "tooltip_options",
+                    "mapTo": "tooltipOptions",
+                    "name": "Tooltip options",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "mapTo": "tooltipMode",
+                        "name": "Tooltip mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                            Object {
+                              "id": "hidden",
+                              "name": "Hidden",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": null,
+                        "mapTo": "tooltipText",
+                        "name": "Tooltip text",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "all",
+                              "name": "All",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "all",
+                              "name": "All",
+                            },
+                            Object {
+                              "id": "x",
+                              "name": "Dimension",
+                            },
+                            Object {
+                              "id": "y",
+                              "name": "Series",
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "legend",
+                    "mapTo": "legend",
+                    "name": "Legend",
+                    "schemas": Array [
+                      Object {
+                        "component": null,
+                        "mapTo": "showLegend",
+                        "name": "Show legend",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "show",
+                              "name": "Show",
+                            },
+                            Object {
+                              "id": "hidden",
+                              "name": "Hidden",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": null,
+                        "mapTo": "position",
+                        "name": "Position",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "v",
+                              "name": "Right",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "v",
+                              "name": "Right",
+                            },
+                            Object {
+                              "id": "h",
+                              "name": "Bottom",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "eleType": "input",
+                        "mapTo": "legendSize",
+                        "name": "Legend size",
+                        "title": "Legend size",
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "chart_styles",
+                    "mapTo": "chartStyles",
+                    "name": "Chart styles",
+                    "schemas": Array [
+                      Object {
+                        "component": [Function],
+                        "eleType": "buttons",
+                        "mapTo": "mode",
+                        "name": "Mode",
+                        "props": Object {
+                          "defaultSelections": Array [
+                            Object {
+                              "id": "group",
+                              "name": "Group",
+                            },
+                          ],
+                          "options": Array [
+                            Object {
+                              "id": "group",
+                              "name": "Group",
+                            },
+                            Object {
+                              "id": "stack",
+                              "name": "Stack",
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "eleType": "input",
+                        "mapTo": "labelSize",
+                        "name": "Label size",
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 0,
+                        "eleType": "slider",
+                        "mapTo": "rotateBarLabels",
+                        "name": "Rotate bar labels",
+                        "props": Object {
+                          "max": 90,
+                          "min": -90,
+                          "showTicks": true,
+                          "ticks": Array [
+                            Object {
+                              "label": "-90°",
+                              "value": -90,
+                            },
+                            Object {
+                              "label": "-45°",
+                              "value": -45,
+                            },
+                            Object {
+                              "label": "0°",
+                              "value": 0,
+                            },
+                            Object {
+                              "label": "45°",
+                              "value": 45,
+                            },
+                            Object {
+                              "label": "90°",
+                              "value": 90,
+                            },
+                          ],
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 0.7,
+                        "eleType": "slider",
+                        "mapTo": "groupWidth",
+                        "name": "Group width",
+                        "props": Object {
+                          "max": 1,
+                          "step": 0.01,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 0.97,
+                        "eleType": "slider",
+                        "mapTo": "barWidth",
+                        "name": "Bar width",
+                        "props": Object {
+                          "max": 1,
+                          "step": 0.01,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 2,
+                        "eleType": "slider",
+                        "mapTo": "lineWidth",
+                        "name": "Line width",
+                        "props": Object {
+                          "max": 10,
+                        },
+                      },
+                      Object {
+                        "component": [Function],
+                        "defaultState": 70,
+                        "eleType": "slider",
+                        "mapTo": "fillOpacity",
+                        "name": "Fill opacity",
+                        "props": Object {
+                          "max": 100,
+                        },
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "color-theme",
+                    "mapTo": "colorTheme",
+                    "name": "Color theme",
+                    "schemas": Array [],
+                  },
+                ],
+              },
+              Object {
+                "editor": [Function],
+                "id": "availability-panel",
+                "mapTo": "availabilityConfig",
+                "name": "Availability",
+              },
+            ],
+          },
+          "fillopacity": 70,
+          "fulllabel": "Horizontal bar",
+          "groupwidth": 0.7,
+          "icon": [Function],
+          "icontype": "visBarHorizontalStacked",
+          "id": "horizontal_bar",
+          "label": "Horizontal bar",
+          "labelangle": 0,
+          "legendposition": "v",
+          "linewidth": 2,
+          "mode": "group",
+          "name": "horizontal_bar",
+          "orientation": "h",
+          "selection": Object {
+            "dataLoss": "nothing",
+          },
+          "seriesaxis": "yaxis",
+          "showlegend": "show",
+          "type": "bar",
+          "visconfig": Object {
+            "config": Object {
+              "displaylogo": false,
+              "responsive": true,
+            },
+            "isUniColor": false,
+            "layout": Object {
+              "height": 1180,
+              "legend": Object {
+                "orientation": "v",
+                "traceorder": "normal",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 60,
+                "pad": 0,
+                "r": 30,
+                "t": 50,
+              },
+              "showlegend": true,
+            },
+          },
+        },
+      }
+    }
+  >
+    <VisualizationChart
+      visualizations={
+        Object {
+          "data": Object {
+            "appData": Object {},
+            "defaultAxes": Object {
+              "xaxis": Array [
+                Object {
+                  "label": "Carrier",
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+              "yaxis": Array [
+                Object {
+                  "label": "avg(FlightDelayMin)",
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+              ],
+            },
+            "explorer": Object {
+              "explorerData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
+                    },
+                    Object {
+                      "name": "Carrier",
+                      "type": "keyword",
+                    },
+                  ],
+                },
+                "size": 4,
+                "status": 200,
+              },
+              "explorerFields": Array [
+                Object {
+                  "name": "avg(FlightDelayMin)",
+                  "type": "double",
+                },
+                Object {
+                  "name": "Carrier",
+                  "type": "keyword",
+                },
+              ],
+            },
+            "indexFields": Object {},
+            "query": Object {
+              "rawQuery": "source = opensearch_dashboards_sample_data_logs |  stats avg(machine.ram) by machine.os",
+            },
+            "rawVizData": Object {
+              "data": Object {
+                "Carrier": Array [
+                  "BeatsWest",
+                  "Logstash Airways",
+                  "OpenSearch Dashboards Airlines",
+                  "OpenSearch-Air",
+                ],
+                "avg(FlightDelayMin)": Array [
+                  53.65384615384615,
+                  45.36144578313253,
+                  63.1578947368421,
+                  46.81318681318681,
+                ],
+              },
+              "jsonData": Array [
+                Object {
+                  "Carrier": "BeatsWest",
+                  "avg(FlightDelayMin)": 53.65384615384615,
+                },
+                Object {
+                  "Carrier": "Logstash Airways",
+                  "avg(FlightDelayMin)": 45.36144578313253,
+                },
+                Object {
+                  "Carrier": "OpenSearch Dashboards Airlines",
+                  "avg(FlightDelayMin)": 63.1578947368421,
+                },
+                Object {
+                  "Carrier": "OpenSearch-Air",
+                  "avg(FlightDelayMin)": 46.81318681318681,
+                },
+              ],
+              "metadata": Object {
+                "fields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "size": 4,
+              "status": 200,
+            },
+            "userConfigs": Object {
+              "availabilityConfig": Object {},
+              "dataConfig": Object {
+                "breakdowns": Array [],
+                "dimensions": Array [
+                  Object {
+                    "customLabel": "",
+                    "label": "machine.os",
+                    "name": "machine.os",
+                  },
+                ],
+                "series": Array [
+                  Object {
+                    "aggregation": "avg",
+                    "customLabel": "",
+                    "label": "machine.ram",
+                    "name": "machine.ram",
+                  },
+                ],
+                "span": undefined,
+              },
+              "layoutConfig": Object {},
+            },
+          },
+          "vis": Object {
+            "barwidth": 0.97,
+            "category": "Visualizations",
+            "categoryaxis": "xaxis",
+            "component": [Function],
+            "editorconfig": Object {
+              "panelTabs": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "data-panel",
+                  "mapTo": "dataConfig",
+                  "name": "Style",
+                  "sections": Array [
+                    Object {
+                      "editor": [Function],
+                      "id": "tooltip_options",
+                      "mapTo": "tooltipOptions",
+                      "name": "Tooltip options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipMode",
+                          "name": "Tooltip mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipText",
+                          "name": "Tooltip text",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                              Object {
+                                "id": "x",
+                                "name": "Dimension",
+                              },
+                              Object {
+                                "id": "y",
+                                "name": "Series",
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "legend",
+                      "mapTo": "legend",
+                      "name": "Legend",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "showLegend",
+                          "name": "Show legend",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "position",
+                          "name": "Position",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                              Object {
+                                "id": "h",
+                                "name": "Bottom",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "legendSize",
+                          "name": "Legend size",
+                          "title": "Legend size",
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "chart_styles",
+                      "mapTo": "chartStyles",
+                      "name": "Chart styles",
+                      "schemas": Array [
+                        Object {
+                          "component": [Function],
+                          "eleType": "buttons",
+                          "mapTo": "mode",
+                          "name": "Mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "group",
+                                "name": "Group",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "group",
+                                "name": "Group",
+                              },
+                              Object {
+                                "id": "stack",
+                                "name": "Stack",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "labelSize",
+                          "name": "Label size",
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0,
+                          "eleType": "slider",
+                          "mapTo": "rotateBarLabels",
+                          "name": "Rotate bar labels",
+                          "props": Object {
+                            "max": 90,
+                            "min": -90,
+                            "showTicks": true,
+                            "ticks": Array [
+                              Object {
+                                "label": "-90°",
+                                "value": -90,
+                              },
+                              Object {
+                                "label": "-45°",
+                                "value": -45,
+                              },
+                              Object {
+                                "label": "0°",
+                                "value": 0,
+                              },
+                              Object {
+                                "label": "45°",
+                                "value": 45,
+                              },
+                              Object {
+                                "label": "90°",
+                                "value": 90,
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0.7,
+                          "eleType": "slider",
+                          "mapTo": "groupWidth",
+                          "name": "Group width",
+                          "props": Object {
+                            "max": 1,
+                            "step": 0.01,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0.97,
+                          "eleType": "slider",
+                          "mapTo": "barWidth",
+                          "name": "Bar width",
+                          "props": Object {
+                            "max": 1,
+                            "step": 0.01,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 2,
+                          "eleType": "slider",
+                          "mapTo": "lineWidth",
+                          "name": "Line width",
+                          "props": Object {
+                            "max": 10,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 70,
+                          "eleType": "slider",
+                          "mapTo": "fillOpacity",
+                          "name": "Fill opacity",
+                          "props": Object {
+                            "max": 100,
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "color-theme",
+                      "mapTo": "colorTheme",
+                      "name": "Color theme",
+                      "schemas": Array [],
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "availability-panel",
+                  "mapTo": "availabilityConfig",
+                  "name": "Availability",
+                },
+              ],
+            },
+            "fillopacity": 70,
+            "fulllabel": "Horizontal bar",
+            "groupwidth": 0.7,
+            "icon": [Function],
+            "icontype": "visBarHorizontalStacked",
+            "id": "horizontal_bar",
+            "label": "Horizontal bar",
+            "labelangle": 0,
+            "legendposition": "v",
+            "linewidth": 2,
+            "mode": "group",
+            "name": "horizontal_bar",
+            "orientation": "h",
+            "selection": Object {
+              "dataLoss": "nothing",
+            },
+            "seriesaxis": "yaxis",
+            "showlegend": "show",
+            "type": "bar",
+            "visconfig": Object {
+              "config": Object {
+                "displaylogo": false,
+                "responsive": true,
+              },
+              "isUniColor": false,
+              "layout": Object {
+                "height": 1180,
+                "legend": Object {
+                  "orientation": "v",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 60,
+                  "pad": 0,
+                  "r": 30,
+                  "t": 50,
+                },
+                "showlegend": true,
+              },
+            },
+          },
+        }
+      }
+    >
+      <Bar
+        config={
+          Object {
+            "displaylogo": false,
+            "responsive": true,
+          }
+        }
+        layout={[Function]}
+        visualizations={
+          Object {
+            "data": Object {
+              "appData": Object {},
+              "defaultAxes": Object {
+                "xaxis": Array [
+                  Object {
+                    "label": "Carrier",
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+                "yaxis": Array [
+                  Object {
+                    "label": "avg(FlightDelayMin)",
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                ],
+              },
+              "explorer": Object {
+                "explorerData": Object {
+                  "data": Object {
+                    "Carrier": Array [
+                      "BeatsWest",
+                      "Logstash Airways",
+                      "OpenSearch Dashboards Airlines",
+                      "OpenSearch-Air",
+                    ],
+                    "avg(FlightDelayMin)": Array [
+                      53.65384615384615,
+                      45.36144578313253,
+                      63.1578947368421,
+                      46.81318681318681,
+                    ],
+                  },
+                  "jsonData": Array [
+                    Object {
+                      "Carrier": "BeatsWest",
+                      "avg(FlightDelayMin)": 53.65384615384615,
+                    },
+                    Object {
+                      "Carrier": "Logstash Airways",
+                      "avg(FlightDelayMin)": 45.36144578313253,
+                    },
+                    Object {
+                      "Carrier": "OpenSearch Dashboards Airlines",
+                      "avg(FlightDelayMin)": 63.1578947368421,
+                    },
+                    Object {
+                      "Carrier": "OpenSearch-Air",
+                      "avg(FlightDelayMin)": 46.81318681318681,
+                    },
+                  ],
+                  "metadata": Object {
+                    "fields": Array [
+                      Object {
+                        "name": "avg(FlightDelayMin)",
+                        "type": "double",
+                      },
+                      Object {
+                        "name": "Carrier",
+                        "type": "keyword",
+                      },
+                    ],
+                  },
+                  "size": 4,
+                  "status": 200,
+                },
+                "explorerFields": Array [
+                  Object {
+                    "name": "avg(FlightDelayMin)",
+                    "type": "double",
+                  },
+                  Object {
+                    "name": "Carrier",
+                    "type": "keyword",
+                  },
+                ],
+              },
+              "indexFields": Object {},
+              "query": Object {
+                "rawQuery": "source = opensearch_dashboards_sample_data_logs |  stats avg(machine.ram) by machine.os",
+              },
+              "rawVizData": Object {
+                "data": Object {
+                  "Carrier": Array [
+                    "BeatsWest",
+                    "Logstash Airways",
+                    "OpenSearch Dashboards Airlines",
+                    "OpenSearch-Air",
+                  ],
+                  "avg(FlightDelayMin)": Array [
+                    53.65384615384615,
+                    45.36144578313253,
+                    63.1578947368421,
+                    46.81318681318681,
+                  ],
+                },
+                "jsonData": Array [
+                  Object {
+                    "Carrier": "BeatsWest",
+                    "avg(FlightDelayMin)": 53.65384615384615,
+                  },
+                  Object {
+                    "Carrier": "Logstash Airways",
+                    "avg(FlightDelayMin)": 45.36144578313253,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch Dashboards Airlines",
+                    "avg(FlightDelayMin)": 63.1578947368421,
+                  },
+                  Object {
+                    "Carrier": "OpenSearch-Air",
+                    "avg(FlightDelayMin)": 46.81318681318681,
+                  },
+                ],
+                "metadata": Object {
+                  "fields": Array [
+                    Object {
+                      "name": "avg(FlightDelayMin)",
+                      "type": "double",
+                    },
+                    Object {
+                      "name": "Carrier",
+                      "type": "keyword",
+                    },
+                  ],
+                },
+                "size": 4,
+                "status": 200,
+              },
+              "userConfigs": Object {
+                "availabilityConfig": Object {},
+                "dataConfig": Object {
+                  "breakdowns": Array [],
+                  "dimensions": Array [
+                    Object {
+                      "customLabel": "",
+                      "label": "machine.os",
+                      "name": "machine.os",
+                    },
+                  ],
+                  "series": Array [
+                    Object {
+                      "aggregation": "avg",
+                      "customLabel": "",
+                      "label": "machine.ram",
+                      "name": "machine.ram",
+                    },
+                  ],
+                  "span": undefined,
+                },
+                "layoutConfig": Object {},
+              },
+            },
+            "vis": Object {
+              "barwidth": 0.97,
+              "category": "Visualizations",
+              "categoryaxis": "xaxis",
+              "component": [Function],
+              "editorconfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                                Object {
+                                  "id": "x",
+                                  "name": "Dimension",
+                                },
+                                Object {
+                                  "id": "y",
+                                  "name": "Series",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "showLegend",
+                            "name": "Show legend",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "position",
+                            "name": "Position",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                                Object {
+                                  "id": "h",
+                                  "name": "Bottom",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "legendSize",
+                            "name": "Legend size",
+                            "title": "Legend size",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_styles",
+                        "mapTo": "chartStyles",
+                        "name": "Chart styles",
+                        "schemas": Array [
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                                Object {
+                                  "id": "stack",
+                                  "name": "Stack",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label size",
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0,
+                            "eleType": "slider",
+                            "mapTo": "rotateBarLabels",
+                            "name": "Rotate bar labels",
+                            "props": Object {
+                              "max": 90,
+                              "min": -90,
+                              "showTicks": true,
+                              "ticks": Array [
+                                Object {
+                                  "label": "-90°",
+                                  "value": -90,
+                                },
+                                Object {
+                                  "label": "-45°",
+                                  "value": -45,
+                                },
+                                Object {
+                                  "label": "0°",
+                                  "value": 0,
+                                },
+                                Object {
+                                  "label": "45°",
+                                  "value": 45,
+                                },
+                                Object {
+                                  "label": "90°",
+                                  "value": 90,
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.7,
+                            "eleType": "slider",
+                            "mapTo": "groupWidth",
+                            "name": "Group width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.97,
+                            "eleType": "slider",
+                            "mapTo": "barWidth",
+                            "name": "Bar width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 2,
+                            "eleType": "slider",
+                            "mapTo": "lineWidth",
+                            "name": "Line width",
+                            "props": Object {
+                              "max": 10,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 70,
+                            "eleType": "slider",
+                            "mapTo": "fillOpacity",
+                            "name": "Fill opacity",
+                            "props": Object {
+                              "max": 100,
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "color-theme",
+                        "mapTo": "colorTheme",
+                        "name": "Color theme",
+                        "schemas": Array [],
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "availability-panel",
+                    "mapTo": "availabilityConfig",
+                    "name": "Availability",
+                  },
+                ],
+              },
+              "fillopacity": 70,
+              "fulllabel": "Horizontal bar",
+              "groupwidth": 0.7,
+              "icon": [Function],
+              "icontype": "visBarHorizontalStacked",
+              "id": "horizontal_bar",
+              "label": "Horizontal bar",
+              "labelangle": 0,
+              "legendposition": "v",
+              "linewidth": 2,
+              "mode": "group",
+              "name": "horizontal_bar",
+              "orientation": "h",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesaxis": "yaxis",
+              "showlegend": "show",
+              "type": "bar",
+              "visconfig": Object {
+                "config": Object {
+                  "displaylogo": false,
+                  "responsive": true,
+                },
+                "isUniColor": false,
+                "layout": Object {
+                  "height": 1180,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "showlegend": true,
+                },
+              },
+            },
+          }
+        }
+      >
+        <Plt
+          config={
+            Object {
+              "displaylogo": false,
+              "responsive": true,
+            }
+          }
+          data={
+            Array [
+              Object {
+                "hoverinfo": "all",
+                "marker": Object {
+                  "color": "rgba(60,161,199,0.35)",
+                  "line": Object {
+                    "color": "#3CA1C7",
+                    "width": 2,
+                  },
+                },
+                "name": "avg(machine.ram)",
+                "orientation": "h",
+                "type": "bar",
+                "x": Array [
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                ],
+                "y": Array [
+                  "",
+                  "",
+                  "",
+                  "",
+                ],
+              },
+              Object {
+                "mode": "text",
+                "text": Array [],
+                "x": Array [],
+                "y": Array [],
+              },
+            ]
+          }
+          layout={
+            Object {
+              "bargap": 0.30000000000000004,
+              "bargroupgap": 0.030000000000000027,
+              "barmode": "group",
+              "colorway": Array [
+                "#3CA1C7",
+                "#8C55A3",
+                "#DB748A",
+                "#F2BE4B",
+                "#68CCC2",
+                "#2A7866",
+                "#843769",
+                "#374FB8",
+                "#BD6F26",
+                "#4C636F",
+              ],
+              "hovermode": "closest",
+              "legend": Object {
+                "orientation": "v",
+              },
+              "margin": Object {
+                "b": 30,
+                "l": 30,
+                "pad": 4,
+                "r": 5,
+                "t": 50,
+              },
+              "shapes": Array [],
+              "showlegend": "show",
+              "title": "",
+              "xaxis": Object {
+                "automargin": true,
+                "tickfont": Object {
+                  "size": 12,
+                },
+              },
+              "yaxis": Object {
+                "automargin": true,
+                "tickangle": 0,
+                "tickfont": Object {
+                  "size": 12,
+                },
+              },
+            }
+          }
+        >
+          <PlotlyComponent
+            config={
+              Object {
+                "displayModeBar": false,
+                "displaylogo": false,
+                "responsive": true,
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "hoverinfo": "all",
+                  "marker": Object {
+                    "color": "rgba(60,161,199,0.35)",
+                    "line": Object {
+                      "color": "#3CA1C7",
+                      "width": 2,
+                    },
+                  },
+                  "name": "avg(machine.ram)",
+                  "orientation": "h",
+                  "type": "bar",
+                  "x": Array [
+                    undefined,
+                    undefined,
+                    undefined,
+                    undefined,
+                  ],
+                  "y": Array [
+                    "",
+                    "",
+                    "",
+                    "",
+                  ],
+                },
+                Object {
+                  "mode": "text",
+                  "text": Array [],
+                  "x": Array [],
+                  "y": Array [],
+                },
+              ]
+            }
+            debug={false}
+            divId="explorerPlotComponent"
+            layout={
+              Object {
+                "autosize": true,
+                "bargap": 0.30000000000000004,
+                "bargroupgap": 0.030000000000000027,
+                "barmode": "group",
+                "colorway": Array [
+                  "#3CA1C7",
+                  "#8C55A3",
+                  "#DB748A",
+                  "#F2BE4B",
+                  "#68CCC2",
+                  "#2A7866",
+                  "#843769",
+                  "#374FB8",
+                  "#BD6F26",
+                  "#4C636F",
+                ],
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "v",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 30,
+                  "pad": 4,
+                  "r": 5,
+                  "t": 50,
+                },
+                "shapes": Array [],
+                "showlegend": "show",
+                "title": "",
+                "xaxis": Object {
+                  "automargin": true,
+                  "tickfont": Object {
+                    "size": 12,
+                  },
+                },
+                "yaxis": Object {
+                  "automargin": true,
+                  "tickangle": 0,
+                  "tickfont": Object {
+                    "size": 12,
+                  },
+                },
+              }
+            }
+            style={
+              Object {
+                "height": "100%",
+                "width": "100%",
+              }
+            }
+            useResizeHandler={true}
+          >
+            <div
+              id="explorerPlotComponent"
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
+      </Bar>
+    </VisualizationChart>
+  </Visualization>
+</div>
+`;
+
+exports[`Utils helper functions renders displayVisualization function 4`] = `<div />`;
diff --git a/public/components/custom_panels/helpers/__tests__/custom_input_model.test.tsx b/public/components/custom_panels/helpers/__tests__/custom_input_model.test.tsx
new file mode 100644
index 0000000000..11659128cc
--- /dev/null
+++ b/public/components/custom_panels/helpers/__tests__/custom_input_model.test.tsx
@@ -0,0 +1,61 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { CustomInputModal } from '../custom_input_modal';
+
+describe('Custom Input Model component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders custom input modal with single argument', () => {
+    const runModal = jest.fn;
+    const closeModal = jest.fn();
+    const labelTxt = 'test label';
+    const titletxt = 'Input test';
+    const btn1txt = 'btn test';
+    const btn2txt = 'btn test 2';
+    const wrapper = shallow(
+      <CustomInputModal
+        runModal={runModal}
+        closeModal={closeModal}
+        labelTxt={labelTxt}
+        titletxt={titletxt}
+        btn1txt={btn1txt}
+        btn2txt={btn2txt}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders custom input modal with multiple arguments', () => {
+    const runModal = jest.fn;
+    const closeModal = jest.fn();
+    const labelTxt = 'test label';
+    const titletxt = 'Input test';
+    const btn1txt = 'btn test';
+    const btn2txt = 'btn test 2';
+    const openPanelName = 'Test Panel';
+    const helpText = 'Help Text';
+    const optionalArgs = ['option1', 'option2', 'option3'];
+    const wrapper = shallow(
+      <CustomInputModal
+        runModal={runModal}
+        closeModal={closeModal}
+        labelTxt={labelTxt}
+        titletxt={titletxt}
+        btn1txt={btn1txt}
+        btn2txt={btn2txt}
+        openPanelName={openPanelName}
+        helpText={helpText}
+        optionalArgs={optionalArgs}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/custom_panels/helpers/__tests__/modal_container.test.tsx b/public/components/custom_panels/helpers/__tests__/modal_container.test.tsx
new file mode 100644
index 0000000000..0fb8c3bb0e
--- /dev/null
+++ b/public/components/custom_panels/helpers/__tests__/modal_container.test.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { DeleteModal } from '../../../common/helpers/delete_modal';
+import React from 'react';
+import { getCloneModal, getDeleteModal } from '../modal_containers';
+
+describe('Modal Container component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders getCloneModal function', () => {
+    const onCancel = jest.fn();
+    const onConfirm = jest.fn();
+    const wrapper = shallow(getCloneModal(onCancel, onConfirm));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders getDeleteModal function', () => {
+    const onCancel = jest.fn();
+    const onConfirm = jest.fn();
+    const title = 'Test Title';
+    const message = 'Test Message';
+    const confirmMessage = 'Confirm Message';
+    const wrapper = shallow(getDeleteModal(onCancel, onConfirm, title, message, confirmMessage));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders DeleteModal component', () => {
+    const onCancel = jest.fn();
+    const onConfirm = jest.fn();
+    const title = 'Test Title';
+    const message = 'Test Message';
+    const wrapper = shallow(
+      <DeleteModal onCancel={onCancel} onConfirm={onConfirm} title={title} message={message} />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/custom_panels/helpers/__tests__/utils.test.tsx b/public/components/custom_panels/helpers/__tests__/utils.test.tsx
new file mode 100644
index 0000000000..55e6349e06
--- /dev/null
+++ b/public/components/custom_panels/helpers/__tests__/utils.test.tsx
@@ -0,0 +1,138 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import moment from 'moment';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+
+import {
+  isNameValid,
+  convertDateTime,
+  mergeLayoutAndVisualizations,
+  onTimeChange,
+  isDateValid,
+  isPPLFilterValid,
+  displayVisualization,
+} from '../utils';
+import {
+  sampleLayout,
+  sampleMergedVisualizations,
+  samplePanelVisualizations,
+  samplePPLEmptyResponse,
+  samplePPLResponse,
+  sampleSavedVisualization,
+  sampleSavedVisualizationForHorizontalBar,
+  sampleSavedVisualizationForLine,
+  sampleSavedVisualizationForPie,
+  sampleSavedVisualizationForTreeMap,
+} from '../../../../../test/panels_constants';
+import { PPL_DATE_FORMAT } from '../../../../../common/constants/shared';
+import React from 'react';
+
+describe('Utils helper functions', () => {
+  configure({ adapter: new Adapter() });
+
+  it('validates isNameValid function', () => {
+    expect(isNameValid('Lorem ipsum dolor sit amet, consectetur adipiscing elit,')).toBe(false);
+    expect(isNameValid('Lorem ipsum dolor sit amet, consectetur adipiscin')).toBe(true);
+  });
+
+  it('validates convertDateTime function', () => {
+    expect(convertDateTime('2022-01-30T18:44:40.577Z')).toBe(
+      moment('2022-01-30T18:44:40.577Z').format(PPL_DATE_FORMAT)
+    );
+    expect(convertDateTime('2022-02-25T19:18:33.075Z', true)).toBe(
+      moment('2022-02-25T19:18:33.075Z').format(PPL_DATE_FORMAT)
+    );
+  });
+
+  it('validates mergeLayoutAndVisualizations function', () => {
+    const setState = jest.fn();
+    mergeLayoutAndVisualizations(sampleLayout, samplePanelVisualizations, setState);
+    expect(setState).toHaveBeenCalledWith(sampleMergedVisualizations);
+  });
+
+  it('validates onTimeChange function', () => {
+    const setRecentlyUsedRanges = jest.fn((x) => x);
+    const setStart = jest.fn();
+    const setEnd = jest.fn();
+    const recentlyUsedRanges: DurationRange[] = [];
+    onTimeChange(
+      '2022-01-30T18:44:40.577Z',
+      '2022-02-25T19:18:33.075Z',
+      recentlyUsedRanges,
+      setRecentlyUsedRanges,
+      setStart,
+      setEnd
+    );
+    expect(setRecentlyUsedRanges).toHaveBeenCalledWith([
+      { start: '2022-01-30T18:44:40.577Z', end: '2022-02-25T19:18:33.075Z' },
+    ]);
+    expect(setStart).toHaveBeenCalledWith('2022-01-30T18:44:40.577Z');
+    expect(setEnd).toHaveBeenCalledWith('2022-02-25T19:18:33.075Z');
+  });
+
+  it('validates isDateValid function', () => {
+    const setToast = jest.fn();
+    expect(
+      isDateValid(
+        convertDateTime('2022-01-30T18:44:40.577Z'),
+        convertDateTime('2022-02-25T19:18:33.075Z', false),
+        setToast
+      )
+    ).toBe(true);
+    expect(
+      isDateValid(
+        convertDateTime('2022-01-30T18:44:40.577Z'),
+        convertDateTime('2022-01-30T18:44:40.577Z', false),
+        setToast
+      )
+    ).toBe(true);
+    expect(
+      isDateValid(
+        convertDateTime('2022-02-25T19:18:33.075Z'),
+        convertDateTime('2022-01-30T18:44:40.577Z', false),
+        setToast
+      )
+    ).toBe(false);
+  });
+
+  it('validates isPPLFilterValid function', () => {
+    const setToast = jest.fn();
+    expect(isPPLFilterValid(sampleSavedVisualization.visualization.query, setToast)).toBe(false);
+    expect(isPPLFilterValid("where Carrier = 'OpenSearch-Air'", setToast)).toBe(true);
+  });
+
+  it('renders displayVisualization function', () => {
+    const wrapper1 = mount(
+      <div>
+        {displayVisualization(sampleSavedVisualization.visualization, samplePPLResponse, 'bar')}
+      </div>
+    );
+    expect(wrapper1).toMatchSnapshot();
+
+    const wrapper2 = mount(
+      <div>{displayVisualization(sampleSavedVisualizationForLine, samplePPLResponse, 'line')}</div>
+    );
+    expect(wrapper2).toMatchSnapshot();
+
+    const wrapper4 = mount(
+      <div>
+        {displayVisualization(
+          sampleSavedVisualizationForHorizontalBar,
+          samplePPLResponse,
+          'horizontal_bar'
+        )}
+      </div>
+    );
+    expect(wrapper4).toMatchSnapshot();
+
+    const wrapper6 = mount(
+      <div>{displayVisualization({}, samplePPLEmptyResponse, 'horizontal_bar')}</div>
+    );
+    expect(wrapper6).toMatchSnapshot();
+  });
+});
diff --git a/public/components/custom_panels/helpers/add_visualization_popover.tsx b/public/components/custom_panels/helpers/add_visualization_popover.tsx
new file mode 100644
index 0000000000..b59b1c43d7
--- /dev/null
+++ b/public/components/custom_panels/helpers/add_visualization_popover.tsx
@@ -0,0 +1,82 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButton, EuiContextMenu, EuiPopover } from '@elastic/eui';
+import React, { useState } from 'react';
+
+interface AddVisualizationPopoverProps {
+  showFlyout: (isReplacement?: boolean, replaceVizId?: string) => void;
+  addVizDisabled: boolean;
+}
+
+export const AddVisualizationPopover = ({
+  addVizDisabled,
+  showFlyout,
+}: AddVisualizationPopoverProps) => {
+  const [isVizPopoverOpen, setVizPopoverOpen] = useState(false); // Add Visualization Popover
+
+  const onPopoverClick = () => {
+    setVizPopoverOpen(!isVizPopoverOpen);
+  };
+
+  const closeVizPopover = () => {
+    setVizPopoverOpen(false);
+  };
+
+  const advancedVisualization = () => {
+    closeVizPopover();
+    window.location.assign('#/event_analytics/explorer');
+  };
+
+  const getVizContextPanels = () => {
+    return [
+      {
+        id: 0,
+        title: 'Add visualization',
+        items: [
+          {
+            name: 'Select existing visualization',
+            onClick: () => {
+              if (closeVizPopover != null) {
+                closeVizPopover();
+              }
+              showFlyout();
+            },
+          },
+          {
+            name: 'Create new visualization',
+            onClick: () => {
+              advancedVisualization();
+            },
+          },
+        ],
+      },
+    ];
+  };
+
+  const addVisualizationButton = (
+    <EuiButton
+      data-test-subj="addVisualizationButton"
+      iconType="arrowDown"
+      iconSide="right"
+      disabled={addVizDisabled}
+      onClick={onPopoverClick}
+    >
+      Add visualization
+    </EuiButton>
+  );
+  return (
+    <EuiPopover
+      id="addVisualizationContextMenu"
+      button={addVisualizationButton}
+      isOpen={isVizPopoverOpen}
+      closePopover={closeVizPopover}
+      panelPaddingSize="none"
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenu initialPanelId={0} panels={getVizContextPanels()} />
+    </EuiPopover>
+  );
+};
diff --git a/public/components/custom_panels/helpers/custom_input_modal.tsx b/public/components/custom_panels/helpers/custom_input_modal.tsx
new file mode 100644
index 0000000000..15042e6791
--- /dev/null
+++ b/public/components/custom_panels/helpers/custom_input_modal.tsx
@@ -0,0 +1,109 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiButtonEmpty,
+  EuiForm,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiFormRow,
+  EuiFieldText,
+  EuiButton,
+} from '@elastic/eui';
+
+/*
+ * "CustomInputModalProps" component is used to create a modal with an input filed
+ *
+ * Props taken in as params are:
+ * runModal - function to fetch input field value and trigger closing modal
+ * closeModal - function to trigger closing modal
+ * titletxt - string as header for title of modal
+ * labelTxt - string as header for input field
+ * btn1txt - string as content to fill "close button"
+ * btn2txt - string as content to fill "confirm button"
+ * openPanelName - Default input value for the field
+ * helpText - string help for the input field
+ * optionalArgs - Arguments needed to pass them to runModal function
+ */
+
+type CustomInputModalProps = {
+  runModal:
+    | ((value: string, value2: string, value3: string, value4: string) => void)
+    | ((value: string) => void);
+  closeModal: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void;
+  labelTxt: string;
+  titletxt: string;
+  btn1txt: string;
+  btn2txt: string;
+  openPanelName?: string;
+  helpText?: string;
+  optionalArgs?: string[];
+};
+
+export const CustomInputModal = (props: CustomInputModalProps) => {
+  const {
+    runModal,
+    closeModal,
+    labelTxt,
+    titletxt,
+    btn1txt,
+    btn2txt,
+    openPanelName,
+    helpText,
+    optionalArgs,
+  } = props;
+  const [value, setValue] = useState(openPanelName || ''); // sets input value
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <EuiOverlayMask>
+      <EuiModal onClose={closeModal} initialFocus="[name=input]">
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>{titletxt}</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <EuiForm>
+            <EuiFormRow label={labelTxt} helpText={helpText}>
+              <EuiFieldText
+                data-test-subj="customModalFieldText"
+                name="input"
+                value={value}
+                onChange={(e) => onChange(e)}
+              />
+            </EuiFormRow>
+          </EuiForm>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButtonEmpty onClick={closeModal}>{btn1txt}</EuiButtonEmpty>
+          {optionalArgs === undefined ? (
+            <EuiButton data-test-subj="runModalButton" onClick={() => runModal(value)} fill>
+              {btn2txt}
+            </EuiButton>
+          ) : (
+            <EuiButton
+              data-test-subj="runModalButton"
+              onClick={() => runModal(value, ...optionalArgs)}
+              fill
+            >
+              {btn2txt}
+            </EuiButton>
+          )}
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};
diff --git a/public/components/custom_panels/helpers/modal_containers.tsx b/public/components/custom_panels/helpers/modal_containers.tsx
new file mode 100644
index 0000000000..0fb80a5979
--- /dev/null
+++ b/public/components/custom_panels/helpers/modal_containers.tsx
@@ -0,0 +1,107 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiOverlayMask,
+  EuiConfirmModal,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiText,
+  EuiSpacer,
+} from '@elastic/eui';
+import { CustomInputModal } from './custom_input_modal';
+
+/* The file contains helper functions for modal layouts
+ * getCustomModal - returns modal with input field
+ * getCloneModal - returns a confirm-modal with clone option
+ * getDeleteModal - returns a confirm-modal with delete option
+ */
+
+export const getCustomModal = (
+  runModal:
+    | ((value: string, value2: string, value3: string, value4: string) => void)
+    | ((value: string) => void),
+  closeModal: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void,
+  labelTxt: string,
+  titletxt: string,
+  btn1txt: string,
+  btn2txt: string,
+  openPanelName?: string,
+  helpText?: string,
+  optionalArgs?: string[]
+) => {
+  return (
+    <CustomInputModal
+      runModal={runModal}
+      closeModal={closeModal}
+      labelTxt={labelTxt}
+      titletxt={titletxt}
+      btn1txt={btn1txt}
+      btn2txt={btn2txt}
+      openPanelName={openPanelName}
+      helpText={helpText}
+      optionalArgs={optionalArgs}
+    />
+  );
+};
+
+export const getCloneModal = (
+  onCancel: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void,
+  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+) => {
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title="Clone operational panel"
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelButtonText="Cancel"
+        confirmButtonText="Yes"
+        defaultFocusedButton="confirm"
+      >
+        <p>Do you want to clone this operational panel?</p>
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};
+
+export const getDeleteModal = (
+  onCancel: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void,
+  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
+  title: string,
+  message: string,
+  confirmMessage?: string
+) => {
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title={title}
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelButtonText="Cancel"
+        confirmButtonText={confirmMessage || 'Delete'}
+        buttonColor="danger"
+        defaultFocusedButton="confirm"
+      >
+        {message}
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};
diff --git a/public/components/custom_panels/helpers/utils.tsx b/public/components/custom_panels/helpers/utils.tsx
new file mode 100644
index 0000000000..226153b130
--- /dev/null
+++ b/public/components/custom_panels/helpers/utils.tsx
@@ -0,0 +1,460 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable no-console */
+
+import dateMath from '@elastic/datemath';
+import { ShortDate } from '@elastic/eui';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import _, { isEmpty } from 'lodash';
+import { Moment } from 'moment-timezone';
+import React from 'react';
+import { Layout } from 'react-grid-layout';
+import { PPL_DATE_FORMAT, PPL_INDEX_REGEX } from '../../../../common/constants/shared';
+import PPLService from '../../../services/requests/ppl';
+import { CoreStart } from '../../../../../../src/core/public';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
+import { VisualizationType, SavedVisualizationType } from '../../../../common/types/custom_panels';
+import { Visualization } from '../../visualizations/visualization';
+import { getVizContainerProps } from '../../../components/visualizations/charts/helpers';
+import { QueryManager } from '../../../../common/query_manager';
+import { getDefaultVisConfig } from '../../event_analytics/utils';
+import { removeBacktick } from '../../../../common/utils';
+
+/*
+ * "Utils" This file contains different reused functions in operational panels
+ *
+ * isNameValid - Validates string to length > 0 and < 50
+ * convertDateTime - Converts input datetime string to required format
+ * mergeLayoutAndVisualizations - Function to merge current panel layout into the visualizations list
+ * getQueryResponse - Get response of PPL query to load visualizations
+ * renderSavedVisualization - Fetches savedVisualization by Id and runs getQueryResponse
+ * onTimeChange - Function to store recently used time filters and set start and end time.
+ * isDateValid - Function to check date validity
+ * isPPLFilterValid - Validate if the panel PPL query doesn't contain any Index/Time/Field filters
+ * displayVisualization - Function to render the visualzation based of its type
+ */
+
+// Name validation 0>Name<=50
+export const isNameValid = (name: string) => {
+  return name.length >= 50 || name.length === 0 ? false : true;
+};
+
+// DateTime convertor to required format
+export const convertDateTime = (datetime: string, isStart = true, formatted = true) => {
+  let returnTime: undefined | Moment;
+  if (isStart) {
+    returnTime = dateMath.parse(datetime);
+  } else {
+    returnTime = dateMath.parse(datetime, { roundUp: true });
+  }
+
+  if (formatted) return returnTime!.utc().format(PPL_DATE_FORMAT);
+  return returnTime;
+};
+
+// Merges new layout into visualizations
+export const mergeLayoutAndVisualizations = (
+  layout: Layout[],
+  newVisualizationList: VisualizationType[],
+  setPanelVisualizations: (value: React.SetStateAction<VisualizationType[]>) => void
+) => {
+  const newPanelVisualizations: VisualizationType[] = [];
+
+  for (let i = 0; i < newVisualizationList.length; i++) {
+    for (let j = 0; j < layout.length; j++) {
+      if (newVisualizationList[i].id == layout[j].i) {
+        newPanelVisualizations.push({
+          ...newVisualizationList[i],
+          x: layout[j].x,
+          y: layout[j].y,
+          w: layout[j].w,
+          h: layout[j].h,
+        });
+      }
+    }
+  }
+  setPanelVisualizations(newPanelVisualizations);
+};
+
+/* Update Span interval for a Query
+ * Input query -> source = opensearch_dashboards_sample_data_logs | stats avg(bytes) by span(timestamp,1d)
+ * spanParam -> 1M
+ *
+ * Updates the span command interval
+ * Returns -> source = opensearch_dashboards_sample_data_logs | stats avg(bytes) by span(timestamp,1M)
+ */
+export const updateQuerySpanInterval = (
+  query: string,
+  timestampField: string,
+  spanParam: string
+) => {
+  return query.replace(
+    new RegExp(`span\\(\\s*${timestampField}\\s*,(.*?)\\)`),
+    `span(${timestampField},${spanParam})`
+  );
+};
+
+/* Builds Final Query by adding time and query filters(From panel UI) to the original visualization query
+ * -> Final Query is as follows:
+ * -> finalQuery = indexPartOfQuery + timeQueryFilter + panelFilterQuery + filterPartOfQuery
+ * -> finalQuery = source=opensearch_dashboards_sample_data_flights
+ *                  + | where utc_time > ‘2021-07-01 00:00:00’ and utc_time < ‘2021-07-02 00:00:00’
+ *                  + | where Carrier='OpenSearch-Air'
+ *                  + | stats sum(FlightDelayMin) as delays by Carrier
+ *
+ */
+const queryAccumulator = (
+  originalQuery: string,
+  timestampField: string,
+  startTime: string,
+  endTime: string,
+  panelFilterQuery: string
+) => {
+  const indexMatchArray = originalQuery.match(PPL_INDEX_REGEX);
+  if (indexMatchArray == null) {
+    throw Error('index not found in Query');
+  }
+  const indexPartOfQuery = indexMatchArray[0];
+  const filterPartOfQuery = originalQuery.replace(PPL_INDEX_REGEX, '');
+  const timeQueryFilter = ` | where ${timestampField} >= '${convertDateTime(
+    startTime
+  )}' and ${timestampField} <= '${convertDateTime(endTime, false)}'`;
+  const pplFilterQuery = panelFilterQuery === '' ? '' : ` | ${panelFilterQuery}`;
+
+  const finalQuery = indexPartOfQuery + timeQueryFilter + pplFilterQuery + filterPartOfQuery;
+  return finalQuery;
+};
+
+// PPL Service requestor
+const pplServiceRequestor = async (
+  pplService: PPLService,
+  finalQuery: string,
+  type: string,
+  setVisualizationData: React.Dispatch<React.SetStateAction<any[]>>,
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
+  setIsError: React.Dispatch<React.SetStateAction<string>>
+) => {
+  await pplService
+    .fetch({ query: finalQuery, format: 'viz' })
+    .then((res) => {
+      if (res === undefined) setIsError('Please check the validity of PPL Filter');
+      setVisualizationData(res);
+    })
+    .catch((error: Error) => {
+      setIsError(error.stack || 'Issue in fetching visualization');
+      console.error(error);
+    })
+    .finally(() => {
+      setIsLoading(false);
+    });
+};
+
+// Fetched Saved Visualization By Id
+export const fetchVisualizationById = async (
+  http: CoreStart['http'],
+  savedVisualizationId: string,
+  setIsError: (value: string) => void
+) => {
+  let savedVisualization = {} as SavedVisualizationType;
+  await http
+    .get(`${CUSTOM_PANELS_API_PREFIX}/visualizations/${savedVisualizationId}`)
+    .then((res) => {
+      savedVisualization = res.visualization;
+    })
+    .catch((err) => {
+      setIsError(`Could not locate saved visualization id:${savedVisualizationId}`);
+      console.error('Issue in fetching the saved Visualization by Id', err);
+    });
+  return savedVisualization;
+};
+
+// Get PPL Query Response
+export const getQueryResponse = (
+  pplService: PPLService,
+  query: string,
+  type: string,
+  startTime: string,
+  endTime: string,
+  setVisualizationData: React.Dispatch<React.SetStateAction<any[]>>,
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
+  setIsError: React.Dispatch<React.SetStateAction<string>>,
+  filterQuery = '',
+  timestampField = 'timestamp'
+) => {
+  setIsLoading(true);
+  setIsError('');
+
+  let finalQuery = '';
+  try {
+    finalQuery = queryAccumulator(query, timestampField, startTime, endTime, filterQuery);
+  } catch (error) {
+    const errorMessage = 'Issue in building final query';
+    setIsError(errorMessage);
+    console.error(errorMessage, error);
+    setIsLoading(false);
+    return;
+  }
+
+  pplServiceRequestor(pplService, finalQuery, type, setVisualizationData, setIsLoading, setIsError);
+};
+
+// Fetches savedVisualization by Id and runs getQueryResponse
+export const renderSavedVisualization = async (
+  http: CoreStart['http'],
+  pplService: PPLService,
+  savedVisualizationId: string,
+  startTime: string,
+  endTime: string,
+  filterQuery: string,
+  spanParam: string | undefined,
+  setVisualizationTitle: React.Dispatch<React.SetStateAction<string>>,
+  setVisualizationType: React.Dispatch<React.SetStateAction<string>>,
+  setVisualizationData: React.Dispatch<React.SetStateAction<Plotly.Data[]>>,
+  setVisualizationMetaData: React.Dispatch<React.SetStateAction<undefined>>,
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
+  setIsError: React.Dispatch<React.SetStateAction<string>>
+) => {
+  setIsLoading(true);
+  setIsError('');
+
+  let visualization = {} as SavedVisualizationType;
+  let updatedVisualizationQuery = '';
+  visualization = await fetchVisualizationById(http, savedVisualizationId, setIsError);
+
+  if (_.isEmpty(visualization)) {
+    setIsLoading(false);
+    return;
+  }
+
+  if (visualization.name) {
+    setVisualizationTitle(visualization.name);
+  }
+
+  if (visualization.type) {
+    setVisualizationType(visualization.type);
+  }
+
+  if (spanParam !== undefined) {
+    updatedVisualizationQuery = updateQuerySpanInterval(
+      visualization.query,
+      visualization.timeField,
+      spanParam
+    );
+  } else {
+    updatedVisualizationQuery = visualization.query;
+  }
+
+  setVisualizationMetaData({ ...visualization, query: updatedVisualizationQuery });
+
+  getQueryResponse(
+    pplService,
+    updatedVisualizationQuery,
+    visualization.type,
+    startTime,
+    endTime,
+    setVisualizationData,
+    setIsLoading,
+    setIsError,
+    filterQuery,
+    visualization.timeField
+  );
+};
+
+const createCatalogVisualizationMetaData = (
+  catalogSource: string,
+  visualizationQuery: string,
+  visualizationType: string,
+  visualizationTimeField: string
+) => {
+  return {
+    name: catalogSource,
+    description: '',
+    query: visualizationQuery,
+    type: visualizationType,
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: visualizationTimeField,
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  };
+};
+
+//Creates a catalogVisualization for a runtime catalog based PPL query and runs getQueryResponse
+export const renderCatalogVisualization = async (
+  http: CoreStart['http'],
+  pplService: PPLService,
+  catalogSource: string,
+  startTime: string,
+  endTime: string,
+  filterQuery: string,
+  spanParam: string | undefined,
+  setVisualizationTitle: React.Dispatch<React.SetStateAction<string>>,
+  setVisualizationType: React.Dispatch<React.SetStateAction<string>>,
+  setVisualizationData: React.Dispatch<React.SetStateAction<Plotly.Data[]>>,
+  setVisualizationMetaData: React.Dispatch<React.SetStateAction<undefined>>,
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
+  setIsError: React.Dispatch<React.SetStateAction<string>>,
+  spanResolution?: string
+) => {
+  setIsLoading(true);
+  setIsError('');
+
+  const visualizationType = 'line';
+  const visualizationTimeField = '@timestamp';
+  let visualizationQuery = `source = ${catalogSource} | stats avg(@value) by span(${visualizationTimeField},1h)`;
+
+  if (spanParam !== undefined) {
+    visualizationQuery = updateQuerySpanInterval(
+      visualizationQuery,
+      visualizationTimeField,
+      spanParam
+    );
+  }
+
+  const visualizationMetaData = createCatalogVisualizationMetaData(
+    catalogSource,
+    visualizationQuery,
+    visualizationType,
+    visualizationTimeField
+  );
+  setVisualizationTitle(catalogSource);
+  setVisualizationType(visualizationType);
+
+  setVisualizationMetaData({ ...visualizationMetaData, query: visualizationQuery });
+
+  getQueryResponse(
+    pplService,
+    visualizationQuery,
+    visualizationType,
+    startTime,
+    endTime,
+    setVisualizationData,
+    setIsLoading,
+    setIsError,
+    filterQuery,
+    visualizationTimeField
+  );
+};
+
+// Function to store recently used time filters and set start and end time.
+export const onTimeChange = (
+  start: ShortDate,
+  end: ShortDate,
+  recentlyUsedRanges: DurationRange[],
+  setRecentlyUsedRanges: React.Dispatch<React.SetStateAction<DurationRange[]>>,
+  setStart: React.Dispatch<React.SetStateAction<string>>,
+  setEnd: React.Dispatch<React.SetStateAction<string>>
+) => {
+  const recentlyUsedRange = recentlyUsedRanges.filter((recentlyUsedRange) => {
+    const isDuplicate = recentlyUsedRange.start === start && recentlyUsedRange.end === end;
+    return !isDuplicate;
+  });
+  recentlyUsedRange.unshift({ start, end });
+  setStart(start);
+  setEnd(end);
+  setRecentlyUsedRanges(recentlyUsedRange.slice(0, 9));
+};
+
+// Function to check date validity
+export const isDateValid = (
+  start: string | Moment | undefined,
+  end: string | Moment | undefined,
+  setToast: (
+    title: string,
+    color?: string,
+    text?: React.ReactChild | undefined,
+    side?: string | undefined
+  ) => void,
+  side?: string | undefined
+) => {
+  if (end! < start!) {
+    setToast('Time range entered is invalid', 'danger', undefined, side);
+    return false;
+  } else return true;
+};
+
+// Check for time filter in query
+const checkIndexExists = (query: string) => {
+  return PPL_INDEX_REGEX.test(query);
+};
+
+// Check PPL Query in Panel UI
+// Validate if the query doesn't contain any Index
+export const isPPLFilterValid = (
+  query: string,
+  setToast: (
+    title: string,
+    color?: string,
+    text?: React.ReactChild | undefined,
+    side?: string | undefined
+  ) => void
+) => {
+  if (checkIndexExists(query)) {
+    setToast('Please remove index from PPL Filter', 'danger', undefined);
+    return false;
+  }
+  return true;
+};
+
+// Renders visualization in the vizualization container component
+export const displayVisualization = (metaData: any, data: any, type: string) => {
+  if (metaData === undefined || isEmpty(metaData)) {
+    return <></>;
+  }
+  const dataConfig = { ...(metaData.user_configs?.dataConfig || {}) };
+  const hasBreakdowns = !_.isEmpty(dataConfig.breakdowns);
+  const realTimeParsedStats = {
+    ...getDefaultVisConfig(new QueryManager().queryParser().parse(metaData.query).getStats()),
+  };
+  let finalDimensions = [...(realTimeParsedStats.dimensions || [])];
+  let breakdowns = [...(dataConfig.breakdowns || [])];
+
+  // filter out breakdowns from dimnesions
+  if (hasBreakdowns) {
+    finalDimensions = _.differenceWith(finalDimensions, breakdowns, (dimn, brkdwn) =>
+      _.isEqual(removeBacktick(dimn.name), removeBacktick(brkdwn.name))
+    );
+  }
+
+  const finalDataConfig = {
+    ...dataConfig,
+    ...realTimeParsedStats,
+    dimensions: finalDimensions,
+    breakdowns,
+  };
+
+  const mixedUserConfigs = {
+    availabilityConfig: {
+      ...(metaData.user_configs?.availabilityConfig || {})
+    },
+    dataConfig: {
+      ...finalDataConfig,
+    },
+    layoutConfig: {
+      ...(metaData.user_configs?.layoutConfig || {}),
+    },
+  };
+
+  return (
+    <Visualization
+      visualizations={getVizContainerProps({
+        vizId: type,
+        rawVizData: data,
+        query: { rawQuery: metaData.query },
+        indexFields: {},
+        userConfigs: mixedUserConfigs,
+        explorer: { explorerData: data, explorerFields: data.metadata.fields },
+      })}
+    />
+  );
+};
diff --git a/public/components/custom_panels/home.tsx b/public/components/custom_panels/home.tsx
new file mode 100644
index 0000000000..4a5395fb0f
--- /dev/null
+++ b/public/components/custom_panels/home.tsx
@@ -0,0 +1,349 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable no-console */
+
+import { EuiBreadcrumb, EuiGlobalToastList, EuiLink, ShortDate } from '@elastic/eui';
+import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
+import _ from 'lodash';
+import React, { ReactChild, useState } from 'react';
+// eslint-disable-next-line @osd/eslint/module_migration
+import { StaticContext } from 'react-router';
+import { Route, RouteComponentProps } from 'react-router-dom';
+import PPLService from '../../services/requests/ppl';
+import DSLService from '../../services/requests/dsl';
+import { CoreStart } from '../../../../../src/core/public';
+import {
+  CUSTOM_PANELS_API_PREFIX,
+  CUSTOM_PANELS_DOCUMENTATION_URL,
+} from '../../../common/constants/custom_panels';
+import {
+  EVENT_ANALYTICS,
+  OBSERVABILITY_BASE,
+  SAVED_OBJECTS,
+} from '../../../common/constants/shared';
+import { CustomPanelListType } from '../../../common/types/custom_panels';
+import { ObservabilitySideBar } from '../common/side_nav';
+import { CustomPanelTable } from './custom_panel_table';
+import { CustomPanelView } from './custom_panel_view';
+import { isNameValid } from './helpers/utils';
+
+/*
+ * "Home" module is initial page for Operantional Panels
+ *
+ * Props taken in as params are:
+ * http: http core service;
+ * chrome: chrome core service;
+ * parentBreadcrumb: parent breadcrumb name and link
+ * pplService: ppl requestor service
+ * renderProps: Props from router
+ */
+
+interface PanelHomeProps {
+  http: CoreStart['http'];
+  chrome: CoreStart['chrome'];
+  parentBreadcrumbs: EuiBreadcrumb[];
+  pplService: PPLService;
+  dslService: DSLService;
+  renderProps: RouteComponentProps<any, StaticContext, any>;
+}
+
+export const Home = ({
+  http,
+  chrome,
+  parentBreadcrumbs,
+  pplService,
+  dslService,
+  renderProps,
+}: PanelHomeProps) => {
+  const [customPanelData, setcustomPanelData] = useState<CustomPanelListType[]>([]);
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [toastRightSide, setToastRightSide] = useState<boolean>(true);
+  const [start, setStart] = useState<ShortDate>('');
+  const [end, setEnd] = useState<ShortDate>('');
+
+  const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => {
+    if (!text) text = '';
+    setToastRightSide(!side ? true : false);
+    setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
+  };
+
+  const onEditClick = (savedVisualizationId: string) => {
+    window.location.assign(`#/event_analytics/explorer/${savedVisualizationId}`);
+  };
+
+  // Fetches all saved Custom Panels
+  const fetchCustomPanels = () => {
+    setLoading(true);
+    http
+      .get(`${CUSTOM_PANELS_API_PREFIX}/panels`)
+      .then((res) => {
+        setcustomPanelData(res.panels);
+      })
+      .catch((err) => {
+        console.error('Issue in fetching the operational panels', err.body.message);
+      });
+    setLoading(false);
+  };
+
+  // Creates a new CustomPanel
+  const createCustomPanel = (newCustomPanelName: string) => {
+    if (!isNameValid(newCustomPanelName)) {
+      setToast('Invalid Operational Panel name', 'danger');
+      return;
+    }
+
+    return http
+      .post(`${CUSTOM_PANELS_API_PREFIX}/panels`, {
+        body: JSON.stringify({
+          panelName: newCustomPanelName,
+        }),
+      })
+      .then(async (res) => {
+        setToast(`Operational Panel "${newCustomPanelName}" successfully created!`);
+        window.location.assign(`${_.last(parentBreadcrumbs)!.href}${res.newPanelId}`);
+      })
+      .catch((err) => {
+        setToast(
+          'Please ask your administrator to enable Operational Panels for you.',
+          'danger',
+          <EuiLink href={CUSTOM_PANELS_DOCUMENTATION_URL} target="_blank">
+            Documentation
+          </EuiLink>
+        );
+        console.error(err);
+      });
+  };
+
+  // Renames an existing CustomPanel
+  const renameCustomPanel = (editedCustomPanelName: string, editedCustomPanelId: string) => {
+    if (!isNameValid(editedCustomPanelName)) {
+      setToast('Invalid Custom Panel name', 'danger');
+      return Promise.reject();
+    }
+    const renamePanelObject = {
+      panelId: editedCustomPanelId,
+      panelName: editedCustomPanelName,
+    };
+
+    return http
+      .post(`${CUSTOM_PANELS_API_PREFIX}/panels/rename`, {
+        body: JSON.stringify(renamePanelObject),
+      })
+      .then((res) => {
+        setcustomPanelData((prevCustomPanelData) => {
+          const newCustomPanelData = [...prevCustomPanelData];
+          const renamedCustomPanel = newCustomPanelData.find(
+            (customPanel) => customPanel.id === editedCustomPanelId
+          );
+          if (renamedCustomPanel) renamedCustomPanel.name = editedCustomPanelName;
+          return newCustomPanelData;
+        });
+        setToast(`Operational Panel successfully renamed into "${editedCustomPanelName}"`);
+      })
+      .catch((err) => {
+        setToast(
+          'Error renaming Operational Panel, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  // Clones an existing Custom Panel, return new Custom Panel id
+  const cloneCustomPanel = (
+    clonedCustomPanelName: string,
+    clonedCustomPanelId: string
+  ): Promise<string> => {
+    if (!isNameValid(clonedCustomPanelName)) {
+      setToast('Invalid Operational Panel name', 'danger');
+      return Promise.reject();
+    }
+    const clonePanelObject = {
+      panelId: clonedCustomPanelId,
+      panelName: clonedCustomPanelName,
+    };
+
+    return http
+      .post(`${CUSTOM_PANELS_API_PREFIX}/panels/clone`, {
+        body: JSON.stringify(clonePanelObject),
+      })
+      .then((res) => {
+        setcustomPanelData((prevCustomPanelData) => {
+          return [
+            ...prevCustomPanelData,
+            {
+              name: clonedCustomPanelName,
+              id: res.clonePanelId,
+              dateCreated: res.dateCreated,
+              dateModified: res.dateModified,
+            },
+          ];
+        });
+        setToast(`Operational Panel "${clonedCustomPanelName}" successfully created!`);
+        return res.clonePanelId;
+      })
+      .catch((err) => {
+        setToast(
+          'Error cloning Operational Panel, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  // Deletes multiple existing Operational Panels
+  const deleteCustomPanelList = (customPanelIdList: string[], toastMessage: string) => {
+    const concatList = customPanelIdList.toString();
+    return http
+      .delete(`${CUSTOM_PANELS_API_PREFIX}/panelList/` + concatList)
+      .then((res) => {
+        setcustomPanelData((prevCustomPanelData) => {
+          return prevCustomPanelData.filter(
+            (customPanel) => !customPanelIdList.includes(customPanel.id)
+          );
+        });
+        setToast(toastMessage);
+        return res;
+      })
+      .catch((err) => {
+        setToast(
+          'Error deleting Operational Panels, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  // Deletes an existing Operational Panel
+  const deleteCustomPanel = (customPanelId: string, customPanelName: string) => {
+    return http
+      .delete(`${CUSTOM_PANELS_API_PREFIX}/panels/` + customPanelId)
+      .then((res) => {
+        setcustomPanelData((prevCustomPanelData) => {
+          return prevCustomPanelData.filter((customPanel) => customPanel.id !== customPanelId);
+        });
+        setToast(`Operational Panel "${customPanelName}" successfully deleted!`);
+        return res;
+      })
+      .catch((err) => {
+        setToast(
+          'Error deleting Operational Panel, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  const addSamplePanels = async () => {
+    try {
+      setLoading(true);
+      const flights = await http
+        .get('../api/saved_objects/_find', {
+          query: {
+            type: 'index-pattern',
+            search_fields: 'title',
+            search: 'opensearch_dashboards_sample_data_flights',
+          },
+        })
+        .then((resp) => resp.total === 0);
+      const logs = await http
+        .get('../api/saved_objects/_find', {
+          query: {
+            type: 'index-pattern',
+            search_fields: 'title',
+            search: 'opensearch_dashboards_sample_data_logs',
+          },
+        })
+        .then((resp) => resp.total === 0);
+      if (flights || logs) setToast('Adding sample data. This can take some time.');
+      await Promise.all([
+        flights ? http.post('../api/sample_data/flights') : Promise.resolve(),
+        logs ? http.post('../api/sample_data/logs') : Promise.resolve(),
+      ]);
+
+      let savedVisualizationIds: string[] = [];
+      await http
+        .get(`${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/addSampleSavedObjects/panels`)
+        .then((resp) => (savedVisualizationIds = [...resp.savedVizIds]));
+
+      await http
+        .post(`${CUSTOM_PANELS_API_PREFIX}/panels/addSamplePanels`, {
+          body: JSON.stringify({
+            savedVisualizationIds,
+          }),
+        })
+        .then((res) => {
+          setcustomPanelData([...customPanelData, ...res.demoPanelsData]);
+        });
+      setToast(`Sample panels successfully added.`);
+    } catch (err: any) {
+      setToast('Error adding sample panels.', 'danger');
+      console.error(err.body.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div>
+      <EuiGlobalToastList
+        toasts={toasts}
+        dismissToast={(removedToast) => {
+          setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
+        }}
+        side={toastRightSide ? 'right' : 'left'}
+        toastLifeTimeMs={6000}
+      />
+      <Route
+        exact
+        path={renderProps.match.path}
+        render={(props) => {
+          return (
+            <ObservabilitySideBar>
+              <CustomPanelTable
+                loading={loading}
+                fetchCustomPanels={fetchCustomPanels}
+                customPanels={customPanelData}
+                createCustomPanel={createCustomPanel}
+                setBreadcrumbs={chrome.setBreadcrumbs}
+                parentBreadcrumbs={parentBreadcrumbs}
+                renameCustomPanel={renameCustomPanel}
+                cloneCustomPanel={cloneCustomPanel}
+                deleteCustomPanelList={deleteCustomPanelList}
+                addSamplePanels={addSamplePanels}
+              />
+            </ObservabilitySideBar>
+          );
+        }}
+      />
+      <Route
+        path={`${renderProps.match.path}/:id`}
+        render={(props) => {
+          return (
+            <CustomPanelView
+              panelId={props.match.params.id}
+              http={http}
+              pplService={pplService}
+              dslService={dslService}
+              chrome={chrome}
+              parentBreadcrumbs={parentBreadcrumbs}
+              renameCustomPanel={renameCustomPanel}
+              cloneCustomPanel={cloneCustomPanel}
+              deleteCustomPanel={deleteCustomPanel}
+              setToast={setToast}
+              onEditClick={onEditClick}
+              startTime={start}
+              endTime={end}
+              setStartTime={setStart}
+              setEndTime={setEnd}
+              page="operationalPanels"
+            />
+          );
+        }}
+      />
+    </div>
+  );
+};
diff --git a/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap b/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap
new file mode 100644
index 0000000000..3992459037
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap
@@ -0,0 +1,424 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Empty panel view component renders empty panel view with disabled popover 1`] = `
+<EmptyPanelView
+  addVizDisabled={true}
+  showFlyout={[MockFunction]}
+>
+  <div>
+    <EuiSpacer
+      size="xxl"
+    >
+      <div
+        className="euiSpacer euiSpacer--xxl"
+      />
+    </EuiSpacer>
+    <EuiText
+      data-test-subj="addFirstVisualizationText"
+      textAlign="center"
+    >
+      <div
+        className="euiText euiText--medium"
+        data-test-subj="addFirstVisualizationText"
+      >
+        <EuiTextAlign
+          textAlign="center"
+        >
+          <div
+            className="euiTextAlign euiTextAlign--center"
+          >
+            <h2>
+              Start by adding your first visualization
+            </h2>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
+            <EuiText
+              color="subdued"
+              size="m"
+            >
+              <div
+                className="euiText euiText--medium"
+              >
+                <EuiTextColor
+                  color="subdued"
+                  component="div"
+                >
+                  <div
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    Use PPL Queries to fetch & filter observability data and create visualizations
+                  </div>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <EuiFlexGroup
+      justifyContent="center"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <AddVisualizationPopover
+              addVizDisabled={true}
+              showFlyout={[MockFunction]}
+            >
+              <EuiPopover
+                anchorPosition="downLeft"
+                button={
+                  <EuiButton
+                    data-test-subj="addVisualizationButton"
+                    disabled={true}
+                    iconSide="right"
+                    iconType="arrowDown"
+                    onClick={[Function]}
+                  >
+                    Add visualization
+                  </EuiButton>
+                }
+                closePopover={[Function]}
+                display="inlineBlock"
+                hasArrow={true}
+                id="addVisualizationContextMenu"
+                isOpen={false}
+                ownFocus={true}
+                panelPaddingSize="none"
+              >
+                <div
+                  className="euiPopover euiPopover--anchorDownLeft"
+                  id="addVisualizationContextMenu"
+                >
+                  <div
+                    className="euiPopover__anchor"
+                  >
+                    <EuiButton
+                      data-test-subj="addVisualizationButton"
+                      disabled={true}
+                      iconSide="right"
+                      iconType="arrowDown"
+                      onClick={[Function]}
+                    >
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
+                        data-test-subj="addVisualizationButton"
+                        disabled={true}
+                        element="button"
+                        iconSide="right"
+                        iconType="arrowDown"
+                        isDisabled={true}
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <button
+                          className="euiButton euiButton--primary euiButton-isDisabled"
+                          data-test-subj="addVisualizationButton"
+                          disabled={true}
+                          onClick={[Function]}
+                          style={
+                            Object {
+                              "minWidth": undefined,
+                            }
+                          }
+                          type="button"
+                        >
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="right"
+                            iconType="arrowDown"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                            >
+                              <EuiIcon
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                size="m"
+                                type="arrowDown"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                              <span
+                                className="euiButton__text"
+                              >
+                                Add visualization
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </div>
+                </div>
+              </EuiPopover>
+            </AddVisualizationPopover>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+    <EuiSpacer
+      size="xxl"
+    >
+      <div
+        className="euiSpacer euiSpacer--xxl"
+      />
+    </EuiSpacer>
+  </div>
+</EmptyPanelView>
+`;
+
+exports[`Empty panel view component renders empty panel view with enabled popover 1`] = `
+<EmptyPanelView
+  addVizDisabled={false}
+  showFlyout={[MockFunction]}
+>
+  <div>
+    <EuiSpacer
+      size="xxl"
+    >
+      <div
+        className="euiSpacer euiSpacer--xxl"
+      />
+    </EuiSpacer>
+    <EuiText
+      data-test-subj="addFirstVisualizationText"
+      textAlign="center"
+    >
+      <div
+        className="euiText euiText--medium"
+        data-test-subj="addFirstVisualizationText"
+      >
+        <EuiTextAlign
+          textAlign="center"
+        >
+          <div
+            className="euiTextAlign euiTextAlign--center"
+          >
+            <h2>
+              Start by adding your first visualization
+            </h2>
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
+            <EuiText
+              color="subdued"
+              size="m"
+            >
+              <div
+                className="euiText euiText--medium"
+              >
+                <EuiTextColor
+                  color="subdued"
+                  component="div"
+                >
+                  <div
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    Use PPL Queries to fetch & filter observability data and create visualizations
+                  </div>
+                </EuiTextColor>
+              </div>
+            </EuiText>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <EuiFlexGroup
+      justifyContent="center"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <AddVisualizationPopover
+              addVizDisabled={false}
+              showFlyout={[MockFunction]}
+            >
+              <EuiPopover
+                anchorPosition="downLeft"
+                button={
+                  <EuiButton
+                    data-test-subj="addVisualizationButton"
+                    disabled={false}
+                    iconSide="right"
+                    iconType="arrowDown"
+                    onClick={[Function]}
+                  >
+                    Add visualization
+                  </EuiButton>
+                }
+                closePopover={[Function]}
+                display="inlineBlock"
+                hasArrow={true}
+                id="addVisualizationContextMenu"
+                isOpen={false}
+                ownFocus={true}
+                panelPaddingSize="none"
+              >
+                <div
+                  className="euiPopover euiPopover--anchorDownLeft"
+                  id="addVisualizationContextMenu"
+                >
+                  <div
+                    className="euiPopover__anchor"
+                  >
+                    <EuiButton
+                      data-test-subj="addVisualizationButton"
+                      disabled={false}
+                      iconSide="right"
+                      iconType="arrowDown"
+                      onClick={[Function]}
+                    >
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
+                        data-test-subj="addVisualizationButton"
+                        disabled={false}
+                        element="button"
+                        iconSide="right"
+                        iconType="arrowDown"
+                        isDisabled={false}
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <button
+                          className="euiButton euiButton--primary"
+                          data-test-subj="addVisualizationButton"
+                          disabled={false}
+                          onClick={[Function]}
+                          style={
+                            Object {
+                              "minWidth": undefined,
+                            }
+                          }
+                          type="button"
+                        >
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="right"
+                            iconType="arrowDown"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                            >
+                              <EuiIcon
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                size="m"
+                                type="arrowDown"
+                              >
+                                <EuiIconArrowDown
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                      fillRule="non-zero"
+                                    />
+                                  </svg>
+                                </EuiIconArrowDown>
+                              </EuiIcon>
+                              <span
+                                className="euiButton__text"
+                              >
+                                Add visualization
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </div>
+                </div>
+              </EuiPopover>
+            </AddVisualizationPopover>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+    <EuiSpacer
+      size="xxl"
+    >
+      <div
+        className="euiSpacer euiSpacer--xxl"
+      />
+    </EuiSpacer>
+  </div>
+</EmptyPanelView>
+`;
diff --git a/public/components/custom_panels/panel_modules/__tests__/empty_panel.test.tsx b/public/components/custom_panels/panel_modules/__tests__/empty_panel.test.tsx
new file mode 100644
index 0000000000..2c3c24dcd6
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/__tests__/empty_panel.test.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButton, EuiContextMenu, EuiPopover } from '@elastic/eui';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { EmptyPanelView } from '../empty_panel';
+
+describe('Empty panel view component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty panel view with disabled popover', () => {
+    const addVizDisabled = true;
+    const showFlyout = jest.fn();
+    const wrapper = mount(
+      <EmptyPanelView addVizDisabled={addVizDisabled} showFlyout={showFlyout} />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('EuiButton').prop('disabled')).toBe(true);
+  });
+
+  it('renders empty panel view with enabled popover', () => {
+    const addVizDisabled = false;
+    const showFlyout = jest.fn();
+    const wrapper = mount(
+      <EmptyPanelView addVizDisabled={addVizDisabled} showFlyout={showFlyout} />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('EuiButton').prop('disabled')).toBe(false);
+  });
+});
diff --git a/public/components/custom_panels/panel_modules/empty_panel.tsx b/public/components/custom_panels/panel_modules/empty_panel.tsx
new file mode 100644
index 0000000000..32a1226b76
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/empty_panel.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiSpacer, EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React, { useState } from 'react';
+import { AddVisualizationPopover } from '../helpers/add_visualization_popover';
+
+/*
+ * EmptyPanelView - This Sub-component is shown to the user when a operational panel is empty
+ *
+ * Props taken in as params are:
+ * addVizDisabled -> Boolean to enable/disable the add visualization button
+ * getVizContextPanels -> Function to populate the add visualization popover
+ */
+
+interface EmptyPanelViewProps {
+  addButton?: any;
+  addVizDisabled: boolean;
+  showFlyout: (isReplacement?: boolean, replaceVizId?: string) => void;
+}
+
+export const EmptyPanelView = ({
+  addVizDisabled,
+  showFlyout,
+  addButton = <AddVisualizationPopover addVizDisabled={addVizDisabled} showFlyout={showFlyout} />,
+}: EmptyPanelViewProps) => {
+  return (
+    <div>
+      <EuiSpacer size="xxl" />
+      <EuiText data-test-subj="addFirstVisualizationText" textAlign="center">
+        <h2>Start by adding your first visualization</h2>
+        <EuiSpacer size="m" />
+        <EuiText color="subdued" size="m">
+          Use PPL Queries to fetch &amp; filter observability data and create visualizations
+        </EuiText>
+      </EuiText>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup justifyContent="center">
+        <EuiFlexItem grow={false}>{addButton}</EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="xxl" />
+    </div>
+  );
+};
diff --git a/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap b/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
new file mode 100644
index 0000000000..b192dff2d8
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Panel Grid Component renders panel grid component with empty visualizations 1`] = `
+<PanelGrid
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction] {
+        "calls": Array [
+          Array [],
+          Array [],
+          Array [],
+          Array [],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+          Object {
+            "type": "return",
+            "value": Observable {
+              "_isScalar": false,
+              "_subscribe": [Function],
+            },
+          },
+        ],
+      },
+      "setBreadcrumbs": [MockFunction],
+    }
+  }
+  cloneVisualization={[MockFunction]}
+  editActionType=""
+  editMode={false}
+  endTime="now"
+  http={[MockFunction]}
+  onEditClick={[Function]}
+  onRefresh={false}
+  panelId=""
+  panelVisualizations={Array []}
+  pplFilterValue=""
+  pplService={
+    PPLService {
+      "fetch": [Function],
+      "http": [MockFunction],
+    }
+  }
+  setPanelVisualizations={[MockFunction]}
+  showFlyout={[MockFunction]}
+  startTime="now-15m"
+>
+  <WidthProvider
+    breakpoints={
+      Object {
+        "lg": 1200,
+        "md": 996,
+        "sm": 768,
+        "xs": 480,
+        "xxs": 0,
+      }
+    }
+    className="layout full-width"
+    cols={
+      Object {
+        "lg": 12,
+        "md": 12,
+        "sm": 12,
+        "xs": 1,
+        "xxs": 1,
+      }
+    }
+    layouts={
+      Object {
+        "lg": Array [],
+        "md": Array [],
+        "sm": Array [],
+      }
+    }
+    measureBeforeMount={false}
+    onLayoutChange={[Function]}
+  >
+    <ResponsiveReactGridLayout
+      breakpoints={
+        Object {
+          "lg": 1200,
+          "md": 996,
+          "sm": 768,
+          "xs": 480,
+          "xxs": 0,
+        }
+      }
+      className="layout full-width"
+      cols={
+        Object {
+          "lg": 12,
+          "md": 12,
+          "sm": 12,
+          "xs": 1,
+          "xxs": 1,
+        }
+      }
+      layouts={
+        Object {
+          "lg": Array [],
+          "md": Array [],
+          "sm": Array [],
+        }
+      }
+      onBreakpointChange={[Function]}
+      onLayoutChange={[Function]}
+      onWidthChange={[Function]}
+      width={0}
+    >
+      <ReactGridLayout
+        autoSize={true}
+        className="layout full-width"
+        cols={1}
+        compactType="vertical"
+        containerPadding={null}
+        draggableCancel=""
+        draggableHandle=""
+        isDraggable={true}
+        isResizable={true}
+        layout={Array []}
+        margin={
+          Array [
+            10,
+            10,
+          ]
+        }
+        maxRows={Infinity}
+        onDrag={[Function]}
+        onDragStart={[Function]}
+        onDragStop={[Function]}
+        onLayoutChange={[Function]}
+        onResize={[Function]}
+        onResizeStart={[Function]}
+        onResizeStop={[Function]}
+        preventCollision={false}
+        rowHeight={150}
+        style={Object {}}
+        useCSSTransforms={true}
+        verticalCompact={true}
+        width={0}
+      >
+        <div
+          className="react-grid-layout layout full-width"
+          style={
+            Object {
+              "height": "10px",
+            }
+          }
+        />
+      </ReactGridLayout>
+    </ResponsiveReactGridLayout>
+  </WidthProvider>
+</PanelGrid>
+`;
diff --git a/public/components/custom_panels/panel_modules/panel_grid/__tests__/panel_grid.test.tsx b/public/components/custom_panels/panel_modules/panel_grid/__tests__/panel_grid.test.tsx
new file mode 100644
index 0000000000..1366eb4537
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/panel_grid/__tests__/panel_grid.test.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import httpClientMock from '../../../../../../test/__mocks__/httpClientMock';
+import { PanelGrid } from '../panel_grid';
+import PPLService from '../../../../../services/requests/ppl';
+import { VisualizationType } from '../../../../../../common/types/custom_panels';
+import { coreStartMock } from '../../../../../../test/__mocks__/coreMocks';
+import { waitFor } from '@testing-library/react';
+
+describe('Panel Grid Component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders panel grid component with empty visualizations', async () => {
+    const http = httpClientMock;
+    const core = coreStartMock;
+    const panelId = '';
+    const panelVisualizations: VisualizationType[] = [];
+    const setPanelVisualizations = jest.fn();
+    const editMode = false;
+    const pplService = new PPLService(httpClientMock);
+    const start = 'now-15m';
+    const end = 'now';
+    const onRefresh = false;
+    const cloneVisualization = jest.fn();
+    const pplFilterValue = '';
+    const showFlyout = jest.fn();
+    const editActionType = '';
+    const onEditClick = (savedVisId: string) => {
+      window.location.assign(`#/event_analytics/explorer/${savedVisId}`);
+    };
+
+    const wrapper = mount(
+      <PanelGrid
+        http={http}
+        panelId={panelId}
+        chrome={core.chrome}
+        panelVisualizations={panelVisualizations}
+        setPanelVisualizations={setPanelVisualizations}
+        editMode={editMode}
+        pplService={pplService}
+        startTime={start}
+        endTime={end}
+        onRefresh={onRefresh}
+        cloneVisualization={cloneVisualization}
+        pplFilterValue={pplFilterValue}
+        showFlyout={showFlyout}
+        editActionType={editActionType}
+        onEditClick={onEditClick}
+      />
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/custom_panels/panel_modules/panel_grid/index.ts b/public/components/custom_panels/panel_modules/panel_grid/index.ts
new file mode 100644
index 0000000000..d67fc20547
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/panel_grid/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { PanelGrid } from "./panel_grid";
diff --git a/public/components/custom_panels/panel_modules/panel_grid/panel_grid.scss b/public/components/custom_panels/panel_modules/panel_grid/panel_grid.scss
new file mode 100644
index 0000000000..0c00cee0bc
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/panel_grid/panel_grid.scss
@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.react-grid-layout {
+  & .react-grid-placeholder {
+    background: $euiColorWarning;
+  }
+}
+
+.full-width {
+  min-width: 100%;
+  max-width: 100%;
+}
diff --git a/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx b/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
new file mode 100644
index 0000000000..dc70ba7fd9
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/panel_grid/panel_grid.tsx
@@ -0,0 +1,212 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable no-console */
+
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+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 '../visualization_container';
+import { VisualizationType } from '../../../../../common/types/custom_panels';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../../common/constants/custom_panels';
+import './panel_grid.scss';
+import { mergeLayoutAndVisualizations } from '../../helpers/utils';
+
+// HOC container to provide dynamic width for Grid layout
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+/*
+ * PanelGrid - This module is places all visualizations in react-grid-layout
+ *
+ * Props taken in as params are:
+ * http: http core service;
+ * chrome: chrome core service;
+ * panelId: OpenPanel Id
+ * updateAvailabilityVizId: function to update application if availabilityViz is removed from panel
+ * panelVisualizations: list of panel visualizations
+ * setPanelVisualizations: function to set panel visualizations
+ * editMode: boolean to check if the panel is in edit mode
+ * pplService: ppl requestor service
+ * startTime: start time in date filter
+ * endTime: end time in date filter
+ * onRefresh: boolean value to trigger refresh of visualizations
+ * cloneVisualization: function to clone a visualization in panel
+ * pplFilterValue: string with panel PPL filter value
+ * showFlyout: function to show the flyout
+ * editActionType: Type of action done while clicking the edit button
+ */
+
+interface PanelGridProps {
+  http: CoreStart['http'];
+  chrome: CoreStart['chrome'];
+  panelId: string;
+  updateAvailabilityVizId?: any;
+  panelVisualizations: VisualizationType[];
+  setPanelVisualizations: React.Dispatch<React.SetStateAction<VisualizationType[]>>;
+  editMode: boolean;
+  pplService: PPLService;
+  startTime: string;
+  endTime: string;
+  onEditClick: (savedVisualizationId: string) => any;
+  onRefresh: boolean;
+  cloneVisualization: (visualzationTitle: string, savedVisualizationId: string) => void;
+  pplFilterValue: string;
+  showFlyout: (isReplacement?: boolean | undefined, replaceVizId?: string | undefined) => void;
+  editActionType: string;
+  setEditVizId?: any;
+}
+
+export const PanelGrid = (props: PanelGridProps) => {
+  const {
+    http,
+    chrome,
+    panelId,
+    updateAvailabilityVizId,
+    panelVisualizations,
+    setPanelVisualizations,
+    editMode,
+    pplService,
+    startTime,
+    endTime,
+    onEditClick,
+    onRefresh,
+    cloneVisualization,
+    pplFilterValue,
+    showFlyout,
+    editActionType,
+  } = props;
+  const [currentLayout, setCurrentLayout] = useState<Layout[]>([]);
+  const [postEditLayout, setPostEditLayout] = useState<Layout[]>([]);
+  const [gridData, setGridData] = useState(panelVisualizations.map(() => <></>));
+  const isLocked = useObservable(chrome.getIsNavDrawerLocked$());
+
+  // Reset Size of Visualizations when layout is changed
+  const layoutChanged = (currLayouts: Layout[], allLayouts: Layouts) => {
+    window.dispatchEvent(new Event('resize'));
+    setPostEditLayout(currLayouts);
+  };
+
+  const loadVizComponents = () => {
+    const gridDataComps = panelVisualizations.map(
+      (panelVisualization: VisualizationType, index) => (
+        <VisualizationContainer
+          key={panelVisualization.id}
+          http={http}
+          editMode={editMode}
+          visualizationId={panelVisualization.id}
+          savedVisualizationId={panelVisualization.savedVisualizationId}
+          pplService={pplService}
+          fromTime={startTime}
+          toTime={endTime}
+          onRefresh={onRefresh}
+          onEditClick={onEditClick}
+          cloneVisualization={cloneVisualization}
+          pplFilterValue={pplFilterValue}
+          showFlyout={showFlyout}
+          removeVisualization={removeVisualization}
+        />
+      )
+    );
+    setGridData(gridDataComps);
+  };
+
+  // Reload the Layout
+  const reloadLayout = () => {
+    const tempLayout: Layout[] = panelVisualizations.map((panelVisualization) => {
+      return {
+        i: panelVisualization.id,
+        x: panelVisualization.x,
+        y: panelVisualization.y,
+        w: panelVisualization.w,
+        h: panelVisualization.h,
+        static: !editMode,
+      } as Layout;
+    });
+    setCurrentLayout(tempLayout);
+  };
+
+  // remove visualization from panel in edit mode
+  const removeVisualization = (visualizationId: string) => {
+    const newVisualizationList = _.reject(panelVisualizations, {
+      id: visualizationId,
+    });
+    mergeLayoutAndVisualizations(postEditLayout, newVisualizationList, setPanelVisualizations);
+  };
+
+  // Save Visualization Layouts when not in edit mode anymore (after users saves the panel)
+  const saveVisualizationLayouts = async (panelID: string, visualizationParams: any) => {
+    return http
+      .put(`${CUSTOM_PANELS_API_PREFIX}/visualizations/edit`, {
+        body: JSON.stringify({
+          panelId: panelID,
+          visualizationParams,
+        }),
+      })
+      .then(async (res) => {
+        setPanelVisualizations(res.visualizations);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  // Update layout whenever user edit gets completed
+  useEffect(() => {
+    if (editMode) {
+      reloadLayout();
+      loadVizComponents();
+    }
+  }, [editMode]);
+
+  useEffect(() => {
+    if (editActionType === 'save') {
+      const visualizationParams = postEditLayout.map((layout) =>
+        _.omit(layout, ['static', 'moved'])
+      );
+      saveVisualizationLayouts(panelId, visualizationParams);
+      if (updateAvailabilityVizId) {
+        updateAvailabilityVizId(panelVisualizations);
+      }
+    }
+  }, [editActionType]);
+
+  // Update layout whenever visualizations are updated
+  useEffect(() => {
+    reloadLayout();
+    loadVizComponents();
+  }, [panelVisualizations]);
+
+  // Reset Size of Panel Grid when Nav Dock is Locked
+  useEffect(() => {
+    setTimeout(function () {
+      window.dispatchEvent(new Event('resize'));
+    }, 300);
+  }, [isLocked]);
+
+  useEffect(() => {
+    loadVizComponents();
+  }, [onRefresh]);
+
+  useEffect(() => {
+    loadVizComponents();
+  }, []);
+
+  return (
+    <ResponsiveGridLayout
+      layouts={{ lg: currentLayout, md: currentLayout, sm: currentLayout }}
+      className="layout full-width"
+      breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+      cols={{ lg: 12, md: 12, sm: 12, xs: 1, xxs: 1 }}
+      onLayoutChange={layoutChanged}
+    >
+      {panelVisualizations.map((panelVisualization: VisualizationType, index) => (
+        <div key={panelVisualization.id}>{gridData[index]}</div>
+      ))}
+    </ResponsiveGridLayout>
+  );
+};
diff --git a/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap b/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
new file mode 100644
index 0000000000..76c430d1a7
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/visualization_container/__tests__/__snapshots__/visualization_container.test.tsx.snap
@@ -0,0 +1,152 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Visualization Container Component renders add visualization container 1`] = `
+<VisualizationContainer
+  cloneVisualization={[MockFunction]}
+  editMode={true}
+  fromTime="now-15m"
+  http={[MockFunction]}
+  onEditClick={[Function]}
+  onRefresh={true}
+  pplFilterValue="where Carrier = \\"OpenSearch-Air\\""
+  pplService={
+    PPLService {
+      "fetch": [Function],
+      "http": [MockFunction],
+    }
+  }
+  removeVisualization={[MockFunction]}
+  savedVisualizationId="oiuccXwBYVazWqOO1e06"
+  showFlyout={[MockFunction]}
+  toTime="now"
+  visualizationId="panel_viz_9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"
+>
+  <EuiPanel
+    className="panel-full-width"
+    data-test-subj="VisualizationPanel"
+    grow={false}
+  >
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width"
+      data-test-subj="VisualizationPanel"
+    >
+      <div
+        className="mouseGrabber"
+      >
+        <EuiFlexGroup
+          justifyContent="spaceBetween"
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <EuiFlexItem
+              style={
+                Object {
+                  "width": "35%",
+                }
+              }
+            >
+              <div
+                className="euiFlexItem"
+                style={
+                  Object {
+                    "width": "35%",
+                  }
+                }
+              >
+                <EuiText
+                  className="panels-title-text"
+                  grow={false}
+                >
+                  <div
+                    className="euiText euiText--medium panels-title-text euiText--constrainedWidth"
+                  >
+                    <EuiToolTip
+                      content=""
+                      delay="long"
+                      position="top"
+                    >
+                      <span
+                        className="euiToolTipAnchor"
+                        onKeyUp={[Function]}
+                        onMouseOut={[Function]}
+                        onMouseOver={[Function]}
+                      >
+                        <h5
+                          onBlur={[Function]}
+                          onFocus={[Function]}
+                        />
+                      </span>
+                    </EuiToolTip>
+                  </div>
+                </EuiText>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              className="visualization-action-button"
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
+              >
+                <EuiIcon
+                  onClick={[Function]}
+                  type="crossInACircleFilled"
+                >
+                  <EuiIconEmpty
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiIcon-isLoading"
+                    focusable="false"
+                    onClick={[Function]}
+                    role="img"
+                    style={null}
+                  >
+                    <svg
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon-isLoading"
+                      focusable="false"
+                      height={16}
+                      onClick={[Function]}
+                      role="img"
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </EuiIconEmpty>
+                </EuiIcon>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </div>
+      <div
+        className="visualization-div"
+      >
+        <EuiLoadingChart
+          className="visualization-loading-chart"
+          mono={true}
+          size="xl"
+        >
+          <span
+            className="euiLoadingChart euiLoadingChart--mono visualization-loading-chart euiLoadingChart--xLarge"
+          >
+            <span
+              className="euiLoadingChart__bar"
+            />
+            <span
+              className="euiLoadingChart__bar"
+            />
+            <span
+              className="euiLoadingChart__bar"
+            />
+            <span
+              className="euiLoadingChart__bar"
+            />
+          </span>
+        </EuiLoadingChart>
+      </div>
+    </div>
+  </EuiPanel>
+</VisualizationContainer>
+`;
diff --git a/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx b/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx
new file mode 100644
index 0000000000..9ea46f4d42
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/visualization_container/__tests__/visualization_container.test.tsx
@@ -0,0 +1,69 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import PPLService from '../../../../../services/requests/ppl';
+import React from 'react';
+import { VisualizationContainer } from '../visualization_container';
+import httpClientMock from '../../../../../../test/__mocks__/httpClientMock';
+import { HttpResponse } from '../../../../../../../../src/core/public';
+import { waitFor } from '@testing-library/react';
+import {
+  sampleSavedVisualization,
+  samplePPLResponse,
+} from '../../../../../../test/panels_constants';
+
+describe('Visualization Container Component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders add visualization container', async () => {
+    httpClientMock.get = jest.fn(() =>
+      Promise.resolve((sampleSavedVisualization as unknown) as HttpResponse)
+    );
+
+    httpClientMock.post = jest.fn(() =>
+      Promise.resolve((samplePPLResponse as unknown) as HttpResponse)
+    );
+
+    const editMode = true;
+    const visualizationId = 'panel_viz_9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d';
+    const savedVisualizationId = 'oiuccXwBYVazWqOO1e06';
+    const fromTime = 'now-15m';
+    const toTime = 'now';
+    const onRefresh = true;
+    const cloneVisualization = jest.fn();
+    const pplFilterValue = 'where Carrier = "OpenSearch-Air"';
+    const showFlyout = jest.fn();
+    const removeVisualization = jest.fn();
+    const pplService = new PPLService(httpClientMock);
+    const onEditClick = (savedVisId: string) => {
+      window.location.assign(`#/event_analytics/explorer/${savedVisId}`);
+    };
+
+    const wrapper = mount(
+      <VisualizationContainer
+        http={httpClientMock}
+        editMode={editMode}
+        visualizationId={visualizationId}
+        savedVisualizationId={savedVisualizationId}
+        pplService={pplService}
+        fromTime={fromTime}
+        toTime={toTime}
+        onRefresh={onRefresh}
+        cloneVisualization={cloneVisualization}
+        pplFilterValue={pplFilterValue}
+        showFlyout={showFlyout}
+        removeVisualization={removeVisualization}
+        onEditClick={onEditClick}
+      />
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/custom_panels/panel_modules/visualization_container/index.ts b/public/components/custom_panels/panel_modules/visualization_container/index.ts
new file mode 100644
index 0000000000..1503aa7ab8
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/visualization_container/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { VisualizationContainer } from "./visualization_container";
diff --git a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss
new file mode 100644
index 0000000000..6d14d72882
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.scss
@@ -0,0 +1,60 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.mouseGrabber {
+  & :hover {
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+  & :active {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+}
+
+.visualization-action-button {
+  & :hover {
+    cursor: -webkit-pointer;
+    cursor: pointer;
+  }
+}
+
+.visualization-div {
+  width: 100%;
+  height: 90%;
+  overflow: auto;
+  text-align: center;
+}
+
+%center-div {
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.visualization-loading-chart {
+  margin: 0;
+  position: absolute;
+  @extend %center-div;
+}
+
+.visualization-error-div {
+  overflow: auto;
+  position: relative;
+  @extend %center-div;
+}
+
+.panel-full-width {
+  width: 100%;
+  height: 100%;
+}
+
+.panels-title-text {
+  @include euiTextTruncate;
+}
diff --git a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
new file mode 100644
index 0000000000..12eaa49771
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
@@ -0,0 +1,307 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiCodeBlock,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiLoadingChart,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiPanel,
+  EuiPopover,
+  EuiSpacer,
+  EuiText,
+  EuiToolTip,
+} from '@elastic/eui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { CoreStart } from '../../../../../../../src/core/public';
+import PPLService from '../../../../services/requests/ppl';
+import {
+  displayVisualization,
+  renderCatalogVisualization,
+  renderSavedVisualization,
+} from '../../helpers/utils';
+import './visualization_container.scss';
+
+/*
+ * Visualization container - This module is a placeholder to add visualizations in react-grid-layout
+ *
+ * Props taken in as params are:
+ * editMode: boolean to check if the panel is in edit mode
+ * visualizationId: unique visualization id
+ * visualizationTitle: visualization name
+ * query: ppl query to load the visualization
+ * pplService: ppl requestor service
+ * type: type of visualization [bar, horizontal_bar, line]
+ * fromTime: start time in date filter
+ * toTime: end time in date filter
+ * onRefresh: boolean value to trigger refresh of visualizations
+ * cloneVisualization: function to clone a visualization in panel
+ * pplFilterValue: string with panel PPL filter value
+ * showFlyout: function to show the flyout
+ * removeVisualization: function to remove all the visualizations
+ * catalogVisualization: boolean pointing if the container is used for catalog metrics
+ * spanParam: Override the span(timestamp, 1h) in visualization to span(timestamp, spanParam)
+ */
+
+interface Props {
+  http: CoreStart['http'];
+  editMode: boolean;
+  visualizationId: string;
+  savedVisualizationId: string;
+  pplService: PPLService;
+  fromTime: string;
+  toTime: string;
+  onRefresh: boolean;
+  pplFilterValue: string;
+  usedInNotebooks?: boolean;
+  onEditClick: (savedVisualizationId: string) => any;
+  cloneVisualization?: (visualzationTitle: string, savedVisualizationId: string) => void;
+  showFlyout?: (isReplacement?: boolean | undefined, replaceVizId?: string | undefined) => void;
+  removeVisualization?: (visualizationId: string) => void;
+  catalogVisualization?: boolean;
+  spanParam?: string;
+}
+
+export const VisualizationContainer = ({
+  http,
+  editMode,
+  visualizationId,
+  savedVisualizationId,
+  pplService,
+  fromTime,
+  toTime,
+  onRefresh,
+  pplFilterValue,
+  usedInNotebooks,
+  onEditClick,
+  cloneVisualization,
+  showFlyout,
+  removeVisualization,
+  catalogVisualization,
+  spanParam,
+}: Props) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [disablePopover, setDisablePopover] = useState(false);
+  const [visualizationTitle, setVisualizationTitle] = useState('');
+  const [visualizationType, setVisualizationType] = useState('');
+  const [visualizationMetaData, setVisualizationMetaData] = useState();
+  const [visualizationData, setVisualizationData] = useState<Plotly.Data[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState('');
+  const onActionsMenuClick = () => setIsPopoverOpen((currPopoverOpen) => !currPopoverOpen);
+  const closeActionsMenu = () => setIsPopoverOpen(false);
+
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const closeModal = () => setIsModalVisible(false);
+  const showModal = () => setIsModalVisible(true);
+
+  let modal;
+
+  if (isModalVisible) {
+    modal = (
+      <EuiModal onClose={closeModal}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>
+            <h1>{visualizationMetaData.name}</h1>
+          </EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          This PPL Query is generated in runtime from selected data source
+          <EuiSpacer />
+          <EuiCodeBlock language="html" isCopyable>
+            {visualizationMetaData.query}
+          </EuiCodeBlock>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButton onClick={closeModal} fill>
+            Close
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    );
+  }
+
+  let popoverPanel = [
+    <EuiContextMenuItem
+      data-test-subj="editVizContextMenuItem"
+      key="Edit"
+      disabled={disablePopover}
+      onClick={() => {
+        closeActionsMenu();
+        onEditClick(savedVisualizationId);
+      }}
+    >
+      Edit
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="Replace"
+      disabled={disablePopover}
+      onClick={() => {
+        closeActionsMenu();
+        showFlyout(true, visualizationId);
+      }}
+    >
+      Replace
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="Duplicate"
+      disabled={disablePopover}
+      onClick={() => {
+        closeActionsMenu();
+        cloneVisualization(visualizationTitle, savedVisualizationId);
+      }}
+    >
+      Duplicate
+    </EuiContextMenuItem>,
+  ];
+
+  let showModelPanel = [
+    <EuiContextMenuItem
+      data-test-subj="showCatalogPPLQuery"
+      key="view_query"
+      disabled={disablePopover}
+      onClick={() => {
+        closeActionsMenu();
+        showModal();
+      }}
+    >
+      View query
+    </EuiContextMenuItem>,
+  ];
+
+  if (usedInNotebooks) {
+    popoverPanel = catalogVisualization ? [showModelPanel] : [popoverPanel[0]];
+  }
+
+  const loadVisaulization = async () => {
+    if (catalogVisualization)
+      await renderCatalogVisualization(
+        http,
+        pplService,
+        savedVisualizationId,
+        fromTime,
+        toTime,
+        pplFilterValue,
+        spanParam,
+        setVisualizationTitle,
+        setVisualizationType,
+        setVisualizationData,
+        setVisualizationMetaData,
+        setIsLoading,
+        setIsError
+      );
+    else
+      await renderSavedVisualization(
+        http,
+        pplService,
+        savedVisualizationId,
+        fromTime,
+        toTime,
+        pplFilterValue,
+        spanParam,
+        setVisualizationTitle,
+        setVisualizationType,
+        setVisualizationData,
+        setVisualizationMetaData,
+        setIsLoading,
+        setIsError
+      );
+  };
+
+  const memoisedVisualizationBox = useMemo(
+    () => (
+      <div className="visualization-div">
+        {isLoading ? (
+          <EuiLoadingChart size="xl" mono className="visualization-loading-chart" />
+        ) : isError !== '' ? (
+          <div className="visualization-error-div">
+            <EuiIcon type="alert" color="danger" size="s" />
+            <EuiSpacer size="s" />
+            <EuiText size="s">
+              <p>{isError}</p>
+            </EuiText>
+          </div>
+        ) : (
+          displayVisualization(visualizationMetaData, visualizationData, visualizationType)
+        )}
+      </div>
+    ),
+    [onRefresh, isLoading, isError, visualizationData, visualizationType, visualizationMetaData]
+  );
+
+  useEffect(() => {
+    loadVisaulization();
+  }, [onRefresh]);
+
+  useEffect(() => {
+    editMode ? setDisablePopover(true) : setDisablePopover(false);
+  }, [editMode]);
+
+  return (
+    <>
+      <EuiPanel
+        data-test-subj={`${visualizationTitle}VisualizationPanel`}
+        className="panel-full-width"
+        grow={false}
+      >
+        <div className={editMode ? 'mouseGrabber' : ''}>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem
+              style={{
+                width: '35%',
+              }}
+            >
+              <EuiText grow={false} className="panels-title-text">
+                <EuiToolTip delay="long" position="top" content={visualizationTitle}>
+                  <h5>{visualizationTitle}</h5>
+                </EuiToolTip>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false} className="visualization-action-button">
+              {disablePopover ? (
+                <EuiIcon
+                  type="crossInACircleFilled"
+                  onClick={() => {
+                    removeVisualization(visualizationId);
+                  }}
+                />
+              ) : (
+                <EuiPopover
+                  button={
+                    <EuiButtonIcon
+                      aria-label="actionMenuButton"
+                      iconType="boxesHorizontal"
+                      onClick={onActionsMenuClick}
+                    />
+                  }
+                  isOpen={isPopoverOpen}
+                  closePopover={closeActionsMenu}
+                  anchorPosition="downLeft"
+                >
+                  <EuiContextMenuPanel items={popoverPanel} />
+                </EuiPopover>
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </div>
+        {memoisedVisualizationBox}
+      </EuiPanel>
+      {modal}
+    </>
+  );
+};
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
new file mode 100644
index 0000000000..3c4bda7a0b
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
@@ -0,0 +1,2478 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
+<VisaulizationFlyout
+  closeFlyout={[MockFunction]}
+  end="now"
+  http={[MockFunction]}
+  isFlyoutReplacement={false}
+  panelId=""
+  pplFilterValue=""
+  pplService={
+    PPLService {
+      "fetch": [Function],
+      "http": [MockFunction],
+    }
+  }
+  setPanelVisualizations={[MockFunction]}
+  setToast={[MockFunction]}
+  start="now-15m"
+>
+  <FlyoutContainers
+    ariaLabel="addVisualizationFlyout"
+    closeFlyout={[MockFunction]}
+    flyoutBody={
+      <EuiFlyoutBody
+        banner={
+          <EuiCallOut
+            iconType="help"
+          >
+            <p>
+              No saved visualizations found!
+            </p>
+          </EuiCallOut>
+        }
+      >
+        <React.Fragment>
+          <div>
+            Please use the "create new visualization" option in add visualization menu.
+          </div>
+        </React.Fragment>
+      </EuiFlyoutBody>
+    }
+    flyoutFooter={
+      <EuiFlyoutFooter>
+        <EuiFlexGroup
+          gutterSize="s"
+          justifyContent="spaceBetween"
+        >
+          <EuiFlexItem
+            grow={false}
+          >
+            <EuiButton
+              onClick={[MockFunction]}
+            >
+              Cancel
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <EuiButton
+              fill={true}
+              onClick={[Function]}
+            >
+              Add
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    }
+    flyoutHeader={
+      <EuiFlyoutHeader
+        hasBorder={true}
+      >
+        <EuiTitle
+          size="m"
+        >
+          <h2
+            id="addVisualizationFlyout"
+          >
+            Select existing visualization
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+    }
+  >
+    <div>
+      <EuiFlyout
+        aria-labelledby="addVisualizationFlyout"
+        className="observability-flyout"
+        onClose={[Function]}
+        ownFocus={false}
+        size="m"
+      >
+        <OuiWindowEvent
+          event="keydown"
+          handler={[Function]}
+        />
+        <EuiPortal>
+          <Portal
+            containerInfo={
+              <div>
+                <div
+                  aria-hidden="true"
+                  data-aria-hidden="true"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="0"
+                />
+                <div
+                  data-focus-lock-disabled="false"
+                >
+                  <div
+                    aria-labelledby="addVisualizationFlyout"
+                    class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                    role="dialog"
+                    tabindex="-1"
+                  >
+                    <button
+                      aria-label="Close this dialog"
+                      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                      data-test-subj="euiFlyoutCloseButton"
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </button>
+                    <div
+                      class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                    >
+                      <h2
+                        class="euiTitle euiTitle--medium"
+                        id="addVisualizationFlyout"
+                      >
+                        Select existing visualization
+                      </h2>
+                    </div>
+                    <div
+                      class="euiFlyoutBody"
+                    >
+                      <div
+                        class="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                        tabindex="0"
+                      >
+                        <div
+                          class="euiFlyoutBody__banner"
+                        >
+                          <div
+                            class="euiCallOut euiCallOut--primary"
+                          >
+                            <div
+                              class="euiText euiText--small"
+                            >
+                              <div
+                                class="euiTextColor euiTextColor--default"
+                              >
+                                <p>
+                                  No saved visualizations found!
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlyoutBody__overflowContent"
+                        >
+                          <div>
+                            Please use the "create new visualization" option in add visualization menu.
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFlyoutFooter"
+                    >
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      >
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <button
+                            class="euiButton euiButton--primary"
+                            type="button"
+                          >
+                            <span
+                              class="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                class="euiButton__text"
+                              >
+                                Cancel
+                              </span>
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <button
+                            class="euiButton euiButton--primary euiButton--fill"
+                            type="button"
+                          >
+                            <span
+                              class="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                class="euiButton__text"
+                              >
+                                Add
+                              </span>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  aria-hidden="true"
+                  data-aria-hidden="true"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="0"
+                />
+              </div>
+            }
+          >
+            <EuiFocusTrap
+              clickOutsideDisables={true}
+              disabled={false}
+              noIsolation={true}
+              returnFocus={true}
+              scrollLock={false}
+            >
+              <ForwardRef
+                enabled={true}
+                noIsolation={true}
+                onClickOutside={[Function]}
+                returnFocus={true}
+                scrollLock={false}
+              >
+                <ForwardRef
+                  enabled={true}
+                  noIsolation={true}
+                  onClickOutside={[Function]}
+                  returnFocus={true}
+                  scrollLock={false}
+                  sideCar={[Function]}
+                >
+                  <ForwardRef(FocusLockUI)
+                    as={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "classNames": Object {
+                          "fullWidth": "width-before-scroll-bar",
+                          "zeroRight": "right-scroll-bar-position",
+                        },
+                        "defaultProps": Object {
+                          "enabled": true,
+                          "inert": false,
+                          "removeScrollBar": true,
+                        },
+                        "render": [Function],
+                      }
+                    }
+                    autoFocus={true}
+                    crossFrame={true}
+                    disabled={false}
+                    lockProps={
+                      Object {
+                        "allowPinchZoom": undefined,
+                        "as": undefined,
+                        "enabled": false,
+                        "inert": undefined,
+                        "onMouseDown": [Function],
+                        "onTouchStart": [Function],
+                        "shards": undefined,
+                        "sideCar": [Function],
+                        "style": undefined,
+                      }
+                    }
+                    noFocusGuards={false}
+                    onActivation={[Function]}
+                    onDeactivation={[Function]}
+                    persistentFocus={false}
+                    returnFocus={true}
+                    sideCar={[Function]}
+                  >
+                    <div
+                      data-focus-guard={true}
+                      key="guard-first"
+                      style={
+                        Object {
+                          "height": "0px",
+                          "left": "1px",
+                          "overflow": "hidden",
+                          "padding": 0,
+                          "position": "fixed",
+                          "top": "1px",
+                          "width": "1px",
+                        }
+                      }
+                      tabIndex={0}
+                    />
+                    <RequireSideCar
+                      autoFocus={true}
+                      crossFrame={true}
+                      disabled={false}
+                      id={Object {}}
+                      observed={
+                        <div
+                          data-focus-lock-disabled="false"
+                        >
+                          <div
+                            aria-labelledby="addVisualizationFlyout"
+                            class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                            role="dialog"
+                            tabindex="-1"
+                          >
+                            <button
+                              aria-label="Close this dialog"
+                              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                              data-test-subj="euiFlyoutCloseButton"
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </button>
+                            <div
+                              class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                                id="addVisualizationFlyout"
+                              >
+                                Select existing visualization
+                              </h2>
+                            </div>
+                            <div
+                              class="euiFlyoutBody"
+                            >
+                              <div
+                                class="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                                tabindex="0"
+                              >
+                                <div
+                                  class="euiFlyoutBody__banner"
+                                >
+                                  <div
+                                    class="euiCallOut euiCallOut--primary"
+                                  >
+                                    <div
+                                      class="euiText euiText--small"
+                                    >
+                                      <div
+                                        class="euiTextColor euiTextColor--default"
+                                      >
+                                        <p>
+                                          No saved visualizations found!
+                                        </p>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFlyoutBody__overflowContent"
+                                >
+                                  <div>
+                                    Please use the "create new visualization" option in add visualization menu.
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlyoutFooter"
+                            >
+                              <div
+                                class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              >
+                                <div
+                                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                                >
+                                  <button
+                                    class="euiButton euiButton--primary"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="euiButtonContent euiButton__content"
+                                    >
+                                      <span
+                                        class="euiButton__text"
+                                      >
+                                        Cancel
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                                >
+                                  <button
+                                    class="euiButton euiButton--primary euiButton--fill"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="euiButtonContent euiButton__content"
+                                    >
+                                      <span
+                                        class="euiButton__text"
+                                      >
+                                        Add
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      onActivation={[Function]}
+                      onDeactivation={[Function]}
+                      persistentFocus={false}
+                      returnFocus={[Function]}
+                      shards={Array []}
+                      sideCar={
+                        Object {
+                          "assignMedium": [Function],
+                          "assignSyncMedium": [Function],
+                          "options": Object {
+                            "async": true,
+                            "ssr": false,
+                          },
+                          "read": [Function],
+                          "useMedium": [Function],
+                        }
+                      }
+                    >
+                      <SideCar
+                        autoFocus={true}
+                        crossFrame={true}
+                        disabled={false}
+                        id={Object {}}
+                        observed={
+                          <div
+                            data-focus-lock-disabled="false"
+                          >
+                            <div
+                              aria-labelledby="addVisualizationFlyout"
+                              class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                              role="dialog"
+                              tabindex="-1"
+                            >
+                              <button
+                                aria-label="Close this dialog"
+                                class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                                data-test-subj="euiFlyoutCloseButton"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                  focusable="false"
+                                  height="16"
+                                  role="img"
+                                  viewBox="0 0 16 16"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                />
+                              </button>
+                              <div
+                                class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                              >
+                                <h2
+                                  class="euiTitle euiTitle--medium"
+                                  id="addVisualizationFlyout"
+                                >
+                                  Select existing visualization
+                                </h2>
+                              </div>
+                              <div
+                                class="euiFlyoutBody"
+                              >
+                                <div
+                                  class="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                                  tabindex="0"
+                                >
+                                  <div
+                                    class="euiFlyoutBody__banner"
+                                  >
+                                    <div
+                                      class="euiCallOut euiCallOut--primary"
+                                    >
+                                      <div
+                                        class="euiText euiText--small"
+                                      >
+                                        <div
+                                          class="euiTextColor euiTextColor--default"
+                                        >
+                                          <p>
+                                            No saved visualizations found!
+                                          </p>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFlyoutBody__overflowContent"
+                                  >
+                                    <div>
+                                      Please use the "create new visualization" option in add visualization menu.
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="euiFlyoutFooter"
+                              >
+                                <div
+                                  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                >
+                                  <div
+                                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                                  >
+                                    <button
+                                      class="euiButton euiButton--primary"
+                                      type="button"
+                                    >
+                                      <span
+                                        class="euiButtonContent euiButton__content"
+                                      >
+                                        <span
+                                          class="euiButton__text"
+                                        >
+                                          Cancel
+                                        </span>
+                                      </span>
+                                    </button>
+                                  </div>
+                                  <div
+                                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                                  >
+                                    <button
+                                      class="euiButton euiButton--primary euiButton--fill"
+                                      type="button"
+                                    >
+                                      <span
+                                        class="euiButtonContent euiButton__content"
+                                      >
+                                        <span
+                                          class="euiButton__text"
+                                        >
+                                          Add
+                                        </span>
+                                      </span>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        }
+                        onActivation={[Function]}
+                        onDeactivation={[Function]}
+                        persistentFocus={false}
+                        returnFocus={[Function]}
+                        shards={Array []}
+                        sideCar={
+                          Object {
+                            "assignMedium": [Function],
+                            "assignSyncMedium": [Function],
+                            "options": Object {
+                              "async": true,
+                              "ssr": false,
+                            },
+                            "read": [Function],
+                            "useMedium": [Function],
+                          }
+                        }
+                      >
+                        <SideEffect(FocusWatcher)
+                          autoFocus={true}
+                          crossFrame={true}
+                          disabled={false}
+                          id={Object {}}
+                          observed={
+                            <div
+                              data-focus-lock-disabled="false"
+                            >
+                              <div
+                                aria-labelledby="addVisualizationFlyout"
+                                class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                                role="dialog"
+                                tabindex="-1"
+                              >
+                                <button
+                                  aria-label="Close this dialog"
+                                  class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                                  data-test-subj="euiFlyoutCloseButton"
+                                  type="button"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                    focusable="false"
+                                    height="16"
+                                    role="img"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </button>
+                                <div
+                                  class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                                >
+                                  <h2
+                                    class="euiTitle euiTitle--medium"
+                                    id="addVisualizationFlyout"
+                                  >
+                                    Select existing visualization
+                                  </h2>
+                                </div>
+                                <div
+                                  class="euiFlyoutBody"
+                                >
+                                  <div
+                                    class="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                                    tabindex="0"
+                                  >
+                                    <div
+                                      class="euiFlyoutBody__banner"
+                                    >
+                                      <div
+                                        class="euiCallOut euiCallOut--primary"
+                                      >
+                                        <div
+                                          class="euiText euiText--small"
+                                        >
+                                          <div
+                                            class="euiTextColor euiTextColor--default"
+                                          >
+                                            <p>
+                                              No saved visualizations found!
+                                            </p>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="euiFlyoutBody__overflowContent"
+                                    >
+                                      <div>
+                                        Please use the "create new visualization" option in add visualization menu.
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFlyoutFooter"
+                                >
+                                  <div
+                                    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                  >
+                                    <div
+                                      class="euiFlexItem euiFlexItem--flexGrowZero"
+                                    >
+                                      <button
+                                        class="euiButton euiButton--primary"
+                                        type="button"
+                                      >
+                                        <span
+                                          class="euiButtonContent euiButton__content"
+                                        >
+                                          <span
+                                            class="euiButton__text"
+                                          >
+                                            Cancel
+                                          </span>
+                                        </span>
+                                      </button>
+                                    </div>
+                                    <div
+                                      class="euiFlexItem euiFlexItem--flexGrowZero"
+                                    >
+                                      <button
+                                        class="euiButton euiButton--primary euiButton--fill"
+                                        type="button"
+                                      >
+                                        <span
+                                          class="euiButtonContent euiButton__content"
+                                        >
+                                          <span
+                                            class="euiButton__text"
+                                          >
+                                            Add
+                                          </span>
+                                        </span>
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          }
+                          onActivation={[Function]}
+                          onDeactivation={[Function]}
+                          persistentFocus={false}
+                          returnFocus={[Function]}
+                          shards={Array []}
+                        >
+                          <FocusWatcher
+                            autoFocus={true}
+                            crossFrame={true}
+                            disabled={false}
+                            id={Object {}}
+                            observed={
+                              <div
+                                data-focus-lock-disabled="false"
+                              >
+                                <div
+                                  aria-labelledby="addVisualizationFlyout"
+                                  class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                                  role="dialog"
+                                  tabindex="-1"
+                                >
+                                  <button
+                                    aria-label="Close this dialog"
+                                    class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                                    data-test-subj="euiFlyoutCloseButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </button>
+                                  <div
+                                    class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                                  >
+                                    <h2
+                                      class="euiTitle euiTitle--medium"
+                                      id="addVisualizationFlyout"
+                                    >
+                                      Select existing visualization
+                                    </h2>
+                                  </div>
+                                  <div
+                                    class="euiFlyoutBody"
+                                  >
+                                    <div
+                                      class="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                                      tabindex="0"
+                                    >
+                                      <div
+                                        class="euiFlyoutBody__banner"
+                                      >
+                                        <div
+                                          class="euiCallOut euiCallOut--primary"
+                                        >
+                                          <div
+                                            class="euiText euiText--small"
+                                          >
+                                            <div
+                                              class="euiTextColor euiTextColor--default"
+                                            >
+                                              <p>
+                                                No saved visualizations found!
+                                              </p>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                      <div
+                                        class="euiFlyoutBody__overflowContent"
+                                      >
+                                        <div>
+                                          Please use the "create new visualization" option in add visualization menu.
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFlyoutFooter"
+                                  >
+                                    <div
+                                      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                    >
+                                      <div
+                                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <button
+                                          class="euiButton euiButton--primary"
+                                          type="button"
+                                        >
+                                          <span
+                                            class="euiButtonContent euiButton__content"
+                                          >
+                                            <span
+                                              class="euiButton__text"
+                                            >
+                                              Cancel
+                                            </span>
+                                          </span>
+                                        </button>
+                                      </div>
+                                      <div
+                                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <button
+                                          class="euiButton euiButton--primary euiButton--fill"
+                                          type="button"
+                                        >
+                                          <span
+                                            class="euiButtonContent euiButton__content"
+                                          >
+                                            <span
+                                              class="euiButton__text"
+                                            >
+                                              Add
+                                            </span>
+                                          </span>
+                                        </button>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            }
+                            onActivation={[Function]}
+                            onDeactivation={[Function]}
+                            persistentFocus={false}
+                            returnFocus={[Function]}
+                            shards={Array []}
+                          />
+                        </SideEffect(FocusWatcher)>
+                      </SideCar>
+                    </RequireSideCar>
+                    <ForwardRef
+                      data-focus-lock-disabled={false}
+                      enabled={false}
+                      inert={false}
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onTouchStart={[Function]}
+                      removeScrollBar={true}
+                      sideCar={[Function]}
+                    >
+                      <div
+                        data-focus-lock-disabled={false}
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onScrollCapture={[Function]}
+                        onTouchMoveCapture={[Function]}
+                        onTouchStart={[Function]}
+                        onWheelCapture={[Function]}
+                      >
+                        <EuiOutsideClickDetector
+                          isDisabled={true}
+                          onOutsideClick={[Function]}
+                        >
+                          <div
+                            aria-labelledby="addVisualizationFlyout"
+                            className="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                            onMouseDown={[Function]}
+                            onMouseUp={[Function]}
+                            onTouchEnd={[Function]}
+                            onTouchStart={[Function]}
+                            role="dialog"
+                            tabIndex={-1}
+                          >
+                            <EuiI18n
+                              default="Close this dialog"
+                              token="euiFlyout.closeAriaLabel"
+                            >
+                              <EuiButtonIcon
+                                aria-label="Close this dialog"
+                                className="euiFlyout__closeButton euiFlyout__closeButton--inside"
+                                color="text"
+                                data-test-subj="euiFlyoutCloseButton"
+                                display="empty"
+                                iconType="cross"
+                                onClick={[Function]}
+                              >
+                                <button
+                                  aria-label="Close this dialog"
+                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                                  data-test-subj="euiFlyoutCloseButton"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiButtonIcon__icon"
+                                    color="inherit"
+                                    size="m"
+                                    type="cross"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </button>
+                              </EuiButtonIcon>
+                            </EuiI18n>
+                            <EuiFlyoutHeader
+                              hasBorder={true}
+                            >
+                              <div
+                                className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                              >
+                                <EuiTitle
+                                  size="m"
+                                >
+                                  <h2
+                                    className="euiTitle euiTitle--medium"
+                                    id="addVisualizationFlyout"
+                                  >
+                                    Select existing visualization
+                                  </h2>
+                                </EuiTitle>
+                              </div>
+                            </EuiFlyoutHeader>
+                            <EuiFlyoutBody
+                              banner={
+                                <EuiCallOut
+                                  iconType="help"
+                                >
+                                  <p>
+                                    No saved visualizations found!
+                                  </p>
+                                </EuiCallOut>
+                              }
+                            >
+                              <div
+                                className="euiFlyoutBody"
+                              >
+                                <div
+                                  className="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                                  tabIndex={0}
+                                >
+                                  <div
+                                    className="euiFlyoutBody__banner"
+                                  >
+                                    <EuiCallOut
+                                      iconType="help"
+                                    >
+                                      <div
+                                        className="euiCallOut euiCallOut--primary"
+                                      >
+                                        <EuiText
+                                          color="default"
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiText euiText--small"
+                                          >
+                                            <EuiTextColor
+                                              color="default"
+                                              component="div"
+                                            >
+                                              <div
+                                                className="euiTextColor euiTextColor--default"
+                                              >
+                                                <p>
+                                                  No saved visualizations found!
+                                                </p>
+                                              </div>
+                                            </EuiTextColor>
+                                          </div>
+                                        </EuiText>
+                                      </div>
+                                    </EuiCallOut>
+                                  </div>
+                                  <div
+                                    className="euiFlyoutBody__overflowContent"
+                                  >
+                                    <div>
+                                      Please use the "create new visualization" option in add visualization menu.
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </EuiFlyoutBody>
+                            <EuiFlyoutFooter>
+                              <div
+                                className="euiFlyoutFooter"
+                              >
+                                <EuiFlexGroup
+                                  gutterSize="s"
+                                  justifyContent="spaceBetween"
+                                >
+                                  <div
+                                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                  >
+                                    <EuiFlexItem
+                                      grow={false}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <EuiButton
+                                          onClick={[MockFunction]}
+                                        >
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
+                                            disabled={false}
+                                            element="button"
+                                            isDisabled={false}
+                                            onClick={[MockFunction]}
+                                            type="button"
+                                          >
+                                            <button
+                                              className="euiButton euiButton--primary"
+                                              disabled={false}
+                                              onClick={[MockFunction]}
+                                              style={
+                                                Object {
+                                                  "minWidth": undefined,
+                                                }
+                                              }
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="left"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButton__content"
+                                                >
+                                                  <span
+                                                    className="euiButton__text"
+                                                  >
+                                                    Cancel
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </div>
+                                    </EuiFlexItem>
+                                    <EuiFlexItem
+                                      grow={false}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <EuiButton
+                                          fill={true}
+                                          onClick={[Function]}
+                                        >
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
+                                            disabled={false}
+                                            element="button"
+                                            fill={true}
+                                            isDisabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <button
+                                              className="euiButton euiButton--primary euiButton--fill"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              style={
+                                                Object {
+                                                  "minWidth": undefined,
+                                                }
+                                              }
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="left"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButton__content"
+                                                >
+                                                  <span
+                                                    className="euiButton__text"
+                                                  >
+                                                    Add
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </div>
+                                    </EuiFlexItem>
+                                  </div>
+                                </EuiFlexGroup>
+                              </div>
+                            </EuiFlyoutFooter>
+                          </div>
+                        </EuiOutsideClickDetector>
+                      </div>
+                    </ForwardRef>
+                    <div
+                      data-focus-guard={true}
+                      style={
+                        Object {
+                          "height": "0px",
+                          "left": "1px",
+                          "overflow": "hidden",
+                          "padding": 0,
+                          "position": "fixed",
+                          "top": "1px",
+                          "width": "1px",
+                        }
+                      }
+                      tabIndex={0}
+                    />
+                  </ForwardRef(FocusLockUI)>
+                  <RequireSideCar
+                    noIsolation={true}
+                    onClickOutside={[Function]}
+                    setLockProps={[Function]}
+                    sideCar={
+                      Object {
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
+                      }
+                    }
+                  >
+                    <SideCar
+                      noIsolation={true}
+                      onClickOutside={[Function]}
+                      setLockProps={[Function]}
+                      sideCar={
+                        Object {
+                          "assignMedium": [Function],
+                          "assignSyncMedium": [Function],
+                          "options": Object {
+                            "async": true,
+                            "ssr": false,
+                          },
+                          "read": [Function],
+                          "useMedium": [Function],
+                        }
+                      }
+                    >
+                      <Effect
+                        noIsolation={true}
+                        onClickOutside={[Function]}
+                        setLockProps={[Function]}
+                      >
+                        <Component>
+                          <Sheet
+                            styles="
+ [data-focus-on-hidden] {
+   pointer-events: none !important;
+ }
+"
+                          />
+                        </Component>
+                      </Effect>
+                    </SideCar>
+                  </RequireSideCar>
+                </ForwardRef>
+              </ForwardRef>
+            </EuiFocusTrap>
+          </Portal>
+        </EuiPortal>
+      </EuiFlyout>
+    </div>
+  </FlyoutContainers>
+</VisaulizationFlyout>
+`;
+
+exports[`Visualization Flyout Component renders replace visualization Flyout 1`] = `
+<VisaulizationFlyout
+  closeFlyout={[MockFunction]}
+  end="2011-08-12T01:23:45.678Z"
+  http={[MockFunction]}
+  isFlyoutReplacement={true}
+  panelId="oiuccXwBYVazWqOO1e06"
+  pplFilterValue="where Carrier='OpenSearch-Air'"
+  pplService={
+    PPLService {
+      "fetch": [Function],
+      "http": [MockFunction],
+    }
+  }
+  replaceVisualizationId=""
+  setPanelVisualizations={[MockFunction]}
+  setToast={[MockFunction]}
+  start="2011-08-11T01:23:45.678Z"
+>
+  <FlyoutContainers
+    ariaLabel="addVisualizationFlyout"
+    closeFlyout={[MockFunction]}
+    flyoutBody={
+      <EuiFlyoutBody
+        banner={
+          <EuiCallOut
+            iconType="help"
+          >
+            <p>
+              No saved visualizations found!
+            </p>
+          </EuiCallOut>
+        }
+      >
+        <React.Fragment>
+          <div>
+            Please use the "create new visualization" option in add visualization menu.
+          </div>
+        </React.Fragment>
+      </EuiFlyoutBody>
+    }
+    flyoutFooter={
+      <EuiFlyoutFooter>
+        <EuiFlexGroup
+          gutterSize="s"
+          justifyContent="spaceBetween"
+        >
+          <EuiFlexItem
+            grow={false}
+          >
+            <EuiButton
+              onClick={[MockFunction]}
+            >
+              Cancel
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <EuiButton
+              fill={true}
+              onClick={[Function]}
+            >
+              Add
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    }
+    flyoutHeader={
+      <EuiFlyoutHeader
+        hasBorder={true}
+      >
+        <EuiTitle
+          size="m"
+        >
+          <h2
+            id="addVisualizationFlyout"
+          >
+            Replace visualization
+          </h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+    }
+  >
+    <div>
+      <EuiFlyout
+        aria-labelledby="addVisualizationFlyout"
+        className="observability-flyout"
+        onClose={[Function]}
+        ownFocus={false}
+        size="m"
+      >
+        <OuiWindowEvent
+          event="keydown"
+          handler={[Function]}
+        />
+        <EuiPortal>
+          <Portal
+            containerInfo={
+              <div>
+                <div
+                  aria-hidden="true"
+                  data-aria-hidden="true"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="0"
+                />
+                <div
+                  data-focus-lock-disabled="false"
+                >
+                  <div
+                    aria-labelledby="addVisualizationFlyout"
+                    class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                    role="dialog"
+                    tabindex="-1"
+                  >
+                    <button
+                      aria-label="Close this dialog"
+                      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                      data-test-subj="euiFlyoutCloseButton"
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                        focusable="false"
+                        height="16"
+                        role="img"
+                        viewBox="0 0 16 16"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                        />
+                      </svg>
+                    </button>
+                    <div
+                      class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                    >
+                      <h2
+                        class="euiTitle euiTitle--medium"
+                        id="addVisualizationFlyout"
+                      >
+                        Replace visualization
+                      </h2>
+                    </div>
+                    <div
+                      class="euiFlyoutBody"
+                    >
+                      <div
+                        class="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                        tabindex="0"
+                      >
+                        <div
+                          class="euiFlyoutBody__banner"
+                        >
+                          <div
+                            class="euiCallOut euiCallOut--primary"
+                          >
+                            <div
+                              class="euiText euiText--small"
+                            >
+                              <div
+                                class="euiTextColor euiTextColor--default"
+                              >
+                                <p>
+                                  No saved visualizations found!
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div
+                          class="euiFlyoutBody__overflowContent"
+                        >
+                          <div>
+                            Please use the "create new visualization" option in add visualization menu.
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFlyoutFooter"
+                    >
+                      <div
+                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      >
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <button
+                            class="euiButton euiButton--primary"
+                            type="button"
+                          >
+                            <span
+                              class="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                class="euiButton__text"
+                              >
+                                Cancel
+                              </span>
+                            </span>
+                          </button>
+                        </div>
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <button
+                            class="euiButton euiButton--primary euiButton--fill"
+                            type="button"
+                          >
+                            <span
+                              class="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                class="euiButton__text"
+                              >
+                                Add
+                              </span>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  aria-hidden="true"
+                  data-aria-hidden="true"
+                  data-focus-guard="true"
+                  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+                  tabindex="0"
+                />
+              </div>
+            }
+          >
+            <EuiFocusTrap
+              clickOutsideDisables={true}
+              disabled={false}
+              noIsolation={true}
+              returnFocus={true}
+              scrollLock={false}
+            >
+              <ForwardRef
+                enabled={true}
+                noIsolation={true}
+                onClickOutside={[Function]}
+                returnFocus={true}
+                scrollLock={false}
+              >
+                <ForwardRef
+                  enabled={true}
+                  noIsolation={true}
+                  onClickOutside={[Function]}
+                  returnFocus={true}
+                  scrollLock={false}
+                  sideCar={[Function]}
+                >
+                  <ForwardRef(FocusLockUI)
+                    as={
+                      Object {
+                        "$$typeof": Symbol(react.forward_ref),
+                        "classNames": Object {
+                          "fullWidth": "width-before-scroll-bar",
+                          "zeroRight": "right-scroll-bar-position",
+                        },
+                        "defaultProps": Object {
+                          "enabled": true,
+                          "inert": false,
+                          "removeScrollBar": true,
+                        },
+                        "render": [Function],
+                      }
+                    }
+                    autoFocus={true}
+                    crossFrame={true}
+                    disabled={false}
+                    lockProps={
+                      Object {
+                        "allowPinchZoom": undefined,
+                        "as": undefined,
+                        "enabled": false,
+                        "inert": undefined,
+                        "onMouseDown": [Function],
+                        "onTouchStart": [Function],
+                        "shards": undefined,
+                        "sideCar": [Function],
+                        "style": undefined,
+                      }
+                    }
+                    noFocusGuards={false}
+                    onActivation={[Function]}
+                    onDeactivation={[Function]}
+                    persistentFocus={false}
+                    returnFocus={true}
+                    sideCar={[Function]}
+                  >
+                    <div
+                      data-focus-guard={true}
+                      key="guard-first"
+                      style={
+                        Object {
+                          "height": "0px",
+                          "left": "1px",
+                          "overflow": "hidden",
+                          "padding": 0,
+                          "position": "fixed",
+                          "top": "1px",
+                          "width": "1px",
+                        }
+                      }
+                      tabIndex={0}
+                    />
+                    <RequireSideCar
+                      autoFocus={true}
+                      crossFrame={true}
+                      disabled={false}
+                      id={Object {}}
+                      observed={
+                        <div
+                          data-focus-lock-disabled="false"
+                        >
+                          <div
+                            aria-labelledby="addVisualizationFlyout"
+                            class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                            role="dialog"
+                            tabindex="-1"
+                          >
+                            <button
+                              aria-label="Close this dialog"
+                              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                              data-test-subj="euiFlyoutCloseButton"
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                />
+                              </svg>
+                            </button>
+                            <div
+                              class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                                id="addVisualizationFlyout"
+                              >
+                                Replace visualization
+                              </h2>
+                            </div>
+                            <div
+                              class="euiFlyoutBody"
+                            >
+                              <div
+                                class="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                                tabindex="0"
+                              >
+                                <div
+                                  class="euiFlyoutBody__banner"
+                                >
+                                  <div
+                                    class="euiCallOut euiCallOut--primary"
+                                  >
+                                    <div
+                                      class="euiText euiText--small"
+                                    >
+                                      <div
+                                        class="euiTextColor euiTextColor--default"
+                                      >
+                                        <p>
+                                          No saved visualizations found!
+                                        </p>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFlyoutBody__overflowContent"
+                                >
+                                  <div>
+                                    Please use the "create new visualization" option in add visualization menu.
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div
+                              class="euiFlyoutFooter"
+                            >
+                              <div
+                                class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                              >
+                                <div
+                                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                                >
+                                  <button
+                                    class="euiButton euiButton--primary"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="euiButtonContent euiButton__content"
+                                    >
+                                      <span
+                                        class="euiButton__text"
+                                      >
+                                        Cancel
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                                >
+                                  <button
+                                    class="euiButton euiButton--primary euiButton--fill"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="euiButtonContent euiButton__content"
+                                    >
+                                      <span
+                                        class="euiButton__text"
+                                      >
+                                        Add
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      onActivation={[Function]}
+                      onDeactivation={[Function]}
+                      persistentFocus={false}
+                      returnFocus={[Function]}
+                      shards={Array []}
+                      sideCar={
+                        Object {
+                          "assignMedium": [Function],
+                          "assignSyncMedium": [Function],
+                          "options": Object {
+                            "async": true,
+                            "ssr": false,
+                          },
+                          "read": [Function],
+                          "useMedium": [Function],
+                        }
+                      }
+                    >
+                      <SideCar
+                        autoFocus={true}
+                        crossFrame={true}
+                        disabled={false}
+                        id={Object {}}
+                        observed={
+                          <div
+                            data-focus-lock-disabled="false"
+                          >
+                            <div
+                              aria-labelledby="addVisualizationFlyout"
+                              class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                              role="dialog"
+                              tabindex="-1"
+                            >
+                              <button
+                                aria-label="Close this dialog"
+                                class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                                data-test-subj="euiFlyoutCloseButton"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                  focusable="false"
+                                  height="16"
+                                  role="img"
+                                  viewBox="0 0 16 16"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                  />
+                                </svg>
+                              </button>
+                              <div
+                                class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                              >
+                                <h2
+                                  class="euiTitle euiTitle--medium"
+                                  id="addVisualizationFlyout"
+                                >
+                                  Replace visualization
+                                </h2>
+                              </div>
+                              <div
+                                class="euiFlyoutBody"
+                              >
+                                <div
+                                  class="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                                  tabindex="0"
+                                >
+                                  <div
+                                    class="euiFlyoutBody__banner"
+                                  >
+                                    <div
+                                      class="euiCallOut euiCallOut--primary"
+                                    >
+                                      <div
+                                        class="euiText euiText--small"
+                                      >
+                                        <div
+                                          class="euiTextColor euiTextColor--default"
+                                        >
+                                          <p>
+                                            No saved visualizations found!
+                                          </p>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFlyoutBody__overflowContent"
+                                  >
+                                    <div>
+                                      Please use the "create new visualization" option in add visualization menu.
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="euiFlyoutFooter"
+                              >
+                                <div
+                                  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                >
+                                  <div
+                                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                                  >
+                                    <button
+                                      class="euiButton euiButton--primary"
+                                      type="button"
+                                    >
+                                      <span
+                                        class="euiButtonContent euiButton__content"
+                                      >
+                                        <span
+                                          class="euiButton__text"
+                                        >
+                                          Cancel
+                                        </span>
+                                      </span>
+                                    </button>
+                                  </div>
+                                  <div
+                                    class="euiFlexItem euiFlexItem--flexGrowZero"
+                                  >
+                                    <button
+                                      class="euiButton euiButton--primary euiButton--fill"
+                                      type="button"
+                                    >
+                                      <span
+                                        class="euiButtonContent euiButton__content"
+                                      >
+                                        <span
+                                          class="euiButton__text"
+                                        >
+                                          Add
+                                        </span>
+                                      </span>
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        }
+                        onActivation={[Function]}
+                        onDeactivation={[Function]}
+                        persistentFocus={false}
+                        returnFocus={[Function]}
+                        shards={Array []}
+                        sideCar={
+                          Object {
+                            "assignMedium": [Function],
+                            "assignSyncMedium": [Function],
+                            "options": Object {
+                              "async": true,
+                              "ssr": false,
+                            },
+                            "read": [Function],
+                            "useMedium": [Function],
+                          }
+                        }
+                      >
+                        <SideEffect(FocusWatcher)
+                          autoFocus={true}
+                          crossFrame={true}
+                          disabled={false}
+                          id={Object {}}
+                          observed={
+                            <div
+                              data-focus-lock-disabled="false"
+                            >
+                              <div
+                                aria-labelledby="addVisualizationFlyout"
+                                class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                                role="dialog"
+                                tabindex="-1"
+                              >
+                                <button
+                                  aria-label="Close this dialog"
+                                  class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                                  data-test-subj="euiFlyoutCloseButton"
+                                  type="button"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                    focusable="false"
+                                    height="16"
+                                    role="img"
+                                    viewBox="0 0 16 16"
+                                    width="16"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                    />
+                                  </svg>
+                                </button>
+                                <div
+                                  class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                                >
+                                  <h2
+                                    class="euiTitle euiTitle--medium"
+                                    id="addVisualizationFlyout"
+                                  >
+                                    Replace visualization
+                                  </h2>
+                                </div>
+                                <div
+                                  class="euiFlyoutBody"
+                                >
+                                  <div
+                                    class="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                                    tabindex="0"
+                                  >
+                                    <div
+                                      class="euiFlyoutBody__banner"
+                                    >
+                                      <div
+                                        class="euiCallOut euiCallOut--primary"
+                                      >
+                                        <div
+                                          class="euiText euiText--small"
+                                        >
+                                          <div
+                                            class="euiTextColor euiTextColor--default"
+                                          >
+                                            <p>
+                                              No saved visualizations found!
+                                            </p>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="euiFlyoutBody__overflowContent"
+                                    >
+                                      <div>
+                                        Please use the "create new visualization" option in add visualization menu.
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="euiFlyoutFooter"
+                                >
+                                  <div
+                                    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                  >
+                                    <div
+                                      class="euiFlexItem euiFlexItem--flexGrowZero"
+                                    >
+                                      <button
+                                        class="euiButton euiButton--primary"
+                                        type="button"
+                                      >
+                                        <span
+                                          class="euiButtonContent euiButton__content"
+                                        >
+                                          <span
+                                            class="euiButton__text"
+                                          >
+                                            Cancel
+                                          </span>
+                                        </span>
+                                      </button>
+                                    </div>
+                                    <div
+                                      class="euiFlexItem euiFlexItem--flexGrowZero"
+                                    >
+                                      <button
+                                        class="euiButton euiButton--primary euiButton--fill"
+                                        type="button"
+                                      >
+                                        <span
+                                          class="euiButtonContent euiButton__content"
+                                        >
+                                          <span
+                                            class="euiButton__text"
+                                          >
+                                            Add
+                                          </span>
+                                        </span>
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          }
+                          onActivation={[Function]}
+                          onDeactivation={[Function]}
+                          persistentFocus={false}
+                          returnFocus={[Function]}
+                          shards={Array []}
+                        >
+                          <FocusWatcher
+                            autoFocus={true}
+                            crossFrame={true}
+                            disabled={false}
+                            id={Object {}}
+                            observed={
+                              <div
+                                data-focus-lock-disabled="false"
+                              >
+                                <div
+                                  aria-labelledby="addVisualizationFlyout"
+                                  class="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                                  role="dialog"
+                                  tabindex="-1"
+                                >
+                                  <button
+                                    aria-label="Close this dialog"
+                                    class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                                    data-test-subj="euiFlyoutCloseButton"
+                                    type="button"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                      focusable="false"
+                                      height="16"
+                                      role="img"
+                                      viewBox="0 0 16 16"
+                                      width="16"
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                      />
+                                    </svg>
+                                  </button>
+                                  <div
+                                    class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                                  >
+                                    <h2
+                                      class="euiTitle euiTitle--medium"
+                                      id="addVisualizationFlyout"
+                                    >
+                                      Replace visualization
+                                    </h2>
+                                  </div>
+                                  <div
+                                    class="euiFlyoutBody"
+                                  >
+                                    <div
+                                      class="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                                      tabindex="0"
+                                    >
+                                      <div
+                                        class="euiFlyoutBody__banner"
+                                      >
+                                        <div
+                                          class="euiCallOut euiCallOut--primary"
+                                        >
+                                          <div
+                                            class="euiText euiText--small"
+                                          >
+                                            <div
+                                              class="euiTextColor euiTextColor--default"
+                                            >
+                                              <p>
+                                                No saved visualizations found!
+                                              </p>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                      <div
+                                        class="euiFlyoutBody__overflowContent"
+                                      >
+                                        <div>
+                                          Please use the "create new visualization" option in add visualization menu.
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="euiFlyoutFooter"
+                                  >
+                                    <div
+                                      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                    >
+                                      <div
+                                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <button
+                                          class="euiButton euiButton--primary"
+                                          type="button"
+                                        >
+                                          <span
+                                            class="euiButtonContent euiButton__content"
+                                          >
+                                            <span
+                                              class="euiButton__text"
+                                            >
+                                              Cancel
+                                            </span>
+                                          </span>
+                                        </button>
+                                      </div>
+                                      <div
+                                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <button
+                                          class="euiButton euiButton--primary euiButton--fill"
+                                          type="button"
+                                        >
+                                          <span
+                                            class="euiButtonContent euiButton__content"
+                                          >
+                                            <span
+                                              class="euiButton__text"
+                                            >
+                                              Add
+                                            </span>
+                                          </span>
+                                        </button>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            }
+                            onActivation={[Function]}
+                            onDeactivation={[Function]}
+                            persistentFocus={false}
+                            returnFocus={[Function]}
+                            shards={Array []}
+                          />
+                        </SideEffect(FocusWatcher)>
+                      </SideCar>
+                    </RequireSideCar>
+                    <ForwardRef
+                      data-focus-lock-disabled={false}
+                      enabled={false}
+                      inert={false}
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      onMouseDown={[Function]}
+                      onTouchStart={[Function]}
+                      removeScrollBar={true}
+                      sideCar={[Function]}
+                    >
+                      <div
+                        data-focus-lock-disabled={false}
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                        onMouseDown={[Function]}
+                        onScrollCapture={[Function]}
+                        onTouchMoveCapture={[Function]}
+                        onTouchStart={[Function]}
+                        onWheelCapture={[Function]}
+                      >
+                        <EuiOutsideClickDetector
+                          isDisabled={true}
+                          onOutsideClick={[Function]}
+                        >
+                          <div
+                            aria-labelledby="addVisualizationFlyout"
+                            className="euiFlyout euiFlyout--medium euiFlyout--paddingLarge observability-flyout"
+                            onMouseDown={[Function]}
+                            onMouseUp={[Function]}
+                            onTouchEnd={[Function]}
+                            onTouchStart={[Function]}
+                            role="dialog"
+                            tabIndex={-1}
+                          >
+                            <EuiI18n
+                              default="Close this dialog"
+                              token="euiFlyout.closeAriaLabel"
+                            >
+                              <EuiButtonIcon
+                                aria-label="Close this dialog"
+                                className="euiFlyout__closeButton euiFlyout__closeButton--inside"
+                                color="text"
+                                data-test-subj="euiFlyoutCloseButton"
+                                display="empty"
+                                iconType="cross"
+                                onClick={[Function]}
+                              >
+                                <button
+                                  aria-label="Close this dialog"
+                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                                  data-test-subj="euiFlyoutCloseButton"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiButtonIcon__icon"
+                                    color="inherit"
+                                    size="m"
+                                    type="cross"
+                                  >
+                                    <EuiIconCross
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M7.293 8L3.146 3.854a.5.5 0 11.708-.708L8 7.293l4.146-4.147a.5.5 0 01.708.708L8.707 8l4.147 4.146a.5.5 0 01-.708.708L8 8.707l-4.146 4.147a.5.5 0 01-.708-.708L7.293 8z"
+                                        />
+                                      </svg>
+                                    </EuiIconCross>
+                                  </EuiIcon>
+                                </button>
+                              </EuiButtonIcon>
+                            </EuiI18n>
+                            <EuiFlyoutHeader
+                              hasBorder={true}
+                            >
+                              <div
+                                className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                              >
+                                <EuiTitle
+                                  size="m"
+                                >
+                                  <h2
+                                    className="euiTitle euiTitle--medium"
+                                    id="addVisualizationFlyout"
+                                  >
+                                    Replace visualization
+                                  </h2>
+                                </EuiTitle>
+                              </div>
+                            </EuiFlyoutHeader>
+                            <EuiFlyoutBody
+                              banner={
+                                <EuiCallOut
+                                  iconType="help"
+                                >
+                                  <p>
+                                    No saved visualizations found!
+                                  </p>
+                                </EuiCallOut>
+                              }
+                            >
+                              <div
+                                className="euiFlyoutBody"
+                              >
+                                <div
+                                  className="euiFlyoutBody__overflow euiFlyoutBody__overflow--hasBanner"
+                                  tabIndex={0}
+                                >
+                                  <div
+                                    className="euiFlyoutBody__banner"
+                                  >
+                                    <EuiCallOut
+                                      iconType="help"
+                                    >
+                                      <div
+                                        className="euiCallOut euiCallOut--primary"
+                                      >
+                                        <EuiText
+                                          color="default"
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiText euiText--small"
+                                          >
+                                            <EuiTextColor
+                                              color="default"
+                                              component="div"
+                                            >
+                                              <div
+                                                className="euiTextColor euiTextColor--default"
+                                              >
+                                                <p>
+                                                  No saved visualizations found!
+                                                </p>
+                                              </div>
+                                            </EuiTextColor>
+                                          </div>
+                                        </EuiText>
+                                      </div>
+                                    </EuiCallOut>
+                                  </div>
+                                  <div
+                                    className="euiFlyoutBody__overflowContent"
+                                  >
+                                    <div>
+                                      Please use the "create new visualization" option in add visualization menu.
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </EuiFlyoutBody>
+                            <EuiFlyoutFooter>
+                              <div
+                                className="euiFlyoutFooter"
+                              >
+                                <EuiFlexGroup
+                                  gutterSize="s"
+                                  justifyContent="spaceBetween"
+                                >
+                                  <div
+                                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                  >
+                                    <EuiFlexItem
+                                      grow={false}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <EuiButton
+                                          onClick={[MockFunction]}
+                                        >
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
+                                            disabled={false}
+                                            element="button"
+                                            isDisabled={false}
+                                            onClick={[MockFunction]}
+                                            type="button"
+                                          >
+                                            <button
+                                              className="euiButton euiButton--primary"
+                                              disabled={false}
+                                              onClick={[MockFunction]}
+                                              style={
+                                                Object {
+                                                  "minWidth": undefined,
+                                                }
+                                              }
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="left"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButton__content"
+                                                >
+                                                  <span
+                                                    className="euiButton__text"
+                                                  >
+                                                    Cancel
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </div>
+                                    </EuiFlexItem>
+                                    <EuiFlexItem
+                                      grow={false}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <EuiButton
+                                          fill={true}
+                                          onClick={[Function]}
+                                        >
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
+                                            disabled={false}
+                                            element="button"
+                                            fill={true}
+                                            isDisabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <button
+                                              className="euiButton euiButton--primary euiButton--fill"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              style={
+                                                Object {
+                                                  "minWidth": undefined,
+                                                }
+                                              }
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="left"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButton__content"
+                                                >
+                                                  <span
+                                                    className="euiButton__text"
+                                                  >
+                                                    Add
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </div>
+                                    </EuiFlexItem>
+                                  </div>
+                                </EuiFlexGroup>
+                              </div>
+                            </EuiFlyoutFooter>
+                          </div>
+                        </EuiOutsideClickDetector>
+                      </div>
+                    </ForwardRef>
+                    <div
+                      data-focus-guard={true}
+                      style={
+                        Object {
+                          "height": "0px",
+                          "left": "1px",
+                          "overflow": "hidden",
+                          "padding": 0,
+                          "position": "fixed",
+                          "top": "1px",
+                          "width": "1px",
+                        }
+                      }
+                      tabIndex={0}
+                    />
+                  </ForwardRef(FocusLockUI)>
+                  <RequireSideCar
+                    noIsolation={true}
+                    onClickOutside={[Function]}
+                    setLockProps={[Function]}
+                    sideCar={
+                      Object {
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
+                      }
+                    }
+                  >
+                    <SideCar
+                      noIsolation={true}
+                      onClickOutside={[Function]}
+                      setLockProps={[Function]}
+                      sideCar={
+                        Object {
+                          "assignMedium": [Function],
+                          "assignSyncMedium": [Function],
+                          "options": Object {
+                            "async": true,
+                            "ssr": false,
+                          },
+                          "read": [Function],
+                          "useMedium": [Function],
+                        }
+                      }
+                    >
+                      <Effect
+                        noIsolation={true}
+                        onClickOutside={[Function]}
+                        setLockProps={[Function]}
+                      >
+                        <Component>
+                          <Sheet
+                            styles="
+ [data-focus-on-hidden] {
+   pointer-events: none !important;
+ }
+"
+                          />
+                        </Component>
+                      </Effect>
+                    </SideCar>
+                  </RequireSideCar>
+                </ForwardRef>
+              </ForwardRef>
+            </EuiFocusTrap>
+          </Portal>
+        </EuiPortal>
+      </EuiFlyout>
+    </div>
+  </FlyoutContainers>
+</VisaulizationFlyout>
+`;
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout.test.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout.test.tsx
new file mode 100644
index 0000000000..7aebf7b901
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/visualization_flyout.test.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import PPLService from '../../../../../services/requests/ppl';
+import React from 'react';
+import { VisaulizationFlyout } from '../visualization_flyout';
+import httpClientMock from '../../../../../../test/__mocks__/httpClientMock';
+import { ShortDate } from '@elastic/eui';
+
+describe('Visualization Flyout Component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders add visualization Flyout', () => {
+    const panelId = '';
+    const pplFilterValue = '';
+    const start: ShortDate = 'now-15m';
+    const end: ShortDate = 'now';
+    const setToast = jest.fn();
+    const closeFlyout = jest.fn();
+    const setPanelVisualizations = jest.fn();
+    const pplService = new PPLService(httpClientMock);
+    const isFlyoutReplacement = false;
+
+    const wrapper = mount(
+      <VisaulizationFlyout
+        panelId={panelId}
+        pplFilterValue={pplFilterValue}
+        start={start}
+        end={end}
+        setToast={setToast}
+        closeFlyout={closeFlyout}
+        setPanelVisualizations={setPanelVisualizations}
+        http={httpClientMock}
+        pplService={pplService}
+        isFlyoutReplacement={isFlyoutReplacement}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders replace visualization Flyout', () => {
+    const panelId = 'oiuccXwBYVazWqOO1e06';
+    const pplFilterValue = "where Carrier='OpenSearch-Air'";
+    const start: ShortDate = '2011-08-11T01:23:45.678Z';
+    const end: ShortDate = '2011-08-12T01:23:45.678Z';
+    const setToast = jest.fn();
+    const closeFlyout = jest.fn();
+    const setPanelVisualizations = jest.fn();
+    const pplService = new PPLService(httpClientMock);
+    const isFlyoutReplacement = true;
+    const replaceVisualizationId = '';
+
+    const wrapper = mount(
+      <VisaulizationFlyout
+        panelId={panelId}
+        pplFilterValue={pplFilterValue}
+        start={start}
+        end={end}
+        setToast={setToast}
+        closeFlyout={closeFlyout}
+        setPanelVisualizations={setPanelVisualizations}
+        http={httpClientMock}
+        pplService={pplService}
+        isFlyoutReplacement={isFlyoutReplacement}
+        replaceVisualizationId={replaceVisualizationId}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/index.ts b/public/components/custom_panels/panel_modules/visualization_flyout/index.ts
new file mode 100644
index 0000000000..bab4d36c5c
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { VisaulizationFlyout } from "./visualization_flyout";
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.scss b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.scss
new file mode 100644
index 0000000000..bec49407b7
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.scss
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.visualization-div-preview {
+  min-height: 50vh;
+}
+
+.visualization-loading-chart-preview {
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.visualization-error-div-preview {
+  overflow: scroll;
+}
+
+.date-picker-preview {
+  height: 3vh;
+  max-width: 500px;
+}
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
new file mode 100644
index 0000000000..7c1f2dc9ba
--- /dev/null
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
@@ -0,0 +1,370 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable no-console */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiCallOut,
+  EuiDatePicker,
+  EuiDatePickerRange,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiFormRow,
+  EuiIcon,
+  EuiLoadingChart,
+  EuiSelect,
+  EuiSelectOption,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  ShortDate,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { FlyoutContainers } from '../../../common/flyout_containers';
+import { displayVisualization, getQueryResponse, isDateValid } from '../../helpers/utils';
+import { convertDateTime } from '../../helpers/utils';
+import PPLService from '../../../../services/requests/ppl';
+import { CoreStart } from '../../../../../../../src/core/public';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../../common/constants/custom_panels';
+import {
+  pplResponse,
+  SavedVisualizationType,
+  VisualizationType,
+} from '../../../../../common/types/custom_panels';
+import './visualization_flyout.scss';
+import { uiSettingsService } from '../../../../../common/utils';
+
+/*
+ * VisaulizationFlyout - This module create a flyout to add visualization
+ *
+ * Props taken in as params are:
+ * panelId: panel Id of current operational panel
+ * closeFlyout: function to close the flyout
+ * start: start time in date filter
+ * end: end time in date filter
+ * setToast: function to set toast in the panel
+ * http: http core service
+ * pplService: ppl requestor service
+ * setPanelVisualizations: function set the visualization list in panel
+ * isFlyoutReplacement: boolean to see if the flyout is trigger for add or replace visualization
+ * replaceVisualizationId: string id of the visualization to be replaced
+ */
+
+interface VisualizationFlyoutProps {
+  panelId: string;
+  pplFilterValue: string;
+  closeFlyout: () => void;
+  start: ShortDate;
+  end: ShortDate;
+  setToast: (
+    title: string,
+    color?: string,
+    text?: React.ReactChild | undefined,
+    side?: string | undefined
+  ) => void;
+  http: CoreStart['http'];
+  pplService: PPLService;
+  setPanelVisualizations: React.Dispatch<React.SetStateAction<VisualizationType[]>>;
+  isFlyoutReplacement?: boolean | undefined;
+  replaceVisualizationId?: string | undefined;
+  appId?: string;
+}
+
+export const VisaulizationFlyout = ({
+  panelId,
+  appId = '',
+  pplFilterValue,
+  closeFlyout,
+  start,
+  end,
+  setToast,
+  http,
+  pplService,
+  setPanelVisualizations,
+  isFlyoutReplacement,
+  replaceVisualizationId,
+}: VisualizationFlyoutProps) => {
+  const [newVisualizationTitle, setNewVisualizationTitle] = useState('');
+  const [newVisualizationType, setNewVisualizationType] = useState('');
+  const [newVisualizationTimeField, setNewVisualizationTimeField] = useState('');
+  const [previewMetaData, setPreviewMetaData] = useState<SavedVisualizationType>();
+  const [pplQuery, setPPLQuery] = useState('');
+  const [previewData, setPreviewData] = useState<pplResponse>({} as pplResponse);
+  const [previewArea, setPreviewArea] = useState(<></>);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [isPreviewError, setIsPreviewError] = useState('');
+  const [savedVisualizations, setSavedVisualizations] = useState<SavedVisualizationType[]>([]);
+  const [visualizationOptions, setVisualizationOptions] = useState<EuiSelectOption[]>([]);
+  const [selectValue, setSelectValue] = useState('');
+
+  // DateTimePicker States
+  const startDate = convertDateTime(start, true, false);
+  const endDate = convertDateTime(end, false, false);
+
+  const isInputValid = () => {
+    if (!isDateValid(convertDateTime(start), convertDateTime(end, false), setToast, 'left')) {
+      return false;
+    }
+
+    if (selectValue === '') {
+      setToast('Please make a valid selection', 'danger', undefined, 'left');
+      return false;
+    }
+
+    return true;
+  };
+
+  const addVisualization = () => {
+    if (!isInputValid()) return;
+
+    if (isFlyoutReplacement) {
+      http
+        .post(`${CUSTOM_PANELS_API_PREFIX}/visualizations/replace`, {
+          body: JSON.stringify({
+            panelId,
+            savedVisualizationId: selectValue,
+            oldVisualizationId: replaceVisualizationId,
+          }),
+        })
+        .then(async (res) => {
+          setPanelVisualizations(res.visualizations);
+          setToast(`Visualization ${newVisualizationTitle} successfully added!`, 'success');
+        })
+        .catch((err) => {
+          setToast(`Error in adding ${newVisualizationTitle} visualization to the panel`, 'danger');
+          console.error(err);
+        });
+    } else {
+      http
+        .post(`${CUSTOM_PANELS_API_PREFIX}/visualizations`, {
+          body: JSON.stringify({
+            panelId,
+            savedVisualizationId: selectValue,
+          }),
+        })
+        .then(async (res) => {
+          setPanelVisualizations(res.visualizations);
+          setToast(`Visualization ${newVisualizationTitle} successfully added!`, 'success');
+        })
+        .catch((err) => {
+          setToast(`Error in adding ${newVisualizationTitle} visualization to the panel`, 'danger');
+          console.error(err);
+        });
+    }
+    closeFlyout();
+  };
+
+  const onRefreshPreview = () => {
+    if (!isInputValid()) return;
+
+    getQueryResponse(
+      pplService,
+      pplQuery,
+      newVisualizationType,
+      start,
+      end,
+      setPreviewData,
+      setPreviewLoading,
+      setIsPreviewError,
+      pplFilterValue,
+      newVisualizationTimeField
+    );
+  };
+
+  const timeRange = (
+    <EuiFormRow label="Panel Time Range" fullWidth>
+      <EuiDatePickerRange
+        className="date-picker-preview"
+        fullWidth
+        readOnly
+        startDateControl={
+          <EuiDatePicker
+            selected={startDate}
+            startDate={startDate}
+            endDate={endDate}
+            isInvalid={startDate > endDate}
+            aria-label="Start date"
+            dateFormat={uiSettingsService.get('dateFormat')}
+          />
+        }
+        endDateControl={
+          <EuiDatePicker
+            selected={endDate}
+            startDate={startDate}
+            endDate={endDate}
+            isInvalid={startDate > endDate}
+            aria-label="End date"
+            dateFormat={uiSettingsService.get('dateFormat')}
+          />
+        }
+      />
+    </EuiFormRow>
+  );
+
+  const flyoutHeader = (
+    <EuiFlyoutHeader hasBorder>
+      <EuiTitle size="m">
+        <h2 id="addVisualizationFlyout">
+          {isFlyoutReplacement ? 'Replace visualization' : 'Select existing visualization'}
+        </h2>
+      </EuiTitle>
+    </EuiFlyoutHeader>
+  );
+
+  const onChangeSelection = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectValue(e.target.value);
+  };
+
+  const emptySavedVisualizations = (
+    <EuiCallOut iconType="help">
+      <p>No saved visualizations found!</p>
+    </EuiCallOut>
+  );
+
+  const flyoutBody =
+    savedVisualizations.length > 0 ? (
+      <EuiFlyoutBody>
+        <>
+          <EuiSpacer size="s" />
+          <EuiFormRow label="Visualization name">
+            <EuiSelect
+              hasNoInitialSelection
+              onChange={(e) => onChangeSelection(e)}
+              options={visualizationOptions}
+              value={selectValue}
+            />
+          </EuiFormRow>
+          <EuiSpacer size="l" />
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiText grow={false}>
+                <h4>Preview</h4>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                aria-label="refreshPreview"
+                iconType="refresh"
+                onClick={onRefreshPreview}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="s" />
+          {previewArea}
+        </>
+      </EuiFlyoutBody>
+    ) : (
+      <EuiFlyoutBody banner={emptySavedVisualizations}>
+        <>
+          <div>{'Please use the "create new visualization" option in add visualization menu.'}</div>
+        </>
+      </EuiFlyoutBody>
+    );
+
+  const flyoutFooter = (
+    <EuiFlyoutFooter>
+      <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiButton onClick={closeFlyout}>Cancel</EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton onClick={addVisualization} fill>
+            Add
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlyoutFooter>
+  );
+
+  // Fetch all saved visualizations
+  const fetchSavedVisualizations = async () => {
+    return http
+      .get(`${CUSTOM_PANELS_API_PREFIX}/visualizations`)
+      .then((res) => {
+        if (res.visualizations.length > 0) {
+          setSavedVisualizations(res.visualizations);
+          const filterAppVis = res.visualizations.filter((vis: SavedVisualizationType) => {
+            return appId
+              ? vis.hasOwnProperty('application_id')
+                ? vis.application_id === appId
+                : false
+              : !vis.hasOwnProperty('application_id');
+          });
+          setVisualizationOptions(
+            filterAppVis.map((visualization: SavedVisualizationType) => {
+              return { value: visualization.id, text: visualization.name };
+            })
+          );
+        }
+      })
+      .catch((err) => {
+        console.error('Issue in fetching the operational panels', err);
+      });
+  };
+
+  useEffect(() => {
+    const previewTemplate = (
+      <>
+        {timeRange}
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            {previewLoading ? (
+              <EuiLoadingChart size="xl" mono className="visualization-loading-chart-preview" />
+            ) : isPreviewError !== '' ? (
+              <div className="visualization-error-div-preview">
+                <EuiIcon type="alert" color="danger" size="s" />
+                <EuiSpacer size="s" />
+                <EuiText size="s">
+                  <p>{isPreviewError}</p>
+                </EuiText>
+              </div>
+            ) : (
+              <div className="visualization-div-preview">
+                {displayVisualization(previewMetaData, previewData, newVisualizationType)}
+              </div>
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </>
+    );
+    setPreviewArea(previewTemplate);
+  }, [previewLoading]);
+
+  // On change of selected visualization change options
+  useEffect(() => {
+    for (let i = 0; i < savedVisualizations.length; i++) {
+      const visualization = savedVisualizations[i];
+      if (visualization.id === selectValue) {
+        setPPLQuery(visualization.query);
+        setNewVisualizationTitle(visualization.name);
+        setNewVisualizationType(visualization.type);
+        setPreviewMetaData(visualization);
+        setNewVisualizationTimeField(visualization.timeField);
+        break;
+      }
+    }
+  }, [selectValue]);
+
+  // load saved visualizations
+  useEffect(() => {
+    fetchSavedVisualizations();
+  }, []);
+
+  return (
+    <FlyoutContainers
+      closeFlyout={closeFlyout}
+      flyoutHeader={flyoutHeader}
+      flyoutBody={flyoutBody}
+      flyoutFooter={flyoutFooter}
+      ariaLabel="addVisualizationFlyout"
+    />
+  );
+};
diff --git a/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap b/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap
new file mode 100644
index 0000000000..a128191e44
--- /dev/null
+++ b/public/components/event_analytics/__tests__/__snapshots__/no_results.test.tsx.snap
@@ -0,0 +1,212 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`No result component Renders No result component 1`] = `
+<NoResults>
+  <I18nProvider>
+    <IntlProvider
+      defaultLocale="en"
+      formats={
+        Object {
+          "date": Object {
+            "full": Object {
+              "day": "numeric",
+              "month": "long",
+              "weekday": "long",
+              "year": "numeric",
+            },
+            "long": Object {
+              "day": "numeric",
+              "month": "long",
+              "year": "numeric",
+            },
+            "medium": Object {
+              "day": "numeric",
+              "month": "short",
+              "year": "numeric",
+            },
+            "short": Object {
+              "day": "numeric",
+              "month": "numeric",
+              "year": "2-digit",
+            },
+          },
+          "number": Object {
+            "currency": Object {
+              "style": "currency",
+            },
+            "percent": Object {
+              "style": "percent",
+            },
+          },
+          "relative": Object {
+            "days": Object {
+              "units": "day",
+            },
+            "hours": Object {
+              "units": "hour",
+            },
+            "minutes": Object {
+              "units": "minute",
+            },
+            "months": Object {
+              "units": "month",
+            },
+            "seconds": Object {
+              "units": "second",
+            },
+            "years": Object {
+              "units": "year",
+            },
+          },
+          "time": Object {
+            "full": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "long": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "medium": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+            },
+            "short": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+            },
+          },
+        }
+      }
+      locale="en"
+      messages={Object {}}
+      textComponent={Symbol(react.fragment)}
+    >
+      <PseudoLocaleWrapper>
+        <EuiSpacer
+          size="xl"
+        >
+          <div
+            className="euiSpacer euiSpacer--xl"
+          />
+        </EuiSpacer>
+        <EuiFlexGroup
+          justifyContent="center"
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <EuiFlexItem
+              className="dscNoResults"
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero dscNoResults"
+              >
+                <EuiCallOut
+                  color="warning"
+                  data-test-subj="discoverNoResults"
+                  iconType="help"
+                  title={
+                    <FormattedMessage
+                      defaultMessage="No results match your search criteria"
+                      id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
+                      values={Object {}}
+                    />
+                  }
+                >
+                  <div
+                    className="euiCallOut euiCallOut--warning"
+                    data-test-subj="discoverNoResults"
+                  >
+                    <div
+                      className="euiCallOutHeader"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiCallOutHeader__icon"
+                        color="inherit"
+                        size="m"
+                        type="help"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiCallOutHeader__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                      <span
+                        className="euiCallOutHeader__title"
+                      >
+                        <FormattedMessage
+                          defaultMessage="No results match your search criteria"
+                          id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
+                          values={Object {}}
+                        >
+                          No results match your search criteria
+                        </FormattedMessage>
+                      </span>
+                    </div>
+                  </div>
+                </EuiCallOut>
+                <EuiSpacer
+                  size="xl"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--xl"
+                  />
+                </EuiSpacer>
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <h2
+                      data-test-subj="discoverNoResultsTimefilter"
+                    >
+                      <FormattedMessage
+                        defaultMessage="Expand your time range or modify your query"
+                        id="discover.noResults.expandYourTimeRangeTitle"
+                        values={Object {}}
+                      >
+                        Expand your time range or modify your query
+                      </FormattedMessage>
+                    </h2>
+                    <p>
+                      <FormattedMessage
+                        defaultMessage="Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. Try change time range, query filters or choose different time fields"
+                        id="discover.noResults.queryMayNotMatchTitle"
+                        values={Object {}}
+                      >
+                        Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. Try change time range, query filters or choose different time fields
+                      </FormattedMessage>
+                    </p>
+                  </div>
+                </EuiText>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </PseudoLocaleWrapper>
+    </IntlProvider>
+  </I18nProvider>
+</NoResults>
+`;
diff --git a/public/components/event_analytics/__tests__/no_results.test.tsx b/public/components/event_analytics/__tests__/no_results.test.tsx
new file mode 100644
index 0000000000..1bc6c9eb17
--- /dev/null
+++ b/public/components/event_analytics/__tests__/no_results.test.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { NoResults } from '../explorer/no_results';
+
+describe('No result component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders No result component', async () => {
+    
+    const wrapper = mount(
+      <NoResults />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap b/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap
new file mode 100644
index 0000000000..df40c845c5
--- /dev/null
+++ b/public/components/event_analytics/explorer/__tests__/__snapshots__/data_grid.test.tsx.snap
@@ -0,0 +1,691 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Datagrid component Renders data grid component 1`] = `
+<DataGrid
+  explorerFields={
+    Object {
+      "availableFields": Array [
+        Object {
+          "name": "agent",
+          "type": "string",
+        },
+        Object {
+          "name": "bytes",
+          "type": "long",
+        },
+        Object {
+          "name": "clientip",
+          "type": "ip",
+        },
+        Object {
+          "name": "event",
+          "type": "struct",
+        },
+        Object {
+          "name": "extension",
+          "type": "string",
+        },
+        Object {
+          "name": "geo",
+          "type": "struct",
+        },
+        Object {
+          "name": "host",
+          "type": "string",
+        },
+        Object {
+          "name": "index",
+          "type": "string",
+        },
+        Object {
+          "name": "ip",
+          "type": "ip",
+        },
+        Object {
+          "name": "machine",
+          "type": "struct",
+        },
+        Object {
+          "name": "memory",
+          "type": "double",
+        },
+        Object {
+          "name": "message",
+          "type": "string",
+        },
+        Object {
+          "name": "phpmemory",
+          "type": "long",
+        },
+        Object {
+          "name": "referer",
+          "type": "string",
+        },
+        Object {
+          "name": "request",
+          "type": "string",
+        },
+        Object {
+          "name": "response",
+          "type": "string",
+        },
+        Object {
+          "name": "tags",
+          "type": "string",
+        },
+        Object {
+          "name": "timestamp",
+          "type": "timestamp",
+        },
+        Object {
+          "name": "url",
+          "type": "string",
+        },
+        Object {
+          "name": "utc_time",
+          "type": "timestamp",
+        },
+      ],
+      "queriedFields": Array [
+        Object {
+          "name": "double_per_ip_bytes",
+          "type": "long",
+        },
+        Object {
+          "name": "host",
+          "type": "text",
+        },
+        Object {
+          "name": "ip_count",
+          "type": "integer",
+        },
+        Object {
+          "name": "per_ip_bytes",
+          "type": "long",
+        },
+        Object {
+          "name": "resp_code",
+          "type": "text",
+        },
+        Object {
+          "name": "sum_bytes",
+          "type": "long",
+        },
+      ],
+      "selectedFields": Array [],
+      "unselectedFields": Array [],
+    }
+  }
+  rows={
+    Array [
+      Object {
+        "AvgTicketPrice": 841.2656,
+        "Cancelled": "false",
+        "Carrier": "OpenSearch Dashboards Airlines",
+        "Dest": "Sydney Kingsford Smith International Airport",
+        "DestAirportID": "SYD",
+        "DestCityName": "Sydney",
+        "DestCountry": "AU",
+        "DestLocation": "{\\"lat\\":-33.94609833,\\"lon\\":151.177002}",
+        "DestRegion": "SE-BD",
+        "DestWeather": "Rain",
+        "DistanceKilometers": 16492.326,
+        "DistanceMiles": 10247.856,
+        "FlightDelay": "false",
+        "FlightDelayMin": 0,
+        "FlightDelayType": "No Delay",
+        "FlightNum": "9HY9SWR",
+        "FlightTimeHour": "17.179506930998397",
+        "FlightTimeMin": 1030.7704,
+        "Origin": "Frankfurt am Main Airport",
+        "OriginAirportID": "FRA",
+        "OriginCityName": "Frankfurt am Main",
+        "OriginCountry": "DE",
+        "OriginLocation": "{\\"lat\\":50.033333,\\"lon\\":8.570556}",
+        "OriginRegion": "DE-HE",
+        "OriginWeather": "Sunny",
+        "dayOfWeek": 0,
+        "timestamp": "2021-05-24 00:00:00",
+      },
+      Object {
+        "AvgTicketPrice": 882.98267,
+        "Cancelled": "false",
+        "Carrier": "Logstash Airways",
+        "Dest": "Venice Marco Polo Airport",
+        "DestAirportID": "VE05",
+        "DestCityName": "Venice",
+        "DestCountry": "IT",
+        "DestLocation": "{\\"lat\\":45.505299,\\"lon\\":12.3519}",
+        "DestRegion": "IT-34",
+        "DestWeather": "Sunny",
+        "DistanceKilometers": 8823.4,
+        "DistanceMiles": 5482.6064,
+        "FlightDelay": "false",
+        "FlightDelayMin": 0,
+        "FlightDelayType": "No Delay",
+        "FlightNum": "X98CCZO",
+        "FlightTimeHour": "7.73982468459836",
+        "FlightTimeMin": 464.3895,
+        "Origin": "Cape Town International Airport",
+        "OriginAirportID": "CPT",
+        "OriginCityName": "Cape Town",
+        "OriginCountry": "ZA",
+        "OriginLocation": "{\\"lat\\":-33.96480179,\\"lon\\":18.60169983}",
+        "OriginRegion": "SE-BD",
+        "OriginWeather": "Clear",
+        "dayOfWeek": 0,
+        "timestamp": "2021-05-24 18:27:00",
+      },
+    ]
+  }
+  rowsAll={Array []}
+>
+  <div
+    className="dscTable dscTableFixedScroll"
+  >
+    <table
+      className="osd-table table"
+      data-test-subj="docTable"
+    >
+      <thead>
+        <tr
+          className="osdDocTableHeader"
+        >
+          <th
+            key="datagrid-header-8"
+          />
+          <th
+            key="datagrid-header-2"
+          >
+            double_per_ip_bytes
+          </th>
+          <th
+            key="datagrid-header-3"
+          >
+            host
+          </th>
+          <th
+            key="datagrid-header-4"
+          >
+            ip_count
+          </th>
+          <th
+            key="datagrid-header-5"
+          >
+            per_ip_bytes
+          </th>
+          <th
+            key="datagrid-header-6"
+          >
+            resp_code
+          </th>
+          <th
+            key="datagrid-header-7"
+          >
+            sum_bytes
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <ForwardRef
+          doc={
+            Object {
+              "AvgTicketPrice": 841.2656,
+              "Cancelled": "false",
+              "Carrier": "OpenSearch Dashboards Airlines",
+              "Dest": "Sydney Kingsford Smith International Airport",
+              "DestAirportID": "SYD",
+              "DestCityName": "Sydney",
+              "DestCountry": "AU",
+              "DestLocation": "{\\"lat\\":-33.94609833,\\"lon\\":151.177002}",
+              "DestRegion": "SE-BD",
+              "DestWeather": "Rain",
+              "DistanceKilometers": 16492.326,
+              "DistanceMiles": 10247.856,
+              "FlightDelay": "false",
+              "FlightDelayMin": 0,
+              "FlightDelayType": "No Delay",
+              "FlightNum": "9HY9SWR",
+              "FlightTimeHour": "17.179506930998397",
+              "FlightTimeMin": 1030.7704,
+              "Origin": "Frankfurt am Main Airport",
+              "OriginAirportID": "FRA",
+              "OriginCityName": "Frankfurt am Main",
+              "OriginCountry": "DE",
+              "OriginLocation": "{\\"lat\\":50.033333,\\"lon\\":8.570556}",
+              "OriginRegion": "DE-HE",
+              "OriginWeather": "Sunny",
+              "dayOfWeek": 0,
+              "timestamp": "2021-05-24 00:00:00",
+            }
+          }
+          docId="doc_view12"
+          explorerFields={
+            Object {
+              "availableFields": Array [
+                Object {
+                  "name": "agent",
+                  "type": "string",
+                },
+                Object {
+                  "name": "bytes",
+                  "type": "long",
+                },
+                Object {
+                  "name": "clientip",
+                  "type": "ip",
+                },
+                Object {
+                  "name": "event",
+                  "type": "struct",
+                },
+                Object {
+                  "name": "extension",
+                  "type": "string",
+                },
+                Object {
+                  "name": "geo",
+                  "type": "struct",
+                },
+                Object {
+                  "name": "host",
+                  "type": "string",
+                },
+                Object {
+                  "name": "index",
+                  "type": "string",
+                },
+                Object {
+                  "name": "ip",
+                  "type": "ip",
+                },
+                Object {
+                  "name": "machine",
+                  "type": "struct",
+                },
+                Object {
+                  "name": "memory",
+                  "type": "double",
+                },
+                Object {
+                  "name": "message",
+                  "type": "string",
+                },
+                Object {
+                  "name": "phpmemory",
+                  "type": "long",
+                },
+                Object {
+                  "name": "referer",
+                  "type": "string",
+                },
+                Object {
+                  "name": "request",
+                  "type": "string",
+                },
+                Object {
+                  "name": "response",
+                  "type": "string",
+                },
+                Object {
+                  "name": "tags",
+                  "type": "string",
+                },
+                Object {
+                  "name": "timestamp",
+                  "type": "timestamp",
+                },
+                Object {
+                  "name": "url",
+                  "type": "string",
+                },
+                Object {
+                  "name": "utc_time",
+                  "type": "timestamp",
+                },
+              ],
+              "queriedFields": Array [
+                Object {
+                  "name": "double_per_ip_bytes",
+                  "type": "long",
+                },
+                Object {
+                  "name": "host",
+                  "type": "text",
+                },
+                Object {
+                  "name": "ip_count",
+                  "type": "integer",
+                },
+                Object {
+                  "name": "per_ip_bytes",
+                  "type": "long",
+                },
+                Object {
+                  "name": "resp_code",
+                  "type": "text",
+                },
+                Object {
+                  "name": "sum_bytes",
+                  "type": "long",
+                },
+              ],
+              "selectedFields": Array [],
+              "unselectedFields": Array [],
+            }
+          }
+          key="doc_view12"
+          onFlyoutOpen={[Function]}
+          selectedCols={
+            Array [
+              Object {
+                "name": "double_per_ip_bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "host",
+                "type": "text",
+              },
+              Object {
+                "name": "ip_count",
+                "type": "integer",
+              },
+              Object {
+                "name": "per_ip_bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "resp_code",
+                "type": "text",
+              },
+              Object {
+                "name": "sum_bytes",
+                "type": "long",
+              },
+            ]
+          }
+        >
+          <tr
+            className="osdDocTable__row"
+          >
+            <td
+              className="osdDocTableCell__toggleDetails"
+              key="grid-td-14"
+            >
+              <EuiButtonIcon
+                className="euiButtonIcon euiButtonIcon--text"
+                iconType="arrowRight"
+                onClick={[Function]}
+              >
+                <button
+                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <EuiIcon
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowRight"
+                  >
+                    <EuiIconEmpty
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </EuiIconEmpty>
+                  </EuiIcon>
+                </button>
+              </EuiButtonIcon>
+            </td>
+          </tr>
+        </ForwardRef>
+        <ForwardRef
+          doc={
+            Object {
+              "AvgTicketPrice": 882.98267,
+              "Cancelled": "false",
+              "Carrier": "Logstash Airways",
+              "Dest": "Venice Marco Polo Airport",
+              "DestAirportID": "VE05",
+              "DestCityName": "Venice",
+              "DestCountry": "IT",
+              "DestLocation": "{\\"lat\\":45.505299,\\"lon\\":12.3519}",
+              "DestRegion": "IT-34",
+              "DestWeather": "Sunny",
+              "DistanceKilometers": 8823.4,
+              "DistanceMiles": 5482.6064,
+              "FlightDelay": "false",
+              "FlightDelayMin": 0,
+              "FlightDelayType": "No Delay",
+              "FlightNum": "X98CCZO",
+              "FlightTimeHour": "7.73982468459836",
+              "FlightTimeMin": 464.3895,
+              "Origin": "Cape Town International Airport",
+              "OriginAirportID": "CPT",
+              "OriginCityName": "Cape Town",
+              "OriginCountry": "ZA",
+              "OriginLocation": "{\\"lat\\":-33.96480179,\\"lon\\":18.60169983}",
+              "OriginRegion": "SE-BD",
+              "OriginWeather": "Clear",
+              "dayOfWeek": 0,
+              "timestamp": "2021-05-24 18:27:00",
+            }
+          }
+          docId="doc_view13"
+          explorerFields={
+            Object {
+              "availableFields": Array [
+                Object {
+                  "name": "agent",
+                  "type": "string",
+                },
+                Object {
+                  "name": "bytes",
+                  "type": "long",
+                },
+                Object {
+                  "name": "clientip",
+                  "type": "ip",
+                },
+                Object {
+                  "name": "event",
+                  "type": "struct",
+                },
+                Object {
+                  "name": "extension",
+                  "type": "string",
+                },
+                Object {
+                  "name": "geo",
+                  "type": "struct",
+                },
+                Object {
+                  "name": "host",
+                  "type": "string",
+                },
+                Object {
+                  "name": "index",
+                  "type": "string",
+                },
+                Object {
+                  "name": "ip",
+                  "type": "ip",
+                },
+                Object {
+                  "name": "machine",
+                  "type": "struct",
+                },
+                Object {
+                  "name": "memory",
+                  "type": "double",
+                },
+                Object {
+                  "name": "message",
+                  "type": "string",
+                },
+                Object {
+                  "name": "phpmemory",
+                  "type": "long",
+                },
+                Object {
+                  "name": "referer",
+                  "type": "string",
+                },
+                Object {
+                  "name": "request",
+                  "type": "string",
+                },
+                Object {
+                  "name": "response",
+                  "type": "string",
+                },
+                Object {
+                  "name": "tags",
+                  "type": "string",
+                },
+                Object {
+                  "name": "timestamp",
+                  "type": "timestamp",
+                },
+                Object {
+                  "name": "url",
+                  "type": "string",
+                },
+                Object {
+                  "name": "utc_time",
+                  "type": "timestamp",
+                },
+              ],
+              "queriedFields": Array [
+                Object {
+                  "name": "double_per_ip_bytes",
+                  "type": "long",
+                },
+                Object {
+                  "name": "host",
+                  "type": "text",
+                },
+                Object {
+                  "name": "ip_count",
+                  "type": "integer",
+                },
+                Object {
+                  "name": "per_ip_bytes",
+                  "type": "long",
+                },
+                Object {
+                  "name": "resp_code",
+                  "type": "text",
+                },
+                Object {
+                  "name": "sum_bytes",
+                  "type": "long",
+                },
+              ],
+              "selectedFields": Array [],
+              "unselectedFields": Array [],
+            }
+          }
+          key="doc_view13"
+          onFlyoutOpen={[Function]}
+          selectedCols={
+            Array [
+              Object {
+                "name": "double_per_ip_bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "host",
+                "type": "text",
+              },
+              Object {
+                "name": "ip_count",
+                "type": "integer",
+              },
+              Object {
+                "name": "per_ip_bytes",
+                "type": "long",
+              },
+              Object {
+                "name": "resp_code",
+                "type": "text",
+              },
+              Object {
+                "name": "sum_bytes",
+                "type": "long",
+              },
+            ]
+          }
+        >
+          <tr
+            className="osdDocTable__row"
+          >
+            <td
+              className="osdDocTableCell__toggleDetails"
+              key="grid-td-17"
+            >
+              <EuiButtonIcon
+                className="euiButtonIcon euiButtonIcon--text"
+                iconType="arrowRight"
+                onClick={[Function]}
+              >
+                <button
+                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <EuiIcon
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowRight"
+                  >
+                    <EuiIconEmpty
+                      aria-hidden={true}
+                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                      focusable="false"
+                      role="img"
+                      style={null}
+                    >
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </EuiIconEmpty>
+                  </EuiIcon>
+                </button>
+              </EuiButtonIcon>
+            </td>
+          </tr>
+        </ForwardRef>
+      </tbody>
+    </table>
+  </div>
+  <div />
+</DataGrid>
+`;
diff --git a/public/components/event_analytics/explorer/__tests__/data_grid.test.tsx b/public/components/event_analytics/explorer/__tests__/data_grid.test.tsx
new file mode 100644
index 0000000000..f659f32435
--- /dev/null
+++ b/public/components/event_analytics/explorer/__tests__/data_grid.test.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { DataGrid } from '../events_views/data_grid';
+import { 
+  SELECTED_FIELDS, 
+  AVAILABLE_FIELDS,
+  UNSELECTED_FIELDS,
+  QUERIED_FIELDS
+} from '../../../../../common/constants/explorer';
+import { 
+  AVAILABLE_FIELDS as SIDEBAR_AVAILABLE_FIELDS,
+  QUERY_FIELDS,
+  DATA_GRID_ROWS
+} from '../../../../../test/event_analytics_constants';
+
+describe('Datagrid component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders data grid component', async () => {
+    const explorerFields = {
+      [SELECTED_FIELDS]: [],
+      [UNSELECTED_FIELDS]: [],
+      [AVAILABLE_FIELDS]: SIDEBAR_AVAILABLE_FIELDS,
+      [QUERIED_FIELDS]: QUERY_FIELDS
+    };
+    
+    const wrapper = mount(
+      <DataGrid
+        rows={DATA_GRID_ROWS}
+        rowsAll={[]}
+        explorerFields={explorerFields}
+      />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer.test.tsx.snap b/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer.test.tsx.snap
new file mode 100644
index 0000000000..f53e8c5d34
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer.test.tsx.snap
@@ -0,0 +1,421 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Datagrid Doc viewer component Renders Doc viewer component 1`] = `
+<DocViewer
+  hit={
+    Object {
+      "Carrier": "JetBeats",
+      "avg(FlightDelayMin)": "45.957544288332315",
+    }
+  }
+>
+  <div
+    className="osdDocViewer"
+  >
+    <EuiTabbedContent
+      autoFocus="initial"
+      onTabClick={[Function]}
+      selectedTab={
+        Object {
+          "content": <EuiPanel
+            paddingSize="s"
+          >
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <component
+                  hit={
+                    Object {
+                      "Carrier": "JetBeats",
+                      "avg(FlightDelayMin)": "45.957544288332315",
+                    }
+                  }
+                  logTraceId=""
+                />
+                 
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>,
+          "id": "doc_viewer_tab_2",
+          "name": "Table",
+        }
+      }
+      tabs={
+        Array [
+          Object {
+            "content": <EuiPanel
+              paddingSize="s"
+            >
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <component
+                    hit={
+                      Object {
+                        "Carrier": "JetBeats",
+                        "avg(FlightDelayMin)": "45.957544288332315",
+                      }
+                    }
+                    logTraceId=""
+                  />
+                   
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>,
+            "id": "doc_viewer_tab_2",
+            "name": "Table",
+          },
+          Object {
+            "content": <EuiPanel
+              paddingSize="s"
+            >
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <component
+                    hit={
+                      Object {
+                        "Carrier": "JetBeats",
+                        "avg(FlightDelayMin)": "45.957544288332315",
+                      }
+                    }
+                    logTraceId=""
+                  />
+                   
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>,
+            "id": "doc_viewer_tab_3",
+            "name": "JSON",
+          },
+          Object {
+            "content": <EuiPanel
+              paddingSize="s"
+            >
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <component
+                    hit={
+                      Object {
+                        "Carrier": "JetBeats",
+                        "avg(FlightDelayMin)": "45.957544288332315",
+                      }
+                    }
+                    logTraceId=""
+                  />
+                   
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPanel>,
+            "id": "doc_viewer_tab_4",
+            "name": <React.Fragment>
+              <span>
+                Traces
+              </span>
+              <React.Fragment />
+            </React.Fragment>,
+          },
+        ]
+      }
+    >
+      <div>
+        <EuiTabs
+          onFocus={[Function]}
+        >
+          <div
+            className="euiTabs"
+            onFocus={[Function]}
+            role="tablist"
+          >
+            <EuiTab
+              aria-controls="random_html_id"
+              id="doc_viewer_tab_2"
+              isSelected={true}
+              key="doc_viewer_tab_2"
+              onClick={[Function]}
+            >
+              <button
+                aria-controls="random_html_id"
+                aria-selected={true}
+                className="euiTab euiTab-isSelected"
+                disabled={false}
+                id="doc_viewer_tab_2"
+                onClick={[Function]}
+                role="tab"
+                type="button"
+              >
+                <span
+                  className="euiTab__content"
+                >
+                  Table
+                </span>
+              </button>
+            </EuiTab>
+            <EuiTab
+              aria-controls="random_html_id"
+              id="doc_viewer_tab_3"
+              isSelected={false}
+              key="doc_viewer_tab_3"
+              onClick={[Function]}
+            >
+              <button
+                aria-controls="random_html_id"
+                aria-selected={false}
+                className="euiTab"
+                disabled={false}
+                id="doc_viewer_tab_3"
+                onClick={[Function]}
+                role="tab"
+                type="button"
+              >
+                <span
+                  className="euiTab__content"
+                >
+                  JSON
+                </span>
+              </button>
+            </EuiTab>
+            <EuiTab
+              aria-controls="random_html_id"
+              id="doc_viewer_tab_4"
+              isSelected={false}
+              key="doc_viewer_tab_4"
+              onClick={[Function]}
+            >
+              <button
+                aria-controls="random_html_id"
+                aria-selected={false}
+                className="euiTab"
+                disabled={false}
+                id="doc_viewer_tab_4"
+                onClick={[Function]}
+                role="tab"
+                type="button"
+              >
+                <span
+                  className="euiTab__content"
+                >
+                  <span>
+                    Traces
+                  </span>
+                </span>
+              </button>
+            </EuiTab>
+          </div>
+        </EuiTabs>
+        <div
+          aria-labelledby="doc_viewer_tab_2"
+          id="random_html_id"
+          role="tabpanel"
+        >
+          <EuiPanel
+            paddingSize="s"
+          >
+            <div
+              className="euiPanel euiPanel--paddingSmall euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+            >
+              <EuiFlexGroup>
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    >
+                      <component
+                        hit={
+                          Object {
+                            "Carrier": "JetBeats",
+                            "avg(FlightDelayMin)": "45.957544288332315",
+                          }
+                        }
+                        logTraceId=""
+                      >
+                        <DocViewTable
+                          filter={[Function]}
+                          hit={
+                            Object {
+                              "Carrier": "JetBeats",
+                              "avg(FlightDelayMin)": "45.957544288332315",
+                            }
+                          }
+                          logTraceId=""
+                          onAddColumn={[Function]}
+                          onRemoveColumn={[Function]}
+                        >
+                          <table
+                            className="table table-condensed osdDocViewerTable"
+                          >
+                            <tbody>
+                              <DocViewTableRow
+                                displayNoMappingWarning={false}
+                                displayUnderscoreWarning={false}
+                                field="avg(FlightDelayMin)"
+                                fieldType="string"
+                                isCollapsed={false}
+                                isCollapsible={false}
+                                isColumnActive={false}
+                                key="avg(FlightDelayMin)"
+                                onFilter={[Function]}
+                                onToggleCollapse={[Function]}
+                                value="45.957544288332315"
+                                valueRaw="45.957544288332315"
+                              >
+                                <tr
+                                  data-test-subj="tableDocViewRow-avg(FlightDelayMin)"
+                                  key="avg(FlightDelayMin)"
+                                >
+                                  <td
+                                    className="osdDocViewer__field"
+                                  >
+                                    <FieldName
+                                      fieldName="avg(FlightDelayMin)"
+                                      fieldType="string"
+                                      scripted={false}
+                                    >
+                                      <EuiFlexGroup
+                                        alignItems="center"
+                                        gutterSize="s"
+                                        responsive={false}
+                                      >
+                                        <div
+                                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                        >
+                                          <EuiFlexItem
+                                            className="eui-textTruncate"
+                                          >
+                                            <div
+                                              className="euiFlexItem eui-textTruncate"
+                                            >
+                                              <EuiToolTip
+                                                anchorClassName="eui-textTruncate"
+                                                content="avg(FlightDelayMin)"
+                                                delay="long"
+                                                position="top"
+                                              >
+                                                <span
+                                                  className="euiToolTipAnchor eui-textTruncate"
+                                                  onKeyUp={[Function]}
+                                                  onMouseOut={[Function]}
+                                                  onMouseOver={[Function]}
+                                                >
+                                                  <span
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                  >
+                                                    avg(FlightDelayMin)
+                                                  </span>
+                                                </span>
+                                              </EuiToolTip>
+                                            </div>
+                                          </EuiFlexItem>
+                                        </div>
+                                      </EuiFlexGroup>
+                                    </FieldName>
+                                  </td>
+                                  <td>
+                                    <div
+                                      className="osdDocViewer__value"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "45.957544288332315",
+                                        }
+                                      }
+                                      data-test-subj="tableDocViewRow-avg(FlightDelayMin)-value"
+                                    />
+                                  </td>
+                                </tr>
+                              </DocViewTableRow>
+                              <DocViewTableRow
+                                displayNoMappingWarning={false}
+                                displayUnderscoreWarning={false}
+                                field="Carrier"
+                                fieldType="string"
+                                isCollapsed={false}
+                                isCollapsible={false}
+                                isColumnActive={false}
+                                key="Carrier"
+                                onFilter={[Function]}
+                                onToggleCollapse={[Function]}
+                                value="JetBeats"
+                                valueRaw="JetBeats"
+                              >
+                                <tr
+                                  data-test-subj="tableDocViewRow-Carrier"
+                                  key="Carrier"
+                                >
+                                  <td
+                                    className="osdDocViewer__field"
+                                  >
+                                    <FieldName
+                                      fieldName="Carrier"
+                                      fieldType="string"
+                                      scripted={false}
+                                    >
+                                      <EuiFlexGroup
+                                        alignItems="center"
+                                        gutterSize="s"
+                                        responsive={false}
+                                      >
+                                        <div
+                                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                        >
+                                          <EuiFlexItem
+                                            className="eui-textTruncate"
+                                          >
+                                            <div
+                                              className="euiFlexItem eui-textTruncate"
+                                            >
+                                              <EuiToolTip
+                                                anchorClassName="eui-textTruncate"
+                                                content="Carrier"
+                                                delay="long"
+                                                position="top"
+                                              >
+                                                <span
+                                                  className="euiToolTipAnchor eui-textTruncate"
+                                                  onKeyUp={[Function]}
+                                                  onMouseOut={[Function]}
+                                                  onMouseOver={[Function]}
+                                                >
+                                                  <span
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                  >
+                                                    Carrier
+                                                  </span>
+                                                </span>
+                                              </EuiToolTip>
+                                            </div>
+                                          </EuiFlexItem>
+                                        </div>
+                                      </EuiFlexGroup>
+                                    </FieldName>
+                                  </td>
+                                  <td>
+                                    <div
+                                      className="osdDocViewer__value"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "JetBeats",
+                                        }
+                                      }
+                                      data-test-subj="tableDocViewRow-Carrier-value"
+                                    />
+                                  </td>
+                                </tr>
+                              </DocViewTableRow>
+                            </tbody>
+                          </table>
+                        </DocViewTable>
+                      </component>
+                       
+                    </div>
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </div>
+          </EuiPanel>
+        </div>
+      </div>
+    </EuiTabbedContent>
+  </div>
+</DocViewer>
+`;
diff --git a/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer_row.test.tsx.snap b/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer_row.test.tsx.snap
new file mode 100644
index 0000000000..87754ba9e6
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/doc_viewer_row.test.tsx.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Datagrid Doc viewer row component Renders Doc viewer row component 1`] = `
+<ForwardRef
+  doc={
+    Object {
+      "Carrier": "JetBeats",
+      "avg(FlightDelayMin)": "45.957544288332315",
+    }
+  }
+  selectedCols={
+    Array [
+      Object {
+        "name": "avg(FlightDelayMin)",
+        "type": "double",
+      },
+    ]
+  }
+>
+  <tr
+    className="osdDocTable__row"
+  >
+    <td
+      className="osdDocTableCell__toggleDetails"
+      key="grid-td-3"
+    >
+      <EuiButtonIcon
+        className="euiButtonIcon euiButtonIcon--text"
+        iconType="arrowRight"
+        onClick={[Function]}
+      >
+        <button
+          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
+          disabled={false}
+          onClick={[Function]}
+          type="button"
+        >
+          <EuiIcon
+            aria-hidden="true"
+            className="euiButtonIcon__icon"
+            color="inherit"
+            size="m"
+            type="arrowRight"
+          >
+            <EuiIconEmpty
+              aria-hidden={true}
+              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+              focusable="false"
+              role="img"
+              style={null}
+            >
+              <svg
+                aria-hidden={true}
+                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                focusable="false"
+                height={16}
+                role="img"
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </EuiIconEmpty>
+          </EuiIcon>
+        </button>
+      </EuiButtonIcon>
+    </td>
+    <td
+      className="osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord"
+      key="datagrid-cell-2"
+    >
+      45.957544288332315
+    </td>
+  </tr>
+</ForwardRef>
+`;
diff --git a/public/components/event_analytics/explorer/events_views/__tests__/doc_viewer.test.tsx b/public/components/event_analytics/explorer/events_views/__tests__/doc_viewer.test.tsx
new file mode 100644
index 0000000000..3a807d7c9a
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/__tests__/doc_viewer.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { DocViewer } from '../docViewer';
+
+describe('Datagrid Doc viewer component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders Doc viewer component', async () => {
+    
+    const hit = {
+      'Carrier': 'JetBeats',
+      'avg(FlightDelayMin)': '45.957544288332315'
+    };
+
+    const wrapper = mount(
+      <DocViewer 
+        hit={hit}
+      />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/events_views/__tests__/doc_viewer_row.test.tsx b/public/components/event_analytics/explorer/events_views/__tests__/doc_viewer_row.test.tsx
new file mode 100644
index 0000000000..684ede48c7
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/__tests__/doc_viewer_row.test.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { DocViewRow } from '../docViewRow';
+
+describe('Datagrid Doc viewer row component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders Doc viewer row component', async () => {
+    
+    const hit = {
+      'Carrier': 'JetBeats',
+      'avg(FlightDelayMin)': '45.957544288332315'
+    };
+    const selectedCols = [{
+      name: 'avg(FlightDelayMin)',
+      type: 'double'
+    }];
+
+    const wrapper = mount(
+      <DocViewRow
+        doc={hit}
+        selectedCols={selectedCols}
+      />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/events_views/data_grid.scss b/public/components/event_analytics/explorer/events_views/data_grid.scss
new file mode 100644
index 0000000000..6de07488a4
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/data_grid.scss
@@ -0,0 +1,490 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * 1. Stack content vertically so the table can scroll when its constrained by a fixed container height.
+ */
+ doc-table {
+  @include euiScrollBar;
+  overflow: auto;
+  flex: 1 1 100%;
+  flex-direction: column; /* 1 */
+
+  .spinner {
+    position: absolute;
+    top: 40%;
+    left: 0;
+    right: 0;
+    z-index: $euiZLevel1;
+    opacity: 0.5;
+  }
+}
+
+.osdDocTable__container.loading {
+  opacity: 0.5;
+}
+
+.osdDocTable {
+  font-size: $euiFontSizeXS;
+
+  th {
+    white-space: nowrap;
+    padding-right: $euiSizeS;
+
+    .fa {
+      font-size: 1.1em;
+    }
+  }
+}
+
+.osd-table,
+.osdDocTable {
+  /**
+  *  Style OpenSearch document _source in table view <dt>key:<dt><dd>value</dd>
+  *  Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted
+  *  row in the Context Log.
+  */
+
+  dl.source {
+    margin-bottom: 0;
+    line-height: 2em;
+    word-break: break-word;
+
+    dt,
+    dd {
+      display: inline;
+    }
+
+    dt {
+      background-color: transparentize(shade($euiColorPrimary, 20%), 0.9);
+      color: $euiTextColor;
+      padding: ($euiSizeXS / 2) $euiSizeXS;
+      margin-right: $euiSizeXS;
+      word-break: normal;
+      border-radius: $euiBorderRadius;
+    }
+  }
+}
+
+.osdDocTable__row {
+  td {
+    position: relative;
+
+    &:hover {
+      .osdDocTableRowFilterButton {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.osdDocTable__row--highlight {
+  td,
+  .osdDocTableRowFilterButton {
+    background-color: tintOrShade($euiColorPrimary, 90%, 70%);
+  }
+}
+
+.osdDocTable__bar {
+  margin: $euiSizeXS $euiSizeXS 0;
+}
+
+.osdDocTable__bar--footer {
+  position: relative;
+  margin: -($euiSize * 3) $euiSizeXS 0;
+}
+
+.osdDocTable__padBottom {
+  padding-bottom: $euiSizeXL;
+}
+
+.osdDocTable__error {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 0 100%;
+  text-align: center;
+}
+
+.truncate-by-height {
+  overflow: hidden;
+}
+
+.table {
+  // Nesting
+  .table {
+    background-color: $euiColorEmptyShade;
+  }
+}
+
+.osd-table {
+  // sub tables should not have a leading border
+  .table .table {
+    margin-bottom: 0;
+
+    tr:first-child > td {
+      border-top: none;
+    }
+
+    td.field-name {
+      font-weight: $euiFontWeightBold;
+    }
+  }
+
+  th {
+    text-align: left;
+    font-weight: bold;
+  }
+}
+
+table {
+  th {
+    i.fa-sort {
+      color: $euiColorLightShade;
+    }
+
+    button.fa-sort-asc,
+    button.fa-sort-down,
+    i.fa-sort-asc,
+    i.fa-sort-down {
+      color: $euiColorPrimary;
+    }
+
+    button.fa-sort-desc,
+    button.fa-sort-up,
+    i.fa-sort-desc,
+    i.fa-sort-up {
+      color: $euiColorPrimary;
+    }
+  }
+}
+
+/* ------------- table cell ---------- */
+.osdDocTableCell__dataField {
+  white-space: pre-wrap;
+}
+
+.osdDocTableCell__toggleDetails {
+  padding: 4px 0 0 0!important;
+}
+
+.osdDocTableCell__filter {
+  position: absolute;
+  white-space: nowrap;
+  right: 0;
+}
+
+/**
+ * 1. Align icon with text in cell.
+ * 2. Use opacity to make this element accessible to screen readers and keyboard.
+ * 3. Show on focus to enable keyboard accessibility.
+ */
+
+.osdDocTableRowFilterButton {
+  appearance: none;
+  background-color: $euiColorEmptyShade;
+  border: none;
+  padding: 0 $euiSizeXS;
+  font-size: $euiFontSizeS;
+  line-height: 1; /* 1 */
+  display: inline-block;
+  opacity: 0; /* 2 */
+
+  &:focus {
+    opacity: 1; /* 3 */
+  }
+}
+
+/* ------------- End of table cell ---------- */
+
+/* ------------- Discover like style -------- */
+.dscAppWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.dscAppContainer {
+  > * {
+    position: relative;
+  }
+}
+discover-app {
+  flex-grow: 1;
+}
+
+.dscHistogram {
+  display: flex;
+  height: 200px;
+  padding: $euiSizeS;
+}
+
+// SASSTODO: replace the z-index value with a variable
+.dscWrapper {
+  padding-left: $euiSizeXL;
+  padding-right: $euiSizeS;
+  margin-top: $euiSizeM;
+  z-index: 1;
+  @include euiBreakpoint('xs', 's', 'm') {
+    padding-left: $euiSizeS;
+  }
+}
+
+@include euiPanel('.dscWrapper__content');
+
+.dscWrapper__content {
+  padding-top: $euiSizeXS;
+  background-color: $euiColorEmptyShade;
+
+  .osd-table {
+    margin-bottom: 0;
+  }
+}
+
+.dscTimechart {
+  display: block;
+  position: relative;
+
+  // SASSTODO: the visualizing component should have an option or a modifier
+  .series > rect {
+    fill-opacity: 0.5;
+    stroke-width: 1;
+  }
+}
+
+.dscResultCount {
+  padding-top: $euiSizeXS;
+}
+
+.dscTimechart__header {
+  display: flex;
+  justify-content: center;
+  min-height: $euiSizeXXL;
+  padding: $euiSizeXS 0;
+}
+
+.dscOverlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 20;
+  padding-top: $euiSizeM;
+
+  opacity: 0.75;
+  text-align: center;
+  background-color: transparent;
+}
+
+.dscTable {
+  overflow: auto;
+
+  // SASSTODO: add a monospace modifier to the doc-table component
+  .osdDocTable__row {
+    font-family: $euiCodeFontFamily;
+    font-size: $euiFontSizeXS;
+  }
+}
+
+// SASSTODO: replace the padding value with a variable
+.dscTable__footer {
+  background-color: $euiColorLightShade;
+  padding: 5px 10px;
+  text-align: center;
+}
+
+.dscResults {
+  h3 {
+    margin: -20px 0 10px 0;
+    text-align: center;
+  }
+}
+
+.dscResults__interval {
+  display: inline-block;
+  width: auto;
+}
+
+.dscSkipButton {
+  position: absolute;
+  right: $euiSizeM;
+  top: $euiSizeXS;
+}
+
+.dscTableFixedScroll {
+  overflow-x: auto;
+  padding-bottom: 0;
+
+  + .dscTableFixedScroll__scroller {
+    position: fixed;
+    bottom: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+}
+
+.dscCollapsibleSidebar {
+  position: relative;
+  z-index: 1;
+
+  .dscCollapsibleSidebar__collapseButton {
+    position: absolute;
+    top: 0;
+    right: -$euiSizeXL + 4;
+    cursor: pointer;
+    z-index: -1;
+    min-height: $euiSizeM;
+    min-width: $euiSizeM;
+    padding: $euiSizeXS * .5;
+  }
+
+  &.closed {
+    width: 0 !important;
+    border-right-width: 0;
+    border-left-width: 0;
+    .dscCollapsibleSidebar__collapseButton {
+      right: -$euiSizeL + 4;
+    }
+  }
+}
+
+@include euiBreakpoint('xs', 's', 'm') {
+  .dscCollapsibleSidebar {
+    &.closed {
+      display: none;
+    }
+
+    .dscCollapsibleSidebar__collapseButton {
+      display: none;
+    }
+  }
+}
+
+/* ------------- Detail table cell -------- */
+/**
+ * 1. Visually align the actions with the tabs. We can improve this by using flexbox instead, at a later point.
+ */
+ .osdDocTableDetails__actions {
+  float: right;
+  padding-top: $euiSizeS; /* 1 */
+}
+
+// Overwrite the border on the bootstrap table
+.osdDocTableDetails__row {
+
+  > td {
+    // Offsets negative margins from an inner flex group
+    padding: $euiSizeL !important;
+
+    tr:hover td {
+      background: tintOrShade($euiColorLightestShade, 50%, 20%);
+    }
+  }
+
+  td {
+    border-top: none !important;
+  }
+}
+
+/* ------------- open -------- */
+.osdDocTableOpen__button {
+  appearance: none;
+  background-color: transparent;
+  padding: 0;
+  border: none;
+  width: 14px; /* 1 */
+  height: 14px;
+}
+
+/* ------------- table header -------- */
+.osdDocTableHeader {
+  white-space: nowrap;
+}
+.osdDocTableHeader button {
+  margin-left: $euiSizeXS;
+}
+.osdDocTableHeader__move,
+.osdDocTableHeader__sortChange {
+  opacity: 0;
+  th:hover &,
+  &:focus {
+    opacity: 1;
+  }
+}
+
+/* ------------- doc_viewer -------- */
+.osdDocViewerTable {
+  margin-top: $euiSizeS;
+}
+
+.osdDocViewer {
+  pre,
+  .osdDocViewer__value {
+    display: inline-block;
+    word-break: break-all;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    color: $euiColorFullShade;
+    vertical-align: top;
+    padding-top: 2px;
+  }
+  .osdDocViewer__field {
+    padding-top: 8px;
+  }
+
+  .dscFieldName {
+    color: $euiColorDarkShade;
+  }
+
+  td,
+  pre {
+    font-family: $euiCodeFontFamily;
+  }
+
+  tr:first-child td {
+    border-top-color: transparent;
+  }
+
+  tr:hover {
+    .osdDocViewer__actionButton {
+      opacity: 1;
+    }
+  }
+}
+
+.osdDocViewer__buttons,
+.osdDocViewer__field {
+  white-space: nowrap;
+}
+.osdDocViewer__buttons {
+  width: 60px;
+
+  // Show all icons if one is focused,
+  // IE doesn't support, but the fallback is just the focused button becomes visible
+  &:focus-within {
+    .osdDocViewer__actionButton {
+      opacity: 1;
+    }
+  }
+}
+
+.osdDocViewer__field {
+  width: 160px;
+}
+
+.osdDocViewer__actionButton {
+  opacity: 0;
+
+  &:focus {
+    opacity: 1;
+  }
+}
+
+.osdDocViewer__warning {
+  margin-right: $euiSizeS;
+}
+
diff --git a/public/components/event_analytics/explorer/events_views/data_grid.tsx b/public/components/event_analytics/explorer/events_views/data_grid.tsx
new file mode 100644
index 0000000000..d0385a9a00
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/data_grid.tsx
@@ -0,0 +1,152 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './data_grid.scss';
+
+import React, { useMemo, useState, useEffect, useRef, RefObject } from 'react';
+import { IExplorerFields } from '../../../../../common/types/explorer';
+import { DEFAULT_COLUMNS, PAGE_SIZE } from '../../../../../common/constants/explorer';
+import { getHeaders, getTrs, populateDataGrid } from '../../utils';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import PPLService from '../../../../services/requests/ppl';
+
+interface DataGridProps {
+  http: HttpSetup;
+  pplService: PPLService;
+  rows: Array<any>;
+  rowsAll: Array<any>;
+  explorerFields: IExplorerFields;
+  timeStampField: string;
+  rawQuery: string;
+}
+
+export function DataGrid(props: DataGridProps) {
+  const { http, pplService, rows, rowsAll, explorerFields, timeStampField, rawQuery } = props;
+  const [limit, setLimit] = useState(PAGE_SIZE);
+  const loader = useRef<HTMLDivElement>(null);
+  const [rowRefs, setRowRefs] = useState<RefObject<{closeAllFlyouts(openDocId: string): void}>[]>([]);
+
+  useEffect(() => {
+    if (!loader.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) setLimit((limit) => limit + PAGE_SIZE);
+      },
+      {
+        root: null,
+        rootMargin: '500px',
+        threshold: 0,
+      }
+    );
+    observer.observe(loader.current);
+
+    return () => observer.disconnect();
+  }, [loader]);
+
+  const onFlyoutOpen = (docId: string) => {
+    rowRefs.forEach((rowRef) => {
+      rowRef.current?.closeAllFlyouts(docId);
+    });
+  };
+
+  const Queriedheaders = useMemo(() => getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS), [
+    explorerFields.queriedFields,
+  ]);
+  const [QueriedtableRows, setQueriedtableRows] = useState<any[]>([]);
+  useEffect(() => {
+    setQueriedtableRows(
+      getTrs(
+        http,
+        explorerFields.queriedFields,
+        limit,
+        setLimit,
+        PAGE_SIZE,
+        timeStampField,
+        explorerFields,
+        pplService,
+        rawQuery,
+        rowRefs,
+        setRowRefs,
+        onFlyoutOpen,
+        rows
+      )
+    );
+  }, [rows, explorerFields.queriedFields]);
+
+  const headers = useMemo(() => getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS), [
+    explorerFields.selectedFields,
+  ]);
+  const [tableRows, setTableRows] = useState<any[]>([]);
+  useEffect(() => {
+    const dataToRender =
+      explorerFields?.queriedFields && explorerFields.queriedFields.length > 0 ? rowsAll : rows;
+    setTableRows(
+      getTrs(
+        http,
+        explorerFields.selectedFields,
+        limit,
+        setLimit,
+        PAGE_SIZE,
+        timeStampField,
+        explorerFields,
+        pplService,
+        rawQuery,
+        rowRefs,
+        setRowRefs,
+        onFlyoutOpen,
+        dataToRender
+      )
+    );
+  }, [rows, explorerFields.selectedFields]);
+
+  useEffect(() => {
+    setQueriedtableRows((prev) =>
+      getTrs(
+        http,
+        explorerFields.queriedFields,
+        limit,
+        setLimit,
+        PAGE_SIZE,
+        timeStampField,
+        explorerFields,
+        pplService,
+        rawQuery,
+        rowRefs,
+        setRowRefs,
+        onFlyoutOpen,
+        rows,
+        prev
+      )
+    );
+    const dataToRender =
+      explorerFields?.queriedFields && explorerFields.queriedFields.length > 0 ? rowsAll : rows;
+    setTableRows((prev) =>
+      getTrs(
+        http,
+        explorerFields.selectedFields,
+        limit,
+        setLimit,
+        PAGE_SIZE,
+        timeStampField,
+        explorerFields,
+        pplService,
+        rawQuery,
+        rowRefs,
+        setRowRefs,
+        onFlyoutOpen,
+        dataToRender,
+        prev
+      )
+    );
+  }, [limit]);
+
+  return (
+    <>
+      {populateDataGrid(explorerFields, Queriedheaders, QueriedtableRows, headers, tableRows)}
+      <div ref={loader} />
+    </>
+  );
+}
diff --git a/public/components/event_analytics/explorer/events_views/detail_table/doc_detail_table.tsx b/public/components/event_analytics/explorer/events_views/detail_table/doc_detail_table.tsx
new file mode 100644
index 0000000000..35c21917b3
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/detail_table/doc_detail_table.tsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { DocViewTableRow } from './table_row';
+
+export interface FieldMapping {
+  filterable?: boolean;
+  scripted?: boolean;
+  rowCount?: number;
+  type: string;
+  name: string;
+}
+
+export type DocViewFilterFn = (
+  mapping: FieldMapping | string | undefined,
+  value: unknown,
+  mode: '+' | '-'
+) => void;
+
+export interface DocViewRenderProps {
+  columns?: string[];
+  filter?: DocViewFilterFn;
+  hit: any;
+  onAddColumn?: (columnName: string) => void;
+  onRemoveColumn?: (columnName: string) => void;
+}
+
+const fieldType = 'string';
+const displayUnderscoreWarning = false;
+const displayNoMappingWarning = false;
+const isCollapsed = false;
+const isCollapsible = false;
+const isColumnActive = false;
+
+export function DocViewTable({
+  hit,
+  filter,
+  columns,
+  onAddColumn,
+  onRemoveColumn,
+}: DocViewRenderProps) {
+  const [fieldRowOpen, setFieldRowOpen] = useState({} as Record<string, boolean>);
+
+  function toggleValueCollapse(field: string) {
+    fieldRowOpen[field] = fieldRowOpen[field] !== true;
+    setFieldRowOpen({ ...fieldRowOpen });
+  }
+
+  return (
+    <table className="table table-condensed osdDocViewerTable">
+      <tbody>
+        {Object.keys(hit)
+          .sort((preKey, nextKey) => {
+            return preKey.toLowerCase().localeCompare(nextKey.toLowerCase());
+          })
+          .map((field) => {
+            const value = hit[field] === 'null' ? '' : hit[field];
+            const toggleColumn =
+              onRemoveColumn && onAddColumn && Array.isArray(columns)
+                ? () => {
+                    if (columns.includes(field)) {
+                      onRemoveColumn(field);
+                    } else {
+                      onAddColumn(field);
+                    }
+                  }
+                : undefined;
+
+            return (
+              <DocViewTableRow
+                key={field}
+                field={field}
+                fieldType={String(fieldType)}
+                displayUnderscoreWarning={displayUnderscoreWarning}
+                displayNoMappingWarning={displayNoMappingWarning}
+                isCollapsed={isCollapsed}
+                isCollapsible={isCollapsible}
+                isColumnActive={isColumnActive}
+                onFilter={filter}
+                onToggleCollapse={() => toggleValueCollapse(field)}
+                onToggleColumn={toggleColumn}
+                value={value}
+                valueRaw={value}
+              />
+            );
+          })}
+      </tbody>
+    </table>
+  );
+}
diff --git a/public/components/event_analytics/explorer/events_views/detail_table/doc_detail_title.tsx b/public/components/event_analytics/explorer/events_views/detail_table/doc_detail_title.tsx
new file mode 100644
index 0000000000..f3e0bb3bf1
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/detail_table/doc_detail_title.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiIcon } from '@elastic/eui';
+
+export const DocDetailTitle : React.FC<any> = (props) => {
+  return (
+    <div className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--justifyContentSpaceBetween">
+    <div className="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
+      <div className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow">
+        <div className="euiFlexItem euiFlexItem--flexGrowZero">
+          <EuiIcon type="folderOpen" size="m" />
+        </div>
+        <div className="euiFlexItem euiFlexItem--flexGrowZero">
+          <h4
+            data-test-subj="docTableRowDetailsTitle"
+            className="euiTitle euiTitle--xsmall"
+            i18n-id="discover.docTable.tableRow.detailHeading"
+            i18n-default-message="Expanded document"
+          >
+            Expanded document
+          </h4>
+        </div>
+      </div>
+    </div>
+    <div className="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
+      <div className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow">
+        <div className="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
+          <a
+            className="euiLink"
+            data-test-subj="docTableRowAction"
+            i18n-id="discover.docTable.tableRow.viewSurroundingDocumentsLinkText"
+            i18n-default-message="View surrounding documents"
+          >
+            surrounding documents
+          </a>
+        </div>
+        <div className="euiFlexItem euiFlexItem--flexGrowZero euiText euiText--small">
+          <a
+            className="euiLink"
+            data-test-subj="docTableRowAction"
+            i18n-id="discover.docTable.tableRow.viewSingleDocumentLinkText"
+            i18n-default-message="View single document"
+          >
+            single document
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  );
+};
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/events_views/detail_table/table_row.tsx b/public/components/event_analytics/explorer/events_views/detail_table/table_row.tsx
new file mode 100644
index 0000000000..865fa9581b
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/detail_table/table_row.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import { DocViewTableRowBtnCollapse } from './table_row_btn_collapse';
+import { DocViewTableRowIconNoMapping } from './table_row_icon_no_mapping';
+import { DocViewTableRowIconUnderscore } from './table_row_icon_underscore';
+import { FieldName } from '../../../../common/field_name/field_name';
+
+export interface FieldMapping {
+  filterable?: boolean;
+  scripted?: boolean;
+  rowCount?: number;
+  type: string;
+  name: string;
+}
+
+export type DocViewFilterFn = (
+  mapping: FieldMapping | string | undefined,
+  value: unknown,
+  mode: '+' | '-'
+) => void;
+
+export interface Props {
+  field: string;
+  fieldMapping?: FieldMapping;
+  fieldType: string;
+  displayNoMappingWarning: boolean;
+  displayUnderscoreWarning: boolean;
+  isCollapsible: boolean;
+  isColumnActive: boolean;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+  onFilter?: DocViewFilterFn;
+  onToggleColumn?: () => void;
+  value: string | ReactNode;
+  valueRaw: unknown;
+}
+
+export function DocViewTableRow({
+  field,
+  fieldMapping,
+  fieldType,
+  displayNoMappingWarning,
+  displayUnderscoreWarning,
+  isCollapsible,
+  isCollapsed,
+  onToggleCollapse,
+  value,
+}: Props) {
+  const valueClassName = classNames({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    osdDocViewer__value: true,
+    'truncate-by-height': isCollapsible && isCollapsed,
+  });
+
+  return (
+    <tr key={field} data-test-subj={`tableDocViewRow-${field}`}>
+      <td className="osdDocViewer__field">
+        <FieldName
+          fieldName={field}
+          fieldType={fieldType}
+          scripted={Boolean(fieldMapping?.scripted)}
+        />
+      </td>
+      <td>
+        {isCollapsible && (
+          <DocViewTableRowBtnCollapse onClick={onToggleCollapse} isCollapsed={isCollapsed} />
+        )}
+        {displayUnderscoreWarning && <DocViewTableRowIconUnderscore />}
+        {displayNoMappingWarning && <DocViewTableRowIconNoMapping />}
+        <div
+          className={valueClassName}
+          data-test-subj={`tableDocViewRow-${field}-value`}
+          /*
+           * Justification for dangerouslySetInnerHTML:
+           * We just use values encoded by our field formatters
+           */
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: value as string }}
+        />
+      </td>
+    </tr>
+  );
+}
diff --git a/public/components/event_analytics/explorer/events_views/detail_table/table_row_btn_collapse.tsx b/public/components/event_analytics/explorer/events_views/detail_table/table_row_btn_collapse.tsx
new file mode 100644
index 0000000000..8a1caaaa0d
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/detail_table/table_row_btn_collapse.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+ 
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+
+export interface Props {
+  onClick: () => void;
+  isCollapsed: boolean;
+}
+
+export function DocViewTableRowBtnCollapse({ onClick, isCollapsed }: Props) {
+  const label = i18n.translate('discover.docViews.table.toggleFieldDetails', {
+    defaultMessage: 'Toggle field details',
+  });
+  return (
+    <EuiToolTip content={label}>
+      <EuiButtonIcon
+        aria-expanded={!isCollapsed}
+        aria-label={label}
+        data-test-subj="collapseBtn"
+        onClick={() => onClick()}
+        iconType={isCollapsed ? 'arrowRight' : 'arrowDown'}
+        iconSize={'s'}
+      />
+    </EuiToolTip>
+  );
+}
diff --git a/public/components/event_analytics/explorer/events_views/detail_table/table_row_icon_no_mapping.tsx b/public/components/event_analytics/explorer/events_views/detail_table/table_row_icon_no_mapping.tsx
new file mode 100644
index 0000000000..5991c30790
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/detail_table/table_row_icon_no_mapping.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import React from 'react';
+import { EuiIconTip } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+export function DocViewTableRowIconNoMapping() {
+  const ariaLabel = i18n.translate('discover.docViews.table.noCachedMappingForThisFieldAriaLabel', {
+    defaultMessage: 'Warning',
+  });
+  const tooltipContent = i18n.translate(
+    'discover.docViews.table.noCachedMappingForThisFieldTooltip',
+    {
+      defaultMessage:
+        'No cached mapping for this field. Refresh field list from the Management > Index Patterns page',
+    }
+  );
+  return (
+    <EuiIconTip
+      aria-label={ariaLabel}
+      color="warning"
+      content={tooltipContent}
+      iconProps={{
+        className: 'osdDocViewer__warning',
+        'data-test-subj': 'noMappingWarning',
+      }}
+      size="s"
+      type="alert"
+    />
+  );
+}
diff --git a/public/components/event_analytics/explorer/events_views/detail_table/table_row_icon_underscore.tsx b/public/components/event_analytics/explorer/events_views/detail_table/table_row_icon_underscore.tsx
new file mode 100644
index 0000000000..f0bd9a5a6e
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/detail_table/table_row_icon_underscore.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiIconTip } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+export function DocViewTableRowIconUnderscore() {
+  const ariaLabel = i18n.translate(
+    'discover.docViews.table.fieldNamesBeginningWithUnderscoreUnsupportedAriaLabel',
+    {
+      defaultMessage: 'Warning',
+    }
+  );
+  const tooltipContent = i18n.translate(
+    'discover.docViews.table.fieldNamesBeginningWithUnderscoreUnsupportedTooltip',
+    {
+      defaultMessage: 'Field names beginning with {underscoreSign} are not supported',
+      values: { underscoreSign: '_' },
+    }
+  );
+
+  return (
+    <EuiIconTip
+      aria-label={ariaLabel}
+      content={tooltipContent}
+      color="warning"
+      iconProps={{
+        className: 'osdDocViewer__warning',
+        'data-test-subj': 'underscoreWarning',
+      }}
+      size="s"
+      type="alert"
+    />
+  );
+}
diff --git a/public/components/event_analytics/explorer/events_views/docView.scss b/public/components/event_analytics/explorer/events_views/docView.scss
new file mode 100644
index 0000000000..c395ed4dad
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/docView.scss
@@ -0,0 +1,51 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.selected-event-row {
+  background-color: rgba(5, 143, 244, 0.1);
+}
+
+.doc-flyout table {
+  width: 100%;
+  display: inline-block;
+  overflow-x: scroll;
+}
+
+.doc-flyout td.eui-textNoWrap {
+  padding-top: 1.25vh;
+}
+
+.doc-flyout td {
+  vertical-align: top;
+  padding: 0.5vh;
+}
+
+.compare-checkbox {
+  padding: 8px;
+}
+
+.header-button {
+  margin-right: 55px;
+}
+
+.cnt-picker {
+  width: 80px;
+  text-align: center;
+}
+
+.events-flyout-resize {
+  position: absolute;
+  right: 30px;
+  top: 0px;
+  z-index: 3;
+}
+
+.vertical-center {
+  margin-top: auto;
+}
+
+.trace-link {
+  margin-left: 5px;
+}
diff --git a/public/components/event_analytics/explorer/events_views/docViewRow.tsx b/public/components/event_analytics/explorer/events_views/docViewRow.tsx
new file mode 100644
index 0000000000..7a4f2c3b27
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/docViewRow.tsx
@@ -0,0 +1,279 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './docView.scss';
+import moment from 'moment';
+import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
+import { toPairs, uniqueId, has, forEach, isEqual } from 'lodash';
+import { EuiButtonEmpty, EuiButtonIcon, EuiIcon, EuiLink } from '@elastic/eui';
+import { useEffect } from 'react';
+import { IExplorerFields, IField } from '../../../../../common/types/explorer';
+import { DocFlyout } from './doc_flyout';
+import { HttpStart } from '../../../../../../../src/core/public';
+import { OTEL_TRACE_ID, DATE_PICKER_FORMAT } from '../../../../../common/constants/explorer';
+import { SurroundingFlyout } from './surrounding_flyout';
+import PPLService from '../../../../services/requests/ppl';
+import { isValidTraceId } from '../../utils';
+
+export interface IDocType {
+  [key: string]: string;
+}
+
+interface IDocViewRowProps {
+  http: HttpStart;
+  doc: IDocType;
+  docId: string;
+  selectedCols: IField[];
+  timeStampField: string;
+  explorerFields: IExplorerFields;
+  pplService: PPLService;
+  rawQuery: string;
+  onFlyoutOpen: (docId: string) => void;
+}
+
+export const DocViewRow = forwardRef((props: IDocViewRowProps, ref) => {
+  const {
+    http,
+    doc,
+    docId,
+    selectedCols,
+    timeStampField,
+    explorerFields,
+    pplService,
+    rawQuery,
+    onFlyoutOpen,
+  } = props;
+
+  const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
+  const [surroundingEventsOpen, setSurroundingEventsOpen] = useState<boolean>(false);
+  const [openTraces, setOpenTraces] = useState<boolean>(false);
+  const [flyoutToggleSize, setFlyoutToggleSize] = useState(true);
+
+  useImperativeHandle(ref, () => ({
+    closeAllFlyouts(openDocId: string) {
+      if (openDocId !== docId && (detailsOpen || surroundingEventsOpen)) {
+        setSurroundingEventsOpen(false);
+        setDetailsOpen(false);
+      }
+    },
+  }));
+
+  const getTdTmpl = (conf: { clsName: string; content: React.ReactDOM | string }) => {
+    const { clsName, content } = conf;
+    return (
+      <td key={uniqueId('datagrid-cell-')} className={clsName}>
+        {typeof content === 'boolean' ? String(content) : content}
+      </td>
+    );
+  };
+
+  const getDlTmpl = (conf: { doc: IDocType }, isFlyout: boolean) => {
+    const { doc } = conf;
+
+    return (
+      <div className="truncate-by-height">
+        <span>
+          <dl className="source truncate-by-height">
+            {toPairs(doc).map((entry: string[]) => {
+              const isTraceField = entry[0] === OTEL_TRACE_ID;
+              return (
+                <span key={uniqueId('grid-desc')}>
+                  <dt>{entry[0]}:</dt>
+                  <dd>
+                    <span>
+                      {isTraceField && isValidTraceId(entry[1]) && !isFlyout ? (
+                        <EuiLink onClick={tracesFlyout}>{entry[1]}</EuiLink>
+                      ) : (
+                        entry[1]
+                      )}
+                    </span>
+                  </dd>
+                </span>
+              );
+            })}
+          </dl>
+        </span>
+      </div>
+    );
+  };
+
+  const tracesFlyout = () => {
+    setOpenTraces(true);
+    if (!detailsOpen) toggleDetailOpen();
+  };
+
+  const getDiscoverSourceLikeDOM = (doc: IDocType, isFlyout: boolean) => {
+    return getDlTmpl({ doc }, isFlyout);
+  };
+
+  const toggleDetailOpen = () => {
+    if (surroundingEventsOpen) {
+      setSurroundingEventsOpen(false);
+      setDetailsOpen(false);
+    } else {
+      const newState = !detailsOpen;
+      setDetailsOpen(newState);
+    }
+  };
+
+  const getExpColapTd = () => {
+    return (
+      <td className="osdDocTableCell__toggleDetails" key={uniqueId('grid-td-')}>
+        <EuiButtonIcon
+          className="euiButtonIcon euiButtonIcon--text"
+          onClick={() => {
+            toggleDetailOpen();
+          }}
+          iconType={detailsOpen || surroundingEventsOpen ? 'arrowLeft' : 'arrowRight'}
+        />
+      </td>
+    );
+  };
+
+  const getTds = (doc: IDocType, selectedCols: IField[], isFlyout: boolean) => {
+    const cols = [];
+    const fieldClsName = 'osdDocTableCell__dataField eui-textBreakAll eui-textBreakWord';
+    const timestampClsName = 'eui-textNoWrap';
+    // No field is selected
+    if (!selectedCols || selectedCols.length === 0) {
+      if (has(doc, timeStampField)) {
+        cols.push(
+          getTdTmpl({
+            clsName: timestampClsName,
+            content: moment.utc(doc[timeStampField]).local().format(DATE_PICKER_FORMAT),
+          })
+        );
+      }
+      const _sourceLikeDOM = getDiscoverSourceLikeDOM(doc, isFlyout);
+      cols.push(
+        getTdTmpl({
+          clsName: fieldClsName,
+          content: _sourceLikeDOM,
+        })
+      );
+    } else {
+      // Has at least one field selected
+      const filteredDoc = {};
+      forEach(selectedCols, (selCol) => {
+        if (has(doc, selCol.name)) {
+          filteredDoc[selCol.name] = doc[selCol.name];
+        }
+      });
+      forEach(filteredDoc, (val, key) => {
+        cols.push(
+          getTdTmpl({
+            clsName: fieldClsName,
+            content: isEqual(key, timeStampField)
+              ? moment.utc(val).local().format(DATE_PICKER_FORMAT)
+              : val,
+          })
+        );
+      });
+    }
+
+    // Add detail toggling column
+    cols.unshift(getExpColapTd());
+    return cols;
+  };
+
+  const memorizedTds = useMemo(() => {
+    return getTds(doc, selectedCols, false);
+  }, [doc, selectedCols, detailsOpen, surroundingEventsOpen]);
+
+  const memorizedDocFlyout = useMemo(() => {
+    return (
+      <DocFlyout
+        http={http}
+        detailsOpen={detailsOpen}
+        setDetailsOpen={setDetailsOpen}
+        doc={doc}
+        timeStampField={timeStampField}
+        memorizedTds={getTds(doc, selectedCols, true).slice(1)}
+        explorerFields={explorerFields}
+        openTraces={openTraces}
+        rawQuery={rawQuery}
+        toggleSize={flyoutToggleSize}
+        setToggleSize={setFlyoutToggleSize}
+        setOpenTraces={setOpenTraces}
+        setSurroundingEventsOpen={setSurroundingEventsOpen}
+      />
+    );
+  }, [
+    http,
+    detailsOpen,
+    doc,
+    timeStampField,
+    selectedCols,
+    explorerFields,
+    openTraces,
+    rawQuery,
+    flyoutToggleSize,
+  ]);
+
+  const memorizedSurroundingFlyout = useMemo(() => {
+    return (
+      <SurroundingFlyout
+        http={http}
+        detailsOpen={detailsOpen}
+        setDetailsOpen={setDetailsOpen}
+        doc={doc}
+        timeStampField={timeStampField}
+        memorizedTds={getTds(doc, selectedCols, true).slice(1)}
+        explorerFields={explorerFields}
+        openTraces={openTraces}
+        setOpenTraces={setOpenTraces}
+        setSurroundingEventsOpen={setSurroundingEventsOpen}
+        pplService={pplService}
+        rawQuery={rawQuery}
+        selectedCols={selectedCols}
+        getTds={getTds}
+        toggleSize={flyoutToggleSize}
+        setToggleSize={setFlyoutToggleSize}
+      />
+    );
+  }, [
+    http,
+    detailsOpen,
+    doc,
+    timeStampField,
+    selectedCols,
+    explorerFields,
+    openTraces,
+    pplService,
+    rawQuery,
+    selectedCols,
+    flyoutToggleSize,
+  ]);
+
+  let flyout;
+  if (detailsOpen) {
+    flyout = memorizedDocFlyout;
+  }
+
+  if (surroundingEventsOpen) {
+    flyout = memorizedSurroundingFlyout;
+  }
+
+  useEffect(() => {
+    if (detailsOpen) {
+      onFlyoutOpen(docId);
+    }
+  }, [detailsOpen]);
+
+  return (
+    <>
+      <tr
+        className={
+          detailsOpen || surroundingEventsOpen
+            ? 'osdDocTable__row selected-event-row'
+            : 'osdDocTable__row'
+        }
+      >
+        {memorizedTds}
+      </tr>
+      {flyout}
+    </>
+  );
+});
diff --git a/public/components/event_analytics/explorer/events_views/docViewer.tsx b/public/components/event_analytics/explorer/events_views/docViewer.tsx
new file mode 100644
index 0000000000..581b30aeb3
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/docViewer.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useMemo, useState } from 'react';
+import _ from 'lodash';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLink,
+  EuiPanel,
+  EuiTabbedContent,
+  EuiTabbedContentTab,
+} from '@elastic/eui';
+import { DocViewTable } from './detail_table/doc_detail_table';
+import { JsonCodeBlock } from './json_code_block/json_code_block';
+import { IDocType } from './docViewRow';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import { TraceBlock } from './trace_block/trace_block';
+import { OTEL_TRACE_ID } from '../../../../../common/constants/explorer';
+import { isValidTraceId } from '../../utils';
+
+interface IDocViewerProps {
+  http: HttpSetup;
+  hit: IDocType;
+  openTraces: boolean;
+}
+
+export function DocViewer(props: IDocViewerProps) {
+  const [curSelectedTab, setCurSelectedTab] = useState<EuiTabbedContentTab | null>(null);
+  const [logTraceId, setLogTraceId] = useState('');
+  const [tracesLink, setTracesLink] = useState(<></>);
+
+  // can be passed in later
+  const getTabList = () => {
+    return [
+      {
+        id: _.uniqueId('doc_viewer_tab_'),
+        name: 'Table',
+        component: (tabProps: any) => (
+          <DocViewTable
+            filter={() => {}}
+            onAddColumn={() => {}}
+            onRemoveColumn={() => {}}
+            {...tabProps}
+          />
+        ),
+        otherProps: {},
+      },
+      {
+        id: _.uniqueId('doc_viewer_tab_'),
+        name: 'JSON',
+        component: (tabProps: any) => <JsonCodeBlock {...tabProps} />,
+        otherProps: {},
+      },
+      {
+        id: _.uniqueId('doc_viewer_tab_'),
+        name: (
+          <>
+            <span>Traces</span>
+            {tracesLink}
+          </>
+        ),
+
+        component: (tabProps: any) => <TraceBlock http={props.http} {...tabProps} />,
+        otherProps: {},
+      },
+    ];
+  };
+
+  const tabs = useMemo(() => {
+    return getTabList().map((tab) => {
+      const Component = tab.component;
+      return {
+        id: tab.id,
+        name: tab.name,
+
+        content: (
+          <EuiPanel paddingSize="s">
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <Component hit={props.hit} logTraceId={logTraceId} {...tab.otherProps} />{' '}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
+        ),
+      };
+    });
+  }, [props.hit, logTraceId, tracesLink]);
+
+  if (!tabs.length) {
+    // There there's a minimum of 2 tabs active in Discover.
+    // This condition takes care of unit tests with 0 tabs.
+    return null;
+  }
+
+  useEffect(() => {
+    const traceId = props.hit.hasOwnProperty(OTEL_TRACE_ID) ? props.hit[OTEL_TRACE_ID] : '';
+    setLogTraceId(traceId);
+    if (traceId !== '' && isValidTraceId(traceId))
+      setTracesLink(
+        <EuiLink
+          className="trace-link"
+          href={`#/trace_analytics/traces/${traceId}`}
+          target="_blank"
+          external
+        />
+      );
+  }, []);
+
+  return (
+    <div className="osdDocViewer">
+      <EuiTabbedContent
+        tabs={tabs}
+        selectedTab={curSelectedTab || (props.openTraces ? tabs[2] : tabs[0])}
+        onTabClick={(selectedTab: EuiTabbedContentTab) => setCurSelectedTab(selectedTab)}
+      />
+    </div>
+  );
+}
diff --git a/public/components/event_analytics/explorer/events_views/doc_flyout.tsx b/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
new file mode 100644
index 0000000000..beba69089c
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
@@ -0,0 +1,149 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './docView.scss';
+import React from 'react';
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiTitle,
+  EuiToolTip,
+} from '@elastic/eui';
+import moment from 'moment';
+import { FlyoutContainers } from '../../../common/flyout_containers';
+import { IDocType } from './docViewRow';
+import { DocViewer } from './docViewer';
+import { uiSettingsService } from '../../../../../common/utils';
+import { IExplorerFields } from '../../../../../common/types/explorer';
+import { getHeaders, populateDataGrid } from '../../utils';
+import { DEFAULT_COLUMNS } from '../../../../../common/constants/explorer';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import { PPL_STATS_REGEX } from '../../../../../common/constants/shared';
+
+interface Props {
+  http: HttpSetup;
+  detailsOpen: boolean;
+  setDetailsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  doc: IDocType;
+  timeStampField: string;
+  memorizedTds: JSX.Element[];
+  explorerFields: IExplorerFields;
+  openTraces: boolean;
+  rawQuery: string;
+  toggleSize: boolean;
+  setToggleSize: React.Dispatch<React.SetStateAction<boolean>>;
+  setOpenTraces: React.Dispatch<React.SetStateAction<boolean>>;
+  setSurroundingEventsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const DocFlyout = ({
+  http,
+  detailsOpen,
+  setDetailsOpen,
+  doc,
+  timeStampField,
+  memorizedTds,
+  explorerFields,
+  openTraces,
+  rawQuery,
+  toggleSize,
+  setToggleSize,
+  setOpenTraces,
+  setSurroundingEventsOpen,
+}: Props) => {
+  const closeFlyout = () => {
+    setDetailsOpen(false);
+    setOpenTraces(false);
+  };
+
+  const openSurroundingFlyout = () => {
+    setSurroundingEventsOpen(true);
+    closeFlyout();
+  };
+
+  const flyoutHeader = (
+    <EuiFlyoutHeader hasBorder>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h2 id="eventsDocFyout" className="vertical-center">
+              {doc.hasOwnProperty(timeStampField)
+                ? `Event: ${moment(doc[timeStampField]).format(
+                    uiSettingsService.get('dateFormat')
+                  )}`
+                : `Event Details`}
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            className="events-flyout-resize"
+            color="text"
+            size="m"
+            aria-label="Resize"
+            title="Resize"
+            iconType={toggleSize ? 'menuLeft' : 'menuRight'}
+            aria-pressed={toggleSize}
+            onClick={() => {
+              setToggleSize((isOn) => !isOn);
+            }}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiToolTip
+            position="bottom"
+            content={
+              rawQuery.match(PPL_STATS_REGEX) ? (
+                <p>Cannot view surrounding events with `stats` command in PPL query</p>
+              ) : !doc.hasOwnProperty(timeStampField) ? (
+                <p>Cannot view surrounding events without time field in query response</p>
+              ) : (
+                <p>View surrounding events based on timestamp</p>
+              )
+            }
+          >
+            <EuiButton
+              onClick={openSurroundingFlyout}
+              className="header-button"
+              isDisabled={rawQuery.match(PPL_STATS_REGEX) || !doc.hasOwnProperty(timeStampField)}
+            >
+              View surrounding events
+            </EuiButton>
+          </EuiToolTip>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlyoutHeader>
+  );
+
+  const flyoutBody = (
+    <EuiFlyoutBody>
+      {populateDataGrid(
+        explorerFields,
+        getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS.slice(1), true),
+        <tr className="osdDocTable__row">{memorizedTds}</tr>,
+        getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS.slice(1), true),
+        <tr className="osdDocTable__row">{memorizedTds}</tr>
+      )}
+      <DocViewer http={http} hit={doc} openTraces={openTraces} />
+    </EuiFlyoutBody>
+  );
+
+  const flyoutFooter = <></>;
+
+  return (
+    <FlyoutContainers
+      closeFlyout={closeFlyout}
+      flyoutHeader={flyoutHeader}
+      flyoutBody={flyoutBody}
+      flyoutFooter={flyoutFooter}
+      ariaLabel={'eventsDocFyout'}
+      size={toggleSize ? 'm' : 'l'}
+    />
+  );
+};
diff --git a/public/components/event_analytics/explorer/events_views/index.ts b/public/components/event_analytics/explorer/events_views/index.ts
new file mode 100644
index 0000000000..13b7318faa
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './docViewer';
+export * from './docViewRow';
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/events_views/json_code_block/__tests__/__snapshots__/json_code_block.test.tsx.snap b/public/components/event_analytics/explorer/events_views/json_code_block/__tests__/__snapshots__/json_code_block.test.tsx.snap
new file mode 100644
index 0000000000..b318643346
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/json_code_block/__tests__/__snapshots__/json_code_block.test.tsx.snap
@@ -0,0 +1,208 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Doc viewer JSON block component Renders JSON block component 1`] = `
+<JsonCodeBlock
+  hit={
+    Object {
+      "Carrier": "JetBeats",
+      "avg(FlightDelayMin)": "45.957544288332315",
+    }
+  }
+>
+  <EuiCodeBlock
+    aria-label="Read only JSON view of an elasticsearch document"
+    isCopyable={true}
+    language="json"
+    paddingSize="s"
+  >
+    <EuiCodeBlockImpl
+      aria-label="Read only JSON view of an elasticsearch document"
+      inline={false}
+      isCopyable={true}
+      language="json"
+      paddingSize="s"
+    >
+      <div
+        className="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingSmall euiCodeBlock--hasControls prismjs language-json"
+        style={Object {}}
+      >
+        <pre
+          className="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+          style={Object {}}
+          tabIndex={-1}
+        >
+          <code
+            aria-label="Read only JSON view of an elasticsearch document"
+            className="euiCodeBlock__code json"
+          >
+            <span
+              className="euiCodeBlock__line"
+              key="node-0-0"
+            >
+              <span
+                className="token punctuation"
+                key="node-1-0"
+              >
+                {
+              </span>
+              
+
+            </span>
+            <span
+              className="euiCodeBlock__line"
+              key="node-0-1"
+            >
+                
+              <span
+                className="token property"
+                key="node-1-1"
+              >
+                "Carrier"
+              </span>
+              <span
+                className="token operator"
+                key="node-1-2"
+              >
+                :
+              </span>
+               
+              <span
+                className="token string"
+                key="node-1-4"
+              >
+                "JetBeats"
+              </span>
+              <span
+                className="token punctuation"
+                key="node-1-5"
+              >
+                ,
+              </span>
+              
+
+            </span>
+            <span
+              className="euiCodeBlock__line"
+              key="node-0-2"
+            >
+                
+              <span
+                className="token property"
+                key="node-1-1"
+              >
+                "avg(FlightDelayMin)"
+              </span>
+              <span
+                className="token operator"
+                key="node-1-2"
+              >
+                :
+              </span>
+               
+              <span
+                className="token string"
+                key="node-1-4"
+              >
+                "45.957544288332315"
+              </span>
+              
+
+            </span>
+            <span
+              className="euiCodeBlock__line"
+              key="node-0-3"
+            >
+              <span
+                className="token punctuation"
+                key="node-1-1"
+              >
+                }
+              </span>
+            </span>
+          </code>
+        </pre>
+        <div
+          className="euiCodeBlock__controls"
+        >
+          <div
+            className="euiCodeBlock__copyButton"
+          >
+            <EuiI18n
+              default="Copy"
+              token="euiCodeBlock.copyButton"
+            >
+              <EuiCopy
+                afterMessage="Copied"
+                textToCopy="{
+  \\"Carrier\\": \\"JetBeats\\",
+  \\"avg(FlightDelayMin)\\": \\"45.957544288332315\\"
+}"
+              >
+                <EuiToolTip
+                  delay="regular"
+                  onMouseOut={[Function]}
+                  position="top"
+                >
+                  <span
+                    className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                  >
+                    <EuiButtonIcon
+                      aria-label="Copy"
+                      color="text"
+                      iconType="copy"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                    >
+                      <button
+                        aria-label="Copy"
+                        className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                        disabled={false}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        type="button"
+                      >
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          color="inherit"
+                          size="m"
+                          type="copy"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </button>
+                    </EuiButtonIcon>
+                  </span>
+                </EuiToolTip>
+              </EuiCopy>
+            </EuiI18n>
+          </div>
+        </div>
+      </div>
+    </EuiCodeBlockImpl>
+  </EuiCodeBlock>
+</JsonCodeBlock>
+`;
diff --git a/public/components/event_analytics/explorer/events_views/json_code_block/__tests__/json_code_block.test.tsx b/public/components/event_analytics/explorer/events_views/json_code_block/__tests__/json_code_block.test.tsx
new file mode 100644
index 0000000000..c79a7611f0
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/json_code_block/__tests__/json_code_block.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { JsonCodeBlock } from '../json_code_block';
+
+describe('Doc viewer JSON block component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders JSON block component', async () => {
+    
+    const hit = {
+      'Carrier': 'JetBeats',
+      'avg(FlightDelayMin)': '45.957544288332315'
+    };
+
+    const wrapper = mount(
+      <JsonCodeBlock 
+        hit={hit}
+      />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/events_views/json_code_block/json_code_block.tsx b/public/components/event_analytics/explorer/events_views/json_code_block/json_code_block.tsx
new file mode 100644
index 0000000000..a687cdb49f
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/json_code_block/json_code_block.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiCodeBlock } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { IDocType } from '../docViewRow';
+
+export function JsonCodeBlock({ hit }: { hit: IDocType }) {
+  const label = i18n.translate('discover.docViews.json.codeEditorAriaLabel', {
+    defaultMessage: 'Read only JSON view of an elasticsearch document',
+  });
+  return (
+    <EuiCodeBlock aria-label={label} language="json" isCopyable paddingSize="s">
+      {JSON.stringify(hit, null, 2)}
+    </EuiCodeBlock>
+  );
+}
diff --git a/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx b/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
new file mode 100644
index 0000000000..4c67c3e199
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
@@ -0,0 +1,279 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './docView.scss';
+import React, { useEffect, useState } from 'react';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiCallOut,
+  EuiFieldNumber,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiFormRow,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  EuiToolTip,
+} from '@elastic/eui';
+import { FlyoutContainers } from '../../../common/flyout_containers';
+import { IDocType } from './docViewRow';
+import { IExplorerFields, IField } from '../../../../../common/types/explorer';
+import { getHeaders, fetchSurroundingData, rangeNumDocs, populateDataGrid } from '../../utils';
+import { DEFAULT_COLUMNS } from '../../../../../common/constants/explorer';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import PPLService from '../../../../services/requests/ppl';
+
+interface Props {
+  http: HttpSetup;
+  detailsOpen: boolean;
+  setDetailsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  doc: IDocType;
+  timeStampField: string;
+  memorizedTds: JSX.Element[];
+  explorerFields: IExplorerFields;
+  openTraces: boolean;
+  setOpenTraces: React.Dispatch<React.SetStateAction<boolean>>;
+  setSurroundingEventsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  pplService: PPLService;
+  rawQuery: string;
+  selectedCols: IField[];
+  getTds: (doc: IDocType, selectedCols: IField[], isFlyout: boolean) => JSX.Element[];
+  toggleSize: boolean;
+  setToggleSize: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const SurroundingFlyout = ({
+  http,
+  detailsOpen,
+  setDetailsOpen,
+  doc,
+  timeStampField,
+  memorizedTds,
+  explorerFields,
+  openTraces,
+  setOpenTraces,
+  setSurroundingEventsOpen,
+  pplService,
+  rawQuery,
+  selectedCols,
+  getTds,
+  toggleSize,
+  setToggleSize,
+}: Props) => {
+  const [numNewEvents, setNumNewEvents] = useState(5);
+  const [valueOldEvents, setNumOldEvents] = useState(5);
+  const [loadingNewEvents, setLoadingNewEvents] = useState(false);
+  const [loadingOldEvents, setLoadingOldEvents] = useState(false);
+  const [oldEventsError, setOldEventsError] = useState('');
+  const [newEventsError, setNewEventsError] = useState('');
+  const [newEventsData, setNewEventsData] = useState<JSX.Element[][]>([[]]);
+  const [oldEventsData, setOldEventsData] = useState<JSX.Element[][]>([[]]);
+
+  const closeFlyout = () => {
+    setDetailsOpen(false);
+    setOpenTraces(false);
+    setSurroundingEventsOpen(false);
+  };
+
+  const openDetailsFlyout = () => {
+    setDetailsOpen(true);
+    setOpenTraces(false);
+    setSurroundingEventsOpen(false);
+  };
+
+  const loadData = async (typeOfDocs: 'new' | 'old', value: number) => {
+    const numDocs = rangeNumDocs(value);
+    let resultCount = 0;
+    if (typeOfDocs === 'new') {
+      resultCount = await fetchSurroundingData(
+        pplService,
+        rawQuery,
+        timeStampField,
+        doc[timeStampField],
+        numDocs,
+        'new',
+        setNewEventsData,
+        setNewEventsError,
+        setLoadingNewEvents,
+        selectedCols,
+        getTds
+      );
+      setNumNewEvents(resultCount);
+    } else {
+      resultCount = await fetchSurroundingData(
+        pplService,
+        rawQuery,
+        timeStampField,
+        doc[timeStampField],
+        numDocs,
+        'old',
+        setOldEventsData,
+        setOldEventsError,
+        setLoadingOldEvents,
+        selectedCols,
+        getTds
+      );
+      setNumOldEvents(resultCount);
+    }
+  };
+
+  const loadButton = (typeOfDocs: 'new' | 'old') => {
+    typeOfDocs === 'new'
+      ? loadData(typeOfDocs, numNewEvents + 5)
+      : loadData(typeOfDocs, valueOldEvents + 5);
+  };
+
+  const handleKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+    typeOfDocs: 'new' | 'old'
+  ) => {
+    if (event.key === 'Enter') {
+      loadData(typeOfDocs, typeOfDocs === 'new' ? numNewEvents : valueOldEvents);
+    }
+  };
+
+  const onChangeNewEvents = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNumNewEvents(parseInt(e.target.value));
+  };
+
+  const onChangeOldEvents = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNumOldEvents(parseInt(e.target.value));
+  };
+
+  const flyoutHeader = (
+    <EuiFlyoutHeader hasBorder>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiTitle size="s">
+            <h2 id="surroundingFyout" className="vertical-center">
+              View surrounding events
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButtonIcon
+            className="events-flyout-resize"
+            color="text"
+            size="m"
+            aria-label="Resize"
+            title="Resize"
+            iconType={toggleSize ? 'menuLeft' : 'menuRight'}
+            aria-pressed={toggleSize}
+            onClick={() => {
+              setToggleSize((isOn) => !isOn);
+            }}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            onClick={openDetailsFlyout}
+            className="header-button"
+            iconType="sortRight"
+            iconSide="right"
+          >
+            View event details
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlyoutHeader>
+  );
+
+  const getInputForm = (
+    iconType: string,
+    onChange: React.ChangeEventHandler<HTMLInputElement>,
+    value: number,
+    typeOfDocs: 'new' | 'old'
+  ) => {
+    return (
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiFormRow>
+            <EuiButtonEmpty
+              isLoading={typeOfDocs === 'new' ? loadingNewEvents : loadingOldEvents}
+              iconSide="left"
+              onClick={() => loadButton(typeOfDocs)}
+              iconType={iconType}
+            >
+              Load
+            </EuiButtonEmpty>
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} className="cnt-picker">
+          <EuiFormRow>
+            <EuiFieldNumber
+              value={value}
+              onChange={(e) => onChange(e)}
+              aria-label={typeOfDocs === 'new' ? 'fetch newer events' : 'fetch older events'}
+              min={0}
+              max={10000}
+              onKeyDown={(e) => handleKeyDown(e, typeOfDocs)}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiFormRow display="center">
+            <EuiText>{typeOfDocs === 'new' ? 'newer' : 'older'} events</EuiText>
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  const flyoutBody = (
+    <EuiFlyoutBody>
+      {getInputForm('arrowUp', onChangeNewEvents, numNewEvents, 'new')}
+      <EuiSpacer size="s" />
+      <div>
+        {newEventsError !== '' && (
+          <EuiCallOut iconType="bolt" title={newEventsError} color="warning" />
+        )}
+      </div>
+      {populateDataGrid(
+        explorerFields,
+        getHeaders(explorerFields.queriedFields, DEFAULT_COLUMNS.slice(1), true),
+        <>
+          {newEventsData}
+          <tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
+          {oldEventsData}
+        </>,
+        getHeaders(explorerFields.selectedFields, DEFAULT_COLUMNS.slice(1), true),
+        <>
+          {newEventsData}
+          <tr className="osdDocTable__row selected-event-row">{memorizedTds}</tr>
+          {oldEventsData}
+        </>
+      )}
+      <div>
+        {oldEventsError !== '' && (
+          <EuiCallOut iconType="bolt" title={oldEventsError} color="warning" />
+        )}
+      </div>
+      <EuiSpacer size="s" />
+      {getInputForm('arrowDown', onChangeOldEvents, valueOldEvents, 'old')}
+    </EuiFlyoutBody>
+  );
+
+  const flyoutFooter = <></>;
+
+  useEffect(() => {
+    loadData('new', 5);
+    loadData('old', 5);
+  }, []);
+
+  return (
+    <FlyoutContainers
+      closeFlyout={closeFlyout}
+      flyoutHeader={flyoutHeader}
+      flyoutBody={flyoutBody}
+      flyoutFooter={flyoutFooter}
+      ariaLabel={'surroundingFyout'}
+      size={toggleSize ? 'm' : 'l'}
+    />
+  );
+};
diff --git a/public/components/event_analytics/explorer/events_views/trace_block/trace_block.tsx b/public/components/event_analytics/explorer/events_views/trace_block/trace_block.tsx
new file mode 100644
index 0000000000..e90476c926
--- /dev/null
+++ b/public/components/event_analytics/explorer/events_views/trace_block/trace_block.tsx
@@ -0,0 +1,47 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { TraceDetailRender } from '../../../../application_analytics/components/flyout_components/trace_detail_render';
+import React, { useEffect } from 'react';
+import { HttpSetup } from '../../../../../../../../src/core/public';
+import { EuiCallOut, EuiLink } from '@elastic/eui';
+import { TRACE_ANALYTICS_DOCUMENTATION_LINK } from '../../../../../../common/constants/trace_analytics';
+import {
+  OPEN_TELEMETRY_LOG_CORRELATION_LINK,
+  OTEL_TRACE_ID,
+} from '../../../../../../common/constants/explorer';
+import { IDocType } from '../docViewRow';
+import { isValidTraceId } from '../../../utils';
+
+interface props {
+  http: HttpSetup;
+  hit: IDocType;
+  logTraceId: string;
+}
+
+export const TraceBlock = ({ http, hit, logTraceId }: props) => {
+  if (logTraceId === '' || !isValidTraceId(logTraceId)) {
+    return (
+      <>
+        <EuiCallOut iconType="help" title="No Trace Id found in the event.">
+          <p>Please make sure to add "{OTEL_TRACE_ID}" field to the logs.</p>
+          <p>
+            More info on{' '}
+            <EuiLink href={TRACE_ANALYTICS_DOCUMENTATION_LINK} target="_blank" external>
+              Trace Analytics
+            </EuiLink>
+            <br />
+            More info on{' '}
+            <EuiLink href={OPEN_TELEMETRY_LOG_CORRELATION_LINK} target="_blank" external>
+              Log Correlation
+            </EuiLink>
+          </p>
+        </EuiCallOut>
+      </>
+    );
+  }
+
+  return <TraceDetailRender traceId={logTraceId} http={http} />;
+};
diff --git a/public/components/event_analytics/explorer/explorer.scss b/public/components/event_analytics/explorer/explorer.scss
new file mode 100644
index 0000000000..33acd6b449
--- /dev/null
+++ b/public/components/event_analytics/explorer/explorer.scss
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+#opensearch-dashboards-body {
+  overflow-y: hidden;
+}
+
+.liveStream {
+  margin : 8px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  display: flex;
+  flex-grow: 1;
+  vertical-align: baseline;
+}
+
+.mainContentTabs .euiResizableContainer {
+  height: calc(100vh - 298px);
+}
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
new file mode 100644
index 0000000000..1294d03a1c
--- /dev/null
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -0,0 +1,1533 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import dateMath from '@elastic/datemath';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiContextMenuItem,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiHorizontalRule,
+  EuiLink,
+  EuiLoadingSpinner,
+  EuiPopover,
+  EuiPopoverFooter,
+  EuiSpacer,
+  EuiTabbedContent,
+  EuiTabbedContentTab,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+import classNames from 'classnames';
+import { cloneDeep, has, isEmpty, isEqual, reduce } from 'lodash';
+import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { batch, useDispatch, useSelector } from 'react-redux';
+import {
+  AVAILABLE_FIELDS,
+  DATE_PICKER_FORMAT,
+  DEFAULT_AVAILABILITY_QUERY,
+  EVENT_ANALYTICS_DOCUMENTATION_URL,
+  FILTERED_PATTERN,
+  NEW_TAB,
+  PATTERNS_EXTRACTOR_REGEX,
+  PATTERNS_REGEX,
+  PATTERN_REGEX,
+  PPL_DEFAULT_PATTERN_REGEX_FILETER,
+  RAW_QUERY,
+  SAVED_OBJECT_ID,
+  SAVED_OBJECT_TYPE,
+  SAVED_QUERY,
+  SAVED_VISUALIZATION,
+  SELECTED_DATE_RANGE,
+  SELECTED_FIELDS,
+  SELECTED_PATTERN_FIELD,
+  SELECTED_TIMESTAMP,
+  TAB_CHART_ID,
+  TAB_CHART_TITLE,
+  TAB_CREATED_TYPE,
+  TAB_EVENT_ID,
+  TAB_EVENT_TITLE,
+  TIME_INTERVAL_OPTIONS,
+} from '../../../../common/constants/explorer';
+import {
+  LIVE_END_TIME,
+  LIVE_OPTIONS,
+  PPL_NEWLINE_REGEX,
+  PPL_PATTERNS_DOCUMENTATION_URL,
+  PPL_STATS_REGEX,
+} from '../../../../common/constants/shared';
+import {
+  IDefaultTimestampState,
+  IExplorerProps,
+  IField,
+  IQueryTab,
+  IVisualizationContainerProps,
+} from '../../../../common/types/explorer';
+import {
+  buildQuery,
+  composeFinalQuery,
+  getIndexPatternFromRawQuery,
+} from '../../../../common/utils';
+import { sleep } from '../../common/live_tail/live_tail_button';
+import { onItemSelect, parseGetSuggestions } from '../../common/search/autocomplete_logic';
+import { Search } from '../../common/search/search';
+import { getVizContainerProps } from '../../visualizations/charts/helpers';
+import { TabContext, useFetchEvents, useFetchPatterns, useFetchVisualizations } from '../hooks';
+import { selectCountDistribution } from '../redux/slices/count_distribution_slice';
+import { selectFields, sortFields, updateFields } from '../redux/slices/field_slice';
+import { selectPatterns } from '../redux/slices/patterns_slice';
+import { selectQueryResult } from '../redux/slices/query_result_slice';
+import { changeDateRange, changeQuery, selectQueries } from '../redux/slices/query_slice';
+import { updateTabName } from '../redux/slices/query_tab_slice';
+import { selectExplorerVisualization } from '../redux/slices/visualization_slice';
+import {
+  change as changeVisualizationConfig,
+  change as changeVizConfig,
+  change as updateVizConfig,
+  selectVisualizationConfig,
+} from '../redux/slices/viualization_config_slice';
+import { formatError, getDefaultVisConfig } from '../utils';
+import { DataGrid } from './events_views/data_grid';
+import './explorer.scss';
+import { HitsCounter } from './hits_counter/hits_counter';
+import { PatternsTable } from './log_patterns/patterns_table';
+import { NoResults } from './no_results';
+import { Sidebar } from './sidebar';
+import { TimechartHeader } from './timechart_header';
+import { ExplorerVisualizations } from './visualizations';
+import { CountDistribution } from './visualizations/count_distribution';
+import { QueryManager } from '../../../../common/query_manager';
+
+const TYPE_TAB_MAPPING = {
+  [SAVED_QUERY]: TAB_EVENT_ID,
+  [SAVED_VISUALIZATION]: TAB_CHART_ID,
+};
+
+export const Explorer = ({
+  pplService,
+  dslService,
+  tabId,
+  savedObjects,
+  timestampUtils,
+  setToast,
+  http,
+  history,
+  notifications,
+  savedObjectId,
+  curSelectedTabId,
+  searchBarConfigs,
+  appId = '',
+  appBaseQuery = '',
+  addVisualizationToPanel,
+  startTime,
+  endTime,
+  setStartTime,
+  setEndTime,
+  callback,
+  callbackInApp,
+  queryManager = new QueryManager(),
+}: IExplorerProps) => {
+  const dispatch = useDispatch();
+  const requestParams = { tabId };
+  const { getLiveTail, getEvents, getAvailableFields, isEventsLoading } = useFetchEvents({
+    pplService,
+    requestParams,
+  });
+  const { getVisualizations, getCountVisualizations, isVisLoading } = useFetchVisualizations({
+    pplService,
+    requestParams,
+  });
+  const {
+    isEventsLoading: isPatternLoading,
+    getPatterns,
+    setDefaultPatternsField,
+  } = useFetchPatterns({
+    pplService,
+    requestParams,
+  });
+  const appLogEvents = tabId.startsWith('application-analytics-tab');
+  const query = useSelector(selectQueries)[tabId];
+  const explorerData = useSelector(selectQueryResult)[tabId];
+  const explorerFields = useSelector(selectFields)[tabId];
+  const countDistribution = useSelector(selectCountDistribution)[tabId];
+  const explorerVisualizations = useSelector(selectExplorerVisualization)[tabId];
+  const userVizConfigs = useSelector(selectVisualizationConfig)[tabId] || {};
+  const patternsData = useSelector(selectPatterns)[tabId];
+  const [selectedContentTabId, setSelectedContentTab] = useState(TAB_EVENT_ID);
+  const [selectedCustomPanelOptions, setSelectedCustomPanelOptions] = useState([]);
+  const [selectedPanelName, setSelectedPanelName] = useState('');
+  const [curVisId, setCurVisId] = useState('bar');
+  const [prevIndex, setPrevIndex] = useState('');
+  const [isPanelTextFieldInvalid, setIsPanelTextFieldInvalid] = useState(false);
+  const [isSidebarClosed, setIsSidebarClosed] = useState(false);
+  const [timeIntervalOptions, setTimeIntervalOptions] = useState(TIME_INTERVAL_OPTIONS);
+  const [isOverridingTimestamp, setIsOverridingTimestamp] = useState(false);
+  const [isOverridingPattern, setIsOverridingPattern] = useState(false);
+  const [isPatternConfigPopoverOpen, setIsPatternConfigPopoverOpen] = useState(false);
+  const [patternRegexInput, setPatternRegexInput] = useState(PPL_DEFAULT_PATTERN_REGEX_FILETER);
+  const [tempQuery, setTempQuery] = useState(query[RAW_QUERY]);
+  const [isLiveTailPopoverOpen, setIsLiveTailPopoverOpen] = useState(false);
+  const [isLiveTailOn, setIsLiveTailOn] = useState(false);
+  const [liveTailTabId, setLiveTailTabId] = useState(TAB_EVENT_ID);
+  const [liveTailName, setLiveTailName] = useState('Live');
+  const [liveHits, setLiveHits] = useState(0);
+  const [browserTabFocus, setBrowserTabFocus] = useState(true);
+  const [liveTimestamp, setLiveTimestamp] = useState(DATE_PICKER_FORMAT);
+  const [triggerAvailability, setTriggerAvailability] = useState(false);
+
+  const selectedIntervalRef = useRef<{
+    text: string;
+    value: string;
+  }>();
+  const [viewLogPatterns, setViewLogPatterns] = useState(false);
+  const [spanValue, setSpanValue] = useState(false);
+  const [subType, setSubType] = useState('visualization');
+  const [metricMeasure, setMetricMeasure] = useState('');
+  const [metricLabel, setMetricLabel] = useState([]);
+  const [metricChecked, setMetricChecked] = useState(false);
+  const queryRef = useRef();
+  const appBasedRef = useRef('');
+  appBasedRef.current = appBaseQuery;
+  const selectedPanelNameRef = useRef('');
+  const explorerFieldsRef = useRef();
+  const isLiveTailOnRef = useRef(false);
+  const liveTailTabIdRef = useRef('');
+  const liveTailNameRef = useRef('Live');
+  queryRef.current = query;
+  selectedPanelNameRef.current = selectedPanelName;
+  explorerFieldsRef.current = explorerFields;
+  isLiveTailOnRef.current = isLiveTailOn;
+  liveTailTabIdRef.current = liveTailTabId;
+  liveTailNameRef.current = liveTailName;
+
+  const findAutoInterval = (start: string = '', end: string = '') => {
+    const momentStart = dateMath.parse(start)!;
+    const momentEnd = dateMath.parse(end, { roundUp: true })!;
+    const diffSeconds = momentEnd.unix() - momentStart.unix();
+    let minInterval = 'y';
+
+    // less than 1 second
+    if (diffSeconds <= 1) minInterval = 'ms';
+    // less than 2 minutes
+    else if (diffSeconds <= 60 * 2) minInterval = 's';
+    // less than 2 hours
+    else if (diffSeconds <= 3600 * 2) minInterval = 'm';
+    // less than 2 days
+    else if (diffSeconds <= 86400 * 2) minInterval = 'h';
+    // less than 1 month
+    else if (diffSeconds <= 86400 * 31) minInterval = 'd';
+    // less than 3 months
+    else if (diffSeconds <= 86400 * 93) minInterval = 'w';
+    // less than 1 year
+    else if (diffSeconds <= 86400 * 366) minInterval = 'M';
+
+    setTimeIntervalOptions([
+      { text: 'Auto', value: 'auto_' + minInterval },
+      ...TIME_INTERVAL_OPTIONS,
+    ]);
+    selectedIntervalRef.current = { text: 'Auto', value: 'auto_' + minInterval };
+  };
+
+  useEffect(() => {
+    document.addEventListener('visibilitychange', function () {
+      if (document.hidden) {
+        setBrowserTabFocus(false);
+      } else {
+        setBrowserTabFocus(true);
+      }
+    });
+  });
+
+  const getErrorHandler = (title: string) => {
+    return (error: any) => {
+      const formattedError = formatError(error.name, error.message, error.body.message);
+      notifications.toasts.addError(formattedError, {
+        title,
+      });
+    };
+  };
+
+  const getSavedDataById = async (objectId: string) => {
+    // load saved query/visualization if object id exists
+    await savedObjects
+      .fetchSavedObjects({
+        objectId,
+      })
+      .then(async (res) => {
+        const savedData = res.observabilityObjectList[0];
+        const isSavedQuery = has(savedData, SAVED_QUERY);
+        const savedType = isSavedQuery ? SAVED_QUERY : SAVED_VISUALIZATION;
+        const objectData = isSavedQuery ? savedData.savedQuery : savedData.savedVisualization;
+        const isSavedVisualization = savedData.savedVisualization;
+        const currQuery = objectData?.query || '';
+
+        if (appLogEvents) {
+          if (objectData?.selected_date_range?.start && objectData?.selected_date_range?.end) {
+            setStartTime(objectData.selected_date_range.start);
+            setEndTime(objectData.selected_date_range.end);
+          }
+        }
+
+        // update redux
+        batch(async () => {
+          await dispatch(
+            changeQuery({
+              tabId,
+              query: {
+                [RAW_QUERY]: currQuery,
+                [SELECTED_TIMESTAMP]: objectData?.selected_timestamp?.name || 'timestamp',
+                [SAVED_OBJECT_ID]: objectId,
+                [SAVED_OBJECT_TYPE]: savedType,
+                [SELECTED_DATE_RANGE]:
+                  objectData?.selected_date_range?.start && objectData?.selected_date_range?.end
+                    ? [objectData.selected_date_range.start, objectData.selected_date_range.end]
+                    : ['now-15m', 'now'],
+              },
+            })
+          );
+          await dispatch(
+            updateFields({
+              tabId,
+              data: {
+                [SELECTED_FIELDS]: [...objectData?.selected_fields?.tokens],
+              },
+            })
+          );
+          await dispatch(
+            updateTabName({
+              tabId,
+              tabName: objectData.name,
+            })
+          );
+          // fill saved user configs
+          if (objectData?.type) {
+            let visConfig = {};
+            const customConfig = objectData.user_configs ? JSON.parse(objectData.user_configs) : {};
+            if (!isEmpty(customConfig.dataConfig) && !isEmpty(customConfig.dataConfig?.series)) {
+              visConfig = { ...customConfig };
+            } else {
+              const statsTokens = queryManager.queryParser().parse(objectData.query).getStats();
+              visConfig = { dataConfig: { ...getDefaultVisConfig(statsTokens) } };
+            }
+            await dispatch(
+              updateVizConfig({
+                tabId,
+                vizId: objectData?.type,
+                data: visConfig,
+              })
+            );
+          }
+        });
+
+        // update UI state with saved data
+        setSelectedPanelName(objectData?.name || '');
+        setCurVisId(objectData?.type || 'bar');
+        setTempQuery((staleTempQuery: string) => {
+          return objectData?.query || staleTempQuery;
+        });
+        if (isSavedVisualization?.sub_type) {
+          if (isSavedVisualization?.sub_type === 'metric') {
+            setMetricChecked(true);
+            setMetricMeasure(isSavedVisualization?.units_of_measure);
+          }
+          setSubType(isSavedVisualization?.sub_type);
+        }
+        const tabToBeFocused = isSavedQuery
+          ? TYPE_TAB_MAPPING[SAVED_QUERY]
+          : TYPE_TAB_MAPPING[SAVED_VISUALIZATION];
+        setSelectedContentTab(tabToBeFocused);
+        await fetchData();
+      })
+      .catch((error) => {
+        notifications.toasts.addError(error, {
+          title: `Cannot get saved data for object id: ${objectId}`,
+        });
+      });
+  };
+
+  const getDefaultTimestampByIndexPattern = async (
+    indexPattern: string
+  ): Promise<IDefaultTimestampState> => await timestampUtils.getTimestamp(indexPattern);
+
+  const fetchData = async (startingTime?: string, endingTime?: string) => {
+    const curQuery = queryRef.current;
+    const rawQueryStr = (curQuery![RAW_QUERY] as string).includes(appBaseQuery)
+      ? curQuery![RAW_QUERY]
+      : buildQuery(appBasedRef.current, curQuery![RAW_QUERY]);
+    const curIndex = getIndexPatternFromRawQuery(rawQueryStr);
+
+    if (isEmpty(rawQueryStr)) return;
+
+    if (isEmpty(curIndex)) {
+      setToast('Query does not include valid index.', 'danger');
+      return;
+    }
+
+    let curTimestamp: string = curQuery![SELECTED_TIMESTAMP];
+    if (isEmpty(curTimestamp)) {
+      const defaultTimestamp = await getDefaultTimestampByIndexPattern(curIndex);
+      if (isEmpty(defaultTimestamp.default_timestamp)) {
+        setToast(defaultTimestamp.message, 'danger');
+        return;
+      }
+      curTimestamp = defaultTimestamp.default_timestamp;
+      if (defaultTimestamp.hasSchemaConflict) {
+        setToast(defaultTimestamp.message, 'danger');
+      }
+    }
+
+    let curPattern: string = curQuery![SELECTED_PATTERN_FIELD];
+
+    if (isEmpty(curPattern)) {
+      const patternErrorHandler = getErrorHandler('Error fetching default pattern field');
+      await setDefaultPatternsField(curIndex, '', patternErrorHandler);
+      const newQuery = queryRef.current;
+      curPattern = newQuery![SELECTED_PATTERN_FIELD];
+      if (isEmpty(curPattern)) {
+        setToast('Index does not contain a valid pattern field.', 'danger');
+        return;
+      }
+    }
+
+    if (isEqual(typeof startingTime, 'undefined') && isEqual(typeof endingTime, 'undefined')) {
+      startingTime = curQuery![SELECTED_DATE_RANGE][0];
+      endingTime = curQuery![SELECTED_DATE_RANGE][1];
+    }
+
+    // compose final query
+    const finalQuery = composeFinalQuery(
+      curQuery![RAW_QUERY],
+      startingTime!,
+      endingTime!,
+      curTimestamp,
+      isLiveTailOnRef.current,
+      appBasedRef.current,
+      curQuery![SELECTED_PATTERN_FIELD],
+      curQuery![PATTERN_REGEX],
+      curQuery![FILTERED_PATTERN]
+    );
+
+    await dispatch(
+      changeQuery({
+        tabId,
+        query: {
+          finalQuery,
+          [RAW_QUERY]: rawQueryStr,
+          [SELECTED_TIMESTAMP]: curTimestamp,
+        },
+      })
+    );
+
+    // search
+    if (finalQuery.match(PPL_STATS_REGEX)) {
+      const cusVisIds = userVizConfigs ? Object.keys(userVizConfigs) : [];
+      getVisualizations();
+      getAvailableFields(`search source=${curIndex}`);
+      for (const visId of cusVisIds) {
+        dispatch(
+          changeVisualizationConfig({
+            tabId,
+            vizId: visId,
+            data: { ...userVizConfigs[visId] },
+          })
+        );
+      }
+    } else {
+      if (!selectedIntervalRef.current || selectedIntervalRef.current.text === 'Auto') {
+        findAutoInterval(startingTime, endingTime);
+      }
+      if (isLiveTailOnRef.current) {
+        getLiveTail(undefined, getErrorHandler('Error fetching events'));
+      } else {
+        getEvents(undefined, getErrorHandler('Error fetching events'));
+      }
+      getCountVisualizations(selectedIntervalRef.current!.value.replace(/^auto_/, ''));
+
+      // to fetch patterns data on current query
+      if (!finalQuery.match(PATTERNS_REGEX)) {
+        getPatterns(selectedIntervalRef.current!.value.replace(/^auto_/, ''));
+      }
+    }
+
+    // for comparing usage if for the same tab, user changed index from one to another
+    if (!isLiveTailOnRef.current) {
+      setPrevIndex(curTimestamp);
+      if (!queryRef.current!.isLoaded) {
+        dispatch(
+          changeQuery({
+            tabId,
+            query: {
+              isLoaded: true,
+            },
+          })
+        );
+      }
+    }
+  };
+
+  const isIndexPatternChanged = (currentQuery: string, prevTabQuery: string) =>
+    !isEqual(getIndexPatternFromRawQuery(currentQuery), getIndexPatternFromRawQuery(prevTabQuery));
+
+  const updateTabData = async (objectId: string) => {
+    await getSavedDataById(objectId);
+  };
+
+  const prepareAvailability = async () => {
+    setSelectedContentTab(TAB_CHART_ID);
+    setTriggerAvailability(true);
+    await setTempQuery(buildQuery(appBaseQuery, DEFAULT_AVAILABILITY_QUERY));
+    await updateQueryInStore(buildQuery(appBaseQuery, DEFAULT_AVAILABILITY_QUERY));
+    await handleTimeRangePickerRefresh(true);
+  };
+
+  useEffect(() => {
+    if (!isEmpty(appBasedRef.current)) {
+      if (callback) {
+        callback(() => prepareAvailability());
+      }
+      if (callbackInApp) {
+        callbackInApp(() => prepareAvailability());
+      }
+    }
+  }, [appBasedRef.current]);
+
+  useEffect(() => {
+    if (queryRef.current!.isLoaded) return;
+    let objectId;
+    if (queryRef.current![TAB_CREATED_TYPE] === NEW_TAB || appLogEvents) {
+      objectId = queryRef.current!.savedObjectId || '';
+    } else {
+      objectId = queryRef.current!.savedObjectId || savedObjectId;
+    }
+    if (objectId) {
+      updateTabData(objectId);
+    } else {
+      fetchData();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (appLogEvents) {
+      if (savedObjectId) {
+        updateTabData(savedObjectId);
+      }
+    }
+  }, [savedObjectId]);
+
+  const handleAddField = (field: IField) => toggleFields(field, AVAILABLE_FIELDS, SELECTED_FIELDS);
+
+  const handleRemoveField = (field: IField) =>
+    toggleFields(field, SELECTED_FIELDS, AVAILABLE_FIELDS);
+
+  const handleTimePickerChange = async (timeRange: string[]) => {
+    if (appLogEvents) {
+      setStartTime(timeRange[0]);
+      setEndTime(timeRange[1]);
+    }
+    await dispatch(
+      changeDateRange({
+        tabId: requestParams.tabId,
+        data: {
+          [RAW_QUERY]: queryRef.current![RAW_QUERY],
+          [SELECTED_DATE_RANGE]: timeRange,
+        },
+      })
+    );
+  };
+
+  const showPermissionErrorToast = () => {
+    setToast(
+      'Please ask your administrator to enable Event Analytics for you.',
+      'danger',
+      <EuiLink href={EVENT_ANALYTICS_DOCUMENTATION_URL} target="_blank">
+        Documentation
+      </EuiLink>
+    );
+  };
+
+  const handleTimeRangePickerRefresh = async (availability?: boolean) => {
+    handleQuerySearch(availability);
+    if (availability !== true && query.rawQuery.match(PATTERNS_REGEX)) {
+      let currQuery = query.rawQuery;
+      const currPattern = currQuery.match(PATTERNS_EXTRACTOR_REGEX)!.groups!.pattern;
+      // Remove existing pattern selection if it exists
+      if (currQuery.match(PATTERNS_REGEX)) {
+        currQuery = currQuery.replace(PATTERNS_REGEX, '');
+      }
+      const patternSelectQuery = `${currQuery.trim()} | patterns ${currPattern}`;
+      await setTempQuery(patternSelectQuery);
+      await updateQueryInStore(patternSelectQuery);
+      // Passing in empty string will remove pattern query
+      const patternErrorHandler = getErrorHandler('Error fetching patterns');
+      getPatterns(selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y', patternErrorHandler);
+    }
+  };
+
+  /**
+   * Toggle fields between selected and unselected sets
+   * @param field field to be toggled
+   * @param FieldSetToRemove set where this field to be removed from
+   * @param FieldSetToAdd set where this field to be added
+   */
+  const toggleFields = (field: IField, FieldSetToRemove: string, FieldSetToAdd: string) => {
+    const nextFields = cloneDeep(explorerFields);
+    const thisFieldSet = nextFields[FieldSetToRemove];
+    const nextFieldSet = thisFieldSet.filter((fd: IField) => fd.name !== field.name);
+    nextFields[FieldSetToRemove] = nextFieldSet;
+    nextFields[FieldSetToAdd].push(field);
+    batch(() => {
+      dispatch(
+        updateFields({
+          tabId,
+          data: {
+            ...nextFields,
+          },
+        })
+      );
+      dispatch(
+        sortFields({
+          tabId,
+          data: [FieldSetToAdd],
+        })
+      );
+    });
+  };
+
+  const sidebarClassName = classNames({
+    closed: isSidebarClosed,
+  });
+
+  const mainSectionClassName = classNames({
+    'col-md-10': !isSidebarClosed,
+    'col-md-12': isSidebarClosed,
+  });
+
+  const handleOverrideTimestamp = async (timestamp: IField) => {
+    const curQuery = queryRef.current;
+    const rawQueryStr = buildQuery(appBaseQuery, curQuery![RAW_QUERY]);
+    const curIndex = getIndexPatternFromRawQuery(rawQueryStr);
+    if (isEmpty(rawQueryStr) || isEmpty(curIndex)) {
+      setToast('Cannot override timestamp because there was no valid index found.', 'danger');
+      return;
+    }
+
+    setIsOverridingTimestamp(true);
+
+    await dispatch(
+      changeQuery({
+        tabId,
+        query: {
+          [SELECTED_TIMESTAMP]: timestamp?.name || '',
+        },
+      })
+    );
+
+    setIsOverridingTimestamp(false);
+    handleQuerySearch();
+  };
+
+  const handleOverridePattern = async (pattern: IField) => {
+    setIsOverridingPattern(true);
+    await setDefaultPatternsField(
+      '',
+      pattern.name,
+      getErrorHandler('Error overriding default pattern')
+    );
+    setIsOverridingPattern(false);
+    await getPatterns(selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y', getErrorHandler('Error fetching patterns'));
+  };
+
+  const totalHits: number = useMemo(() => {
+    if (isLiveTailOn && countDistribution?.data) {
+      const hits = reduce(
+        countDistribution.data['count()'],
+        (sum, n) => {
+          return sum + n;
+        },
+        liveHits
+      );
+      setLiveHits(hits);
+      return hits;
+    }
+    return 0;
+  }, [countDistribution?.data]);
+
+  const onPatternSelection = async (pattern: string) => {
+    if (queryRef.current![FILTERED_PATTERN] === pattern) {
+      return;
+    }
+    dispatch(
+      changeQuery({
+        tabId,
+        query: {
+          [FILTERED_PATTERN]: pattern,
+        },
+      })
+    );
+    // workaround to refresh callback and trigger fetch data
+    await setTempQuery(queryRef.current![RAW_QUERY]);
+    await handleTimeRangePickerRefresh(true);
+  };
+
+  const getMainContent = () => {
+    return (
+      <main className="container-fluid">
+        <div className="row">
+          <div
+            className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
+            id="discover-sidebar"
+            data-test-subj="eventExplorer__sidebar"
+          >
+            {!isSidebarClosed && (
+              <div className="explorerFieldSelector">
+                <Sidebar
+                  query={query}
+                  explorerFields={explorerFields}
+                  explorerData={explorerData}
+                  selectedTimestamp={query[SELECTED_TIMESTAMP]}
+                  selectedPattern={query[SELECTED_PATTERN_FIELD]}
+                  handleOverrideTimestamp={handleOverrideTimestamp}
+                  handleOverridePattern={handleOverridePattern}
+                  handleAddField={(field: IField) => handleAddField(field)}
+                  handleRemoveField={(field: IField) => handleRemoveField(field)}
+                  isOverridingTimestamp={isOverridingTimestamp}
+                  isOverridingPattern={isOverridingPattern}
+                  isFieldToggleButtonDisabled={
+                    isEmpty(explorerData.jsonData) ||
+                    !isEmpty(queryRef.current![RAW_QUERY].match(PPL_STATS_REGEX))
+                  }
+                />
+              </div>
+            )}
+            <EuiButtonIcon
+              iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
+              iconSize="m"
+              size="s"
+              onClick={() => {
+                setIsSidebarClosed((staleState) => {
+                  return !staleState;
+                });
+              }}
+              data-test-subj="collapseSideBarButton"
+              aria-controls="discover-sidebar"
+              aria-expanded={isSidebarClosed ? 'false' : 'true'}
+              aria-label="Toggle sidebar"
+              className="dscCollapsibleSidebar__collapseButton"
+            />
+          </div>
+          <div className={`dscWrapper ${mainSectionClassName}`}>
+            {explorerData && !isEmpty(explorerData.jsonData) ? (
+              <div className="dscWrapper__content">
+                <div className="dscResults">
+                  {countDistribution?.data && !isLiveTailOnRef.current && (
+                    <>
+                      <EuiFlexGroup justifyContent="center" alignItems="center">
+                        <EuiFlexItem grow={false}>
+                          <HitsCounter
+                            hits={reduce(
+                              countDistribution.data['count()'],
+                              (sum, n) => {
+                                return sum + n;
+                              },
+                              0
+                            )}
+                            showResetButton={false}
+                            onResetQuery={() => {}}
+                          />
+                        </EuiFlexItem>
+                        <EuiFlexItem grow={false}>
+                          <TimechartHeader
+                            dateFormat={'MMM D, YYYY @ HH:mm:ss.SSS'}
+                            options={timeIntervalOptions}
+                            onChangeInterval={(selectedIntrv) => {
+                              const intervalOptionsIndex = timeIntervalOptions.findIndex(
+                                (item) => item.value === selectedIntrv
+                              );
+                              const intrv = selectedIntrv.replace(/^auto_/, '');
+                              getCountVisualizations(intrv);
+                              selectedIntervalRef.current =
+                                timeIntervalOptions[intervalOptionsIndex];
+                              getPatterns(intrv, getErrorHandler('Error fetching patterns'));
+                            }}
+                            stateInterval={selectedIntervalRef.current?.value}
+                          />
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                      <CountDistribution countDistribution={countDistribution} />
+                      <EuiHorizontalRule margin="xs" />
+                      <EuiFlexGroup
+                        justifyContent="spaceBetween"
+                        alignItems="center"
+                        style={{ margin: '8px' }}
+                        gutterSize="xs"
+                      >
+                        <EuiFlexItem grow={false}>
+                          {viewLogPatterns && (
+                            <EuiFlexGroup gutterSize="s" alignItems="center">
+                              <EuiFlexItem grow={false}>
+                                <EuiTitle size="s">
+                                  <h3 style={{ margin: '0px' }}>
+                                    Patterns{' '}
+                                    <span className="pattern-header-count">
+                                      ({patternsData.patternTableData?.length || 0})
+                                    </span>
+                                  </h3>
+                                </EuiTitle>
+                              </EuiFlexItem>
+                              <EuiFlexItem grow={false}>
+                                <EuiPopover
+                                  button={
+                                    <EuiButtonIcon
+                                      iconType="gear"
+                                      onClick={() =>
+                                        setIsPatternConfigPopoverOpen(!isPatternConfigPopoverOpen)
+                                      }
+                                    />
+                                  }
+                                  isOpen={isPatternConfigPopoverOpen}
+                                  closePopover={() => setIsPatternConfigPopoverOpen(false)}
+                                  anchorPosition="upCenter"
+                                >
+                                  <EuiTitle size="xxs">
+                                    <h3>Pattern regex</h3>
+                                  </EuiTitle>
+                                  <EuiText size="s">
+                                    Log patterns allow you to cluster your logs, to help
+                                  </EuiText>
+                                  <EuiText size="s">summarize large volume of logs.</EuiText>
+                                  <EuiSpacer size="s" />
+                                  <EuiFormRow
+                                    helpText={
+                                      <EuiText size="s">
+                                        Pattern regex is used to reduce logs into log groups.{' '}
+                                        <EuiLink
+                                          href={PPL_PATTERNS_DOCUMENTATION_URL}
+                                          target="_blank"
+                                        >
+                                          help
+                                        </EuiLink>
+                                      </EuiText>
+                                    }
+                                  >
+                                    <EuiFieldText
+                                      value={patternRegexInput}
+                                      onChange={(e) => setPatternRegexInput(e.target.value)}
+                                    />
+                                  </EuiFormRow>
+                                  <EuiPopoverFooter>
+                                    <EuiFlexGroup justifyContent="flexEnd">
+                                      <EuiFlexItem grow={false}>
+                                        <EuiButtonEmpty
+                                          size="s"
+                                          onClick={() => setIsPatternConfigPopoverOpen(false)}
+                                        >
+                                          Cancel
+                                        </EuiButtonEmpty>
+                                      </EuiFlexItem>
+                                      <EuiFlexItem grow={false}>
+                                        <EuiButton
+                                          size="s"
+                                          fill
+                                          onClick={async () => {
+                                            await setIsPatternConfigPopoverOpen(false);
+                                            await dispatch(
+                                              changeQuery({
+                                                tabId,
+                                                query: {
+                                                  [PATTERN_REGEX]: patternRegexInput,
+                                                },
+                                              })
+                                            );
+                                            await getPatterns(
+                                              selectedIntervalRef.current?.value.replace(/^auto_/, '') || 'y',
+                                              getErrorHandler('Error fetching patterns')
+                                            );
+                                          }}
+                                        >
+                                          Apply
+                                        </EuiButton>
+                                      </EuiFlexItem>
+                                    </EuiFlexGroup>
+                                  </EuiPopoverFooter>
+                                </EuiPopover>
+                              </EuiFlexItem>
+                            </EuiFlexGroup>
+                          )}
+                        </EuiFlexItem>
+                        <EuiFlexItem grow={false}>
+                          <EuiFlexGroup>
+                            <EuiFlexItem grow={false}>
+                              {viewLogPatterns && (
+                                <EuiText size="s">
+                                  <EuiLink onClick={() => onPatternSelection('')}>
+                                    Clear Selection
+                                  </EuiLink>
+                                </EuiText>
+                              )}
+                            </EuiFlexItem>
+                            <EuiFlexItem grow={false}>
+                              <EuiText size="s">
+                                <EuiLink
+                                  onClick={() => {
+                                    // hide patterns will also clear pattern selection
+                                    if (viewLogPatterns) {
+                                      onPatternSelection('');
+                                    }
+                                    setViewLogPatterns(!viewLogPatterns);
+                                    setIsPatternConfigPopoverOpen(false);
+                                  }}
+                                >
+                                  {`${viewLogPatterns ? 'Hide' : 'Show'} Patterns`}
+                                </EuiLink>
+                              </EuiText>
+                            </EuiFlexItem>
+                          </EuiFlexGroup>
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                      <EuiHorizontalRule margin="xs" />
+                      {viewLogPatterns && (
+                        <>
+                          <PatternsTable
+                            tableData={patternsData.patternTableData || []}
+                            onPatternSelection={onPatternSelection}
+                            tabId={tabId}
+                            query={query}
+                            isPatternLoading={isPatternLoading}
+                          />
+                          <EuiHorizontalRule margin="xs" />
+                        </>
+                      )}
+                    </>
+                  )}
+
+                  <section
+                    className="dscTable dscTableFixedScroll"
+                    aria-labelledby="documentsAriaLabel"
+                  >
+                    <h2 className="euiScreenReaderOnly" id="documentsAriaLabel">
+                      <FormattedMessage
+                        id="discover.documentsAriaLabel"
+                        defaultMessage="Documents"
+                      />
+                    </h2>
+                    <div className="dscDiscover">
+                      {isLiveTailOnRef.current && (
+                        <>
+                          <EuiSpacer size="m" />
+                          <EuiFlexGroup justifyContent="center" alignItems="center" gutterSize="m">
+                            <EuiLoadingSpinner size="l" />
+                            <EuiText textAlign="center" data-test-subj="LiveStreamIndicator_on">
+                              <strong>&nbsp;&nbsp;Live streaming</strong>
+                            </EuiText>
+                            <EuiFlexItem grow={false}>
+                              <HitsCounter
+                                hits={totalHits}
+                                showResetButton={false}
+                                onResetQuery={() => {}}
+                              />
+                            </EuiFlexItem>
+                            <EuiFlexItem grow={false}>since {liveTimestamp}</EuiFlexItem>
+                          </EuiFlexGroup>
+                          <EuiSpacer size="m" />
+                        </>
+                      )}
+                      {countDistribution?.data && (
+                        <EuiTitle size="s">
+                          <h3 style={{ margin: '0px', textAlign: 'left', marginLeft: '10px' }}>
+                            Events
+                            <span className="event-header-count">
+                              {' '}
+                              (
+                              {reduce(
+                                countDistribution.data['count()'],
+                                (sum, n) => {
+                                  return sum + n;
+                                },
+                                0
+                              )}
+                              )
+                            </span>
+                          </h3>
+                        </EuiTitle>
+                      )}
+                      <EuiHorizontalRule margin="xs" />
+                      <DataGrid
+                        http={http}
+                        pplService={pplService}
+                        rows={explorerData.jsonData}
+                        rowsAll={explorerData.jsonDataAll}
+                        explorerFields={explorerFields}
+                        timeStampField={queryRef.current![SELECTED_TIMESTAMP]}
+                        rawQuery={appBasedRef.current || queryRef.current![RAW_QUERY]}
+                      />
+                      <a tabIndex={0} id="discoverBottomMarker">
+                        &#8203;
+                      </a>
+                    </div>
+                  </section>
+                </div>
+              </div>
+            ) : (
+              <NoResults />
+            )}
+          </div>
+        </div>
+      </main>
+    );
+  };
+
+  function getMainContentTab({
+    tabID,
+    tabTitle,
+    getContent,
+  }: {
+    tabID: string;
+    tabTitle: string;
+    getContent: () => JSX.Element;
+  }) {
+    return {
+      id: tabID,
+      name: (
+        <>
+          <EuiText data-test-subj={`${tabID}Tab`} size="s" textAlign="left" color="default">
+            <span className="tab-title">{tabTitle}</span>
+          </EuiText>
+        </>
+      ),
+      content: <>{getContent()}</>,
+    };
+  }
+
+  const visualizations: IVisualizationContainerProps = useMemo(() => {
+    return getVizContainerProps({
+      vizId: curVisId,
+      rawVizData: explorerVisualizations,
+      query,
+      indexFields: explorerFields,
+      userConfigs: !isEmpty(userVizConfigs[curVisId])
+        ? { ...userVizConfigs[curVisId] }
+        : {
+            dataConfig: getDefaultVisConfig(queryManager.queryParser().parse(tempQuery).getStats()),
+          },
+      appData: { fromApp: appLogEvents },
+      explorer: { explorerData, explorerFields, query, http, pplService },
+    });
+  }, [curVisId, explorerVisualizations, explorerFields, query, userVizConfigs]);
+
+  const callbackForConfig = (childFunc: () => void) => {
+    if (childFunc && triggerAvailability) {
+      childFunc();
+      setTriggerAvailability(false);
+    }
+  };
+
+  const getExplorerVis = () => {
+    return (
+      <ExplorerVisualizations
+        query={query}
+        curVisId={curVisId}
+        setCurVisId={setCurVisId}
+        explorerFields={explorerFields}
+        explorerVis={explorerVisualizations}
+        explorerData={explorerData}
+        handleAddField={handleAddField}
+        handleRemoveField={handleRemoveField}
+        visualizations={visualizations}
+        handleOverrideTimestamp={handleOverrideTimestamp}
+        callback={callbackForConfig}
+        queryManager={queryManager}
+      />
+    );
+  };
+
+  const getMainContentTabs = () => {
+    return [
+      getMainContentTab({
+        tabID: TAB_EVENT_ID,
+        tabTitle: TAB_EVENT_TITLE,
+        getContent: () => getMainContent(),
+      }),
+      getMainContentTab({
+        tabID: TAB_CHART_ID,
+        tabTitle: TAB_CHART_TITLE,
+        getContent: () => getExplorerVis(),
+      }),
+    ];
+  };
+
+  const memorizedMainContentTabs = useMemo(() => {
+    return getMainContentTabs();
+  }, [
+    curVisId,
+    isPanelTextFieldInvalid,
+    explorerData,
+    explorerFields,
+    isSidebarClosed,
+    countDistribution,
+    explorerVisualizations,
+    selectedContentTabId,
+    isOverridingTimestamp,
+    visualizations,
+    query,
+    isLiveTailOnRef.current,
+    patternsData,
+    viewLogPatterns,
+    isPatternConfigPopoverOpen,
+    patternRegexInput,
+    userVizConfigs,
+  ]);
+  const handleContentTabClick = (selectedTab: IQueryTab) => setSelectedContentTab(selectedTab.id);
+
+  const updateQueryInStore = async (updateQuery: string) => {
+    await dispatch(
+      changeQuery({
+        tabId,
+        query: {
+          [RAW_QUERY]: updateQuery.replaceAll(PPL_NEWLINE_REGEX, ''),
+        },
+      })
+    );
+  };
+
+  const updateCurrentTimeStamp = async (timestamp: string) => {
+    await dispatch(
+      changeQuery({
+        tabId,
+        query: {
+          [SELECTED_TIMESTAMP]: timestamp,
+        },
+      })
+    );
+  };
+
+  const handleQuerySearch = useCallback(
+    async (availability?: boolean) => {
+      // clear previous selected timestamp when index pattern changes
+      if (
+        !isEmpty(tempQuery) &&
+        !isEmpty(query[RAW_QUERY]) &&
+        isIndexPatternChanged(tempQuery, query[RAW_QUERY])
+      ) {
+        await updateCurrentTimeStamp('');
+        await setDefaultPatternsField('', '');
+      }
+      if (availability !== true) {
+        await updateQueryInStore(tempQuery);
+      }
+      await fetchData();
+
+      if (selectedContentTabId === TAB_CHART_ID) {
+        // parse stats section on every search
+        const statsTokens = queryManager.queryParser().parse(tempQuery).getStats();
+        const updatedDataConfig = getDefaultVisConfig(statsTokens);
+        await dispatch(
+          changeVizConfig({
+            tabId,
+            vizId: curVisId,
+            data: { dataConfig: { ...updatedDataConfig } },
+          })
+        );
+      }
+    },
+    [tempQuery, query, selectedContentTabId, curVisId]
+  );
+
+  const handleQueryChange = async (newQuery: string) => setTempQuery(newQuery);
+
+  const handleSavingObject = async () => {
+    const currQuery = queryRef.current;
+    const currFields = explorerFieldsRef.current;
+    if (isEmpty(currQuery![RAW_QUERY]) && isEmpty(appBaseQuery)) {
+      setToast('No query to save.', 'danger');
+      return;
+    }
+    if (isEmpty(selectedPanelNameRef.current)) {
+      setIsPanelTextFieldInvalid(true);
+      setToast('Name field cannot be empty.', 'danger');
+      return;
+    }
+    setIsPanelTextFieldInvalid(false);
+    if (isEqual(selectedContentTabId, TAB_EVENT_ID)) {
+      const isTabMatchingSavedType = isEqual(currQuery![SAVED_OBJECT_TYPE], SAVED_QUERY);
+      if (!isEmpty(currQuery![SAVED_OBJECT_ID]) && isTabMatchingSavedType) {
+        await savedObjects
+          .updateSavedQueryById({
+            query: currQuery![RAW_QUERY],
+            fields: currFields![SELECTED_FIELDS],
+            dateRange: currQuery![SELECTED_DATE_RANGE],
+            name: selectedPanelNameRef.current,
+            timestamp: currQuery![SELECTED_TIMESTAMP],
+            objectId: currQuery![SAVED_OBJECT_ID],
+            type: '',
+          })
+          .then((res: any) => {
+            setToast(
+              `Query '${selectedPanelNameRef.current}' has been successfully updated.`,
+              'success'
+            );
+            dispatch(
+              updateTabName({
+                tabId,
+                tabName: selectedPanelNameRef.current,
+              })
+            );
+            return res;
+          })
+          .catch((error: any) => {
+            notifications.toasts.addError(error, {
+              title: `Cannot update query '${selectedPanelNameRef.current}'`,
+            });
+          });
+      } else {
+        // create new saved query
+        savedObjects
+          .createSavedQuery({
+            query: currQuery![RAW_QUERY],
+            fields: currFields![SELECTED_FIELDS],
+            dateRange: currQuery![SELECTED_DATE_RANGE],
+            name: selectedPanelNameRef.current,
+            timestamp: currQuery![SELECTED_TIMESTAMP],
+            objectId: '',
+            type: '',
+          })
+          .then((res: any) => {
+            history.replace(`/event_analytics/explorer/${res.objectId}`);
+            setToast(
+              `New query '${selectedPanelNameRef.current}' has been successfully saved.`,
+              'success'
+            );
+            batch(() => {
+              dispatch(
+                changeQuery({
+                  tabId,
+                  query: {
+                    [SAVED_OBJECT_ID]: res.objectId,
+                    [SAVED_OBJECT_TYPE]: SAVED_QUERY,
+                  },
+                })
+              );
+              dispatch(
+                updateTabName({
+                  tabId,
+                  tabName: selectedPanelNameRef.current,
+                })
+              );
+            });
+            history.replace(`/event_analytics/explorer/${res.objectId}`);
+            return res;
+          })
+          .catch((error: any) => {
+            if (error?.body?.statusCode === 403) {
+              showPermissionErrorToast();
+            } else {
+              notifications.toasts.addError(error, {
+                title: `Cannot save query '${selectedPanelNameRef.current}'`,
+              });
+            }
+          });
+      }
+      // to-dos - update selected custom panel
+      if (!isEmpty(selectedCustomPanelOptions)) {
+        // update custom panel - query
+      }
+    } else if (isEqual(selectedContentTabId, TAB_CHART_ID)) {
+      if (
+        (isEmpty(currQuery![RAW_QUERY]) && isEmpty(appBaseQuery)) ||
+        isEmpty(explorerVisualizations)
+      ) {
+        setToast(`There is no query or(and) visualization to save`, 'danger');
+        return;
+      }
+      let savingVisRes;
+      const vizDescription = userVizConfigs[curVisId]?.dataConfig?.panelOptions?.description || '';
+      const isTabMatchingSavedType = isEqual(currQuery![SAVED_OBJECT_TYPE], SAVED_VISUALIZATION);
+      if (!isEmpty(currQuery![SAVED_OBJECT_ID]) && isTabMatchingSavedType) {
+        savingVisRes = await savedObjects
+          .updateSavedVisualizationById({
+            query: buildQuery('', currQuery![RAW_QUERY]),
+            fields: currFields![SELECTED_FIELDS],
+            dateRange: currQuery![SELECTED_DATE_RANGE],
+            name: selectedPanelNameRef.current,
+            timestamp: currQuery![SELECTED_TIMESTAMP],
+            objectId: currQuery![SAVED_OBJECT_ID],
+            type: curVisId,
+            userConfigs: userVizConfigs.hasOwnProperty(curVisId)
+              ? JSON.stringify(userVizConfigs[curVisId])
+              : JSON.stringify({}),
+            description: vizDescription,
+            subType: subType,
+          })
+          .then((res: any) => {
+            setToast(
+              `Visualization '${selectedPanelNameRef.current}' has been successfully updated.`,
+              'success'
+            );
+            dispatch(
+              updateTabName({
+                tabId,
+                tabName: selectedPanelNameRef.current,
+              })
+            );
+            return res;
+          })
+          .catch((error: any) => {
+            notifications.toasts.addError(error, {
+              title: `Cannot update Visualization '${selectedPanelNameRef.current}'`,
+            });
+          });
+      } else {
+        // create new saved visualization
+        savingVisRes = await savedObjects
+          .createSavedVisualization({
+            query: buildQuery('', currQuery![RAW_QUERY]),
+            fields: currFields![SELECTED_FIELDS],
+            dateRange: currQuery![SELECTED_DATE_RANGE],
+            type: curVisId,
+            name: selectedPanelNameRef.current,
+            timestamp: currQuery![SELECTED_TIMESTAMP],
+            applicationId: appId,
+            userConfigs: userVizConfigs.hasOwnProperty(curVisId)
+              ? JSON.stringify(userVizConfigs[curVisId])
+              : JSON.stringify({}),
+            description: vizDescription,
+            subType: subType,
+          })
+          .then((res: any) => {
+            batch(() => {
+              dispatch(
+                changeQuery({
+                  tabId,
+                  query: {
+                    [SAVED_OBJECT_ID]: res.objectId,
+                    [SAVED_OBJECT_TYPE]: SAVED_VISUALIZATION,
+                  },
+                })
+              );
+              dispatch(
+                updateTabName({
+                  tabId,
+                  tabName: selectedPanelNameRef.current,
+                })
+              );
+            });
+            if (appLogEvents) {
+              addVisualizationToPanel(res.objectId, selectedPanelNameRef.current);
+            } else {
+              history.replace(`/event_analytics/explorer/${res.objectId}`);
+            }
+            setToast(
+              `New visualization '${selectedPanelNameRef.current}' has been successfully saved.`,
+              'success'
+            );
+            return res;
+          })
+          .catch((error: any) => {
+            notifications.toasts.addError(error, {
+              title: `Cannot save Visualization '${selectedPanelNameRef.current}'`,
+            });
+          });
+      }
+      if (!has(savingVisRes, 'objectId')) return;
+      // update custom panel - visualization
+      if (!isEmpty(selectedCustomPanelOptions)) {
+        savedObjects
+          .bulkUpdateCustomPanel({
+            selectedCustomPanels: selectedCustomPanelOptions,
+            savedVisualizationId: savingVisRes.objectId,
+          })
+          .then((res: any) => {
+            setToast(
+              `Visualization '${selectedPanelNameRef.current}' has been successfully saved to operation panels.`,
+              'success'
+            );
+          })
+          .catch((error: any) => {
+            notifications.toasts.addError(error, {
+              title: `Cannot add Visualization '${selectedPanelNameRef.current}' to operation panels`,
+            });
+          });
+      }
+    }
+  };
+
+  const liveTailLoop = async (
+    name: string,
+    startingTime: string,
+    endingTime: string,
+    delayTime: number
+  ) => {
+    setLiveTailName(name);
+    setLiveTailTabId((curSelectedTabId.current as unknown) as string);
+    setIsLiveTailOn(true);
+    setToast('Live tail On', 'success');
+    setIsLiveTailPopoverOpen(false);
+    setLiveTimestamp(
+      dateMath.parse(endingTime, { roundUp: true })?.utc().format(DATE_PICKER_FORMAT) || ''
+    );
+    setLiveHits(0);
+    await sleep(2000);
+    const curLiveTailname = liveTailNameRef.current;
+    while (isLiveTailOnRef.current === true && curLiveTailname === liveTailNameRef.current) {
+      handleLiveTailSearch(startingTime, endingTime);
+      if (liveTailTabIdRef.current !== curSelectedTabId.current) {
+        setIsLiveTailOn(false);
+        isLiveTailOnRef.current = false;
+        setLiveTailName('Live');
+        setLiveHits(0);
+      }
+      await sleep(delayTime);
+    }
+  };
+
+  const stopLive = () => {
+    setLiveTailName('Live');
+    setIsLiveTailOn(false);
+    setLiveHits(0);
+    setIsLiveTailPopoverOpen(false);
+    if (isLiveTailOnRef.current) setToast('Live tail Off', 'danger');
+  };
+
+  useEffect(() => {
+    if (isEqual(selectedContentTabId, TAB_CHART_ID) || !browserTabFocus) {
+      stopLive();
+    }
+  }, [selectedContentTabId, browserTabFocus]);
+
+  // stop live tail if the page is moved using breadcrumbs
+  let lastUrl = location.href;
+  new MutationObserver(() => {
+    const url = location.href;
+    if (url !== lastUrl) {
+      lastUrl = url;
+      stopLive();
+    }
+  }).observe(document, { subtree: true, childList: true });
+
+  const popoverItems: ReactElement[] = LIVE_OPTIONS.map((e) => {
+    return (
+      <EuiContextMenuItem
+        key={e.label}
+        onClick={async () => {
+          liveTailLoop(e.label, e.startTime, LIVE_END_TIME, e.delayTime);
+        }}
+        data-test-subj={'eventLiveTail__delay' + e.label}
+      >
+        {e.label}
+      </EuiContextMenuItem>
+    );
+  });
+
+  const dateRange =
+    isEmpty(startTime) || isEmpty(endTime)
+      ? isEmpty(query.selectedDateRange)
+        ? ['now-15m', 'now']
+        : [query.selectedDateRange[0], query.selectedDateRange[1]]
+      : [startTime, endTime];
+
+  const handleLiveTailSearch = useCallback(
+    async (startingTime: string, endingTime: string) => {
+      await updateQueryInStore(tempQuery);
+      fetchData(startingTime, endingTime);
+    },
+    [tempQuery]
+  );
+
+  const generateViewQuery = (query: string) => {
+    if (query.includes(appBaseQuery)) {
+      if (query.includes('|')) {
+        // Some scenarios have ' | ' after base query and some have '| '
+        return query.replace(' | ', '| ').replace(appBaseQuery + '| ', '');
+      }
+      return '';
+    }
+    return query;
+  };
+
+  useEffect(() => {
+    if (isEqual(selectedContentTabId, TAB_CHART_ID)) {
+      const statsTokens = queryManager.queryParser().parse(tempQuery).getStats();
+      const updatedDataConfig = getDefaultVisConfig(statsTokens);
+      setSpanValue(!isEqual(typeof updatedDataConfig.span, 'undefined'));
+    }
+  }, [tempQuery, selectedContentTabId, curVisId]);
+
+  return (
+    <TabContext.Provider
+      value={{
+        tabId,
+        curVisId,
+        dispatch,
+        changeVisualizationConfig,
+        explorerVisualizations,
+        setToast,
+        pplService,
+        handleQuerySearch,
+        handleQueryChange,
+        setTempQuery,
+        fetchData,
+        explorerFields,
+        explorerData,
+        http,
+        query,
+      }}
+    >
+      <div className="dscAppContainer">
+        <Search
+          key="search-component"
+          query={appLogEvents ? generateViewQuery(tempQuery) : query[RAW_QUERY]}
+          tempQuery={tempQuery}
+          handleQueryChange={handleQueryChange}
+          handleQuerySearch={handleQuerySearch}
+          dslService={dslService}
+          startTime={appLogEvents ? startTime : dateRange[0]}
+          endTime={appLogEvents ? endTime : dateRange[1]}
+          handleTimePickerChange={(timeRange: string[]) => handleTimePickerChange(timeRange)}
+          selectedPanelName={selectedPanelNameRef.current}
+          selectedCustomPanelOptions={selectedCustomPanelOptions}
+          setSelectedPanelName={setSelectedPanelName}
+          setSelectedCustomPanelOptions={setSelectedCustomPanelOptions}
+          handleSavingObject={handleSavingObject}
+          isPanelTextFieldInvalid={isPanelTextFieldInvalid}
+          savedObjects={savedObjects}
+          showSavePanelOptionsList={isEqual(selectedContentTabId, TAB_CHART_ID)}
+          handleTimeRangePickerRefresh={handleTimeRangePickerRefresh}
+          isLiveTailPopoverOpen={isLiveTailPopoverOpen}
+          closeLiveTailPopover={() => setIsLiveTailPopoverOpen(false)}
+          popoverItems={popoverItems}
+          isLiveTailOn={isLiveTailOnRef.current}
+          selectedSubTabId={selectedContentTabId}
+          searchBarConfigs={searchBarConfigs}
+          getSuggestions={parseGetSuggestions}
+          onItemSelect={onItemSelect}
+          tabId={tabId}
+          baseQuery={appBaseQuery}
+          stopLive={stopLive}
+          setIsLiveTailPopoverOpen={setIsLiveTailPopoverOpen}
+          liveTailName={liveTailNameRef.current}
+          searchError={explorerVisualizations}
+          curVisId={curVisId}
+          spanValue={spanValue}
+          setSubType={setSubType}
+          metricMeasure={metricMeasure}
+          setMetricMeasure={setMetricMeasure}
+          setMetricLabel={setMetricLabel}
+          metricChecked={metricChecked}
+        />
+        <EuiTabbedContent
+          className="mainContentTabs"
+          initialSelectedTab={memorizedMainContentTabs[0]}
+          selectedTab={memorizedMainContentTabs.find((tab) => tab.id === selectedContentTabId)}
+          onTabClick={(selectedTab: EuiTabbedContentTab) => handleContentTabClick(selectedTab)}
+          tabs={memorizedMainContentTabs}
+        />
+      </div>
+    </TabContext.Provider>
+  );
+};
diff --git a/public/components/event_analytics/explorer/hits_counter/__tests__/__snapshots__/hits_counter.test.tsx.snap b/public/components/event_analytics/explorer/hits_counter/__tests__/__snapshots__/hits_counter.test.tsx.snap
new file mode 100644
index 0000000000..13a8ec20ce
--- /dev/null
+++ b/public/components/event_analytics/explorer/hits_counter/__tests__/__snapshots__/hits_counter.test.tsx.snap
@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Hits counter component Renders hits counter 1`] = `
+<HitsCounter
+  hits={815}
+  onResetQuery={[MockFunction]}
+  showResetButton={false}
+>
+  <I18nProvider>
+    <IntlProvider
+      defaultLocale="en"
+      formats={
+        Object {
+          "date": Object {
+            "full": Object {
+              "day": "numeric",
+              "month": "long",
+              "weekday": "long",
+              "year": "numeric",
+            },
+            "long": Object {
+              "day": "numeric",
+              "month": "long",
+              "year": "numeric",
+            },
+            "medium": Object {
+              "day": "numeric",
+              "month": "short",
+              "year": "numeric",
+            },
+            "short": Object {
+              "day": "numeric",
+              "month": "numeric",
+              "year": "2-digit",
+            },
+          },
+          "number": Object {
+            "currency": Object {
+              "style": "currency",
+            },
+            "percent": Object {
+              "style": "percent",
+            },
+          },
+          "relative": Object {
+            "days": Object {
+              "units": "day",
+            },
+            "hours": Object {
+              "units": "hour",
+            },
+            "minutes": Object {
+              "units": "minute",
+            },
+            "months": Object {
+              "units": "month",
+            },
+            "seconds": Object {
+              "units": "second",
+            },
+            "years": Object {
+              "units": "year",
+            },
+          },
+          "time": Object {
+            "full": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "long": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "medium": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+            },
+            "short": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+            },
+          },
+        }
+      }
+      locale="en"
+      messages={Object {}}
+      textComponent={Symbol(react.fragment)}
+    >
+      <PseudoLocaleWrapper>
+        <EuiFlexGroup
+          alignItems="center"
+          className="dscResultCount"
+          gutterSize="s"
+          justifyContent="center"
+          responsive={false}
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow dscResultCount"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <strong
+                      data-test-subj="discoverQueryHits"
+                    >
+                      815
+                    </strong>
+                     
+                    <FormattedMessage
+                      defaultMessage="{hits, plural, one {hit} other {hits}}"
+                      id="discover.hitsPluralTitle"
+                      values={
+                        Object {
+                          "hits": 815,
+                        }
+                      }
+                    >
+                      hits
+                    </FormattedMessage>
+                  </div>
+                </EuiText>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </PseudoLocaleWrapper>
+    </IntlProvider>
+  </I18nProvider>
+</HitsCounter>
+`;
diff --git a/public/components/event_analytics/explorer/hits_counter/__tests__/hits_counter.test.tsx b/public/components/event_analytics/explorer/hits_counter/__tests__/hits_counter.test.tsx
new file mode 100644
index 0000000000..fca4b5fee0
--- /dev/null
+++ b/public/components/event_analytics/explorer/hits_counter/__tests__/hits_counter.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { HitsCounter } from '../hits_counter';
+
+describe('Hits counter component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders hits counter', async () => {
+    const onResetQuery = jest.fn();
+    
+    const wrapper = mount(
+      <HitsCounter
+        hits={815}
+        showResetButton={false}
+        onResetQuery={onResetQuery}
+      />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/hits_counter/hits_counter.tsx b/public/components/event_analytics/explorer/hits_counter/hits_counter.tsx
new file mode 100644
index 0000000000..0941658eb4
--- /dev/null
+++ b/public/components/event_analytics/explorer/hits_counter/hits_counter.tsx
@@ -0,0 +1,71 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+import React from 'react';
+import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+import { formatNumWithCommas } from '../../../common/helpers';
+
+export interface HitsCounterProps {
+  /**
+   * the number of query hits
+   */
+  hits: number;
+  /**
+   * displays the reset button
+   */
+  showResetButton: boolean;
+  /**
+   * resets the query
+   */
+  onResetQuery: () => void;
+}
+
+export function HitsCounter({ hits, showResetButton, onResetQuery }: HitsCounterProps) {
+  return (
+    <I18nProvider>
+      <EuiFlexGroup
+        gutterSize="s"
+        className="dscResultCount"
+        responsive={false}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <EuiFlexItem grow={false}>
+          <EuiText>
+            <strong data-test-subj="discoverQueryHits">{formatNumWithCommas(hits)}</strong>{' '}
+            <FormattedMessage
+              id="discover.hitsPluralTitle"
+              defaultMessage="{hits, plural, one {hit} other {hits}}"
+              values={{
+                hits,
+              }}
+            />
+          </EuiText>
+        </EuiFlexItem>
+        {showResetButton && (
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              iconType="refresh"
+              data-test-subj="resetSavedSearch"
+              onClick={onResetQuery}
+              size="s"
+              aria-label={i18n.translate('discover.reloadSavedSearchButton', {
+                defaultMessage: 'Reset search',
+              })}
+            >
+              <FormattedMessage
+                id="discover.reloadSavedSearchButton"
+                defaultMessage="Reset search"
+              />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </I18nProvider>
+  );
+}
diff --git a/public/components/event_analytics/explorer/hits_counter/index.ts b/public/components/event_analytics/explorer/hits_counter/index.ts
new file mode 100644
index 0000000000..93706c4947
--- /dev/null
+++ b/public/components/event_analytics/explorer/hits_counter/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { HitsCounter } from './hits_counter';
diff --git a/public/components/event_analytics/explorer/log_explorer.scss b/public/components/event_analytics/explorer/log_explorer.scss
new file mode 100644
index 0000000000..ae6d83409c
--- /dev/null
+++ b/public/components/event_analytics/explorer/log_explorer.scss
@@ -0,0 +1,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.queryTabs {
+  .euiTabs {
+    .tab-title {
+      max-width: 8rem;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    svg {
+      vertical-align: inherit;
+    }
+    .linkNewTag{
+      display: inline-block;
+      text-align: center;
+      font-size: 0.875rem;
+      line-height: 3.5;
+      padding: 0.5rem;
+      min-width: 6rem;
+    }
+  }
+}
+
+// #queryTabs {
+//   height: calc(100vh - 98px);
+// }
+
+.tab-title {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.search-area {
+  position: relative;
+}
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/log_explorer.tsx b/public/components/event_analytics/explorer/log_explorer.tsx
new file mode 100644
index 0000000000..9996b19482
--- /dev/null
+++ b/public/components/event_analytics/explorer/log_explorer.tsx
@@ -0,0 +1,219 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import './log_explorer.scss';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useDispatch, useSelector, batch } from 'react-redux';
+import { uniqueId, map, isEmpty } from 'lodash';
+import $ from 'jquery';
+import { EuiIcon, EuiText, EuiTabbedContentTab, EuiTabbedContent } from '@elastic/eui';
+import { Explorer } from './explorer';
+import { ILogExplorerProps } from '../../../../common/types/explorer';
+import {
+  TAB_TITLE,
+  TAB_ID_TXT_PFX,
+  SAVED_OBJECT_ID,
+  NEW_TAB,
+  REDIRECT_TAB,
+  TAB_EVENT_ID,
+  TAB_CHART_ID,
+  APP_ANALYTICS_TAB_ID_REGEX,
+} from '../../../../common/constants/explorer';
+import { selectQueryTabs, setSelectedQueryTab } from '../redux/slices/query_tab_slice';
+import { selectQueries } from '../redux/slices/query_slice';
+import { selectQueryResult } from '../redux/slices/query_result_slice';
+import { initializeTabData, removeTabData } from '../../application_analytics/helpers/utils';
+
+const searchBarConfigs = {
+  [TAB_EVENT_ID]: {
+    showSaveButton: true,
+    showSavePanelOptionsList: false,
+  },
+  [TAB_CHART_ID]: {
+    showSaveButton: true,
+    showSavePanelOptionsList: true,
+  },
+};
+
+export const LogExplorer = ({
+  pplService,
+  dslService,
+  savedObjects,
+  timestampUtils,
+  setToast,
+  savedObjectId,
+  getExistingEmptyTab,
+  history,
+  notifications,
+  http,
+  queryManager,
+}: ILogExplorerProps) => {
+  const dispatch = useDispatch();
+  const tabIds = useSelector(selectQueryTabs).queryTabIds.filter(
+    (tabid: string) => !tabid.match(APP_ANALYTICS_TAB_ID_REGEX)
+  );
+  const tabNames = useSelector(selectQueryTabs).tabNames;
+  const queries = useSelector(selectQueries);
+  const curSelectedTabId = useSelector(selectQueryTabs).selectedQueryTab;
+  const explorerData = useSelector(selectQueryResult);
+  const queryRef = useRef();
+  const tabIdsRef = useRef();
+  const explorerDataRef = useRef();
+  const curSelectedTabIdRef = useRef();
+  queryRef.current = queries;
+  tabIdsRef.current = tabIds;
+  explorerDataRef.current = explorerData;
+  curSelectedTabIdRef.current = curSelectedTabId;
+
+  const [tabCreatedTypes, setTabCreatedTypes] = useState({});
+
+  // Append add-new-tab link to the end of the tab list, and remove it once tabs state changes
+  useEffect(() => {
+    const newLink = $(
+      '<a class="linkNewTag" data-test-subj="eventExplorer__addNewTab">+ Add new</a>'
+    ).on('click', () => {
+      addNewTab(NEW_TAB);
+    });
+    $('.queryTabs > .euiTabs').append(newLink);
+    return () => {
+      $('.queryTabs > .euiTabs .linkNewTag').remove();
+    };
+  }, [tabIds]);
+
+  const handleTabClick = (selectedTab: EuiTabbedContentTab) => {
+    history.replace(
+      `/event_analytics/explorer/${queryRef.current![selectedTab.id][SAVED_OBJECT_ID] || ''}`
+    );
+    dispatch(setSelectedQueryTab({ tabId: selectedTab.id }));
+  };
+
+  const handleTabClose = (TabIdToBeClosed: string) => {
+    if (tabIds.length === 1) {
+      setToast('Cannot close last tab.', 'danger');
+      return;
+    }
+
+    const index: number = tabIds.indexOf(TabIdToBeClosed);
+    const curSelectedTab = curSelectedTabIdRef.current;
+    let newIdToFocus = '';
+    if (TabIdToBeClosed === curSelectedTab) {
+      if (index === 0) {
+        newIdToFocus = tabIds[index + 1];
+      } else if (index > 0) {
+        newIdToFocus = tabIds[index - 1];
+      }
+    }
+    removeTabData(dispatch, TabIdToBeClosed, newIdToFocus);
+  };
+
+  const addNewTab = async (where: string) => {
+    // get a new tabId
+    const tabId = uniqueId(TAB_ID_TXT_PFX);
+
+    // create a new tab
+    await initializeTabData(dispatch, tabId, where);
+
+    setTabCreatedTypes((staleState) => {
+      return {
+        ...staleState,
+        [tabId]: where,
+      };
+    });
+
+    return tabId;
+  };
+
+  const dispatchSavedObjectId = async () => {
+    const emptyTabId = getExistingEmptyTab({
+      tabIds: tabIdsRef.current,
+      queries: queryRef.current,
+      explorerData: explorerDataRef.current,
+    });
+    const newTabId = emptyTabId ? emptyTabId : await addNewTab(REDIRECT_TAB);
+    return newTabId;
+  };
+
+  useEffect(() => {
+    if (!isEmpty(savedObjectId)) {
+      dispatchSavedObjectId();
+    }
+  }, []);
+
+  function getQueryTab({
+    tabTitle,
+    tabId,
+    handlesTabClose,
+  }: {
+    tabTitle: string;
+    tabId: string;
+    handlesTabClose: (TabIdToBeClosed: string) => void;
+  }) {
+    return {
+      id: tabId,
+      name: (
+        <>
+          <EuiText size="s" textAlign="left" color="default">
+            <span className="tab-title">{tabTitle}</span>
+            <EuiIcon
+              type="cross"
+              onClick={(e) => {
+                e.stopPropagation();
+                handlesTabClose(tabId);
+              }}
+              data-test-subj="eventExplorer__tabClose"
+            />
+          </EuiText>
+        </>
+      ),
+      content: (
+        <>
+          <Explorer
+            key={`explorer_${tabId}`}
+            pplService={pplService}
+            dslService={dslService}
+            tabId={tabId}
+            savedObjects={savedObjects}
+            timestampUtils={timestampUtils}
+            setToast={setToast}
+            history={history}
+            notifications={notifications}
+            savedObjectId={savedObjectId}
+            tabCreatedTypes={tabCreatedTypes}
+            curSelectedTabId={curSelectedTabIdRef}
+            http={http}
+            searchBarConfigs={searchBarConfigs}
+            queryManager={queryManager}
+          />
+        </>
+      ),
+    };
+  }
+
+  const memorizedTabs = useMemo(() => {
+    const res = map(tabIds, (tabId) => {
+      return getQueryTab({
+        tabTitle: tabNames[tabId] || TAB_TITLE,
+        tabId,
+        handlesTabClose: handleTabClose,
+      });
+    });
+
+    return res;
+  }, [tabIds, tabNames, tabCreatedTypes]);
+
+  return (
+    <>
+      <EuiTabbedContent
+        id="queryTabs"
+        className="queryTabs"
+        tabs={memorizedTabs}
+        selectedTab={memorizedTabs.find((tab) => tab.id === curSelectedTabId)}
+        onTabClick={(selectedTab: EuiTabbedContentTab) => handleTabClick(selectedTab)}
+        data-test-subj="eventExplorer__topLevelTabbing"
+      />
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/log_patterns/patterns_table.tsx b/public/components/event_analytics/explorer/log_patterns/patterns_table.tsx
new file mode 100644
index 0000000000..e2ad0e52bd
--- /dev/null
+++ b/public/components/event_analytics/explorer/log_patterns/patterns_table.tsx
@@ -0,0 +1,132 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiEmptyPrompt,
+  EuiIcon,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiText,
+  SortDirection,
+} from '@elastic/eui';
+import { PatternTableData } from 'common/types/explorer';
+import { round } from 'lodash';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { FILTERED_PATTERN } from '../../../../../common/constants/explorer';
+import { PPL_DOCUMENTATION_URL } from '../../../../../common/constants/shared';
+import { selectPatterns } from '../../redux/slices/patterns_slice';
+
+interface PatternsTableProps {
+  tableData: PatternTableData[];
+  onPatternSelection: any;
+  tabId: string;
+  query: any;
+  isPatternLoading: boolean;
+}
+
+export function PatternsTable(props: PatternsTableProps) {
+  const { tableData, onPatternSelection, query } = props;
+  const totalHits = tableData.reduce((p, v) => p + v.count, 0);
+
+  const tableColumns = [
+    {
+      field: 'count',
+      name: 'Count',
+      width: '6%',
+      sortable: true,
+      render: (item: string) => {
+        return <EuiText size="s">{item}</EuiText>;
+      },
+    },
+    {
+      field: 'count',
+      name: 'Ratio',
+      width: '6%',
+      sortable: (row: PatternTableData) => row.count,
+      render: (item: number) => {
+        const ratio = (item / totalHits) * 100;
+        return <EuiText size="s">{`${round(ratio, 2)}%`}</EuiText>;
+      },
+    },
+    {
+      field: 'anomalyCount',
+      name: 'Anomalies',
+      width: '6%',
+      sortable: (row: PatternTableData) => row.anomalyCount,
+      render: (item: number) => {
+        return <EuiText size="s">{item ?? 'N/A'}</EuiText>;
+      },
+    },
+    {
+      field: 'sampleLog',
+      name: 'Sample Log',
+      width: '82%',
+      sortable: true,
+      render: (item: string) => {
+        return <EuiText size="s">{item}</EuiText>;
+      },
+    },
+  ];
+
+  const sorting = {
+    sort: {
+      field: 'count',
+      direction: SortDirection.DESC,
+    },
+    enableAllColumns: true,
+  };
+
+  const pagination = {
+    pageSizeOptions: [5, 10, 15, 20],
+    initialPageSize: 5,
+  };
+
+  const message = (
+    <EuiEmptyPrompt
+      title={<h3>No patterns found.</h3>}
+      titleSize="s"
+      iconType="minusInCircle"
+      iconColor="#DDDDDD"
+      body={
+        <p>
+          Try expanding your time range or modifying your query. Learn more from our{' '}
+          <EuiLink href={PPL_DOCUMENTATION_URL}>
+            PPL documentation
+            <EuiIcon type="popout" />
+          </EuiLink>
+        </p>
+      }
+    />
+  );
+
+  const getRowProps = (item: PatternTableData) => {
+    const { pattern } = item;
+    return {
+      'data-test-subj': `row-${pattern}`,
+      className: 'customRowClass',
+      onClick: () => {
+        if (!props.isPatternLoading) {
+          onPatternSelection(pattern);
+        }
+      },
+      isSelected: pattern === query[FILTERED_PATTERN],
+    };
+  };
+
+  return (
+    <EuiInMemoryTable
+      items={tableData}
+      columns={tableColumns}
+      pagination={pagination}
+      sorting={sorting}
+      message={message}
+      rowProps={getRowProps}
+      isSelectable={true}
+      tableLayout="auto"
+      allowNeutralSort={false}
+    />
+  );
+}
diff --git a/public/components/event_analytics/explorer/no_results.tsx b/public/components/event_analytics/explorer/no_results.tsx
new file mode 100644
index 0000000000..91cc8ab622
--- /dev/null
+++ b/public/components/event_analytics/explorer/no_results.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { FormattedMessage, I18nProvider } from '@osd/i18n/react';
+import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+
+export const NoResults = () => {
+  return (
+    <I18nProvider>
+      <>
+        <EuiSpacer size="xl" />
+
+        <EuiFlexGroup justifyContent="center">
+          <EuiFlexItem grow={false} className="dscNoResults">
+            <EuiCallOut
+              title={
+                <FormattedMessage
+                  id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
+                  defaultMessage="No results match your search criteria"
+                />
+              }
+              color="warning"
+              iconType="help"
+              data-test-subj="discoverNoResults"
+            />
+            <>
+              <EuiSpacer size="xl" />
+              <EuiText>
+                <h2 data-test-subj="discoverNoResultsTimefilter">
+                  <FormattedMessage
+                    id="discover.noResults.expandYourTimeRangeTitle"
+                    defaultMessage="Expand your time range or modify your query"
+                  />
+                </h2>
+                <p>
+                  <FormattedMessage
+                    id="discover.noResults.queryMayNotMatchTitle"
+                    defaultMessage="Your query may not match anything in the current time range, or there may not be any data at all in the currently selected time range. Try change time range, query filters or choose different time fields"
+                  />
+                </p>
+              </EuiText>
+            </>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </>
+    </I18nProvider>
+  );
+};
diff --git a/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
new file mode 100644
index 0000000000..b942098514
--- /dev/null
+++ b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
@@ -0,0 +1,791 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Saved query table component Renders saved query table 1`] = `
+<SavePanel
+  curVisId="line"
+  handleNameChange={[MockFunction]}
+  handleOptionChange={[MockFunction]}
+  metricChecked={true}
+  metricMeasure="hours (h)"
+  savePanelName="Count by depature"
+  savedObjects={
+    SavedObjects {
+      "http": [MockFunction],
+    }
+  }
+  selectedOptions={
+    Array [
+      Object {
+        "label": "[Logs] Web traffic Panel",
+        "panel": Object {
+          "dateCreated": 1637781403888,
+          "dateModified": 1637781403888,
+          "id": "uRZgU30B661cwDZT-ILw",
+          "name": "[Logs] Web traffic Panel",
+        },
+      },
+      Object {
+        "label": "[Logs] Web traffic Panel 2",
+        "panel": Object {
+          "dateCreated": 1637781403888,
+          "dateModified": 1637781403888,
+          "id": "uRZgU30B661cwDZT-ILw",
+          "name": "[Logs] Web traffic Panel",
+        },
+      },
+    ]
+  }
+  setMetricLabel={[MockFunction]}
+  setMetricMeasure="hours (h)"
+  setSubType="metric"
+  showOptionList={true}
+  spanValue={false}
+>
+  <EuiTitle
+    size="xxs"
+  >
+    <h3
+      className="euiTitle euiTitle--xxsmall"
+    >
+      Custom operational dashboards/application
+    </h3>
+  </EuiTitle>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText="Search existing dashboards or applications by name"
+    labelType="label"
+  >
+    <div
+      className="euiFormRow"
+      id="random_html_id-row"
+    >
+      <div
+        className="euiFormRow__fieldWrapper"
+      >
+        <EuiComboBox
+          aria-describedby="random_html_id-help-0"
+          async={false}
+          compressed={false}
+          data-test-subj="eventExplorer__querySaveComboBox"
+          fullWidth={false}
+          id="random_html_id"
+          isClearable={true}
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          options={Array []}
+          placeholder="Select dashboards/applications"
+          selectedOptions={
+            Array [
+              Object {
+                "label": "[Logs] Web traffic Panel",
+                "panel": Object {
+                  "dateCreated": 1637781403888,
+                  "dateModified": 1637781403888,
+                  "id": "uRZgU30B661cwDZT-ILw",
+                  "name": "[Logs] Web traffic Panel",
+                },
+              },
+              Object {
+                "label": "[Logs] Web traffic Panel 2",
+                "panel": Object {
+                  "dateCreated": 1637781403888,
+                  "dateModified": 1637781403888,
+                  "id": "uRZgU30B661cwDZT-ILw",
+                  "name": "[Logs] Web traffic Panel",
+                },
+              },
+            ]
+          }
+          singleSelection={false}
+          sortMatchesBy="none"
+        >
+          <div
+            aria-describedby="random_html_id-help-0"
+            aria-expanded={false}
+            aria-haspopup="listbox"
+            className="euiComboBox"
+            data-test-subj="eventExplorer__querySaveComboBox"
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            role="combobox"
+          >
+            <EuiComboBoxInput
+              autoSizeInputRef={[Function]}
+              compressed={false}
+              fullWidth={false}
+              hasSelectedOptions={true}
+              id="random_html_id"
+              inputRef={[Function]}
+              isListOpen={false}
+              noIcon={false}
+              onChange={[Function]}
+              onClear={[Function]}
+              onClick={[Function]}
+              onCloseListClick={[Function]}
+              onFocus={[Function]}
+              onOpenListClick={[Function]}
+              onRemoveOption={[Function]}
+              placeholder="Select dashboards/applications"
+              rootId={[Function]}
+              searchValue=""
+              selectedOptions={
+                Array [
+                  Object {
+                    "label": "[Logs] Web traffic Panel",
+                    "panel": Object {
+                      "dateCreated": 1637781403888,
+                      "dateModified": 1637781403888,
+                      "id": "uRZgU30B661cwDZT-ILw",
+                      "name": "[Logs] Web traffic Panel",
+                    },
+                  },
+                  Object {
+                    "label": "[Logs] Web traffic Panel 2",
+                    "panel": Object {
+                      "dateCreated": 1637781403888,
+                      "dateModified": 1637781403888,
+                      "id": "uRZgU30B661cwDZT-ILw",
+                      "name": "[Logs] Web traffic Panel",
+                    },
+                  },
+                ]
+              }
+              singleSelection={false}
+              toggleButtonRef={[Function]}
+              updatePosition={[Function]}
+              value="[Logs] Web traffic Panel, [Logs] Web traffic Panel 2"
+            >
+              <EuiFormControlLayout
+                clear={
+                  Object {
+                    "data-test-subj": "comboBoxClearButton",
+                    "onClick": [Function],
+                  }
+                }
+                compressed={false}
+                fullWidth={false}
+                icon={
+                  Object {
+                    "aria-label": "Open list of options",
+                    "data-test-subj": "comboBoxToggleListButton",
+                    "disabled": undefined,
+                    "onClick": [Function],
+                    "ref": [Function],
+                    "side": "right",
+                    "type": "arrowDown",
+                  }
+                }
+              >
+                <div
+                  className="euiFormControlLayout"
+                >
+                  <div
+                    className="euiFormControlLayout__childrenWrapper"
+                  >
+                    <div
+                      className="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                      data-test-subj="comboBoxInput"
+                      onClick={[Function]}
+                      tabIndex={-1}
+                    >
+                      <EuiComboBoxPill
+                        asPlainText={false}
+                        color="hollow"
+                        key="[logs] web traffic panel"
+                        onClose={[Function]}
+                        option={
+                          Object {
+                            "label": "[Logs] Web traffic Panel",
+                            "panel": Object {
+                              "dateCreated": 1637781403888,
+                              "dateModified": 1637781403888,
+                              "id": "uRZgU30B661cwDZT-ILw",
+                              "name": "[Logs] Web traffic Panel",
+                            },
+                          }
+                        }
+                        panel={
+                          Object {
+                            "dateCreated": 1637781403888,
+                            "dateModified": 1637781403888,
+                            "id": "uRZgU30B661cwDZT-ILw",
+                            "name": "[Logs] Web traffic Panel",
+                          }
+                        }
+                      >
+                        <EuiI18n
+                          default="Remove {children} from selection in this group"
+                          token="euiComboBoxPill.removeSelection"
+                          values={
+                            Object {
+                              "children": "[Logs] Web traffic Panel",
+                            }
+                          }
+                        >
+                          <EuiBadge
+                            className="euiComboBoxPill"
+                            closeButtonProps={
+                              Object {
+                                "tabIndex": -1,
+                              }
+                            }
+                            color="hollow"
+                            iconOnClick={[Function]}
+                            iconOnClickAriaLabel="Remove [Logs] Web traffic Panel from selection in this group"
+                            iconSide="right"
+                            iconType="cross"
+                            panel={
+                              Object {
+                                "dateCreated": 1637781403888,
+                                "dateModified": 1637781403888,
+                                "id": "uRZgU30B661cwDZT-ILw",
+                                "name": "[Logs] Web traffic Panel",
+                              }
+                            }
+                            title="[Logs] Web traffic Panel"
+                          >
+                            <EuiInnerText>
+                              <span
+                                className="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                panel={
+                                  Object {
+                                    "dateCreated": 1637781403888,
+                                    "dateModified": 1637781403888,
+                                    "id": "uRZgU30B661cwDZT-ILw",
+                                    "name": "[Logs] Web traffic Panel",
+                                  }
+                                }
+                                title="[Logs] Web traffic Panel"
+                              >
+                                <span
+                                  className="euiBadge__content"
+                                >
+                                  <span
+                                    className="euiBadge__text"
+                                  >
+                                    [Logs] Web traffic Panel
+                                  </span>
+                                  <button
+                                    aria-label="Remove [Logs] Web traffic Panel from selection in this group"
+                                    className="euiBadge__iconButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    title="Remove [Logs] Web traffic Panel from selection in this group"
+                                    type="button"
+                                  >
+                                    <EuiIcon
+                                      className="euiBadge__icon"
+                                      color="inherit"
+                                      size="s"
+                                      tabIndex={-1}
+                                      type="cross"
+                                    >
+                                      <EuiIconEmpty
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                        focusable="false"
+                                        role="img"
+                                        style={null}
+                                        tabIndex={-1}
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                          focusable="false"
+                                          height={16}
+                                          role="img"
+                                          style={null}
+                                          tabIndex={-1}
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        />
+                                      </EuiIconEmpty>
+                                    </EuiIcon>
+                                  </button>
+                                </span>
+                              </span>
+                            </EuiInnerText>
+                          </EuiBadge>
+                        </EuiI18n>
+                      </EuiComboBoxPill>
+                      <EuiComboBoxPill
+                        asPlainText={false}
+                        color="hollow"
+                        key="[logs] web traffic panel 2"
+                        onClose={[Function]}
+                        option={
+                          Object {
+                            "label": "[Logs] Web traffic Panel 2",
+                            "panel": Object {
+                              "dateCreated": 1637781403888,
+                              "dateModified": 1637781403888,
+                              "id": "uRZgU30B661cwDZT-ILw",
+                              "name": "[Logs] Web traffic Panel",
+                            },
+                          }
+                        }
+                        panel={
+                          Object {
+                            "dateCreated": 1637781403888,
+                            "dateModified": 1637781403888,
+                            "id": "uRZgU30B661cwDZT-ILw",
+                            "name": "[Logs] Web traffic Panel",
+                          }
+                        }
+                      >
+                        <EuiI18n
+                          default="Remove {children} from selection in this group"
+                          token="euiComboBoxPill.removeSelection"
+                          values={
+                            Object {
+                              "children": "[Logs] Web traffic Panel 2",
+                            }
+                          }
+                        >
+                          <EuiBadge
+                            className="euiComboBoxPill"
+                            closeButtonProps={
+                              Object {
+                                "tabIndex": -1,
+                              }
+                            }
+                            color="hollow"
+                            iconOnClick={[Function]}
+                            iconOnClickAriaLabel="Remove [Logs] Web traffic Panel 2 from selection in this group"
+                            iconSide="right"
+                            iconType="cross"
+                            panel={
+                              Object {
+                                "dateCreated": 1637781403888,
+                                "dateModified": 1637781403888,
+                                "id": "uRZgU30B661cwDZT-ILw",
+                                "name": "[Logs] Web traffic Panel",
+                              }
+                            }
+                            title="[Logs] Web traffic Panel 2"
+                          >
+                            <EuiInnerText>
+                              <span
+                                className="euiBadge euiBadge--hollow euiBadge--iconRight euiComboBoxPill"
+                                panel={
+                                  Object {
+                                    "dateCreated": 1637781403888,
+                                    "dateModified": 1637781403888,
+                                    "id": "uRZgU30B661cwDZT-ILw",
+                                    "name": "[Logs] Web traffic Panel",
+                                  }
+                                }
+                                title="[Logs] Web traffic Panel 2"
+                              >
+                                <span
+                                  className="euiBadge__content"
+                                >
+                                  <span
+                                    className="euiBadge__text"
+                                  >
+                                    [Logs] Web traffic Panel 2
+                                  </span>
+                                  <button
+                                    aria-label="Remove [Logs] Web traffic Panel 2 from selection in this group"
+                                    className="euiBadge__iconButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    title="Remove [Logs] Web traffic Panel 2 from selection in this group"
+                                    type="button"
+                                  >
+                                    <EuiIcon
+                                      className="euiBadge__icon"
+                                      color="inherit"
+                                      size="s"
+                                      tabIndex={-1}
+                                      type="cross"
+                                    >
+                                      <EuiIconEmpty
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                        focusable="false"
+                                        role="img"
+                                        style={null}
+                                        tabIndex={-1}
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                          focusable="false"
+                                          height={16}
+                                          role="img"
+                                          style={null}
+                                          tabIndex={-1}
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        />
+                                      </EuiIconEmpty>
+                                    </EuiIcon>
+                                  </button>
+                                </span>
+                              </span>
+                            </EuiInnerText>
+                          </EuiBadge>
+                        </EuiI18n>
+                      </EuiComboBoxPill>
+                      <AutosizeInput
+                        aria-controls=""
+                        className="euiComboBox__input"
+                        data-test-subj="comboBoxSearchInput"
+                        id="random_html_id"
+                        injectStyles={true}
+                        inputRef={[Function]}
+                        minWidth={1}
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        role="textbox"
+                        style={
+                          Object {
+                            "fontSize": 14,
+                          }
+                        }
+                        value=""
+                      >
+                        <div
+                          className="euiComboBox__input"
+                          style={
+                            Object {
+                              "display": "inline-block",
+                              "fontSize": 14,
+                            }
+                          }
+                        >
+                          <input
+                            aria-controls=""
+                            data-test-subj="comboBoxSearchInput"
+                            id="random_html_id"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            role="textbox"
+                            style={
+                              Object {
+                                "boxSizing": "content-box",
+                                "width": "2px",
+                              }
+                            }
+                            value=""
+                          />
+                          <div
+                            style={
+                              Object {
+                                "height": 0,
+                                "left": 0,
+                                "overflow": "scroll",
+                                "position": "absolute",
+                                "top": 0,
+                                "visibility": "hidden",
+                                "whiteSpace": "pre",
+                              }
+                            }
+                          />
+                        </div>
+                      </AutosizeInput>
+                    </div>
+                    <EuiFormControlLayoutIcons
+                      clear={
+                        Object {
+                          "data-test-subj": "comboBoxClearButton",
+                          "onClick": [Function],
+                        }
+                      }
+                      compressed={false}
+                      icon={
+                        Object {
+                          "aria-label": "Open list of options",
+                          "data-test-subj": "comboBoxToggleListButton",
+                          "disabled": undefined,
+                          "onClick": [Function],
+                          "ref": [Function],
+                          "side": "right",
+                          "type": "arrowDown",
+                        }
+                      }
+                    >
+                      <div
+                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                      >
+                        <EuiFormControlLayoutClearButton
+                          data-test-subj="comboBoxClearButton"
+                          onClick={[Function]}
+                          size="m"
+                        >
+                          <EuiI18n
+                            default="Clear input"
+                            token="euiFormControlLayoutClearButton.label"
+                          >
+                            <button
+                              aria-label="Clear input"
+                              className="euiFormControlLayoutClearButton"
+                              data-test-subj="comboBoxClearButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <EuiIcon
+                                className="euiFormControlLayoutClearButton__icon"
+                                type="cross"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </button>
+                          </EuiI18n>
+                        </EuiFormControlLayoutClearButton>
+                        <EuiFormControlLayoutCustomIcon
+                          aria-label="Open list of options"
+                          data-test-subj="comboBoxToggleListButton"
+                          iconRef={[Function]}
+                          onClick={[Function]}
+                          size="m"
+                          type="arrowDown"
+                        >
+                          <button
+                            aria-label="Open list of options"
+                            className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                            data-test-subj="comboBoxToggleListButton"
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiFormControlLayoutCustomIcon__icon"
+                              size="m"
+                              type="arrowDown"
+                            >
+                              <EuiIconEmpty
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                />
+                              </EuiIconEmpty>
+                            </EuiIcon>
+                          </button>
+                        </EuiFormControlLayoutCustomIcon>
+                      </div>
+                    </EuiFormControlLayoutIcons>
+                  </div>
+                </div>
+              </EuiFormControlLayout>
+            </EuiComboBoxInput>
+          </div>
+        </EuiComboBox>
+        <EuiFormHelpText
+          className="euiFormRow__text"
+          id="random_html_id-help-0"
+          key="Search existing dashboards or applications by name"
+        >
+          <div
+            className="euiFormHelpText euiFormRow__text"
+            id="random_html_id-help-0"
+          >
+            Search existing dashboards or applications by name
+          </div>
+        </EuiFormHelpText>
+      </div>
+    </div>
+  </EuiFormRow>
+  <EuiTitle
+    size="xxs"
+  >
+    <h3
+      className="euiTitle euiTitle--xxsmall"
+    >
+      Name
+    </h3>
+  </EuiTitle>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText="Name for your savings"
+    labelType="label"
+  >
+    <div
+      className="euiFormRow"
+      id="random_html_id-row"
+    >
+      <div
+        className="euiFormRow__fieldWrapper"
+      >
+        <EuiFieldText
+          aria-describedby="random_html_id-help-0"
+          data-test-subj="eventExplorer__querySaveName"
+          id="random_html_id"
+          isInvalid={false}
+          key="save-panel-id"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          value="Count by depature"
+        >
+          <EuiFormControlLayout
+            fullWidth={false}
+            inputId="random_html_id"
+          >
+            <div
+              className="euiFormControlLayout"
+            >
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <EuiValidatableControl
+                  isInvalid={false}
+                >
+                  <input
+                    aria-describedby="random_html_id-help-0"
+                    className="euiFieldText"
+                    data-test-subj="eventExplorer__querySaveName"
+                    id="random_html_id"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    type="text"
+                    value="Count by depature"
+                  />
+                </EuiValidatableControl>
+                <EuiFormControlLayoutIcons />
+              </div>
+            </div>
+          </EuiFormControlLayout>
+        </EuiFieldText>
+        <EuiFormHelpText
+          className="euiFormRow__text"
+          id="random_html_id-help-0"
+          key="Name for your savings"
+        >
+          <div
+            className="euiFormHelpText euiFormRow__text"
+            id="random_html_id-help-0"
+          >
+            Name for your savings
+          </div>
+        </EuiFormHelpText>
+      </div>
+    </div>
+  </EuiFormRow>
+  <EuiFormRow
+    describedByIds={Array []}
+    display="columnCompressedSwitch"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    labelType="label"
+  >
+    <div
+      className="euiFormRow euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch"
+      id="random_html_id-row"
+    >
+      <div
+        className="euiFormRow__fieldWrapper"
+      >
+        <EuiToolTip
+          content="Only Time Series visualization and a query including stats/span can be saved as Metric"
+          delay="regular"
+          id="random_html_id"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          position="top"
+        >
+          <span
+            className="euiToolTipAnchor"
+            onKeyUp={[Function]}
+            onMouseOut={[Function]}
+            onMouseOver={[Function]}
+          >
+            <EuiSwitch
+              checked={true}
+              compressed={true}
+              disabled={true}
+              label="Save as Metric"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              showLabel={true}
+            >
+              <div
+                className="euiSwitch euiSwitch--compressed"
+              >
+                <button
+                  aria-checked={true}
+                  aria-labelledby="random_html_id"
+                  className="euiSwitch__button"
+                  disabled={true}
+                  id="random_html_id"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  role="switch"
+                  type="button"
+                >
+                  <span
+                    className="euiSwitch__body"
+                  >
+                    <span
+                      className="euiSwitch__thumb"
+                    />
+                    <span
+                      className="euiSwitch__track"
+                    />
+                  </span>
+                </button>
+                <span
+                  className="euiSwitch__label"
+                  id="random_html_id"
+                  onClick={[Function]}
+                >
+                  Save as Metric
+                </span>
+              </div>
+            </EuiSwitch>
+          </span>
+        </EuiToolTip>
+      </div>
+    </div>
+  </EuiFormRow>
+</SavePanel>
+`;
diff --git a/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx b/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx
new file mode 100644
index 0000000000..a35b7b58ac
--- /dev/null
+++ b/public/components/event_analytics/explorer/save_panel/__tests__/save_panel.test.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { SavePanel } from '../save_panel';
+import { SELECTED_PANELS_OPTIONS } from '../../../../../../test/event_analytics_constants';
+import SavedObjects from '../../../../../services/saved_objects/event_analytics/saved_objects';
+import httpClientMock from '../../../../../../test/__mocks__/httpClientMock';
+
+describe('Saved query table component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders saved query table', async () => {
+    const handleNameChange = jest.fn();
+    const handleOptionChange = jest.fn();
+    const setMetricLabel = jest.fn();
+    const savedObjects = new SavedObjects(httpClientMock);
+    
+    const wrapper = mount(
+      <SavePanel
+        selectedOptions={SELECTED_PANELS_OPTIONS}
+        handleNameChange={handleNameChange}
+        handleOptionChange={handleOptionChange}
+        savedObjects={savedObjects}
+        savePanelName={'Count by depature'}
+        showOptionList={true}
+        curVisId={'line'}
+        spanValue={false}
+        setSubType={'metric'}
+        setMetricMeasure={'hours (h)'}
+        setMetricLabel={setMetricLabel} 
+        metricMeasure={'hours (h)'} 
+        metricChecked={true}        
+      />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/save_panel/index.ts b/public/components/event_analytics/explorer/save_panel/index.ts
new file mode 100644
index 0000000000..de81603f7a
--- /dev/null
+++ b/public/components/event_analytics/explorer/save_panel/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { SavePanel } from './save_panel';
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/save_panel/save_panel.tsx b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
new file mode 100644
index 0000000000..277d194ecc
--- /dev/null
+++ b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
@@ -0,0 +1,165 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  EuiTitle,
+  EuiComboBox,
+  EuiFormRow,
+  EuiSpacer,
+  EuiFieldText,
+  EuiSwitch,
+  EuiToolTip,
+  EuiSelect,
+} from '@elastic/eui';
+import { useEffect } from 'react';
+import { isEmpty, isEqual } from 'lodash';
+import SavedObjects from '../../../../services/saved_objects/event_analytics/saved_objects';
+import { UNITS_OF_MEASURE } from '../../../../../common/constants/explorer';
+
+interface ISavedPanelProps {
+  selectedOptions: any;
+  handleNameChange: any;
+  handleOptionChange: any;
+  savedObjects: SavedObjects;
+  savePanelName: string;
+  showOptionList: boolean;
+  curVisId: string;
+  spanValue: boolean;
+  setSubType: any;
+  metricMeasure: string;
+  setMetricMeasure: any;
+  setMetricLabel: any;
+  metricChecked: boolean;
+}
+
+interface CustomPanelOptions {
+  id: string;
+  name: string;
+  dateCreated: string;
+  dateModified: string;
+}
+
+export const SavePanel = ({
+  selectedOptions,
+  handleNameChange,
+  handleOptionChange,
+  savedObjects,
+  savePanelName,
+  showOptionList,
+  curVisId,
+  spanValue,
+  setSubType,
+  metricMeasure,
+  setMetricMeasure,
+  setMetricLabel,
+  metricChecked,
+}: ISavedPanelProps) => {
+  const [options, setOptions] = useState([]);
+  const [checked, setChecked] = useState(false);
+  const [measure, setMeasure] = useState('');
+  const [label, setLabel] = useState([]);
+
+  const getCustomPabnelList = async (savedObjects: SavedObjects) => {
+    const optionRes = await savedObjects
+      .fetchCustomPanels()
+      .then((res: any) => {
+        return res;
+      })
+      .catch((error: any) => console.error(error));
+    setOptions(optionRes?.panels || []);
+  };
+
+  useEffect(() => {
+    getCustomPabnelList(savedObjects);
+  }, []);
+
+  const onToggleChange = (e: { target: { checked: React.SetStateAction<boolean> } }) => {
+    setChecked(e.target.checked);
+    if (e.target.checked) {
+      setSubType("metric")
+    } else {
+      setSubType("visualization")
+    }
+  };
+
+  const onMeasureChange = (selectedMeasures: string) => {
+    setMeasure(selectedMeasures);
+    setMetricMeasure(selectedMeasures);
+  };
+
+  const onLabelChange = (selectedLabels: React.SetStateAction<never[]>) => {
+    setLabel(selectedLabels);
+    setMetricLabel(selectedLabels);
+  };
+
+  useEffect(() => {
+    if (metricChecked) {
+      setChecked(true);
+      setMeasure(metricMeasure);
+    }
+  }, [])
+  
+  return (
+    <>
+      {showOptionList && (
+        <>
+          <EuiTitle size="xxs">
+            <h3>{'Custom operational dashboards/application'}</h3>
+          </EuiTitle>
+          <EuiFormRow helpText="Search existing dashboards or applications by name">
+            <EuiComboBox
+              placeholder="Select dashboards/applications"
+              onChange={(options) => {
+                handleOptionChange(options);
+              }}
+              selectedOptions={selectedOptions}
+              options={options.map((option: CustomPanelOptions) => {
+                return {
+                  panel: option,
+                  label: option.name,
+                };
+              })}
+              isClearable={true}
+              data-test-subj="eventExplorer__querySaveComboBox"
+            />
+          </EuiFormRow>
+        </>
+      )}
+      <EuiTitle size="xxs">
+        <h3>Name</h3>
+      </EuiTitle>
+      <EuiFormRow helpText="Name for your savings">
+        <EuiFieldText
+          key={'save-panel-id'}
+          value={savePanelName}
+          isInvalid={isEmpty(savePanelName)}
+          onChange={(e) => {
+            handleNameChange(e.target.value);
+          }}
+          data-test-subj="eventExplorer__querySaveName"
+        />
+      </EuiFormRow>
+      {showOptionList && (
+        <>
+          <EuiFormRow display="columnCompressedSwitch">
+          <EuiToolTip
+          content="Only Time Series visualization and a query including stats/span can be saved as Metric" >
+            <EuiSwitch
+              showLabel={true}
+              label="Save as Metric"
+              checked={checked}
+              onChange={onToggleChange}
+              compressed
+              disabled = {!((isEqual(curVisId, 'line')) && spanValue)}
+            />
+          </EuiToolTip>
+          </EuiFormRow>        
+        </>
+      )}
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
new file mode 100644
index 0000000000..35c8c3a91d
--- /dev/null
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
@@ -0,0 +1,387 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Field component Renders a sidebar field 1`] = `
+<Field
+  field={
+    Object {
+      "name": "agent",
+      "type": "string",
+    }
+  }
+  handleOverrideTimestamp={[MockFunction]}
+  isFieldToggleButtonDisabled={false}
+  isOverridingTimestamp={false}
+  onToggleField={[MockFunction]}
+  selected={true}
+  selectedTimestamp="timestamp"
+  showTimestampOverrideButton={true}
+  showToggleButton={true}
+>
+  <EuiPopover
+    anchorPosition="rightUp"
+    button={
+      <FieldButton
+        className="shard__fieldSelectorField explorer__fieldSelectorField"
+        dataTestSubj="field-agent-showDetails"
+        fieldAction={
+          <React.Fragment>
+            <EuiToolTip
+              content="Override default pattern"
+              delay="long"
+              id="override-pattern"
+              position="top"
+            >
+              <React.Fragment>
+                <EuiButtonIcon
+                  aria-labelledby="override_pattern"
+                  className="dscSidebarItem__action"
+                  color="text"
+                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                  iconType="inputOutput"
+                  onClick={[Function]}
+                  size="s"
+                >
+                  Override
+                </EuiButtonIcon>
+              </React.Fragment>
+            </EuiToolTip>
+            <EuiToolTip
+              content="Override default timestamp"
+              delay="long"
+              id="override-timestamp"
+              position="top"
+            >
+              <React.Fragment />
+            </EuiToolTip>
+            <EuiToolTip
+              content="Remove field from table"
+              delay="long"
+              position="top"
+            >
+              <React.Fragment>
+                <EuiButtonIcon
+                  aria-label="Remove agent from table"
+                  className="dscSidebarItem__action"
+                  color="danger"
+                  data-test-subj="fieldToggle-agent"
+                  iconType="cross"
+                  onClick={[Function]}
+                />
+              </React.Fragment>
+            </EuiToolTip>
+          </React.Fragment>
+        }
+        fieldIcon={
+          <FieldIcon
+            type="string"
+          />
+        }
+        fieldName={
+          <span
+            className="dscSidebarField__name"
+            data-test-subj="field-agent"
+            title="agent"
+          >
+            agent
+          </span>
+        }
+        isActive={false}
+        onClick={[Function]}
+        size="m"
+      />
+    }
+    closePopover={[Function]}
+    display="block"
+    hasArrow={true}
+    isOpen={false}
+    ownFocus={true}
+    panelClassName="dscSidebarItem__fieldPopoverPanel"
+    panelPaddingSize="m"
+  >
+    <div
+      className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+    >
+      <div
+        className="euiPopover__anchor"
+      >
+        <FieldButton
+          className="shard__fieldSelectorField explorer__fieldSelectorField"
+          dataTestSubj="field-agent-showDetails"
+          fieldAction={
+            <React.Fragment>
+              <EuiToolTip
+                content="Override default pattern"
+                delay="long"
+                id="override-pattern"
+                position="top"
+              >
+                <React.Fragment>
+                  <EuiButtonIcon
+                    aria-labelledby="override_pattern"
+                    className="dscSidebarItem__action"
+                    color="text"
+                    data-test-subj="eventExplorer__overrideDefaultPattern"
+                    iconType="inputOutput"
+                    onClick={[Function]}
+                    size="s"
+                  >
+                    Override
+                  </EuiButtonIcon>
+                </React.Fragment>
+              </EuiToolTip>
+              <EuiToolTip
+                content="Override default timestamp"
+                delay="long"
+                id="override-timestamp"
+                position="top"
+              >
+                <React.Fragment />
+              </EuiToolTip>
+              <EuiToolTip
+                content="Remove field from table"
+                delay="long"
+                position="top"
+              >
+                <React.Fragment>
+                  <EuiButtonIcon
+                    aria-label="Remove agent from table"
+                    className="dscSidebarItem__action"
+                    color="danger"
+                    data-test-subj="fieldToggle-agent"
+                    iconType="cross"
+                    onClick={[Function]}
+                  />
+                </React.Fragment>
+              </EuiToolTip>
+            </React.Fragment>
+          }
+          fieldIcon={
+            <FieldIcon
+              type="string"
+            />
+          }
+          fieldName={
+            <span
+              className="dscSidebarField__name"
+              data-test-subj="field-agent"
+              title="agent"
+            >
+              agent
+            </span>
+          }
+          isActive={false}
+          onClick={[Function]}
+          size="m"
+        >
+          <div
+            className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+          >
+            <button
+              className="osd-resetFocusState osdFieldButton__button"
+              data-test-subj="field-agent-showDetails"
+              onClick={[Function]}
+            >
+              <span
+                className="osdFieldButton__fieldIcon"
+              >
+                <FieldIcon
+                  type="string"
+                >
+                  <EuiToken
+                    aria-label="string"
+                    className="osdFieldIcon"
+                    iconType="tokenString"
+                    size="l"
+                    title="string"
+                  >
+                    <span
+                      className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                      style={Object {}}
+                    >
+                      <EuiIcon
+                        aria-label="string"
+                        size="l"
+                        title="string"
+                        type="tokenString"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          aria-label="string"
+                          className="euiIcon euiIcon--large euiIcon-isLoading"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                          title="string"
+                        >
+                          <svg
+                            aria-hidden={true}
+                            aria-label="string"
+                            className="euiIcon euiIcon--large 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>
+                    </span>
+                  </EuiToken>
+                </FieldIcon>
+              </span>
+              <span
+                className="osdFieldButton__name"
+              >
+                <span
+                  className="dscSidebarField__name"
+                  data-test-subj="field-agent"
+                  title="agent"
+                >
+                  agent
+                </span>
+              </span>
+            </button>
+            <div
+              className="osdFieldButton__fieldAction"
+            >
+              <EuiToolTip
+                content="Override default pattern"
+                delay="long"
+                id="override-pattern"
+                position="top"
+              >
+                <span
+                  className="euiToolTipAnchor"
+                  onKeyUp={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                >
+                  <EuiButtonIcon
+                    aria-labelledby="override_pattern"
+                    className="dscSidebarItem__action"
+                    color="text"
+                    data-test-subj="eventExplorer__overrideDefaultPattern"
+                    iconType="inputOutput"
+                    onClick={[Function]}
+                    size="s"
+                  >
+                    <button
+                      aria-labelledby="override_pattern"
+                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                      data-test-subj="eventExplorer__overrideDefaultPattern"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="inputOutput"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </span>
+              </EuiToolTip>
+              <EuiToolTip
+                content="Override default timestamp"
+                delay="long"
+                id="override-timestamp"
+                position="top"
+              >
+                <span
+                  className="euiToolTipAnchor"
+                  onKeyUp={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                />
+              </EuiToolTip>
+              <EuiToolTip
+                content="Remove field from table"
+                delay="long"
+                position="top"
+              >
+                <span
+                  className="euiToolTipAnchor"
+                  onKeyUp={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                >
+                  <EuiButtonIcon
+                    aria-label="Remove agent from table"
+                    className="dscSidebarItem__action"
+                    color="danger"
+                    data-test-subj="fieldToggle-agent"
+                    iconType="cross"
+                    onClick={[Function]}
+                  >
+                    <button
+                      aria-label="Remove agent from table"
+                      className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                      data-test-subj="fieldToggle-agent"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="cross"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </span>
+              </EuiToolTip>
+            </div>
+          </div>
+        </FieldButton>
+      </div>
+    </div>
+  </EuiPopover>
+</Field>
+`;
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
new file mode 100644
index 0000000000..556467262e
--- /dev/null
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -0,0 +1,10045 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Siderbar component Renders empty sidebar component 1`] = `
+<Sidebar
+  explorerData={Object {}}
+  explorerFields={
+    Object {
+      "availableFields": Array [],
+      "queriedFields": Array [],
+      "selectedFields": Array [],
+      "unselectedFields": Array [],
+    }
+  }
+  handleAddField={[MockFunction]}
+  handleOverrideTimestamp={[MockFunction]}
+  handleRemoveField={[MockFunction]}
+  isFieldToggleButtonDisabled={false}
+  isOverridingTimestamp={false}
+  selectedTimestamp="timestamp"
+>
+  <I18nProvider>
+    <IntlProvider
+      defaultLocale="en"
+      formats={
+        Object {
+          "date": Object {
+            "full": Object {
+              "day": "numeric",
+              "month": "long",
+              "weekday": "long",
+              "year": "numeric",
+            },
+            "long": Object {
+              "day": "numeric",
+              "month": "long",
+              "year": "numeric",
+            },
+            "medium": Object {
+              "day": "numeric",
+              "month": "short",
+              "year": "numeric",
+            },
+            "short": Object {
+              "day": "numeric",
+              "month": "numeric",
+              "year": "2-digit",
+            },
+          },
+          "number": Object {
+            "currency": Object {
+              "style": "currency",
+            },
+            "percent": Object {
+              "style": "percent",
+            },
+          },
+          "relative": Object {
+            "days": Object {
+              "units": "day",
+            },
+            "hours": Object {
+              "units": "hour",
+            },
+            "minutes": Object {
+              "units": "minute",
+            },
+            "months": Object {
+              "units": "month",
+            },
+            "seconds": Object {
+              "units": "second",
+            },
+            "years": Object {
+              "units": "year",
+            },
+          },
+          "time": Object {
+            "full": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "long": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "medium": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+            },
+            "short": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+            },
+          },
+        }
+      }
+      locale="en"
+      messages={Object {}}
+      textComponent={Symbol(react.fragment)}
+    >
+      <PseudoLocaleWrapper>
+        <section
+          className="sidebar-list"
+        >
+          <div
+            className="dscSidebar__item"
+          >
+            <EuiFieldSearch
+              compressed={true}
+              data-test-subj="eventExplorer__sidebarSearch"
+              fullWidth={true}
+              incremental={false}
+              isClearable={true}
+              isLoading={false}
+              onChange={[Function]}
+              placeholder="Search field names"
+              value=""
+            >
+              <EuiFormControlLayout
+                compressed={true}
+                fullWidth={true}
+                icon="search"
+                isLoading={false}
+              >
+                <div
+                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                >
+                  <div
+                    className="euiFormControlLayout__childrenWrapper"
+                  >
+                    <EuiValidatableControl>
+                      <input
+                        className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
+                        data-test-subj="eventExplorer__sidebarSearch"
+                        onChange={[Function]}
+                        onKeyUp={[Function]}
+                        placeholder="Search field names"
+                        type="search"
+                        value=""
+                      />
+                    </EuiValidatableControl>
+                    <EuiFormControlLayoutIcons
+                      compressed={true}
+                      icon="search"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayoutIcons"
+                      >
+                        <EuiFormControlLayoutCustomIcon
+                          size="s"
+                          type="search"
+                        >
+                          <span
+                            className="euiFormControlLayoutCustomIcon"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiFormControlLayoutCustomIcon__icon"
+                              size="s"
+                              type="search"
+                            >
+                              <EuiIconEmpty
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                />
+                              </EuiIconEmpty>
+                            </EuiIcon>
+                          </span>
+                        </EuiFormControlLayoutCustomIcon>
+                      </div>
+                    </EuiFormControlLayoutIcons>
+                  </div>
+                </div>
+              </EuiFormControlLayout>
+            </EuiFieldSearch>
+          </div>
+          <EuiSpacer
+            size="s"
+          >
+            <div
+              className="euiSpacer euiSpacer--s"
+            />
+          </EuiSpacer>
+          <div
+            className="sidebar-list"
+          />
+        </section>
+      </PseudoLocaleWrapper>
+    </IntlProvider>
+  </I18nProvider>
+</Sidebar>
+`;
+
+exports[`Siderbar component Renders sidebar component 1`] = `
+<Sidebar
+  explorerData={
+    Object {
+      "jsonData": Array [
+        Object {
+          "double_per_ip_bytes": 11606,
+          "host": "artifacts.opensearch.org",
+          "ip_count": 176,
+          "per_ip_bytes": 5803,
+          "resp_code": "404",
+          "sum_bytes": 1021420,
+        },
+        Object {
+          "double_per_ip_bytes": 10100,
+          "host": "www.opensearch.org",
+          "ip_count": 111,
+          "per_ip_bytes": 5050,
+          "resp_code": "404",
+          "sum_bytes": 560638,
+        },
+        Object {
+          "double_per_ip_bytes": 0,
+          "host": "artifacts.opensearch.org",
+          "ip_count": 94,
+          "per_ip_bytes": 0,
+          "resp_code": "503",
+          "sum_bytes": 0,
+        },
+        Object {
+          "double_per_ip_bytes": 0,
+          "host": "www.opensearch.org",
+          "ip_count": 78,
+          "per_ip_bytes": 0,
+          "resp_code": "503",
+          "sum_bytes": 0,
+        },
+        Object {
+          "double_per_ip_bytes": 11526,
+          "host": "cdn.opensearch-opensearch-opensearch.org",
+          "ip_count": 43,
+          "per_ip_bytes": 5763,
+          "resp_code": "404",
+          "sum_bytes": 247840,
+        },
+        Object {
+          "double_per_ip_bytes": 0,
+          "host": "cdn.opensearch-opensearch-opensearch.org",
+          "ip_count": 34,
+          "per_ip_bytes": 0,
+          "resp_code": "503",
+          "sum_bytes": 0,
+        },
+        Object {
+          "double_per_ip_bytes": 8882,
+          "host": "opensearch-opensearch-opensearch.org",
+          "ip_count": 13,
+          "per_ip_bytes": 4441,
+          "resp_code": "404",
+          "sum_bytes": 57735,
+        },
+        Object {
+          "double_per_ip_bytes": 0,
+          "host": "opensearch-opensearch-opensearch.org",
+          "ip_count": 6,
+          "per_ip_bytes": 0,
+          "resp_code": "503",
+          "sum_bytes": 0,
+        },
+      ],
+      "jsonDataAll": Array [
+        Object {
+          "agent": "Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1",
+          "bytes": 6219,
+          "clientip": "223.87.60.27",
+          "event": "{\\"dataset\\":\\"sample_web_logs\\"}",
+          "extension": "deb",
+          "geo": "{\\"srcdest\\":\\"IN:US\\",\\"src\\":\\"IN\\",\\"coordinates\\":{\\"lat\\":39.41042861,\\"lon\\":-88.8454325},\\"dest\\":\\"US\\"}",
+          "host": "artifacts.opensearch.org",
+          "index": "opensearch_dashboards_sample_data_logs",
+          "ip": "223.87.60.27",
+          "machine": "{\\"os\\":\\"win 8\\",\\"ram\\":8589934592}",
+          "memory": "null",
+          "message": "223.87.60.27 - - [2018-07-22T00:39:02.912Z] \\"GET /opensearch/opensearch-1.0.0.deb_1 HTTP/1.1\\" 200 6219 \\"-\\" \\"Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\\"",
+          "phpmemory": "null",
+          "referer": "http://twitter.com/success/wendy-lawrence",
+          "request": "/opensearch/opensearch-1.0.0.deb",
+          "response": "200",
+          "tags": "success",
+          "timestamp": "2021-11-14 00:39:02.912",
+          "url": "https://artifacts.opensearch.org/downloads/opensearch/opensearch-1.0.0.deb_1",
+          "utc_time": "2021-11-14 00:39:02.912",
+        },
+        Object {
+          "agent": "Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1",
+          "bytes": 6850,
+          "clientip": "130.246.123.197",
+          "event": "{\\"dataset\\":\\"sample_web_logs\\"}",
+          "extension": "",
+          "geo": "{\\"srcdest\\":\\"JP:IN\\",\\"src\\":\\"JP\\",\\"coordinates\\":{\\"lat\\":38.58338806,\\"lon\\":-86.46248778},\\"dest\\":\\"IN\\"}",
+          "host": "www.opensearch.org",
+          "index": "opensearch_dashboards_sample_data_logs",
+          "ip": "130.246.123.197",
+          "machine": "{\\"os\\":\\"win 8\\",\\"ram\\":3221225472}",
+          "memory": "null",
+          "message": "130.246.123.197 - - [2018-07-22T03:26:21.326Z] \\"GET /beats/metricbeat_1 HTTP/1.1\\" 200 6850 \\"-\\" \\"Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\\"",
+          "phpmemory": "null",
+          "referer": "http://www.opensearch-opensearch-opensearch.com/success/james-mcdivitt",
+          "request": "/beats/metricbeat",
+          "response": "200",
+          "tags": "success",
+          "timestamp": "2021-11-14 03:26:21.326",
+          "url": "https://www.opensearch.org/downloads/beats/metricbeat_1",
+          "utc_time": "2021-11-14 03:26:21.326",
+        },
+        Object {
+          "agent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24",
+          "bytes": 0,
+          "clientip": "120.49.143.213",
+          "event": "{\\"dataset\\":\\"sample_web_logs\\"}",
+          "extension": "css",
+          "geo": "{\\"srcdest\\":\\"CO:DE\\",\\"src\\":\\"CO\\",\\"coordinates\\":{\\"lat\\":36.96015,\\"lon\\":-78.18499861},\\"dest\\":\\"DE\\"}",
+          "host": "cdn.opensearch-opensearch-opensearch.org",
+          "index": "opensearch_dashboards_sample_data_logs",
+          "ip": "120.49.143.213",
+          "machine": "{\\"os\\":\\"ios\\",\\"ram\\":20401094656}",
+          "memory": "null",
+          "message": "120.49.143.213 - - [2018-07-22T03:30:25.131Z] \\"GET /styles/main.css_1 HTTP/1.1\\" 503 0 \\"-\\" \\"Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\\"",
+          "phpmemory": "null",
+          "referer": "http://twitter.com/success/konstantin-feoktistov",
+          "request": "/styles/main.css",
+          "response": "503",
+          "tags": "success",
+          "timestamp": "2021-11-14 03:30:25.131",
+          "url": "https://cdn.opensearch-opensearch-opensearch.org/styles/main.css_1",
+          "utc_time": "2021-11-14 03:30:25.131",
+        },
+      ],
+    }
+  }
+  explorerFields={
+    Object {
+      "availableFields": Array [
+        Object {
+          "name": "agent",
+          "type": "string",
+        },
+        Object {
+          "name": "bytes",
+          "type": "long",
+        },
+        Object {
+          "name": "clientip",
+          "type": "ip",
+        },
+        Object {
+          "name": "event",
+          "type": "struct",
+        },
+        Object {
+          "name": "extension",
+          "type": "string",
+        },
+        Object {
+          "name": "geo",
+          "type": "struct",
+        },
+        Object {
+          "name": "host",
+          "type": "string",
+        },
+        Object {
+          "name": "index",
+          "type": "string",
+        },
+        Object {
+          "name": "ip",
+          "type": "ip",
+        },
+        Object {
+          "name": "machine",
+          "type": "struct",
+        },
+        Object {
+          "name": "memory",
+          "type": "double",
+        },
+        Object {
+          "name": "message",
+          "type": "string",
+        },
+        Object {
+          "name": "phpmemory",
+          "type": "long",
+        },
+        Object {
+          "name": "referer",
+          "type": "string",
+        },
+        Object {
+          "name": "request",
+          "type": "string",
+        },
+        Object {
+          "name": "response",
+          "type": "string",
+        },
+        Object {
+          "name": "tags",
+          "type": "string",
+        },
+        Object {
+          "name": "timestamp",
+          "type": "timestamp",
+        },
+        Object {
+          "name": "url",
+          "type": "string",
+        },
+        Object {
+          "name": "utc_time",
+          "type": "timestamp",
+        },
+      ],
+      "queriedFields": Array [
+        Object {
+          "name": "double_per_ip_bytes",
+          "type": "long",
+        },
+        Object {
+          "name": "host",
+          "type": "text",
+        },
+        Object {
+          "name": "ip_count",
+          "type": "integer",
+        },
+        Object {
+          "name": "per_ip_bytes",
+          "type": "long",
+        },
+        Object {
+          "name": "resp_code",
+          "type": "text",
+        },
+        Object {
+          "name": "sum_bytes",
+          "type": "long",
+        },
+      ],
+      "selectedFields": Array [],
+      "unselectedFields": Array [],
+    }
+  }
+  handleAddField={[MockFunction]}
+  handleOverrideTimestamp={[MockFunction]}
+  handleRemoveField={[MockFunction]}
+  isFieldToggleButtonDisabled={false}
+  isOverridingTimestamp={false}
+  selectedTimestamp="timestamp"
+>
+  <I18nProvider>
+    <IntlProvider
+      defaultLocale="en"
+      formats={
+        Object {
+          "date": Object {
+            "full": Object {
+              "day": "numeric",
+              "month": "long",
+              "weekday": "long",
+              "year": "numeric",
+            },
+            "long": Object {
+              "day": "numeric",
+              "month": "long",
+              "year": "numeric",
+            },
+            "medium": Object {
+              "day": "numeric",
+              "month": "short",
+              "year": "numeric",
+            },
+            "short": Object {
+              "day": "numeric",
+              "month": "numeric",
+              "year": "2-digit",
+            },
+          },
+          "number": Object {
+            "currency": Object {
+              "style": "currency",
+            },
+            "percent": Object {
+              "style": "percent",
+            },
+          },
+          "relative": Object {
+            "days": Object {
+              "units": "day",
+            },
+            "hours": Object {
+              "units": "hour",
+            },
+            "minutes": Object {
+              "units": "minute",
+            },
+            "months": Object {
+              "units": "month",
+            },
+            "seconds": Object {
+              "units": "second",
+            },
+            "years": Object {
+              "units": "year",
+            },
+          },
+          "time": Object {
+            "full": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "long": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "medium": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+            },
+            "short": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+            },
+          },
+        }
+      }
+      locale="en"
+      messages={Object {}}
+      textComponent={Symbol(react.fragment)}
+    >
+      <PseudoLocaleWrapper>
+        <section
+          className="sidebar-list"
+        >
+          <div
+            className="dscSidebar__item"
+          >
+            <EuiFieldSearch
+              compressed={true}
+              data-test-subj="eventExplorer__sidebarSearch"
+              fullWidth={true}
+              incremental={false}
+              isClearable={true}
+              isLoading={false}
+              onChange={[Function]}
+              placeholder="Search field names"
+              value=""
+            >
+              <EuiFormControlLayout
+                compressed={true}
+                fullWidth={true}
+                icon="search"
+                isLoading={false}
+              >
+                <div
+                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                >
+                  <div
+                    className="euiFormControlLayout__childrenWrapper"
+                  >
+                    <EuiValidatableControl>
+                      <input
+                        className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
+                        data-test-subj="eventExplorer__sidebarSearch"
+                        onChange={[Function]}
+                        onKeyUp={[Function]}
+                        placeholder="Search field names"
+                        type="search"
+                        value=""
+                      />
+                    </EuiValidatableControl>
+                    <EuiFormControlLayoutIcons
+                      compressed={true}
+                      icon="search"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayoutIcons"
+                      >
+                        <EuiFormControlLayoutCustomIcon
+                          size="s"
+                          type="search"
+                        >
+                          <span
+                            className="euiFormControlLayoutCustomIcon"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiFormControlLayoutCustomIcon__icon"
+                              size="s"
+                              type="search"
+                            >
+                              <EuiIconSearch
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                  />
+                                </svg>
+                              </EuiIconSearch>
+                            </EuiIcon>
+                          </span>
+                        </EuiFormControlLayoutCustomIcon>
+                      </div>
+                    </EuiFormControlLayoutIcons>
+                  </div>
+                </div>
+              </EuiFormControlLayout>
+            </EuiFieldSearch>
+          </div>
+          <EuiSpacer
+            size="s"
+          >
+            <div
+              className="euiSpacer euiSpacer--s"
+            />
+          </EuiSpacer>
+          <div
+            className="sidebar-list"
+          >
+            <EuiAccordion
+              arrowDisplay="left"
+              buttonContent={
+                <EuiTitle
+                  size="xxxs"
+                >
+                  <span>
+                    Query fields
+                  </span>
+                </EuiTitle>
+              }
+              id="fieldSelector__queriedFields"
+              initialIsOpen={true}
+              isLoading={false}
+              isLoadingMessage={false}
+              paddingSize="xs"
+            >
+              <div
+                className="euiAccordion euiAccordion-isOpen"
+              >
+                <div
+                  className="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="fieldSelector__queriedFields"
+                    aria-expanded={true}
+                    className="euiAccordion__button"
+                    id="random_html_id"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="euiAccordion__iconWrapper"
+                    >
+                      <EuiIcon
+                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </span>
+                    <span
+                      className="euiIEFlexWrapFix"
+                    >
+                      <EuiTitle
+                        size="xxxs"
+                      >
+                        <span
+                          className="euiTitle euiTitle--xxxsmall"
+                        >
+                          Query fields
+                        </span>
+                      </EuiTitle>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  className="euiAccordion__childWrapper"
+                  id="fieldSelector__queriedFields"
+                  role="region"
+                  tabIndex={-1}
+                >
+                  <EuiResizeObserver
+                    onResize={[Function]}
+                  >
+                    <div>
+                      <div
+                        className="euiAccordion__padding--xs"
+                      >
+                        <ul
+                          aria-labelledby="queried_fields"
+                          className="dscSidebarList dscFieldList--selected"
+                          data-test-subj="fieldList-selected"
+                        >
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="double_per_ip_bytes"
+                            key="fielddouble_per_ip_bytes"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "double_per_ip_bytes",
+                                  "type": "long",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={true}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={true}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={false}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-double_per_ip_bytes-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Remove double_per_ip_bytes from table"
+                                              className="dscSidebarItem__action"
+                                              color="ghost"
+                                              data-test-subj="fieldToggle-double_per_ip_bytes"
+                                              display="fill"
+                                              iconType="cross"
+                                              isDisabled={true}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="long"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-double_per_ip_bytes"
+                                        title="double_per_ip_bytes"
+                                      >
+                                        double_per_ip_bytes
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-double_per_ip_bytes-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Remove double_per_ip_bytes from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-double_per_ip_bytes"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="long"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-double_per_ip_bytes"
+                                          title="double_per_ip_bytes"
+                                        >
+                                          double_per_ip_bytes
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-double_per_ip_bytes-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="long"
+                                            >
+                                              <EuiToken
+                                                aria-label="long"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="long"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="long"
+                                                    size="l"
+                                                    title="long"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="long"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="long"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="long"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-double_per_ip_bytes"
+                                              title="double_per_ip_bytes"
+                                            >
+                                              double_per_ip_bytes
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Remove double_per_ip_bytes from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-double_per_ip_bytes"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              >
+                                                <button
+                                                  aria-label="Remove double_per_ip_bytes from table"
+                                                  className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--fill euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-double_per_ip_bytes"
+                                                  disabled={true}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="cross"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="host"
+                            key="fieldhost"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "host",
+                                  "type": "text",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={true}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={true}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={false}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-host-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Remove host from table"
+                                              className="dscSidebarItem__action"
+                                              color="ghost"
+                                              data-test-subj="fieldToggle-host"
+                                              display="fill"
+                                              iconType="cross"
+                                              isDisabled={true}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="text"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-host"
+                                        title="host"
+                                      >
+                                        host
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-host-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Remove host from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-host"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="text"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-host"
+                                          title="host"
+                                        >
+                                          host
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-host-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="text"
+                                            >
+                                              <EuiToken
+                                                aria-label="text"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="text"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="text"
+                                                    size="l"
+                                                    title="text"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="text"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="text"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="text"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-host"
+                                              title="host"
+                                            >
+                                              host
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Remove host from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-host"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              >
+                                                <button
+                                                  aria-label="Remove host from table"
+                                                  className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--fill euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-host"
+                                                  disabled={true}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="cross"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="ip_count"
+                            key="fieldip_count"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "ip_count",
+                                  "type": "integer",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={true}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={true}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={false}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-ip_count-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Remove ip_count from table"
+                                              className="dscSidebarItem__action"
+                                              color="ghost"
+                                              data-test-subj="fieldToggle-ip_count"
+                                              display="fill"
+                                              iconType="cross"
+                                              isDisabled={true}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="integer"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-ip_count"
+                                        title="ip_count"
+                                      >
+                                        ip_count
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-ip_count-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Remove ip_count from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-ip_count"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="integer"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-ip_count"
+                                          title="ip_count"
+                                        >
+                                          ip_count
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-ip_count-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="integer"
+                                            >
+                                              <EuiToken
+                                                aria-label="integer"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="integer"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="integer"
+                                                    size="l"
+                                                    title="integer"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="integer"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="integer"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="integer"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-ip_count"
+                                              title="ip_count"
+                                            >
+                                              ip_count
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Remove ip_count from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-ip_count"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              >
+                                                <button
+                                                  aria-label="Remove ip_count from table"
+                                                  className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--fill euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-ip_count"
+                                                  disabled={true}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="cross"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="per_ip_bytes"
+                            key="fieldper_ip_bytes"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "per_ip_bytes",
+                                  "type": "long",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={true}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={true}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={false}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-per_ip_bytes-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Remove per_ip_bytes from table"
+                                              className="dscSidebarItem__action"
+                                              color="ghost"
+                                              data-test-subj="fieldToggle-per_ip_bytes"
+                                              display="fill"
+                                              iconType="cross"
+                                              isDisabled={true}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="long"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-per_ip_bytes"
+                                        title="per_ip_bytes"
+                                      >
+                                        per_ip_bytes
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-per_ip_bytes-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Remove per_ip_bytes from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-per_ip_bytes"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="long"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-per_ip_bytes"
+                                          title="per_ip_bytes"
+                                        >
+                                          per_ip_bytes
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-per_ip_bytes-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="long"
+                                            >
+                                              <EuiToken
+                                                aria-label="long"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="long"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="long"
+                                                    size="l"
+                                                    title="long"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="long"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="long"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="long"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-per_ip_bytes"
+                                              title="per_ip_bytes"
+                                            >
+                                              per_ip_bytes
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Remove per_ip_bytes from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-per_ip_bytes"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              >
+                                                <button
+                                                  aria-label="Remove per_ip_bytes from table"
+                                                  className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--fill euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-per_ip_bytes"
+                                                  disabled={true}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="cross"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="resp_code"
+                            key="fieldresp_code"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "resp_code",
+                                  "type": "text",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={true}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={true}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={false}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-resp_code-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Remove resp_code from table"
+                                              className="dscSidebarItem__action"
+                                              color="ghost"
+                                              data-test-subj="fieldToggle-resp_code"
+                                              display="fill"
+                                              iconType="cross"
+                                              isDisabled={true}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="text"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-resp_code"
+                                        title="resp_code"
+                                      >
+                                        resp_code
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-resp_code-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Remove resp_code from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-resp_code"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="text"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-resp_code"
+                                          title="resp_code"
+                                        >
+                                          resp_code
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-resp_code-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="text"
+                                            >
+                                              <EuiToken
+                                                aria-label="text"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="text"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="text"
+                                                    size="l"
+                                                    title="text"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="text"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="text"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="text"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-resp_code"
+                                              title="resp_code"
+                                            >
+                                              resp_code
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Remove resp_code from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-resp_code"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              >
+                                                <button
+                                                  aria-label="Remove resp_code from table"
+                                                  className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--fill euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-resp_code"
+                                                  disabled={true}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="cross"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="sum_bytes"
+                            key="fieldsum_bytes"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "sum_bytes",
+                                  "type": "long",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={true}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={true}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={false}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-sum_bytes-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Remove sum_bytes from table"
+                                              className="dscSidebarItem__action"
+                                              color="ghost"
+                                              data-test-subj="fieldToggle-sum_bytes"
+                                              display="fill"
+                                              iconType="cross"
+                                              isDisabled={true}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="long"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-sum_bytes"
+                                        title="sum_bytes"
+                                      >
+                                        sum_bytes
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-sum_bytes-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Remove sum_bytes from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-sum_bytes"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="long"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-sum_bytes"
+                                          title="sum_bytes"
+                                        >
+                                          sum_bytes
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-sum_bytes-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="long"
+                                            >
+                                              <EuiToken
+                                                aria-label="long"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="long"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="long"
+                                                    size="l"
+                                                    title="long"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="long"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="long"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="long"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-sum_bytes"
+                                              title="sum_bytes"
+                                            >
+                                              sum_bytes
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Toggle button is disabled on query contains 'stats' or no hits for the search"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Remove sum_bytes from table"
+                                                className="dscSidebarItem__action"
+                                                color="ghost"
+                                                data-test-subj="fieldToggle-sum_bytes"
+                                                display="fill"
+                                                iconType="cross"
+                                                isDisabled={true}
+                                              >
+                                                <button
+                                                  aria-label="Remove sum_bytes from table"
+                                                  className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--fill euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-sum_bytes"
+                                                  disabled={true}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="cross"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </EuiResizeObserver>
+                </div>
+              </div>
+            </EuiAccordion>
+            <EuiSpacer
+              size="s"
+            >
+              <div
+                className="euiSpacer euiSpacer--s"
+              />
+            </EuiSpacer>
+            <EuiAccordion
+              arrowDisplay="left"
+              buttonContent={
+                <EuiTitle
+                  size="xxxs"
+                >
+                  <span>
+                    Selected Fields
+                  </span>
+                </EuiTitle>
+              }
+              id="fieldSelector__selectedFields"
+              initialIsOpen={true}
+              isLoading={false}
+              isLoadingMessage={false}
+              paddingSize="xs"
+            >
+              <div
+                className="euiAccordion euiAccordion-isOpen"
+              >
+                <div
+                  className="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="fieldSelector__selectedFields"
+                    aria-expanded={true}
+                    className="euiAccordion__button"
+                    id="random_html_id"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="euiAccordion__iconWrapper"
+                    >
+                      <EuiIcon
+                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </span>
+                    <span
+                      className="euiIEFlexWrapFix"
+                    >
+                      <EuiTitle
+                        size="xxxs"
+                      >
+                        <span
+                          className="euiTitle euiTitle--xxxsmall"
+                        >
+                          Selected Fields
+                        </span>
+                      </EuiTitle>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  className="euiAccordion__childWrapper"
+                  id="fieldSelector__selectedFields"
+                  role="region"
+                  tabIndex={-1}
+                >
+                  <EuiResizeObserver
+                    onResize={[Function]}
+                  >
+                    <div>
+                      <div
+                        className="euiAccordion__padding--xs"
+                      >
+                        <ul
+                          aria-labelledby="selected_fields"
+                          className="dscSidebarList dscFieldList--selected"
+                          data-test-subj="fieldList-selected"
+                        />
+                      </div>
+                    </div>
+                  </EuiResizeObserver>
+                </div>
+              </div>
+            </EuiAccordion>
+            <EuiSpacer
+              size="s"
+            >
+              <div
+                className="euiSpacer euiSpacer--s"
+              />
+            </EuiSpacer>
+            <EuiAccordion
+              arrowDisplay="left"
+              buttonContent={
+                <EuiTitle
+                  size="xxxs"
+                >
+                  <span>
+                    Available Fields
+                  </span>
+                </EuiTitle>
+              }
+              id="fieldSelector__availableFields"
+              initialIsOpen={true}
+              isLoading={false}
+              isLoadingMessage={false}
+              paddingSize="xs"
+            >
+              <div
+                className="euiAccordion euiAccordion-isOpen"
+              >
+                <div
+                  className="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="fieldSelector__availableFields"
+                    aria-expanded={true}
+                    className="euiAccordion__button"
+                    id="random_html_id"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="euiAccordion__iconWrapper"
+                    >
+                      <EuiIcon
+                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </span>
+                    <span
+                      className="euiIEFlexWrapFix"
+                    >
+                      <EuiTitle
+                        size="xxxs"
+                      >
+                        <span
+                          className="euiTitle euiTitle--xxxsmall"
+                        >
+                          Available Fields
+                        </span>
+                      </EuiTitle>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  aria-labelledby="random_html_id"
+                  className="euiAccordion__childWrapper"
+                  id="fieldSelector__availableFields"
+                  role="region"
+                  tabIndex={-1}
+                >
+                  <EuiResizeObserver
+                    onResize={[Function]}
+                  >
+                    <div>
+                      <div
+                        className="euiAccordion__padding--xs"
+                      >
+                        <ul
+                          aria-labelledby="available_fields"
+                          className="dscFieldList dscFieldList--unpopular hidden-sm hidden-xs"
+                          data-test-subj="fieldList-unpopular"
+                        >
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="agent"
+                            key="fieldagent"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "agent",
+                                  "type": "string",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-agent-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-labelledby="override_pattern"
+                                              className="dscSidebarItem__action"
+                                              color="text"
+                                              data-test-subj="eventExplorer__overrideDefaultPattern"
+                                              iconType="inputOutput"
+                                              onClick={[Function]}
+                                              size="s"
+                                            >
+                                              Override
+                                            </EuiButtonIcon>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add agent to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-agent"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="string"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-agent"
+                                        title="agent"
+                                      >
+                                        agent
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-agent-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                Override
+                                              </EuiButtonIcon>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add agent to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-agent"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="string"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-agent"
+                                          title="agent"
+                                        >
+                                          agent
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-agent-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="string"
+                                            >
+                                              <EuiToken
+                                                aria-label="string"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="string"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="string"
+                                                    size="l"
+                                                    title="string"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="string"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="string"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="string"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-agent"
+                                              title="agent"
+                                            >
+                                              agent
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                <button
+                                                  aria-labelledby="override_pattern"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                                                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="inputOutput"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add agent to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-agent"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add agent to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-agent"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="bytes"
+                            key="fieldbytes"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "bytes",
+                                  "type": "long",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-bytes-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add bytes to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-bytes"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="long"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-bytes"
+                                        title="bytes"
+                                      >
+                                        bytes
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-bytes-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add bytes to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-bytes"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="long"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-bytes"
+                                          title="bytes"
+                                        >
+                                          bytes
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-bytes-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="long"
+                                            >
+                                              <EuiToken
+                                                aria-label="long"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="long"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="long"
+                                                    size="l"
+                                                    title="long"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="long"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="long"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="long"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-bytes"
+                                              title="bytes"
+                                            >
+                                              bytes
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add bytes to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-bytes"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add bytes to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-bytes"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="clientip"
+                            key="fieldclientip"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "clientip",
+                                  "type": "ip",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-clientip-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add clientip to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-clientip"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="ip"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-clientip"
+                                        title="clientip"
+                                      >
+                                        clientip
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-clientip-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add clientip to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-clientip"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="ip"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-clientip"
+                                          title="clientip"
+                                        >
+                                          clientip
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-clientip-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="ip"
+                                            >
+                                              <EuiToken
+                                                aria-label="ip"
+                                                className="osdFieldIcon"
+                                                iconType="tokenIP"
+                                                size="l"
+                                                title="ip"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="ip"
+                                                    size="l"
+                                                    title="ip"
+                                                    type="tokenIP"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="ip"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="ip"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="ip"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-clientip"
+                                              title="clientip"
+                                            >
+                                              clientip
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add clientip to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-clientip"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add clientip to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-clientip"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="event"
+                            key="fieldevent"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "event",
+                                  "type": "struct",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-event-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add event to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-event"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="struct"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-event"
+                                        title="event"
+                                      >
+                                        event
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-event-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add event to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-event"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="struct"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-event"
+                                          title="event"
+                                        >
+                                          event
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-event-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="struct"
+                                            >
+                                              <EuiToken
+                                                aria-label="struct"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="struct"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="struct"
+                                                    size="l"
+                                                    title="struct"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="struct"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="struct"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="struct"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-event"
+                                              title="event"
+                                            >
+                                              event
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add event to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-event"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add event to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-event"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="extension"
+                            key="fieldextension"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "extension",
+                                  "type": "string",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-extension-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-labelledby="override_pattern"
+                                              className="dscSidebarItem__action"
+                                              color="text"
+                                              data-test-subj="eventExplorer__overrideDefaultPattern"
+                                              iconType="inputOutput"
+                                              onClick={[Function]}
+                                              size="s"
+                                            >
+                                              Override
+                                            </EuiButtonIcon>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add extension to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-extension"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="string"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-extension"
+                                        title="extension"
+                                      >
+                                        extension
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-extension-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                Override
+                                              </EuiButtonIcon>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add extension to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-extension"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="string"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-extension"
+                                          title="extension"
+                                        >
+                                          extension
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-extension-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="string"
+                                            >
+                                              <EuiToken
+                                                aria-label="string"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="string"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="string"
+                                                    size="l"
+                                                    title="string"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="string"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="string"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="string"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-extension"
+                                              title="extension"
+                                            >
+                                              extension
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                <button
+                                                  aria-labelledby="override_pattern"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                                                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="inputOutput"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add extension to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-extension"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add extension to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-extension"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="geo"
+                            key="fieldgeo"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "geo",
+                                  "type": "struct",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-geo-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add geo to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-geo"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="struct"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-geo"
+                                        title="geo"
+                                      >
+                                        geo
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-geo-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add geo to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-geo"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="struct"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-geo"
+                                          title="geo"
+                                        >
+                                          geo
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-geo-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="struct"
+                                            >
+                                              <EuiToken
+                                                aria-label="struct"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="struct"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="struct"
+                                                    size="l"
+                                                    title="struct"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="struct"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="struct"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="struct"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-geo"
+                                              title="geo"
+                                            >
+                                              geo
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add geo to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-geo"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add geo to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-geo"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="host"
+                            key="fieldhost"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "host",
+                                  "type": "string",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-host-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-labelledby="override_pattern"
+                                              className="dscSidebarItem__action"
+                                              color="text"
+                                              data-test-subj="eventExplorer__overrideDefaultPattern"
+                                              iconType="inputOutput"
+                                              onClick={[Function]}
+                                              size="s"
+                                            >
+                                              Override
+                                            </EuiButtonIcon>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add host to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-host"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="string"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-host"
+                                        title="host"
+                                      >
+                                        host
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-host-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                Override
+                                              </EuiButtonIcon>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add host to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-host"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="string"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-host"
+                                          title="host"
+                                        >
+                                          host
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-host-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="string"
+                                            >
+                                              <EuiToken
+                                                aria-label="string"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="string"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="string"
+                                                    size="l"
+                                                    title="string"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="string"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="string"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="string"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-host"
+                                              title="host"
+                                            >
+                                              host
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                <button
+                                                  aria-labelledby="override_pattern"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                                                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="inputOutput"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add host to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-host"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add host to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-host"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="index"
+                            key="fieldindex"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "index",
+                                  "type": "string",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-index-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-labelledby="override_pattern"
+                                              className="dscSidebarItem__action"
+                                              color="text"
+                                              data-test-subj="eventExplorer__overrideDefaultPattern"
+                                              iconType="inputOutput"
+                                              onClick={[Function]}
+                                              size="s"
+                                            >
+                                              Override
+                                            </EuiButtonIcon>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add index to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-index"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="string"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-index"
+                                        title="index"
+                                      >
+                                        index
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-index-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                Override
+                                              </EuiButtonIcon>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add index to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-index"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="string"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-index"
+                                          title="index"
+                                        >
+                                          index
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-index-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="string"
+                                            >
+                                              <EuiToken
+                                                aria-label="string"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="string"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="string"
+                                                    size="l"
+                                                    title="string"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="string"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="string"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="string"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-index"
+                                              title="index"
+                                            >
+                                              index
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                <button
+                                                  aria-labelledby="override_pattern"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                                                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="inputOutput"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add index to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-index"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add index to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-index"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="ip"
+                            key="fieldip"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "ip",
+                                  "type": "ip",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-ip-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add ip to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-ip"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="ip"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-ip"
+                                        title="ip"
+                                      >
+                                        ip
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-ip-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add ip to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-ip"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="ip"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-ip"
+                                          title="ip"
+                                        >
+                                          ip
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-ip-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="ip"
+                                            >
+                                              <EuiToken
+                                                aria-label="ip"
+                                                className="osdFieldIcon"
+                                                iconType="tokenIP"
+                                                size="l"
+                                                title="ip"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="ip"
+                                                    size="l"
+                                                    title="ip"
+                                                    type="tokenIP"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="ip"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="ip"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="ip"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-ip"
+                                              title="ip"
+                                            >
+                                              ip
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add ip to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-ip"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add ip to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-ip"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="machine"
+                            key="fieldmachine"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "machine",
+                                  "type": "struct",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-machine-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add machine to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-machine"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="struct"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-machine"
+                                        title="machine"
+                                      >
+                                        machine
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-machine-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add machine to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-machine"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="struct"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-machine"
+                                          title="machine"
+                                        >
+                                          machine
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-machine-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="struct"
+                                            >
+                                              <EuiToken
+                                                aria-label="struct"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="struct"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="struct"
+                                                    size="l"
+                                                    title="struct"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="struct"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="struct"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="struct"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-machine"
+                                              title="machine"
+                                            >
+                                              machine
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add machine to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-machine"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add machine to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-machine"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="memory"
+                            key="fieldmemory"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "memory",
+                                  "type": "double",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-memory-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add memory to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-memory"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="double"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-memory"
+                                        title="memory"
+                                      >
+                                        memory
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-memory-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add memory to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-memory"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="double"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-memory"
+                                          title="memory"
+                                        >
+                                          memory
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-memory-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="double"
+                                            >
+                                              <EuiToken
+                                                aria-label="double"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="double"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="double"
+                                                    size="l"
+                                                    title="double"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="double"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="double"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="double"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-memory"
+                                              title="memory"
+                                            >
+                                              memory
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add memory to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-memory"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add memory to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-memory"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="message"
+                            key="fieldmessage"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "message",
+                                  "type": "string",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-message-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-labelledby="override_pattern"
+                                              className="dscSidebarItem__action"
+                                              color="text"
+                                              data-test-subj="eventExplorer__overrideDefaultPattern"
+                                              iconType="inputOutput"
+                                              onClick={[Function]}
+                                              size="s"
+                                            >
+                                              Override
+                                            </EuiButtonIcon>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add message to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-message"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="string"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-message"
+                                        title="message"
+                                      >
+                                        message
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-message-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                Override
+                                              </EuiButtonIcon>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add message to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-message"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="string"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-message"
+                                          title="message"
+                                        >
+                                          message
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-message-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="string"
+                                            >
+                                              <EuiToken
+                                                aria-label="string"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="string"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="string"
+                                                    size="l"
+                                                    title="string"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="string"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="string"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="string"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-message"
+                                              title="message"
+                                            >
+                                              message
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                <button
+                                                  aria-labelledby="override_pattern"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                                                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="inputOutput"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add message to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-message"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add message to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-message"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="phpmemory"
+                            key="fieldphpmemory"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "phpmemory",
+                                  "type": "long",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-phpmemory-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add phpmemory to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-phpmemory"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="long"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-phpmemory"
+                                        title="phpmemory"
+                                      >
+                                        phpmemory
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-phpmemory-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add phpmemory to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-phpmemory"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="long"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-phpmemory"
+                                          title="phpmemory"
+                                        >
+                                          phpmemory
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-phpmemory-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="long"
+                                            >
+                                              <EuiToken
+                                                aria-label="long"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="long"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="long"
+                                                    size="l"
+                                                    title="long"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="long"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="long"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="long"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-phpmemory"
+                                              title="phpmemory"
+                                            >
+                                              phpmemory
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add phpmemory to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-phpmemory"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add phpmemory to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-phpmemory"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="referer"
+                            key="fieldreferer"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "referer",
+                                  "type": "string",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-referer-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-labelledby="override_pattern"
+                                              className="dscSidebarItem__action"
+                                              color="text"
+                                              data-test-subj="eventExplorer__overrideDefaultPattern"
+                                              iconType="inputOutput"
+                                              onClick={[Function]}
+                                              size="s"
+                                            >
+                                              Override
+                                            </EuiButtonIcon>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add referer to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-referer"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="string"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-referer"
+                                        title="referer"
+                                      >
+                                        referer
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-referer-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                Override
+                                              </EuiButtonIcon>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add referer to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-referer"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="string"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-referer"
+                                          title="referer"
+                                        >
+                                          referer
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-referer-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="string"
+                                            >
+                                              <EuiToken
+                                                aria-label="string"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="string"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="string"
+                                                    size="l"
+                                                    title="string"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="string"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="string"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="string"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-referer"
+                                              title="referer"
+                                            >
+                                              referer
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                <button
+                                                  aria-labelledby="override_pattern"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                                                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="inputOutput"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add referer to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-referer"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add referer to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-referer"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="request"
+                            key="fieldrequest"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "request",
+                                  "type": "string",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-request-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-labelledby="override_pattern"
+                                              className="dscSidebarItem__action"
+                                              color="text"
+                                              data-test-subj="eventExplorer__overrideDefaultPattern"
+                                              iconType="inputOutput"
+                                              onClick={[Function]}
+                                              size="s"
+                                            >
+                                              Override
+                                            </EuiButtonIcon>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add request to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-request"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="string"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-request"
+                                        title="request"
+                                      >
+                                        request
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-request-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                Override
+                                              </EuiButtonIcon>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add request to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-request"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="string"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-request"
+                                          title="request"
+                                        >
+                                          request
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-request-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="string"
+                                            >
+                                              <EuiToken
+                                                aria-label="string"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="string"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="string"
+                                                    size="l"
+                                                    title="string"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="string"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="string"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="string"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-request"
+                                              title="request"
+                                            >
+                                              request
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                <button
+                                                  aria-labelledby="override_pattern"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                                                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="inputOutput"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add request to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-request"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add request to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-request"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="response"
+                            key="fieldresponse"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "response",
+                                  "type": "string",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-response-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-labelledby="override_pattern"
+                                              className="dscSidebarItem__action"
+                                              color="text"
+                                              data-test-subj="eventExplorer__overrideDefaultPattern"
+                                              iconType="inputOutput"
+                                              onClick={[Function]}
+                                              size="s"
+                                            >
+                                              Override
+                                            </EuiButtonIcon>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add response to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-response"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="string"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-response"
+                                        title="response"
+                                      >
+                                        response
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-response-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                Override
+                                              </EuiButtonIcon>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add response to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-response"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="string"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-response"
+                                          title="response"
+                                        >
+                                          response
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-response-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="string"
+                                            >
+                                              <EuiToken
+                                                aria-label="string"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="string"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="string"
+                                                    size="l"
+                                                    title="string"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="string"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="string"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="string"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-response"
+                                              title="response"
+                                            >
+                                              response
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                <button
+                                                  aria-labelledby="override_pattern"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                                                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="inputOutput"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add response to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-response"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add response to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-response"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="tags"
+                            key="fieldtags"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "tags",
+                                  "type": "string",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-tags-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-labelledby="override_pattern"
+                                              className="dscSidebarItem__action"
+                                              color="text"
+                                              data-test-subj="eventExplorer__overrideDefaultPattern"
+                                              iconType="inputOutput"
+                                              onClick={[Function]}
+                                              size="s"
+                                            >
+                                              Override
+                                            </EuiButtonIcon>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add tags to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-tags"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="string"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-tags"
+                                        title="tags"
+                                      >
+                                        tags
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-tags-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                Override
+                                              </EuiButtonIcon>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add tags to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-tags"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="string"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-tags"
+                                          title="tags"
+                                        >
+                                          tags
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-tags-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="string"
+                                            >
+                                              <EuiToken
+                                                aria-label="string"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="string"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="string"
+                                                    size="l"
+                                                    title="string"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="string"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="string"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="string"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-tags"
+                                              title="tags"
+                                            >
+                                              tags
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                <button
+                                                  aria-labelledby="override_pattern"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                                                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="inputOutput"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add tags to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-tags"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add tags to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-tags"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="timestamp"
+                            key="fieldtimestamp"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "timestamp",
+                                  "type": "timestamp",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-timestamp-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiMark
+                                              data-test-subj="eventFields__default-timestamp-mark"
+                                            >
+                                              Default Timestamp
+                                            </EuiMark>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add timestamp to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-timestamp"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="date"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-timestamp"
+                                        title="timestamp"
+                                      >
+                                        timestamp
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-timestamp-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiMark
+                                                data-test-subj="eventFields__default-timestamp-mark"
+                                              >
+                                                Default Timestamp
+                                              </EuiMark>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add timestamp to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-timestamp"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="date"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-timestamp"
+                                          title="timestamp"
+                                        >
+                                          timestamp
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-timestamp-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="date"
+                                            >
+                                              <EuiToken
+                                                aria-label="date"
+                                                className="osdFieldIcon"
+                                                iconType="tokenDate"
+                                                size="l"
+                                                title="date"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis6 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="date"
+                                                    size="l"
+                                                    title="date"
+                                                    type="tokenDate"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="date"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="date"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="date"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-timestamp"
+                                              title="timestamp"
+                                            >
+                                              timestamp
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiMark
+                                                data-test-subj="eventFields__default-timestamp-mark"
+                                              >
+                                                <mark
+                                                  className="euiMark"
+                                                  data-test-subj="eventFields__default-timestamp-mark"
+                                                >
+                                                  Default Timestamp
+                                                </mark>
+                                              </EuiMark>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add timestamp to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-timestamp"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add timestamp to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-timestamp"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="url"
+                            key="fieldurl"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "url",
+                                  "type": "string",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-url-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-labelledby="override_pattern"
+                                              className="dscSidebarItem__action"
+                                              color="text"
+                                              data-test-subj="eventExplorer__overrideDefaultPattern"
+                                              iconType="inputOutput"
+                                              onClick={[Function]}
+                                              size="s"
+                                            >
+                                              Override
+                                            </EuiButtonIcon>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add url to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-url"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="string"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-url"
+                                        title="url"
+                                      >
+                                        url
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-url-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                Override
+                                              </EuiButtonIcon>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add url to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-url"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="string"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-url"
+                                          title="url"
+                                        >
+                                          url
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-url-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="string"
+                                            >
+                                              <EuiToken
+                                                aria-label="string"
+                                                className="osdFieldIcon"
+                                                iconType="tokenString"
+                                                size="l"
+                                                title="string"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="string"
+                                                    size="l"
+                                                    title="string"
+                                                    type="tokenString"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="string"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="string"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="string"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-url"
+                                              title="url"
+                                            >
+                                              url
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_pattern"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                <button
+                                                  aria-labelledby="override_pattern"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                                                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="inputOutput"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add url to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-url"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add url to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-url"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                          <li
+                            className="dscSidebar__item"
+                            data-attr-field="utc_time"
+                            key="fieldutc_time"
+                          >
+                            <Field
+                              field={
+                                Object {
+                                  "name": "utc_time",
+                                  "type": "timestamp",
+                                }
+                              }
+                              handleOverrideTimestamp={[MockFunction]}
+                              isFieldToggleButtonDisabled={false}
+                              isOverridingTimestamp={false}
+                              onToggleField={[MockFunction]}
+                              selected={false}
+                              selectedTimestamp="timestamp"
+                              showTimestampOverrideButton={true}
+                            >
+                              <EuiPopover
+                                anchorPosition="rightUp"
+                                button={
+                                  <FieldButton
+                                    className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                    dataTestSubj="field-utc_time-showDetails"
+                                    fieldAction={
+                                      <React.Fragment>
+                                        <EuiToolTip
+                                          content="Override default pattern"
+                                          delay="long"
+                                          id="override-pattern"
+                                          position="top"
+                                        >
+                                          <React.Fragment />
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Override default timestamp"
+                                          delay="long"
+                                          id="override-timestamp"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-labelledby="override_timestamp"
+                                              className="dscSidebarItem__action"
+                                              color="text"
+                                              data-test-subj="eventExplorer__overrideDefaultTimestamp"
+                                              iconType="inputOutput"
+                                              onClick={[Function]}
+                                              size="s"
+                                            >
+                                              Override
+                                            </EuiButtonIcon>
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                        <EuiToolTip
+                                          content="Add field as column"
+                                          delay="long"
+                                          position="top"
+                                        >
+                                          <React.Fragment>
+                                            <EuiButtonIcon
+                                              aria-label="Add utc_time to table"
+                                              className="dscSidebarItem__action"
+                                              color="primary"
+                                              data-test-subj="fieldToggle-utc_time"
+                                              iconType="plusInCircleFilled"
+                                              onClick={[Function]}
+                                            />
+                                          </React.Fragment>
+                                        </EuiToolTip>
+                                      </React.Fragment>
+                                    }
+                                    fieldIcon={
+                                      <FieldIcon
+                                        type="date"
+                                      />
+                                    }
+                                    fieldName={
+                                      <span
+                                        className="dscSidebarField__name"
+                                        data-test-subj="field-utc_time"
+                                        title="utc_time"
+                                      >
+                                        utc_time
+                                      </span>
+                                    }
+                                    isActive={false}
+                                    onClick={[Function]}
+                                    size="m"
+                                  />
+                                }
+                                closePopover={[Function]}
+                                display="block"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelClassName="dscSidebarItem__fieldPopoverPanel"
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorRightUp euiPopover--displayBlock"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <FieldButton
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      dataTestSubj="field-utc_time-showDetails"
+                                      fieldAction={
+                                        <React.Fragment>
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <React.Fragment />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_timestamp"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultTimestamp"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                Override
+                                              </EuiButtonIcon>
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <React.Fragment>
+                                              <EuiButtonIcon
+                                                aria-label="Add utc_time to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-utc_time"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              />
+                                            </React.Fragment>
+                                          </EuiToolTip>
+                                        </React.Fragment>
+                                      }
+                                      fieldIcon={
+                                        <FieldIcon
+                                          type="date"
+                                        />
+                                      }
+                                      fieldName={
+                                        <span
+                                          className="dscSidebarField__name"
+                                          data-test-subj="field-utc_time"
+                                          title="utc_time"
+                                        >
+                                          utc_time
+                                        </span>
+                                      }
+                                      isActive={false}
+                                      onClick={[Function]}
+                                      size="m"
+                                    >
+                                      <div
+                                        className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                      >
+                                        <button
+                                          className="osd-resetFocusState osdFieldButton__button"
+                                          data-test-subj="field-utc_time-showDetails"
+                                          onClick={[Function]}
+                                        >
+                                          <span
+                                            className="osdFieldButton__fieldIcon"
+                                          >
+                                            <FieldIcon
+                                              type="date"
+                                            >
+                                              <EuiToken
+                                                aria-label="date"
+                                                className="osdFieldIcon"
+                                                iconType="tokenDate"
+                                                size="l"
+                                                title="date"
+                                              >
+                                                <span
+                                                  className="euiToken euiToken--euiColorVis6 euiToken--square euiToken--light euiToken--large osdFieldIcon"
+                                                  style={Object {}}
+                                                >
+                                                  <EuiIcon
+                                                    aria-label="date"
+                                                    size="l"
+                                                    title="date"
+                                                    type="tokenDate"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      aria-label="date"
+                                                      className="euiIcon euiIcon--large euiIcon-isLoading"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                      title="date"
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        aria-label="date"
+                                                        className="euiIcon euiIcon--large 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>
+                                                </span>
+                                              </EuiToken>
+                                            </FieldIcon>
+                                          </span>
+                                          <span
+                                            className="osdFieldButton__name"
+                                          >
+                                            <span
+                                              className="dscSidebarField__name"
+                                              data-test-subj="field-utc_time"
+                                              title="utc_time"
+                                            >
+                                              utc_time
+                                            </span>
+                                          </span>
+                                        </button>
+                                        <div
+                                          className="osdFieldButton__fieldAction"
+                                        >
+                                          <EuiToolTip
+                                            content="Override default pattern"
+                                            delay="long"
+                                            id="override-pattern"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            />
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Override default timestamp"
+                                            delay="long"
+                                            id="override-timestamp"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-labelledby="override_timestamp"
+                                                className="dscSidebarItem__action"
+                                                color="text"
+                                                data-test-subj="eventExplorer__overrideDefaultTimestamp"
+                                                iconType="inputOutput"
+                                                onClick={[Function]}
+                                                size="s"
+                                              >
+                                                <button
+                                                  aria-labelledby="override_timestamp"
+                                                  className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small dscSidebarItem__action"
+                                                  data-test-subj="eventExplorer__overrideDefaultTimestamp"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="inputOutput"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                          <EuiToolTip
+                                            content="Add field as column"
+                                            delay="long"
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Add utc_time to table"
+                                                className="dscSidebarItem__action"
+                                                color="primary"
+                                                data-test-subj="fieldToggle-utc_time"
+                                                iconType="plusInCircleFilled"
+                                                onClick={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Add utc_time to table"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarItem__action"
+                                                  data-test-subj="fieldToggle-utc_time"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="plusInCircleFilled"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </div>
+                                      </div>
+                                    </FieldButton>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </Field>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </EuiResizeObserver>
+                </div>
+              </div>
+            </EuiAccordion>
+          </div>
+        </section>
+      </PseudoLocaleWrapper>
+    </IntlProvider>
+  </I18nProvider>
+</Sidebar>
+`;
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/field.test.tsx b/public/components/event_analytics/explorer/sidebar/__tests__/field.test.tsx
new file mode 100644
index 0000000000..4728126641
--- /dev/null
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/field.test.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Field } from '../field';
+import { AGENT_FIELD } from '../../../../../../test/event_analytics_constants';
+
+describe('Field component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders a sidebar field', async () => {
+    const onToggleField = jest.fn();
+    const handleOverrideTimestamp = jest.fn();
+    const selectedTimestamp = 'timestamp';
+    
+    const wrapper = mount(
+      <Field
+        field={AGENT_FIELD}
+        selectedTimestamp={selectedTimestamp}
+        handleOverrideTimestamp={handleOverrideTimestamp}
+        isOverridingTimestamp={false}
+        isFieldToggleButtonDisabled={false}
+        showTimestampOverrideButton={true}
+        onToggleField={onToggleField}
+        selected
+        showToggleButton={true}
+      />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/sidebar.test.tsx b/public/components/event_analytics/explorer/sidebar/__tests__/sidebar.test.tsx
new file mode 100644
index 0000000000..6e1b9c5c7d
--- /dev/null
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/sidebar.test.tsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Sidebar } from '../sidebar';
+import { 
+  SELECTED_FIELDS, 
+  AVAILABLE_FIELDS,
+  UNSELECTED_FIELDS,
+  QUERIED_FIELDS
+} from '../../../../../../common/constants/explorer';
+import { 
+  AVAILABLE_FIELDS as SIDEBAR_AVAILABLE_FIELDS,
+  QUERY_FIELDS,
+  JSON_DATA,
+  JSON_DATA_ALL
+} from '../../../../../../test/event_analytics_constants';
+
+describe('Siderbar component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders empty sidebar component', async () => {
+    const explorerFields = {
+      [SELECTED_FIELDS]: [],
+      [AVAILABLE_FIELDS]: [],
+      [UNSELECTED_FIELDS]: [],
+      [QUERIED_FIELDS]: []
+    };
+    const handleAddField = jest.fn();
+    const handleOverrideTimestamp = jest.fn();
+    const selectedTimestamp = 'timestamp';
+    const explorerData = {};
+    const handleRemoveField = jest.fn();
+    
+    const wrapper = mount(
+      <Sidebar 
+        explorerFields={explorerFields}
+        explorerData={explorerData}
+        selectedTimestamp={selectedTimestamp}
+        handleOverrideTimestamp={handleOverrideTimestamp}
+        handleAddField={handleAddField}
+        handleRemoveField={handleRemoveField}
+        isFieldToggleButtonDisabled={false}
+        isOverridingTimestamp={false}
+      />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders sidebar component', async () => {
+    const explorerFields = {
+      [SELECTED_FIELDS]: [],
+      [UNSELECTED_FIELDS]: [],
+      [AVAILABLE_FIELDS]: SIDEBAR_AVAILABLE_FIELDS,
+      [QUERIED_FIELDS]: QUERY_FIELDS
+    };
+    const handleAddField = jest.fn();
+    const handleOverrideTimestamp = jest.fn();
+    const selectedTimestamp = 'timestamp';
+    const explorerData = {
+      'jsonData': JSON_DATA,
+      'jsonDataAll': JSON_DATA_ALL
+    };
+    const handleRemoveField = jest.fn();
+    
+    const wrapper = mount(
+      <Sidebar 
+        explorerFields={explorerFields}
+        explorerData={explorerData}
+        selectedTimestamp={selectedTimestamp}
+        handleOverrideTimestamp={handleOverrideTimestamp}
+        handleAddField={handleAddField}
+        handleRemoveField={handleRemoveField}
+        isFieldToggleButtonDisabled={false}
+        isOverridingTimestamp={false}
+      />
+    );
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/sidebar/field.tsx b/public/components/event_analytics/explorer/sidebar/field.tsx
new file mode 100644
index 0000000000..2b18be672b
--- /dev/null
+++ b/public/components/event_analytics/explorer/sidebar/field.tsx
@@ -0,0 +1,213 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { i18n } from '@osd/i18n';
+import { isEqual, toUpper, upperFirst } from 'lodash';
+import {
+  EuiPopover,
+  EuiButtonIcon,
+  EuiToolTip,
+  EuiMark,
+  EuiLoadingSpinner,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+} from '@elastic/eui';
+import { FieldButton } from '../../../common/field_button';
+import { FieldIcon } from '../../../common/field_icon';
+import { IField } from '../../../../../common/types/explorer';
+import { FieldInsights } from './field_insights';
+
+interface IFieldProps {
+  query: string;
+  field: IField;
+  selectedPattern: string;
+  isOverridingPattern: boolean;
+  handleOverridePattern: (pattern: IField) => void;
+  selectedTimestamp: string;
+  isOverridingTimestamp: boolean;
+  handleOverrideTimestamp: (timestamp: IField) => void;
+  selected: boolean;
+  showToggleButton: boolean;
+  showTimestampOverrideButton: boolean;
+  isFieldToggleButtonDisabled: boolean;
+  onToggleField: (field: IField) => void;
+}
+
+export const Field = (props: IFieldProps) => {
+  const {
+    query,
+    field,
+    selectedPattern,
+    isOverridingPattern,
+    handleOverridePattern,
+    selectedTimestamp,
+    isOverridingTimestamp,
+    handleOverrideTimestamp,
+    selected,
+    isFieldToggleButtonDisabled = false,
+    showTimestampOverrideButton = true,
+    onToggleField,
+  } = props;
+
+  const [isFieldDetailsOpen, setIsFieldDetailsOpen] = useState(false);
+
+  const addLabelAria = i18n.translate('addButtonAriaLabel', {
+    defaultMessage: 'Add {field} to table',
+    values: { field: field.name },
+  });
+  const removeLabelAria = i18n.translate('removeButtonAriaLabel', {
+    defaultMessage: 'Remove {field} from table',
+    values: { field: field.name },
+  });
+
+  const togglePopover = () => {
+    setIsFieldDetailsOpen((staleState) => !staleState);
+  };
+
+  const toggleField = (field: IField) => {
+    onToggleField(field);
+  };
+
+  const getFieldActionDOM = () => {
+    return (
+      <>
+        <EuiToolTip id="override-pattern" delay="long" content="Override default pattern">
+          <>
+            {isEqual(field.type, 'string') ? (
+              isEqual(selectedPattern, field.name) ? (
+                <EuiMark data-test-subj="eventFields__default-pattern-mark">
+                  Default Pattern
+                </EuiMark>
+              ) : isOverridingPattern ? (
+                <EuiLoadingSpinner className="override_pattern_loading" size="m" />
+              ) : (
+                <EuiButtonIcon
+                  aria-labelledby="override_pattern"
+                  className="dscSidebarItem__action"
+                  size="s"
+                  color="text"
+                  iconType="inputOutput"
+                  onClick={() => handleOverridePattern(field)}
+                  data-test-subj="eventExplorer__overrideDefaultPattern"
+                >
+                  Override
+                </EuiButtonIcon>
+              )
+            ) : null}
+          </>
+        </EuiToolTip>
+        <EuiToolTip id="override-timestamp" delay="long" content="Override default timestamp">
+          <>
+            {showTimestampOverrideButton && isEqual(field.type, 'timestamp') ? (
+              isEqual(selectedTimestamp, field.name) ? (
+                <EuiMark data-test-subj="eventFields__default-timestamp-mark">
+                  Default Timestamp
+                </EuiMark>
+              ) : isOverridingTimestamp ? (
+                <EuiLoadingSpinner className="override_timestamp_loading" size="m" />
+              ) : (
+                <EuiButtonIcon
+                  aria-labelledby="override_timestamp"
+                  className="dscSidebarItem__action"
+                  size="s"
+                  color="text"
+                  iconType="inputOutput"
+                  onClick={() => handleOverrideTimestamp(field)}
+                  data-test-subj="eventExplorer__overrideDefaultTimestamp"
+                >
+                  Override
+                </EuiButtonIcon>
+              )
+            ) : null}
+          </>
+        </EuiToolTip>
+        <EuiToolTip
+          delay="long"
+          content={
+            isFieldToggleButtonDisabled
+              ? "Toggle button is disabled on query contains 'stats' or no hits for the search"
+              : selected
+              ? 'Remove field from table'
+              : 'Add field as column'
+          }
+        >
+          <>
+            {isFieldToggleButtonDisabled ? (
+              <EuiButtonIcon
+                className="dscSidebarItem__action"
+                color="ghost"
+                display="fill"
+                isDisabled
+                iconType={selected ? 'cross' : 'plusInCircleFilled'}
+                data-test-subj={`fieldToggle-${field.name}`}
+                aria-label={selected ? removeLabelAria : addLabelAria}
+              />
+            ) : (
+              <EuiButtonIcon
+                color={selected ? 'danger' : 'primary'}
+                iconType={selected ? 'cross' : 'plusInCircleFilled'}
+                className="dscSidebarItem__action"
+                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                  if (e.type === 'click') {
+                    e.currentTarget.focus();
+                  }
+                  e.preventDefault();
+                  e.stopPropagation();
+                  toggleField(field);
+                }}
+                data-test-subj={`fieldToggle-${field.name}`}
+                aria-label={selected ? removeLabelAria : addLabelAria}
+              />
+            )}
+          </>
+        </EuiToolTip>
+      </>
+    );
+  };
+
+  return (
+    <EuiPopover
+      ownFocus
+      display="block"
+      isOpen={isFieldDetailsOpen}
+      closePopover={() => setIsFieldDetailsOpen(false)}
+      anchorPosition="rightUp"
+      panelClassName="dscSidebarItem__fieldPopoverPanel"
+      button={
+        <FieldButton
+          size="m"
+          className="shard__fieldSelectorField explorer__fieldSelectorField"
+          isActive={isFieldDetailsOpen}
+          dataTestSubj={`field-${field.name}-showDetails`}
+          fieldIcon={<FieldIcon type={isEqual(field.type, 'timestamp') ? 'date' : field.type} />}
+          fieldName={
+            <span
+              data-test-subj={`field-${field.name}`}
+              title={field.name}
+              className="dscSidebarField__name"
+            >
+              {field.name}
+            </span>
+          }
+          fieldAction={getFieldActionDOM()}
+          onClick={togglePopover}
+        />
+      }
+    >
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem>
+          <EuiTitle size="xs">
+            <h4>{toUpper(field.name)}</h4>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>{upperFirst(field.type)}</EuiFlexItem>
+      </EuiFlexGroup>
+
+      <FieldInsights field={field} query={query} />
+    </EuiPopover>
+  );
+};
diff --git a/public/components/event_analytics/explorer/sidebar/field_insights.tsx b/public/components/event_analytics/explorer/sidebar/field_insights.tsx
new file mode 100644
index 0000000000..b9414ba708
--- /dev/null
+++ b/public/components/event_analytics/explorer/sidebar/field_insights.tsx
@@ -0,0 +1,153 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo, useState, useContext, useEffect } from 'react';
+import { indexOf, last } from 'lodash';
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiBasicTable } from '@elastic/eui';
+import { getIndexPatternFromRawQuery } from '../../../../../common/utils/query_utils';
+import { TabContext } from '../../hooks/use_tab_context';
+
+export const FieldInsights = ({ field, query }: any) => {
+  const { pplService } = useContext(TabContext);
+  const { rawQuery } = query;
+  const index = getIndexPatternFromRawQuery(rawQuery);
+  const generalReports = [
+    {
+      id: 'top_values',
+      name: 'Top values',
+      query: `source = ${index} | top 5 ${field.name} | sort - ${field.name}`,
+      format: 'jdbc',
+    },
+    {
+      id: 'rare_values',
+      name: 'Rare values',
+      query: `source = ${index} | rare ${field.name} | sort + ${field.name}`,
+      format: 'jdbc',
+    },
+  ];
+
+  const numericalOnlyReports = [
+    {
+      id: 'average',
+      name: 'Average overtime',
+      query: `source = ${index} | stats avg(${field.name})`,
+      format: 'viz',
+    },
+    {
+      id: 'maximum',
+      name: 'Maximum overtime',
+      query: `source = ${index} | stats max(${field.name})`,
+      format: 'viz',
+    },
+    {
+      id: 'minimum',
+      name: 'Minimum overtime',
+      query: `source = ${index} | stats min(${field.name})`,
+      format: 'viz',
+    },
+  ];
+  const NUMERICAL_TYPES = ['short', 'integer', 'long', 'float', 'double'];
+  const isNumericalField = indexOf(NUMERICAL_TYPES, field.type) > 0;
+  const [curReport, setCurReport] = useState({ ...generalReports[0] });
+  const [reportContent, setReportContent] = useState({});
+
+  const statsInsightsQueries = [
+    {
+      id: 'stats',
+      name: 'Stats',
+      query: `source = ${index} | stats avg(${field.name}), max(${field.name}), min(${field.name})`,
+      format: 'viz',
+    },
+  ];
+
+  const fetchData = async (requests) => {
+    return await Promise.all(
+      requests.map((reqQuery) => {
+        const req = {
+          format: reqQuery.format,
+          query: reqQuery.query,
+        };
+        return getInsights(req);
+      })
+    );
+  };
+
+  useEffect(() => {
+    let requests = [...generalReports];
+    if (isNumericalField) requests = [...requests, ...statsInsightsQueries];
+    fetchData(requests)
+      .then((res) => {
+        // numerical field
+        generalReports.map((report, index) => {
+          if (!res[index]?.jsonData) return;
+          setReportContent((staleState) => {
+            return {
+              ...staleState,
+              [report.id]: res[index]?.jsonData || {},
+            };
+          });
+        });
+        if (res.length > 2) {
+          const statsRes = last(res);
+          if (!statsRes?.metadata) return;
+          numericalOnlyReports.map((rep, index) => {
+            const fieldName = statsRes.metadata?.fields[index]?.name;
+            setReportContent((staleState) => {
+              return {
+                ...staleState,
+                [rep.id]: [{ [field.name]: statsRes.data[fieldName][0] }],
+              };
+            });
+          });
+        }
+      })
+      .catch((error) => console.error(error));
+  }, []);
+
+  const getInsights = async (query: string) => {
+    try {
+      return await pplService.fetch(query);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const insightsContent = useMemo(() => {
+    const columns = [
+      {
+        field: field.name,
+        name: field.name,
+      },
+    ];
+    const repItems = reportContent[curReport.id] || [];
+
+    return <EuiBasicTable columns={columns} items={repItems} />;
+  }, [curReport, reportContent, field.name]);
+
+  return (
+    <EuiFlexGroup direction="column" data-test-subj="sidebarField__fieldInsights">
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup wrap>
+          {generalReports.map((report) => {
+            return (
+              <EuiFlexItem grow={false}>
+                <EuiLink onClick={() => setCurReport(report)}>{report.name}</EuiLink>
+              </EuiFlexItem>
+            );
+          })}
+          {indexOf(NUMERICAL_TYPES, field.type) > 0 &&
+            numericalOnlyReports.map((report) => {
+              return (
+                <EuiFlexItem grow={false}>
+                  <EuiLink onClick={() => setCurReport(report)}>{report.name}</EuiLink>
+                </EuiFlexItem>
+              );
+            })}
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>{insightsContent}</EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/public/components/event_analytics/explorer/sidebar/index.ts b/public/components/event_analytics/explorer/sidebar/index.ts
new file mode 100644
index 0000000000..bfd2e650ea
--- /dev/null
+++ b/public/components/event_analytics/explorer/sidebar/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Sidebar } from './sidebar';
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.scss b/public/components/event_analytics/explorer/sidebar/sidebar.scss
new file mode 100644
index 0000000000..a5ab8d0616
--- /dev/null
+++ b/public/components/event_analytics/explorer/sidebar/sidebar.scss
@@ -0,0 +1,142 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.dscSidebar__container {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  background-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.dscIndexPattern__container {
+  display: flex;
+  align-items: center;
+  height: $euiSize * 3;
+  margin-top: -$euiSizeS;
+}
+
+.dscIndexPattern__triggerButton {
+  @include euiTitle('xs');
+  line-height: $euiSizeXXL;
+}
+
+.dscFieldList {
+  list-style: none;
+  margin-bottom: 0;
+}
+
+.dscFieldListHeader {
+  padding: $euiSizeS $euiSizeS 0 $euiSizeS;
+  background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
+}
+
+.dscFieldList--popular {
+  background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
+}
+
+.dscFieldChooser__toggle {
+  color: $euiColorMediumShade;
+  margin-left: $euiSizeS !important;
+}
+
+/**
+ * 1. Only visually hide the action, so that it's still accessible to screen readers.
+ * 2. When tabbed to, this element needs to be visible for keyboard accessibility.
+ */
+.dscSidebarItem__action {
+  opacity: 0; /* 1 */
+  transition: none;
+
+  &:focus {
+    opacity: 1; /* 2 */
+  }
+  font-size: $euiFontSizeXS;
+  padding: 2px 6px !important;
+  height: 22px !important;
+  min-width: auto !important;
+  .euiButton__content {
+    padding: 0 4px;
+  }
+}
+
+.dscFieldSearch {
+  padding: $euiSizeS;
+}
+
+.dscFieldSearch__toggleButton {
+  width: calc(100% - #{$euiSizeS});
+  color: $euiColorPrimary;
+  padding-left: $euiSizeXS;
+  margin-left: $euiSizeXS;
+}
+
+.dscFieldSearch__filterWrapper {
+  flex-grow: 0;
+}
+
+.dscFieldSearch__formWrapper {
+  padding: $euiSizeM;
+}
+
+.dscFieldDetails {
+  color: $euiTextColor;
+  margin-bottom: $euiSizeS;
+}
+
+.dscSidebarItem__fieldPopoverPanel {
+  min-width: 300px;
+  max-width: 600px;
+  max-height: 600px;
+  overflow-y: scroll;
+}
+
+.override_timestamp_loading {
+  vertical-align: middle;
+}
+
+.explorerFieldSelector {
+  padding: $euiSizeS;
+}
+
+#vis__mainContent {
+  .explorer__insights {
+    min-height: 0;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    height: 100%;
+    .explorerFieldSelector, .explorer__vizDataConfig {
+      padding: $euiSizeS;
+      overflow: auto;
+  
+      &__fieldGroups {
+        @include euiYScrollWithShadows;
+  
+        overflow-y: auto;
+        margin-right: -$euiSizeS;
+        padding-right: $euiSizeS;
+        margin-top: $euiSizeS;
+      }
+  
+      &__fieldGroup {
+        margin-top: $euiSizeS;
+  
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+    .explorerFieldSelector {
+      @include euiYScrollWithShadows;
+      .sidebar-list {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.ws__configPanel--right{
+  overflow-y: unset;
+}
diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.tsx b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
new file mode 100644
index 0000000000..794ce53285
--- /dev/null
+++ b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
@@ -0,0 +1,211 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './sidebar.scss';
+
+import React, { useState } from 'react';
+import { isEmpty } from 'lodash';
+import { EuiTitle, EuiSpacer, EuiFieldSearch, EuiAccordion } from '@elastic/eui';
+import { I18nProvider } from '@osd/i18n/react';
+import { Field } from './field';
+import { IExplorerFields, IField } from '../../../../../common/types/explorer';
+
+interface ISidebarProps {
+  query: string;
+  explorerFields: IExplorerFields;
+  explorerData: any;
+  selectedPattern: string;
+  isOverridingPattern: boolean;
+  selectedTimestamp: string;
+  isOverridingTimestamp: boolean;
+  isFieldToggleButtonDisabled: boolean;
+  handleOverridePattern: (pattern: IField) => void;
+  handleOverrideTimestamp: (timestamp: IField) => void;
+  handleAddField: (field: IField) => void;
+  handleRemoveField: (field: IField) => void;
+}
+
+export const Sidebar = (props: ISidebarProps) => {
+  const {
+    query,
+    explorerFields,
+    explorerData,
+    selectedPattern,
+    isOverridingPattern,
+    selectedTimestamp,
+    isOverridingTimestamp,
+    isFieldToggleButtonDisabled,
+    handleOverridePattern,
+    handleOverrideTimestamp,
+    handleAddField,
+    handleRemoveField,
+  } = props;
+
+  const [showFields, setShowFields] = useState<boolean>(false);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+
+  return (
+    <I18nProvider>
+      <section className="sidebar-list">
+        <div className="dscSidebar__item">
+          <EuiFieldSearch
+            compressed
+            fullWidth
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+            }}
+            placeholder="Search field names"
+            value={searchTerm}
+            data-test-subj="eventExplorer__sidebarSearch"
+          />
+        </div>
+        <EuiSpacer size="s" />
+        <div className="sidebar-list">
+          {((explorerData && !isEmpty(explorerData.jsonData) && !isEmpty(explorerFields)) ||
+            !isEmpty(explorerFields.availableFields)) && (
+            <>
+              {explorerFields?.queriedFields && explorerFields.queriedFields?.length > 0 && (
+                <EuiAccordion
+                  initialIsOpen
+                  id="fieldSelector__queriedFields"
+                  buttonContent={
+                    <EuiTitle size="xxxs">
+                      <span>Query fields</span>
+                    </EuiTitle>
+                  }
+                  paddingSize="xs"
+                >
+                  <ul
+                    className="dscSidebarList dscFieldList--selected"
+                    aria-labelledby="queried_fields"
+                    data-test-subj={`fieldList-selected`}
+                  >
+                    {explorerFields.queriedFields &&
+                      explorerFields.queriedFields.map((field) => {
+                        return (
+                          <li
+                            key={`field${field.name}`}
+                            data-attr-field={field.name}
+                            className="dscSidebar__item"
+                          >
+                            <Field
+                              query={query}
+                              field={field}
+                              selectedPattern={selectedPattern}
+                              isOverridingPattern={isOverridingPattern}
+                              handleOverridePattern={handleOverridePattern}
+                              isOverridingTimestamp={isOverridingTimestamp}
+                              selectedTimestamp={selectedTimestamp}
+                              handleOverrideTimestamp={handleOverrideTimestamp}
+                              selected={true}
+                              isFieldToggleButtonDisabled={true}
+                              showTimestampOverrideButton={false}
+                              onToggleField={handleRemoveField}
+                            />
+                          </li>
+                        );
+                      })}
+                  </ul>
+                </EuiAccordion>
+              )}
+              <EuiSpacer size="s" />
+              <EuiAccordion
+                initialIsOpen
+                id="fieldSelector__selectedFields"
+                buttonContent={
+                  <EuiTitle size="xxxs">
+                    <span>Selected Fields</span>
+                  </EuiTitle>
+                }
+                paddingSize="xs"
+              >
+                <ul
+                  className="dscSidebarList dscFieldList--selected"
+                  aria-labelledby="selected_fields"
+                  data-test-subj={`fieldList-selected`}
+                >
+                  {explorerData &&
+                    !isEmpty(explorerData.jsonData) &&
+                    explorerFields.selectedFields &&
+                    explorerFields.selectedFields.map((field) => {
+                      return (
+                        <li
+                          key={`field${field.name}`}
+                          data-attr-field={field.name}
+                          className="dscSidebar__item"
+                        >
+                          <Field
+                            query={query}
+                            field={field}
+                            selectedPattern={selectedPattern}
+                            isOverridingPattern={isOverridingPattern}
+                            handleOverridePattern={handleOverridePattern}
+                            selectedTimestamp={selectedTimestamp}
+                            isOverridingTimestamp={isOverridingTimestamp}
+                            handleOverrideTimestamp={handleOverrideTimestamp}
+                            selected={true}
+                            isFieldToggleButtonDisabled={isFieldToggleButtonDisabled}
+                            showTimestampOverrideButton={true}
+                            onToggleField={handleRemoveField}
+                          />
+                        </li>
+                      );
+                    })}
+                </ul>
+              </EuiAccordion>
+              <EuiSpacer size="s" />
+              <EuiAccordion
+                initialIsOpen
+                id="fieldSelector__availableFields"
+                buttonContent={
+                  <EuiTitle size="xxxs">
+                    <span>Available Fields</span>
+                  </EuiTitle>
+                }
+                paddingSize="xs"
+              >
+                <ul
+                  className={`dscFieldList dscFieldList--unpopular ${
+                    !showFields ? 'hidden-sm hidden-xs' : ''
+                  }`}
+                  aria-labelledby="available_fields"
+                  data-test-subj={`fieldList-unpopular`}
+                >
+                  {explorerFields.availableFields &&
+                    explorerFields.availableFields
+                      .filter((field) => searchTerm === '' || field.name.indexOf(searchTerm) !== -1)
+                      .map((field) => {
+                        return (
+                          <li
+                            key={`field${field.name}`}
+                            data-attr-field={field.name}
+                            className="dscSidebar__item"
+                          >
+                            <Field
+                              query={query}
+                              field={field}
+                              selectedPattern={selectedPattern}
+                              isOverridingPattern={isOverridingPattern}
+                              handleOverridePattern={handleOverridePattern}
+                              selectedTimestamp={selectedTimestamp}
+                              isOverridingTimestamp={isOverridingTimestamp}
+                              handleOverrideTimestamp={handleOverrideTimestamp}
+                              onToggleField={handleAddField}
+                              selected={false}
+                              isFieldToggleButtonDisabled={isFieldToggleButtonDisabled}
+                              showTimestampOverrideButton={true}
+                            />
+                          </li>
+                        );
+                      })}
+                </ul>
+              </EuiAccordion>
+            </>
+          )}
+        </div>
+      </section>
+    </I18nProvider>
+  );
+};
diff --git a/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap b/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
new file mode 100644
index 0000000000..7255e68b34
--- /dev/null
+++ b/public/components/event_analytics/explorer/timechart_header/__tests__/__snapshots__/timechart_header.test.tsx.snap
@@ -0,0 +1,336 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Time chart header component Renders Time chart header component 1`] = `
+<TimechartHeader
+  dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+  onChangeInterval={[MockFunction]}
+  options={
+    Array [
+      Object {
+        "text": "Minute",
+        "value": "m",
+      },
+      Object {
+        "text": "Hour",
+        "value": "h",
+      },
+      Object {
+        "text": "Day",
+        "value": "d",
+      },
+      Object {
+        "text": "Week",
+        "value": "w",
+      },
+      Object {
+        "text": "Month",
+        "value": "M",
+      },
+      Object {
+        "text": "Year",
+        "value": "y",
+      },
+    ]
+  }
+  stateInterval="w"
+>
+  <I18nProvider>
+    <IntlProvider
+      defaultLocale="en"
+      formats={
+        Object {
+          "date": Object {
+            "full": Object {
+              "day": "numeric",
+              "month": "long",
+              "weekday": "long",
+              "year": "numeric",
+            },
+            "long": Object {
+              "day": "numeric",
+              "month": "long",
+              "year": "numeric",
+            },
+            "medium": Object {
+              "day": "numeric",
+              "month": "short",
+              "year": "numeric",
+            },
+            "short": Object {
+              "day": "numeric",
+              "month": "numeric",
+              "year": "2-digit",
+            },
+          },
+          "number": Object {
+            "currency": Object {
+              "style": "currency",
+            },
+            "percent": Object {
+              "style": "percent",
+            },
+          },
+          "relative": Object {
+            "days": Object {
+              "units": "day",
+            },
+            "hours": Object {
+              "units": "hour",
+            },
+            "minutes": Object {
+              "units": "minute",
+            },
+            "months": Object {
+              "units": "month",
+            },
+            "seconds": Object {
+              "units": "second",
+            },
+            "years": Object {
+              "units": "year",
+            },
+          },
+          "time": Object {
+            "full": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "long": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+              "timeZoneName": "short",
+            },
+            "medium": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+              "second": "numeric",
+            },
+            "short": Object {
+              "hour": "numeric",
+              "minute": "numeric",
+            },
+          },
+        }
+      }
+      locale="en"
+      messages={Object {}}
+      textComponent={Symbol(react.fragment)}
+    >
+      <PseudoLocaleWrapper>
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="s"
+          justifyContent="center"
+          responsive={true}
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <EuiToolTip
+                  content="To change the time, use the global time filter above"
+                  delay="long"
+                  position="top"
+                >
+                  <span
+                    className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                  >
+                    <EuiText
+                      data-test-subj="discoverIntervalDateRange"
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                      size="s"
+                    >
+                      <div
+                        className="euiText euiText--small"
+                        data-test-subj="discoverIntervalDateRange"
+                        onBlur={[Function]}
+                        onFocus={[Function]}
+                      />
+                    </EuiText>
+                  </span>
+                </EuiToolTip>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <EuiSelect
+                  aria-label="Time interval"
+                  compressed={true}
+                  data-test-subj="eventAnalytics__EventIntervalSelect"
+                  id="dscResultsIntervalSelector"
+                  onChange={[Function]}
+                  options={
+                    Array [
+                      Object {
+                        "text": "Minute",
+                        "value": "m",
+                      },
+                      Object {
+                        "text": "Hour",
+                        "value": "h",
+                      },
+                      Object {
+                        "text": "Day",
+                        "value": "d",
+                      },
+                      Object {
+                        "text": "Week",
+                        "value": "w",
+                      },
+                      Object {
+                        "text": "Month",
+                        "value": "M",
+                      },
+                      Object {
+                        "text": "Year",
+                        "value": "y",
+                      },
+                    ]
+                  }
+                  value="w"
+                >
+                  <EuiFormControlLayout
+                    compressed={true}
+                    fullWidth={false}
+                    icon={
+                      Object {
+                        "side": "right",
+                        "type": "arrowDown",
+                      }
+                    }
+                    inputId="dscResultsIntervalSelector"
+                    isLoading={false}
+                  >
+                    <div
+                      className="euiFormControlLayout euiFormControlLayout--compressed"
+                    >
+                      <div
+                        className="euiFormControlLayout__childrenWrapper"
+                      >
+                        <EuiValidatableControl>
+                          <select
+                            aria-label="Time interval"
+                            className="euiSelect euiSelect--compressed"
+                            data-test-subj="eventAnalytics__EventIntervalSelect"
+                            id="dscResultsIntervalSelector"
+                            onChange={[Function]}
+                            onMouseUp={[Function]}
+                            value="w"
+                          >
+                            <option
+                              key="0"
+                              value="m"
+                            >
+                              Minute
+                            </option>
+                            <option
+                              key="1"
+                              value="h"
+                            >
+                              Hour
+                            </option>
+                            <option
+                              key="2"
+                              value="d"
+                            >
+                              Day
+                            </option>
+                            <option
+                              key="3"
+                              value="w"
+                            >
+                              Week
+                            </option>
+                            <option
+                              key="4"
+                              value="M"
+                            >
+                              Month
+                            </option>
+                            <option
+                              key="5"
+                              value="y"
+                            >
+                              Year
+                            </option>
+                          </select>
+                        </EuiValidatableControl>
+                        <EuiFormControlLayoutIcons
+                          compressed={true}
+                          icon={
+                            Object {
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                          isLoading={false}
+                        >
+                          <div
+                            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          >
+                            <EuiFormControlLayoutCustomIcon
+                              size="s"
+                              type="arrowDown"
+                            >
+                              <span
+                                className="euiFormControlLayoutCustomIcon"
+                              >
+                                <EuiIcon
+                                  aria-hidden="true"
+                                  className="euiFormControlLayoutCustomIcon__icon"
+                                  size="s"
+                                  type="arrowDown"
+                                >
+                                  <EuiIconEmpty
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    role="img"
+                                    style={null}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </EuiIconEmpty>
+                                </EuiIcon>
+                              </span>
+                            </EuiFormControlLayoutCustomIcon>
+                          </div>
+                        </EuiFormControlLayoutIcons>
+                      </div>
+                    </div>
+                  </EuiFormControlLayout>
+                </EuiSelect>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </PseudoLocaleWrapper>
+    </IntlProvider>
+  </I18nProvider>
+</TimechartHeader>
+`;
diff --git a/public/components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx b/public/components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx
new file mode 100644
index 0000000000..2d56d74b97
--- /dev/null
+++ b/public/components/event_analytics/explorer/timechart_header/__tests__/timechart_header.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { TimechartHeader } from '../timechart_header';
+import { TIME_INTERVAL_OPTIONS } from '../../../../../../common/constants/explorer';
+
+describe('Time chart header component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders Time chart header component', async () => {
+    const onChangeInterval = jest.fn();
+
+    const wrapper = mount(
+      <TimechartHeader
+        dateFormat={'MMM D, YYYY @ HH:mm:ss.SSS'}
+        onChangeInterval={onChangeInterval}
+        options={TIME_INTERVAL_OPTIONS}
+        stateInterval="w"
+      />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/event_analytics/explorer/timechart_header/index.ts b/public/components/event_analytics/explorer/timechart_header/index.ts
new file mode 100644
index 0000000000..d9198de35e
--- /dev/null
+++ b/public/components/event_analytics/explorer/timechart_header/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { TimechartHeader } from './timechart_header';
diff --git a/public/components/event_analytics/explorer/timechart_header/timechart_header.tsx b/public/components/event_analytics/explorer/timechart_header/timechart_header.tsx
new file mode 100644
index 0000000000..7b8d106937
--- /dev/null
+++ b/public/components/event_analytics/explorer/timechart_header/timechart_header.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiText, EuiSelect } from '@elastic/eui';
+import { I18nProvider } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
+
+export interface TimechartHeaderProps {
+  /**
+   * Format of date to be displayed
+   */
+  dateFormat?: string;
+  /**
+   * Range of dates to be displayed
+   */
+  timeRange?: {
+    from: string;
+    to: string;
+  };
+  /**
+   * Interval Options
+   */
+  options: Array<{ text: string; value: string }>;
+  /**
+   * changes the interval
+   */
+  onChangeInterval: (interval: string) => void;
+  /**
+   * selected interval
+   */
+  stateInterval?: string | undefined;
+}
+
+export function TimechartHeader({
+  options,
+  onChangeInterval,
+  stateInterval,
+}: TimechartHeaderProps) {
+
+  const handleIntervalChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    onChangeInterval(e.target.value);
+  };
+
+  return (
+    <I18nProvider>
+      <EuiFlexGroup gutterSize="s" responsive justifyContent="center" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiToolTip
+            content={i18n.translate('discover.howToChangeTheTimeTooltip', {
+              defaultMessage: 'To change the time, use the global time filter above',
+            })}
+            delay="long"
+          >
+            <EuiText data-test-subj="discoverIntervalDateRange" size="s"></EuiText>
+          </EuiToolTip>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiSelect
+            aria-label={i18n.translate('discover.timechartHeader.timeIntervalSelect.ariaLabel', {
+              defaultMessage: 'Time interval',
+            })}
+            compressed
+            id="dscResultsIntervalSelector"
+            data-test-subj="eventAnalytics__EventIntervalSelect"
+            options={options}
+            value={stateInterval || options[0].value}
+            onChange={handleIntervalChange}
+            append={undefined}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </I18nProvider>
+  );
+}
diff --git a/public/components/event_analytics/explorer/visualizations/_mixins.scss b/public/components/event_analytics/explorer/visualizations/_mixins.scss
new file mode 100644
index 0000000000..ae22f3905f
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/_mixins.scss
@@ -0,0 +1,54 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// sass-lint:disable-block indentation, no-color-keywords
+
+// SASSTODO: Create this in EUI
+@mixin lnsOverflowShadowHorizontal {
+  $hideHeight: $euiScrollBarCorner * 1.25;
+  mask-image: linear-gradient(
+    to right,
+    transparentize(red, .9) 0%,
+    transparentize(red, 0) $hideHeight,
+    transparentize(red, 0) calc(100% - #{$hideHeight}),
+    transparentize(red, .9) 100%
+  );
+}
+
+// Static styles for a draggable item
+@mixin lnsDraggable {
+  @include euiSlightShadow;
+  background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
+  border: $euiBorderWidthThin dashed transparent;
+  cursor: grab;
+}
+
+// Static styles for a drop area
+@mixin lnsDroppable {
+  border: $euiBorderWidthThin dashed $euiBorderColor;
+}
+
+// Hovering state for drag item and drop area
+@mixin lnsDragDropHover {
+  &:hover {
+    border: $euiBorderWidthThin dashed $euiColorMediumShade;
+  }
+}
+
+// Style for drop area when there's an item being dragged
+@mixin lnsDroppableActive {
+  background-color: transparentize($euiColorVis0, .9);
+}
+
+// Style for drop area while hovering with item
+@mixin lnsDroppableActiveHover {
+  background-color: transparentize($euiColorVis0, .75);
+  border: $euiBorderWidthThin dashed $euiColorVis0;
+}
+
+// Style for drop area that is not allowed for current item
+@mixin lnsDroppableNotAllowed {
+  opacity: .5;
+}
diff --git a/public/components/event_analytics/explorer/visualizations/_variables.scss b/public/components/event_analytics/explorer/visualizations/_variables.scss
new file mode 100644
index 0000000000..a4248f8142
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/_variables.scss
@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+$lnsPanelMinWidth: $euiSize * 18;
+
+// These sizes also match canvas' page thumbnails for consistency
+$lnsSuggestionHeight: 100px;
+$lnsSuggestionWidth: 150px;
diff --git a/public/components/event_analytics/explorer/visualizations/app.scss b/public/components/event_analytics/explorer/visualizations/app.scss
new file mode 100644
index 0000000000..8f4e129e97
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/app.scss
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.dataConfigContainer {
+  height: 1242px;
+  overflow: auto;
+}
+
+.explorerViz__commonPanel {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-area: workspace;
+  background-color: #FFF;
+  height: 100%;
+}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
new file mode 100644
index 0000000000..a151a7d9f9
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -0,0 +1,14393 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Config panel component Renders config panel with visualization data 1`] = `
+<ConfigPanel
+  changeIsValidConfigOptionState={[MockFunction]}
+  setCurVisId={[MockFunction]}
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "barwidth": 0.97,
+        "category": "Visualizations",
+        "categoryaxis": "xaxis",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Series",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "legend",
+                  "mapTo": "legend",
+                  "name": "Legend",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "showLegend",
+                      "name": "Show legend",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "position",
+                      "name": "Position",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Bottom",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "legendSize",
+                      "name": "Legend size",
+                      "title": "Legend size",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "id": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0,
+                      "eleType": "slider",
+                      "mapTo": "rotateBarLabels",
+                      "name": "Rotate bar labels",
+                      "props": Object {
+                        "max": 90,
+                        "min": -90,
+                        "showTicks": true,
+                        "ticks": Array [
+                          Object {
+                            "label": "-90°",
+                            "value": -90,
+                          },
+                          Object {
+                            "label": "-45°",
+                            "value": -45,
+                          },
+                          Object {
+                            "label": "0°",
+                            "value": 0,
+                          },
+                          Object {
+                            "label": "45°",
+                            "value": 45,
+                          },
+                          Object {
+                            "label": "90°",
+                            "value": 90,
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.7,
+                      "eleType": "slider",
+                      "mapTo": "groupWidth",
+                      "name": "Group width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.97,
+                      "eleType": "slider",
+                      "mapTo": "barWidth",
+                      "name": "Bar width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 2,
+                      "eleType": "slider",
+                      "mapTo": "lineWidth",
+                      "name": "Line width",
+                      "props": Object {
+                        "max": 10,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 70,
+                      "eleType": "slider",
+                      "mapTo": "fillOpacity",
+                      "name": "Fill opacity",
+                      "props": Object {
+                        "max": 100,
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "color-theme",
+                  "mapTo": "colorTheme",
+                  "name": "Color theme",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "editor": [Function],
+              "id": "availability-panel",
+              "mapTo": "availabilityConfig",
+              "name": "Availability",
+            },
+          ],
+        },
+        "fillopacity": 70,
+        "fulllabel": "Vertical bar",
+        "groupwidth": 0.7,
+        "icon": [Function],
+        "icontype": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Vertical bar",
+        "labelangle": 0,
+        "legendposition": "v",
+        "linewidth": 2,
+        "mode": "group",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesaxis": "yaxis",
+        "showlegend": "show",
+        "type": "bar",
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <div
+    className="cp__rightContainer"
+  >
+    <div
+      className="cp__rightHeader"
+    >
+      <EuiComboBox
+        aria-label="config chart selector"
+        async={false}
+        compressed={false}
+        fullWidth={true}
+        isClearable={false}
+        onChange={[Function]}
+        options={
+          Array [
+            Object {
+              "barwidth": 0.97,
+              "category": "Visualizations",
+              "categoryaxis": "xaxis",
+              "component": [Function],
+              "editorconfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                                Object {
+                                  "id": "x",
+                                  "name": "Dimension",
+                                },
+                                Object {
+                                  "id": "y",
+                                  "name": "Series",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "showLegend",
+                            "name": "Show legend",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "position",
+                            "name": "Position",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                                Object {
+                                  "id": "h",
+                                  "name": "Bottom",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "legendSize",
+                            "name": "Legend size",
+                            "title": "Legend size",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_styles",
+                        "mapTo": "chartStyles",
+                        "name": "Chart styles",
+                        "schemas": Array [
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                                Object {
+                                  "id": "stack",
+                                  "name": "Stack",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label size",
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0,
+                            "eleType": "slider",
+                            "mapTo": "rotateBarLabels",
+                            "name": "Rotate bar labels",
+                            "props": Object {
+                              "max": 90,
+                              "min": -90,
+                              "showTicks": true,
+                              "ticks": Array [
+                                Object {
+                                  "label": "-90°",
+                                  "value": -90,
+                                },
+                                Object {
+                                  "label": "-45°",
+                                  "value": -45,
+                                },
+                                Object {
+                                  "label": "0°",
+                                  "value": 0,
+                                },
+                                Object {
+                                  "label": "45°",
+                                  "value": 45,
+                                },
+                                Object {
+                                  "label": "90°",
+                                  "value": 90,
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.7,
+                            "eleType": "slider",
+                            "mapTo": "groupWidth",
+                            "name": "Group width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.97,
+                            "eleType": "slider",
+                            "mapTo": "barWidth",
+                            "name": "Bar width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 2,
+                            "eleType": "slider",
+                            "mapTo": "lineWidth",
+                            "name": "Line width",
+                            "props": Object {
+                              "max": 10,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 70,
+                            "eleType": "slider",
+                            "mapTo": "fillOpacity",
+                            "name": "Fill opacity",
+                            "props": Object {
+                              "max": 100,
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "color-theme",
+                        "mapTo": "colorTheme",
+                        "name": "Color theme",
+                        "schemas": Array [],
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "availability-panel",
+                    "mapTo": "availabilityConfig",
+                    "name": "Availability",
+                  },
+                ],
+              },
+              "fillopacity": 70,
+              "fulllabel": "Vertical bar",
+              "groupwidth": 0.7,
+              "icon": [Function],
+              "iconType": "visBarVerticalStacked",
+              "icontype": "visBarVerticalStacked",
+              "id": "bar",
+              "label": "Vertical bar",
+              "labelangle": 0,
+              "legendposition": "v",
+              "linewidth": 2,
+              "mode": "group",
+              "name": "bar",
+              "orientation": "v",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesaxis": "yaxis",
+              "showlegend": "show",
+              "type": "bar",
+              "visconfig": Object {
+                "config": Object {
+                  "displaylogo": false,
+                  "responsive": true,
+                },
+                "isUniColor": false,
+                "layout": Object {
+                  "height": 1180,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "showlegend": true,
+                },
+              },
+            },
+            Object {
+              "barwidth": 0.97,
+              "category": "Visualizations",
+              "categoryaxis": "xaxis",
+              "component": [Function],
+              "editorconfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                                Object {
+                                  "id": "x",
+                                  "name": "Dimension",
+                                },
+                                Object {
+                                  "id": "y",
+                                  "name": "Series",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "showLegend",
+                            "name": "Show legend",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "position",
+                            "name": "Position",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                                Object {
+                                  "id": "h",
+                                  "name": "Bottom",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "legendSize",
+                            "name": "Legend size",
+                            "title": "Legend size",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_styles",
+                        "mapTo": "chartStyles",
+                        "name": "Chart styles",
+                        "schemas": Array [
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                                Object {
+                                  "id": "stack",
+                                  "name": "Stack",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label size",
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0,
+                            "eleType": "slider",
+                            "mapTo": "rotateBarLabels",
+                            "name": "Rotate bar labels",
+                            "props": Object {
+                              "max": 90,
+                              "min": -90,
+                              "showTicks": true,
+                              "ticks": Array [
+                                Object {
+                                  "label": "-90°",
+                                  "value": -90,
+                                },
+                                Object {
+                                  "label": "-45°",
+                                  "value": -45,
+                                },
+                                Object {
+                                  "label": "0°",
+                                  "value": 0,
+                                },
+                                Object {
+                                  "label": "45°",
+                                  "value": 45,
+                                },
+                                Object {
+                                  "label": "90°",
+                                  "value": 90,
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.7,
+                            "eleType": "slider",
+                            "mapTo": "groupWidth",
+                            "name": "Group width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.97,
+                            "eleType": "slider",
+                            "mapTo": "barWidth",
+                            "name": "Bar width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 2,
+                            "eleType": "slider",
+                            "mapTo": "lineWidth",
+                            "name": "Line width",
+                            "props": Object {
+                              "max": 10,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 70,
+                            "eleType": "slider",
+                            "mapTo": "fillOpacity",
+                            "name": "Fill opacity",
+                            "props": Object {
+                              "max": 100,
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "color-theme",
+                        "mapTo": "colorTheme",
+                        "name": "Color theme",
+                        "schemas": Array [],
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "availability-panel",
+                    "mapTo": "availabilityConfig",
+                    "name": "Availability",
+                  },
+                ],
+              },
+              "fillopacity": 70,
+              "fulllabel": "Horizontal bar",
+              "groupwidth": 0.7,
+              "icon": [Function],
+              "icontype": "visBarHorizontalStacked",
+              "id": "horizontal_bar",
+              "label": "Horizontal bar",
+              "labelangle": 0,
+              "legendposition": "v",
+              "linewidth": 2,
+              "mode": "group",
+              "name": "horizontal_bar",
+              "orientation": "h",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesaxis": "yaxis",
+              "showlegend": "show",
+              "type": "bar",
+              "visconfig": Object {
+                "config": Object {
+                  "displaylogo": false,
+                  "responsive": true,
+                },
+                "isUniColor": false,
+                "layout": Object {
+                  "height": 1180,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "showlegend": true,
+                },
+              },
+            },
+            Object {
+              "category": "Visualizations",
+              "categoryaxis": "xaxis",
+              "component": [Function],
+              "editorconfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "showLegend",
+                            "name": "Show legend",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "position",
+                            "name": "Position",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                                Object {
+                                  "id": "h",
+                                  "name": "Bottom",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "legendSize",
+                            "name": "Legend size",
+                            "title": "Legend size",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                                Object {
+                                  "id": "x",
+                                  "name": "Dimension",
+                                },
+                                Object {
+                                  "id": "y",
+                                  "name": "Series",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_styles",
+                        "mapTo": "chartStyles",
+                        "name": "Chart styles",
+                        "schemas": Array [
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "style",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "lines",
+                                  "name": "Lines",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "lines",
+                                  "name": "Lines",
+                                },
+                                Object {
+                                  "id": "markers",
+                                  "name": "Marker",
+                                },
+                                Object {
+                                  "id": "lines+markers",
+                                  "name": "Lines + Markers",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "interpolation",
+                            "name": "Interpolation",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "spline",
+                                  "name": "Smooth",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "linear",
+                                  "name": "Linear",
+                                },
+                                Object {
+                                  "id": "spline",
+                                  "name": "Smooth",
+                                },
+                                Object {
+                                  "id": "hv",
+                                  "name": "Step before",
+                                },
+                                Object {
+                                  "id": "vh",
+                                  "name": "Step after",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 2,
+                            "eleType": "slider",
+                            "mapTo": "lineWidth",
+                            "name": "Line width",
+                            "props": Object {
+                              "max": 10,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 70,
+                            "eleType": "slider",
+                            "mapTo": "fillOpacity",
+                            "name": "Fill opacity",
+                            "props": Object {
+                              "max": 100,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 5,
+                            "eleType": "slider",
+                            "mapTo": "pointSize",
+                            "name": "Point size",
+                            "props": Object {
+                              "max": 40,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label size",
+                            "title": "Label size",
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0,
+                            "eleType": "slider",
+                            "mapTo": "rotateLabels",
+                            "name": "Rotate labels",
+                            "props": Object {
+                              "max": 90,
+                              "min": -90,
+                              "showTicks": true,
+                              "ticks": Array [
+                                Object {
+                                  "label": "-90°",
+                                  "value": -90,
+                                },
+                                Object {
+                                  "label": "-45°",
+                                  "value": -45,
+                                },
+                                Object {
+                                  "label": "0°",
+                                  "value": 0,
+                                },
+                                Object {
+                                  "label": "45°",
+                                  "value": 45,
+                                },
+                                Object {
+                                  "label": "90°",
+                                  "value": 90,
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "defaultState": Array [],
+                        "editor": [Function],
+                        "id": "thresholds",
+                        "mapTo": "thresholds",
+                        "name": "Thresholds",
+                        "schemas": Array [],
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "availability-panel",
+                    "mapTo": "availabilityConfig",
+                    "name": "Availability",
+                  },
+                ],
+              },
+              "fulllabel": "Time series",
+              "icon": [Function],
+              "icontype": "visLine",
+              "id": "line",
+              "label": "Time series",
+              "name": "line",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesaxis": "yaxis",
+              "type": "line",
+              "visconfig": Object {
+                "config": Object {
+                  "barmode": "line",
+                  "displaylogo": false,
+                  "responsive": true,
+                  "xaxis": Object {
+                    "automargin": true,
+                  },
+                  "yaxis": Object {
+                    "automargin": true,
+                  },
+                },
+                "layout": Object {
+                  "colorway": Array [
+                    "#3CA1C7",
+                    "#8C55A3",
+                    "#DB748A",
+                    "#F2BE4B",
+                    "#68CCC2",
+                    "#2A7866",
+                    "#843769",
+                    "#374FB8",
+                    "#BD6F26",
+                    "#4C636F",
+                  ],
+                  "height": 1180,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                  "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                  "showlegend": true,
+                  "xaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
+                  "yaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
+                },
+              },
+            },
+            Object {
+              "category": "Visualizations",
+              "categoryaxis": "xaxis",
+              "component": [Function],
+              "editorconfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "showLegend",
+                            "name": "Show legend",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "position",
+                            "name": "Position",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                                Object {
+                                  "id": "h",
+                                  "name": "Bottom",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "size",
+                            "name": "Legend size",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                                Object {
+                                  "id": "label",
+                                  "name": "Label",
+                                },
+                                Object {
+                                  "id": "value",
+                                  "name": "Value",
+                                },
+                                Object {
+                                  "id": "percent",
+                                  "name": "Percent",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_styles",
+                        "mapTo": "chartStyles",
+                        "name": "Chart styles",
+                        "schemas": Array [
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "isSingleSelection": true,
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "pie",
+                                  "name": "Pie",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "pie",
+                                  "name": "Pie",
+                                },
+                                Object {
+                                  "id": "donut",
+                                  "name": "Donut",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label size",
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+              "fulllabel": "Pie",
+              "icon": [Function],
+              "icontype": "visPie",
+              "id": "pie",
+              "label": "Pie",
+              "legendposition": "v",
+              "mode": "pie",
+              "name": "pie",
+              "seriesaxis": "yaxis",
+              "showlegend": "show",
+              "type": "pie",
+              "visconfig": Object {
+                "config": Object {
+                  "displaylogo": false,
+                  "responsive": true,
+                },
+                "layout": Object {
+                  "colorway": Array [
+                    "#3CA1C7",
+                    "#8C55A3",
+                    "#DB748A",
+                    "#F2BE4B",
+                    "#68CCC2",
+                    "#2A7866",
+                    "#843769",
+                    "#374FB8",
+                    "#BD6F26",
+                    "#4C636F",
+                  ],
+                  "height": 1180,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                  "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                  "showlegend": true,
+                  "xaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
+                  "yaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
+                },
+              },
+            },
+            Object {
+              "category": "Visualizations",
+              "component": [Function],
+              "editorconfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                                Object {
+                                  "id": "x",
+                                  "name": "Dim 1",
+                                },
+                                Object {
+                                  "id": "y",
+                                  "name": "Dim 2",
+                                },
+                                Object {
+                                  "id": "z",
+                                  "name": "Metrics",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "showLegend",
+                            "name": "Show colorscale",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_styles",
+                        "mapTo": "chartStyles",
+                        "name": "Chart styles",
+                        "schemas": Array [
+                          Object {
+                            "component": [Function],
+                            "defaultState": Array [
+                              Object {
+                                "label": "spectrum",
+                                "name": "spectrum",
+                                "value": "spectrum",
+                              },
+                            ],
+                            "eleType": "list",
+                            "isSingleSelection": true,
+                            "mapTo": "colorMode",
+                            "name": "Color mode",
+                            "options": Array [
+                              Object {
+                                "label": "spectrum",
+                                "name": "spectrum",
+                                "value": "spectrum",
+                              },
+                              Object {
+                                "label": "opacity",
+                                "name": "opacity",
+                                "value": "opacity",
+                              },
+                            ],
+                            "props": Object {
+                              "isClearable": false,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": Object {
+                              "color": "Reds",
+                              "name": "Reds",
+                            },
+                            "eleType": "palettePicker",
+                            "mapTo": "scheme",
+                            "name": "Scheme",
+                            "options": Array [
+                              Object {
+                                "palette": Array [
+                                  "#050aac",
+                                  "#161cb2",
+                                  "#2029ba",
+                                  "#2835c2",
+                                  "#303fca",
+                                  "#384ad3",
+                                  "#4054db",
+                                  "#495ee2",
+                                  "#5368e9",
+                                  "#5f72ed",
+                                  "#6b7df0",
+                                  "#7887f0",
+                                  "#8692f0",
+                                  "#939cee",
+                                  "#a0a6ec",
+                                  "#adb1ea",
+                                  "#b9bce7",
+                                  "#c5c6e3",
+                                  "#d1d1e0",
+                                  "#dcdcdc",
+                                ],
+                                "title": "Blues",
+                                "type": "gradient",
+                                "value": "Blues",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#dcdcdc",
+                                  "#e8d0c1",
+                                  "#edc6ad",
+                                  "#efbb9c",
+                                  "#efb18e",
+                                  "#eea782",
+                                  "#eb9e77",
+                                  "#e9946d",
+                                  "#e68b64",
+                                  "#e2815c",
+                                  "#de7854",
+                                  "#da6e4c",
+                                  "#d56545",
+                                  "#d15b3e",
+                                  "#cc5138",
+                                  "#c74632",
+                                  "#c23b2c",
+                                  "#bd2f26",
+                                  "#b72021",
+                                  "#b20a1c",
+                                ],
+                                "title": "Reds",
+                                "type": "gradient",
+                                "value": "Reds",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#00441b",
+                                  "#014e1f",
+                                  "#035825",
+                                  "#09622a",
+                                  "#116d31",
+                                  "#1b7738",
+                                  "#25823f",
+                                  "#308c48",
+                                  "#3c9650",
+                                  "#49a15a",
+                                  "#57ab64",
+                                  "#66b56f",
+                                  "#76bf7b",
+                                  "#86c888",
+                                  "#98d296",
+                                  "#aadba6",
+                                  "#bde4b8",
+                                  "#d0ecca",
+                                  "#e3f4df",
+                                  "#f7fcf5",
+                                ],
+                                "title": "Greens",
+                                "type": "gradient",
+                                "value": "Greens",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#000000",
+                                  "#121212",
+                                  "#1d1d1d",
+                                  "#272727",
+                                  "#333333",
+                                  "#3e3e3e",
+                                  "#4a4a4a",
+                                  "#575757",
+                                  "#636363",
+                                  "#707070",
+                                  "#7e7e7e",
+                                  "#8b8b8b",
+                                  "#999999",
+                                  "#a7a7a7",
+                                  "#b5b5b5",
+                                  "#c3c3c3",
+                                  "#d2d2d2",
+                                  "#e1e1e1",
+                                  "#f0f0f0",
+                                  "#ffffff",
+                                ],
+                                "title": "Greys",
+                                "type": "gradient",
+                                "value": "Greys",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#0000ff",
+                                  "#3e00f7",
+                                  "#5800ee",
+                                  "#6c00e4",
+                                  "#7c00db",
+                                  "#8a00d1",
+                                  "#9600c6",
+                                  "#a200bb",
+                                  "#ac00b0",
+                                  "#b600a4",
+                                  "#bf0098",
+                                  "#c8008b",
+                                  "#d0007e",
+                                  "#d80071",
+                                  "#df0062",
+                                  "#e60054",
+                                  "#ed0045",
+                                  "#f30034",
+                                  "#f90021",
+                                  "#ff0000",
+                                ],
+                                "title": "Blue-Red",
+                                "type": "gradient",
+                                "value": "Bluered",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#050aac",
+                                  "#2522b6",
+                                  "#3835c0",
+                                  "#4946c8",
+                                  "#5957cf",
+                                  "#6967d4",
+                                  "#7978d7",
+                                  "#8a89d7",
+                                  "#9a9bd4",
+                                  "#acaccd",
+                                  "#df9b70",
+                                  "#dd8e62",
+                                  "#da8056",
+                                  "#d6734c",
+                                  "#d16542",
+                                  "#cb583a",
+                                  "#c54931",
+                                  "#bf3a2a",
+                                  "#b92723",
+                                  "#b20a1c",
+                                ],
+                                "title": "Red-Blue",
+                                "type": "gradient",
+                                "value": "RdBu",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#800026",
+                                  "#910126",
+                                  "#a10526",
+                                  "#b10e26",
+                                  "#c01b26",
+                                  "#cd2926",
+                                  "#d83728",
+                                  "#e2472a",
+                                  "#ea572e",
+                                  "#f16732",
+                                  "#f67738",
+                                  "#fa8740",
+                                  "#fd9849",
+                                  "#ffa753",
+                                  "#ffb760",
+                                  "#ffc76f",
+                                  "#ffd681",
+                                  "#ffe496",
+                                  "#fff2af",
+                                  "#ffffcc",
+                                ],
+                                "title": "Yellow-Orange-Red",
+                                "type": "gradient",
+                                "value": "YlOrRd",
+                              },
+                              Object {
+                                "palette": Array [
+                                  "#081d58",
+                                  "#11256a",
+                                  "#182f79",
+                                  "#1e3b86",
+                                  "#234791",
+                                  "#28539a",
+                                  "#2e60a2",
+                                  "#346da9",
+                                  "#3b7aaf",
+                                  "#4488b4",
+                                  "#4f95b7",
+                                  "#5ba2ba",
+                                  "#6aafbc",
+                                  "#7bbcbe",
+                                  "#8dc8bf",
+                                  "#a2d4c1",
+                                  "#b7e0c4",
+                                  "#ceebc9",
+                                  "#e6f5d0",
+                                  "#ffffd9",
+                                ],
+                                "title": "Yellow-Green-Blue",
+                                "type": "gradient",
+                                "value": "YlGnBu",
+                              },
+                            ],
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": Object {
+                              "color": "#000000",
+                              "name": "singleColor",
+                            },
+                            "eleType": "singleColorPicker",
+                            "mapTo": "color",
+                            "name": "Color",
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+              "fulllabel": "Hubble",
+              "icon": [Function],
+              "icontype": "heatmap",
+              "id": "heatmap",
+              "label": "Heatmap",
+              "name": "heatmap",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "type": "heatmap",
+              "visconfig": Object {
+                "config": Object {
+                  "displaylogo": false,
+                  "responsive": true,
+                },
+                "layout": Object {
+                  "height": 1180,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "left": 60,
+                  },
+                  "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                  "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                  "showlegend": true,
+                },
+              },
+            },
+            Object {
+              "category": "Visualizations",
+              "categoryaxis": "xaxis",
+              "component": [Function],
+              "editorconfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "text_editor",
+                        "mapTo": "text",
+                        "name": "Text",
+                        "schemas": Array [],
+                      },
+                    ],
+                  },
+                ],
+              },
+              "fulllabel": "Markdown",
+              "icon": [Function],
+              "icontype": "visText",
+              "id": "text",
+              "label": "Markdown",
+              "name": "text",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesaxis": "yaxis",
+              "type": "text",
+              "visconfig": Object {
+                "config": Object {
+                  "barmode": "line",
+                  "displaylogo": false,
+                  "responsive": true,
+                  "xaxis": Object {
+                    "automargin": true,
+                  },
+                  "yaxis": Object {
+                    "automargin": true,
+                  },
+                },
+                "layout": Object {
+                  "colorway": Array [
+                    "#3CA1C7",
+                    "#8C55A3",
+                    "#DB748A",
+                    "#F2BE4B",
+                    "#68CCC2",
+                    "#2A7866",
+                    "#843769",
+                    "#374FB8",
+                    "#BD6F26",
+                    "#4C636F",
+                  ],
+                  "height": 1180,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                  "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                  "showlegend": true,
+                  "xaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
+                  "yaxis": Object {
+                    "fixedrange": true,
+                    "showgrid": false,
+                    "visible": true,
+                  },
+                },
+              },
+            },
+          ]
+        }
+        placeholder="Select a chart"
+        renderOption={[Function]}
+        selectedOptions={
+          Array [
+            Object {
+              "barwidth": 0.97,
+              "category": "Visualizations",
+              "categoryaxis": "xaxis",
+              "component": [Function],
+              "editorconfig": Object {
+                "panelTabs": Array [
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                                Object {
+                                  "id": "x",
+                                  "name": "Dimension",
+                                },
+                                Object {
+                                  "id": "y",
+                                  "name": "Series",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "showLegend",
+                            "name": "Show legend",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "position",
+                            "name": "Position",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                                Object {
+                                  "id": "h",
+                                  "name": "Bottom",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "legendSize",
+                            "name": "Legend size",
+                            "title": "Legend size",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_styles",
+                        "mapTo": "chartStyles",
+                        "name": "Chart styles",
+                        "schemas": Array [
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                                Object {
+                                  "id": "stack",
+                                  "name": "Stack",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label size",
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0,
+                            "eleType": "slider",
+                            "mapTo": "rotateBarLabels",
+                            "name": "Rotate bar labels",
+                            "props": Object {
+                              "max": 90,
+                              "min": -90,
+                              "showTicks": true,
+                              "ticks": Array [
+                                Object {
+                                  "label": "-90°",
+                                  "value": -90,
+                                },
+                                Object {
+                                  "label": "-45°",
+                                  "value": -45,
+                                },
+                                Object {
+                                  "label": "0°",
+                                  "value": 0,
+                                },
+                                Object {
+                                  "label": "45°",
+                                  "value": 45,
+                                },
+                                Object {
+                                  "label": "90°",
+                                  "value": 90,
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.7,
+                            "eleType": "slider",
+                            "mapTo": "groupWidth",
+                            "name": "Group width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.97,
+                            "eleType": "slider",
+                            "mapTo": "barWidth",
+                            "name": "Bar width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 2,
+                            "eleType": "slider",
+                            "mapTo": "lineWidth",
+                            "name": "Line width",
+                            "props": Object {
+                              "max": 10,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 70,
+                            "eleType": "slider",
+                            "mapTo": "fillOpacity",
+                            "name": "Fill opacity",
+                            "props": Object {
+                              "max": 100,
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "color-theme",
+                        "mapTo": "colorTheme",
+                        "name": "Color theme",
+                        "schemas": Array [],
+                      },
+                    ],
+                  },
+                  Object {
+                    "editor": [Function],
+                    "id": "availability-panel",
+                    "mapTo": "availabilityConfig",
+                    "name": "Availability",
+                  },
+                ],
+              },
+              "fillopacity": 70,
+              "fulllabel": "Vertical bar",
+              "groupwidth": 0.7,
+              "icon": [Function],
+              "iconType": "visBarVerticalStacked",
+              "icontype": "visBarVerticalStacked",
+              "id": "bar",
+              "label": "Vertical bar",
+              "labelangle": 0,
+              "legendposition": "v",
+              "linewidth": 2,
+              "mode": "group",
+              "name": "bar",
+              "orientation": "v",
+              "selection": Object {
+                "dataLoss": "nothing",
+              },
+              "seriesaxis": "yaxis",
+              "showlegend": "show",
+              "type": "bar",
+              "visconfig": Object {
+                "config": Object {
+                  "displaylogo": false,
+                  "responsive": true,
+                },
+                "isUniColor": false,
+                "layout": Object {
+                  "height": 1180,
+                  "legend": Object {
+                    "orientation": "v",
+                    "traceorder": "normal",
+                  },
+                  "margin": Object {
+                    "b": 30,
+                    "l": 60,
+                    "pad": 0,
+                    "r": 30,
+                    "t": 50,
+                  },
+                  "showlegend": true,
+                },
+              },
+            },
+          ]
+        }
+        singleSelection={true}
+        sortMatchesBy="none"
+      >
+        <div
+          aria-expanded={false}
+          aria-haspopup="listbox"
+          aria-label="config chart selector"
+          className="euiComboBox euiComboBox--fullWidth"
+          onKeyDown={[Function]}
+          role="combobox"
+        >
+          <EuiComboBoxInput
+            autoSizeInputRef={[Function]}
+            compressed={false}
+            fullWidth={true}
+            hasSelectedOptions={true}
+            inputRef={[Function]}
+            isListOpen={false}
+            noIcon={false}
+            onChange={[Function]}
+            onClick={[Function]}
+            onCloseListClick={[Function]}
+            onFocus={[Function]}
+            onOpenListClick={[Function]}
+            onRemoveOption={[Function]}
+            placeholder="Select a chart"
+            rootId={[Function]}
+            searchValue=""
+            selectedOptions={
+              Array [
+                Object {
+                  "barwidth": 0.97,
+                  "category": "Visualizations",
+                  "categoryaxis": "xaxis",
+                  "component": [Function],
+                  "editorconfig": Object {
+                    "panelTabs": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "data-panel",
+                        "mapTo": "dataConfig",
+                        "name": "Style",
+                        "sections": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "tooltip_options",
+                            "mapTo": "tooltipOptions",
+                            "name": "Tooltip options",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "mapTo": "tooltipMode",
+                                "name": "Tooltip mode",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                    Object {
+                                      "id": "hidden",
+                                      "name": "Hidden",
+                                    },
+                                  ],
+                                },
+                              },
+                              Object {
+                                "component": null,
+                                "mapTo": "tooltipText",
+                                "name": "Tooltip text",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "all",
+                                      "name": "All",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "all",
+                                      "name": "All",
+                                    },
+                                    Object {
+                                      "id": "x",
+                                      "name": "Dimension",
+                                    },
+                                    Object {
+                                      "id": "y",
+                                      "name": "Series",
+                                    },
+                                  ],
+                                },
+                              },
+                            ],
+                          },
+                          Object {
+                            "editor": [Function],
+                            "id": "legend",
+                            "mapTo": "legend",
+                            "name": "Legend",
+                            "schemas": Array [
+                              Object {
+                                "component": null,
+                                "mapTo": "showLegend",
+                                "name": "Show legend",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "show",
+                                      "name": "Show",
+                                    },
+                                    Object {
+                                      "id": "hidden",
+                                      "name": "Hidden",
+                                    },
+                                  ],
+                                },
+                              },
+                              Object {
+                                "component": null,
+                                "mapTo": "position",
+                                "name": "Position",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "v",
+                                      "name": "Right",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "v",
+                                      "name": "Right",
+                                    },
+                                    Object {
+                                      "id": "h",
+                                      "name": "Bottom",
+                                    },
+                                  ],
+                                },
+                              },
+                              Object {
+                                "component": [Function],
+                                "eleType": "input",
+                                "mapTo": "legendSize",
+                                "name": "Legend size",
+                                "title": "Legend size",
+                              },
+                            ],
+                          },
+                          Object {
+                            "editor": [Function],
+                            "id": "chart_styles",
+                            "mapTo": "chartStyles",
+                            "name": "Chart styles",
+                            "schemas": Array [
+                              Object {
+                                "component": [Function],
+                                "eleType": "buttons",
+                                "mapTo": "mode",
+                                "name": "Mode",
+                                "props": Object {
+                                  "defaultSelections": Array [
+                                    Object {
+                                      "id": "group",
+                                      "name": "Group",
+                                    },
+                                  ],
+                                  "options": Array [
+                                    Object {
+                                      "id": "group",
+                                      "name": "Group",
+                                    },
+                                    Object {
+                                      "id": "stack",
+                                      "name": "Stack",
+                                    },
+                                  ],
+                                },
+                              },
+                              Object {
+                                "component": [Function],
+                                "eleType": "input",
+                                "mapTo": "labelSize",
+                                "name": "Label size",
+                              },
+                              Object {
+                                "component": [Function],
+                                "defaultState": 0,
+                                "eleType": "slider",
+                                "mapTo": "rotateBarLabels",
+                                "name": "Rotate bar labels",
+                                "props": Object {
+                                  "max": 90,
+                                  "min": -90,
+                                  "showTicks": true,
+                                  "ticks": Array [
+                                    Object {
+                                      "label": "-90°",
+                                      "value": -90,
+                                    },
+                                    Object {
+                                      "label": "-45°",
+                                      "value": -45,
+                                    },
+                                    Object {
+                                      "label": "0°",
+                                      "value": 0,
+                                    },
+                                    Object {
+                                      "label": "45°",
+                                      "value": 45,
+                                    },
+                                    Object {
+                                      "label": "90°",
+                                      "value": 90,
+                                    },
+                                  ],
+                                },
+                              },
+                              Object {
+                                "component": [Function],
+                                "defaultState": 0.7,
+                                "eleType": "slider",
+                                "mapTo": "groupWidth",
+                                "name": "Group width",
+                                "props": Object {
+                                  "max": 1,
+                                  "step": 0.01,
+                                },
+                              },
+                              Object {
+                                "component": [Function],
+                                "defaultState": 0.97,
+                                "eleType": "slider",
+                                "mapTo": "barWidth",
+                                "name": "Bar width",
+                                "props": Object {
+                                  "max": 1,
+                                  "step": 0.01,
+                                },
+                              },
+                              Object {
+                                "component": [Function],
+                                "defaultState": 2,
+                                "eleType": "slider",
+                                "mapTo": "lineWidth",
+                                "name": "Line width",
+                                "props": Object {
+                                  "max": 10,
+                                },
+                              },
+                              Object {
+                                "component": [Function],
+                                "defaultState": 70,
+                                "eleType": "slider",
+                                "mapTo": "fillOpacity",
+                                "name": "Fill opacity",
+                                "props": Object {
+                                  "max": 100,
+                                },
+                              },
+                            ],
+                          },
+                          Object {
+                            "editor": [Function],
+                            "id": "color-theme",
+                            "mapTo": "colorTheme",
+                            "name": "Color theme",
+                            "schemas": Array [],
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "availability-panel",
+                        "mapTo": "availabilityConfig",
+                        "name": "Availability",
+                      },
+                    ],
+                  },
+                  "fillopacity": 70,
+                  "fulllabel": "Vertical bar",
+                  "groupwidth": 0.7,
+                  "icon": [Function],
+                  "iconType": "visBarVerticalStacked",
+                  "icontype": "visBarVerticalStacked",
+                  "id": "bar",
+                  "label": "Vertical bar",
+                  "labelangle": 0,
+                  "legendposition": "v",
+                  "linewidth": 2,
+                  "mode": "group",
+                  "name": "bar",
+                  "orientation": "v",
+                  "selection": Object {
+                    "dataLoss": "nothing",
+                  },
+                  "seriesaxis": "yaxis",
+                  "showlegend": "show",
+                  "type": "bar",
+                  "visconfig": Object {
+                    "config": Object {
+                      "displaylogo": false,
+                      "responsive": true,
+                    },
+                    "isUniColor": false,
+                    "layout": Object {
+                      "height": 1180,
+                      "legend": Object {
+                        "orientation": "v",
+                        "traceorder": "normal",
+                      },
+                      "margin": Object {
+                        "b": 30,
+                        "l": 60,
+                        "pad": 0,
+                        "r": 30,
+                        "t": 50,
+                      },
+                      "showlegend": true,
+                    },
+                  },
+                },
+              ]
+            }
+            singleSelection={true}
+            toggleButtonRef={[Function]}
+            updatePosition={[Function]}
+            value="Vertical bar"
+          >
+            <EuiFormControlLayout
+              compressed={false}
+              fullWidth={true}
+              icon={
+                Object {
+                  "aria-label": "Open list of options",
+                  "data-test-subj": "comboBoxToggleListButton",
+                  "disabled": undefined,
+                  "onClick": [Function],
+                  "ref": [Function],
+                  "side": "right",
+                  "type": "arrowDown",
+                }
+              }
+            >
+              <div
+                className="euiFormControlLayout euiFormControlLayout--fullWidth"
+              >
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
+                >
+                  <div
+                    className="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
+                    data-test-subj="comboBoxInput"
+                    onClick={[Function]}
+                    tabIndex={-1}
+                  >
+                    <EuiComboBoxPill
+                      asPlainText={false}
+                      barwidth={0.97}
+                      category="Visualizations"
+                      categoryaxis="xaxis"
+                      color="hollow"
+                      component={[Function]}
+                      editorconfig={
+                        Object {
+                          "panelTabs": Array [
+                            Object {
+                              "editor": [Function],
+                              "id": "data-panel",
+                              "mapTo": "dataConfig",
+                              "name": "Style",
+                              "sections": Array [
+                                Object {
+                                  "editor": [Function],
+                                  "id": "tooltip_options",
+                                  "mapTo": "tooltipOptions",
+                                  "name": "Tooltip options",
+                                  "schemas": Array [
+                                    Object {
+                                      "component": null,
+                                      "mapTo": "tooltipMode",
+                                      "name": "Tooltip mode",
+                                      "props": Object {
+                                        "defaultSelections": Array [
+                                          Object {
+                                            "id": "show",
+                                            "name": "Show",
+                                          },
+                                        ],
+                                        "options": Array [
+                                          Object {
+                                            "id": "show",
+                                            "name": "Show",
+                                          },
+                                          Object {
+                                            "id": "hidden",
+                                            "name": "Hidden",
+                                          },
+                                        ],
+                                      },
+                                    },
+                                    Object {
+                                      "component": null,
+                                      "mapTo": "tooltipText",
+                                      "name": "Tooltip text",
+                                      "props": Object {
+                                        "defaultSelections": Array [
+                                          Object {
+                                            "id": "all",
+                                            "name": "All",
+                                          },
+                                        ],
+                                        "options": Array [
+                                          Object {
+                                            "id": "all",
+                                            "name": "All",
+                                          },
+                                          Object {
+                                            "id": "x",
+                                            "name": "Dimension",
+                                          },
+                                          Object {
+                                            "id": "y",
+                                            "name": "Series",
+                                          },
+                                        ],
+                                      },
+                                    },
+                                  ],
+                                },
+                                Object {
+                                  "editor": [Function],
+                                  "id": "legend",
+                                  "mapTo": "legend",
+                                  "name": "Legend",
+                                  "schemas": Array [
+                                    Object {
+                                      "component": null,
+                                      "mapTo": "showLegend",
+                                      "name": "Show legend",
+                                      "props": Object {
+                                        "defaultSelections": Array [
+                                          Object {
+                                            "id": "show",
+                                            "name": "Show",
+                                          },
+                                        ],
+                                        "options": Array [
+                                          Object {
+                                            "id": "show",
+                                            "name": "Show",
+                                          },
+                                          Object {
+                                            "id": "hidden",
+                                            "name": "Hidden",
+                                          },
+                                        ],
+                                      },
+                                    },
+                                    Object {
+                                      "component": null,
+                                      "mapTo": "position",
+                                      "name": "Position",
+                                      "props": Object {
+                                        "defaultSelections": Array [
+                                          Object {
+                                            "id": "v",
+                                            "name": "Right",
+                                          },
+                                        ],
+                                        "options": Array [
+                                          Object {
+                                            "id": "v",
+                                            "name": "Right",
+                                          },
+                                          Object {
+                                            "id": "h",
+                                            "name": "Bottom",
+                                          },
+                                        ],
+                                      },
+                                    },
+                                    Object {
+                                      "component": [Function],
+                                      "eleType": "input",
+                                      "mapTo": "legendSize",
+                                      "name": "Legend size",
+                                      "title": "Legend size",
+                                    },
+                                  ],
+                                },
+                                Object {
+                                  "editor": [Function],
+                                  "id": "chart_styles",
+                                  "mapTo": "chartStyles",
+                                  "name": "Chart styles",
+                                  "schemas": Array [
+                                    Object {
+                                      "component": [Function],
+                                      "eleType": "buttons",
+                                      "mapTo": "mode",
+                                      "name": "Mode",
+                                      "props": Object {
+                                        "defaultSelections": Array [
+                                          Object {
+                                            "id": "group",
+                                            "name": "Group",
+                                          },
+                                        ],
+                                        "options": Array [
+                                          Object {
+                                            "id": "group",
+                                            "name": "Group",
+                                          },
+                                          Object {
+                                            "id": "stack",
+                                            "name": "Stack",
+                                          },
+                                        ],
+                                      },
+                                    },
+                                    Object {
+                                      "component": [Function],
+                                      "eleType": "input",
+                                      "mapTo": "labelSize",
+                                      "name": "Label size",
+                                    },
+                                    Object {
+                                      "component": [Function],
+                                      "defaultState": 0,
+                                      "eleType": "slider",
+                                      "mapTo": "rotateBarLabels",
+                                      "name": "Rotate bar labels",
+                                      "props": Object {
+                                        "max": 90,
+                                        "min": -90,
+                                        "showTicks": true,
+                                        "ticks": Array [
+                                          Object {
+                                            "label": "-90°",
+                                            "value": -90,
+                                          },
+                                          Object {
+                                            "label": "-45°",
+                                            "value": -45,
+                                          },
+                                          Object {
+                                            "label": "0°",
+                                            "value": 0,
+                                          },
+                                          Object {
+                                            "label": "45°",
+                                            "value": 45,
+                                          },
+                                          Object {
+                                            "label": "90°",
+                                            "value": 90,
+                                          },
+                                        ],
+                                      },
+                                    },
+                                    Object {
+                                      "component": [Function],
+                                      "defaultState": 0.7,
+                                      "eleType": "slider",
+                                      "mapTo": "groupWidth",
+                                      "name": "Group width",
+                                      "props": Object {
+                                        "max": 1,
+                                        "step": 0.01,
+                                      },
+                                    },
+                                    Object {
+                                      "component": [Function],
+                                      "defaultState": 0.97,
+                                      "eleType": "slider",
+                                      "mapTo": "barWidth",
+                                      "name": "Bar width",
+                                      "props": Object {
+                                        "max": 1,
+                                        "step": 0.01,
+                                      },
+                                    },
+                                    Object {
+                                      "component": [Function],
+                                      "defaultState": 2,
+                                      "eleType": "slider",
+                                      "mapTo": "lineWidth",
+                                      "name": "Line width",
+                                      "props": Object {
+                                        "max": 10,
+                                      },
+                                    },
+                                    Object {
+                                      "component": [Function],
+                                      "defaultState": 70,
+                                      "eleType": "slider",
+                                      "mapTo": "fillOpacity",
+                                      "name": "Fill opacity",
+                                      "props": Object {
+                                        "max": 100,
+                                      },
+                                    },
+                                  ],
+                                },
+                                Object {
+                                  "editor": [Function],
+                                  "id": "color-theme",
+                                  "mapTo": "colorTheme",
+                                  "name": "Color theme",
+                                  "schemas": Array [],
+                                },
+                              ],
+                            },
+                            Object {
+                              "editor": [Function],
+                              "id": "availability-panel",
+                              "mapTo": "availabilityConfig",
+                              "name": "Availability",
+                            },
+                          ],
+                        }
+                      }
+                      fillopacity={70}
+                      fulllabel="Vertical bar"
+                      groupwidth={0.7}
+                      icon={[Function]}
+                      iconType="visBarVerticalStacked"
+                      icontype="visBarVerticalStacked"
+                      id="bar"
+                      key="vertical bar"
+                      labelangle={0}
+                      legendposition="v"
+                      linewidth={2}
+                      mode="group"
+                      name="bar"
+                      option={
+                        Object {
+                          "barwidth": 0.97,
+                          "category": "Visualizations",
+                          "categoryaxis": "xaxis",
+                          "component": [Function],
+                          "editorconfig": Object {
+                            "panelTabs": Array [
+                              Object {
+                                "editor": [Function],
+                                "id": "data-panel",
+                                "mapTo": "dataConfig",
+                                "name": "Style",
+                                "sections": Array [
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "tooltip_options",
+                                    "mapTo": "tooltipOptions",
+                                    "name": "Tooltip options",
+                                    "schemas": Array [
+                                      Object {
+                                        "component": null,
+                                        "mapTo": "tooltipMode",
+                                        "name": "Tooltip mode",
+                                        "props": Object {
+                                          "defaultSelections": Array [
+                                            Object {
+                                              "id": "show",
+                                              "name": "Show",
+                                            },
+                                          ],
+                                          "options": Array [
+                                            Object {
+                                              "id": "show",
+                                              "name": "Show",
+                                            },
+                                            Object {
+                                              "id": "hidden",
+                                              "name": "Hidden",
+                                            },
+                                          ],
+                                        },
+                                      },
+                                      Object {
+                                        "component": null,
+                                        "mapTo": "tooltipText",
+                                        "name": "Tooltip text",
+                                        "props": Object {
+                                          "defaultSelections": Array [
+                                            Object {
+                                              "id": "all",
+                                              "name": "All",
+                                            },
+                                          ],
+                                          "options": Array [
+                                            Object {
+                                              "id": "all",
+                                              "name": "All",
+                                            },
+                                            Object {
+                                              "id": "x",
+                                              "name": "Dimension",
+                                            },
+                                            Object {
+                                              "id": "y",
+                                              "name": "Series",
+                                            },
+                                          ],
+                                        },
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "legend",
+                                    "mapTo": "legend",
+                                    "name": "Legend",
+                                    "schemas": Array [
+                                      Object {
+                                        "component": null,
+                                        "mapTo": "showLegend",
+                                        "name": "Show legend",
+                                        "props": Object {
+                                          "defaultSelections": Array [
+                                            Object {
+                                              "id": "show",
+                                              "name": "Show",
+                                            },
+                                          ],
+                                          "options": Array [
+                                            Object {
+                                              "id": "show",
+                                              "name": "Show",
+                                            },
+                                            Object {
+                                              "id": "hidden",
+                                              "name": "Hidden",
+                                            },
+                                          ],
+                                        },
+                                      },
+                                      Object {
+                                        "component": null,
+                                        "mapTo": "position",
+                                        "name": "Position",
+                                        "props": Object {
+                                          "defaultSelections": Array [
+                                            Object {
+                                              "id": "v",
+                                              "name": "Right",
+                                            },
+                                          ],
+                                          "options": Array [
+                                            Object {
+                                              "id": "v",
+                                              "name": "Right",
+                                            },
+                                            Object {
+                                              "id": "h",
+                                              "name": "Bottom",
+                                            },
+                                          ],
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "eleType": "input",
+                                        "mapTo": "legendSize",
+                                        "name": "Legend size",
+                                        "title": "Legend size",
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "chart_styles",
+                                    "mapTo": "chartStyles",
+                                    "name": "Chart styles",
+                                    "schemas": Array [
+                                      Object {
+                                        "component": [Function],
+                                        "eleType": "buttons",
+                                        "mapTo": "mode",
+                                        "name": "Mode",
+                                        "props": Object {
+                                          "defaultSelections": Array [
+                                            Object {
+                                              "id": "group",
+                                              "name": "Group",
+                                            },
+                                          ],
+                                          "options": Array [
+                                            Object {
+                                              "id": "group",
+                                              "name": "Group",
+                                            },
+                                            Object {
+                                              "id": "stack",
+                                              "name": "Stack",
+                                            },
+                                          ],
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "eleType": "input",
+                                        "mapTo": "labelSize",
+                                        "name": "Label size",
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "defaultState": 0,
+                                        "eleType": "slider",
+                                        "mapTo": "rotateBarLabels",
+                                        "name": "Rotate bar labels",
+                                        "props": Object {
+                                          "max": 90,
+                                          "min": -90,
+                                          "showTicks": true,
+                                          "ticks": Array [
+                                            Object {
+                                              "label": "-90°",
+                                              "value": -90,
+                                            },
+                                            Object {
+                                              "label": "-45°",
+                                              "value": -45,
+                                            },
+                                            Object {
+                                              "label": "0°",
+                                              "value": 0,
+                                            },
+                                            Object {
+                                              "label": "45°",
+                                              "value": 45,
+                                            },
+                                            Object {
+                                              "label": "90°",
+                                              "value": 90,
+                                            },
+                                          ],
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "defaultState": 0.7,
+                                        "eleType": "slider",
+                                        "mapTo": "groupWidth",
+                                        "name": "Group width",
+                                        "props": Object {
+                                          "max": 1,
+                                          "step": 0.01,
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "defaultState": 0.97,
+                                        "eleType": "slider",
+                                        "mapTo": "barWidth",
+                                        "name": "Bar width",
+                                        "props": Object {
+                                          "max": 1,
+                                          "step": 0.01,
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "defaultState": 2,
+                                        "eleType": "slider",
+                                        "mapTo": "lineWidth",
+                                        "name": "Line width",
+                                        "props": Object {
+                                          "max": 10,
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "defaultState": 70,
+                                        "eleType": "slider",
+                                        "mapTo": "fillOpacity",
+                                        "name": "Fill opacity",
+                                        "props": Object {
+                                          "max": 100,
+                                        },
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "color-theme",
+                                    "mapTo": "colorTheme",
+                                    "name": "Color theme",
+                                    "schemas": Array [],
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "availability-panel",
+                                "mapTo": "availabilityConfig",
+                                "name": "Availability",
+                              },
+                            ],
+                          },
+                          "fillopacity": 70,
+                          "fulllabel": "Vertical bar",
+                          "groupwidth": 0.7,
+                          "icon": [Function],
+                          "iconType": "visBarVerticalStacked",
+                          "icontype": "visBarVerticalStacked",
+                          "id": "bar",
+                          "label": "Vertical bar",
+                          "labelangle": 0,
+                          "legendposition": "v",
+                          "linewidth": 2,
+                          "mode": "group",
+                          "name": "bar",
+                          "orientation": "v",
+                          "selection": Object {
+                            "dataLoss": "nothing",
+                          },
+                          "seriesaxis": "yaxis",
+                          "showlegend": "show",
+                          "type": "bar",
+                          "visconfig": Object {
+                            "config": Object {
+                              "displaylogo": false,
+                              "responsive": true,
+                            },
+                            "isUniColor": false,
+                            "layout": Object {
+                              "height": 1180,
+                              "legend": Object {
+                                "orientation": "v",
+                                "traceorder": "normal",
+                              },
+                              "margin": Object {
+                                "b": 30,
+                                "l": 60,
+                                "pad": 0,
+                                "r": 30,
+                                "t": 50,
+                              },
+                              "showlegend": true,
+                            },
+                          },
+                        }
+                      }
+                      orientation="v"
+                      selection={
+                        Object {
+                          "dataLoss": "nothing",
+                        }
+                      }
+                      seriesaxis="yaxis"
+                      showlegend="show"
+                      type="bar"
+                      visconfig={
+                        Object {
+                          "config": Object {
+                            "displaylogo": false,
+                            "responsive": true,
+                          },
+                          "isUniColor": false,
+                          "layout": Object {
+                            "height": 1180,
+                            "legend": Object {
+                              "orientation": "v",
+                              "traceorder": "normal",
+                            },
+                            "margin": Object {
+                              "b": 30,
+                              "l": 60,
+                              "pad": 0,
+                              "r": 30,
+                              "t": 50,
+                            },
+                            "showlegend": true,
+                          },
+                        }
+                      }
+                    >
+                      <EuiBadge
+                        barwidth={0.97}
+                        category="Visualizations"
+                        categoryaxis="xaxis"
+                        className="euiComboBoxPill"
+                        color="hollow"
+                        component={[Function]}
+                        editorconfig={
+                          Object {
+                            "panelTabs": Array [
+                              Object {
+                                "editor": [Function],
+                                "id": "data-panel",
+                                "mapTo": "dataConfig",
+                                "name": "Style",
+                                "sections": Array [
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "tooltip_options",
+                                    "mapTo": "tooltipOptions",
+                                    "name": "Tooltip options",
+                                    "schemas": Array [
+                                      Object {
+                                        "component": null,
+                                        "mapTo": "tooltipMode",
+                                        "name": "Tooltip mode",
+                                        "props": Object {
+                                          "defaultSelections": Array [
+                                            Object {
+                                              "id": "show",
+                                              "name": "Show",
+                                            },
+                                          ],
+                                          "options": Array [
+                                            Object {
+                                              "id": "show",
+                                              "name": "Show",
+                                            },
+                                            Object {
+                                              "id": "hidden",
+                                              "name": "Hidden",
+                                            },
+                                          ],
+                                        },
+                                      },
+                                      Object {
+                                        "component": null,
+                                        "mapTo": "tooltipText",
+                                        "name": "Tooltip text",
+                                        "props": Object {
+                                          "defaultSelections": Array [
+                                            Object {
+                                              "id": "all",
+                                              "name": "All",
+                                            },
+                                          ],
+                                          "options": Array [
+                                            Object {
+                                              "id": "all",
+                                              "name": "All",
+                                            },
+                                            Object {
+                                              "id": "x",
+                                              "name": "Dimension",
+                                            },
+                                            Object {
+                                              "id": "y",
+                                              "name": "Series",
+                                            },
+                                          ],
+                                        },
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "legend",
+                                    "mapTo": "legend",
+                                    "name": "Legend",
+                                    "schemas": Array [
+                                      Object {
+                                        "component": null,
+                                        "mapTo": "showLegend",
+                                        "name": "Show legend",
+                                        "props": Object {
+                                          "defaultSelections": Array [
+                                            Object {
+                                              "id": "show",
+                                              "name": "Show",
+                                            },
+                                          ],
+                                          "options": Array [
+                                            Object {
+                                              "id": "show",
+                                              "name": "Show",
+                                            },
+                                            Object {
+                                              "id": "hidden",
+                                              "name": "Hidden",
+                                            },
+                                          ],
+                                        },
+                                      },
+                                      Object {
+                                        "component": null,
+                                        "mapTo": "position",
+                                        "name": "Position",
+                                        "props": Object {
+                                          "defaultSelections": Array [
+                                            Object {
+                                              "id": "v",
+                                              "name": "Right",
+                                            },
+                                          ],
+                                          "options": Array [
+                                            Object {
+                                              "id": "v",
+                                              "name": "Right",
+                                            },
+                                            Object {
+                                              "id": "h",
+                                              "name": "Bottom",
+                                            },
+                                          ],
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "eleType": "input",
+                                        "mapTo": "legendSize",
+                                        "name": "Legend size",
+                                        "title": "Legend size",
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "chart_styles",
+                                    "mapTo": "chartStyles",
+                                    "name": "Chart styles",
+                                    "schemas": Array [
+                                      Object {
+                                        "component": [Function],
+                                        "eleType": "buttons",
+                                        "mapTo": "mode",
+                                        "name": "Mode",
+                                        "props": Object {
+                                          "defaultSelections": Array [
+                                            Object {
+                                              "id": "group",
+                                              "name": "Group",
+                                            },
+                                          ],
+                                          "options": Array [
+                                            Object {
+                                              "id": "group",
+                                              "name": "Group",
+                                            },
+                                            Object {
+                                              "id": "stack",
+                                              "name": "Stack",
+                                            },
+                                          ],
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "eleType": "input",
+                                        "mapTo": "labelSize",
+                                        "name": "Label size",
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "defaultState": 0,
+                                        "eleType": "slider",
+                                        "mapTo": "rotateBarLabels",
+                                        "name": "Rotate bar labels",
+                                        "props": Object {
+                                          "max": 90,
+                                          "min": -90,
+                                          "showTicks": true,
+                                          "ticks": Array [
+                                            Object {
+                                              "label": "-90°",
+                                              "value": -90,
+                                            },
+                                            Object {
+                                              "label": "-45°",
+                                              "value": -45,
+                                            },
+                                            Object {
+                                              "label": "0°",
+                                              "value": 0,
+                                            },
+                                            Object {
+                                              "label": "45°",
+                                              "value": 45,
+                                            },
+                                            Object {
+                                              "label": "90°",
+                                              "value": 90,
+                                            },
+                                          ],
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "defaultState": 0.7,
+                                        "eleType": "slider",
+                                        "mapTo": "groupWidth",
+                                        "name": "Group width",
+                                        "props": Object {
+                                          "max": 1,
+                                          "step": 0.01,
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "defaultState": 0.97,
+                                        "eleType": "slider",
+                                        "mapTo": "barWidth",
+                                        "name": "Bar width",
+                                        "props": Object {
+                                          "max": 1,
+                                          "step": 0.01,
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "defaultState": 2,
+                                        "eleType": "slider",
+                                        "mapTo": "lineWidth",
+                                        "name": "Line width",
+                                        "props": Object {
+                                          "max": 10,
+                                        },
+                                      },
+                                      Object {
+                                        "component": [Function],
+                                        "defaultState": 70,
+                                        "eleType": "slider",
+                                        "mapTo": "fillOpacity",
+                                        "name": "Fill opacity",
+                                        "props": Object {
+                                          "max": 100,
+                                        },
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "color-theme",
+                                    "mapTo": "colorTheme",
+                                    "name": "Color theme",
+                                    "schemas": Array [],
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "availability-panel",
+                                "mapTo": "availabilityConfig",
+                                "name": "Availability",
+                              },
+                            ],
+                          }
+                        }
+                        fillopacity={70}
+                        fulllabel="Vertical bar"
+                        groupwidth={0.7}
+                        icon={[Function]}
+                        iconType="visBarVerticalStacked"
+                        icontype="visBarVerticalStacked"
+                        id="bar"
+                        labelangle={0}
+                        legendposition="v"
+                        linewidth={2}
+                        mode="group"
+                        name="bar"
+                        orientation="v"
+                        selection={
+                          Object {
+                            "dataLoss": "nothing",
+                          }
+                        }
+                        seriesaxis="yaxis"
+                        showlegend="show"
+                        title="Vertical bar"
+                        type="bar"
+                        visconfig={
+                          Object {
+                            "config": Object {
+                              "displaylogo": false,
+                              "responsive": true,
+                            },
+                            "isUniColor": false,
+                            "layout": Object {
+                              "height": 1180,
+                              "legend": Object {
+                                "orientation": "v",
+                                "traceorder": "normal",
+                              },
+                              "margin": Object {
+                                "b": 30,
+                                "l": 60,
+                                "pad": 0,
+                                "r": 30,
+                                "t": 50,
+                              },
+                              "showlegend": true,
+                            },
+                          }
+                        }
+                      >
+                        <EuiInnerText>
+                          <span
+                            barwidth={0.97}
+                            category="Visualizations"
+                            categoryaxis="xaxis"
+                            className="euiBadge euiBadge--hollow euiBadge--iconLeft euiComboBoxPill"
+                            component={[Function]}
+                            editorconfig={
+                              Object {
+                                "panelTabs": Array [
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "data-panel",
+                                    "mapTo": "dataConfig",
+                                    "name": "Style",
+                                    "sections": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "tooltip_options",
+                                        "mapTo": "tooltipOptions",
+                                        "name": "Tooltip options",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": null,
+                                            "mapTo": "tooltipMode",
+                                            "name": "Tooltip mode",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "show",
+                                                  "name": "Show",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "show",
+                                                  "name": "Show",
+                                                },
+                                                Object {
+                                                  "id": "hidden",
+                                                  "name": "Hidden",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": null,
+                                            "mapTo": "tooltipText",
+                                            "name": "Tooltip text",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "all",
+                                                  "name": "All",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "all",
+                                                  "name": "All",
+                                                },
+                                                Object {
+                                                  "id": "x",
+                                                  "name": "Dimension",
+                                                },
+                                                Object {
+                                                  "id": "y",
+                                                  "name": "Series",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "legend",
+                                        "mapTo": "legend",
+                                        "name": "Legend",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": null,
+                                            "mapTo": "showLegend",
+                                            "name": "Show legend",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "show",
+                                                  "name": "Show",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "show",
+                                                  "name": "Show",
+                                                },
+                                                Object {
+                                                  "id": "hidden",
+                                                  "name": "Hidden",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": null,
+                                            "mapTo": "position",
+                                            "name": "Position",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "v",
+                                                  "name": "Right",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "v",
+                                                  "name": "Right",
+                                                },
+                                                Object {
+                                                  "id": "h",
+                                                  "name": "Bottom",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "eleType": "input",
+                                            "mapTo": "legendSize",
+                                            "name": "Legend size",
+                                            "title": "Legend size",
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "chart_styles",
+                                        "mapTo": "chartStyles",
+                                        "name": "Chart styles",
+                                        "schemas": Array [
+                                          Object {
+                                            "component": [Function],
+                                            "eleType": "buttons",
+                                            "mapTo": "mode",
+                                            "name": "Mode",
+                                            "props": Object {
+                                              "defaultSelections": Array [
+                                                Object {
+                                                  "id": "group",
+                                                  "name": "Group",
+                                                },
+                                              ],
+                                              "options": Array [
+                                                Object {
+                                                  "id": "group",
+                                                  "name": "Group",
+                                                },
+                                                Object {
+                                                  "id": "stack",
+                                                  "name": "Stack",
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "eleType": "input",
+                                            "mapTo": "labelSize",
+                                            "name": "Label size",
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0,
+                                            "eleType": "slider",
+                                            "mapTo": "rotateBarLabels",
+                                            "name": "Rotate bar labels",
+                                            "props": Object {
+                                              "max": 90,
+                                              "min": -90,
+                                              "showTicks": true,
+                                              "ticks": Array [
+                                                Object {
+                                                  "label": "-90°",
+                                                  "value": -90,
+                                                },
+                                                Object {
+                                                  "label": "-45°",
+                                                  "value": -45,
+                                                },
+                                                Object {
+                                                  "label": "0°",
+                                                  "value": 0,
+                                                },
+                                                Object {
+                                                  "label": "45°",
+                                                  "value": 45,
+                                                },
+                                                Object {
+                                                  "label": "90°",
+                                                  "value": 90,
+                                                },
+                                              ],
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0.7,
+                                            "eleType": "slider",
+                                            "mapTo": "groupWidth",
+                                            "name": "Group width",
+                                            "props": Object {
+                                              "max": 1,
+                                              "step": 0.01,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 0.97,
+                                            "eleType": "slider",
+                                            "mapTo": "barWidth",
+                                            "name": "Bar width",
+                                            "props": Object {
+                                              "max": 1,
+                                              "step": 0.01,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 2,
+                                            "eleType": "slider",
+                                            "mapTo": "lineWidth",
+                                            "name": "Line width",
+                                            "props": Object {
+                                              "max": 10,
+                                            },
+                                          },
+                                          Object {
+                                            "component": [Function],
+                                            "defaultState": 70,
+                                            "eleType": "slider",
+                                            "mapTo": "fillOpacity",
+                                            "name": "Fill opacity",
+                                            "props": Object {
+                                              "max": 100,
+                                            },
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "color-theme",
+                                        "mapTo": "colorTheme",
+                                        "name": "Color theme",
+                                        "schemas": Array [],
+                                      },
+                                    ],
+                                  },
+                                  Object {
+                                    "editor": [Function],
+                                    "id": "availability-panel",
+                                    "mapTo": "availabilityConfig",
+                                    "name": "Availability",
+                                  },
+                                ],
+                              }
+                            }
+                            fillopacity={70}
+                            fulllabel="Vertical bar"
+                            groupwidth={0.7}
+                            icon={[Function]}
+                            icontype="visBarVerticalStacked"
+                            id="bar"
+                            labelangle={0}
+                            legendposition="v"
+                            linewidth={2}
+                            mode="group"
+                            name="bar"
+                            orientation="v"
+                            selection={
+                              Object {
+                                "dataLoss": "nothing",
+                              }
+                            }
+                            seriesaxis="yaxis"
+                            showlegend="show"
+                            title="Vertical bar"
+                            type="bar"
+                            visconfig={
+                              Object {
+                                "config": Object {
+                                  "displaylogo": false,
+                                  "responsive": true,
+                                },
+                                "isUniColor": false,
+                                "layout": Object {
+                                  "height": 1180,
+                                  "legend": Object {
+                                    "orientation": "v",
+                                    "traceorder": "normal",
+                                  },
+                                  "margin": Object {
+                                    "b": 30,
+                                    "l": 60,
+                                    "pad": 0,
+                                    "r": 30,
+                                    "t": 50,
+                                  },
+                                  "showlegend": true,
+                                },
+                              }
+                            }
+                          >
+                            <span
+                              className="euiBadge__content"
+                            >
+                              <span
+                                className="euiBadge__text"
+                              >
+                                Vertical bar
+                              </span>
+                              <EuiIcon
+                                className="euiBadge__icon"
+                                color="inherit"
+                                size="s"
+                                type="visBarVerticalStacked"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiBadge__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </span>
+                          </span>
+                        </EuiInnerText>
+                      </EuiBadge>
+                    </EuiComboBoxPill>
+                    <AutosizeInput
+                      aria-controls=""
+                      className="euiComboBox__input"
+                      data-test-subj="comboBoxSearchInput"
+                      injectStyles={true}
+                      inputRef={[Function]}
+                      minWidth={1}
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      role="textbox"
+                      style={
+                        Object {
+                          "fontSize": 14,
+                        }
+                      }
+                      value=""
+                    >
+                      <div
+                        className="euiComboBox__input"
+                        style={
+                          Object {
+                            "display": "inline-block",
+                            "fontSize": 14,
+                          }
+                        }
+                      >
+                        <input
+                          aria-controls=""
+                          data-test-subj="comboBoxSearchInput"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          role="textbox"
+                          style={
+                            Object {
+                              "boxSizing": "content-box",
+                              "width": "2px",
+                            }
+                          }
+                          value=""
+                        />
+                        <div
+                          style={
+                            Object {
+                              "height": 0,
+                              "left": 0,
+                              "overflow": "scroll",
+                              "position": "absolute",
+                              "top": 0,
+                              "visibility": "hidden",
+                              "whiteSpace": "pre",
+                            }
+                          }
+                        />
+                      </div>
+                    </AutosizeInput>
+                  </div>
+                  <EuiFormControlLayoutIcons
+                    compressed={false}
+                    icon={
+                      Object {
+                        "aria-label": "Open list of options",
+                        "data-test-subj": "comboBoxToggleListButton",
+                        "disabled": undefined,
+                        "onClick": [Function],
+                        "ref": [Function],
+                        "side": "right",
+                        "type": "arrowDown",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <EuiFormControlLayoutCustomIcon
+                        aria-label="Open list of options"
+                        data-test-subj="comboBoxToggleListButton"
+                        iconRef={[Function]}
+                        onClick={[Function]}
+                        size="m"
+                        type="arrowDown"
+                      >
+                        <button
+                          aria-label="Open list of options"
+                          className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                          data-test-subj="comboBoxToggleListButton"
+                          onClick={[Function]}
+                          type="button"
+                        >
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiFormControlLayoutCustomIcon__icon"
+                            size="m"
+                            type="arrowDown"
+                          >
+                            <EuiIconEmpty
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                              focusable="false"
+                              role="img"
+                              style={null}
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </EuiIconEmpty>
+                          </EuiIcon>
+                        </button>
+                      </EuiFormControlLayoutCustomIcon>
+                    </div>
+                  </EuiFormControlLayoutIcons>
+                </div>
+              </div>
+            </EuiFormControlLayout>
+          </EuiComboBoxInput>
+        </div>
+      </EuiComboBox>
+    </div>
+    <div
+      className="cp__rightSettings"
+    >
+      <EuiTabbedContent
+        autoFocus="initial"
+        className="vis-config-tabs"
+        onTabClick={[Function]}
+        selectedTab={
+          Object {
+            "content": <VizDataPanel
+              curVisId="bar"
+              onConfigChange={[Function]}
+              tabProps={
+                Object {
+                  "editor": [Function],
+                  "id": "data-panel",
+                  "mapTo": "dataConfig",
+                  "name": "Style",
+                  "sections": Array [
+                    Object {
+                      "editor": [Function],
+                      "id": "tooltip_options",
+                      "mapTo": "tooltipOptions",
+                      "name": "Tooltip options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipMode",
+                          "name": "Tooltip mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipText",
+                          "name": "Tooltip text",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                              Object {
+                                "id": "x",
+                                "name": "Dimension",
+                              },
+                              Object {
+                                "id": "y",
+                                "name": "Series",
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "legend",
+                      "mapTo": "legend",
+                      "name": "Legend",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "showLegend",
+                          "name": "Show legend",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "position",
+                          "name": "Position",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                              Object {
+                                "id": "h",
+                                "name": "Bottom",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "legendSize",
+                          "name": "Legend size",
+                          "title": "Legend size",
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "chart_styles",
+                      "mapTo": "chartStyles",
+                      "name": "Chart styles",
+                      "schemas": Array [
+                        Object {
+                          "component": [Function],
+                          "eleType": "buttons",
+                          "mapTo": "mode",
+                          "name": "Mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "group",
+                                "name": "Group",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "group",
+                                "name": "Group",
+                              },
+                              Object {
+                                "id": "stack",
+                                "name": "Stack",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "labelSize",
+                          "name": "Label size",
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0,
+                          "eleType": "slider",
+                          "mapTo": "rotateBarLabels",
+                          "name": "Rotate bar labels",
+                          "props": Object {
+                            "max": 90,
+                            "min": -90,
+                            "showTicks": true,
+                            "ticks": Array [
+                              Object {
+                                "label": "-90°",
+                                "value": -90,
+                              },
+                              Object {
+                                "label": "-45°",
+                                "value": -45,
+                              },
+                              Object {
+                                "label": "0°",
+                                "value": 0,
+                              },
+                              Object {
+                                "label": "45°",
+                                "value": 45,
+                              },
+                              Object {
+                                "label": "90°",
+                                "value": 90,
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0.7,
+                          "eleType": "slider",
+                          "mapTo": "groupWidth",
+                          "name": "Group width",
+                          "props": Object {
+                            "max": 1,
+                            "step": 0.01,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0.97,
+                          "eleType": "slider",
+                          "mapTo": "barWidth",
+                          "name": "Bar width",
+                          "props": Object {
+                            "max": 1,
+                            "step": 0.01,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 2,
+                          "eleType": "slider",
+                          "mapTo": "lineWidth",
+                          "name": "Line width",
+                          "props": Object {
+                            "max": 10,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 70,
+                          "eleType": "slider",
+                          "mapTo": "fillOpacity",
+                          "name": "Fill opacity",
+                          "props": Object {
+                            "max": 100,
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "color-theme",
+                      "mapTo": "colorTheme",
+                      "name": "Color theme",
+                      "schemas": Array [],
+                    },
+                  ],
+                }
+              }
+              visualizations={
+                Object {
+                  "data": Object {
+                    "appData": Object {
+                      "fromApp": false,
+                    },
+                    "defaultAxes": Object {},
+                    "indexFields": Object {
+                      "availableFields": Array [
+                        Object {
+                          "name": "agent",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "bytes",
+                          "type": "long",
+                        },
+                        Object {
+                          "name": "clientip",
+                          "type": "ip",
+                        },
+                        Object {
+                          "name": "event",
+                          "type": "struct",
+                        },
+                        Object {
+                          "name": "extension",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "geo",
+                          "type": "struct",
+                        },
+                        Object {
+                          "name": "host",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "index",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "ip",
+                          "type": "ip",
+                        },
+                        Object {
+                          "name": "machine",
+                          "type": "struct",
+                        },
+                        Object {
+                          "name": "memory",
+                          "type": "double",
+                        },
+                        Object {
+                          "name": "message",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "phpmemory",
+                          "type": "long",
+                        },
+                        Object {
+                          "name": "referer",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "request",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "response",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "tags",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "timestamp",
+                          "type": "timestamp",
+                        },
+                        Object {
+                          "name": "url",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "utc_time",
+                          "type": "timestamp",
+                        },
+                      ],
+                      "queriedFields": Array [
+                        Object {
+                          "name": "double_per_ip_bytes",
+                          "type": "long",
+                        },
+                        Object {
+                          "name": "host",
+                          "type": "text",
+                        },
+                        Object {
+                          "name": "ip_count",
+                          "type": "integer",
+                        },
+                        Object {
+                          "name": "per_ip_bytes",
+                          "type": "long",
+                        },
+                        Object {
+                          "name": "resp_code",
+                          "type": "text",
+                        },
+                        Object {
+                          "name": "sum_bytes",
+                          "type": "long",
+                        },
+                      ],
+                      "selectedFields": Array [],
+                      "unselectedFields": Array [],
+                    },
+                    "query": Object {},
+                    "rawVizData": Object {
+                      "data": Object {
+                        "count()": Array [
+                          154,
+                          1753,
+                          116,
+                          468,
+                          1964,
+                          219,
+                        ],
+                        "tags": Array [
+                          "error",
+                          "info",
+                          "login",
+                          "security",
+                          "success",
+                          "warning",
+                        ],
+                      },
+                      "jsonData": Array [
+                        Object {
+                          "count()": 154,
+                          "tags": "error",
+                        },
+                        Object {
+                          "count()": 1753,
+                          "tags": "info",
+                        },
+                        Object {
+                          "count()": 116,
+                          "tags": "login",
+                        },
+                        Object {
+                          "count()": 468,
+                          "tags": "security",
+                        },
+                        Object {
+                          "count()": 1964,
+                          "tags": "success",
+                        },
+                        Object {
+                          "count()": 219,
+                          "tags": "warning",
+                        },
+                      ],
+                      "metadata": Object {
+                        "fields": Array [
+                          Object {
+                            "name": "count()",
+                            "type": "integer",
+                          },
+                          Object {
+                            "name": "tags",
+                            "type": "text",
+                          },
+                        ],
+                        "size": 6,
+                        "status": 200,
+                      },
+                    },
+                    "userConfigs": Object {
+                      "dataConfig": Object {
+                        "valueOptions": Object {
+                          "dimensions": Array [
+                            Object {
+                              "label": "tags",
+                              "name": "tags",
+                              "type": "text",
+                            },
+                          ],
+                          "metrics": Array [
+                            Object {
+                              "label": "count()",
+                              "name": "count()",
+                              "side": "left",
+                              "type": "integer",
+                            },
+                          ],
+                        },
+                      },
+                    },
+                  },
+                  "vis": Object {
+                    "barwidth": 0.97,
+                    "category": "Visualizations",
+                    "categoryaxis": "xaxis",
+                    "component": [Function],
+                    "editorconfig": Object {
+                      "panelTabs": Array [
+                        Object {
+                          "editor": [Function],
+                          "id": "data-panel",
+                          "mapTo": "dataConfig",
+                          "name": "Style",
+                          "sections": Array [
+                            Object {
+                              "editor": [Function],
+                              "id": "tooltip_options",
+                              "mapTo": "tooltipOptions",
+                              "name": "Tooltip options",
+                              "schemas": Array [
+                                Object {
+                                  "component": null,
+                                  "mapTo": "tooltipMode",
+                                  "name": "Tooltip mode",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                      Object {
+                                        "id": "hidden",
+                                        "name": "Hidden",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": null,
+                                  "mapTo": "tooltipText",
+                                  "name": "Tooltip text",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "all",
+                                        "name": "All",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "all",
+                                        "name": "All",
+                                      },
+                                      Object {
+                                        "id": "x",
+                                        "name": "Dimension",
+                                      },
+                                      Object {
+                                        "id": "y",
+                                        "name": "Series",
+                                      },
+                                    ],
+                                  },
+                                },
+                              ],
+                            },
+                            Object {
+                              "editor": [Function],
+                              "id": "legend",
+                              "mapTo": "legend",
+                              "name": "Legend",
+                              "schemas": Array [
+                                Object {
+                                  "component": null,
+                                  "mapTo": "showLegend",
+                                  "name": "Show legend",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                      Object {
+                                        "id": "hidden",
+                                        "name": "Hidden",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": null,
+                                  "mapTo": "position",
+                                  "name": "Position",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "v",
+                                        "name": "Right",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "v",
+                                        "name": "Right",
+                                      },
+                                      Object {
+                                        "id": "h",
+                                        "name": "Bottom",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "input",
+                                  "mapTo": "legendSize",
+                                  "name": "Legend size",
+                                  "title": "Legend size",
+                                },
+                              ],
+                            },
+                            Object {
+                              "editor": [Function],
+                              "id": "chart_styles",
+                              "mapTo": "chartStyles",
+                              "name": "Chart styles",
+                              "schemas": Array [
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "buttons",
+                                  "mapTo": "mode",
+                                  "name": "Mode",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "group",
+                                        "name": "Group",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "group",
+                                        "name": "Group",
+                                      },
+                                      Object {
+                                        "id": "stack",
+                                        "name": "Stack",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "input",
+                                  "mapTo": "labelSize",
+                                  "name": "Label size",
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0,
+                                  "eleType": "slider",
+                                  "mapTo": "rotateBarLabels",
+                                  "name": "Rotate bar labels",
+                                  "props": Object {
+                                    "max": 90,
+                                    "min": -90,
+                                    "showTicks": true,
+                                    "ticks": Array [
+                                      Object {
+                                        "label": "-90°",
+                                        "value": -90,
+                                      },
+                                      Object {
+                                        "label": "-45°",
+                                        "value": -45,
+                                      },
+                                      Object {
+                                        "label": "0°",
+                                        "value": 0,
+                                      },
+                                      Object {
+                                        "label": "45°",
+                                        "value": 45,
+                                      },
+                                      Object {
+                                        "label": "90°",
+                                        "value": 90,
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0.7,
+                                  "eleType": "slider",
+                                  "mapTo": "groupWidth",
+                                  "name": "Group width",
+                                  "props": Object {
+                                    "max": 1,
+                                    "step": 0.01,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0.97,
+                                  "eleType": "slider",
+                                  "mapTo": "barWidth",
+                                  "name": "Bar width",
+                                  "props": Object {
+                                    "max": 1,
+                                    "step": 0.01,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 2,
+                                  "eleType": "slider",
+                                  "mapTo": "lineWidth",
+                                  "name": "Line width",
+                                  "props": Object {
+                                    "max": 10,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 70,
+                                  "eleType": "slider",
+                                  "mapTo": "fillOpacity",
+                                  "name": "Fill opacity",
+                                  "props": Object {
+                                    "max": 100,
+                                  },
+                                },
+                              ],
+                            },
+                            Object {
+                              "editor": [Function],
+                              "id": "color-theme",
+                              "mapTo": "colorTheme",
+                              "name": "Color theme",
+                              "schemas": Array [],
+                            },
+                          ],
+                        },
+                        Object {
+                          "editor": [Function],
+                          "id": "availability-panel",
+                          "mapTo": "availabilityConfig",
+                          "name": "Availability",
+                        },
+                      ],
+                    },
+                    "fillopacity": 70,
+                    "fulllabel": "Vertical bar",
+                    "groupwidth": 0.7,
+                    "icon": [Function],
+                    "icontype": "visBarVerticalStacked",
+                    "id": "bar",
+                    "label": "Vertical bar",
+                    "labelangle": 0,
+                    "legendposition": "v",
+                    "linewidth": 2,
+                    "mode": "group",
+                    "name": "bar",
+                    "orientation": "v",
+                    "selection": Object {
+                      "dataLoss": "nothing",
+                    },
+                    "seriesaxis": "yaxis",
+                    "showlegend": "show",
+                    "type": "bar",
+                    "visconfig": Object {
+                      "config": Object {
+                        "displaylogo": false,
+                        "responsive": true,
+                      },
+                      "isUniColor": false,
+                      "layout": Object {
+                        "height": 1180,
+                        "legend": Object {
+                          "orientation": "v",
+                          "traceorder": "normal",
+                        },
+                        "margin": Object {
+                          "b": 30,
+                          "l": 60,
+                          "pad": 0,
+                          "r": 30,
+                          "t": 50,
+                        },
+                        "showlegend": true,
+                      },
+                    },
+                  },
+                }
+              }
+              vizState={
+                Object {
+                  "valueOptions": Object {
+                    "dimensions": Array [
+                      Object {
+                        "label": "tags",
+                        "name": "tags",
+                        "type": "text",
+                      },
+                    ],
+                    "metrics": Array [
+                      Object {
+                        "label": "count()",
+                        "name": "count()",
+                        "side": "left",
+                        "type": "integer",
+                      },
+                    ],
+                  },
+                }
+              }
+            />,
+            "id": "data-panel",
+            "name": "Style",
+          }
+        }
+        tabs={
+          Array [
+            Object {
+              "content": <VizDataPanel
+                curVisId="bar"
+                onConfigChange={[Function]}
+                tabProps={
+                  Object {
+                    "editor": [Function],
+                    "id": "data-panel",
+                    "mapTo": "dataConfig",
+                    "name": "Style",
+                    "sections": Array [
+                      Object {
+                        "editor": [Function],
+                        "id": "tooltip_options",
+                        "mapTo": "tooltipOptions",
+                        "name": "Tooltip options",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipMode",
+                            "name": "Tooltip mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "tooltipText",
+                            "name": "Tooltip text",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "all",
+                                  "name": "All",
+                                },
+                                Object {
+                                  "id": "x",
+                                  "name": "Dimension",
+                                },
+                                Object {
+                                  "id": "y",
+                                  "name": "Series",
+                                },
+                              ],
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "legend",
+                        "mapTo": "legend",
+                        "name": "Legend",
+                        "schemas": Array [
+                          Object {
+                            "component": null,
+                            "mapTo": "showLegend",
+                            "name": "Show legend",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "show",
+                                  "name": "Show",
+                                },
+                                Object {
+                                  "id": "hidden",
+                                  "name": "Hidden",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": null,
+                            "mapTo": "position",
+                            "name": "Position",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "v",
+                                  "name": "Right",
+                                },
+                                Object {
+                                  "id": "h",
+                                  "name": "Bottom",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "legendSize",
+                            "name": "Legend size",
+                            "title": "Legend size",
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "chart_styles",
+                        "mapTo": "chartStyles",
+                        "name": "Chart styles",
+                        "schemas": Array [
+                          Object {
+                            "component": [Function],
+                            "eleType": "buttons",
+                            "mapTo": "mode",
+                            "name": "Mode",
+                            "props": Object {
+                              "defaultSelections": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                              ],
+                              "options": Array [
+                                Object {
+                                  "id": "group",
+                                  "name": "Group",
+                                },
+                                Object {
+                                  "id": "stack",
+                                  "name": "Stack",
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "eleType": "input",
+                            "mapTo": "labelSize",
+                            "name": "Label size",
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0,
+                            "eleType": "slider",
+                            "mapTo": "rotateBarLabels",
+                            "name": "Rotate bar labels",
+                            "props": Object {
+                              "max": 90,
+                              "min": -90,
+                              "showTicks": true,
+                              "ticks": Array [
+                                Object {
+                                  "label": "-90°",
+                                  "value": -90,
+                                },
+                                Object {
+                                  "label": "-45°",
+                                  "value": -45,
+                                },
+                                Object {
+                                  "label": "0°",
+                                  "value": 0,
+                                },
+                                Object {
+                                  "label": "45°",
+                                  "value": 45,
+                                },
+                                Object {
+                                  "label": "90°",
+                                  "value": 90,
+                                },
+                              ],
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.7,
+                            "eleType": "slider",
+                            "mapTo": "groupWidth",
+                            "name": "Group width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 0.97,
+                            "eleType": "slider",
+                            "mapTo": "barWidth",
+                            "name": "Bar width",
+                            "props": Object {
+                              "max": 1,
+                              "step": 0.01,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 2,
+                            "eleType": "slider",
+                            "mapTo": "lineWidth",
+                            "name": "Line width",
+                            "props": Object {
+                              "max": 10,
+                            },
+                          },
+                          Object {
+                            "component": [Function],
+                            "defaultState": 70,
+                            "eleType": "slider",
+                            "mapTo": "fillOpacity",
+                            "name": "Fill opacity",
+                            "props": Object {
+                              "max": 100,
+                            },
+                          },
+                        ],
+                      },
+                      Object {
+                        "editor": [Function],
+                        "id": "color-theme",
+                        "mapTo": "colorTheme",
+                        "name": "Color theme",
+                        "schemas": Array [],
+                      },
+                    ],
+                  }
+                }
+                visualizations={
+                  Object {
+                    "data": Object {
+                      "appData": Object {
+                        "fromApp": false,
+                      },
+                      "defaultAxes": Object {},
+                      "indexFields": Object {
+                        "availableFields": Array [
+                          Object {
+                            "name": "agent",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "bytes",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "clientip",
+                            "type": "ip",
+                          },
+                          Object {
+                            "name": "event",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "extension",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "geo",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "host",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "index",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "ip",
+                            "type": "ip",
+                          },
+                          Object {
+                            "name": "machine",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "memory",
+                            "type": "double",
+                          },
+                          Object {
+                            "name": "message",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "phpmemory",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "referer",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "request",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "response",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "tags",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "timestamp",
+                            "type": "timestamp",
+                          },
+                          Object {
+                            "name": "url",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "utc_time",
+                            "type": "timestamp",
+                          },
+                        ],
+                        "queriedFields": Array [
+                          Object {
+                            "name": "double_per_ip_bytes",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "host",
+                            "type": "text",
+                          },
+                          Object {
+                            "name": "ip_count",
+                            "type": "integer",
+                          },
+                          Object {
+                            "name": "per_ip_bytes",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "resp_code",
+                            "type": "text",
+                          },
+                          Object {
+                            "name": "sum_bytes",
+                            "type": "long",
+                          },
+                        ],
+                        "selectedFields": Array [],
+                        "unselectedFields": Array [],
+                      },
+                      "query": Object {},
+                      "rawVizData": Object {
+                        "data": Object {
+                          "count()": Array [
+                            154,
+                            1753,
+                            116,
+                            468,
+                            1964,
+                            219,
+                          ],
+                          "tags": Array [
+                            "error",
+                            "info",
+                            "login",
+                            "security",
+                            "success",
+                            "warning",
+                          ],
+                        },
+                        "jsonData": Array [
+                          Object {
+                            "count()": 154,
+                            "tags": "error",
+                          },
+                          Object {
+                            "count()": 1753,
+                            "tags": "info",
+                          },
+                          Object {
+                            "count()": 116,
+                            "tags": "login",
+                          },
+                          Object {
+                            "count()": 468,
+                            "tags": "security",
+                          },
+                          Object {
+                            "count()": 1964,
+                            "tags": "success",
+                          },
+                          Object {
+                            "count()": 219,
+                            "tags": "warning",
+                          },
+                        ],
+                        "metadata": Object {
+                          "fields": Array [
+                            Object {
+                              "name": "count()",
+                              "type": "integer",
+                            },
+                            Object {
+                              "name": "tags",
+                              "type": "text",
+                            },
+                          ],
+                          "size": 6,
+                          "status": 200,
+                        },
+                      },
+                      "userConfigs": Object {
+                        "dataConfig": Object {
+                          "valueOptions": Object {
+                            "dimensions": Array [
+                              Object {
+                                "label": "tags",
+                                "name": "tags",
+                                "type": "text",
+                              },
+                            ],
+                            "metrics": Array [
+                              Object {
+                                "label": "count()",
+                                "name": "count()",
+                                "side": "left",
+                                "type": "integer",
+                              },
+                            ],
+                          },
+                        },
+                      },
+                    },
+                    "vis": Object {
+                      "barwidth": 0.97,
+                      "category": "Visualizations",
+                      "categoryaxis": "xaxis",
+                      "component": [Function],
+                      "editorconfig": Object {
+                        "panelTabs": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "data-panel",
+                            "mapTo": "dataConfig",
+                            "name": "Style",
+                            "sections": Array [
+                              Object {
+                                "editor": [Function],
+                                "id": "tooltip_options",
+                                "mapTo": "tooltipOptions",
+                                "name": "Tooltip options",
+                                "schemas": Array [
+                                  Object {
+                                    "component": null,
+                                    "mapTo": "tooltipMode",
+                                    "name": "Tooltip mode",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "show",
+                                          "name": "Show",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "show",
+                                          "name": "Show",
+                                        },
+                                        Object {
+                                          "id": "hidden",
+                                          "name": "Hidden",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": null,
+                                    "mapTo": "tooltipText",
+                                    "name": "Tooltip text",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "all",
+                                          "name": "All",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "all",
+                                          "name": "All",
+                                        },
+                                        Object {
+                                          "id": "x",
+                                          "name": "Dimension",
+                                        },
+                                        Object {
+                                          "id": "y",
+                                          "name": "Series",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "legend",
+                                "mapTo": "legend",
+                                "name": "Legend",
+                                "schemas": Array [
+                                  Object {
+                                    "component": null,
+                                    "mapTo": "showLegend",
+                                    "name": "Show legend",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "show",
+                                          "name": "Show",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "show",
+                                          "name": "Show",
+                                        },
+                                        Object {
+                                          "id": "hidden",
+                                          "name": "Hidden",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": null,
+                                    "mapTo": "position",
+                                    "name": "Position",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "v",
+                                          "name": "Right",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "v",
+                                          "name": "Right",
+                                        },
+                                        Object {
+                                          "id": "h",
+                                          "name": "Bottom",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "eleType": "input",
+                                    "mapTo": "legendSize",
+                                    "name": "Legend size",
+                                    "title": "Legend size",
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "chart_styles",
+                                "mapTo": "chartStyles",
+                                "name": "Chart styles",
+                                "schemas": Array [
+                                  Object {
+                                    "component": [Function],
+                                    "eleType": "buttons",
+                                    "mapTo": "mode",
+                                    "name": "Mode",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "group",
+                                          "name": "Group",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "group",
+                                          "name": "Group",
+                                        },
+                                        Object {
+                                          "id": "stack",
+                                          "name": "Stack",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "eleType": "input",
+                                    "mapTo": "labelSize",
+                                    "name": "Label size",
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0,
+                                    "eleType": "slider",
+                                    "mapTo": "rotateBarLabels",
+                                    "name": "Rotate bar labels",
+                                    "props": Object {
+                                      "max": 90,
+                                      "min": -90,
+                                      "showTicks": true,
+                                      "ticks": Array [
+                                        Object {
+                                          "label": "-90°",
+                                          "value": -90,
+                                        },
+                                        Object {
+                                          "label": "-45°",
+                                          "value": -45,
+                                        },
+                                        Object {
+                                          "label": "0°",
+                                          "value": 0,
+                                        },
+                                        Object {
+                                          "label": "45°",
+                                          "value": 45,
+                                        },
+                                        Object {
+                                          "label": "90°",
+                                          "value": 90,
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0.7,
+                                    "eleType": "slider",
+                                    "mapTo": "groupWidth",
+                                    "name": "Group width",
+                                    "props": Object {
+                                      "max": 1,
+                                      "step": 0.01,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0.97,
+                                    "eleType": "slider",
+                                    "mapTo": "barWidth",
+                                    "name": "Bar width",
+                                    "props": Object {
+                                      "max": 1,
+                                      "step": 0.01,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 2,
+                                    "eleType": "slider",
+                                    "mapTo": "lineWidth",
+                                    "name": "Line width",
+                                    "props": Object {
+                                      "max": 10,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 70,
+                                    "eleType": "slider",
+                                    "mapTo": "fillOpacity",
+                                    "name": "Fill opacity",
+                                    "props": Object {
+                                      "max": 100,
+                                    },
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "color-theme",
+                                "mapTo": "colorTheme",
+                                "name": "Color theme",
+                                "schemas": Array [],
+                              },
+                            ],
+                          },
+                          Object {
+                            "editor": [Function],
+                            "id": "availability-panel",
+                            "mapTo": "availabilityConfig",
+                            "name": "Availability",
+                          },
+                        ],
+                      },
+                      "fillopacity": 70,
+                      "fulllabel": "Vertical bar",
+                      "groupwidth": 0.7,
+                      "icon": [Function],
+                      "icontype": "visBarVerticalStacked",
+                      "id": "bar",
+                      "label": "Vertical bar",
+                      "labelangle": 0,
+                      "legendposition": "v",
+                      "linewidth": 2,
+                      "mode": "group",
+                      "name": "bar",
+                      "orientation": "v",
+                      "selection": Object {
+                        "dataLoss": "nothing",
+                      },
+                      "seriesaxis": "yaxis",
+                      "showlegend": "show",
+                      "type": "bar",
+                      "visconfig": Object {
+                        "config": Object {
+                          "displaylogo": false,
+                          "responsive": true,
+                        },
+                        "isUniColor": false,
+                        "layout": Object {
+                          "height": 1180,
+                          "legend": Object {
+                            "orientation": "v",
+                            "traceorder": "normal",
+                          },
+                          "margin": Object {
+                            "b": 30,
+                            "l": 60,
+                            "pad": 0,
+                            "r": 30,
+                            "t": 50,
+                          },
+                          "showlegend": true,
+                        },
+                      },
+                    },
+                  }
+                }
+                vizState={
+                  Object {
+                    "valueOptions": Object {
+                      "dimensions": Array [
+                        Object {
+                          "label": "tags",
+                          "name": "tags",
+                          "type": "text",
+                        },
+                      ],
+                      "metrics": Array [
+                        Object {
+                          "label": "count()",
+                          "name": "count()",
+                          "side": "left",
+                          "type": "integer",
+                        },
+                      ],
+                    },
+                  }
+                }
+              />,
+              "id": "data-panel",
+              "name": "Style",
+            },
+            Object {
+              "content": <ConfigAvailability
+                curVisId="bar"
+                onConfigChange={[Function]}
+                tabProps={
+                  Object {
+                    "editor": [Function],
+                    "id": "availability-panel",
+                    "mapTo": "availabilityConfig",
+                    "name": "Availability",
+                  }
+                }
+                visualizations={
+                  Object {
+                    "data": Object {
+                      "appData": Object {
+                        "fromApp": false,
+                      },
+                      "defaultAxes": Object {},
+                      "indexFields": Object {
+                        "availableFields": Array [
+                          Object {
+                            "name": "agent",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "bytes",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "clientip",
+                            "type": "ip",
+                          },
+                          Object {
+                            "name": "event",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "extension",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "geo",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "host",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "index",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "ip",
+                            "type": "ip",
+                          },
+                          Object {
+                            "name": "machine",
+                            "type": "struct",
+                          },
+                          Object {
+                            "name": "memory",
+                            "type": "double",
+                          },
+                          Object {
+                            "name": "message",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "phpmemory",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "referer",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "request",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "response",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "tags",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "timestamp",
+                            "type": "timestamp",
+                          },
+                          Object {
+                            "name": "url",
+                            "type": "string",
+                          },
+                          Object {
+                            "name": "utc_time",
+                            "type": "timestamp",
+                          },
+                        ],
+                        "queriedFields": Array [
+                          Object {
+                            "name": "double_per_ip_bytes",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "host",
+                            "type": "text",
+                          },
+                          Object {
+                            "name": "ip_count",
+                            "type": "integer",
+                          },
+                          Object {
+                            "name": "per_ip_bytes",
+                            "type": "long",
+                          },
+                          Object {
+                            "name": "resp_code",
+                            "type": "text",
+                          },
+                          Object {
+                            "name": "sum_bytes",
+                            "type": "long",
+                          },
+                        ],
+                        "selectedFields": Array [],
+                        "unselectedFields": Array [],
+                      },
+                      "query": Object {},
+                      "rawVizData": Object {
+                        "data": Object {
+                          "count()": Array [
+                            154,
+                            1753,
+                            116,
+                            468,
+                            1964,
+                            219,
+                          ],
+                          "tags": Array [
+                            "error",
+                            "info",
+                            "login",
+                            "security",
+                            "success",
+                            "warning",
+                          ],
+                        },
+                        "jsonData": Array [
+                          Object {
+                            "count()": 154,
+                            "tags": "error",
+                          },
+                          Object {
+                            "count()": 1753,
+                            "tags": "info",
+                          },
+                          Object {
+                            "count()": 116,
+                            "tags": "login",
+                          },
+                          Object {
+                            "count()": 468,
+                            "tags": "security",
+                          },
+                          Object {
+                            "count()": 1964,
+                            "tags": "success",
+                          },
+                          Object {
+                            "count()": 219,
+                            "tags": "warning",
+                          },
+                        ],
+                        "metadata": Object {
+                          "fields": Array [
+                            Object {
+                              "name": "count()",
+                              "type": "integer",
+                            },
+                            Object {
+                              "name": "tags",
+                              "type": "text",
+                            },
+                          ],
+                          "size": 6,
+                          "status": 200,
+                        },
+                      },
+                      "userConfigs": Object {
+                        "dataConfig": Object {
+                          "valueOptions": Object {
+                            "dimensions": Array [
+                              Object {
+                                "label": "tags",
+                                "name": "tags",
+                                "type": "text",
+                              },
+                            ],
+                            "metrics": Array [
+                              Object {
+                                "label": "count()",
+                                "name": "count()",
+                                "side": "left",
+                                "type": "integer",
+                              },
+                            ],
+                          },
+                        },
+                      },
+                    },
+                    "vis": Object {
+                      "barwidth": 0.97,
+                      "category": "Visualizations",
+                      "categoryaxis": "xaxis",
+                      "component": [Function],
+                      "editorconfig": Object {
+                        "panelTabs": Array [
+                          Object {
+                            "editor": [Function],
+                            "id": "data-panel",
+                            "mapTo": "dataConfig",
+                            "name": "Style",
+                            "sections": Array [
+                              Object {
+                                "editor": [Function],
+                                "id": "tooltip_options",
+                                "mapTo": "tooltipOptions",
+                                "name": "Tooltip options",
+                                "schemas": Array [
+                                  Object {
+                                    "component": null,
+                                    "mapTo": "tooltipMode",
+                                    "name": "Tooltip mode",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "show",
+                                          "name": "Show",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "show",
+                                          "name": "Show",
+                                        },
+                                        Object {
+                                          "id": "hidden",
+                                          "name": "Hidden",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": null,
+                                    "mapTo": "tooltipText",
+                                    "name": "Tooltip text",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "all",
+                                          "name": "All",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "all",
+                                          "name": "All",
+                                        },
+                                        Object {
+                                          "id": "x",
+                                          "name": "Dimension",
+                                        },
+                                        Object {
+                                          "id": "y",
+                                          "name": "Series",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "legend",
+                                "mapTo": "legend",
+                                "name": "Legend",
+                                "schemas": Array [
+                                  Object {
+                                    "component": null,
+                                    "mapTo": "showLegend",
+                                    "name": "Show legend",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "show",
+                                          "name": "Show",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "show",
+                                          "name": "Show",
+                                        },
+                                        Object {
+                                          "id": "hidden",
+                                          "name": "Hidden",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": null,
+                                    "mapTo": "position",
+                                    "name": "Position",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "v",
+                                          "name": "Right",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "v",
+                                          "name": "Right",
+                                        },
+                                        Object {
+                                          "id": "h",
+                                          "name": "Bottom",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "eleType": "input",
+                                    "mapTo": "legendSize",
+                                    "name": "Legend size",
+                                    "title": "Legend size",
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "chart_styles",
+                                "mapTo": "chartStyles",
+                                "name": "Chart styles",
+                                "schemas": Array [
+                                  Object {
+                                    "component": [Function],
+                                    "eleType": "buttons",
+                                    "mapTo": "mode",
+                                    "name": "Mode",
+                                    "props": Object {
+                                      "defaultSelections": Array [
+                                        Object {
+                                          "id": "group",
+                                          "name": "Group",
+                                        },
+                                      ],
+                                      "options": Array [
+                                        Object {
+                                          "id": "group",
+                                          "name": "Group",
+                                        },
+                                        Object {
+                                          "id": "stack",
+                                          "name": "Stack",
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "eleType": "input",
+                                    "mapTo": "labelSize",
+                                    "name": "Label size",
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0,
+                                    "eleType": "slider",
+                                    "mapTo": "rotateBarLabels",
+                                    "name": "Rotate bar labels",
+                                    "props": Object {
+                                      "max": 90,
+                                      "min": -90,
+                                      "showTicks": true,
+                                      "ticks": Array [
+                                        Object {
+                                          "label": "-90°",
+                                          "value": -90,
+                                        },
+                                        Object {
+                                          "label": "-45°",
+                                          "value": -45,
+                                        },
+                                        Object {
+                                          "label": "0°",
+                                          "value": 0,
+                                        },
+                                        Object {
+                                          "label": "45°",
+                                          "value": 45,
+                                        },
+                                        Object {
+                                          "label": "90°",
+                                          "value": 90,
+                                        },
+                                      ],
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0.7,
+                                    "eleType": "slider",
+                                    "mapTo": "groupWidth",
+                                    "name": "Group width",
+                                    "props": Object {
+                                      "max": 1,
+                                      "step": 0.01,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 0.97,
+                                    "eleType": "slider",
+                                    "mapTo": "barWidth",
+                                    "name": "Bar width",
+                                    "props": Object {
+                                      "max": 1,
+                                      "step": 0.01,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 2,
+                                    "eleType": "slider",
+                                    "mapTo": "lineWidth",
+                                    "name": "Line width",
+                                    "props": Object {
+                                      "max": 10,
+                                    },
+                                  },
+                                  Object {
+                                    "component": [Function],
+                                    "defaultState": 70,
+                                    "eleType": "slider",
+                                    "mapTo": "fillOpacity",
+                                    "name": "Fill opacity",
+                                    "props": Object {
+                                      "max": 100,
+                                    },
+                                  },
+                                ],
+                              },
+                              Object {
+                                "editor": [Function],
+                                "id": "color-theme",
+                                "mapTo": "colorTheme",
+                                "name": "Color theme",
+                                "schemas": Array [],
+                              },
+                            ],
+                          },
+                          Object {
+                            "editor": [Function],
+                            "id": "availability-panel",
+                            "mapTo": "availabilityConfig",
+                            "name": "Availability",
+                          },
+                        ],
+                      },
+                      "fillopacity": 70,
+                      "fulllabel": "Vertical bar",
+                      "groupwidth": 0.7,
+                      "icon": [Function],
+                      "icontype": "visBarVerticalStacked",
+                      "id": "bar",
+                      "label": "Vertical bar",
+                      "labelangle": 0,
+                      "legendposition": "v",
+                      "linewidth": 2,
+                      "mode": "group",
+                      "name": "bar",
+                      "orientation": "v",
+                      "selection": Object {
+                        "dataLoss": "nothing",
+                      },
+                      "seriesaxis": "yaxis",
+                      "showlegend": "show",
+                      "type": "bar",
+                      "visconfig": Object {
+                        "config": Object {
+                          "displaylogo": false,
+                          "responsive": true,
+                        },
+                        "isUniColor": false,
+                        "layout": Object {
+                          "height": 1180,
+                          "legend": Object {
+                            "orientation": "v",
+                            "traceorder": "normal",
+                          },
+                          "margin": Object {
+                            "b": 30,
+                            "l": 60,
+                            "pad": 0,
+                            "r": 30,
+                            "t": 50,
+                          },
+                          "showlegend": true,
+                        },
+                      },
+                    },
+                  }
+                }
+              />,
+              "id": "availability-panel",
+              "name": "Availability",
+            },
+          ]
+        }
+      >
+        <div
+          className="vis-config-tabs"
+        >
+          <EuiTabs
+            onFocus={[Function]}
+          >
+            <div
+              className="euiTabs"
+              onFocus={[Function]}
+              role="tablist"
+            >
+              <EuiTab
+                aria-controls="random_html_id"
+                id="data-panel"
+                isSelected={true}
+                key="data-panel"
+                onClick={[Function]}
+              >
+                <button
+                  aria-controls="random_html_id"
+                  aria-selected={true}
+                  className="euiTab euiTab-isSelected"
+                  disabled={false}
+                  id="data-panel"
+                  onClick={[Function]}
+                  role="tab"
+                  type="button"
+                >
+                  <span
+                    className="euiTab__content"
+                  >
+                    Style
+                  </span>
+                </button>
+              </EuiTab>
+              <EuiTab
+                aria-controls="random_html_id"
+                id="availability-panel"
+                isSelected={false}
+                key="availability-panel"
+                onClick={[Function]}
+              >
+                <button
+                  aria-controls="random_html_id"
+                  aria-selected={false}
+                  className="euiTab"
+                  disabled={false}
+                  id="availability-panel"
+                  onClick={[Function]}
+                  role="tab"
+                  type="button"
+                >
+                  <span
+                    className="euiTab__content"
+                  >
+                    Availability
+                  </span>
+                </button>
+              </EuiTab>
+            </div>
+          </EuiTabs>
+          <div
+            aria-labelledby="data-panel"
+            id="random_html_id"
+            role="tabpanel"
+          >
+            <VizDataPanel
+              curVisId="bar"
+              onConfigChange={[Function]}
+              tabProps={
+                Object {
+                  "editor": [Function],
+                  "id": "data-panel",
+                  "mapTo": "dataConfig",
+                  "name": "Style",
+                  "sections": Array [
+                    Object {
+                      "editor": [Function],
+                      "id": "tooltip_options",
+                      "mapTo": "tooltipOptions",
+                      "name": "Tooltip options",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipMode",
+                          "name": "Tooltip mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "tooltipText",
+                          "name": "Tooltip text",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "all",
+                                "name": "All",
+                              },
+                              Object {
+                                "id": "x",
+                                "name": "Dimension",
+                              },
+                              Object {
+                                "id": "y",
+                                "name": "Series",
+                              },
+                            ],
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "legend",
+                      "mapTo": "legend",
+                      "name": "Legend",
+                      "schemas": Array [
+                        Object {
+                          "component": null,
+                          "mapTo": "showLegend",
+                          "name": "Show legend",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "show",
+                                "name": "Show",
+                              },
+                              Object {
+                                "id": "hidden",
+                                "name": "Hidden",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": null,
+                          "mapTo": "position",
+                          "name": "Position",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "v",
+                                "name": "Right",
+                              },
+                              Object {
+                                "id": "h",
+                                "name": "Bottom",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "legendSize",
+                          "name": "Legend size",
+                          "title": "Legend size",
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "chart_styles",
+                      "mapTo": "chartStyles",
+                      "name": "Chart styles",
+                      "schemas": Array [
+                        Object {
+                          "component": [Function],
+                          "eleType": "buttons",
+                          "mapTo": "mode",
+                          "name": "Mode",
+                          "props": Object {
+                            "defaultSelections": Array [
+                              Object {
+                                "id": "group",
+                                "name": "Group",
+                              },
+                            ],
+                            "options": Array [
+                              Object {
+                                "id": "group",
+                                "name": "Group",
+                              },
+                              Object {
+                                "id": "stack",
+                                "name": "Stack",
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "eleType": "input",
+                          "mapTo": "labelSize",
+                          "name": "Label size",
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0,
+                          "eleType": "slider",
+                          "mapTo": "rotateBarLabels",
+                          "name": "Rotate bar labels",
+                          "props": Object {
+                            "max": 90,
+                            "min": -90,
+                            "showTicks": true,
+                            "ticks": Array [
+                              Object {
+                                "label": "-90°",
+                                "value": -90,
+                              },
+                              Object {
+                                "label": "-45°",
+                                "value": -45,
+                              },
+                              Object {
+                                "label": "0°",
+                                "value": 0,
+                              },
+                              Object {
+                                "label": "45°",
+                                "value": 45,
+                              },
+                              Object {
+                                "label": "90°",
+                                "value": 90,
+                              },
+                            ],
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0.7,
+                          "eleType": "slider",
+                          "mapTo": "groupWidth",
+                          "name": "Group width",
+                          "props": Object {
+                            "max": 1,
+                            "step": 0.01,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 0.97,
+                          "eleType": "slider",
+                          "mapTo": "barWidth",
+                          "name": "Bar width",
+                          "props": Object {
+                            "max": 1,
+                            "step": 0.01,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 2,
+                          "eleType": "slider",
+                          "mapTo": "lineWidth",
+                          "name": "Line width",
+                          "props": Object {
+                            "max": 10,
+                          },
+                        },
+                        Object {
+                          "component": [Function],
+                          "defaultState": 70,
+                          "eleType": "slider",
+                          "mapTo": "fillOpacity",
+                          "name": "Fill opacity",
+                          "props": Object {
+                            "max": 100,
+                          },
+                        },
+                      ],
+                    },
+                    Object {
+                      "editor": [Function],
+                      "id": "color-theme",
+                      "mapTo": "colorTheme",
+                      "name": "Color theme",
+                      "schemas": Array [],
+                    },
+                  ],
+                }
+              }
+              visualizations={
+                Object {
+                  "data": Object {
+                    "appData": Object {
+                      "fromApp": false,
+                    },
+                    "defaultAxes": Object {},
+                    "indexFields": Object {
+                      "availableFields": Array [
+                        Object {
+                          "name": "agent",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "bytes",
+                          "type": "long",
+                        },
+                        Object {
+                          "name": "clientip",
+                          "type": "ip",
+                        },
+                        Object {
+                          "name": "event",
+                          "type": "struct",
+                        },
+                        Object {
+                          "name": "extension",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "geo",
+                          "type": "struct",
+                        },
+                        Object {
+                          "name": "host",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "index",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "ip",
+                          "type": "ip",
+                        },
+                        Object {
+                          "name": "machine",
+                          "type": "struct",
+                        },
+                        Object {
+                          "name": "memory",
+                          "type": "double",
+                        },
+                        Object {
+                          "name": "message",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "phpmemory",
+                          "type": "long",
+                        },
+                        Object {
+                          "name": "referer",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "request",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "response",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "tags",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "timestamp",
+                          "type": "timestamp",
+                        },
+                        Object {
+                          "name": "url",
+                          "type": "string",
+                        },
+                        Object {
+                          "name": "utc_time",
+                          "type": "timestamp",
+                        },
+                      ],
+                      "queriedFields": Array [
+                        Object {
+                          "name": "double_per_ip_bytes",
+                          "type": "long",
+                        },
+                        Object {
+                          "name": "host",
+                          "type": "text",
+                        },
+                        Object {
+                          "name": "ip_count",
+                          "type": "integer",
+                        },
+                        Object {
+                          "name": "per_ip_bytes",
+                          "type": "long",
+                        },
+                        Object {
+                          "name": "resp_code",
+                          "type": "text",
+                        },
+                        Object {
+                          "name": "sum_bytes",
+                          "type": "long",
+                        },
+                      ],
+                      "selectedFields": Array [],
+                      "unselectedFields": Array [],
+                    },
+                    "query": Object {},
+                    "rawVizData": Object {
+                      "data": Object {
+                        "count()": Array [
+                          154,
+                          1753,
+                          116,
+                          468,
+                          1964,
+                          219,
+                        ],
+                        "tags": Array [
+                          "error",
+                          "info",
+                          "login",
+                          "security",
+                          "success",
+                          "warning",
+                        ],
+                      },
+                      "jsonData": Array [
+                        Object {
+                          "count()": 154,
+                          "tags": "error",
+                        },
+                        Object {
+                          "count()": 1753,
+                          "tags": "info",
+                        },
+                        Object {
+                          "count()": 116,
+                          "tags": "login",
+                        },
+                        Object {
+                          "count()": 468,
+                          "tags": "security",
+                        },
+                        Object {
+                          "count()": 1964,
+                          "tags": "success",
+                        },
+                        Object {
+                          "count()": 219,
+                          "tags": "warning",
+                        },
+                      ],
+                      "metadata": Object {
+                        "fields": Array [
+                          Object {
+                            "name": "count()",
+                            "type": "integer",
+                          },
+                          Object {
+                            "name": "tags",
+                            "type": "text",
+                          },
+                        ],
+                        "size": 6,
+                        "status": 200,
+                      },
+                    },
+                    "userConfigs": Object {
+                      "dataConfig": Object {
+                        "valueOptions": Object {
+                          "dimensions": Array [
+                            Object {
+                              "label": "tags",
+                              "name": "tags",
+                              "type": "text",
+                            },
+                          ],
+                          "metrics": Array [
+                            Object {
+                              "label": "count()",
+                              "name": "count()",
+                              "side": "left",
+                              "type": "integer",
+                            },
+                          ],
+                        },
+                      },
+                    },
+                  },
+                  "vis": Object {
+                    "barwidth": 0.97,
+                    "category": "Visualizations",
+                    "categoryaxis": "xaxis",
+                    "component": [Function],
+                    "editorconfig": Object {
+                      "panelTabs": Array [
+                        Object {
+                          "editor": [Function],
+                          "id": "data-panel",
+                          "mapTo": "dataConfig",
+                          "name": "Style",
+                          "sections": Array [
+                            Object {
+                              "editor": [Function],
+                              "id": "tooltip_options",
+                              "mapTo": "tooltipOptions",
+                              "name": "Tooltip options",
+                              "schemas": Array [
+                                Object {
+                                  "component": null,
+                                  "mapTo": "tooltipMode",
+                                  "name": "Tooltip mode",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                      Object {
+                                        "id": "hidden",
+                                        "name": "Hidden",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": null,
+                                  "mapTo": "tooltipText",
+                                  "name": "Tooltip text",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "all",
+                                        "name": "All",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "all",
+                                        "name": "All",
+                                      },
+                                      Object {
+                                        "id": "x",
+                                        "name": "Dimension",
+                                      },
+                                      Object {
+                                        "id": "y",
+                                        "name": "Series",
+                                      },
+                                    ],
+                                  },
+                                },
+                              ],
+                            },
+                            Object {
+                              "editor": [Function],
+                              "id": "legend",
+                              "mapTo": "legend",
+                              "name": "Legend",
+                              "schemas": Array [
+                                Object {
+                                  "component": null,
+                                  "mapTo": "showLegend",
+                                  "name": "Show legend",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                      Object {
+                                        "id": "hidden",
+                                        "name": "Hidden",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": null,
+                                  "mapTo": "position",
+                                  "name": "Position",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "v",
+                                        "name": "Right",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "v",
+                                        "name": "Right",
+                                      },
+                                      Object {
+                                        "id": "h",
+                                        "name": "Bottom",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "input",
+                                  "mapTo": "legendSize",
+                                  "name": "Legend size",
+                                  "title": "Legend size",
+                                },
+                              ],
+                            },
+                            Object {
+                              "editor": [Function],
+                              "id": "chart_styles",
+                              "mapTo": "chartStyles",
+                              "name": "Chart styles",
+                              "schemas": Array [
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "buttons",
+                                  "mapTo": "mode",
+                                  "name": "Mode",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "group",
+                                        "name": "Group",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "group",
+                                        "name": "Group",
+                                      },
+                                      Object {
+                                        "id": "stack",
+                                        "name": "Stack",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "input",
+                                  "mapTo": "labelSize",
+                                  "name": "Label size",
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0,
+                                  "eleType": "slider",
+                                  "mapTo": "rotateBarLabels",
+                                  "name": "Rotate bar labels",
+                                  "props": Object {
+                                    "max": 90,
+                                    "min": -90,
+                                    "showTicks": true,
+                                    "ticks": Array [
+                                      Object {
+                                        "label": "-90°",
+                                        "value": -90,
+                                      },
+                                      Object {
+                                        "label": "-45°",
+                                        "value": -45,
+                                      },
+                                      Object {
+                                        "label": "0°",
+                                        "value": 0,
+                                      },
+                                      Object {
+                                        "label": "45°",
+                                        "value": 45,
+                                      },
+                                      Object {
+                                        "label": "90°",
+                                        "value": 90,
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0.7,
+                                  "eleType": "slider",
+                                  "mapTo": "groupWidth",
+                                  "name": "Group width",
+                                  "props": Object {
+                                    "max": 1,
+                                    "step": 0.01,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0.97,
+                                  "eleType": "slider",
+                                  "mapTo": "barWidth",
+                                  "name": "Bar width",
+                                  "props": Object {
+                                    "max": 1,
+                                    "step": 0.01,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 2,
+                                  "eleType": "slider",
+                                  "mapTo": "lineWidth",
+                                  "name": "Line width",
+                                  "props": Object {
+                                    "max": 10,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 70,
+                                  "eleType": "slider",
+                                  "mapTo": "fillOpacity",
+                                  "name": "Fill opacity",
+                                  "props": Object {
+                                    "max": 100,
+                                  },
+                                },
+                              ],
+                            },
+                            Object {
+                              "editor": [Function],
+                              "id": "color-theme",
+                              "mapTo": "colorTheme",
+                              "name": "Color theme",
+                              "schemas": Array [],
+                            },
+                          ],
+                        },
+                        Object {
+                          "editor": [Function],
+                          "id": "availability-panel",
+                          "mapTo": "availabilityConfig",
+                          "name": "Availability",
+                        },
+                      ],
+                    },
+                    "fillopacity": 70,
+                    "fulllabel": "Vertical bar",
+                    "groupwidth": 0.7,
+                    "icon": [Function],
+                    "icontype": "visBarVerticalStacked",
+                    "id": "bar",
+                    "label": "Vertical bar",
+                    "labelangle": 0,
+                    "legendposition": "v",
+                    "linewidth": 2,
+                    "mode": "group",
+                    "name": "bar",
+                    "orientation": "v",
+                    "selection": Object {
+                      "dataLoss": "nothing",
+                    },
+                    "seriesaxis": "yaxis",
+                    "showlegend": "show",
+                    "type": "bar",
+                    "visconfig": Object {
+                      "config": Object {
+                        "displaylogo": false,
+                        "responsive": true,
+                      },
+                      "isUniColor": false,
+                      "layout": Object {
+                        "height": 1180,
+                        "legend": Object {
+                          "orientation": "v",
+                          "traceorder": "normal",
+                        },
+                        "margin": Object {
+                          "b": 30,
+                          "l": 60,
+                          "pad": 0,
+                          "r": 30,
+                          "t": 50,
+                        },
+                        "showlegend": true,
+                      },
+                    },
+                  },
+                }
+              }
+              vizState={
+                Object {
+                  "valueOptions": Object {
+                    "dimensions": Array [
+                      Object {
+                        "label": "tags",
+                        "name": "tags",
+                        "type": "text",
+                      },
+                    ],
+                    "metrics": Array [
+                      Object {
+                        "label": "count()",
+                        "name": "count()",
+                        "side": "left",
+                        "type": "integer",
+                      },
+                    ],
+                  },
+                }
+              }
+            >
+              <div
+                className="visEditorSidebar__config"
+              >
+                <EuiForm
+                  className="visEditorSidebar__form"
+                >
+                  <div
+                    className="euiForm visEditorSidebar__form"
+                  >
+                    <EuiFormRow
+                      describedByIds={Array []}
+                      display="row"
+                      fullWidth={false}
+                      hasChildLabel={true}
+                      hasEmptyLabelSpace={false}
+                      labelType="label"
+                    >
+                      <div
+                        className="euiFormRow"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <ConfigPanelOptions
+                            handleConfigChange={[Function]}
+                            id="random_html_id"
+                            onBlur={[Function]}
+                            onFocus={[Function]}
+                            visualizations={
+                              Object {
+                                "data": Object {
+                                  "appData": Object {
+                                    "fromApp": false,
+                                  },
+                                  "defaultAxes": Object {},
+                                  "indexFields": Object {
+                                    "availableFields": Array [
+                                      Object {
+                                        "name": "agent",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "clientip",
+                                        "type": "ip",
+                                      },
+                                      Object {
+                                        "name": "event",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "extension",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "geo",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "host",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "index",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "ip",
+                                        "type": "ip",
+                                      },
+                                      Object {
+                                        "name": "machine",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "memory",
+                                        "type": "double",
+                                      },
+                                      Object {
+                                        "name": "message",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "phpmemory",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "referer",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "request",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "response",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "tags",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "timestamp",
+                                        "type": "timestamp",
+                                      },
+                                      Object {
+                                        "name": "url",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "utc_time",
+                                        "type": "timestamp",
+                                      },
+                                    ],
+                                    "queriedFields": Array [
+                                      Object {
+                                        "name": "double_per_ip_bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "host",
+                                        "type": "text",
+                                      },
+                                      Object {
+                                        "name": "ip_count",
+                                        "type": "integer",
+                                      },
+                                      Object {
+                                        "name": "per_ip_bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "resp_code",
+                                        "type": "text",
+                                      },
+                                      Object {
+                                        "name": "sum_bytes",
+                                        "type": "long",
+                                      },
+                                    ],
+                                    "selectedFields": Array [],
+                                    "unselectedFields": Array [],
+                                  },
+                                  "query": Object {},
+                                  "rawVizData": Object {
+                                    "data": Object {
+                                      "count()": Array [
+                                        154,
+                                        1753,
+                                        116,
+                                        468,
+                                        1964,
+                                        219,
+                                      ],
+                                      "tags": Array [
+                                        "error",
+                                        "info",
+                                        "login",
+                                        "security",
+                                        "success",
+                                        "warning",
+                                      ],
+                                    },
+                                    "jsonData": Array [
+                                      Object {
+                                        "count()": 154,
+                                        "tags": "error",
+                                      },
+                                      Object {
+                                        "count()": 1753,
+                                        "tags": "info",
+                                      },
+                                      Object {
+                                        "count()": 116,
+                                        "tags": "login",
+                                      },
+                                      Object {
+                                        "count()": 468,
+                                        "tags": "security",
+                                      },
+                                      Object {
+                                        "count()": 1964,
+                                        "tags": "success",
+                                      },
+                                      Object {
+                                        "count()": 219,
+                                        "tags": "warning",
+                                      },
+                                    ],
+                                    "metadata": Object {
+                                      "fields": Array [
+                                        Object {
+                                          "name": "count()",
+                                          "type": "integer",
+                                        },
+                                        Object {
+                                          "name": "tags",
+                                          "type": "text",
+                                        },
+                                      ],
+                                      "size": 6,
+                                      "status": 200,
+                                    },
+                                  },
+                                  "userConfigs": Object {
+                                    "dataConfig": Object {
+                                      "valueOptions": Object {
+                                        "dimensions": Array [
+                                          Object {
+                                            "label": "tags",
+                                            "name": "tags",
+                                            "type": "text",
+                                          },
+                                        ],
+                                        "metrics": Array [
+                                          Object {
+                                            "label": "count()",
+                                            "name": "count()",
+                                            "side": "left",
+                                            "type": "integer",
+                                          },
+                                        ],
+                                      },
+                                    },
+                                  },
+                                },
+                                "vis": Object {
+                                  "barwidth": 0.97,
+                                  "category": "Visualizations",
+                                  "categoryaxis": "xaxis",
+                                  "component": [Function],
+                                  "editorconfig": Object {
+                                    "panelTabs": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "data-panel",
+                                        "mapTo": "dataConfig",
+                                        "name": "Style",
+                                        "sections": Array [
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "tooltip_options",
+                                            "mapTo": "tooltipOptions",
+                                            "name": "Tooltip options",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "tooltipMode",
+                                                "name": "Tooltip mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "tooltipText",
+                                                "name": "Tooltip text",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "all",
+                                                      "name": "All",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "all",
+                                                      "name": "All",
+                                                    },
+                                                    Object {
+                                                      "id": "x",
+                                                      "name": "Dimension",
+                                                    },
+                                                    Object {
+                                                      "id": "y",
+                                                      "name": "Series",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "legend",
+                                            "mapTo": "legend",
+                                            "name": "Legend",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "showLegend",
+                                                "name": "Show legend",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "position",
+                                                "name": "Position",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                    Object {
+                                                      "id": "h",
+                                                      "name": "Bottom",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "input",
+                                                "mapTo": "legendSize",
+                                                "name": "Legend size",
+                                                "title": "Legend size",
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "chart_styles",
+                                            "mapTo": "chartStyles",
+                                            "name": "Chart styles",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "buttons",
+                                                "mapTo": "mode",
+                                                "name": "Mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                    Object {
+                                                      "id": "stack",
+                                                      "name": "Stack",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "input",
+                                                "mapTo": "labelSize",
+                                                "name": "Label size",
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0,
+                                                "eleType": "slider",
+                                                "mapTo": "rotateBarLabels",
+                                                "name": "Rotate bar labels",
+                                                "props": Object {
+                                                  "max": 90,
+                                                  "min": -90,
+                                                  "showTicks": true,
+                                                  "ticks": Array [
+                                                    Object {
+                                                      "label": "-90°",
+                                                      "value": -90,
+                                                    },
+                                                    Object {
+                                                      "label": "-45°",
+                                                      "value": -45,
+                                                    },
+                                                    Object {
+                                                      "label": "0°",
+                                                      "value": 0,
+                                                    },
+                                                    Object {
+                                                      "label": "45°",
+                                                      "value": 45,
+                                                    },
+                                                    Object {
+                                                      "label": "90°",
+                                                      "value": 90,
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.7,
+                                                "eleType": "slider",
+                                                "mapTo": "groupWidth",
+                                                "name": "Group width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.97,
+                                                "eleType": "slider",
+                                                "mapTo": "barWidth",
+                                                "name": "Bar width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 2,
+                                                "eleType": "slider",
+                                                "mapTo": "lineWidth",
+                                                "name": "Line width",
+                                                "props": Object {
+                                                  "max": 10,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 70,
+                                                "eleType": "slider",
+                                                "mapTo": "fillOpacity",
+                                                "name": "Fill opacity",
+                                                "props": Object {
+                                                  "max": 100,
+                                                },
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "color-theme",
+                                            "mapTo": "colorTheme",
+                                            "name": "Color theme",
+                                            "schemas": Array [],
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "availability-panel",
+                                        "mapTo": "availabilityConfig",
+                                        "name": "Availability",
+                                      },
+                                    ],
+                                  },
+                                  "fillopacity": 70,
+                                  "fulllabel": "Vertical bar",
+                                  "groupwidth": 0.7,
+                                  "icon": [Function],
+                                  "icontype": "visBarVerticalStacked",
+                                  "id": "bar",
+                                  "label": "Vertical bar",
+                                  "labelangle": 0,
+                                  "legendposition": "v",
+                                  "linewidth": 2,
+                                  "mode": "group",
+                                  "name": "bar",
+                                  "orientation": "v",
+                                  "selection": Object {
+                                    "dataLoss": "nothing",
+                                  },
+                                  "seriesaxis": "yaxis",
+                                  "showlegend": "show",
+                                  "type": "bar",
+                                  "visconfig": Object {
+                                    "config": Object {
+                                      "displaylogo": false,
+                                      "responsive": true,
+                                    },
+                                    "isUniColor": false,
+                                    "layout": Object {
+                                      "height": 1180,
+                                      "legend": Object {
+                                        "orientation": "v",
+                                        "traceorder": "normal",
+                                      },
+                                      "margin": Object {
+                                        "b": 30,
+                                        "l": 60,
+                                        "pad": 0,
+                                        "r": 30,
+                                        "t": 50,
+                                      },
+                                      "showlegend": true,
+                                    },
+                                  },
+                                },
+                              }
+                            }
+                          >
+                            <EuiAccordion
+                              arrowDisplay="left"
+                              buttonContent="Panel options"
+                              id="configPanel__panelOptions"
+                              initialIsOpen={true}
+                              isLoading={false}
+                              isLoadingMessage={false}
+                              paddingSize="s"
+                            >
+                              <div
+                                className="euiAccordion euiAccordion-isOpen"
+                              >
+                                <div
+                                  className="euiAccordion__triggerWrapper"
+                                >
+                                  <button
+                                    aria-controls="configPanel__panelOptions"
+                                    aria-expanded={true}
+                                    className="euiAccordion__button"
+                                    id="random_html_id"
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <span
+                                      className="euiAccordion__iconWrapper"
+                                    >
+                                      <EuiIcon
+                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </span>
+                                    <span
+                                      className="euiIEFlexWrapFix"
+                                    >
+                                      Panel options
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  aria-labelledby="random_html_id"
+                                  className="euiAccordion__childWrapper"
+                                  id="configPanel__panelOptions"
+                                  role="region"
+                                  tabIndex={-1}
+                                >
+                                  <EuiResizeObserver
+                                    onResize={[Function]}
+                                  >
+                                    <div>
+                                      <div
+                                        className="euiAccordion__padding--s"
+                                      >
+                                        <EuiForm
+                                          component="form"
+                                        >
+                                          <form
+                                            className="euiForm"
+                                          >
+                                            <EuiFormRow
+                                              describedByIds={Array []}
+                                              display="row"
+                                              fullWidth={true}
+                                              hasChildLabel={true}
+                                              hasEmptyLabelSpace={false}
+                                              helpText="Name your visualization."
+                                              label="Title"
+                                              labelType="label"
+                                            >
+                                              <div
+                                                className="euiFormRow euiFormRow--fullWidth"
+                                                id="random_html_id-row"
+                                              >
+                                                <div
+                                                  className="euiFormRow__labelWrapper"
+                                                >
+                                                  <EuiFormLabel
+                                                    className="euiFormRow__label"
+                                                    htmlFor="random_html_id"
+                                                    isFocused={false}
+                                                    type="label"
+                                                  >
+                                                    <label
+                                                      className="euiFormLabel euiFormRow__label"
+                                                      htmlFor="random_html_id"
+                                                    >
+                                                      Title
+                                                    </label>
+                                                  </EuiFormLabel>
+                                                </div>
+                                                <div
+                                                  className="euiFormRow__fieldWrapper"
+                                                >
+                                                  <EuiFieldText
+                                                    aria-describedby="random_html_id-help-0"
+                                                    id="random_html_id"
+                                                    name="title"
+                                                    onBlur={[Function]}
+                                                    onChange={[Function]}
+                                                    onFocus={[Function]}
+                                                    placeholder="Title"
+                                                    value=""
+                                                  >
+                                                    <EuiFormControlLayout
+                                                      fullWidth={false}
+                                                      inputId="random_html_id"
+                                                    >
+                                                      <div
+                                                        className="euiFormControlLayout"
+                                                      >
+                                                        <div
+                                                          className="euiFormControlLayout__childrenWrapper"
+                                                        >
+                                                          <EuiValidatableControl>
+                                                            <input
+                                                              aria-describedby="random_html_id-help-0"
+                                                              className="euiFieldText"
+                                                              id="random_html_id"
+                                                              name="title"
+                                                              onBlur={[Function]}
+                                                              onChange={[Function]}
+                                                              onFocus={[Function]}
+                                                              placeholder="Title"
+                                                              type="text"
+                                                              value=""
+                                                            />
+                                                          </EuiValidatableControl>
+                                                          <EuiFormControlLayoutIcons />
+                                                        </div>
+                                                      </div>
+                                                    </EuiFormControlLayout>
+                                                  </EuiFieldText>
+                                                  <EuiFormHelpText
+                                                    className="euiFormRow__text"
+                                                    id="random_html_id-help-0"
+                                                    key="Name your visualization."
+                                                  >
+                                                    <div
+                                                      className="euiFormHelpText euiFormRow__text"
+                                                      id="random_html_id-help-0"
+                                                    >
+                                                      Name your visualization.
+                                                    </div>
+                                                  </EuiFormHelpText>
+                                                </div>
+                                              </div>
+                                            </EuiFormRow>
+                                            <EuiFormRow
+                                              describedByIds={Array []}
+                                              display="row"
+                                              fullWidth={false}
+                                              hasChildLabel={true}
+                                              hasEmptyLabelSpace={false}
+                                              label="Description"
+                                              labelType="label"
+                                            >
+                                              <div
+                                                className="euiFormRow"
+                                                id="random_html_id-row"
+                                              >
+                                                <div
+                                                  className="euiFormRow__labelWrapper"
+                                                >
+                                                  <EuiFormLabel
+                                                    className="euiFormRow__label"
+                                                    htmlFor="random_html_id"
+                                                    isFocused={false}
+                                                    type="label"
+                                                  >
+                                                    <label
+                                                      className="euiFormLabel euiFormRow__label"
+                                                      htmlFor="random_html_id"
+                                                    >
+                                                      Description
+                                                    </label>
+                                                  </EuiFormLabel>
+                                                </div>
+                                                <div
+                                                  className="euiFormRow__fieldWrapper"
+                                                >
+                                                  <EuiTextArea
+                                                    aria-label="Use aria labels when no actual label is in use"
+                                                    id="random_html_id"
+                                                    name="description"
+                                                    onBlur={[Function]}
+                                                    onChange={[Function]}
+                                                    onFocus={[Function]}
+                                                    placeholder="Description"
+                                                    value=""
+                                                  >
+                                                    <EuiValidatableControl>
+                                                      <textarea
+                                                        aria-label="Use aria labels when no actual label is in use"
+                                                        className="euiTextArea euiTextArea--resizeVertical"
+                                                        id="random_html_id"
+                                                        name="description"
+                                                        onBlur={[Function]}
+                                                        onChange={[Function]}
+                                                        onFocus={[Function]}
+                                                        placeholder="Description"
+                                                        rows={6}
+                                                        value=""
+                                                      />
+                                                    </EuiValidatableControl>
+                                                  </EuiTextArea>
+                                                </div>
+                                              </div>
+                                            </EuiFormRow>
+                                          </form>
+                                        </EuiForm>
+                                      </div>
+                                    </div>
+                                  </EuiResizeObserver>
+                                </div>
+                              </div>
+                            </EuiAccordion>
+                          </ConfigPanelOptions>
+                        </div>
+                      </div>
+                    </EuiFormRow>
+                    <EuiFormRow
+                      describedByIds={Array []}
+                      display="row"
+                      fullWidth={true}
+                      hasChildLabel={true}
+                      hasEmptyLabelSpace={false}
+                      labelType="label"
+                    >
+                      <div
+                        className="euiFormRow euiFormRow--fullWidth"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <ConfigTooltip
+                            handleConfigChange={[Function]}
+                            id="random_html_id"
+                            onBlur={[Function]}
+                            onFocus={[Function]}
+                            props={Object {}}
+                            schemas={
+                              Array [
+                                Object {
+                                  "component": null,
+                                  "mapTo": "tooltipMode",
+                                  "name": "Tooltip mode",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                      Object {
+                                        "id": "hidden",
+                                        "name": "Hidden",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": null,
+                                  "mapTo": "tooltipText",
+                                  "name": "Tooltip text",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "all",
+                                        "name": "All",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "all",
+                                        "name": "All",
+                                      },
+                                      Object {
+                                        "id": "x",
+                                        "name": "Dimension",
+                                      },
+                                      Object {
+                                        "id": "y",
+                                        "name": "Series",
+                                      },
+                                    ],
+                                  },
+                                },
+                              ]
+                            }
+                            sectionId="tooltip_options"
+                            sectionName="Tooltip options"
+                            visualizations={
+                              Object {
+                                "data": Object {
+                                  "appData": Object {
+                                    "fromApp": false,
+                                  },
+                                  "defaultAxes": Object {},
+                                  "indexFields": Object {
+                                    "availableFields": Array [
+                                      Object {
+                                        "name": "agent",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "clientip",
+                                        "type": "ip",
+                                      },
+                                      Object {
+                                        "name": "event",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "extension",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "geo",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "host",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "index",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "ip",
+                                        "type": "ip",
+                                      },
+                                      Object {
+                                        "name": "machine",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "memory",
+                                        "type": "double",
+                                      },
+                                      Object {
+                                        "name": "message",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "phpmemory",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "referer",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "request",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "response",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "tags",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "timestamp",
+                                        "type": "timestamp",
+                                      },
+                                      Object {
+                                        "name": "url",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "utc_time",
+                                        "type": "timestamp",
+                                      },
+                                    ],
+                                    "queriedFields": Array [
+                                      Object {
+                                        "name": "double_per_ip_bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "host",
+                                        "type": "text",
+                                      },
+                                      Object {
+                                        "name": "ip_count",
+                                        "type": "integer",
+                                      },
+                                      Object {
+                                        "name": "per_ip_bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "resp_code",
+                                        "type": "text",
+                                      },
+                                      Object {
+                                        "name": "sum_bytes",
+                                        "type": "long",
+                                      },
+                                    ],
+                                    "selectedFields": Array [],
+                                    "unselectedFields": Array [],
+                                  },
+                                  "query": Object {},
+                                  "rawVizData": Object {
+                                    "data": Object {
+                                      "count()": Array [
+                                        154,
+                                        1753,
+                                        116,
+                                        468,
+                                        1964,
+                                        219,
+                                      ],
+                                      "tags": Array [
+                                        "error",
+                                        "info",
+                                        "login",
+                                        "security",
+                                        "success",
+                                        "warning",
+                                      ],
+                                    },
+                                    "jsonData": Array [
+                                      Object {
+                                        "count()": 154,
+                                        "tags": "error",
+                                      },
+                                      Object {
+                                        "count()": 1753,
+                                        "tags": "info",
+                                      },
+                                      Object {
+                                        "count()": 116,
+                                        "tags": "login",
+                                      },
+                                      Object {
+                                        "count()": 468,
+                                        "tags": "security",
+                                      },
+                                      Object {
+                                        "count()": 1964,
+                                        "tags": "success",
+                                      },
+                                      Object {
+                                        "count()": 219,
+                                        "tags": "warning",
+                                      },
+                                    ],
+                                    "metadata": Object {
+                                      "fields": Array [
+                                        Object {
+                                          "name": "count()",
+                                          "type": "integer",
+                                        },
+                                        Object {
+                                          "name": "tags",
+                                          "type": "text",
+                                        },
+                                      ],
+                                      "size": 6,
+                                      "status": 200,
+                                    },
+                                  },
+                                  "userConfigs": Object {
+                                    "dataConfig": Object {
+                                      "valueOptions": Object {
+                                        "dimensions": Array [
+                                          Object {
+                                            "label": "tags",
+                                            "name": "tags",
+                                            "type": "text",
+                                          },
+                                        ],
+                                        "metrics": Array [
+                                          Object {
+                                            "label": "count()",
+                                            "name": "count()",
+                                            "side": "left",
+                                            "type": "integer",
+                                          },
+                                        ],
+                                      },
+                                    },
+                                  },
+                                },
+                                "vis": Object {
+                                  "barwidth": 0.97,
+                                  "category": "Visualizations",
+                                  "categoryaxis": "xaxis",
+                                  "component": [Function],
+                                  "editorconfig": Object {
+                                    "panelTabs": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "data-panel",
+                                        "mapTo": "dataConfig",
+                                        "name": "Style",
+                                        "sections": Array [
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "tooltip_options",
+                                            "mapTo": "tooltipOptions",
+                                            "name": "Tooltip options",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "tooltipMode",
+                                                "name": "Tooltip mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "tooltipText",
+                                                "name": "Tooltip text",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "all",
+                                                      "name": "All",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "all",
+                                                      "name": "All",
+                                                    },
+                                                    Object {
+                                                      "id": "x",
+                                                      "name": "Dimension",
+                                                    },
+                                                    Object {
+                                                      "id": "y",
+                                                      "name": "Series",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "legend",
+                                            "mapTo": "legend",
+                                            "name": "Legend",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "showLegend",
+                                                "name": "Show legend",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "position",
+                                                "name": "Position",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                    Object {
+                                                      "id": "h",
+                                                      "name": "Bottom",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "input",
+                                                "mapTo": "legendSize",
+                                                "name": "Legend size",
+                                                "title": "Legend size",
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "chart_styles",
+                                            "mapTo": "chartStyles",
+                                            "name": "Chart styles",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "buttons",
+                                                "mapTo": "mode",
+                                                "name": "Mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                    Object {
+                                                      "id": "stack",
+                                                      "name": "Stack",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "input",
+                                                "mapTo": "labelSize",
+                                                "name": "Label size",
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0,
+                                                "eleType": "slider",
+                                                "mapTo": "rotateBarLabels",
+                                                "name": "Rotate bar labels",
+                                                "props": Object {
+                                                  "max": 90,
+                                                  "min": -90,
+                                                  "showTicks": true,
+                                                  "ticks": Array [
+                                                    Object {
+                                                      "label": "-90°",
+                                                      "value": -90,
+                                                    },
+                                                    Object {
+                                                      "label": "-45°",
+                                                      "value": -45,
+                                                    },
+                                                    Object {
+                                                      "label": "0°",
+                                                      "value": 0,
+                                                    },
+                                                    Object {
+                                                      "label": "45°",
+                                                      "value": 45,
+                                                    },
+                                                    Object {
+                                                      "label": "90°",
+                                                      "value": 90,
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.7,
+                                                "eleType": "slider",
+                                                "mapTo": "groupWidth",
+                                                "name": "Group width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.97,
+                                                "eleType": "slider",
+                                                "mapTo": "barWidth",
+                                                "name": "Bar width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 2,
+                                                "eleType": "slider",
+                                                "mapTo": "lineWidth",
+                                                "name": "Line width",
+                                                "props": Object {
+                                                  "max": 10,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 70,
+                                                "eleType": "slider",
+                                                "mapTo": "fillOpacity",
+                                                "name": "Fill opacity",
+                                                "props": Object {
+                                                  "max": 100,
+                                                },
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "color-theme",
+                                            "mapTo": "colorTheme",
+                                            "name": "Color theme",
+                                            "schemas": Array [],
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "availability-panel",
+                                        "mapTo": "availabilityConfig",
+                                        "name": "Availability",
+                                      },
+                                    ],
+                                  },
+                                  "fillopacity": 70,
+                                  "fulllabel": "Vertical bar",
+                                  "groupwidth": 0.7,
+                                  "icon": [Function],
+                                  "icontype": "visBarVerticalStacked",
+                                  "id": "bar",
+                                  "label": "Vertical bar",
+                                  "labelangle": 0,
+                                  "legendposition": "v",
+                                  "linewidth": 2,
+                                  "mode": "group",
+                                  "name": "bar",
+                                  "orientation": "v",
+                                  "selection": Object {
+                                    "dataLoss": "nothing",
+                                  },
+                                  "seriesaxis": "yaxis",
+                                  "showlegend": "show",
+                                  "type": "bar",
+                                  "visconfig": Object {
+                                    "config": Object {
+                                      "displaylogo": false,
+                                      "responsive": true,
+                                    },
+                                    "isUniColor": false,
+                                    "layout": Object {
+                                      "height": 1180,
+                                      "legend": Object {
+                                        "orientation": "v",
+                                        "traceorder": "normal",
+                                      },
+                                      "margin": Object {
+                                        "b": 30,
+                                        "l": 60,
+                                        "pad": 0,
+                                        "r": 30,
+                                        "t": 50,
+                                      },
+                                      "showlegend": true,
+                                    },
+                                  },
+                                },
+                              }
+                            }
+                            vizState={Object {}}
+                          >
+                            <EuiAccordion
+                              arrowDisplay="left"
+                              buttonContent="Tooltip options"
+                              id="random_html_id"
+                              initialIsOpen={true}
+                              isLoading={false}
+                              isLoadingMessage={false}
+                              paddingSize="s"
+                            >
+                              <div
+                                className="euiAccordion euiAccordion-isOpen"
+                              >
+                                <div
+                                  className="euiAccordion__triggerWrapper"
+                                >
+                                  <button
+                                    aria-controls="random_html_id"
+                                    aria-expanded={true}
+                                    className="euiAccordion__button"
+                                    id="random_html_id"
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <span
+                                      className="euiAccordion__iconWrapper"
+                                    >
+                                      <EuiIcon
+                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </span>
+                                    <span
+                                      className="euiIEFlexWrapFix"
+                                    >
+                                      Tooltip options
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  aria-labelledby="random_html_id"
+                                  className="euiAccordion__childWrapper"
+                                  id="random_html_id"
+                                  role="region"
+                                  tabIndex={-1}
+                                >
+                                  <EuiResizeObserver
+                                    onResize={[Function]}
+                                  >
+                                    <div>
+                                      <div
+                                        className="euiAccordion__padding--s"
+                                      >
+                                        <div
+                                          id="random_html_id"
+                                        >
+                                          <ButtonGroupItem
+                                            defaultSelections={
+                                              Array [
+                                                Object {
+                                                  "id": "show",
+                                                  "name": "Show",
+                                                },
+                                              ]
+                                            }
+                                            groupOptions={
+                                              Array [
+                                                Object {
+                                                  "id": "show",
+                                                  "label": "Show",
+                                                  "name": "Show",
+                                                },
+                                                Object {
+                                                  "id": "hidden",
+                                                  "label": "Hidden",
+                                                  "name": "Hidden",
+                                                },
+                                              ]
+                                            }
+                                            handleButtonChange={[Function]}
+                                            idSelected="show"
+                                            key="viz-series-0"
+                                            legend="Tooltip mode"
+                                            options={
+                                              Array [
+                                                Object {
+                                                  "id": "show",
+                                                  "name": "Show",
+                                                },
+                                                Object {
+                                                  "id": "hidden",
+                                                  "name": "Hidden",
+                                                },
+                                              ]
+                                            }
+                                            title="Tooltip mode"
+                                            vizState={Object {}}
+                                          >
+                                            <EuiTitle
+                                              size="xxs"
+                                            >
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Tooltip mode
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiSpacer
+                                              size="s"
+                                            >
+                                              <div
+                                                className="euiSpacer euiSpacer--s"
+                                              />
+                                            </EuiSpacer>
+                                            <div
+                                              style={
+                                                Object {
+                                                  "width": "fit-content",
+                                                }
+                                              }
+                                            >
+                                              <EuiButtonGroup
+                                                buttonSize="compressed"
+                                                id="random_html_id"
+                                                idSelected="show"
+                                                isFullWidth={false}
+                                                legend="Tooltip mode"
+                                                name="Tooltip mode"
+                                                onChange={[Function]}
+                                                options={
+                                                  Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "label": "Show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "label": "Hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ]
+                                                }
+                                              >
+                                                <fieldset
+                                                  className="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+                                                  disabled={false}
+                                                  id="random_html_id"
+                                                >
+                                                  <EuiScreenReaderOnly>
+                                                    <legend
+                                                      className="euiScreenReaderOnly"
+                                                    >
+                                                      Tooltip mode
+                                                    </legend>
+                                                  </EuiScreenReaderOnly>
+                                                  <div
+                                                    className="euiButtonGroup__buttons"
+                                                  >
+                                                    <EuiButtonGroupButton
+                                                      color="text"
+                                                      element="label"
+                                                      id="show"
+                                                      isDisabled={false}
+                                                      isIconOnly={false}
+                                                      isSelected={true}
+                                                      key="0"
+                                                      label="Show"
+                                                      name="Show"
+                                                      onChange={[Function]}
+                                                      size="compressed"
+                                                    >
+                                                      <EuiButtonDisplay
+                                                        baseClassName="euiButtonGroupButton"
+                                                        className="euiButtonGroupButton-isSelected"
+                                                        color="text"
+                                                        element="label"
+                                                        fill={false}
+                                                        htmlFor="random_html_id"
+                                                        isDisabled={false}
+                                                        onClick={[Function]}
+                                                        size="s"
+                                                        textProps={
+                                                          Object {
+                                                            "className": "euiButtonGroupButton__textShift",
+                                                            "data-text": "Show",
+                                                            "ref": [Function],
+                                                            "title": "Show",
+                                                          }
+                                                        }
+                                                      >
+                                                        <label
+                                                          className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
+                                                          disabled={false}
+                                                          htmlFor="random_html_id"
+                                                          onClick={[Function]}
+                                                          style={
+                                                            Object {
+                                                              "minWidth": undefined,
+                                                            }
+                                                          }
+                                                        >
+                                                          <EuiButtonContent
+                                                            className="euiButton__content"
+                                                            iconSide="left"
+                                                            textProps={
+                                                              Object {
+                                                                "className": "euiButton__text euiButtonGroupButton__textShift",
+                                                                "data-text": "Show",
+                                                                "ref": [Function],
+                                                                "title": "Show",
+                                                              }
+                                                            }
+                                                          >
+                                                            <span
+                                                              className="euiButtonContent euiButton__content"
+                                                            >
+                                                              <span
+                                                                className="euiButton__text euiButtonGroupButton__textShift"
+                                                                data-text="Show"
+                                                                title="Show"
+                                                              >
+                                                                <input
+                                                                  checked={true}
+                                                                  className="euiScreenReaderOnly"
+                                                                  data-test-subj="show"
+                                                                  disabled={false}
+                                                                  id="random_html_id"
+                                                                  name="Show"
+                                                                  onChange={[Function]}
+                                                                  type="radio"
+                                                                />
+                                                                Show
+                                                              </span>
+                                                            </span>
+                                                          </EuiButtonContent>
+                                                        </label>
+                                                      </EuiButtonDisplay>
+                                                    </EuiButtonGroupButton>
+                                                    <EuiButtonGroupButton
+                                                      color="text"
+                                                      element="label"
+                                                      id="hidden"
+                                                      isDisabled={false}
+                                                      isIconOnly={false}
+                                                      isSelected={false}
+                                                      key="1"
+                                                      label="Hidden"
+                                                      name="Hidden"
+                                                      onChange={[Function]}
+                                                      size="compressed"
+                                                    >
+                                                      <EuiButtonDisplay
+                                                        baseClassName="euiButtonGroupButton"
+                                                        className=""
+                                                        color="text"
+                                                        element="label"
+                                                        fill={false}
+                                                        htmlFor="random_html_id"
+                                                        isDisabled={false}
+                                                        onClick={[Function]}
+                                                        size="s"
+                                                        textProps={
+                                                          Object {
+                                                            "className": "euiButtonGroupButton__textShift",
+                                                            "data-text": "Hidden",
+                                                            "ref": [Function],
+                                                            "title": "Hidden",
+                                                          }
+                                                        }
+                                                      >
+                                                        <label
+                                                          className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                                          disabled={false}
+                                                          htmlFor="random_html_id"
+                                                          onClick={[Function]}
+                                                          style={
+                                                            Object {
+                                                              "minWidth": undefined,
+                                                            }
+                                                          }
+                                                        >
+                                                          <EuiButtonContent
+                                                            className="euiButton__content"
+                                                            iconSide="left"
+                                                            textProps={
+                                                              Object {
+                                                                "className": "euiButton__text euiButtonGroupButton__textShift",
+                                                                "data-text": "Hidden",
+                                                                "ref": [Function],
+                                                                "title": "Hidden",
+                                                              }
+                                                            }
+                                                          >
+                                                            <span
+                                                              className="euiButtonContent euiButton__content"
+                                                            >
+                                                              <span
+                                                                className="euiButton__text euiButtonGroupButton__textShift"
+                                                                data-text="Hidden"
+                                                                title="Hidden"
+                                                              >
+                                                                <input
+                                                                  checked={false}
+                                                                  className="euiScreenReaderOnly"
+                                                                  data-test-subj="hidden"
+                                                                  disabled={false}
+                                                                  id="random_html_id"
+                                                                  name="Hidden"
+                                                                  onChange={[Function]}
+                                                                  type="radio"
+                                                                />
+                                                                Hidden
+                                                              </span>
+                                                            </span>
+                                                          </EuiButtonContent>
+                                                        </label>
+                                                      </EuiButtonDisplay>
+                                                    </EuiButtonGroupButton>
+                                                  </div>
+                                                </fieldset>
+                                              </EuiButtonGroup>
+                                            </div>
+                                          </ButtonGroupItem>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                        </div>
+                                        <div
+                                          id="random_html_id"
+                                        >
+                                          <ButtonGroupItem
+                                            defaultSelections={
+                                              Array [
+                                                Object {
+                                                  "id": "all",
+                                                  "name": "All",
+                                                },
+                                              ]
+                                            }
+                                            groupOptions={
+                                              Array [
+                                                Object {
+                                                  "id": "all",
+                                                  "label": "All",
+                                                  "name": "All",
+                                                },
+                                                Object {
+                                                  "id": "x",
+                                                  "label": "Dimension",
+                                                  "name": "Dimension",
+                                                },
+                                                Object {
+                                                  "id": "y",
+                                                  "label": "Series",
+                                                  "name": "Series",
+                                                },
+                                              ]
+                                            }
+                                            handleButtonChange={[Function]}
+                                            idSelected="all"
+                                            key="viz-series-1"
+                                            legend="Tooltip text"
+                                            options={
+                                              Array [
+                                                Object {
+                                                  "id": "all",
+                                                  "name": "All",
+                                                },
+                                                Object {
+                                                  "id": "x",
+                                                  "name": "Dimension",
+                                                },
+                                                Object {
+                                                  "id": "y",
+                                                  "name": "Series",
+                                                },
+                                              ]
+                                            }
+                                            title="Tooltip text"
+                                            vizState={Object {}}
+                                          >
+                                            <EuiTitle
+                                              size="xxs"
+                                            >
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Tooltip text
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiSpacer
+                                              size="s"
+                                            >
+                                              <div
+                                                className="euiSpacer euiSpacer--s"
+                                              />
+                                            </EuiSpacer>
+                                            <div
+                                              style={
+                                                Object {
+                                                  "width": "fit-content",
+                                                }
+                                              }
+                                            >
+                                              <EuiButtonGroup
+                                                buttonSize="compressed"
+                                                id="random_html_id"
+                                                idSelected="all"
+                                                isFullWidth={false}
+                                                legend="Tooltip text"
+                                                name="Tooltip text"
+                                                onChange={[Function]}
+                                                options={
+                                                  Array [
+                                                    Object {
+                                                      "id": "all",
+                                                      "label": "All",
+                                                      "name": "All",
+                                                    },
+                                                    Object {
+                                                      "id": "x",
+                                                      "label": "Dimension",
+                                                      "name": "Dimension",
+                                                    },
+                                                    Object {
+                                                      "id": "y",
+                                                      "label": "Series",
+                                                      "name": "Series",
+                                                    },
+                                                  ]
+                                                }
+                                              >
+                                                <fieldset
+                                                  className="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+                                                  disabled={false}
+                                                  id="random_html_id"
+                                                >
+                                                  <EuiScreenReaderOnly>
+                                                    <legend
+                                                      className="euiScreenReaderOnly"
+                                                    >
+                                                      Tooltip text
+                                                    </legend>
+                                                  </EuiScreenReaderOnly>
+                                                  <div
+                                                    className="euiButtonGroup__buttons"
+                                                  >
+                                                    <EuiButtonGroupButton
+                                                      color="text"
+                                                      element="label"
+                                                      id="all"
+                                                      isDisabled={false}
+                                                      isIconOnly={false}
+                                                      isSelected={true}
+                                                      key="0"
+                                                      label="All"
+                                                      name="All"
+                                                      onChange={[Function]}
+                                                      size="compressed"
+                                                    >
+                                                      <EuiButtonDisplay
+                                                        baseClassName="euiButtonGroupButton"
+                                                        className="euiButtonGroupButton-isSelected"
+                                                        color="text"
+                                                        element="label"
+                                                        fill={false}
+                                                        htmlFor="random_html_id"
+                                                        isDisabled={false}
+                                                        onClick={[Function]}
+                                                        size="s"
+                                                        textProps={
+                                                          Object {
+                                                            "className": "euiButtonGroupButton__textShift",
+                                                            "data-text": "All",
+                                                            "ref": [Function],
+                                                            "title": "All",
+                                                          }
+                                                        }
+                                                      >
+                                                        <label
+                                                          className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
+                                                          disabled={false}
+                                                          htmlFor="random_html_id"
+                                                          onClick={[Function]}
+                                                          style={
+                                                            Object {
+                                                              "minWidth": undefined,
+                                                            }
+                                                          }
+                                                        >
+                                                          <EuiButtonContent
+                                                            className="euiButton__content"
+                                                            iconSide="left"
+                                                            textProps={
+                                                              Object {
+                                                                "className": "euiButton__text euiButtonGroupButton__textShift",
+                                                                "data-text": "All",
+                                                                "ref": [Function],
+                                                                "title": "All",
+                                                              }
+                                                            }
+                                                          >
+                                                            <span
+                                                              className="euiButtonContent euiButton__content"
+                                                            >
+                                                              <span
+                                                                className="euiButton__text euiButtonGroupButton__textShift"
+                                                                data-text="All"
+                                                                title="All"
+                                                              >
+                                                                <input
+                                                                  checked={true}
+                                                                  className="euiScreenReaderOnly"
+                                                                  data-test-subj="all"
+                                                                  disabled={false}
+                                                                  id="random_html_id"
+                                                                  name="All"
+                                                                  onChange={[Function]}
+                                                                  type="radio"
+                                                                />
+                                                                All
+                                                              </span>
+                                                            </span>
+                                                          </EuiButtonContent>
+                                                        </label>
+                                                      </EuiButtonDisplay>
+                                                    </EuiButtonGroupButton>
+                                                    <EuiButtonGroupButton
+                                                      color="text"
+                                                      element="label"
+                                                      id="x"
+                                                      isDisabled={false}
+                                                      isIconOnly={false}
+                                                      isSelected={false}
+                                                      key="1"
+                                                      label="Dimension"
+                                                      name="Dimension"
+                                                      onChange={[Function]}
+                                                      size="compressed"
+                                                    >
+                                                      <EuiButtonDisplay
+                                                        baseClassName="euiButtonGroupButton"
+                                                        className=""
+                                                        color="text"
+                                                        element="label"
+                                                        fill={false}
+                                                        htmlFor="random_html_id"
+                                                        isDisabled={false}
+                                                        onClick={[Function]}
+                                                        size="s"
+                                                        textProps={
+                                                          Object {
+                                                            "className": "euiButtonGroupButton__textShift",
+                                                            "data-text": "Dimension",
+                                                            "ref": [Function],
+                                                            "title": "Dimension",
+                                                          }
+                                                        }
+                                                      >
+                                                        <label
+                                                          className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                                          disabled={false}
+                                                          htmlFor="random_html_id"
+                                                          onClick={[Function]}
+                                                          style={
+                                                            Object {
+                                                              "minWidth": undefined,
+                                                            }
+                                                          }
+                                                        >
+                                                          <EuiButtonContent
+                                                            className="euiButton__content"
+                                                            iconSide="left"
+                                                            textProps={
+                                                              Object {
+                                                                "className": "euiButton__text euiButtonGroupButton__textShift",
+                                                                "data-text": "Dimension",
+                                                                "ref": [Function],
+                                                                "title": "Dimension",
+                                                              }
+                                                            }
+                                                          >
+                                                            <span
+                                                              className="euiButtonContent euiButton__content"
+                                                            >
+                                                              <span
+                                                                className="euiButton__text euiButtonGroupButton__textShift"
+                                                                data-text="Dimension"
+                                                                title="Dimension"
+                                                              >
+                                                                <input
+                                                                  checked={false}
+                                                                  className="euiScreenReaderOnly"
+                                                                  data-test-subj="x"
+                                                                  disabled={false}
+                                                                  id="random_html_id"
+                                                                  name="Dimension"
+                                                                  onChange={[Function]}
+                                                                  type="radio"
+                                                                />
+                                                                Dimension
+                                                              </span>
+                                                            </span>
+                                                          </EuiButtonContent>
+                                                        </label>
+                                                      </EuiButtonDisplay>
+                                                    </EuiButtonGroupButton>
+                                                    <EuiButtonGroupButton
+                                                      color="text"
+                                                      element="label"
+                                                      id="y"
+                                                      isDisabled={false}
+                                                      isIconOnly={false}
+                                                      isSelected={false}
+                                                      key="2"
+                                                      label="Series"
+                                                      name="Series"
+                                                      onChange={[Function]}
+                                                      size="compressed"
+                                                    >
+                                                      <EuiButtonDisplay
+                                                        baseClassName="euiButtonGroupButton"
+                                                        className=""
+                                                        color="text"
+                                                        element="label"
+                                                        fill={false}
+                                                        htmlFor="random_html_id"
+                                                        isDisabled={false}
+                                                        onClick={[Function]}
+                                                        size="s"
+                                                        textProps={
+                                                          Object {
+                                                            "className": "euiButtonGroupButton__textShift",
+                                                            "data-text": "Series",
+                                                            "ref": [Function],
+                                                            "title": "Series",
+                                                          }
+                                                        }
+                                                      >
+                                                        <label
+                                                          className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                                          disabled={false}
+                                                          htmlFor="random_html_id"
+                                                          onClick={[Function]}
+                                                          style={
+                                                            Object {
+                                                              "minWidth": undefined,
+                                                            }
+                                                          }
+                                                        >
+                                                          <EuiButtonContent
+                                                            className="euiButton__content"
+                                                            iconSide="left"
+                                                            textProps={
+                                                              Object {
+                                                                "className": "euiButton__text euiButtonGroupButton__textShift",
+                                                                "data-text": "Series",
+                                                                "ref": [Function],
+                                                                "title": "Series",
+                                                              }
+                                                            }
+                                                          >
+                                                            <span
+                                                              className="euiButtonContent euiButton__content"
+                                                            >
+                                                              <span
+                                                                className="euiButton__text euiButtonGroupButton__textShift"
+                                                                data-text="Series"
+                                                                title="Series"
+                                                              >
+                                                                <input
+                                                                  checked={false}
+                                                                  className="euiScreenReaderOnly"
+                                                                  data-test-subj="y"
+                                                                  disabled={false}
+                                                                  id="random_html_id"
+                                                                  name="Series"
+                                                                  onChange={[Function]}
+                                                                  type="radio"
+                                                                />
+                                                                Series
+                                                              </span>
+                                                            </span>
+                                                          </EuiButtonContent>
+                                                        </label>
+                                                      </EuiButtonDisplay>
+                                                    </EuiButtonGroupButton>
+                                                  </div>
+                                                </fieldset>
+                                              </EuiButtonGroup>
+                                            </div>
+                                          </ButtonGroupItem>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </EuiResizeObserver>
+                                </div>
+                              </div>
+                            </EuiAccordion>
+                          </ConfigTooltip>
+                        </div>
+                      </div>
+                    </EuiFormRow>
+                    <EuiFormRow
+                      describedByIds={Array []}
+                      display="row"
+                      fullWidth={true}
+                      hasChildLabel={true}
+                      hasEmptyLabelSpace={false}
+                      labelType="label"
+                    >
+                      <div
+                        className="euiFormRow euiFormRow--fullWidth"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <ConfigLegend
+                            handleConfigChange={[Function]}
+                            id="random_html_id"
+                            onBlur={[Function]}
+                            onFocus={[Function]}
+                            props={Object {}}
+                            schemas={
+                              Array [
+                                Object {
+                                  "component": null,
+                                  "mapTo": "showLegend",
+                                  "name": "Show legend",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "show",
+                                        "name": "Show",
+                                      },
+                                      Object {
+                                        "id": "hidden",
+                                        "name": "Hidden",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": null,
+                                  "mapTo": "position",
+                                  "name": "Position",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "v",
+                                        "name": "Right",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "v",
+                                        "name": "Right",
+                                      },
+                                      Object {
+                                        "id": "h",
+                                        "name": "Bottom",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "input",
+                                  "mapTo": "legendSize",
+                                  "name": "Legend size",
+                                  "title": "Legend size",
+                                },
+                              ]
+                            }
+                            sectionId="legend"
+                            sectionName="Legend"
+                            visualizations={
+                              Object {
+                                "data": Object {
+                                  "appData": Object {
+                                    "fromApp": false,
+                                  },
+                                  "defaultAxes": Object {},
+                                  "indexFields": Object {
+                                    "availableFields": Array [
+                                      Object {
+                                        "name": "agent",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "clientip",
+                                        "type": "ip",
+                                      },
+                                      Object {
+                                        "name": "event",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "extension",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "geo",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "host",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "index",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "ip",
+                                        "type": "ip",
+                                      },
+                                      Object {
+                                        "name": "machine",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "memory",
+                                        "type": "double",
+                                      },
+                                      Object {
+                                        "name": "message",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "phpmemory",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "referer",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "request",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "response",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "tags",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "timestamp",
+                                        "type": "timestamp",
+                                      },
+                                      Object {
+                                        "name": "url",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "utc_time",
+                                        "type": "timestamp",
+                                      },
+                                    ],
+                                    "queriedFields": Array [
+                                      Object {
+                                        "name": "double_per_ip_bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "host",
+                                        "type": "text",
+                                      },
+                                      Object {
+                                        "name": "ip_count",
+                                        "type": "integer",
+                                      },
+                                      Object {
+                                        "name": "per_ip_bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "resp_code",
+                                        "type": "text",
+                                      },
+                                      Object {
+                                        "name": "sum_bytes",
+                                        "type": "long",
+                                      },
+                                    ],
+                                    "selectedFields": Array [],
+                                    "unselectedFields": Array [],
+                                  },
+                                  "query": Object {},
+                                  "rawVizData": Object {
+                                    "data": Object {
+                                      "count()": Array [
+                                        154,
+                                        1753,
+                                        116,
+                                        468,
+                                        1964,
+                                        219,
+                                      ],
+                                      "tags": Array [
+                                        "error",
+                                        "info",
+                                        "login",
+                                        "security",
+                                        "success",
+                                        "warning",
+                                      ],
+                                    },
+                                    "jsonData": Array [
+                                      Object {
+                                        "count()": 154,
+                                        "tags": "error",
+                                      },
+                                      Object {
+                                        "count()": 1753,
+                                        "tags": "info",
+                                      },
+                                      Object {
+                                        "count()": 116,
+                                        "tags": "login",
+                                      },
+                                      Object {
+                                        "count()": 468,
+                                        "tags": "security",
+                                      },
+                                      Object {
+                                        "count()": 1964,
+                                        "tags": "success",
+                                      },
+                                      Object {
+                                        "count()": 219,
+                                        "tags": "warning",
+                                      },
+                                    ],
+                                    "metadata": Object {
+                                      "fields": Array [
+                                        Object {
+                                          "name": "count()",
+                                          "type": "integer",
+                                        },
+                                        Object {
+                                          "name": "tags",
+                                          "type": "text",
+                                        },
+                                      ],
+                                      "size": 6,
+                                      "status": 200,
+                                    },
+                                  },
+                                  "userConfigs": Object {
+                                    "dataConfig": Object {
+                                      "valueOptions": Object {
+                                        "dimensions": Array [
+                                          Object {
+                                            "label": "tags",
+                                            "name": "tags",
+                                            "type": "text",
+                                          },
+                                        ],
+                                        "metrics": Array [
+                                          Object {
+                                            "label": "count()",
+                                            "name": "count()",
+                                            "side": "left",
+                                            "type": "integer",
+                                          },
+                                        ],
+                                      },
+                                    },
+                                  },
+                                },
+                                "vis": Object {
+                                  "barwidth": 0.97,
+                                  "category": "Visualizations",
+                                  "categoryaxis": "xaxis",
+                                  "component": [Function],
+                                  "editorconfig": Object {
+                                    "panelTabs": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "data-panel",
+                                        "mapTo": "dataConfig",
+                                        "name": "Style",
+                                        "sections": Array [
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "tooltip_options",
+                                            "mapTo": "tooltipOptions",
+                                            "name": "Tooltip options",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "tooltipMode",
+                                                "name": "Tooltip mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "tooltipText",
+                                                "name": "Tooltip text",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "all",
+                                                      "name": "All",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "all",
+                                                      "name": "All",
+                                                    },
+                                                    Object {
+                                                      "id": "x",
+                                                      "name": "Dimension",
+                                                    },
+                                                    Object {
+                                                      "id": "y",
+                                                      "name": "Series",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "legend",
+                                            "mapTo": "legend",
+                                            "name": "Legend",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "showLegend",
+                                                "name": "Show legend",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "position",
+                                                "name": "Position",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                    Object {
+                                                      "id": "h",
+                                                      "name": "Bottom",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "input",
+                                                "mapTo": "legendSize",
+                                                "name": "Legend size",
+                                                "title": "Legend size",
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "chart_styles",
+                                            "mapTo": "chartStyles",
+                                            "name": "Chart styles",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "buttons",
+                                                "mapTo": "mode",
+                                                "name": "Mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                    Object {
+                                                      "id": "stack",
+                                                      "name": "Stack",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "input",
+                                                "mapTo": "labelSize",
+                                                "name": "Label size",
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0,
+                                                "eleType": "slider",
+                                                "mapTo": "rotateBarLabels",
+                                                "name": "Rotate bar labels",
+                                                "props": Object {
+                                                  "max": 90,
+                                                  "min": -90,
+                                                  "showTicks": true,
+                                                  "ticks": Array [
+                                                    Object {
+                                                      "label": "-90°",
+                                                      "value": -90,
+                                                    },
+                                                    Object {
+                                                      "label": "-45°",
+                                                      "value": -45,
+                                                    },
+                                                    Object {
+                                                      "label": "0°",
+                                                      "value": 0,
+                                                    },
+                                                    Object {
+                                                      "label": "45°",
+                                                      "value": 45,
+                                                    },
+                                                    Object {
+                                                      "label": "90°",
+                                                      "value": 90,
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.7,
+                                                "eleType": "slider",
+                                                "mapTo": "groupWidth",
+                                                "name": "Group width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.97,
+                                                "eleType": "slider",
+                                                "mapTo": "barWidth",
+                                                "name": "Bar width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 2,
+                                                "eleType": "slider",
+                                                "mapTo": "lineWidth",
+                                                "name": "Line width",
+                                                "props": Object {
+                                                  "max": 10,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 70,
+                                                "eleType": "slider",
+                                                "mapTo": "fillOpacity",
+                                                "name": "Fill opacity",
+                                                "props": Object {
+                                                  "max": 100,
+                                                },
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "color-theme",
+                                            "mapTo": "colorTheme",
+                                            "name": "Color theme",
+                                            "schemas": Array [],
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "availability-panel",
+                                        "mapTo": "availabilityConfig",
+                                        "name": "Availability",
+                                      },
+                                    ],
+                                  },
+                                  "fillopacity": 70,
+                                  "fulllabel": "Vertical bar",
+                                  "groupwidth": 0.7,
+                                  "icon": [Function],
+                                  "icontype": "visBarVerticalStacked",
+                                  "id": "bar",
+                                  "label": "Vertical bar",
+                                  "labelangle": 0,
+                                  "legendposition": "v",
+                                  "linewidth": 2,
+                                  "mode": "group",
+                                  "name": "bar",
+                                  "orientation": "v",
+                                  "selection": Object {
+                                    "dataLoss": "nothing",
+                                  },
+                                  "seriesaxis": "yaxis",
+                                  "showlegend": "show",
+                                  "type": "bar",
+                                  "visconfig": Object {
+                                    "config": Object {
+                                      "displaylogo": false,
+                                      "responsive": true,
+                                    },
+                                    "isUniColor": false,
+                                    "layout": Object {
+                                      "height": 1180,
+                                      "legend": Object {
+                                        "orientation": "v",
+                                        "traceorder": "normal",
+                                      },
+                                      "margin": Object {
+                                        "b": 30,
+                                        "l": 60,
+                                        "pad": 0,
+                                        "r": 30,
+                                        "t": 50,
+                                      },
+                                      "showlegend": true,
+                                    },
+                                  },
+                                },
+                              }
+                            }
+                            vizState={Object {}}
+                          >
+                            <EuiAccordion
+                              arrowDisplay="left"
+                              buttonContent="Legend"
+                              id="configPanel__legend"
+                              initialIsOpen={true}
+                              isLoading={false}
+                              isLoadingMessage={false}
+                              paddingSize="s"
+                            >
+                              <div
+                                className="euiAccordion euiAccordion-isOpen"
+                              >
+                                <div
+                                  className="euiAccordion__triggerWrapper"
+                                >
+                                  <button
+                                    aria-controls="configPanel__legend"
+                                    aria-expanded={true}
+                                    className="euiAccordion__button"
+                                    id="random_html_id"
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <span
+                                      className="euiAccordion__iconWrapper"
+                                    >
+                                      <EuiIcon
+                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </span>
+                                    <span
+                                      className="euiIEFlexWrapFix"
+                                    >
+                                      Legend
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  aria-labelledby="random_html_id"
+                                  className="euiAccordion__childWrapper"
+                                  id="configPanel__legend"
+                                  role="region"
+                                  tabIndex={-1}
+                                >
+                                  <EuiResizeObserver
+                                    onResize={[Function]}
+                                  >
+                                    <div>
+                                      <div
+                                        className="euiAccordion__padding--s"
+                                      >
+                                        <ButtonGroupItem
+                                          defaultSelections={
+                                            Array [
+                                              Object {
+                                                "id": "show",
+                                                "name": "Show",
+                                              },
+                                            ]
+                                          }
+                                          groupOptions={
+                                            Array [
+                                              Object {
+                                                "id": "show",
+                                                "label": "Show",
+                                                "name": "Show",
+                                              },
+                                              Object {
+                                                "id": "hidden",
+                                                "label": "Hidden",
+                                                "name": "Hidden",
+                                              },
+                                            ]
+                                          }
+                                          handleButtonChange={[Function]}
+                                          idSelected="show"
+                                          legend="Show legend"
+                                          options={
+                                            Array [
+                                              Object {
+                                                "id": "show",
+                                                "name": "Show",
+                                              },
+                                              Object {
+                                                "id": "hidden",
+                                                "name": "Hidden",
+                                              },
+                                            ]
+                                          }
+                                          title="Show legend"
+                                          vizState={Object {}}
+                                        >
+                                          <EuiTitle
+                                            size="xxs"
+                                          >
+                                            <h3
+                                              className="euiTitle euiTitle--xxsmall"
+                                            >
+                                              Show legend
+                                            </h3>
+                                          </EuiTitle>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                          <div
+                                            style={
+                                              Object {
+                                                "width": "fit-content",
+                                              }
+                                            }
+                                          >
+                                            <EuiButtonGroup
+                                              buttonSize="compressed"
+                                              id="random_html_id"
+                                              idSelected="show"
+                                              isFullWidth={false}
+                                              legend="Show legend"
+                                              name="Show legend"
+                                              onChange={[Function]}
+                                              options={
+                                                Array [
+                                                  Object {
+                                                    "id": "show",
+                                                    "label": "Show",
+                                                    "name": "Show",
+                                                  },
+                                                  Object {
+                                                    "id": "hidden",
+                                                    "label": "Hidden",
+                                                    "name": "Hidden",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              <fieldset
+                                                className="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+                                                disabled={false}
+                                                id="random_html_id"
+                                              >
+                                                <EuiScreenReaderOnly>
+                                                  <legend
+                                                    className="euiScreenReaderOnly"
+                                                  >
+                                                    Show legend
+                                                  </legend>
+                                                </EuiScreenReaderOnly>
+                                                <div
+                                                  className="euiButtonGroup__buttons"
+                                                >
+                                                  <EuiButtonGroupButton
+                                                    color="text"
+                                                    element="label"
+                                                    id="show"
+                                                    isDisabled={false}
+                                                    isIconOnly={false}
+                                                    isSelected={true}
+                                                    key="0"
+                                                    label="Show"
+                                                    name="Show"
+                                                    onChange={[Function]}
+                                                    size="compressed"
+                                                  >
+                                                    <EuiButtonDisplay
+                                                      baseClassName="euiButtonGroupButton"
+                                                      className="euiButtonGroupButton-isSelected"
+                                                      color="text"
+                                                      element="label"
+                                                      fill={false}
+                                                      htmlFor="random_html_id"
+                                                      isDisabled={false}
+                                                      onClick={[Function]}
+                                                      size="s"
+                                                      textProps={
+                                                        Object {
+                                                          "className": "euiButtonGroupButton__textShift",
+                                                          "data-text": "Show",
+                                                          "ref": [Function],
+                                                          "title": "Show",
+                                                        }
+                                                      }
+                                                    >
+                                                      <label
+                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
+                                                        disabled={false}
+                                                        htmlFor="random_html_id"
+                                                        onClick={[Function]}
+                                                        style={
+                                                          Object {
+                                                            "minWidth": undefined,
+                                                          }
+                                                        }
+                                                      >
+                                                        <EuiButtonContent
+                                                          className="euiButton__content"
+                                                          iconSide="left"
+                                                          textProps={
+                                                            Object {
+                                                              "className": "euiButton__text euiButtonGroupButton__textShift",
+                                                              "data-text": "Show",
+                                                              "ref": [Function],
+                                                              "title": "Show",
+                                                            }
+                                                          }
+                                                        >
+                                                          <span
+                                                            className="euiButtonContent euiButton__content"
+                                                          >
+                                                            <span
+                                                              className="euiButton__text euiButtonGroupButton__textShift"
+                                                              data-text="Show"
+                                                              title="Show"
+                                                            >
+                                                              <input
+                                                                checked={true}
+                                                                className="euiScreenReaderOnly"
+                                                                data-test-subj="show"
+                                                                disabled={false}
+                                                                id="random_html_id"
+                                                                name="Show"
+                                                                onChange={[Function]}
+                                                                type="radio"
+                                                              />
+                                                              Show
+                                                            </span>
+                                                          </span>
+                                                        </EuiButtonContent>
+                                                      </label>
+                                                    </EuiButtonDisplay>
+                                                  </EuiButtonGroupButton>
+                                                  <EuiButtonGroupButton
+                                                    color="text"
+                                                    element="label"
+                                                    id="hidden"
+                                                    isDisabled={false}
+                                                    isIconOnly={false}
+                                                    isSelected={false}
+                                                    key="1"
+                                                    label="Hidden"
+                                                    name="Hidden"
+                                                    onChange={[Function]}
+                                                    size="compressed"
+                                                  >
+                                                    <EuiButtonDisplay
+                                                      baseClassName="euiButtonGroupButton"
+                                                      className=""
+                                                      color="text"
+                                                      element="label"
+                                                      fill={false}
+                                                      htmlFor="random_html_id"
+                                                      isDisabled={false}
+                                                      onClick={[Function]}
+                                                      size="s"
+                                                      textProps={
+                                                        Object {
+                                                          "className": "euiButtonGroupButton__textShift",
+                                                          "data-text": "Hidden",
+                                                          "ref": [Function],
+                                                          "title": "Hidden",
+                                                        }
+                                                      }
+                                                    >
+                                                      <label
+                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                                        disabled={false}
+                                                        htmlFor="random_html_id"
+                                                        onClick={[Function]}
+                                                        style={
+                                                          Object {
+                                                            "minWidth": undefined,
+                                                          }
+                                                        }
+                                                      >
+                                                        <EuiButtonContent
+                                                          className="euiButton__content"
+                                                          iconSide="left"
+                                                          textProps={
+                                                            Object {
+                                                              "className": "euiButton__text euiButtonGroupButton__textShift",
+                                                              "data-text": "Hidden",
+                                                              "ref": [Function],
+                                                              "title": "Hidden",
+                                                            }
+                                                          }
+                                                        >
+                                                          <span
+                                                            className="euiButtonContent euiButton__content"
+                                                          >
+                                                            <span
+                                                              className="euiButton__text euiButtonGroupButton__textShift"
+                                                              data-text="Hidden"
+                                                              title="Hidden"
+                                                            >
+                                                              <input
+                                                                checked={false}
+                                                                className="euiScreenReaderOnly"
+                                                                data-test-subj="hidden"
+                                                                disabled={false}
+                                                                id="random_html_id"
+                                                                name="Hidden"
+                                                                onChange={[Function]}
+                                                                type="radio"
+                                                              />
+                                                              Hidden
+                                                            </span>
+                                                          </span>
+                                                        </EuiButtonContent>
+                                                      </label>
+                                                    </EuiButtonDisplay>
+                                                  </EuiButtonGroupButton>
+                                                </div>
+                                              </fieldset>
+                                            </EuiButtonGroup>
+                                          </div>
+                                        </ButtonGroupItem>
+                                        <EuiSpacer
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiSpacer euiSpacer--s"
+                                          />
+                                        </EuiSpacer>
+                                        <ButtonGroupItem
+                                          defaultSelections={
+                                            Array [
+                                              Object {
+                                                "id": "v",
+                                                "name": "Right",
+                                              },
+                                            ]
+                                          }
+                                          groupOptions={
+                                            Array [
+                                              Object {
+                                                "id": "v",
+                                                "label": "Right",
+                                                "name": "Right",
+                                              },
+                                              Object {
+                                                "id": "h",
+                                                "label": "Bottom",
+                                                "name": "Bottom",
+                                              },
+                                            ]
+                                          }
+                                          handleButtonChange={[Function]}
+                                          idSelected="v"
+                                          legend="Position"
+                                          options={
+                                            Array [
+                                              Object {
+                                                "id": "v",
+                                                "name": "Right",
+                                              },
+                                              Object {
+                                                "id": "h",
+                                                "name": "Bottom",
+                                              },
+                                            ]
+                                          }
+                                          title="Position"
+                                          vizState={Object {}}
+                                        >
+                                          <EuiTitle
+                                            size="xxs"
+                                          >
+                                            <h3
+                                              className="euiTitle euiTitle--xxsmall"
+                                            >
+                                              Position
+                                            </h3>
+                                          </EuiTitle>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                          <div
+                                            style={
+                                              Object {
+                                                "width": "fit-content",
+                                              }
+                                            }
+                                          >
+                                            <EuiButtonGroup
+                                              buttonSize="compressed"
+                                              id="random_html_id"
+                                              idSelected="v"
+                                              isFullWidth={false}
+                                              legend="Position"
+                                              name="Position"
+                                              onChange={[Function]}
+                                              options={
+                                                Array [
+                                                  Object {
+                                                    "id": "v",
+                                                    "label": "Right",
+                                                    "name": "Right",
+                                                  },
+                                                  Object {
+                                                    "id": "h",
+                                                    "label": "Bottom",
+                                                    "name": "Bottom",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              <fieldset
+                                                className="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+                                                disabled={false}
+                                                id="random_html_id"
+                                              >
+                                                <EuiScreenReaderOnly>
+                                                  <legend
+                                                    className="euiScreenReaderOnly"
+                                                  >
+                                                    Position
+                                                  </legend>
+                                                </EuiScreenReaderOnly>
+                                                <div
+                                                  className="euiButtonGroup__buttons"
+                                                >
+                                                  <EuiButtonGroupButton
+                                                    color="text"
+                                                    element="label"
+                                                    id="v"
+                                                    isDisabled={false}
+                                                    isIconOnly={false}
+                                                    isSelected={true}
+                                                    key="0"
+                                                    label="Right"
+                                                    name="Right"
+                                                    onChange={[Function]}
+                                                    size="compressed"
+                                                  >
+                                                    <EuiButtonDisplay
+                                                      baseClassName="euiButtonGroupButton"
+                                                      className="euiButtonGroupButton-isSelected"
+                                                      color="text"
+                                                      element="label"
+                                                      fill={false}
+                                                      htmlFor="random_html_id"
+                                                      isDisabled={false}
+                                                      onClick={[Function]}
+                                                      size="s"
+                                                      textProps={
+                                                        Object {
+                                                          "className": "euiButtonGroupButton__textShift",
+                                                          "data-text": "Right",
+                                                          "ref": [Function],
+                                                          "title": "Right",
+                                                        }
+                                                      }
+                                                    >
+                                                      <label
+                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
+                                                        disabled={false}
+                                                        htmlFor="random_html_id"
+                                                        onClick={[Function]}
+                                                        style={
+                                                          Object {
+                                                            "minWidth": undefined,
+                                                          }
+                                                        }
+                                                      >
+                                                        <EuiButtonContent
+                                                          className="euiButton__content"
+                                                          iconSide="left"
+                                                          textProps={
+                                                            Object {
+                                                              "className": "euiButton__text euiButtonGroupButton__textShift",
+                                                              "data-text": "Right",
+                                                              "ref": [Function],
+                                                              "title": "Right",
+                                                            }
+                                                          }
+                                                        >
+                                                          <span
+                                                            className="euiButtonContent euiButton__content"
+                                                          >
+                                                            <span
+                                                              className="euiButton__text euiButtonGroupButton__textShift"
+                                                              data-text="Right"
+                                                              title="Right"
+                                                            >
+                                                              <input
+                                                                checked={true}
+                                                                className="euiScreenReaderOnly"
+                                                                data-test-subj="v"
+                                                                disabled={false}
+                                                                id="random_html_id"
+                                                                name="Right"
+                                                                onChange={[Function]}
+                                                                type="radio"
+                                                              />
+                                                              Right
+                                                            </span>
+                                                          </span>
+                                                        </EuiButtonContent>
+                                                      </label>
+                                                    </EuiButtonDisplay>
+                                                  </EuiButtonGroupButton>
+                                                  <EuiButtonGroupButton
+                                                    color="text"
+                                                    element="label"
+                                                    id="h"
+                                                    isDisabled={false}
+                                                    isIconOnly={false}
+                                                    isSelected={false}
+                                                    key="1"
+                                                    label="Bottom"
+                                                    name="Bottom"
+                                                    onChange={[Function]}
+                                                    size="compressed"
+                                                  >
+                                                    <EuiButtonDisplay
+                                                      baseClassName="euiButtonGroupButton"
+                                                      className=""
+                                                      color="text"
+                                                      element="label"
+                                                      fill={false}
+                                                      htmlFor="random_html_id"
+                                                      isDisabled={false}
+                                                      onClick={[Function]}
+                                                      size="s"
+                                                      textProps={
+                                                        Object {
+                                                          "className": "euiButtonGroupButton__textShift",
+                                                          "data-text": "Bottom",
+                                                          "ref": [Function],
+                                                          "title": "Bottom",
+                                                        }
+                                                      }
+                                                    >
+                                                      <label
+                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                                        disabled={false}
+                                                        htmlFor="random_html_id"
+                                                        onClick={[Function]}
+                                                        style={
+                                                          Object {
+                                                            "minWidth": undefined,
+                                                          }
+                                                        }
+                                                      >
+                                                        <EuiButtonContent
+                                                          className="euiButton__content"
+                                                          iconSide="left"
+                                                          textProps={
+                                                            Object {
+                                                              "className": "euiButton__text euiButtonGroupButton__textShift",
+                                                              "data-text": "Bottom",
+                                                              "ref": [Function],
+                                                              "title": "Bottom",
+                                                            }
+                                                          }
+                                                        >
+                                                          <span
+                                                            className="euiButtonContent euiButton__content"
+                                                          >
+                                                            <span
+                                                              className="euiButton__text euiButtonGroupButton__textShift"
+                                                              data-text="Bottom"
+                                                              title="Bottom"
+                                                            >
+                                                              <input
+                                                                checked={false}
+                                                                className="euiScreenReaderOnly"
+                                                                data-test-subj="h"
+                                                                disabled={false}
+                                                                id="random_html_id"
+                                                                name="Bottom"
+                                                                onChange={[Function]}
+                                                                type="radio"
+                                                              />
+                                                              Bottom
+                                                            </span>
+                                                          </span>
+                                                        </EuiButtonContent>
+                                                      </label>
+                                                    </EuiButtonDisplay>
+                                                  </EuiButtonGroupButton>
+                                                </div>
+                                              </fieldset>
+                                            </EuiButtonGroup>
+                                          </div>
+                                        </ButtonGroupItem>
+                                        <EuiSpacer
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiSpacer euiSpacer--s"
+                                          />
+                                        </EuiSpacer>
+                                        <InputFieldItem
+                                          currentValue=""
+                                          handleInputChange={[Function]}
+                                          numValue=""
+                                          title="Legend size"
+                                          vizState={Object {}}
+                                        >
+                                          <EuiTitle
+                                            size="xxs"
+                                          >
+                                            <h3
+                                              className="euiTitle euiTitle--xxsmall"
+                                            >
+                                              Legend size
+                                            </h3>
+                                          </EuiTitle>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                          <EuiFieldNumber
+                                            data-test-subj="valueFieldNumber"
+                                            fullWidth={true}
+                                            id="random_html_id"
+                                            onBlur={[Function]}
+                                            onChange={[Function]}
+                                            placeholder="auto"
+                                            value=""
+                                          >
+                                            <EuiFormControlLayout
+                                              compressed={false}
+                                              fullWidth={true}
+                                              inputId="random_html_id"
+                                              isLoading={false}
+                                            >
+                                              <div
+                                                className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                              >
+                                                <div
+                                                  className="euiFormControlLayout__childrenWrapper"
+                                                >
+                                                  <EuiValidatableControl>
+                                                    <input
+                                                      className="euiFieldNumber euiFieldNumber--fullWidth"
+                                                      data-test-subj="valueFieldNumber"
+                                                      id="random_html_id"
+                                                      onBlur={[Function]}
+                                                      onChange={[Function]}
+                                                      placeholder="auto"
+                                                      type="number"
+                                                      value=""
+                                                    />
+                                                  </EuiValidatableControl>
+                                                  <EuiFormControlLayoutIcons
+                                                    compressed={false}
+                                                    isLoading={false}
+                                                  />
+                                                </div>
+                                              </div>
+                                            </EuiFormControlLayout>
+                                          </EuiFieldNumber>
+                                        </InputFieldItem>
+                                        <EuiSpacer
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiSpacer euiSpacer--s"
+                                          />
+                                        </EuiSpacer>
+                                      </div>
+                                    </div>
+                                  </EuiResizeObserver>
+                                </div>
+                              </div>
+                            </EuiAccordion>
+                          </ConfigLegend>
+                        </div>
+                      </div>
+                    </EuiFormRow>
+                    <EuiFormRow
+                      describedByIds={Array []}
+                      display="row"
+                      fullWidth={true}
+                      hasChildLabel={true}
+                      hasEmptyLabelSpace={false}
+                      labelType="label"
+                    >
+                      <div
+                        className="euiFormRow euiFormRow--fullWidth"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <ConfigBarChartStyles
+                            handleConfigChange={[Function]}
+                            id="random_html_id"
+                            onBlur={[Function]}
+                            onFocus={[Function]}
+                            props={Object {}}
+                            schemas={
+                              Array [
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "buttons",
+                                  "mapTo": "mode",
+                                  "name": "Mode",
+                                  "props": Object {
+                                    "defaultSelections": Array [
+                                      Object {
+                                        "id": "group",
+                                        "name": "Group",
+                                      },
+                                    ],
+                                    "options": Array [
+                                      Object {
+                                        "id": "group",
+                                        "name": "Group",
+                                      },
+                                      Object {
+                                        "id": "stack",
+                                        "name": "Stack",
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "eleType": "input",
+                                  "mapTo": "labelSize",
+                                  "name": "Label size",
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0,
+                                  "eleType": "slider",
+                                  "mapTo": "rotateBarLabels",
+                                  "name": "Rotate bar labels",
+                                  "props": Object {
+                                    "max": 90,
+                                    "min": -90,
+                                    "showTicks": true,
+                                    "ticks": Array [
+                                      Object {
+                                        "label": "-90°",
+                                        "value": -90,
+                                      },
+                                      Object {
+                                        "label": "-45°",
+                                        "value": -45,
+                                      },
+                                      Object {
+                                        "label": "0°",
+                                        "value": 0,
+                                      },
+                                      Object {
+                                        "label": "45°",
+                                        "value": 45,
+                                      },
+                                      Object {
+                                        "label": "90°",
+                                        "value": 90,
+                                      },
+                                    ],
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0.7,
+                                  "eleType": "slider",
+                                  "mapTo": "groupWidth",
+                                  "name": "Group width",
+                                  "props": Object {
+                                    "max": 1,
+                                    "step": 0.01,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 0.97,
+                                  "eleType": "slider",
+                                  "mapTo": "barWidth",
+                                  "name": "Bar width",
+                                  "props": Object {
+                                    "max": 1,
+                                    "step": 0.01,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 2,
+                                  "eleType": "slider",
+                                  "mapTo": "lineWidth",
+                                  "name": "Line width",
+                                  "props": Object {
+                                    "max": 10,
+                                  },
+                                },
+                                Object {
+                                  "component": [Function],
+                                  "defaultState": 70,
+                                  "eleType": "slider",
+                                  "mapTo": "fillOpacity",
+                                  "name": "Fill opacity",
+                                  "props": Object {
+                                    "max": 100,
+                                  },
+                                },
+                              ]
+                            }
+                            sectionId="chart_styles"
+                            sectionName="Chart styles"
+                            visualizations={
+                              Object {
+                                "data": Object {
+                                  "appData": Object {
+                                    "fromApp": false,
+                                  },
+                                  "defaultAxes": Object {},
+                                  "indexFields": Object {
+                                    "availableFields": Array [
+                                      Object {
+                                        "name": "agent",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "clientip",
+                                        "type": "ip",
+                                      },
+                                      Object {
+                                        "name": "event",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "extension",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "geo",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "host",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "index",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "ip",
+                                        "type": "ip",
+                                      },
+                                      Object {
+                                        "name": "machine",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "memory",
+                                        "type": "double",
+                                      },
+                                      Object {
+                                        "name": "message",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "phpmemory",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "referer",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "request",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "response",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "tags",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "timestamp",
+                                        "type": "timestamp",
+                                      },
+                                      Object {
+                                        "name": "url",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "utc_time",
+                                        "type": "timestamp",
+                                      },
+                                    ],
+                                    "queriedFields": Array [
+                                      Object {
+                                        "name": "double_per_ip_bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "host",
+                                        "type": "text",
+                                      },
+                                      Object {
+                                        "name": "ip_count",
+                                        "type": "integer",
+                                      },
+                                      Object {
+                                        "name": "per_ip_bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "resp_code",
+                                        "type": "text",
+                                      },
+                                      Object {
+                                        "name": "sum_bytes",
+                                        "type": "long",
+                                      },
+                                    ],
+                                    "selectedFields": Array [],
+                                    "unselectedFields": Array [],
+                                  },
+                                  "query": Object {},
+                                  "rawVizData": Object {
+                                    "data": Object {
+                                      "count()": Array [
+                                        154,
+                                        1753,
+                                        116,
+                                        468,
+                                        1964,
+                                        219,
+                                      ],
+                                      "tags": Array [
+                                        "error",
+                                        "info",
+                                        "login",
+                                        "security",
+                                        "success",
+                                        "warning",
+                                      ],
+                                    },
+                                    "jsonData": Array [
+                                      Object {
+                                        "count()": 154,
+                                        "tags": "error",
+                                      },
+                                      Object {
+                                        "count()": 1753,
+                                        "tags": "info",
+                                      },
+                                      Object {
+                                        "count()": 116,
+                                        "tags": "login",
+                                      },
+                                      Object {
+                                        "count()": 468,
+                                        "tags": "security",
+                                      },
+                                      Object {
+                                        "count()": 1964,
+                                        "tags": "success",
+                                      },
+                                      Object {
+                                        "count()": 219,
+                                        "tags": "warning",
+                                      },
+                                    ],
+                                    "metadata": Object {
+                                      "fields": Array [
+                                        Object {
+                                          "name": "count()",
+                                          "type": "integer",
+                                        },
+                                        Object {
+                                          "name": "tags",
+                                          "type": "text",
+                                        },
+                                      ],
+                                      "size": 6,
+                                      "status": 200,
+                                    },
+                                  },
+                                  "userConfigs": Object {
+                                    "dataConfig": Object {
+                                      "valueOptions": Object {
+                                        "dimensions": Array [
+                                          Object {
+                                            "label": "tags",
+                                            "name": "tags",
+                                            "type": "text",
+                                          },
+                                        ],
+                                        "metrics": Array [
+                                          Object {
+                                            "label": "count()",
+                                            "name": "count()",
+                                            "side": "left",
+                                            "type": "integer",
+                                          },
+                                        ],
+                                      },
+                                    },
+                                  },
+                                },
+                                "vis": Object {
+                                  "barwidth": 0.97,
+                                  "category": "Visualizations",
+                                  "categoryaxis": "xaxis",
+                                  "component": [Function],
+                                  "editorconfig": Object {
+                                    "panelTabs": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "data-panel",
+                                        "mapTo": "dataConfig",
+                                        "name": "Style",
+                                        "sections": Array [
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "tooltip_options",
+                                            "mapTo": "tooltipOptions",
+                                            "name": "Tooltip options",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "tooltipMode",
+                                                "name": "Tooltip mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "tooltipText",
+                                                "name": "Tooltip text",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "all",
+                                                      "name": "All",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "all",
+                                                      "name": "All",
+                                                    },
+                                                    Object {
+                                                      "id": "x",
+                                                      "name": "Dimension",
+                                                    },
+                                                    Object {
+                                                      "id": "y",
+                                                      "name": "Series",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "legend",
+                                            "mapTo": "legend",
+                                            "name": "Legend",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "showLegend",
+                                                "name": "Show legend",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "position",
+                                                "name": "Position",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                    Object {
+                                                      "id": "h",
+                                                      "name": "Bottom",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "input",
+                                                "mapTo": "legendSize",
+                                                "name": "Legend size",
+                                                "title": "Legend size",
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "chart_styles",
+                                            "mapTo": "chartStyles",
+                                            "name": "Chart styles",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "buttons",
+                                                "mapTo": "mode",
+                                                "name": "Mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                    Object {
+                                                      "id": "stack",
+                                                      "name": "Stack",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "input",
+                                                "mapTo": "labelSize",
+                                                "name": "Label size",
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0,
+                                                "eleType": "slider",
+                                                "mapTo": "rotateBarLabels",
+                                                "name": "Rotate bar labels",
+                                                "props": Object {
+                                                  "max": 90,
+                                                  "min": -90,
+                                                  "showTicks": true,
+                                                  "ticks": Array [
+                                                    Object {
+                                                      "label": "-90°",
+                                                      "value": -90,
+                                                    },
+                                                    Object {
+                                                      "label": "-45°",
+                                                      "value": -45,
+                                                    },
+                                                    Object {
+                                                      "label": "0°",
+                                                      "value": 0,
+                                                    },
+                                                    Object {
+                                                      "label": "45°",
+                                                      "value": 45,
+                                                    },
+                                                    Object {
+                                                      "label": "90°",
+                                                      "value": 90,
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.7,
+                                                "eleType": "slider",
+                                                "mapTo": "groupWidth",
+                                                "name": "Group width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.97,
+                                                "eleType": "slider",
+                                                "mapTo": "barWidth",
+                                                "name": "Bar width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 2,
+                                                "eleType": "slider",
+                                                "mapTo": "lineWidth",
+                                                "name": "Line width",
+                                                "props": Object {
+                                                  "max": 10,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 70,
+                                                "eleType": "slider",
+                                                "mapTo": "fillOpacity",
+                                                "name": "Fill opacity",
+                                                "props": Object {
+                                                  "max": 100,
+                                                },
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "color-theme",
+                                            "mapTo": "colorTheme",
+                                            "name": "Color theme",
+                                            "schemas": Array [],
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "availability-panel",
+                                        "mapTo": "availabilityConfig",
+                                        "name": "Availability",
+                                      },
+                                    ],
+                                  },
+                                  "fillopacity": 70,
+                                  "fulllabel": "Vertical bar",
+                                  "groupwidth": 0.7,
+                                  "icon": [Function],
+                                  "icontype": "visBarVerticalStacked",
+                                  "id": "bar",
+                                  "label": "Vertical bar",
+                                  "labelangle": 0,
+                                  "legendposition": "v",
+                                  "linewidth": 2,
+                                  "mode": "group",
+                                  "name": "bar",
+                                  "orientation": "v",
+                                  "selection": Object {
+                                    "dataLoss": "nothing",
+                                  },
+                                  "seriesaxis": "yaxis",
+                                  "showlegend": "show",
+                                  "type": "bar",
+                                  "visconfig": Object {
+                                    "config": Object {
+                                      "displaylogo": false,
+                                      "responsive": true,
+                                    },
+                                    "isUniColor": false,
+                                    "layout": Object {
+                                      "height": 1180,
+                                      "legend": Object {
+                                        "orientation": "v",
+                                        "traceorder": "normal",
+                                      },
+                                      "margin": Object {
+                                        "b": 30,
+                                        "l": 60,
+                                        "pad": 0,
+                                        "r": 30,
+                                        "t": 50,
+                                      },
+                                      "showlegend": true,
+                                    },
+                                  },
+                                },
+                              }
+                            }
+                            vizState={Object {}}
+                          >
+                            <EuiAccordion
+                              arrowDisplay="left"
+                              buttonContent="Chart styles"
+                              id="configPanel__chart_styles"
+                              initialIsOpen={true}
+                              isLoading={false}
+                              isLoadingMessage={false}
+                              paddingSize="s"
+                            >
+                              <div
+                                className="euiAccordion euiAccordion-isOpen"
+                              >
+                                <div
+                                  className="euiAccordion__triggerWrapper"
+                                >
+                                  <button
+                                    aria-controls="configPanel__chart_styles"
+                                    aria-expanded={true}
+                                    className="euiAccordion__button"
+                                    id="random_html_id"
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <span
+                                      className="euiAccordion__iconWrapper"
+                                    >
+                                      <EuiIcon
+                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </span>
+                                    <span
+                                      className="euiIEFlexWrapFix"
+                                    >
+                                      Chart styles
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  aria-labelledby="random_html_id"
+                                  className="euiAccordion__childWrapper"
+                                  id="configPanel__chart_styles"
+                                  role="region"
+                                  tabIndex={-1}
+                                >
+                                  <EuiResizeObserver
+                                    onResize={[Function]}
+                                  >
+                                    <div>
+                                      <div
+                                        className="euiAccordion__padding--s"
+                                      >
+                                        <ButtonGroupItem
+                                          defaultSelections={
+                                            Array [
+                                              Object {
+                                                "id": "group",
+                                                "name": "Group",
+                                              },
+                                            ]
+                                          }
+                                          groupOptions={
+                                            Array [
+                                              Object {
+                                                "id": "group",
+                                                "label": "Group",
+                                                "name": "Group",
+                                              },
+                                              Object {
+                                                "id": "stack",
+                                                "label": "Stack",
+                                                "name": "Stack",
+                                              },
+                                            ]
+                                          }
+                                          handleButtonChange={[Function]}
+                                          idSelected="group"
+                                          legend="Mode"
+                                          options={
+                                            Array [
+                                              Object {
+                                                "id": "group",
+                                                "name": "Group",
+                                              },
+                                              Object {
+                                                "id": "stack",
+                                                "name": "Stack",
+                                              },
+                                            ]
+                                          }
+                                          title="Mode"
+                                          vizState={Object {}}
+                                        >
+                                          <EuiTitle
+                                            size="xxs"
+                                          >
+                                            <h3
+                                              className="euiTitle euiTitle--xxsmall"
+                                            >
+                                              Mode
+                                            </h3>
+                                          </EuiTitle>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                          <div
+                                            style={
+                                              Object {
+                                                "width": "fit-content",
+                                              }
+                                            }
+                                          >
+                                            <EuiButtonGroup
+                                              buttonSize="compressed"
+                                              id="random_html_id"
+                                              idSelected="group"
+                                              isFullWidth={false}
+                                              legend="Mode"
+                                              name="Mode"
+                                              onChange={[Function]}
+                                              options={
+                                                Array [
+                                                  Object {
+                                                    "id": "group",
+                                                    "label": "Group",
+                                                    "name": "Group",
+                                                  },
+                                                  Object {
+                                                    "id": "stack",
+                                                    "label": "Stack",
+                                                    "name": "Stack",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              <fieldset
+                                                className="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text"
+                                                disabled={false}
+                                                id="random_html_id"
+                                              >
+                                                <EuiScreenReaderOnly>
+                                                  <legend
+                                                    className="euiScreenReaderOnly"
+                                                  >
+                                                    Mode
+                                                  </legend>
+                                                </EuiScreenReaderOnly>
+                                                <div
+                                                  className="euiButtonGroup__buttons"
+                                                >
+                                                  <EuiButtonGroupButton
+                                                    color="text"
+                                                    element="label"
+                                                    id="group"
+                                                    isDisabled={false}
+                                                    isIconOnly={false}
+                                                    isSelected={true}
+                                                    key="0"
+                                                    label="Group"
+                                                    name="Group"
+                                                    onChange={[Function]}
+                                                    size="compressed"
+                                                  >
+                                                    <EuiButtonDisplay
+                                                      baseClassName="euiButtonGroupButton"
+                                                      className="euiButtonGroupButton-isSelected"
+                                                      color="text"
+                                                      element="label"
+                                                      fill={false}
+                                                      htmlFor="random_html_id"
+                                                      isDisabled={false}
+                                                      onClick={[Function]}
+                                                      size="s"
+                                                      textProps={
+                                                        Object {
+                                                          "className": "euiButtonGroupButton__textShift",
+                                                          "data-text": "Group",
+                                                          "ref": [Function],
+                                                          "title": "Group",
+                                                        }
+                                                      }
+                                                    >
+                                                      <label
+                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
+                                                        disabled={false}
+                                                        htmlFor="random_html_id"
+                                                        onClick={[Function]}
+                                                        style={
+                                                          Object {
+                                                            "minWidth": undefined,
+                                                          }
+                                                        }
+                                                      >
+                                                        <EuiButtonContent
+                                                          className="euiButton__content"
+                                                          iconSide="left"
+                                                          textProps={
+                                                            Object {
+                                                              "className": "euiButton__text euiButtonGroupButton__textShift",
+                                                              "data-text": "Group",
+                                                              "ref": [Function],
+                                                              "title": "Group",
+                                                            }
+                                                          }
+                                                        >
+                                                          <span
+                                                            className="euiButtonContent euiButton__content"
+                                                          >
+                                                            <span
+                                                              className="euiButton__text euiButtonGroupButton__textShift"
+                                                              data-text="Group"
+                                                              title="Group"
+                                                            >
+                                                              <input
+                                                                checked={true}
+                                                                className="euiScreenReaderOnly"
+                                                                data-test-subj="group"
+                                                                disabled={false}
+                                                                id="random_html_id"
+                                                                name="Group"
+                                                                onChange={[Function]}
+                                                                type="radio"
+                                                              />
+                                                              Group
+                                                            </span>
+                                                          </span>
+                                                        </EuiButtonContent>
+                                                      </label>
+                                                    </EuiButtonDisplay>
+                                                  </EuiButtonGroupButton>
+                                                  <EuiButtonGroupButton
+                                                    color="text"
+                                                    element="label"
+                                                    id="stack"
+                                                    isDisabled={false}
+                                                    isIconOnly={false}
+                                                    isSelected={false}
+                                                    key="1"
+                                                    label="Stack"
+                                                    name="Stack"
+                                                    onChange={[Function]}
+                                                    size="compressed"
+                                                  >
+                                                    <EuiButtonDisplay
+                                                      baseClassName="euiButtonGroupButton"
+                                                      className=""
+                                                      color="text"
+                                                      element="label"
+                                                      fill={false}
+                                                      htmlFor="random_html_id"
+                                                      isDisabled={false}
+                                                      onClick={[Function]}
+                                                      size="s"
+                                                      textProps={
+                                                        Object {
+                                                          "className": "euiButtonGroupButton__textShift",
+                                                          "data-text": "Stack",
+                                                          "ref": [Function],
+                                                          "title": "Stack",
+                                                        }
+                                                      }
+                                                    >
+                                                      <label
+                                                        className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                                                        disabled={false}
+                                                        htmlFor="random_html_id"
+                                                        onClick={[Function]}
+                                                        style={
+                                                          Object {
+                                                            "minWidth": undefined,
+                                                          }
+                                                        }
+                                                      >
+                                                        <EuiButtonContent
+                                                          className="euiButton__content"
+                                                          iconSide="left"
+                                                          textProps={
+                                                            Object {
+                                                              "className": "euiButton__text euiButtonGroupButton__textShift",
+                                                              "data-text": "Stack",
+                                                              "ref": [Function],
+                                                              "title": "Stack",
+                                                            }
+                                                          }
+                                                        >
+                                                          <span
+                                                            className="euiButtonContent euiButton__content"
+                                                          >
+                                                            <span
+                                                              className="euiButton__text euiButtonGroupButton__textShift"
+                                                              data-text="Stack"
+                                                              title="Stack"
+                                                            >
+                                                              <input
+                                                                checked={false}
+                                                                className="euiScreenReaderOnly"
+                                                                data-test-subj="stack"
+                                                                disabled={false}
+                                                                id="random_html_id"
+                                                                name="Stack"
+                                                                onChange={[Function]}
+                                                                type="radio"
+                                                              />
+                                                              Stack
+                                                            </span>
+                                                          </span>
+                                                        </EuiButtonContent>
+                                                      </label>
+                                                    </EuiButtonDisplay>
+                                                  </EuiButtonGroupButton>
+                                                </div>
+                                              </fieldset>
+                                            </EuiButtonGroup>
+                                          </div>
+                                        </ButtonGroupItem>
+                                        <EuiSpacer
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiSpacer euiSpacer--s"
+                                          />
+                                        </EuiSpacer>
+                                        <InputFieldItem
+                                          handleInputChange={[Function]}
+                                          numValue=""
+                                          title="Label size"
+                                          vizState={Object {}}
+                                        >
+                                          <EuiTitle
+                                            size="xxs"
+                                          >
+                                            <h3
+                                              className="euiTitle euiTitle--xxsmall"
+                                            >
+                                              Label size
+                                            </h3>
+                                          </EuiTitle>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                          <EuiFieldNumber
+                                            data-test-subj="valueFieldNumber"
+                                            fullWidth={true}
+                                            id="random_html_id"
+                                            onBlur={[Function]}
+                                            onChange={[Function]}
+                                            placeholder="auto"
+                                            value=""
+                                          >
+                                            <EuiFormControlLayout
+                                              compressed={false}
+                                              fullWidth={true}
+                                              inputId="random_html_id"
+                                              isLoading={false}
+                                            >
+                                              <div
+                                                className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                              >
+                                                <div
+                                                  className="euiFormControlLayout__childrenWrapper"
+                                                >
+                                                  <EuiValidatableControl>
+                                                    <input
+                                                      className="euiFieldNumber euiFieldNumber--fullWidth"
+                                                      data-test-subj="valueFieldNumber"
+                                                      id="random_html_id"
+                                                      onBlur={[Function]}
+                                                      onChange={[Function]}
+                                                      placeholder="auto"
+                                                      type="number"
+                                                      value=""
+                                                    />
+                                                  </EuiValidatableControl>
+                                                  <EuiFormControlLayoutIcons
+                                                    compressed={false}
+                                                    isLoading={false}
+                                                  />
+                                                </div>
+                                              </div>
+                                            </EuiFormControlLayout>
+                                          </EuiFieldNumber>
+                                        </InputFieldItem>
+                                        <EuiSpacer
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiSpacer euiSpacer--s"
+                                          />
+                                        </EuiSpacer>
+                                        <SliderConfig
+                                          currentRange={0}
+                                          handleSliderChange={[Function]}
+                                          max={90}
+                                          maxRange={90}
+                                          min={-90}
+                                          minRange={-90}
+                                          showTicks={true}
+                                          step={1}
+                                          ticks={
+                                            Array [
+                                              Object {
+                                                "label": "-90°",
+                                                "value": -90,
+                                              },
+                                              Object {
+                                                "label": "-45°",
+                                                "value": -45,
+                                              },
+                                              Object {
+                                                "label": "0°",
+                                                "value": 0,
+                                              },
+                                              Object {
+                                                "label": "45°",
+                                                "value": 45,
+                                              },
+                                              Object {
+                                                "label": "90°",
+                                                "value": 90,
+                                              },
+                                            ]
+                                          }
+                                          title="Rotate bar labels"
+                                          vizState={Object {}}
+                                        >
+                                          <div
+                                            style={
+                                              Object {
+                                                "display": "flex",
+                                              }
+                                            }
+                                          >
+                                            <EuiTitle
+                                              size="xxs"
+                                            >
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Rotate bar labels
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiToolTip
+                                              anchorClassName="eui-textTruncate"
+                                              content="Value must be in the range of -90 to 90"
+                                              delay="regular"
+                                              position="top"
+                                            >
+                                              <span
+                                                className="euiToolTipAnchor eui-textTruncate"
+                                                onKeyUp={[Function]}
+                                                onMouseOut={[Function]}
+                                                onMouseOver={[Function]}
+                                              >
+                                                <EuiIcon
+                                                  className="info-icon"
+                                                  color="text"
+                                                  onBlur={[Function]}
+                                                  onFocus={[Function]}
+                                                  size="m"
+                                                  type="iInCircle"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                    focusable="false"
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      onBlur={[Function]}
+                                                      onFocus={[Function]}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiToolTip>
+                                          </div>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                          <EuiRange
+                                            aria-label="change lineWidth slider"
+                                            compressed={true}
+                                            fullWidth={false}
+                                            id="random_html_id"
+                                            isLoading={false}
+                                            levels={Array []}
+                                            max={90}
+                                            min={-90}
+                                            name="Rotate bar labels"
+                                            onChange={[Function]}
+                                            showInput={true}
+                                            showLabels={false}
+                                            showRange={false}
+                                            showTicks={true}
+                                            showValue={false}
+                                            step={1}
+                                            ticks={
+                                              Array [
+                                                Object {
+                                                  "label": "-90°",
+                                                  "value": -90,
+                                                },
+                                                Object {
+                                                  "label": "-45°",
+                                                  "value": -45,
+                                                },
+                                                Object {
+                                                  "label": "0°",
+                                                  "value": 0,
+                                                },
+                                                Object {
+                                                  "label": "45°",
+                                                  "value": 45,
+                                                },
+                                                Object {
+                                                  "label": "90°",
+                                                  "value": 90,
+                                                },
+                                              ]
+                                            }
+                                            value={0}
+                                          >
+                                            <EuiRangeWrapper
+                                              className="euiRange euiRange--hasInput"
+                                              compressed={true}
+                                              fullWidth={false}
+                                            >
+                                              <div
+                                                className="euiRangeWrapper euiRangeWrapper--compressed euiRange euiRange--hasInput"
+                                              >
+                                                <EuiRangeTrack
+                                                  aria-hidden={true}
+                                                  compressed={true}
+                                                  levels={Array []}
+                                                  max={90}
+                                                  min={-90}
+                                                  onChange={[Function]}
+                                                  showTicks={true}
+                                                  step={1}
+                                                  ticks={
+                                                    Array [
+                                                      Object {
+                                                        "label": "-90°",
+                                                        "value": -90,
+                                                      },
+                                                      Object {
+                                                        "label": "-45°",
+                                                        "value": -45,
+                                                      },
+                                                      Object {
+                                                        "label": "0°",
+                                                        "value": 0,
+                                                      },
+                                                      Object {
+                                                        "label": "45°",
+                                                        "value": 45,
+                                                      },
+                                                      Object {
+                                                        "label": "90°",
+                                                        "value": 90,
+                                                      },
+                                                    ]
+                                                  }
+                                                  value={0}
+                                                >
+                                                  <div
+                                                    aria-hidden={true}
+                                                    className="euiRangeTrack euiRangeTrack--hasTicks euiRangeTrack--compressed"
+                                                  >
+                                                    <EuiRangeTicks
+                                                      compressed={true}
+                                                      interval={1}
+                                                      max={90}
+                                                      min={-90}
+                                                      onChange={[Function]}
+                                                      tickSequence={
+                                                        Array [
+                                                          -90,
+                                                          -45,
+                                                          0,
+                                                          45,
+                                                          90,
+                                                        ]
+                                                      }
+                                                      ticks={
+                                                        Array [
+                                                          Object {
+                                                            "label": "-90°",
+                                                            "value": -90,
+                                                          },
+                                                          Object {
+                                                            "label": "-45°",
+                                                            "value": -45,
+                                                          },
+                                                          Object {
+                                                            "label": "0°",
+                                                            "value": 0,
+                                                          },
+                                                          Object {
+                                                            "label": "45°",
+                                                            "value": 45,
+                                                          },
+                                                          Object {
+                                                            "label": "90°",
+                                                            "value": 90,
+                                                          },
+                                                        ]
+                                                      }
+                                                      value={0}
+                                                    >
+                                                      <div
+                                                        className="euiRangeTicks euiRangeTicks--compressed euiRangeTicks--isCustom"
+                                                      >
+                                                        <EuiTickValue
+                                                          compressed={true}
+                                                          interval={1}
+                                                          key="-90"
+                                                          max={90}
+                                                          min={-90}
+                                                          onChange={[Function]}
+                                                          percentageWidth={0.5524861878453038}
+                                                          tickSequence={
+                                                            Array [
+                                                              -90,
+                                                              -45,
+                                                              0,
+                                                              45,
+                                                              90,
+                                                            ]
+                                                          }
+                                                          tickValue={-90}
+                                                          ticks={
+                                                            Array [
+                                                              Object {
+                                                                "label": "-90°",
+                                                                "value": -90,
+                                                              },
+                                                              Object {
+                                                                "label": "-45°",
+                                                                "value": -45,
+                                                              },
+                                                              Object {
+                                                                "label": "0°",
+                                                                "value": 0,
+                                                              },
+                                                              Object {
+                                                                "label": "45°",
+                                                                "value": 45,
+                                                              },
+                                                              Object {
+                                                                "label": "90°",
+                                                                "value": 90,
+                                                              },
+                                                            ]
+                                                          }
+                                                          ticksRef={
+                                                            Object {
+                                                              "current": <div
+                                                                class="euiRangeTicks euiRangeTicks--compressed euiRangeTicks--isCustom"
+                                                              >
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom euiRangeTick--isMin euiRangeTick--hasTickMark"
+                                                                  style="left: calc(NaN% + 0px); margin-left: -1em;"
+                                                                  tabindex="-1"
+                                                                  title="-90°"
+                                                                  type="button"
+                                                                  value="-90"
+                                                                >
+                                                                  <span
+                                                                    aria-hidden="true"
+                                                                    class="euiRangeTick__pseudo"
+                                                                  />
+                                                                  -90°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="-45°"
+                                                                  type="button"
+                                                                  value="-45"
+                                                                >
+                                                                  -45°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--selected euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="0°"
+                                                                  type="button"
+                                                                  value="0"
+                                                                >
+                                                                  0°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="45°"
+                                                                  type="button"
+                                                                  value="45"
+                                                                >
+                                                                  45°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="90°"
+                                                                  type="button"
+                                                                  value="90"
+                                                                >
+                                                                  90°
+                                                                </button>
+                                                              </div>,
+                                                            }
+                                                          }
+                                                          value={0}
+                                                        >
+                                                          <button
+                                                            className="euiRangeTick euiRangeTick--isCustom euiRangeTick--isMin euiRangeTick--hasTickMark"
+                                                            onClick={[Function]}
+                                                            style={
+                                                              Object {
+                                                                "left": "calc(NaN% + 0px)",
+                                                                "marginLeft": "-1em",
+                                                                "maxWidth": undefined,
+                                                              }
+                                                            }
+                                                            tabIndex={-1}
+                                                            title="-90°"
+                                                            type="button"
+                                                            value={-90}
+                                                          >
+                                                            <span
+                                                              aria-hidden={true}
+                                                              className="euiRangeTick__pseudo"
+                                                              style={
+                                                                Object {
+                                                                  "marginLeft": "calc(1em + 4px)",
+                                                                }
+                                                              }
+                                                            />
+                                                            -90°
+                                                          </button>
+                                                        </EuiTickValue>
+                                                        <EuiTickValue
+                                                          compressed={true}
+                                                          interval={1}
+                                                          key="-45"
+                                                          max={90}
+                                                          min={-90}
+                                                          onChange={[Function]}
+                                                          percentageWidth={0.5524861878453038}
+                                                          tickSequence={
+                                                            Array [
+                                                              -90,
+                                                              -45,
+                                                              0,
+                                                              45,
+                                                              90,
+                                                            ]
+                                                          }
+                                                          tickValue={-45}
+                                                          ticks={
+                                                            Array [
+                                                              Object {
+                                                                "label": "-90°",
+                                                                "value": -90,
+                                                              },
+                                                              Object {
+                                                                "label": "-45°",
+                                                                "value": -45,
+                                                              },
+                                                              Object {
+                                                                "label": "0°",
+                                                                "value": 0,
+                                                              },
+                                                              Object {
+                                                                "label": "45°",
+                                                                "value": 45,
+                                                              },
+                                                              Object {
+                                                                "label": "90°",
+                                                                "value": 90,
+                                                              },
+                                                            ]
+                                                          }
+                                                          ticksRef={
+                                                            Object {
+                                                              "current": <div
+                                                                class="euiRangeTicks euiRangeTicks--compressed euiRangeTicks--isCustom"
+                                                              >
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom euiRangeTick--isMin euiRangeTick--hasTickMark"
+                                                                  style="left: calc(NaN% + 0px); margin-left: -1em;"
+                                                                  tabindex="-1"
+                                                                  title="-90°"
+                                                                  type="button"
+                                                                  value="-90"
+                                                                >
+                                                                  <span
+                                                                    aria-hidden="true"
+                                                                    class="euiRangeTick__pseudo"
+                                                                  />
+                                                                  -90°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="-45°"
+                                                                  type="button"
+                                                                  value="-45"
+                                                                >
+                                                                  -45°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--selected euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="0°"
+                                                                  type="button"
+                                                                  value="0"
+                                                                >
+                                                                  0°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="45°"
+                                                                  type="button"
+                                                                  value="45"
+                                                                >
+                                                                  45°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="90°"
+                                                                  type="button"
+                                                                  value="90"
+                                                                >
+                                                                  90°
+                                                                </button>
+                                                              </div>,
+                                                            }
+                                                          }
+                                                          value={0}
+                                                        >
+                                                          <button
+                                                            className="euiRangeTick euiRangeTick--isCustom"
+                                                            onClick={[Function]}
+                                                            style={
+                                                              Object {
+                                                                "left": "calc(-Infinity% + 8px)",
+                                                                "maxWidth": undefined,
+                                                              }
+                                                            }
+                                                            tabIndex={-1}
+                                                            title="-45°"
+                                                            type="button"
+                                                            value={-45}
+                                                          >
+                                                            -45°
+                                                          </button>
+                                                        </EuiTickValue>
+                                                        <EuiTickValue
+                                                          compressed={true}
+                                                          interval={1}
+                                                          key="0"
+                                                          max={90}
+                                                          min={-90}
+                                                          onChange={[Function]}
+                                                          percentageWidth={0.5524861878453038}
+                                                          tickSequence={
+                                                            Array [
+                                                              -90,
+                                                              -45,
+                                                              0,
+                                                              45,
+                                                              90,
+                                                            ]
+                                                          }
+                                                          tickValue={0}
+                                                          ticks={
+                                                            Array [
+                                                              Object {
+                                                                "label": "-90°",
+                                                                "value": -90,
+                                                              },
+                                                              Object {
+                                                                "label": "-45°",
+                                                                "value": -45,
+                                                              },
+                                                              Object {
+                                                                "label": "0°",
+                                                                "value": 0,
+                                                              },
+                                                              Object {
+                                                                "label": "45°",
+                                                                "value": 45,
+                                                              },
+                                                              Object {
+                                                                "label": "90°",
+                                                                "value": 90,
+                                                              },
+                                                            ]
+                                                          }
+                                                          ticksRef={
+                                                            Object {
+                                                              "current": <div
+                                                                class="euiRangeTicks euiRangeTicks--compressed euiRangeTicks--isCustom"
+                                                              >
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom euiRangeTick--isMin euiRangeTick--hasTickMark"
+                                                                  style="left: calc(NaN% + 0px); margin-left: -1em;"
+                                                                  tabindex="-1"
+                                                                  title="-90°"
+                                                                  type="button"
+                                                                  value="-90"
+                                                                >
+                                                                  <span
+                                                                    aria-hidden="true"
+                                                                    class="euiRangeTick__pseudo"
+                                                                  />
+                                                                  -90°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="-45°"
+                                                                  type="button"
+                                                                  value="-45"
+                                                                >
+                                                                  -45°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--selected euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="0°"
+                                                                  type="button"
+                                                                  value="0"
+                                                                >
+                                                                  0°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="45°"
+                                                                  type="button"
+                                                                  value="45"
+                                                                >
+                                                                  45°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="90°"
+                                                                  type="button"
+                                                                  value="90"
+                                                                >
+                                                                  90°
+                                                                </button>
+                                                              </div>,
+                                                            }
+                                                          }
+                                                          value={0}
+                                                        >
+                                                          <button
+                                                            className="euiRangeTick euiRangeTick--selected euiRangeTick--isCustom"
+                                                            onClick={[Function]}
+                                                            style={
+                                                              Object {
+                                                                "left": "calc(-Infinity% + 8px)",
+                                                                "maxWidth": undefined,
+                                                              }
+                                                            }
+                                                            tabIndex={-1}
+                                                            title="0°"
+                                                            type="button"
+                                                            value={0}
+                                                          >
+                                                            0°
+                                                          </button>
+                                                        </EuiTickValue>
+                                                        <EuiTickValue
+                                                          compressed={true}
+                                                          interval={1}
+                                                          key="45"
+                                                          max={90}
+                                                          min={-90}
+                                                          onChange={[Function]}
+                                                          percentageWidth={0.5524861878453038}
+                                                          tickSequence={
+                                                            Array [
+                                                              -90,
+                                                              -45,
+                                                              0,
+                                                              45,
+                                                              90,
+                                                            ]
+                                                          }
+                                                          tickValue={45}
+                                                          ticks={
+                                                            Array [
+                                                              Object {
+                                                                "label": "-90°",
+                                                                "value": -90,
+                                                              },
+                                                              Object {
+                                                                "label": "-45°",
+                                                                "value": -45,
+                                                              },
+                                                              Object {
+                                                                "label": "0°",
+                                                                "value": 0,
+                                                              },
+                                                              Object {
+                                                                "label": "45°",
+                                                                "value": 45,
+                                                              },
+                                                              Object {
+                                                                "label": "90°",
+                                                                "value": 90,
+                                                              },
+                                                            ]
+                                                          }
+                                                          ticksRef={
+                                                            Object {
+                                                              "current": <div
+                                                                class="euiRangeTicks euiRangeTicks--compressed euiRangeTicks--isCustom"
+                                                              >
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom euiRangeTick--isMin euiRangeTick--hasTickMark"
+                                                                  style="left: calc(NaN% + 0px); margin-left: -1em;"
+                                                                  tabindex="-1"
+                                                                  title="-90°"
+                                                                  type="button"
+                                                                  value="-90"
+                                                                >
+                                                                  <span
+                                                                    aria-hidden="true"
+                                                                    class="euiRangeTick__pseudo"
+                                                                  />
+                                                                  -90°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="-45°"
+                                                                  type="button"
+                                                                  value="-45"
+                                                                >
+                                                                  -45°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--selected euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="0°"
+                                                                  type="button"
+                                                                  value="0"
+                                                                >
+                                                                  0°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="45°"
+                                                                  type="button"
+                                                                  value="45"
+                                                                >
+                                                                  45°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="90°"
+                                                                  type="button"
+                                                                  value="90"
+                                                                >
+                                                                  90°
+                                                                </button>
+                                                              </div>,
+                                                            }
+                                                          }
+                                                          value={0}
+                                                        >
+                                                          <button
+                                                            className="euiRangeTick euiRangeTick--isCustom"
+                                                            onClick={[Function]}
+                                                            style={
+                                                              Object {
+                                                                "left": "calc(-Infinity% + 8px)",
+                                                                "maxWidth": undefined,
+                                                              }
+                                                            }
+                                                            tabIndex={-1}
+                                                            title="45°"
+                                                            type="button"
+                                                            value={45}
+                                                          >
+                                                            45°
+                                                          </button>
+                                                        </EuiTickValue>
+                                                        <EuiTickValue
+                                                          compressed={true}
+                                                          interval={1}
+                                                          key="90"
+                                                          max={90}
+                                                          min={-90}
+                                                          onChange={[Function]}
+                                                          percentageWidth={0.5524861878453038}
+                                                          tickSequence={
+                                                            Array [
+                                                              -90,
+                                                              -45,
+                                                              0,
+                                                              45,
+                                                              90,
+                                                            ]
+                                                          }
+                                                          tickValue={90}
+                                                          ticks={
+                                                            Array [
+                                                              Object {
+                                                                "label": "-90°",
+                                                                "value": -90,
+                                                              },
+                                                              Object {
+                                                                "label": "-45°",
+                                                                "value": -45,
+                                                              },
+                                                              Object {
+                                                                "label": "0°",
+                                                                "value": 0,
+                                                              },
+                                                              Object {
+                                                                "label": "45°",
+                                                                "value": 45,
+                                                              },
+                                                              Object {
+                                                                "label": "90°",
+                                                                "value": 90,
+                                                              },
+                                                            ]
+                                                          }
+                                                          ticksRef={
+                                                            Object {
+                                                              "current": <div
+                                                                class="euiRangeTicks euiRangeTicks--compressed euiRangeTicks--isCustom"
+                                                              >
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom euiRangeTick--isMin euiRangeTick--hasTickMark"
+                                                                  style="left: calc(NaN% + 0px); margin-left: -1em;"
+                                                                  tabindex="-1"
+                                                                  title="-90°"
+                                                                  type="button"
+                                                                  value="-90"
+                                                                >
+                                                                  <span
+                                                                    aria-hidden="true"
+                                                                    class="euiRangeTick__pseudo"
+                                                                  />
+                                                                  -90°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="-45°"
+                                                                  type="button"
+                                                                  value="-45"
+                                                                >
+                                                                  -45°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--selected euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="0°"
+                                                                  type="button"
+                                                                  value="0"
+                                                                >
+                                                                  0°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="45°"
+                                                                  type="button"
+                                                                  value="45"
+                                                                >
+                                                                  45°
+                                                                </button>
+                                                                <button
+                                                                  class="euiRangeTick euiRangeTick--isCustom"
+                                                                  style="left: calc(-Infinity% + 8px);"
+                                                                  tabindex="-1"
+                                                                  title="90°"
+                                                                  type="button"
+                                                                  value="90"
+                                                                >
+                                                                  90°
+                                                                </button>
+                                                              </div>,
+                                                            }
+                                                          }
+                                                          value={0}
+                                                        >
+                                                          <button
+                                                            className="euiRangeTick euiRangeTick--isCustom"
+                                                            onClick={[Function]}
+                                                            style={
+                                                              Object {
+                                                                "left": "calc(-Infinity% + 8px)",
+                                                                "maxWidth": undefined,
+                                                              }
+                                                            }
+                                                            tabIndex={-1}
+                                                            title="90°"
+                                                            type="button"
+                                                            value={90}
+                                                          >
+                                                            90°
+                                                          </button>
+                                                        </EuiTickValue>
+                                                      </div>
+                                                    </EuiRangeTicks>
+                                                    <EuiRangeSlider
+                                                      aria-hidden={true}
+                                                      aria-label="change lineWidth slider"
+                                                      compressed={true}
+                                                      max={90}
+                                                      min={-90}
+                                                      name="Rotate bar labels"
+                                                      onChange={[Function]}
+                                                      showRange={false}
+                                                      showTicks={true}
+                                                      step={1}
+                                                      tabIndex={-1}
+                                                      value={0}
+                                                    >
+                                                      <input
+                                                        aria-hidden={true}
+                                                        aria-label="change lineWidth slider"
+                                                        className="euiRangeSlider euiRangeSlider--hasTicks euiRangeSlider--compressed"
+                                                        max={90}
+                                                        min={-90}
+                                                        name="Rotate bar labels"
+                                                        onChange={[Function]}
+                                                        step={1}
+                                                        tabIndex={-1}
+                                                        type="range"
+                                                        value={0}
+                                                      />
+                                                    </EuiRangeSlider>
+                                                  </div>
+                                                </EuiRangeTrack>
+                                                <div
+                                                  className="euiRange__slimHorizontalSpacer"
+                                                />
+                                                <EuiRangeInput
+                                                  aria-label="change lineWidth slider"
+                                                  autoSize={true}
+                                                  compressed={true}
+                                                  digitTolerance={3}
+                                                  fullWidth={false}
+                                                  id="random_html_id"
+                                                  isLoading={false}
+                                                  max={90}
+                                                  min={-90}
+                                                  name="Rotate bar labels"
+                                                  onChange={[Function]}
+                                                  step={1}
+                                                  value={0}
+                                                >
+                                                  <EuiFieldNumber
+                                                    aria-label="change lineWidth slider"
+                                                    className="euiRangeInput euiRangeInput--max"
+                                                    compressed={true}
+                                                    fullWidth={false}
+                                                    id="random_html_id"
+                                                    isLoading={false}
+                                                    max={90}
+                                                    min={-90}
+                                                    name="Rotate bar labels"
+                                                    onChange={[Function]}
+                                                    step={1}
+                                                    style={
+                                                      Object {
+                                                        "width": "4.4em",
+                                                      }
+                                                    }
+                                                    value={0}
+                                                  >
+                                                    <EuiFormControlLayout
+                                                      compressed={true}
+                                                      fullWidth={false}
+                                                      inputId="random_html_id"
+                                                      isLoading={false}
+                                                    >
+                                                      <div
+                                                        className="euiFormControlLayout euiFormControlLayout--compressed"
+                                                      >
+                                                        <div
+                                                          className="euiFormControlLayout__childrenWrapper"
+                                                        >
+                                                          <EuiValidatableControl>
+                                                            <input
+                                                              aria-label="change lineWidth slider"
+                                                              className="euiFieldNumber euiRangeInput euiRangeInput--max euiFieldNumber--compressed"
+                                                              id="random_html_id"
+                                                              max={90}
+                                                              min={-90}
+                                                              name="Rotate bar labels"
+                                                              onChange={[Function]}
+                                                              step={1}
+                                                              style={
+                                                                Object {
+                                                                  "width": "4.4em",
+                                                                }
+                                                              }
+                                                              type="number"
+                                                              value={0}
+                                                            />
+                                                          </EuiValidatableControl>
+                                                          <EuiFormControlLayoutIcons
+                                                            compressed={true}
+                                                            isLoading={false}
+                                                          />
+                                                        </div>
+                                                      </div>
+                                                    </EuiFormControlLayout>
+                                                  </EuiFieldNumber>
+                                                </EuiRangeInput>
+                                              </div>
+                                            </EuiRangeWrapper>
+                                          </EuiRange>
+                                        </SliderConfig>
+                                        <EuiSpacer
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiSpacer euiSpacer--s"
+                                          />
+                                        </EuiSpacer>
+                                        <SliderConfig
+                                          currentRange={0.7}
+                                          handleSliderChange={[Function]}
+                                          max={1}
+                                          maxRange={1}
+                                          minRange={0}
+                                          showTicks={false}
+                                          step={0.01}
+                                          title="Group width"
+                                          vizState={Object {}}
+                                        >
+                                          <div
+                                            style={
+                                              Object {
+                                                "display": "flex",
+                                              }
+                                            }
+                                          >
+                                            <EuiTitle
+                                              size="xxs"
+                                            >
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Group width
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiToolTip
+                                              anchorClassName="eui-textTruncate"
+                                              content="Value must be in the range of 0 to 1"
+                                              delay="regular"
+                                              position="top"
+                                            >
+                                              <span
+                                                className="euiToolTipAnchor eui-textTruncate"
+                                                onKeyUp={[Function]}
+                                                onMouseOut={[Function]}
+                                                onMouseOver={[Function]}
+                                              >
+                                                <EuiIcon
+                                                  className="info-icon"
+                                                  color="text"
+                                                  onBlur={[Function]}
+                                                  onFocus={[Function]}
+                                                  size="m"
+                                                  type="iInCircle"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                    focusable="false"
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      onBlur={[Function]}
+                                                      onFocus={[Function]}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiToolTip>
+                                          </div>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                          <EuiRange
+                                            aria-label="change lineWidth slider"
+                                            compressed={true}
+                                            fullWidth={false}
+                                            id="random_html_id"
+                                            isLoading={false}
+                                            levels={Array []}
+                                            max={1}
+                                            min={0}
+                                            name="Group width"
+                                            onChange={[Function]}
+                                            showInput={true}
+                                            showLabels={false}
+                                            showRange={false}
+                                            showTicks={false}
+                                            showValue={false}
+                                            step={0.01}
+                                            value={0.7}
+                                          >
+                                            <EuiRangeWrapper
+                                              className="euiRange euiRange--hasInput"
+                                              compressed={true}
+                                              fullWidth={false}
+                                            >
+                                              <div
+                                                className="euiRangeWrapper euiRangeWrapper--compressed euiRange euiRange--hasInput"
+                                              >
+                                                <EuiRangeTrack
+                                                  aria-hidden={true}
+                                                  compressed={true}
+                                                  levels={Array []}
+                                                  max={1}
+                                                  min={0}
+                                                  onChange={[Function]}
+                                                  showTicks={false}
+                                                  step={0.01}
+                                                  value={0.7}
+                                                >
+                                                  <div
+                                                    aria-hidden={true}
+                                                    className="euiRangeTrack euiRangeTrack--compressed"
+                                                  >
+                                                    <EuiRangeSlider
+                                                      aria-hidden={true}
+                                                      aria-label="change lineWidth slider"
+                                                      compressed={true}
+                                                      max={1}
+                                                      min={0}
+                                                      name="Group width"
+                                                      onChange={[Function]}
+                                                      showRange={false}
+                                                      showTicks={false}
+                                                      step={0.01}
+                                                      tabIndex={-1}
+                                                      value={0.7}
+                                                    >
+                                                      <input
+                                                        aria-hidden={true}
+                                                        aria-label="change lineWidth slider"
+                                                        className="euiRangeSlider euiRangeSlider--compressed"
+                                                        max={1}
+                                                        min={0}
+                                                        name="Group width"
+                                                        onChange={[Function]}
+                                                        step={0.01}
+                                                        tabIndex={-1}
+                                                        type="range"
+                                                        value={0.7}
+                                                      />
+                                                    </EuiRangeSlider>
+                                                  </div>
+                                                </EuiRangeTrack>
+                                                <div
+                                                  className="euiRange__horizontalSpacer"
+                                                />
+                                                <EuiRangeInput
+                                                  aria-label="change lineWidth slider"
+                                                  autoSize={true}
+                                                  compressed={true}
+                                                  digitTolerance={1}
+                                                  fullWidth={false}
+                                                  id="random_html_id"
+                                                  isLoading={false}
+                                                  max={1}
+                                                  min={0}
+                                                  name="Group width"
+                                                  onChange={[Function]}
+                                                  step={0.01}
+                                                  value={0.7}
+                                                >
+                                                  <EuiFieldNumber
+                                                    aria-label="change lineWidth slider"
+                                                    className="euiRangeInput euiRangeInput--max"
+                                                    compressed={true}
+                                                    fullWidth={false}
+                                                    id="random_html_id"
+                                                    isLoading={false}
+                                                    max={1}
+                                                    min={0}
+                                                    name="Group width"
+                                                    onChange={[Function]}
+                                                    step={0.01}
+                                                    style={
+                                                      Object {
+                                                        "width": "2.8em",
+                                                      }
+                                                    }
+                                                    value={0.7}
+                                                  >
+                                                    <EuiFormControlLayout
+                                                      compressed={true}
+                                                      fullWidth={false}
+                                                      inputId="random_html_id"
+                                                      isLoading={false}
+                                                    >
+                                                      <div
+                                                        className="euiFormControlLayout euiFormControlLayout--compressed"
+                                                      >
+                                                        <div
+                                                          className="euiFormControlLayout__childrenWrapper"
+                                                        >
+                                                          <EuiValidatableControl>
+                                                            <input
+                                                              aria-label="change lineWidth slider"
+                                                              className="euiFieldNumber euiRangeInput euiRangeInput--max euiFieldNumber--compressed"
+                                                              id="random_html_id"
+                                                              max={1}
+                                                              min={0}
+                                                              name="Group width"
+                                                              onChange={[Function]}
+                                                              step={0.01}
+                                                              style={
+                                                                Object {
+                                                                  "width": "2.8em",
+                                                                }
+                                                              }
+                                                              type="number"
+                                                              value={0.7}
+                                                            />
+                                                          </EuiValidatableControl>
+                                                          <EuiFormControlLayoutIcons
+                                                            compressed={true}
+                                                            isLoading={false}
+                                                          />
+                                                        </div>
+                                                      </div>
+                                                    </EuiFormControlLayout>
+                                                  </EuiFieldNumber>
+                                                </EuiRangeInput>
+                                              </div>
+                                            </EuiRangeWrapper>
+                                          </EuiRange>
+                                        </SliderConfig>
+                                        <EuiSpacer
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiSpacer euiSpacer--s"
+                                          />
+                                        </EuiSpacer>
+                                        <SliderConfig
+                                          currentRange={0.97}
+                                          handleSliderChange={[Function]}
+                                          max={1}
+                                          maxRange={1}
+                                          minRange={0}
+                                          showTicks={false}
+                                          step={0.01}
+                                          title="Bar width"
+                                          vizState={Object {}}
+                                        >
+                                          <div
+                                            style={
+                                              Object {
+                                                "display": "flex",
+                                              }
+                                            }
+                                          >
+                                            <EuiTitle
+                                              size="xxs"
+                                            >
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Bar width
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiToolTip
+                                              anchorClassName="eui-textTruncate"
+                                              content="Value must be in the range of 0 to 1"
+                                              delay="regular"
+                                              position="top"
+                                            >
+                                              <span
+                                                className="euiToolTipAnchor eui-textTruncate"
+                                                onKeyUp={[Function]}
+                                                onMouseOut={[Function]}
+                                                onMouseOver={[Function]}
+                                              >
+                                                <EuiIcon
+                                                  className="info-icon"
+                                                  color="text"
+                                                  onBlur={[Function]}
+                                                  onFocus={[Function]}
+                                                  size="m"
+                                                  type="iInCircle"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                    focusable="false"
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      onBlur={[Function]}
+                                                      onFocus={[Function]}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiToolTip>
+                                          </div>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                          <EuiRange
+                                            aria-label="change lineWidth slider"
+                                            compressed={true}
+                                            fullWidth={false}
+                                            id="random_html_id"
+                                            isLoading={false}
+                                            levels={Array []}
+                                            max={1}
+                                            min={0}
+                                            name="Bar width"
+                                            onChange={[Function]}
+                                            showInput={true}
+                                            showLabels={false}
+                                            showRange={false}
+                                            showTicks={false}
+                                            showValue={false}
+                                            step={0.01}
+                                            value={0.97}
+                                          >
+                                            <EuiRangeWrapper
+                                              className="euiRange euiRange--hasInput"
+                                              compressed={true}
+                                              fullWidth={false}
+                                            >
+                                              <div
+                                                className="euiRangeWrapper euiRangeWrapper--compressed euiRange euiRange--hasInput"
+                                              >
+                                                <EuiRangeTrack
+                                                  aria-hidden={true}
+                                                  compressed={true}
+                                                  levels={Array []}
+                                                  max={1}
+                                                  min={0}
+                                                  onChange={[Function]}
+                                                  showTicks={false}
+                                                  step={0.01}
+                                                  value={0.97}
+                                                >
+                                                  <div
+                                                    aria-hidden={true}
+                                                    className="euiRangeTrack euiRangeTrack--compressed"
+                                                  >
+                                                    <EuiRangeSlider
+                                                      aria-hidden={true}
+                                                      aria-label="change lineWidth slider"
+                                                      compressed={true}
+                                                      max={1}
+                                                      min={0}
+                                                      name="Bar width"
+                                                      onChange={[Function]}
+                                                      showRange={false}
+                                                      showTicks={false}
+                                                      step={0.01}
+                                                      tabIndex={-1}
+                                                      value={0.97}
+                                                    >
+                                                      <input
+                                                        aria-hidden={true}
+                                                        aria-label="change lineWidth slider"
+                                                        className="euiRangeSlider euiRangeSlider--compressed"
+                                                        max={1}
+                                                        min={0}
+                                                        name="Bar width"
+                                                        onChange={[Function]}
+                                                        step={0.01}
+                                                        tabIndex={-1}
+                                                        type="range"
+                                                        value={0.97}
+                                                      />
+                                                    </EuiRangeSlider>
+                                                  </div>
+                                                </EuiRangeTrack>
+                                                <div
+                                                  className="euiRange__horizontalSpacer"
+                                                />
+                                                <EuiRangeInput
+                                                  aria-label="change lineWidth slider"
+                                                  autoSize={true}
+                                                  compressed={true}
+                                                  digitTolerance={1}
+                                                  fullWidth={false}
+                                                  id="random_html_id"
+                                                  isLoading={false}
+                                                  max={1}
+                                                  min={0}
+                                                  name="Bar width"
+                                                  onChange={[Function]}
+                                                  step={0.01}
+                                                  value={0.97}
+                                                >
+                                                  <EuiFieldNumber
+                                                    aria-label="change lineWidth slider"
+                                                    className="euiRangeInput euiRangeInput--max"
+                                                    compressed={true}
+                                                    fullWidth={false}
+                                                    id="random_html_id"
+                                                    isLoading={false}
+                                                    max={1}
+                                                    min={0}
+                                                    name="Bar width"
+                                                    onChange={[Function]}
+                                                    step={0.01}
+                                                    style={
+                                                      Object {
+                                                        "width": "2.8em",
+                                                      }
+                                                    }
+                                                    value={0.97}
+                                                  >
+                                                    <EuiFormControlLayout
+                                                      compressed={true}
+                                                      fullWidth={false}
+                                                      inputId="random_html_id"
+                                                      isLoading={false}
+                                                    >
+                                                      <div
+                                                        className="euiFormControlLayout euiFormControlLayout--compressed"
+                                                      >
+                                                        <div
+                                                          className="euiFormControlLayout__childrenWrapper"
+                                                        >
+                                                          <EuiValidatableControl>
+                                                            <input
+                                                              aria-label="change lineWidth slider"
+                                                              className="euiFieldNumber euiRangeInput euiRangeInput--max euiFieldNumber--compressed"
+                                                              id="random_html_id"
+                                                              max={1}
+                                                              min={0}
+                                                              name="Bar width"
+                                                              onChange={[Function]}
+                                                              step={0.01}
+                                                              style={
+                                                                Object {
+                                                                  "width": "2.8em",
+                                                                }
+                                                              }
+                                                              type="number"
+                                                              value={0.97}
+                                                            />
+                                                          </EuiValidatableControl>
+                                                          <EuiFormControlLayoutIcons
+                                                            compressed={true}
+                                                            isLoading={false}
+                                                          />
+                                                        </div>
+                                                      </div>
+                                                    </EuiFormControlLayout>
+                                                  </EuiFieldNumber>
+                                                </EuiRangeInput>
+                                              </div>
+                                            </EuiRangeWrapper>
+                                          </EuiRange>
+                                        </SliderConfig>
+                                        <EuiSpacer
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiSpacer euiSpacer--s"
+                                          />
+                                        </EuiSpacer>
+                                        <SliderConfig
+                                          currentRange={2}
+                                          handleSliderChange={[Function]}
+                                          max={10}
+                                          maxRange={10}
+                                          minRange={0}
+                                          showTicks={false}
+                                          step={1}
+                                          title="Line width"
+                                          vizState={Object {}}
+                                        >
+                                          <div
+                                            style={
+                                              Object {
+                                                "display": "flex",
+                                              }
+                                            }
+                                          >
+                                            <EuiTitle
+                                              size="xxs"
+                                            >
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Line width
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiToolTip
+                                              anchorClassName="eui-textTruncate"
+                                              content="Value must be in the range of 0 to 10"
+                                              delay="regular"
+                                              position="top"
+                                            >
+                                              <span
+                                                className="euiToolTipAnchor eui-textTruncate"
+                                                onKeyUp={[Function]}
+                                                onMouseOut={[Function]}
+                                                onMouseOver={[Function]}
+                                              >
+                                                <EuiIcon
+                                                  className="info-icon"
+                                                  color="text"
+                                                  onBlur={[Function]}
+                                                  onFocus={[Function]}
+                                                  size="m"
+                                                  type="iInCircle"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                    focusable="false"
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      onBlur={[Function]}
+                                                      onFocus={[Function]}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiToolTip>
+                                          </div>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                          <EuiRange
+                                            aria-label="change lineWidth slider"
+                                            compressed={true}
+                                            fullWidth={false}
+                                            id="random_html_id"
+                                            isLoading={false}
+                                            levels={Array []}
+                                            max={10}
+                                            min={0}
+                                            name="Line width"
+                                            onChange={[Function]}
+                                            showInput={true}
+                                            showLabels={false}
+                                            showRange={false}
+                                            showTicks={false}
+                                            showValue={false}
+                                            step={1}
+                                            value={2}
+                                          >
+                                            <EuiRangeWrapper
+                                              className="euiRange euiRange--hasInput"
+                                              compressed={true}
+                                              fullWidth={false}
+                                            >
+                                              <div
+                                                className="euiRangeWrapper euiRangeWrapper--compressed euiRange euiRange--hasInput"
+                                              >
+                                                <EuiRangeTrack
+                                                  aria-hidden={true}
+                                                  compressed={true}
+                                                  levels={Array []}
+                                                  max={10}
+                                                  min={0}
+                                                  onChange={[Function]}
+                                                  showTicks={false}
+                                                  step={1}
+                                                  value={2}
+                                                >
+                                                  <div
+                                                    aria-hidden={true}
+                                                    className="euiRangeTrack euiRangeTrack--compressed"
+                                                  >
+                                                    <EuiRangeSlider
+                                                      aria-hidden={true}
+                                                      aria-label="change lineWidth slider"
+                                                      compressed={true}
+                                                      max={10}
+                                                      min={0}
+                                                      name="Line width"
+                                                      onChange={[Function]}
+                                                      showRange={false}
+                                                      showTicks={false}
+                                                      step={1}
+                                                      tabIndex={-1}
+                                                      value={2}
+                                                    >
+                                                      <input
+                                                        aria-hidden={true}
+                                                        aria-label="change lineWidth slider"
+                                                        className="euiRangeSlider euiRangeSlider--compressed"
+                                                        max={10}
+                                                        min={0}
+                                                        name="Line width"
+                                                        onChange={[Function]}
+                                                        step={1}
+                                                        tabIndex={-1}
+                                                        type="range"
+                                                        value={2}
+                                                      />
+                                                    </EuiRangeSlider>
+                                                  </div>
+                                                </EuiRangeTrack>
+                                                <div
+                                                  className="euiRange__horizontalSpacer"
+                                                />
+                                                <EuiRangeInput
+                                                  aria-label="change lineWidth slider"
+                                                  autoSize={true}
+                                                  compressed={true}
+                                                  digitTolerance={2}
+                                                  fullWidth={false}
+                                                  id="random_html_id"
+                                                  isLoading={false}
+                                                  max={10}
+                                                  min={0}
+                                                  name="Line width"
+                                                  onChange={[Function]}
+                                                  step={1}
+                                                  value={2}
+                                                >
+                                                  <EuiFieldNumber
+                                                    aria-label="change lineWidth slider"
+                                                    className="euiRangeInput euiRangeInput--max"
+                                                    compressed={true}
+                                                    fullWidth={false}
+                                                    id="random_html_id"
+                                                    isLoading={false}
+                                                    max={10}
+                                                    min={0}
+                                                    name="Line width"
+                                                    onChange={[Function]}
+                                                    step={1}
+                                                    style={
+                                                      Object {
+                                                        "width": "3.6em",
+                                                      }
+                                                    }
+                                                    value={2}
+                                                  >
+                                                    <EuiFormControlLayout
+                                                      compressed={true}
+                                                      fullWidth={false}
+                                                      inputId="random_html_id"
+                                                      isLoading={false}
+                                                    >
+                                                      <div
+                                                        className="euiFormControlLayout euiFormControlLayout--compressed"
+                                                      >
+                                                        <div
+                                                          className="euiFormControlLayout__childrenWrapper"
+                                                        >
+                                                          <EuiValidatableControl>
+                                                            <input
+                                                              aria-label="change lineWidth slider"
+                                                              className="euiFieldNumber euiRangeInput euiRangeInput--max euiFieldNumber--compressed"
+                                                              id="random_html_id"
+                                                              max={10}
+                                                              min={0}
+                                                              name="Line width"
+                                                              onChange={[Function]}
+                                                              step={1}
+                                                              style={
+                                                                Object {
+                                                                  "width": "3.6em",
+                                                                }
+                                                              }
+                                                              type="number"
+                                                              value={2}
+                                                            />
+                                                          </EuiValidatableControl>
+                                                          <EuiFormControlLayoutIcons
+                                                            compressed={true}
+                                                            isLoading={false}
+                                                          />
+                                                        </div>
+                                                      </div>
+                                                    </EuiFormControlLayout>
+                                                  </EuiFieldNumber>
+                                                </EuiRangeInput>
+                                              </div>
+                                            </EuiRangeWrapper>
+                                          </EuiRange>
+                                        </SliderConfig>
+                                        <EuiSpacer
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiSpacer euiSpacer--s"
+                                          />
+                                        </EuiSpacer>
+                                        <SliderConfig
+                                          currentRange={70}
+                                          handleSliderChange={[Function]}
+                                          max={100}
+                                          maxRange={100}
+                                          minRange={0}
+                                          showTicks={false}
+                                          step={1}
+                                          title="Fill opacity"
+                                          vizState={Object {}}
+                                        >
+                                          <div
+                                            style={
+                                              Object {
+                                                "display": "flex",
+                                              }
+                                            }
+                                          >
+                                            <EuiTitle
+                                              size="xxs"
+                                            >
+                                              <h3
+                                                className="euiTitle euiTitle--xxsmall"
+                                              >
+                                                Fill opacity
+                                              </h3>
+                                            </EuiTitle>
+                                            <EuiToolTip
+                                              anchorClassName="eui-textTruncate"
+                                              content="Value must be in the range of 0 to 100"
+                                              delay="regular"
+                                              position="top"
+                                            >
+                                              <span
+                                                className="euiToolTipAnchor eui-textTruncate"
+                                                onKeyUp={[Function]}
+                                                onMouseOut={[Function]}
+                                                onMouseOver={[Function]}
+                                              >
+                                                <EuiIcon
+                                                  className="info-icon"
+                                                  color="text"
+                                                  onBlur={[Function]}
+                                                  onFocus={[Function]}
+                                                  size="m"
+                                                  type="iInCircle"
+                                                >
+                                                  <EuiIconEmpty
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                    focusable="false"
+                                                    onBlur={[Function]}
+                                                    onFocus={[Function]}
+                                                    role="img"
+                                                    style={null}
+                                                  >
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--text euiIcon-isLoading info-icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      onBlur={[Function]}
+                                                      onFocus={[Function]}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    />
+                                                  </EuiIconEmpty>
+                                                </EuiIcon>
+                                              </span>
+                                            </EuiToolTip>
+                                          </div>
+                                          <EuiSpacer
+                                            size="s"
+                                          >
+                                            <div
+                                              className="euiSpacer euiSpacer--s"
+                                            />
+                                          </EuiSpacer>
+                                          <EuiRange
+                                            aria-label="change lineWidth slider"
+                                            compressed={true}
+                                            fullWidth={false}
+                                            id="random_html_id"
+                                            isLoading={false}
+                                            levels={Array []}
+                                            max={100}
+                                            min={0}
+                                            name="Fill opacity"
+                                            onChange={[Function]}
+                                            showInput={true}
+                                            showLabels={false}
+                                            showRange={false}
+                                            showTicks={false}
+                                            showValue={false}
+                                            step={1}
+                                            value={70}
+                                          >
+                                            <EuiRangeWrapper
+                                              className="euiRange euiRange--hasInput"
+                                              compressed={true}
+                                              fullWidth={false}
+                                            >
+                                              <div
+                                                className="euiRangeWrapper euiRangeWrapper--compressed euiRange euiRange--hasInput"
+                                              >
+                                                <EuiRangeTrack
+                                                  aria-hidden={true}
+                                                  compressed={true}
+                                                  levels={Array []}
+                                                  max={100}
+                                                  min={0}
+                                                  onChange={[Function]}
+                                                  showTicks={false}
+                                                  step={1}
+                                                  value={70}
+                                                >
+                                                  <div
+                                                    aria-hidden={true}
+                                                    className="euiRangeTrack euiRangeTrack--compressed"
+                                                  >
+                                                    <EuiRangeSlider
+                                                      aria-hidden={true}
+                                                      aria-label="change lineWidth slider"
+                                                      compressed={true}
+                                                      max={100}
+                                                      min={0}
+                                                      name="Fill opacity"
+                                                      onChange={[Function]}
+                                                      showRange={false}
+                                                      showTicks={false}
+                                                      step={1}
+                                                      tabIndex={-1}
+                                                      value={70}
+                                                    >
+                                                      <input
+                                                        aria-hidden={true}
+                                                        aria-label="change lineWidth slider"
+                                                        className="euiRangeSlider euiRangeSlider--compressed"
+                                                        max={100}
+                                                        min={0}
+                                                        name="Fill opacity"
+                                                        onChange={[Function]}
+                                                        step={1}
+                                                        tabIndex={-1}
+                                                        type="range"
+                                                        value={70}
+                                                      />
+                                                    </EuiRangeSlider>
+                                                  </div>
+                                                </EuiRangeTrack>
+                                                <div
+                                                  className="euiRange__horizontalSpacer"
+                                                />
+                                                <EuiRangeInput
+                                                  aria-label="change lineWidth slider"
+                                                  autoSize={true}
+                                                  compressed={true}
+                                                  digitTolerance={3}
+                                                  fullWidth={false}
+                                                  id="random_html_id"
+                                                  isLoading={false}
+                                                  max={100}
+                                                  min={0}
+                                                  name="Fill opacity"
+                                                  onChange={[Function]}
+                                                  step={1}
+                                                  value={70}
+                                                >
+                                                  <EuiFieldNumber
+                                                    aria-label="change lineWidth slider"
+                                                    className="euiRangeInput euiRangeInput--max"
+                                                    compressed={true}
+                                                    fullWidth={false}
+                                                    id="random_html_id"
+                                                    isLoading={false}
+                                                    max={100}
+                                                    min={0}
+                                                    name="Fill opacity"
+                                                    onChange={[Function]}
+                                                    step={1}
+                                                    style={
+                                                      Object {
+                                                        "width": "4.4em",
+                                                      }
+                                                    }
+                                                    value={70}
+                                                  >
+                                                    <EuiFormControlLayout
+                                                      compressed={true}
+                                                      fullWidth={false}
+                                                      inputId="random_html_id"
+                                                      isLoading={false}
+                                                    >
+                                                      <div
+                                                        className="euiFormControlLayout euiFormControlLayout--compressed"
+                                                      >
+                                                        <div
+                                                          className="euiFormControlLayout__childrenWrapper"
+                                                        >
+                                                          <EuiValidatableControl>
+                                                            <input
+                                                              aria-label="change lineWidth slider"
+                                                              className="euiFieldNumber euiRangeInput euiRangeInput--max euiFieldNumber--compressed"
+                                                              id="random_html_id"
+                                                              max={100}
+                                                              min={0}
+                                                              name="Fill opacity"
+                                                              onChange={[Function]}
+                                                              step={1}
+                                                              style={
+                                                                Object {
+                                                                  "width": "4.4em",
+                                                                }
+                                                              }
+                                                              type="number"
+                                                              value={70}
+                                                            />
+                                                          </EuiValidatableControl>
+                                                          <EuiFormControlLayoutIcons
+                                                            compressed={true}
+                                                            isLoading={false}
+                                                          />
+                                                        </div>
+                                                      </div>
+                                                    </EuiFormControlLayout>
+                                                  </EuiFieldNumber>
+                                                </EuiRangeInput>
+                                              </div>
+                                            </EuiRangeWrapper>
+                                          </EuiRange>
+                                        </SliderConfig>
+                                        <EuiSpacer
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiSpacer euiSpacer--s"
+                                          />
+                                        </EuiSpacer>
+                                      </div>
+                                    </div>
+                                  </EuiResizeObserver>
+                                </div>
+                              </div>
+                            </EuiAccordion>
+                          </ConfigBarChartStyles>
+                        </div>
+                      </div>
+                    </EuiFormRow>
+                    <EuiFormRow
+                      describedByIds={Array []}
+                      display="row"
+                      fullWidth={true}
+                      hasChildLabel={true}
+                      hasEmptyLabelSpace={false}
+                      labelType="label"
+                    >
+                      <div
+                        className="euiFormRow euiFormRow--fullWidth"
+                        id="random_html_id-row"
+                      >
+                        <div
+                          className="euiFormRow__fieldWrapper"
+                        >
+                          <ConfigColorTheme
+                            handleConfigChange={[Function]}
+                            id="random_html_id"
+                            onBlur={[Function]}
+                            onFocus={[Function]}
+                            props={Object {}}
+                            schemas={Array []}
+                            sectionId="color-theme"
+                            sectionName="Color theme"
+                            visualizations={
+                              Object {
+                                "data": Object {
+                                  "appData": Object {
+                                    "fromApp": false,
+                                  },
+                                  "defaultAxes": Object {},
+                                  "indexFields": Object {
+                                    "availableFields": Array [
+                                      Object {
+                                        "name": "agent",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "clientip",
+                                        "type": "ip",
+                                      },
+                                      Object {
+                                        "name": "event",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "extension",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "geo",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "host",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "index",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "ip",
+                                        "type": "ip",
+                                      },
+                                      Object {
+                                        "name": "machine",
+                                        "type": "struct",
+                                      },
+                                      Object {
+                                        "name": "memory",
+                                        "type": "double",
+                                      },
+                                      Object {
+                                        "name": "message",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "phpmemory",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "referer",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "request",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "response",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "tags",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "timestamp",
+                                        "type": "timestamp",
+                                      },
+                                      Object {
+                                        "name": "url",
+                                        "type": "string",
+                                      },
+                                      Object {
+                                        "name": "utc_time",
+                                        "type": "timestamp",
+                                      },
+                                    ],
+                                    "queriedFields": Array [
+                                      Object {
+                                        "name": "double_per_ip_bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "host",
+                                        "type": "text",
+                                      },
+                                      Object {
+                                        "name": "ip_count",
+                                        "type": "integer",
+                                      },
+                                      Object {
+                                        "name": "per_ip_bytes",
+                                        "type": "long",
+                                      },
+                                      Object {
+                                        "name": "resp_code",
+                                        "type": "text",
+                                      },
+                                      Object {
+                                        "name": "sum_bytes",
+                                        "type": "long",
+                                      },
+                                    ],
+                                    "selectedFields": Array [],
+                                    "unselectedFields": Array [],
+                                  },
+                                  "query": Object {},
+                                  "rawVizData": Object {
+                                    "data": Object {
+                                      "count()": Array [
+                                        154,
+                                        1753,
+                                        116,
+                                        468,
+                                        1964,
+                                        219,
+                                      ],
+                                      "tags": Array [
+                                        "error",
+                                        "info",
+                                        "login",
+                                        "security",
+                                        "success",
+                                        "warning",
+                                      ],
+                                    },
+                                    "jsonData": Array [
+                                      Object {
+                                        "count()": 154,
+                                        "tags": "error",
+                                      },
+                                      Object {
+                                        "count()": 1753,
+                                        "tags": "info",
+                                      },
+                                      Object {
+                                        "count()": 116,
+                                        "tags": "login",
+                                      },
+                                      Object {
+                                        "count()": 468,
+                                        "tags": "security",
+                                      },
+                                      Object {
+                                        "count()": 1964,
+                                        "tags": "success",
+                                      },
+                                      Object {
+                                        "count()": 219,
+                                        "tags": "warning",
+                                      },
+                                    ],
+                                    "metadata": Object {
+                                      "fields": Array [
+                                        Object {
+                                          "name": "count()",
+                                          "type": "integer",
+                                        },
+                                        Object {
+                                          "name": "tags",
+                                          "type": "text",
+                                        },
+                                      ],
+                                      "size": 6,
+                                      "status": 200,
+                                    },
+                                  },
+                                  "userConfigs": Object {
+                                    "dataConfig": Object {
+                                      "valueOptions": Object {
+                                        "dimensions": Array [
+                                          Object {
+                                            "label": "tags",
+                                            "name": "tags",
+                                            "type": "text",
+                                          },
+                                        ],
+                                        "metrics": Array [
+                                          Object {
+                                            "label": "count()",
+                                            "name": "count()",
+                                            "side": "left",
+                                            "type": "integer",
+                                          },
+                                        ],
+                                      },
+                                    },
+                                  },
+                                },
+                                "vis": Object {
+                                  "barwidth": 0.97,
+                                  "category": "Visualizations",
+                                  "categoryaxis": "xaxis",
+                                  "component": [Function],
+                                  "editorconfig": Object {
+                                    "panelTabs": Array [
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "data-panel",
+                                        "mapTo": "dataConfig",
+                                        "name": "Style",
+                                        "sections": Array [
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "tooltip_options",
+                                            "mapTo": "tooltipOptions",
+                                            "name": "Tooltip options",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "tooltipMode",
+                                                "name": "Tooltip mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "tooltipText",
+                                                "name": "Tooltip text",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "all",
+                                                      "name": "All",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "all",
+                                                      "name": "All",
+                                                    },
+                                                    Object {
+                                                      "id": "x",
+                                                      "name": "Dimension",
+                                                    },
+                                                    Object {
+                                                      "id": "y",
+                                                      "name": "Series",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "legend",
+                                            "mapTo": "legend",
+                                            "name": "Legend",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "showLegend",
+                                                "name": "Show legend",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "show",
+                                                      "name": "Show",
+                                                    },
+                                                    Object {
+                                                      "id": "hidden",
+                                                      "name": "Hidden",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": null,
+                                                "mapTo": "position",
+                                                "name": "Position",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "v",
+                                                      "name": "Right",
+                                                    },
+                                                    Object {
+                                                      "id": "h",
+                                                      "name": "Bottom",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "input",
+                                                "mapTo": "legendSize",
+                                                "name": "Legend size",
+                                                "title": "Legend size",
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "chart_styles",
+                                            "mapTo": "chartStyles",
+                                            "name": "Chart styles",
+                                            "schemas": Array [
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "buttons",
+                                                "mapTo": "mode",
+                                                "name": "Mode",
+                                                "props": Object {
+                                                  "defaultSelections": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                  ],
+                                                  "options": Array [
+                                                    Object {
+                                                      "id": "group",
+                                                      "name": "Group",
+                                                    },
+                                                    Object {
+                                                      "id": "stack",
+                                                      "name": "Stack",
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "eleType": "input",
+                                                "mapTo": "labelSize",
+                                                "name": "Label size",
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0,
+                                                "eleType": "slider",
+                                                "mapTo": "rotateBarLabels",
+                                                "name": "Rotate bar labels",
+                                                "props": Object {
+                                                  "max": 90,
+                                                  "min": -90,
+                                                  "showTicks": true,
+                                                  "ticks": Array [
+                                                    Object {
+                                                      "label": "-90°",
+                                                      "value": -90,
+                                                    },
+                                                    Object {
+                                                      "label": "-45°",
+                                                      "value": -45,
+                                                    },
+                                                    Object {
+                                                      "label": "0°",
+                                                      "value": 0,
+                                                    },
+                                                    Object {
+                                                      "label": "45°",
+                                                      "value": 45,
+                                                    },
+                                                    Object {
+                                                      "label": "90°",
+                                                      "value": 90,
+                                                    },
+                                                  ],
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.7,
+                                                "eleType": "slider",
+                                                "mapTo": "groupWidth",
+                                                "name": "Group width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 0.97,
+                                                "eleType": "slider",
+                                                "mapTo": "barWidth",
+                                                "name": "Bar width",
+                                                "props": Object {
+                                                  "max": 1,
+                                                  "step": 0.01,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 2,
+                                                "eleType": "slider",
+                                                "mapTo": "lineWidth",
+                                                "name": "Line width",
+                                                "props": Object {
+                                                  "max": 10,
+                                                },
+                                              },
+                                              Object {
+                                                "component": [Function],
+                                                "defaultState": 70,
+                                                "eleType": "slider",
+                                                "mapTo": "fillOpacity",
+                                                "name": "Fill opacity",
+                                                "props": Object {
+                                                  "max": 100,
+                                                },
+                                              },
+                                            ],
+                                          },
+                                          Object {
+                                            "editor": [Function],
+                                            "id": "color-theme",
+                                            "mapTo": "colorTheme",
+                                            "name": "Color theme",
+                                            "schemas": Array [],
+                                          },
+                                        ],
+                                      },
+                                      Object {
+                                        "editor": [Function],
+                                        "id": "availability-panel",
+                                        "mapTo": "availabilityConfig",
+                                        "name": "Availability",
+                                      },
+                                    ],
+                                  },
+                                  "fillopacity": 70,
+                                  "fulllabel": "Vertical bar",
+                                  "groupwidth": 0.7,
+                                  "icon": [Function],
+                                  "icontype": "visBarVerticalStacked",
+                                  "id": "bar",
+                                  "label": "Vertical bar",
+                                  "labelangle": 0,
+                                  "legendposition": "v",
+                                  "linewidth": 2,
+                                  "mode": "group",
+                                  "name": "bar",
+                                  "orientation": "v",
+                                  "selection": Object {
+                                    "dataLoss": "nothing",
+                                  },
+                                  "seriesaxis": "yaxis",
+                                  "showlegend": "show",
+                                  "type": "bar",
+                                  "visconfig": Object {
+                                    "config": Object {
+                                      "displaylogo": false,
+                                      "responsive": true,
+                                    },
+                                    "isUniColor": false,
+                                    "layout": Object {
+                                      "height": 1180,
+                                      "legend": Object {
+                                        "orientation": "v",
+                                        "traceorder": "normal",
+                                      },
+                                      "margin": Object {
+                                        "b": 30,
+                                        "l": 60,
+                                        "pad": 0,
+                                        "r": 30,
+                                        "t": 50,
+                                      },
+                                      "showlegend": true,
+                                    },
+                                  },
+                                },
+                              }
+                            }
+                            vizState={Object {}}
+                          >
+                            <EuiAccordion
+                              arrowDisplay="left"
+                              buttonContent="Color theme"
+                              id="configPanel__Color theme"
+                              initialIsOpen={true}
+                              isLoading={false}
+                              isLoadingMessage={false}
+                              paddingSize="s"
+                            >
+                              <div
+                                className="euiAccordion euiAccordion-isOpen"
+                              >
+                                <div
+                                  className="euiAccordion__triggerWrapper"
+                                >
+                                  <button
+                                    aria-controls="configPanel__Color theme"
+                                    aria-expanded={true}
+                                    className="euiAccordion__button"
+                                    id="random_html_id"
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <span
+                                      className="euiAccordion__iconWrapper"
+                                    >
+                                      <EuiIcon
+                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </span>
+                                    <span
+                                      className="euiIEFlexWrapFix"
+                                    >
+                                      Color theme
+                                    </span>
+                                  </button>
+                                </div>
+                                <div
+                                  aria-labelledby="random_html_id"
+                                  className="euiAccordion__childWrapper"
+                                  id="configPanel__Color theme"
+                                  role="region"
+                                  tabIndex={-1}
+                                >
+                                  <EuiResizeObserver
+                                    onResize={[Function]}
+                                  >
+                                    <div>
+                                      <div
+                                        className="euiAccordion__padding--s"
+                                      >
+                                        <EuiButton
+                                          fullWidth={true}
+                                          onClick={[Function]}
+                                          size="s"
+                                        >
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
+                                            disabled={false}
+                                            element="button"
+                                            fullWidth={true}
+                                            isDisabled={false}
+                                            onClick={[Function]}
+                                            size="s"
+                                            type="button"
+                                          >
+                                            <button
+                                              className="euiButton euiButton--primary euiButton--small euiButton--fullWidth"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              style={
+                                                Object {
+                                                  "minWidth": undefined,
+                                                }
+                                              }
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="left"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButton__content"
+                                                >
+                                                  <span
+                                                    className="euiButton__text"
+                                                  >
+                                                    + Add color theme
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                        <EuiSpacer
+                                          size="s"
+                                        >
+                                          <div
+                                            className="euiSpacer euiSpacer--s"
+                                          />
+                                        </EuiSpacer>
+                                      </div>
+                                    </div>
+                                  </EuiResizeObserver>
+                                </div>
+                              </div>
+                            </EuiAccordion>
+                          </ConfigColorTheme>
+                        </div>
+                      </div>
+                    </EuiFormRow>
+                  </div>
+                </EuiForm>
+              </div>
+            </VizDataPanel>
+          </div>
+        </div>
+      </EuiTabbedContent>
+    </div>
+  </div>
+</ConfigPanel>
+`;
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/config_panel.test.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/config_panel.test.tsx
new file mode 100644
index 0000000000..9282ec5313
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/config_panel.test.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { ConfigPanel } from '../config_panel';
+import {
+  TEST_VISUALIZATIONS_DATA,
+  EXPLORER_VISUALIZATIONS
+} from '../../../../../../../test/event_analytics_constants';
+import { TabContext } from '../../../../hooks';
+import PPLService from '../../../../../../services/requests/ppl';
+import httpClientMock from '../../../../../../../test/__mocks__/httpClientMock';
+
+jest.mock('!!raw-loader!./default.layout.spec.hjson', () => 'MOCK HJSON STRING');
+
+describe('Config panel component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders config panel with visualization data', async () => {
+    const setCurVisId = jest.fn();
+    const tabId = 'query-panel-1';
+    const curVisId = 'bar';
+    const pplService = new PPLService(httpClientMock);
+    const mockChangeIsValidConfigOptionState = jest.fn();
+    
+    const wrapper = mount(
+      <TabContext.Provider
+        value={{
+          tabId,
+          curVisId,
+          dispatch: jest.fn(),
+          changeVisualizationConfig: jest.fn(),
+          explorerVisualizations: EXPLORER_VISUALIZATIONS,
+          setToast: jest.fn(),
+          pplService: pplService,
+        }}
+      >
+        <ConfigPanel visualizations={TEST_VISUALIZATIONS_DATA} setCurVisId={setCurVisId} changeIsValidConfigOptionState={mockChangeIsValidConfigOptionState} />
+      </TabContext.Provider>
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
new file mode 100644
index 0000000000..816934a1fa
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
@@ -0,0 +1,198 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.lnsConfigPanel__addLayerBtn {
+  color: transparentize($euiColorMediumShade, 0.3);
+  // Remove EuiButton's default shadow to make button more subtle
+  // sass-lint:disable-block no-important
+  box-shadow: none !important;
+  border-color: $euiColorLightShade;
+}
+
+//
+// LAYOUT
+//
+
+$vis-editor-sidebar-min-width: 350px;
+
+.visEditorSidebar {
+  min-width: $vis-editor-sidebar-min-width;
+
+  // a hack for IE, issue: https://github.com/elastic/kibana/issues/66586
+  >.visEditorSidebar__formWrapper {
+    flex-basis: auto;
+  }
+}
+
+.visEditorSidebar__form {
+  @include flex-parent(1, 1, auto);
+  max-width: 100%;
+}
+
+.visEditorSidebar__config {
+  @include euiYScrollWithShadows;
+  padding: $euiSizeS;
+  overflow-y: auto;
+  height: calc(100vh - 398px);
+}
+
+.visEditorSidebar__config-isHidden {
+  display: none;
+}
+
+//
+// NAVIGATION
+//
+
+.visEditorSidebar__titleContainer {
+  padding: $euiSizeS $euiSizeXL $euiSizeS $euiSizeS; // Extra padding on the right for the collapse button
+}
+
+.visEditorSidebar__indexPatternPlaceholder {
+  min-height: $euiSizeXXL;
+  border-bottom: $euiBorderThin;
+}
+
+.visEditorSidebar__nav,
+.visEditorSidebar__linkedSearch {
+  flex-grow: 0;
+}
+
+//
+// SECTIONS
+//
+
+.visEditorSidebar__section {
+  background-color: $euiColorEmptyShade;
+  padding: $euiSizeS;
+  border-radius: $euiBorderRadius;
+
+  +.visEditorSidebar__section {
+    margin-top: $euiSizeS;
+  }
+}
+
+// Collapsible section
+
+.visEditorSidebar__collapsible {
+  background-color: lightOrDarkTheme($euiPageBackgroundColor, $euiColorLightestShade);
+}
+
+.visEditorSidebar__collapsible--marginBottom {
+  margin-bottom: $euiSizeM;
+}
+
+//
+// FORMS
+//
+
+.visEditorSidebar__formRow {
+  display: flex;
+  align-items: center;
+  margin-top: $euiSizeM;
+}
+
+.visEditorSidebar__formLabel {
+  display: flex;
+  align-items: center;
+  flex: 1 1 40%;
+  padding-right: $euiSizeXS;
+}
+
+.visEditorSidebar__formControl {
+  display: flex;
+  align-items: center;
+  flex: 1 1 60%;
+}
+
+.visEditorSidebar__aggGroupAccordionButtonContent {
+  font-size: $euiFontSizeS;
+
+  span {
+    color: $euiColorDarkShade;
+  }
+}
+
+.visEditorSidebar__controls {
+  border-top: $euiBorderThin;
+  padding: $euiSizeS;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  .visEditorSidebar__autoApplyButton {
+    margin-left: $euiSizeM;
+  }
+}
+
+.euiComboBoxOptionsList__rowWrap {
+  max-height: 250px;
+}
+
+.euiComboBoxOptionsList__rowWrap>div {
+  height: 250px !important;
+}
+
+.cp__rightContainer {
+  display: grid;
+  
+  .cp__rightHeader, .cp__rightSettings {
+    padding: 8px;
+    background-color: #FFF;
+  }
+
+  .cp__rightHeader {
+    border-bottom: 1px solid #D3DAE6;
+    .euiBadge {
+      background: transparent;
+      border: none;
+      font-size: 14px;
+    }
+  }
+
+  .cp__rightSettings {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}
+
+.info-icon {
+  margin-left: 7px;
+  margin-top: 5px;
+}
+
+#vis__mainContent .vis__leftPanel {
+  overflow-y: unset; // unset default setting
+}
+
+.panelItem_button {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-gap: $euiSizeS;
+  padding: $euiSizeS $euiSizeM;
+  align-items: center;
+}
+
+.field_text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.panel_section {
+  border-bottom: 1px solid #d3dae6;
+}
+
+.panel_title {
+  display: block;
+}
+
+.panel_title:first-letter {
+  text-transform: uppercase;
+}
+
+.color-theme-combo-box-option .euiFlexItem.euiFlexItem--flexGrowZero {
+  display: none;
+}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
new file mode 100644
index 0000000000..d00bb9c29d
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
@@ -0,0 +1,233 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import {
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiIcon,
+  EuiTabbedContent,
+  EuiTabbedContentTab,
+} from '@elastic/eui';
+import hjson from 'hjson';
+import { find } from 'lodash';
+import Mustache from 'mustache';
+import { ENABLED_VIS_TYPES } from '../../../../../../common/constants/shared';
+import { getVisTypeData } from '../../../../visualizations/charts/helpers/viz_types';
+import { TabContext } from '../../../hooks';
+import { reset as resetVisualizationConfig } from '../../../redux/slices/viualization_config_slice';
+import { getDefaultSpec } from '../visualization_specs/default_spec';
+import './config_panel.scss';
+
+const CONFIG_LAYOUT_TEMPLATE = `
+{
+  "layout": {},
+  "config": {
+    "scrollZoom": {{config.scrollZoom}},
+    "editable": {{config.editable}},
+    "staticPlot": {{config.staticPlot}},
+    "displayModeBar": {{config.displayModeBar}},
+    "responsive": {{config.responsive}},
+    "doubleClickDelay": {{config.doubleClickDelay}}
+  }
+}
+`;
+
+const HJSON_PARSE_OPTIONS = {
+  keepWsc: true,
+};
+
+const HJSON_STRINGIFY_OPTIONS = {
+  keepWsc: true,
+  condense: 0,
+  bracesSameLine: true,
+};
+
+interface PanelTabType {
+  id: string;
+  name: string;
+  mapTo: string;
+  editor: any;
+  section?: any;
+  content?: any;
+}
+
+export const ConfigPanel = ({ visualizations, setCurVisId, callback }: any) => {
+  const { tabId, curVisId, dispatch, changeVisualizationConfig, setToast } = useContext<any>(
+    TabContext
+  );
+  const { data, vis } = visualizations;
+  const { userConfigs } = data;
+
+  const [vizConfigs, setVizConfigs] = useState({
+    dataConfig: {},
+    layoutConfig: userConfigs?.layoutConfig
+      ? hjson.stringify({ ...userConfigs.layoutConfig }, HJSON_STRINGIFY_OPTIONS)
+      : getDefaultSpec(),
+    availabilityConfig: {},
+  });
+
+  useEffect(() => {
+    setVizConfigs({
+      ...userConfigs,
+      layoutConfig: userConfigs?.layoutConfig
+        ? hjson.stringify({ ...userConfigs.layoutConfig }, HJSON_STRINGIFY_OPTIONS)
+        : getDefaultSpec(),
+    });
+    if (callback) {
+      callback(() => switchToAvailability());
+    }
+  }, [userConfigs, curVisId]);
+
+  const getParsedLayoutConfig = useCallback(
+    (hjsonConfig) =>
+      JSON.parse(
+        Mustache.render(CONFIG_LAYOUT_TEMPLATE, hjson.parse(hjsonConfig, HJSON_PARSE_OPTIONS))
+      ),
+    []
+  );
+
+  const handleConfigUpdate = useCallback(
+    (updatedConfigs) => {
+      try {
+        dispatch(
+          changeVisualizationConfig({
+            tabId,
+            vizId: curVisId,
+            data: {
+              ...{
+                ...updatedConfigs,
+                layoutConfig: hjson.parse(updatedConfigs.layoutConfig),
+              },
+            },
+          })
+        );
+      } catch (e: any) {
+        setToast(`Invalid visualization configurations. error: ${e.message}`, 'danger');
+      }
+    },
+    [tabId, changeVisualizationConfig, dispatch, setToast, curVisId]
+  );
+
+  const handleConfigChange = (configSchema: string) => {
+    return (configChanges: any) => {
+      const updatedVizConfigs = { ...vizConfigs, [configSchema]: configChanges };
+      setVizConfigs((staleState) => {
+        return {
+          ...staleState,
+          [configSchema]: configChanges,
+        };
+      });
+      handleConfigUpdate(updatedVizConfigs);
+    };
+  };
+
+  const params = useMemo(() => {
+    return {
+      dataConfig: {
+        visualizations,
+        curVisId,
+        onConfigChange: handleConfigChange('dataConfig'),
+        vizState: vizConfigs.dataConfig,
+      },
+      layoutConfig: {
+        onConfigEditorChange: handleConfigChange('layoutConfig'),
+        spec: vizConfigs.layoutConfig,
+        setToast,
+      },
+      availabilityConfig: {
+        visualizations,
+        curVisId,
+        onConfigChange: handleConfigChange('availabilityConfig'),
+        vizState: vizConfigs.availabilityConfig,
+      },
+    };
+  }, [visualizations, vizConfigs, setToast, curVisId]);
+
+  const tabs: EuiTabbedContentTab[] = useMemo(() => {
+    return vis.editorconfig.panelTabs.map((tab: PanelTabType) => {
+      const Editor = tab.editor;
+      return {
+        id: tab.id,
+        name: tab.name,
+        content: <Editor {...params[tab.mapTo]} tabProps={{ ...tab }} />,
+      };
+    });
+  }, [vis.editorconfig.panelTabs, params]);
+
+  const [currTabId, setCurrTabId] = useState(tabs[0].id);
+
+  const switchToAvailability = () => {
+    setCurrTabId('availability-panel');
+  };
+
+  const onTabClick = (selectedTab: EuiTabbedContentTab) => {
+    setCurrTabId(selectedTab.id);
+  };
+
+  const handleDiscardConfig = () => {
+    dispatch(
+      resetVisualizationConfig({
+        tabId,
+      })
+    );
+  };
+
+  const memorizedVisualizationTypes = useMemo(
+    () => ENABLED_VIS_TYPES.map((vs: string) => getVisTypeData(vs)),
+    []
+  );
+
+  const vizSelectableItemRenderer = (option: EuiComboBoxOptionOption<any>) => {
+    const { icontype = 'empty', label = '' } = option;
+
+    return (
+      <div className="configPanel__vizSelector-item">
+        <EuiIcon className="lnsChartSwitch__chartIcon" type={icontype} size="m" />
+        &nbsp;&nbsp;
+        <span>{label}</span>
+      </div>
+    );
+  };
+
+  const getSelectedVisDById = useCallback(
+    (visId) => {
+      const selectedOption = find(memorizedVisualizationTypes, (v) => {
+        return v.id === visId;
+      });
+      selectedOption.iconType = selectedOption.icontype;
+      return selectedOption;
+    },
+    [memorizedVisualizationTypes]
+  );
+
+  return (
+    <div className="cp__rightContainer">
+      <div className="cp__rightHeader">
+        <EuiComboBox
+          aria-label="config chart selector"
+          placeholder="Select a chart"
+          options={memorizedVisualizationTypes}
+          selectedOptions={[getSelectedVisDById(curVisId)]}
+          singleSelection
+          onChange={(visType) => {
+            setCurVisId(visType[0].id);
+          }}
+          fullWidth
+          renderOption={vizSelectableItemRenderer}
+          isClearable={false}
+        />
+      </div>
+      <div className="cp__rightSettings">
+        <EuiTabbedContent
+          className="vis-config-tabs"
+          tabs={tabs}
+          selectedTab={tabs.find((tab) => tab.id === currTabId) || tabs[0]}
+          onTabClick={onTabClick}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx
new file mode 100644
index 0000000000..75093f4653
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel_footer.tsx
@@ -0,0 +1,38 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiToolTip,
+} from '@elastic/eui';
+
+export const DefaultEditorControls = ({
+  isInvalid,
+  isDirty,
+  onConfigUpdate,
+  onConfigDiscard,
+}: any) => {
+  return (
+    <div className="visEditorSidebar__controls">
+      <EuiFlexGroup justifyContent="spaceBetween" gutterSize="none" responsive={false}>
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            data-test-subj="visualizeEditorResetButton"
+            disabled={!isDirty}
+            iconType="cross"
+            onClick={onConfigDiscard}
+            size="s"
+          >
+            Reset
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability.tsx
new file mode 100644
index 0000000000..49ad1e221c
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability.tsx
@@ -0,0 +1,194 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useState } from 'react';
+import {
+  EuiButton,
+  EuiAccordion,
+  EuiFormRow,
+  EuiFieldNumber,
+  EuiColorPicker,
+  EuiSpacer,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFieldText,
+  EuiSelect,
+  htmlIdGenerator,
+  EuiText,
+} from '@elastic/eui';
+import { isEmpty } from 'lodash';
+import { AvailabilityInfoFlyout } from '../../../../../../application_analytics/components/flyout_components/availability_info_flyout';
+import { PPL_SPAN_REGEX } from '../../../../../../../../common/constants/shared';
+
+export interface AvailabilityUnitType {
+  thid: string;
+  name: string;
+  color: string;
+  value: number;
+  expression: string;
+}
+
+export const ConfigAvailability = ({ visualizations, onConfigChange, vizState = {} }: any) => {
+  const [flyoutOpen, setFlyoutOpen] = useState(false);
+  const closeFlyout = () => setFlyoutOpen(false);
+  const addButtonText = '+ Add availability level';
+  const getAvailabilityUnit = () => {
+    return {
+      thid: htmlIdGenerator('avl')(),
+      name: '',
+      color: '#FC0505',
+      value: 0,
+      expression: '≥',
+    };
+  };
+
+  const expressionOptions = [
+    { value: '≥', text: '≥' },
+    { value: '≤', text: '≤' },
+    { value: '>', text: '>' },
+    { value: '<', text: '<' },
+    { value: '=', text: '=' },
+    { value: '≠', text: '≠' },
+  ];
+
+  const availabilityAccordionButton = (
+    <EuiFlexGroup direction="row" justifyContent="center">
+      <EuiText>&nbsp;&nbsp;Availability&nbsp;</EuiText>
+      <EuiIcon type="questionInCircle" onClick={() => setFlyoutOpen(true)} size="m" />
+    </EuiFlexGroup>
+  );
+
+  const hasSpanInApp =
+    visualizations.data.query.finalQuery.search(PPL_SPAN_REGEX) > 0 &&
+    visualizations.data.appData.fromApp &&
+    ['bar', 'line'].includes(visualizations.vis.id);
+
+  const handleConfigChange = useCallback(
+    (changes: any) => {
+      onConfigChange({
+        ...vizState,
+        level: changes,
+      });
+    },
+    [onConfigChange, vizState]
+  );
+
+  const handleAddAvailability = useCallback(() => {
+    let res = vizState.level;
+    if (isEmpty(vizState.level)) res = [];
+    handleConfigChange([getAvailabilityUnit(), ...res]);
+  }, [vizState, handleConfigChange]);
+
+  const handleAvailabilityChange = useCallback(
+    (thrId, thrName) => {
+      return (event: any) => {
+        handleConfigChange([
+          ...vizState.level.map((th: AvailabilityUnitType) => {
+            if (thrId !== th.thid) return th;
+            return {
+              ...th,
+              [thrName]: (thrName === 'color' ? event : event?.target?.value) || '',
+            };
+          }),
+        ]);
+      };
+    },
+    [vizState, handleConfigChange]
+  );
+
+  const handleAvailabilityDelete = useCallback(
+    (thrId) => {
+      return (event: any) => {
+        handleConfigChange([
+          ...vizState.level.filter((th: AvailabilityUnitType) => th.thid !== thrId),
+        ]);
+      };
+    },
+    [vizState, handleConfigChange]
+  );
+
+  return (
+    <>
+      <EuiSpacer />
+      <EuiAccordion
+        initialIsOpen
+        id={`configPanel__Availability`}
+        buttonContent={availabilityAccordionButton}
+        paddingSize="s"
+      >
+        <EuiButton
+          fullWidth
+          data-test-subj="addAvailabilityButton"
+          size="s"
+          onClick={handleAddAvailability}
+          disabled={!hasSpanInApp}
+        >
+          {addButtonText}
+        </EuiButton>
+        <EuiSpacer size="s" />
+        {!isEmpty(vizState.level) &&
+          vizState.level.map((thr: AvailabilityUnitType) => {
+            return (
+              <>
+                <EuiFormRow fullWidth label="">
+                  <EuiFlexGroup alignItems="center" gutterSize="xs">
+                    <EuiFlexItem grow={3}>
+                      <EuiFormRow helpText="color">
+                        <EuiColorPicker
+                          fullWidth
+                          onChange={handleAvailabilityChange(thr.thid, 'color')}
+                          color={thr.color}
+                        />
+                      </EuiFormRow>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={5}>
+                      <EuiFormRow helpText="name">
+                        <EuiFieldText
+                          onChange={handleAvailabilityChange(thr.thid, 'name')}
+                          value={thr.name || ''}
+                          arial-label="Input availability name"
+                          data-test-subj="nameFieldText"
+                        />
+                      </EuiFormRow>
+                    </EuiFlexItem>
+                    <EuiFormRow helpText="expression">
+                      <EuiFlexItem grow={4}>
+                        <EuiSelect
+                          options={expressionOptions}
+                          value={thr.expression || ''}
+                          onChange={handleAvailabilityChange(thr.thid, 'expression')}
+                          aria-label="Select availability expression"
+                          data-test-subj="expressionSelect"
+                        />
+                      </EuiFlexItem>
+                    </EuiFormRow>
+                    <EuiFlexItem grow={5}>
+                      <EuiFormRow helpText="value">
+                        <EuiFieldNumber
+                          fullWidth
+                          placeholder="availability value"
+                          value={thr.value || 0}
+                          onChange={handleAvailabilityChange(thr.thid, 'value')}
+                          aria-label="Input availability value"
+                          data-test-subj="valueFieldNumber"
+                        />
+                      </EuiFormRow>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={1}>
+                      <EuiFormRow>
+                        <EuiIcon type="trash" onClick={handleAvailabilityDelete(thr.thid)} />
+                      </EuiFormRow>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFormRow>
+              </>
+            );
+          })}
+      </EuiAccordion>
+      {flyoutOpen && <AvailabilityInfoFlyout closeFlyout={closeFlyout} />}
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx
new file mode 100644
index 0000000000..5cdd05b112
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_bar_chart_styles.tsx
@@ -0,0 +1,119 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo, useCallback, Fragment } from 'react';
+import { EuiAccordion, EuiSpacer } from '@elastic/eui';
+import { ButtonGroupItem } from './config_button_group';
+import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer';
+import { BarOrientation } from '../../../../../../../../common/constants/shared';
+
+export const ConfigBarChartStyles = ({
+  visualizations,
+  schemas,
+  vizState,
+  handleConfigChange,
+  sectionName,
+  sectionId = 'chartStyles',
+}: any) => {
+  const { data } = visualizations;
+  const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
+
+  const handleConfigurationChange = useCallback(
+    (stateFieldName, max) => {
+      return (changes) => {
+        if (!max || changes <= max) {
+          handleConfigChange({
+            ...vizState,
+            [stateFieldName]: changes,
+          });
+        } else {
+          handleConfigChange({
+            ...vizState,
+          });
+        }
+      };
+    },
+    [handleConfigChange, vizState]
+  );
+
+  /* To update the schema options based on current style mode selection */
+  const currentSchemas = useMemo(() => {
+    if (vizState?.orientation === BarOrientation.horizontal) {
+      return schemas.filter(
+        (schema: IConfigPanelOptionSection) => schema.mapTo !== 'rotateBarLabels'
+      );
+    }
+    return schemas;
+  }, [vizState]);
+
+  const dimensions = useMemo(
+    () =>
+      currentSchemas
+        .map((schema: IConfigPanelOptionSection, index: number) => {
+          let params = {
+            title: schema.name,
+            vizState,
+            ...schema.props,
+          };
+          const DimensionComponent = schema.component || ButtonGroupItem;
+
+          const createDimensionComponent = (dimProps) => (
+            <Fragment key={`viz-series-${index}`}>
+              <DimensionComponent {...dimProps} />
+              <EuiSpacer size="s" />
+            </Fragment>
+          );
+          if (schema.eleType === 'buttons') {
+            params = {
+              ...params,
+              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, schema?.props?.max),
+            };
+            return createDimensionComponent(params);
+          }
+          if (schema.eleType === 'input') {
+            params = {
+              title: schema.name,
+              numValue: vizState[schema.mapTo] || '',
+              handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+              vizState,
+              ...schema.props,
+            };
+            return createDimensionComponent(params);
+          }
+          if (schema.eleType === 'slider') {
+            params = {
+              ...params,
+              minRange: schema?.props?.min || 0,
+              maxRange: schema?.props?.max || 100,
+              step: schema?.props?.step || 1,
+              currentRange: vizState[schema.mapTo] || schema?.defaultState,
+              ticks: schema?.props?.ticks,
+              showTicks: schema?.props?.showTicks || false,
+              handleSliderChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+            };
+            return createDimensionComponent(params);
+          }
+        })
+        .filter((item) => item),
+    [schemas, vizState, handleConfigurationChange]
+  );
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`configPanel__${sectionId}`}
+      buttonContent={sectionName}
+      paddingSize="s"
+    >
+      {dimensions}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx
new file mode 100644
index 0000000000..da1654ed1c
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiTitle, EuiSpacer, EuiButtonGroup, htmlIdGenerator } from '@elastic/eui';
+interface ToggleButtonOptions {
+  id: string;
+  label: string;
+}
+interface ToggleGroupProps {
+  title?: string;
+  legend: string;
+  groupOptions: ToggleButtonOptions[];
+  idSelected: string;
+  handleButtonChange: (id: string, value?: any) => void;
+}
+export const ButtonGroupItem: React.FC<ToggleGroupProps> = ({
+  title, legend, groupOptions, idSelected, handleButtonChange
+}) => (
+  <>
+    <EuiTitle size="xxs">
+      <h3>{title}</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <div style={{ width: "fit-content" }}>
+      <EuiButtonGroup
+        id={htmlIdGenerator('button-select')()}
+        name={title}
+        legend={legend}
+        options={groupOptions}
+        idSelected={idSelected}
+        onChange={handleButtonChange}
+        buttonSize="compressed"
+        isFullWidth={false}
+      />
+    </div>
+  </>
+);
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
new file mode 100644
index 0000000000..481263b601
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_chart_options.tsx
@@ -0,0 +1,190 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo, useCallback, Fragment } from 'react';
+import { EuiAccordion, EuiSpacer, EuiForm } from '@elastic/eui';
+import { PanelItem } from './config_panel_item';
+import { SPECTRUM, OPACITY } from '../../../../../../../../common/constants/colors';
+import {
+  ConfigChartOptionsEnum,
+  NUMBER_INPUT_MIN_LIMIT,
+} from '../../../../../../../../common/constants/explorer';
+
+export const ConfigChartOptions = ({
+  visualizations,
+  schemas,
+  vizState,
+  handleConfigChange,
+}: any) => {
+  const { data } = visualizations;
+  const { data: vizData = {}, metadata: { fields = [] } = {}, tree_map } = data?.rawVizData;
+
+  const handleConfigurationChange = useCallback(
+    (stateFiledName, max) => {
+      return (changes) => {
+        if (!max || changes <= max) {
+          handleConfigChange({
+            ...vizState,
+            [stateFiledName]: changes,
+          });
+        } else {
+          handleConfigChange({
+            ...vizState,
+          });
+        }
+      };
+    },
+    [handleConfigChange, vizState]
+  );
+
+  const currentSchemas = useMemo(() => {
+    if (vizState.colorMode === undefined || vizState.colorMode[0].name === SPECTRUM) {
+      return schemas.filter((schema) => schema.mapTo !== 'color');
+    }
+    if (vizState.colorMode && vizState.colorMode[0].name === OPACITY) {
+      return schemas.filter((schema) => schema.mapTo !== 'scheme');
+    }
+    return schemas;
+  }, [vizState]);
+
+  const dimensions = useMemo(() => {
+    return (
+      currentSchemas &&
+      currentSchemas.map((schema, index) => {
+        let params = {
+          title: schema.name,
+          vizState,
+          ...schema.props,
+        };
+        const DimensionComponent = schema.component || PanelItem;
+
+        switch (schema.eleType) {
+          case ConfigChartOptionsEnum.palettePicker:
+            params = {
+              ...params,
+              colorPalettes: schema.options || [],
+              selectedColor: vizState[schema.mapTo] || schema.defaultState,
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+            };
+            break;
+
+          case ConfigChartOptionsEnum.singleColorPicker:
+            params = {
+              ...params,
+              selectedColor: vizState[schema.mapTo] || schema.defaultState,
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+            };
+            break;
+
+          case ConfigChartOptionsEnum.colorpicker:
+            params = {
+              ...params,
+              selectedColor: vizState[schema.mapTo] || schema?.defaultState,
+              colorPalettes: schema.options || [],
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+            };
+            break;
+
+          case ConfigChartOptionsEnum.treemapColorPicker:
+            params = {
+              ...params,
+              selectedColor: vizState[schema.mapTo] || schema?.defaultState,
+              colorPalettes: schema.options || [],
+              numberOfParents:
+                (tree_map?.dataConfig?.dimensions !== undefined &&
+                  tree_map?.dataConfig.dimensions[0].parentFields.length) | 0,
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+            };
+            break;
+
+          case ConfigChartOptionsEnum.input:
+            params = {
+              ...params,
+              currentValue: vizState[schema.mapTo] || '',
+              numValue: vizState[schema.mapTo] || '',
+              handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+              minLimit: schema.props?.hasOwnProperty('minLimit')
+                ? schema.props.minLimit
+                : NUMBER_INPUT_MIN_LIMIT,
+            };
+            break;
+
+          case ConfigChartOptionsEnum.textInput:
+            params = {
+              ...params,
+              currentValue: vizState[schema.mapTo] || '',
+              name: schema.mapTo,
+              handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+            };
+            break;
+
+          case ConfigChartOptionsEnum.slider:
+            params = {
+              ...params,
+              maxRange: schema.props.max,
+              currentRange: vizState[schema.mapTo] || schema?.defaultState,
+              handleSliderChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+            };
+            break;
+
+          case ConfigChartOptionsEnum.switchButton:
+            params = {
+              ...params,
+              title: schema.name,
+              currentValue: vizState[schema.mapTo],
+              onToggle: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+            };
+            break;
+
+          case ConfigChartOptionsEnum.buttons:
+            params = {
+              ...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, schema?.props?.max),
+            };
+            break;
+
+          default:
+            params = {
+              ...params,
+              paddingTitle: schema.name,
+              advancedTitle: 'advancedTitle',
+              dropdownList: schema?.options || fields,
+              onSelectChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+              isSingleSelection: schema.isSingleSelection,
+              selectedAxis: vizState[schema.mapTo] || schema.defaultState,
+            };
+            break;
+        }
+
+        return (
+          <Fragment key={`viz-series-${index}`}>
+            <EuiForm component="form">
+              <DimensionComponent {...params} />
+              <EuiSpacer size="s" />
+            </EuiForm>
+          </Fragment>
+        );
+      })
+    );
+  }, [currentSchemas, vizState, handleConfigurationChange]);
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id="configPanel__chartStyles"
+      buttonContent="Chart styles"
+      paddingSize="s"
+    >
+      {dimensions}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx
new file mode 100644
index 0000000000..26ea6995fc
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx
@@ -0,0 +1,113 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+  EuiTitle,
+  EuiSpacer,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiColorPalettePicker,
+  EuiColorPicker,
+  EuiFormRow,
+} from '@elastic/eui';
+import {
+  DEFAULT_PALETTE,
+  MULTI_COLOR_PALETTE,
+  SINGLE_COLOR_PALETTE,
+} from '../../../../../../../../common/constants/colors';
+
+export const ColorPalettePicker = ({
+  title,
+  selectedColor,
+  numberOfParents,
+  colorPalettes,
+  onSelectChange,
+}: any) => {
+  const getColorObject = (
+    name: string = DEFAULT_PALETTE,
+    childColor?: string,
+    parentColors?: string[]
+  ) => ({
+    name,
+    childColor: childColor ?? name,
+    parentColors: parentColors ?? [],
+  });
+
+  const [childColor, setChildColor] = useState('#000000');
+  const [parentColors, setParentColors] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (numberOfParents > parentColors.length) {
+      setParentColors([
+        ...parentColors,
+        ...Array(numberOfParents - parentColors.length).fill('#000000'),
+      ]);
+    }
+  }, [numberOfParents]);
+
+  const onPaletteChange = (value: string) => {
+    if (value === SINGLE_COLOR_PALETTE)
+      onSelectChange(getColorObject(SINGLE_COLOR_PALETTE, childColor));
+    else if (value === MULTI_COLOR_PALETTE)
+      onSelectChange(getColorObject(MULTI_COLOR_PALETTE, childColor, parentColors));
+    else onSelectChange(getColorObject(value));
+  };
+
+  const onChildColorChange = (value: string) => {
+    setChildColor(value);
+    onSelectChange(getColorObject(selectedColor.name, value, parentColors));
+  };
+
+  const onParentColorChange = (parentIndex: number) => (value: string) => {
+    const newColors = [
+      ...parentColors.slice(0, parentIndex),
+      value,
+      ...parentColors.slice(parentIndex + 1, parentColors.length),
+    ];
+    setParentColors(newColors);
+    onSelectChange(getColorObject(selectedColor.name, childColor, newColors));
+  };
+
+  return (
+    <>
+      <EuiTitle size="xxs">
+        <h3>{title}</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiFlexGroup gutterSize={'xs'}>
+        {[SINGLE_COLOR_PALETTE, MULTI_COLOR_PALETTE].includes(selectedColor.name) && (
+          <EuiFlexItem grow={1}>
+            <EuiFormRow helpText={selectedColor.name === MULTI_COLOR_PALETTE && 'Child field'}>
+              <EuiColorPicker onChange={onChildColorChange} color={childColor} />
+            </EuiFormRow>
+          </EuiFlexItem>
+        )}
+        {selectedColor.name === MULTI_COLOR_PALETTE &&
+          numberOfParents > 0 &&
+          Array(numberOfParents)
+            .fill(0)
+            .map((_, i) => (
+              <EuiFlexItem grow={1} key={i}>
+                <EuiFormRow helpText={`Parent ${i + 1} field`}>
+                  <EuiColorPicker
+                    onChange={onParentColorChange(i)}
+                    color={parentColors[i] ?? '#000000'}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+            ))}
+        <EuiFlexItem grow={3}>
+          <EuiColorPalettePicker
+            palettes={colorPalettes}
+            onChange={onPaletteChange}
+            valueOfSelected={selectedColor.name}
+            selectionDisplay={'title'}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
new file mode 100644
index 0000000000..f9625151af
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
@@ -0,0 +1,131 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment, useCallback } from 'react';
+import {
+  EuiButton,
+  EuiAccordion,
+  EuiFormRow,
+  EuiColorPicker,
+  EuiSpacer,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
+import { isEmpty } from 'lodash';
+import { ADD_BUTTON_TEXT, AGGREGATIONS } from '../../../../../../../../common/constants/explorer';
+import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
+import { getPropName } from '../../../../../../../components/event_analytics/utils/utils';
+
+export const ConfigColorTheme = ({
+  visualizations,
+  schemas,
+  vizState = [],
+  handleConfigChange,
+  sectionName = 'Color theme',
+}: any) => {
+  const { data, vis } = visualizations;
+  const { defaultAxes = {} } = data;
+  const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
+  const { dataConfig = {} } = data?.userConfigs;
+  const addButtonText = ADD_BUTTON_TEXT;
+  const getColorThemeRow = () => ({
+    ctid: htmlIdGenerator('ct')(),
+    name: '',
+    color: '#FC0505',
+  });
+
+  const options = (dataConfig[AGGREGATIONS] && dataConfig[AGGREGATIONS].length !== 0
+    ? dataConfig[AGGREGATIONS]
+    : vis.name === VIS_CHART_TYPES.Histogram
+    ? defaultAxes.yaxis ?? []
+    : fields
+  ).map((item) => ({
+    ...item,
+    label: vis.name === VIS_CHART_TYPES.Histogram ? item.name : getPropName(item),
+    className: 'color-theme-combo-box-option',
+  }));
+
+  const getUpdatedOptions = () =>
+    options.filter((option) => !vizState.some((vizOpt) => option.label === vizOpt?.name?.label));
+
+  const handleAddColorTheme = useCallback(() => {
+    const res = isEmpty(vizState) ? [] : vizState;
+    handleConfigChange([getColorThemeRow(), ...res]);
+  }, [vizState, handleConfigChange]);
+
+  const handleColorThemeChange = useCallback(
+    (ctId, ctName) => (event) => {
+      handleConfigChange([
+        ...vizState.map((ct) => {
+          if (ctId !== ct.ctid) return ct;
+          return {
+            ...ct,
+            [ctName]: (ctName === 'color' ? event : event[0]) || '',
+          };
+        }),
+      ]);
+    },
+    [vizState, handleConfigChange]
+  );
+
+  const handleColorThemeDelete = useCallback(
+    (ctId) => (event) => handleConfigChange([...vizState.filter((ct) => ct.ctid !== ctId)]),
+    [vizState, handleConfigChange]
+  );
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`configPanel__${sectionName}`}
+      buttonContent={sectionName}
+      paddingSize="s"
+    >
+      <EuiButton fullWidth size="s" onClick={handleAddColorTheme}>
+        {addButtonText}
+      </EuiButton>
+      <EuiSpacer size="s" />
+      {!isEmpty(vizState) &&
+        vizState.map((ct) => {
+          return (
+            <Fragment key={ct.ctid}>
+              <EuiFormRow fullWidth label="">
+                <EuiFlexGroup alignItems="center" gutterSize="xs">
+                  <EuiFlexItem grow={3}>
+                    <EuiFormRow helpText="Color">
+                      <EuiColorPicker
+                        fullWidth
+                        onChange={handleColorThemeChange(ct.ctid, 'color')}
+                        color={ct.color}
+                      />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={4}>
+                    <EuiFormRow helpText="Field">
+                      <EuiComboBox
+                        id={ct.ctid}
+                        placeholder="Select a field"
+                        options={getUpdatedOptions()}
+                        singleSelection
+                        selectedOptions={ct.name !== '' ? [ct.name] : []}
+                        onChange={handleColorThemeChange(ct.ctid, 'name')}
+                        aria-label="Use aria labels when no actual label is in use"
+                      />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={1}>
+                    <EuiFormRow>
+                      <EuiIcon type="trash" onClick={handleColorThemeDelete(ct.ctid)} />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFormRow>
+            </Fragment>
+          );
+        })}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_data_links.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_data_links.tsx
new file mode 100644
index 0000000000..e183de7b8d
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_data_links.tsx
@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiAccordion, EuiButton } from '@elastic/eui';
+
+export const ConfigDataLinks = (props: any) => {
+  return (
+    <EuiAccordion id="configPanel__dataLinks" buttonContent="Data links" paddingSize="s">
+      <EuiButton size="s">+ Add link</EuiButton>
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_gauge_options.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_gauge_options.tsx
new file mode 100644
index 0000000000..2767c46820
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_gauge_options.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo, useCallback, Fragment } from 'react';
+import { indexOf } from 'lodash';
+import { EuiAccordion, EuiSpacer } from '@elastic/eui';
+import { PanelItem } from './config_panel_item';
+import { NUMERICAL_FIELDS } from '../../../../../../../../common/constants/shared';
+
+export const ConfigGaugeValueOptions = ({
+  visualizations,
+  schemas,
+  vizState,
+  handleConfigChange,
+  sectionName,
+}: any) => {
+  const { data } = visualizations;
+  const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
+  const handleConfigurationChange = useCallback(
+    (stateFiledName) => {
+      return (changes) => {
+        handleConfigChange({
+          ...vizState,
+          [stateFiledName]: changes,
+        });
+      };
+    },
+    [handleConfigChange, vizState]
+  );
+
+  const dropdownLists = {
+    series: fields,
+    value: [],
+  };
+
+  if (vizState?.series && vizState?.series[0]?.type) {
+    if (indexOf(NUMERICAL_FIELDS, vizState?.series[0]?.type) > 0) {
+      dropdownLists.value = [...fields];
+    } else {
+      dropdownLists.value = [
+        ...vizData[vizState?.series[0]?.name].map((val) => ({
+          name: val,
+          type: vizState?.series[0]?.type,
+        })),
+      ];
+    }
+  }
+
+  const dimensions = useMemo(() => {
+    return schemas.map((schema, index) => {
+      const DimensionComponent = schema.component || PanelItem;
+      const params = {
+        paddingTitle: schema.name,
+        advancedTitle: 'advancedTitle',
+        dropdownList: dropdownLists[schema.mapTo].map((item) => ({ ...item })),
+        onSelectChange: handleConfigurationChange(schema.mapTo),
+        isSingleSelection: schema.isSingleSelection,
+        selectedAxis: vizState[schema.mapTo],
+        vizState,
+        ...schema.props,
+      };
+      return (
+        <Fragment key={`viz-series-${index}`}>
+          <DimensionComponent  {...params} />
+          <EuiSpacer size="s" />
+        </Fragment>
+      );
+    });
+  }, [schemas, vizState, handleConfigurationChange, dropdownLists]);
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`configPanel__${sectionName}`}
+      buttonContent={sectionName}
+      paddingSize="s"
+    >
+      {dimensions}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_heatmap_color_palette_picker.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_heatmap_color_palette_picker.tsx
new file mode 100644
index 0000000000..25e3f3c475
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_heatmap_color_palette_picker.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiTitle,
+  EuiSpacer,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiColorPalettePicker,
+} from '@elastic/eui';
+
+export const HeatmapColorPalettePicker = ({
+  title,
+  colorPalettes,
+  selectedColor,
+  onSelectChange,
+}: any) => {
+  const onPaletteChange = (value: string) => {
+    onSelectChange({ name: value, color: value });
+  };
+
+  return (
+    <>
+      <EuiTitle size="xxs">
+        <h3>{title}</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiFlexGroup gutterSize={'xs'}>
+        <EuiFlexItem grow={3}>
+          <EuiColorPalettePicker
+            palettes={colorPalettes}
+            onChange={onPaletteChange}
+            valueOfSelected={selectedColor.name}
+            selectionDisplay={'title'}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx
new file mode 100644
index 0000000000..f048ab8ada
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_legend.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment, useCallback, useMemo } from 'react';
+import { EuiAccordion, EuiSpacer } from '@elastic/eui';
+import { ButtonGroupItem } from './config_button_group';
+import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer';
+
+export const ConfigLegend = ({ schemas, vizState, handleConfigChange }: any) => {
+  const handleConfigurationChange = useCallback(
+    (stateFiledName) => {
+      return (changes) => {
+        handleConfigChange({
+          ...vizState,
+          [stateFiledName]: changes,
+        });
+      };
+    },
+    [handleConfigChange, vizState]
+  );
+
+  const dimensions = useMemo(() => {
+    return schemas.map((schema, index) => {
+      const DimensionComponent = schema.component || ButtonGroupItem;
+      let params = {
+        title: schema.name,
+        vizState,
+        ...schema.props,
+      };
+      if (schema.eleType === 'input') {
+        params = {
+          ...params,
+          currentValue: vizState[schema.mapTo] || '',
+          numValue: vizState[schema.mapTo] || '',
+          handleInputChange: handleConfigurationChange(schema.mapTo),
+        };
+      } else {
+        params = {
+          ...params,
+          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),
+        };
+      }
+      return (
+        <Fragment key={`viz-series-${index}`}>
+          <DimensionComponent  {...params} />
+          <EuiSpacer size="s" />
+        </Fragment>
+      );
+    });
+  }, [schemas, vizState, handleConfigurationChange]);
+
+  return (
+    <EuiAccordion initialIsOpen id="configPanel__legend" buttonContent="Legend" paddingSize="s">
+      {dimensions}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx
new file mode 100644
index 0000000000..3cac154691
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_line_chart_styles.tsx
@@ -0,0 +1,131 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo, useCallback, Fragment } from 'react';
+import { EuiAccordion, EuiSpacer } from '@elastic/eui';
+import { ButtonGroupItem } from './config_button_group';
+import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer';
+import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
+
+export const ConfigLineChartStyles = ({
+  visualizations,
+  schemas,
+  vizState,
+  handleConfigChange,
+  sectionName,
+  sectionId = 'chartStyles',
+}: any) => {
+  const { data } = visualizations;
+  const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
+
+  const handleConfigurationChange = useCallback(
+    (stateFiledName, max) => {
+      return (changes) => {
+        if (!max || changes <= max) {
+          handleConfigChange({
+            ...vizState,
+            [stateFiledName]: changes,
+          });
+        } else {
+          handleConfigChange({
+            ...vizState,
+          });
+        }
+      };
+    },
+    [handleConfigChange, vizState]
+  );
+
+  /* To update the schema options based on current style mode selection */
+  const currentSchemas = useMemo(() => {
+    if (vizState?.style) {
+      switch (vizState.style) {
+        case 'lines':
+          return schemas.filter(
+            (schema: IConfigPanelOptionSection) => schema.mapTo !== 'pointSize'
+          );
+        case 'bar':
+          return schemas.filter(
+            (schema: IConfigPanelOptionSection) =>
+              !['interpolation', 'pointSize'].includes(schema.mapTo)
+          );
+        case 'markers':
+          return schemas.filter((schema: IConfigPanelOptionSection) =>
+            ['style', 'pointSize'].includes(schema.mapTo)
+          );
+        case 'lines+markers':
+          return schemas.filter(
+            (schema: IConfigPanelOptionSection) => schema.mapTo !== 'interpolation'
+          );
+      }
+    } else if (visualizations?.vis?.name === VIS_CHART_TYPES.Scatter) {
+      return schemas.filter((schema: IConfigPanelOptionSection) =>
+        ['style', 'pointSize'].includes(schema.mapTo)
+      );
+    } else {
+      return schemas.filter((schema: IConfigPanelOptionSection) => schema.mapTo !== 'pointSize');
+    }
+  }, [vizState]);
+
+  const dimensions = useMemo(
+    () =>
+      currentSchemas &&
+      currentSchemas.map((schema: IConfigPanelOptionSection, index: number) => {
+        const DimensionComponent = schema.component || ButtonGroupItem;
+        let params = {
+          title: schema.name,
+          vizState,
+          ...schema.props,
+        };
+        if (schema.eleType === 'buttons') {
+          params = {
+            ...params,
+            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, schema?.props?.max),
+          };
+        } else if (schema.eleType === 'slider') {
+          params = {
+            ...params,
+            minRange: schema?.props?.min || 0,
+            maxRange: schema?.props?.max || 100,
+            step: schema?.props?.step || 1,
+            currentRange: vizState[schema.mapTo] || schema?.defaultState,
+            ticks: schema?.props?.ticks,
+            showTicks: schema?.props?.showTicks || false,
+            handleSliderChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+          };
+        } else if (schema.eleType === 'input') {
+          params = {
+            ...params,
+            numValue: vizState[schema.mapTo] || '',
+            handleInputChange: handleConfigurationChange(schema.mapTo, schema?.props?.max),
+          };
+        }
+        return (
+          <Fragment key={`viz-series-${index}`}>
+            <DimensionComponent {...params} />
+            <EuiSpacer size="s" />
+          </Fragment>
+        );
+      }),
+    [currentSchemas, vizState, handleConfigurationChange]
+  );
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`configPanel__${sectionId}`}
+      buttonContent={sectionName}
+      paddingSize="s"
+    >
+      {dimensions}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_logs_view.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_logs_view.tsx
new file mode 100644
index 0000000000..0f049cb512
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_logs_view.tsx
@@ -0,0 +1,110 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useContext, useMemo, Fragment } from 'react';
+import { EuiAccordion, EuiSpacer } from '@elastic/eui';
+import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer';
+import { ButtonGroupItem } from './config_button_group';
+import { TabContext } from '../../../../../../event_analytics/hooks';
+
+export const ConfigLogsView = ({
+  visualizations,
+  schemas,
+  vizState,
+  handleConfigChange,
+  sectionName,
+  sectionId = 'chartStyles',
+}) => {
+  const { explorerData } = useContext<any>(TabContext);
+  const rawData = explorerData.jsonData;
+
+  const handleConfigurationChange = useCallback(
+    (stateFiledName) => {
+      return (changes) => {
+        handleConfigChange({
+          ...vizState,
+          [stateFiledName]: changes,
+        });
+      };
+    },
+    [handleConfigChange, vizState]
+  );
+
+  const dimensions = useMemo(
+    () =>
+      schemas.map((schema: IConfigPanelOptionSection, index: string) => {
+        let params = {
+          title: schema.name,
+          vizState,
+          ...schema.props,
+        };
+        const DimensionComponent = schema.component || ButtonGroupItem;
+        switch (schema.eleType) {
+          case 'buttons':
+            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,
+            };
+            break;
+          case 'switch':
+            let isDisabled = false;
+            if (schema.name === 'Time') {
+              const isTimeAvailable =
+                rawData &&
+                rawData.find(
+                  (data) => data.timestamp !== undefined || data.new_timestamp !== undefined
+                );
+              isDisabled = isTimeAvailable === undefined;
+            }
+            params = {
+              label: schema.name,
+              disabled: isDisabled,
+              checked:
+                vizState[schema.mapTo] !== undefined
+                  ? vizState[schema.mapTo]
+                  : schema?.defaultState,
+              handleChange: handleConfigurationChange(schema.mapTo),
+              vizState,
+              ...schema.props,
+            };
+            break;
+          default:
+            params = {
+              title: schema.name,
+              currentValue: vizState[schema.mapTo] || '',
+              handleInputChange: handleConfigurationChange(schema.mapTo),
+              vizState,
+              ...schema.props,
+            };
+        }
+        return (
+          <Fragment key={`config-logs-view-${index}`}>
+            <DimensionComponent key={`viz-series-${index}`} {...params} />
+            <EuiSpacer size="s" />
+          </Fragment>
+        );
+      }),
+    [schemas, vizState, handleConfigurationChange]
+  );
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`configPanel__${sectionId}`}
+      buttonContent={sectionName}
+      paddingSize="s"
+    >
+      {dimensions}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx
new file mode 100644
index 0000000000..af67533bdd
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { EuiFieldNumber, EuiTitle, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
+
+interface InputFieldProps {
+  title: string;
+  numValue: number;
+  handleInputChange: (value?: any) => void;
+  minLimit?: number;
+}
+
+export const InputFieldItem: React.FC<InputFieldProps> = ({
+  title,
+  numValue,
+  handleInputChange,
+  minLimit,
+}) => {
+  const [fieldValue, setFieldValue] = useState<number | string>('');
+
+  useEffect(() => {
+    if (numValue !== undefined || numValue !== '') {
+      setFieldValue(numValue);
+    }
+  }, [numValue]);
+
+  return (
+    <>
+      <EuiTitle size="xxs">
+        <h3>{title}</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiFieldNumber
+        id={htmlIdGenerator('input-number')()}
+        fullWidth
+        placeholder="auto"
+        value={fieldValue}
+        min={minLimit}
+        onChange={(e) => setFieldValue(e.target.value)}
+        onBlur={() => handleInputChange(fieldValue)}
+        data-test-subj="valueFieldNumber"
+      />
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx
new file mode 100644
index 0000000000..a6be223f7c
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { uniqueId, isEmpty } from 'lodash';
+import { EuiTitle, EuiComboBox, EuiSpacer } from '@elastic/eui';
+
+export const PanelItem = ({
+  paddingTitle,
+  selectedAxis,
+  dropdownList,
+  onSelectChange,
+  isInvalid,
+  isSingleSelection = false,
+  isClearable = true,
+}: any) => {
+  const options = dropdownList.map((item) => {
+    return {
+      ...item,
+      label: item.name,
+    };
+  });
+
+  return (
+    <>
+      <EuiTitle size="xxs">
+        <h3>{paddingTitle}</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiComboBox
+        id={uniqueId('axis-select-')}
+        placeholder="Select a field"
+        options={options}
+        selectedOptions={Array.isArray(selectedAxis) ? selectedAxis : []}
+        isInvalid={isInvalid ?? isEmpty(selectedAxis)}
+        isClearable={isClearable}
+        singleSelection={isSingleSelection}
+        onChange={onSelectChange}
+        aria-label="Use aria labels when no actual label is in use"
+      />
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx
new file mode 100644
index 0000000000..a6734400b3
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
+import { find } from 'lodash';
+import {
+  DEFAULT_GAUGE_CHART_PARAMETERS,
+  GROUPBY,
+} from '../../../../../../../../common/constants/explorer';
+import { IVisualizationContainerProps } from '../../../../../../../../common/types/explorer';
+
+const helpText = `Limit number of gauges.`;
+
+export const ConfigPanelOptionGauge = ({
+  visualizations,
+  vizState,
+  panelOptionsValues,
+  handleConfigChange,
+}: any) => {
+  const {
+    data: { rawVizData: { metadata: { fields = [] } = {} } = {}, userConfigs },
+  }: IVisualizationContainerProps = visualizations;
+
+  const { dataConfig = {} } = userConfigs;
+  let dimensions = dataConfig[GROUPBY] ?? [];
+  const [numberOfGauges, setNumberOfGauges] = useState<number>(
+    DEFAULT_GAUGE_CHART_PARAMETERS.DisplayDefaultGauges
+  );
+
+  const timestampField = find(fields, (field) => field.type === 'timestamp');
+
+  if (dataConfig.span && dataConfig.span.time_field && timestampField) {
+    dimensions = [timestampField, ...dimensions];
+  }
+
+  useEffect(() => {
+    if (!vizState) {
+      setNumberOfGauges(DEFAULT_GAUGE_CHART_PARAMETERS.DisplayDefaultGauges);
+    }
+  }, [vizState?.numberOfGauges]);
+
+  return (
+    <EuiFormRow fullWidth label="Number of gauges" helpText={helpText}>
+      <EuiFieldNumber
+        name="numberOfGauges"
+        onChange={(e) => {
+          setNumberOfGauges(Number(e.target.value));
+        }}
+        value={numberOfGauges}
+        min={DEFAULT_GAUGE_CHART_PARAMETERS.DisplayDefaultGauges}
+        onBlur={() => {
+          const newPanelOptions = {
+            ...panelOptionsValues,
+            numberOfGauges,
+          };
+          handleConfigChange(newPanelOptions);
+        }}
+        placeholder={'Number of gauges'}
+        readOnly={dimensions.length === 0}
+      />
+    </EuiFormRow>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
new file mode 100644
index 0000000000..870a90ba05
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { EuiFieldText, EuiForm, EuiFormRow, EuiTextArea, EuiAccordion } from '@elastic/eui';
+import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
+import { DEFAULT_GAUGE_CHART_PARAMETERS } from '../../../../../../../../common/constants/explorer';
+import { ConfigPanelOptionGauge } from './config_panel_option_gauge';
+
+const helpText = 'Name your visualization.';
+
+export const ConfigPanelOptions = ({ visualizations, handleConfigChange, vizState }: any) => {
+  const { dataConfig = {} } = visualizations?.data?.userConfigs;
+  const { name } = visualizations?.vis;
+
+  const [panelOptionsValues, setPanelOptionsValues] = useState({
+    title: '',
+    description: '',
+  });
+
+  useEffect(() => {
+    setPanelOptionsValues({
+      title: vizState?.title || '',
+      description: vizState?.description || '',
+      ...(visualizations?.vis?.name?.toLowerCase() === VIS_CHART_TYPES.Gauge && {
+        numberOfGauges:
+          vizState?.numberOfGauges || DEFAULT_GAUGE_CHART_PARAMETERS.DisplayDefaultGauges,
+      }),
+    });
+  }, [name, vizState?.title, vizState?.description, vizState?.numberOfGauges]);
+
+  const handleTextChange = ({ target }) => {
+    setPanelOptionsValues({ ...panelOptionsValues, [target.name]: target.value });
+  };
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id="configPanel__panelOptions"
+      buttonContent="Panel options"
+      paddingSize="s"
+    >
+      <EuiForm component="form">
+        <EuiFormRow fullWidth label="Title" helpText={`${helpText}`}>
+          <EuiFieldText
+            name="title"
+            onChange={handleTextChange}
+            onBlur={() => handleConfigChange(panelOptionsValues)}
+            value={panelOptionsValues.title}
+            placeholder={'Title'}
+          />
+        </EuiFormRow>
+        <EuiFormRow label="Description">
+          <EuiTextArea
+            name="description"
+            aria-label="Use aria labels when no actual label is in use"
+            placeholder={'Description'}
+            value={panelOptionsValues.description}
+            onChange={handleTextChange}
+            onBlur={() => handleConfigChange(panelOptionsValues)}
+          />
+        </EuiFormRow>
+        {visualizations?.vis?.name?.toLowerCase() === VIS_CHART_TYPES.Gauge && (
+          <ConfigPanelOptionGauge
+            onChange={handleTextChange}
+            handleConfigChange={handleConfigChange}
+            visualizations={visualizations}
+            vizState={vizState}
+            panelOptionsValues={panelOptionsValues}
+          />
+        )}
+      </EuiForm>
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_single_color_picker.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_single_color_picker.tsx
new file mode 100644
index 0000000000..da5fb36b71
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_single_color_picker.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import {
+  EuiTitle,
+  EuiSpacer,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiColorPicker,
+  EuiFormRow,
+  colorPalette,
+} from '@elastic/eui';
+import { lightenColor } from '../../../../../../event_analytics/utils/utils';
+import { SINGLE_COLOR_PALETTE } from '../../../../../../../../common/constants/colors';
+
+export const SingleColorPicker = ({ title, selectedColor, onSelectChange }: any) => {
+  const onColorChange = (value: string) => {
+    onSelectChange({ name: SINGLE_COLOR_PALETTE, color: value });
+  };
+
+  return (
+    <>
+      <EuiTitle size="xxs">
+        <h3>{title}</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiFlexGroup gutterSize={'xs'}>
+        <EuiFlexItem grow={3}>
+          <EuiFormRow>
+            <EuiColorPicker onChange={onColorChange} color={selectedColor.color} />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer size="m" />
+      <EuiFlexGroup gutterSize="none" responsive={false}>
+        {colorPalette([lightenColor(selectedColor.color, 50), selectedColor.color], 10).map(
+          (hexCode) => (
+            <EuiFlexItem key={hexCode} grow={3} style={{ height: '16px', width: '16px' }}>
+              <span
+                title={hexCode}
+                style={{ backgroundColor: hexCode, height: '16px', width: 'auto' }}
+              />
+            </EuiFlexItem>
+          )
+        )}
+      </EuiFlexGroup>
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx
new file mode 100644
index 0000000000..e260ee2940
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider.tsx
@@ -0,0 +1,67 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { ReactNode } from 'react';
+import { EuiTitle, EuiSpacer, EuiRange, htmlIdGenerator, EuiToolTip, EuiIcon } from '@elastic/eui';
+const tooltipIcon = <EuiIcon type="iInCircle" color="text" size="m" className="info-icon" />;
+
+export interface EuiRangeTick {
+  value: number;
+  label: ReactNode;
+}
+
+interface Props {
+  title: string;
+  currentRange: string;
+  minRange?: number;
+  maxRange: number;
+  showTicks?: boolean;
+  ticks?: EuiRangeTick[];
+  step: number;
+  handleSliderChange: (
+    e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>
+  ) => void;
+}
+
+const rangeToolTip = (message: string) => (
+  <EuiToolTip position="top" content={message} delay="regular" anchorClassName="eui-textTruncate">
+    {tooltipIcon}
+  </EuiToolTip>
+);
+
+export const SliderConfig: React.FC<Props> = ({
+  title,
+  currentRange,
+  handleSliderChange,
+  minRange,
+  maxRange,
+  showTicks,
+  ticks,
+  step,
+}) => (
+  <>
+    <div style={{ display: 'flex' }}>
+      <EuiTitle size="xxs">
+        <h3>{title}</h3>
+      </EuiTitle>
+      {rangeToolTip(`Value must be in the range of ${minRange} to ${maxRange}`)}
+    </div>
+    <EuiSpacer size="s" />
+    <EuiRange
+      aria-label="change lineWidth slider"
+      id={htmlIdGenerator('inputRangeSlider')()}
+      min={minRange}
+      max={maxRange}
+      name={title}
+      value={currentRange}
+      onChange={(e) => handleSliderChange(e.target.value)}
+      showTicks={showTicks}
+      ticks={ticks}
+      step={step}
+      compressed
+      showInput
+    />
+  </>
+);
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx
new file mode 100644
index 0000000000..ba2ca23e8c
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment } from 'react';
+import { EuiSpacer, EuiFormRow, EuiSwitch, htmlIdGenerator } from '@elastic/eui';
+
+interface EUISwitch {
+  label: string;
+  disabled: boolean;
+  checked: boolean;
+  handleChange: (isChecked: boolean) => void;
+}
+export const ConfigSwitch: React.FC<EUISwitch> = ({ label, disabled, checked, handleChange }) => (
+  <Fragment key={`config-switch-${label}`}>
+    <EuiFormRow label={label}>
+      <EuiSwitch
+        id={htmlIdGenerator('switch-button')()}
+        showLabel={false}
+        disabled={disabled}
+        label={label}
+        checked={checked}
+        onChange={(e) => handleChange(e.target.checked)}
+        compressed
+      />
+    </EuiFormRow>
+    <EuiSpacer size="s" />
+  </Fragment>
+);
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch_button.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch_button.tsx
new file mode 100644
index 0000000000..934bd80776
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch_button.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiSwitch, EuiSpacer } from '@elastic/eui';
+
+interface SwitchButtonProps {
+  currentValue: boolean;
+  title: string;
+  onToggle: (value: boolean) => void;
+}
+export const SwitchButton = ({ currentValue, onToggle, title }: SwitchButtonProps) => {
+  return (
+    <>
+      <EuiSpacer />
+      <EuiSwitch
+        label={title}
+        checked={currentValue}
+        onChange={(e) => onToggle(e.target.checked)}
+      />
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text.tsx
new file mode 100644
index 0000000000..0fbdaaadd8
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback } from 'react';
+import { EuiMarkdownEditor, EuiAccordion } from '@elastic/eui';
+
+export const ConfigText = ({ visualizations, schemas, vizState, handleConfigChange }) => {
+  const handleTextChange = useCallback(
+    (stateFiledName) => {
+      return (changes) => {
+        handleConfigChange({
+          ...vizState,
+          [stateFiledName]: changes,
+        });
+      };
+    },
+    [handleConfigChange, vizState]
+  );
+
+  return (
+    <EuiAccordion initialIsOpen id="configPanel__textOptions" buttonContent="Text" paddingSize="s">
+      <EuiMarkdownEditor
+        aria-label="EUI markdown editor demo"
+        placeholder="Your markdown here..."
+        value={vizState.markdown || ''}
+        onChange={handleTextChange('markdown')}
+        height={400}
+      />
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text_input.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text_input.tsx
new file mode 100644
index 0000000000..0aa634b2aa
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text_input.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useEffect } from 'react';
+import { EuiFieldText, EuiTitle, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
+
+interface InputFieldProps {
+  name: string;
+  title: string;
+  currentValue: string;
+  handleInputChange: (value: string) => void;
+}
+
+export const TextInputFieldItem: React.FC<InputFieldProps> = ({
+  name,
+  title,
+  currentValue,
+  handleInputChange,
+}) => {
+  const [fieldValue, setFieldValue] = useState<string>('');
+
+  useEffect(() => {
+    if (currentValue !== undefined || currentValue !== '') {
+      setFieldValue(currentValue);
+    }
+  }, [currentValue]);
+
+  return (
+    <>
+      <EuiTitle size="xxs">
+        <h3>{title}</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiFieldText
+        id={htmlIdGenerator('input-text')()}
+        name={name}
+        fullWidth
+        placeholder={title}
+        value={fieldValue}
+        onChange={(e) => setFieldValue(e.target.value)}
+        onBlur={() => handleInputChange(fieldValue)}
+        data-test-subj="valueFieldText"
+      />
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx
new file mode 100644
index 0000000000..013b25b0c1
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx
@@ -0,0 +1,163 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment, useCallback } from 'react';
+import {
+  EuiButton,
+  EuiAccordion,
+  EuiFormRow,
+  EuiFieldNumber,
+  EuiColorPicker,
+  EuiSpacer,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFieldText,
+  htmlIdGenerator,
+  EuiToolTip,
+} from '@elastic/eui';
+import { isEmpty } from 'lodash';
+
+export interface ThresholdUnitType {
+  thid: string;
+  name: string;
+  color: string;
+  value: number;
+  isReadOnly?: boolean;
+}
+
+export const ConfigThresholds = ({
+  visualizations,
+  schemas,
+  vizState = [],
+  handleConfigChange,
+  sectionName = 'Thresholds',
+  props,
+}: any) => {
+  const { type } = visualizations?.vis;
+  const addButtonText = '+ Add threshold';
+  const AddButtonTextWrapper = () =>
+    props?.maxLimit && !isEmpty(vizState) && vizState.length === props.maxLimit ? (
+      <EuiToolTip position="top" content="Only one threshold can be applied">
+        <Fragment key="tooltip-button">{addButtonText}</Fragment>
+      </EuiToolTip>
+    ) : (
+      <Fragment key="tooltip-button">{addButtonText}</Fragment>
+    );
+
+  const getThresholdUnit = () => {
+    return {
+      thid: htmlIdGenerator('thr')(),
+      name: '',
+      color: '#FC0505',
+      value: 0,
+      isReadOnly: false,
+    };
+  };
+
+  const handleAddThreshold = useCallback(() => {
+    let res = vizState;
+    if (isEmpty(vizState)) res = [];
+    handleConfigChange([getThresholdUnit(), ...res]);
+  }, [vizState, handleConfigChange]);
+
+  const handleThresholdChange = useCallback(
+    (thrId, thrName) => {
+      return (event: any) => {
+        handleConfigChange([
+          ...vizState.map((th: ThresholdUnitType) => {
+            if (thrId !== th.thid) return th;
+            return {
+              ...th,
+              [thrName]: (thrName === 'color' ? event : event?.target?.value) || '',
+            };
+          }),
+        ]);
+      };
+    },
+    [vizState, handleConfigChange]
+  );
+
+  const handleThresholdDelete = useCallback(
+    (thrId) => {
+      return () => {
+        handleConfigChange([...vizState.filter((th: ThresholdUnitType) => th.thid !== thrId)]);
+      };
+    },
+    [vizState, handleConfigChange]
+  );
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`configPanel__${sectionName}`}
+      buttonContent={sectionName}
+      paddingSize="s"
+    >
+      <EuiButton
+        data-test-subj="addThresholdButton"
+        fullWidth
+        size="s"
+        onClick={handleAddThreshold}
+        {...(props?.maxLimit && {
+          isDisabled: !isEmpty(vizState) && vizState.length === props.maxLimit,
+        })}
+      >
+        <AddButtonTextWrapper />
+      </EuiButton>
+      <EuiSpacer size="s" />
+      {!isEmpty(vizState) &&
+        vizState.map((thr: ThresholdUnitType) => {
+          return (
+            <Fragment key={thr.thid}>
+              <EuiFormRow fullWidth label="">
+                <EuiFlexGroup alignItems="center" gutterSize="xs">
+                  <EuiFlexItem grow={3}>
+                    <EuiFormRow helpText="color">
+                      <EuiColorPicker
+                        fullWidth
+                        onChange={handleThresholdChange(thr.thid, 'color')}
+                        color={thr.color}
+                      />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={5}>
+                    <EuiFormRow helpText="name">
+                      <EuiFieldText
+                        onChange={handleThresholdChange(thr.thid, 'name')}
+                        value={thr.name || ''}
+                        arial-label="Input threshold name"
+                        data-test-subj="nameFieldText"
+                        readOnly={thr.isReadOnly}
+                      />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={5}>
+                    <EuiFormRow helpText="value">
+                      <EuiFieldNumber
+                        fullWidth
+                        placeholder="threshold value"
+                        value={thr.value || 0}
+                        onChange={handleThresholdChange(thr.thid, 'value')}
+                        aria-label="Input threshold value"
+                        data-test-subj="valueFieldNumber"
+                        readOnly={thr.isReadOnly}
+                      />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                  {!thr.isReadOnly && (
+                    <EuiFlexItem grow={1}>
+                      <EuiFormRow>
+                        <EuiIcon type="trash" onClick={handleThresholdDelete(thr.thid)} />
+                      </EuiFormRow>
+                    </EuiFlexItem>
+                  )}
+                </EuiFlexGroup>
+              </EuiFormRow>
+            </Fragment>
+          );
+        })}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_tooltip.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_tooltip.tsx
new file mode 100644
index 0000000000..e799ad909e
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_tooltip.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useMemo } from 'react';
+import { EuiAccordion, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
+import { ButtonGroupItem } from './config_button_group';
+import { IConfigPanelOptionSection } from '../../../../../../../../common/types/explorer';
+
+export const ConfigTooltip = ({ schemas, vizState, handleConfigChange }: any) => {
+  const handleConfigurationChange = useCallback(
+    (stateFiledName) => {
+      return (changes: any) => {
+        handleConfigChange({
+          ...vizState,
+          [stateFiledName]: changes,
+        });
+      };
+    },
+    [handleConfigChange, vizState]
+  );
+
+  const dimensions = useMemo(() => {
+    return schemas.map((schema: IConfigPanelOptionSection, index: number) => {
+      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,
+      };
+      return (
+        <div id={htmlIdGenerator('dimension__component')()}>
+          <DimensionComponent key={`viz-series-${index}`} {...params} />
+          <EuiSpacer size="s" />
+        </div>
+      );
+    });
+  }, [schemas, vizState, handleConfigurationChange]);
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={htmlIdGenerator('configPanel__tooltip')()}
+      buttonContent="Tooltip options"
+      paddingSize="s"
+    >
+      {dimensions}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx
new file mode 100644
index 0000000000..12b48a7235
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButtonIcon, EuiLink, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
+import { isEmpty } from 'lodash';
+import React, { Fragment } from 'react';
+import { ParentUnitType, TreemapParentsProps } from '../../../../../../../../common/types/explorer';
+
+export const ConfigTreemapParentFields = ({
+  selectedAxis,
+  setSelectedParentItem,
+  handleUpdateParentFields,
+}: TreemapParentsProps) => {
+  const addButtonText = 'Add Parent';
+  const initialParentState = {
+    name: '',
+    label: '',
+    type: '',
+  };
+
+  const handleAddParent = () => {
+    const arr = [...selectedAxis, initialParentState];
+    handleUpdateParentFields(arr);
+    setSelectedParentItem({ index: arr.length - 1, isClicked: true });
+  };
+
+  const handleEditParent = (index: number) => {
+    setSelectedParentItem({ index, isClicked: true });
+  };
+
+  const handleParentDelete = (index: number) => {
+    handleUpdateParentFields([
+      ...selectedAxis.slice(0, index),
+      ...selectedAxis.slice(index + 1, selectedAxis.length),
+    ]);
+  };
+
+  return (
+    <>
+      {!isEmpty(selectedAxis) &&
+        selectedAxis.map((obj: ParentUnitType, index: number) => {
+          return (
+            <Fragment key={index}>
+              <EuiSpacer size="s" />
+              <EuiPanel paddingSize="s" className="panelItem_button">
+                <EuiText size="s" className="field_text">
+                  <EuiLink role="button" tabIndex={0} onClick={() => handleEditParent(index)}>
+                    {obj.label !== '' ? obj.label : `Parent ${index + 1}`}
+                  </EuiLink>
+                </EuiText>
+                <EuiButtonIcon
+                  color="subdued"
+                  iconType="cross"
+                  aria-label="clear-field"
+                  iconSize="s"
+                  onClick={() => handleParentDelete(index)}
+                />
+              </EuiPanel>
+            </Fragment>
+          );
+        })}
+      <EuiSpacer size="s" />
+      <EuiPanel className="panelItem_button" grow>
+        <EuiText size="s">{addButtonText}</EuiText>
+        <EuiButtonIcon
+          iconType="plusInCircle"
+          aria-label="clear-field"
+          iconSize="s"
+          color="primary"
+          onClick={handleAddParent}
+        />
+      </EuiPanel>
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx
new file mode 100644
index 0000000000..97effbcc3b
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_value_options.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo, useCallback, Fragment } from 'react';
+import { EuiAccordion, EuiSpacer } from '@elastic/eui';
+import { PanelItem } from './config_panel_item';
+
+export const ConfigValueOptions = ({
+  visualizations,
+  schemas,
+  vizState,
+  handleConfigChange,
+  sectionName,
+  sectionId = 'valueOptions',
+}: any) => {
+  const { data } = visualizations;
+  const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
+  const handleConfigurationChange = useCallback(
+    (stateFiledName) => {
+      return (changes) => {
+        handleConfigChange({
+          ...vizState,
+          [stateFiledName]: changes,
+        });
+      };
+    },
+    [handleConfigChange, vizState]
+  );
+
+  const dimensions = useMemo(() => {
+    return schemas.map((schema, index) => {
+      const DimensionComponent = schema.component || PanelItem;
+      let params = {
+        title: schema.name,
+        vizState,
+        ...schema.props,
+      };
+
+      if (schema.eleType === 'buttons') {
+        params = {
+          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,
+        };
+      } else {
+        params = {
+          paddingTitle: schema.name,
+          advancedTitle: 'advancedTitle',
+          dropdownList:
+            schema?.options?.map((option) => ({ ...option })) ||
+            fields.map((item) => ({ ...item })),
+          onSelectChange: handleConfigurationChange(schema.mapTo),
+          isSingleSelection: schema.isSingleSelection,
+          selectedAxis: vizState[schema.mapTo] || schema?.defaultState,
+          vizState,
+          ...schema.props,
+        };
+      }
+      return (
+        <Fragment key={`viz-series-${index}`}>
+          <DimensionComponent key={`viz-series-${index}`} {...params} />
+          <EuiSpacer size="s" />
+        </Fragment>
+      );
+    });
+  }, [schemas, fields, vizState, handleConfigurationChange]);
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`configPanel__${sectionId}`}
+      buttonContent={sectionName}
+      paddingSize="s"
+    >
+      {dimensions}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_visualization_selector.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_visualization_selector.tsx
new file mode 100644
index 0000000000..d56c3ec52f
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_visualization_selector.tsx
@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiAccordion } from '@elastic/eui';
+
+export const ConfigVisualizationSelector = ({ children }: any) => {
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id="configPanel__valueOptions"
+      buttonContent="Value options"
+      paddingSize="s"
+    >
+      {children}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx
new file mode 100644
index 0000000000..492c4d2e30
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx
@@ -0,0 +1,143 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { Fragment, useCallback } from 'react';
+import {
+  EuiButton,
+  EuiAccordion,
+  EuiFormRow,
+  EuiSpacer,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
+import { isEmpty } from 'lodash';
+import {
+  ADD_SERIES_POSITION_TEXT,
+  AGGREGATIONS,
+  SERIES_POSITION_OPTIONS,
+} from '../../../../../../../../common/constants/explorer';
+import { getPropName } from '../../../../../utils/utils';
+
+export const ConfigYAxisSide = ({
+  visualizations,
+  schemas,
+  vizState = [],
+  handleConfigChange,
+  sectionName = 'Series position',
+}: any) => {
+  const { data } = visualizations;
+  const { metadata: { fields = [] } = {} } = data?.rawVizData;
+  const { dataConfig = {} } = data?.userConfigs;
+
+  const options = (dataConfig[AGGREGATIONS] && dataConfig[AGGREGATIONS].length !== 0
+    ? dataConfig[AGGREGATIONS]
+    : fields
+  ).map((optionItem) => ({
+    ...optionItem,
+    label: getPropName(optionItem),
+    side: 'left',
+    className: 'color-theme-combo-box-option',
+    ctid: htmlIdGenerator('ct')(),
+  }));
+
+  const getUpdatedOptions = () =>
+    options.filter((option) => !vizState.some((vizOpt) => option.label === vizOpt?.label));
+
+  const handleColorThemeChange = useCallback(
+    (ctId, ctName) => (event) => {
+      const value = event.length ? event[0][ctName] : '';
+      handleConfigChange([
+        ...vizState.map((ct) => {
+          if (ctId !== ct.ctid) return ct;
+          return {
+            ...ct,
+            [ctName]: value,
+          };
+        }),
+      ]);
+    },
+    [vizState, handleConfigChange]
+  );
+
+  const handleDeletePosition = useCallback(
+    (ctId) => (event) => handleConfigChange([...vizState.filter((ct) => ct.ctid !== ctId)]),
+    [vizState, handleConfigChange]
+  );
+
+  const handleAddPosition = useCallback(() => {
+    const res = isEmpty(vizState)
+      ? [options.length ? options[0] : { id: htmlIdGenerator('ct')(), label: '', side: 'left' }]
+      : [
+          ...vizState,
+          ...options.filter((option) => !vizState.some((vizOpt) => option.label === vizOpt?.label)),
+        ];
+    handleConfigChange(res);
+  }, [vizState, handleConfigChange]);
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`configPanel__${sectionName}`}
+      buttonContent={sectionName}
+      paddingSize="s"
+    >
+      <EuiButton fullWidth size="s" onClick={handleAddPosition}>
+        {ADD_SERIES_POSITION_TEXT}
+      </EuiButton>
+      <EuiSpacer size="s" />
+      {!isEmpty(vizState) &&
+        vizState.map((ct) => {
+          return (
+            <Fragment key={ct.ctid}>
+              <EuiFormRow fullWidth label="">
+                <EuiFlexGroup alignItems="center" gutterSize="xs">
+                  <EuiFlexItem grow={4}>
+                    <EuiFormRow helpText="Field">
+                      <EuiComboBox
+                        id={ct.ctid}
+                        placeholder="Select a field"
+                        options={getUpdatedOptions()}
+                        singleSelection
+                        selectedOptions={ct.label !== '' ? [ct] : []}
+                        onChange={handleColorThemeChange(ct.ctid, 'label')}
+                        aria-label="series-dropdown"
+                      />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={3}>
+                    <EuiFormRow helpText="Position">
+                      <EuiComboBox
+                        id={ct.ctid}
+                        placeholder="Select position"
+                        options={SERIES_POSITION_OPTIONS}
+                        singleSelection
+                        selectedOptions={
+                          ct.side !== ''
+                            ? SERIES_POSITION_OPTIONS.filter(
+                                (positionItem) => positionItem.side === ct.side
+                              )
+                            : []
+                        }
+                        onChange={handleColorThemeChange(ct.ctid, 'side')}
+                        aria-label="series-position-dropdown"
+                      />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={1}>
+                    <EuiFormRow>
+                      <EuiIcon type="trash" onClick={handleDeletePosition(ct.ctid)} />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiFormRow>
+            </Fragment>
+          );
+        })}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_item_click_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_item_click_panel.tsx
new file mode 100644
index 0000000000..25e3a58b46
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_item_click_panel.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiIcon,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+export interface TitleProps {
+  title: string;
+  isSecondary?: boolean;
+  closeMenu?: () => void;
+}
+
+export const DataConfigItemClickPanel = ({ title, isSecondary, closeMenu }: TitleProps) => {
+  const icon = isSecondary && (
+    <EuiIcon type="arrowLeft" onClick={closeMenu} data-test-subj="panelCloseBtn" />
+  );
+  return (
+    <>
+      <EuiFlexGroup gutterSize="s" alignItems="center">
+        {icon && <EuiFlexItem grow={false}>{icon}</EuiFlexItem>}
+        <EuiFlexItem>
+          <EuiTitle size="xxs" className="panel_title">
+            <h2>{title}</h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {isSecondary ? <EuiHorizontalRule margin="s" /> : <EuiSpacer size="s" />}
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
new file mode 100644
index 0000000000..d7d13710ca
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
@@ -0,0 +1,144 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { Fragment } from 'react';
+import {
+  EuiButtonIcon,
+  EuiIcon,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  EuiToolTip,
+} from '@elastic/eui';
+import { isArray, isEmpty } from 'lodash';
+import {
+  AGGREGATIONS,
+  CUSTOM_LABEL,
+  GROUPBY,
+  SPAN,
+  DATA_CONFIG_HINTS_INFO
+} from '../../../../../../../../common/constants/explorer';
+import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
+import {
+  ConfigListEntry,
+  DataConfigPanelFieldProps,
+} from '../../../../../../../../common/types/explorer';
+import { removeBacktick } from '../../../../../../../../common/utils'
+
+const HIDE_ADD_BUTTON_VIZ_TYPES = [
+  VIS_CHART_TYPES.HeatMap,
+  VIS_CHART_TYPES.Line,
+  VIS_CHART_TYPES.Scatter,
+  VIS_CHART_TYPES.Pie
+];
+
+export const DataConfigPanelFields = ({
+  list,
+  dimensionSpan,
+  sectionName,
+  visType,
+  addButtonText,
+  handleServiceAdd,
+  handleServiceRemove,
+  handleServiceEdit,
+}: DataConfigPanelFieldProps) => {
+  const isAggregation = sectionName === AGGREGATIONS;
+
+  // The function hides the click to add button for visualizations included in the const HIDE_ADD_BUTTON_VIZ_TYPES
+  const hideClickToAddButton = (name: string) => {
+    // returns false when HIDE_ADD_BUTTON_VIZ_TYPES visualizations are not matching with visType.
+    if (!isArray(list) || !HIDE_ADD_BUTTON_VIZ_TYPES.includes(visType)) return false;
+    // condition for heatmap on the basis of section name
+    if (visType === VIS_CHART_TYPES.HeatMap)
+      return name === AGGREGATIONS ? list.length >= 1 : list.length >= 2;
+    // condition for line and scatter for dimensions section.
+    return name === GROUPBY && (list.length >= 1 || !isEmpty(time_field));
+  };
+
+  const { time_field, unit, interval } = dimensionSpan;
+
+  const tooltipIcon = <EuiIcon type="iInCircle" color="text" size="m" className="info-icon" />;
+  const crossIcon = (index: number, configName: string) => (
+    <EuiButtonIcon
+      color="subdued"
+      iconType="cross"
+      aria-label="clear-field"
+      iconSize="s"
+      onClick={() => handleServiceRemove(index, configName)}
+    />
+  );
+
+  const infoToolTip = (iconToDisplay: JSX.Element, content: string) => (
+    <EuiToolTip
+      position="right"
+      content={content}
+      delay="regular"
+      anchorClassName="eui-textTruncate"
+    >
+      {iconToDisplay}
+    </EuiToolTip>
+  );
+
+  return (
+    <div className="panel_section">
+      <div style={{ display: 'flex' }}>
+        <EuiTitle size="xxs" className="panel_title">
+          <h3>{sectionName}</h3>
+        </EuiTitle>
+        {infoToolTip(tooltipIcon, DATA_CONFIG_HINTS_INFO[`${sectionName}`])}
+      </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 - 1, 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}>
+            <EuiPanel paddingSize="s" className="panelItem_button">
+              <EuiText size="s" className="field_text">
+                <EuiLink
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => handleServiceEdit(index, sectionName, false)}
+                >
+                  {removeBacktick(obj[CUSTOM_LABEL] || `${isAggregation ? obj.aggregation : ''} ${obj.label}`)}
+                </EuiLink>
+              </EuiText>
+              {isAggregation
+                ? infoToolTip(crossIcon(index, sectionName), DATA_CONFIG_HINTS_INFO[AGGREGATIONS])
+                : crossIcon(index, sectionName)}
+            </EuiPanel>
+            <EuiSpacer size="s" />
+          </Fragment>
+        ))}
+      {!hideClickToAddButton(sectionName) && (
+        <EuiPanel className="panelItem_button" grow>
+          <EuiText size="s">{addButtonText}</EuiText>
+          <EuiButtonIcon
+            iconType="plusInCircle"
+            aria-label="add-field"
+            iconSize="s"
+            color="primary"
+            onClick={() => handleServiceAdd(sectionName)}
+          />
+        </EuiPanel>
+      )}
+      <EuiSpacer size="m" />
+    </div>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss
new file mode 100644
index 0000000000..a6ac6798cb
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss
@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.explorer__vizDataConfig {
+  @include euiYScrollWithShadows;
+
+  background: $euiColorLightestShade;
+  border-left: $euiBorderThin;
+  border-right: $euiBorderThin;
+  position: relative;
+
+  &__section {
+    width: 100%;
+    transition: transform $euiAnimSpeedNormal 0s $euiAnimSlightResistance;
+  }
+
+  &__title {
+    padding: $euiSizeS;
+    padding-bottom: 0;
+
+    &.showDivider {
+      border-bottom: 1px solid $euiColorLightShade;
+    }
+  }
+
+  &__content {
+    padding: $euiSizeS;
+  }
+
+  &__aggEditor {
+    padding: 0 $euiSizeM;
+  }
+
+  &--secondary {
+    position: absolute;
+    top: 0;
+    left: 100%;
+  }
+
+  &.showSecondary > .wizConfig__section {
+    transform: translateX(-100%);
+  }
+}
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
new file mode 100644
index 0000000000..1d745b8562
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
@@ -0,0 +1,591 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './data_configurations_panel.scss';
+
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import {
+  EuiButton,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFieldNumber,
+  EuiFieldText,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiPanel,
+  EuiSpacer,
+  EuiTitle,
+  htmlIdGenerator,
+} from '@elastic/eui';
+import { filter, isEmpty, isEqual } from 'lodash';
+import {
+  AGGREGATIONS,
+  AGGREGATION_OPTIONS,
+  BREAKDOWNS,
+  CUSTOM_LABEL,
+  FINAL_QUERY,
+  GROUPBY,
+  RAW_QUERY,
+  SPAN,
+  TIMESTAMP,
+  TIME_FIELD,
+  TIME_INTERVAL_OPTIONS,
+  SELECTED_DATE_RANGE,
+} from '../../../../../../../../common/constants/explorer';
+import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
+import { composeAggregations } from '../../../../../../../../common/query_manager/utils';
+import {
+  ConfigList,
+  ConfigListEntry,
+  DataConfigPanelFieldProps,
+  DataConfigPanelProps,
+  IField,
+  SelectedConfigItem,
+  Query,
+  VisualizationState,
+} from '../../../../../../../../common/types/explorer';
+import { TabContext, useRenderVisualization } from '../../../../../hooks';
+import { DataConfigItemClickPanel } from '../config_controls/data_config_item_click_panel';
+import { DataConfigPanelFields } from '../config_controls/data_config_panel_fields';
+import { ButtonGroupItem } from './config_button_group';
+import { composeFinalQuery } from '../../../../../../../../common/utils';
+
+const initialDimensionEntry = {
+  label: '',
+  name: '',
+};
+
+const initialSeriesEntry = {
+  [CUSTOM_LABEL]: '',
+  label: '',
+  name: '',
+  aggregation: 'count',
+};
+
+const initialSpanEntry = { time_field: [], interval: 0, unit: [] };
+
+export const DataConfigPanelItem = ({
+  fieldOptionList,
+  visualizations,
+  queryManager,
+}: DataConfigPanelProps) => {
+  const { tabId, handleQueryChange, pplService } = useContext<any>(TabContext);
+  const requestParams = { tabId };
+  const { getVisualizations, fillVisDataInStore } = useRenderVisualization({
+    pplService,
+    requestParams,
+  });
+  const { data } = visualizations;
+  const {
+    indexFields: { availableFields },
+    query = {},
+  } = data;
+  const [configList, setConfigList] = useState<ConfigList>({});
+  const [isAddConfigClicked, setIsAddConfigClicked] = useState<boolean>(false);
+  const [selectedConfigItem, setSelectedConfigItem] = useState<SelectedConfigItem>({
+    index: -1,
+    name: '',
+  });
+  const [isTimeStampSelected, setIsTimeStampSelected] = useState<boolean>(false);
+  const { userConfigs } = data;
+
+  useEffect(() => {
+    if (userConfigs.dataConfig) {
+      setConfigList({
+        ...userConfigs.dataConfig,
+      });
+      setIsAddConfigClicked(false);
+    }
+  }, [userConfigs?.dataConfig, visualizations.vis.name]);
+
+  const updateList = (value: string, field: string) => {
+    const { index, name } = selectedConfigItem;
+    let listItem = { ...configList[name][index] };
+    listItem = {
+      ...listItem,
+      [field]: field === 'custom_label' ? value.trim() : value,
+    };
+    if (field === 'label') {
+      listItem.name = value;
+    }
+    const updatedList = {
+      ...configList,
+      [name]: [
+        ...configList[name].slice(0, index),
+        listItem,
+        ...configList[name].slice(index + 1, configList[name].length),
+      ],
+      ...(configList[SPAN] !== undefined && {
+        [SPAN]: isTimeStampSelected ? initialSpanEntry : { ...configList[SPAN] },
+      }),
+    };
+    setIsTimeStampSelected(false);
+    setConfigList(updatedList);
+  };
+
+  const updateHistogramConfig = (configName: string, fieldName: string, value: string) => {
+    const list = { ...configList };
+    const listItem = { ...list[configName][0] };
+    listItem[fieldName] = value;
+    const updatedList = {
+      ...list,
+      [configName]: [listItem],
+    };
+    setConfigList(updatedList);
+  };
+
+  /**
+   * Removes element from config list
+   * @param index position of element to be removed
+   * @param name section name for which cross icon is clicked
+   */
+  const handleServiceRemove = (index: number, name: string) => {
+    let list = { ...configList };
+    const isTimeStamp = name === SPAN;
+    if (isTimeStamp) {
+      delete list[SPAN];
+    } else {
+      const arr = [...list[name]];
+      arr.splice(index, 1);
+      list = { ...list, [name]: arr };
+    }
+    setConfigList(list);
+  };
+
+  const handleServiceAdd = (name: string) => {
+    setIsAddConfigClicked(true);
+    const list = {
+      ...configList,
+      [name]:
+        name !== `${BREAKDOWNS}`
+          ? [
+              ...(configList[name] ?? []),
+              name === AGGREGATIONS ? initialSeriesEntry : initialDimensionEntry,
+            ]
+          : configList[name] !== undefined
+          ? [...configList[name], initialDimensionEntry]
+          : [initialDimensionEntry],
+    };
+    setSelectedConfigItem({ index: list[name].length - 1, name });
+    setConfigList(list);
+  };
+
+  /**
+   * Starts editing for the selected field
+   * @param arrIndex position of element to be edited
+   * @param sectionName section that will be edited
+   * @param timestamp if selected field is span
+   */
+  const handleServiceEdit = (arrIndex: number, sectionName: string, isTimeStamp: boolean) => {
+    setIsTimeStampSelected(isTimeStamp);
+    setSelectedConfigItem({ index: arrIndex, name: sectionName });
+    setIsAddConfigClicked(true);
+  };
+
+  const handleClosePanel = () => {
+    const { index, name } = selectedConfigItem;
+    if (index > -1) {
+      const selectedObj = configList[name][index] ?? [];
+      const list = { ...configList };
+      if (
+        selectedObj?.aggregation !== 'count' &&
+        (selectedObj?.aggregation === '' || selectedObj?.name === '')
+      ) {
+        list[name].splice(index, 1);
+      }
+      if (isTimeStampSelected) {
+        if (selectedObj?.name !== '') {
+          const updConfig = [...configList[name]];
+          updConfig.splice(index, 1);
+          list[GROUPBY] = [...updConfig];
+        }
+        if (configList.span?.interval === 0 || configList.span?.unit?.length === 0) {
+          delete list[SPAN];
+        }
+      }
+      setConfigList(list);
+    }
+    setIsTimeStampSelected(false);
+    setIsAddConfigClicked(false);
+  };
+
+  /**
+   * Parses current query string to get its stats information.
+   * @param query PPL query string.
+   * @returns stats information of a parsed query.
+   */
+  const getStatsTokens = (query: string) => queryManager!.queryParser().parse(query).getStats();
+
+  /**
+   * Builds new query based on existing query stats and new configurations.
+   * @param prevQuery query string from prevous query state.
+   * @param visConfig visualization UI configurations.
+   * @param statsTokens parsed stats tokens.
+   * @returns
+   */
+  const getNewQueryString = (prevQuery: string, visConfig: ConfigList, statsTokens) =>
+    queryManager!.queryBuilder().build(prevQuery, composeAggregations(visConfig, statsTokens));
+
+  /**
+   * Derives new query state from previous state and new configurations.
+   * @param prevQuery current query state.
+   * @param newQueryString new query.
+   * @param visConfig visualization configurations.
+   * @returns next query state.
+   */
+  const getNextQueryState = (
+    prevQuery: Query,
+    newQueryString: string,
+    visConfig: ConfigList
+  ): Query => {
+    return {
+      ...prevQuery,
+      [RAW_QUERY]: newQueryString,
+      [FINAL_QUERY]: composeFinalQuery(
+        newQueryString,
+        prevQuery[SELECTED_DATE_RANGE][0] || 'now',
+        prevQuery[SELECTED_DATE_RANGE][1] || 'now',
+        !isEmpty(visConfig.span?.time_field)
+          ? visConfig.span?.time_field[0].name
+          : prevQuery['selectedTimestamp'],
+        false,
+        ''
+      ),
+    };
+  };
+
+  /**
+   * calculate next visualization state on update chart event.
+   * @param param0 query and visualization config.
+   * @returns next visualization state.
+   */
+  const prepareNextVisState = ({
+    query,
+    visConfig,
+  }: {
+    query: Query;
+    visConfig: ConfigList;
+  }): Array<string | Query> => {
+    const newQuery: string = getNewQueryString(
+      query[RAW_QUERY],
+      visConfig,
+      getStatsTokens(query[RAW_QUERY])
+    );
+    return [newQuery, getNextQueryState(query, newQuery, visConfig)];
+  };
+
+  const updateChart = useCallback(() => {
+    const [newQueryString, nextQueryState] = prepareNextVisState({
+      query,
+      visConfig: {
+        ...configList,
+      },
+    });
+    handleQueryChange(newQueryString);
+    getVisualizations({
+      query: nextQueryState[FINAL_QUERY],
+      callback: (res) => {
+        updateVisUIState({
+          visData: res,
+          query: nextQueryState,
+          visConfMetadata: {
+            ...configList,
+          },
+          visMeta: {
+            visId: visualizations.vis?.name || '',
+          },
+        });
+      },
+    });
+  }, [configList, query, visualizations]);
+
+  const updateVisUIState = ({ visData, query, visConfMetadata, visMeta }: VisualizationState) => {
+    fillVisDataInStore({ visData: visData, query, visConfMetadata, visMeta });
+  };
+
+  const isPositionButtonVisible = (sectionName: string) =>
+    sectionName === AGGREGATIONS &&
+    (visualizations.vis.name === VIS_CHART_TYPES.Line ||
+      visualizations.vis.name === VIS_CHART_TYPES.Scatter);
+
+  const getTimeStampFilteredFields = (options: IField[]) =>
+    filter(options, (i: IField) => i.type !== TIMESTAMP);
+
+  const getOptionsAvailable = (sectionName: string) => {
+    if (
+      (visualizations.vis.name === VIS_CHART_TYPES.Line ||
+        visualizations.vis.name === VIS_CHART_TYPES.Scatter) &&
+      isEqual(sectionName, GROUPBY)
+    )
+      return filter(fieldOptionList, (i) => i.type === TIMESTAMP);
+    
+    if (
+      sectionName === AGGREGATIONS ||
+      sectionName === BREAKDOWNS ||
+      (selectedConfigItem.name === GROUPBY && selectedConfigItem.index === 0) ||
+      isTimeStampSelected
+    )
+      return fieldOptionList;
+    return getTimeStampFilteredFields(fieldOptionList);
+  };
+
+  const getCommonUI = (title: string) => {
+    const { index, name } = selectedConfigItem;
+    const selectedObj = isTimeStampSelected ? configList[SPAN] : configList[name][index];
+    const isAggregations = name === AGGREGATIONS;
+    return (
+      <>
+        <div className="services">
+          <div className="first-division">
+            <DataConfigItemClickPanel
+              isSecondary
+              title={title}
+              closeMenu={() => handleClosePanel()}
+            />
+            <EuiPanel color="subdued" style={{ padding: '0px' }}>
+              {/* Aggregation input for Series */}
+              {isAggregations && (
+                <EuiFormRow label="Aggregation">
+                  <EuiComboBox
+                    aria-label="aggregation input"
+                    placeholder="Select a aggregation"
+                    singleSelection={{ asPlainText: true }}
+                    options={AGGREGATION_OPTIONS}
+                    selectedOptions={
+                      selectedObj.aggregation
+                        ? [
+                            {
+                              label: selectedObj.aggregation,
+                            },
+                          ]
+                        : []
+                    }
+                    onChange={(e) => updateList(e.length > 0 ? e[0].label : '', 'aggregation')}
+                  />
+                </EuiFormRow>
+              )}
+              {/* Show input fields for Series when aggregation is not empty  */}
+              {isAggregations && selectedObj.aggregation !== '' && (
+                <>
+                  {getCommonDimensionsField(selectedObj, name)}
+                  <EuiFormRow label="Custom label">
+                    <EuiFieldText
+                      placeholder="Custom label"
+                      value={selectedObj[CUSTOM_LABEL]}
+                      onChange={(e) => updateList(e.target.value, CUSTOM_LABEL)}
+                      aria-label="input label"
+                    />
+                  </EuiFormRow>
+                </>
+              )}
+              {/* Show input fields for dimensions */}
+              {!isAggregations && getCommonDimensionsField(selectedObj, name)}
+              {isPositionButtonVisible(name) && (
+                <EuiFormRow label="Side">
+                  <ButtonGroupItem
+                    legend="Side"
+                    groupOptions={[
+                      { id: 'left', label: 'Left' },
+                      { id: 'right', label: 'Right' },
+                    ]}
+                    idSelected={selectedObj.side || 'right'}
+                    handleButtonChange={(id: string) => updateList(id, 'side')}
+                  />
+                </EuiFormRow>
+              )}
+            </EuiPanel>
+            <EuiSpacer size="s" />
+          </div>
+        </div>
+      </>
+    );
+  };
+
+  const isTimeStampFieldsSelected = (value: string) =>
+    filter(fieldOptionList, (obj) => obj.name === value && obj.type === TIMESTAMP).length > 0;
+
+  const handleTimeStampFieldsChange = (
+    value: Array<EuiComboBoxOptionOption<unknown>>,
+    field: string
+  ) => {
+    const { index, name } = selectedConfigItem;
+    const updatedList = {
+      ...configList,
+      [SPAN]:
+        configList[SPAN] === undefined
+          ? {
+              ...initialSpanEntry,
+              [field]: value,
+            }
+          : { ...configList[SPAN], [field]: value },
+    };
+    if (field === TIME_FIELD && index > -1) {
+      handleServiceRemove(index, name);
+    }
+    setIsTimeStampSelected(true);
+    setConfigList(updatedList as ConfigList);
+  };
+
+  const getCommonDimensionsField = (selectedObj: ConfigListEntry, name: string) => {
+    return (
+      <>
+        <EuiFormRow label="Field">
+          <EuiComboBox
+            aria-label="input field"
+            placeholder="Select a field"
+            singleSelection={{ asPlainText: true }}
+            options={getOptionsAvailable(name)}
+            selectedOptions={
+              isTimeStampSelected
+                ? [...configList.span?.time_field]
+                : selectedObj?.label
+                ? [
+                    {
+                      label: selectedObj?.label,
+                    },
+                  ]
+                : []
+            }
+            onChange={(e) =>
+              isTimeStampFieldsSelected(e.length > 0 ? e[0].label : '')
+                ? handleTimeStampFieldsChange(e, TIME_FIELD)
+                : updateList(e.length > 0 ? e[0].label : '', 'label')
+            }
+          />
+        </EuiFormRow>
+        {isTimeStampSelected && DateHistogram}
+      </>
+    );
+  };
+
+  const getNumberField = (type: string) => (
+    <>
+      <EuiFieldNumber
+        id={htmlIdGenerator('input-number')()}
+        fullWidth
+        placeholder="auto"
+        value={
+          configList[GROUPBY] && configList[GROUPBY].length > 0 && configList[GROUPBY][0][type]
+            ? configList[GROUPBY][0][type]
+            : ''
+        }
+        onChange={(e) => updateHistogramConfig(GROUPBY, type, e.target.value)}
+        data-test-subj="valueFieldNumber"
+      />
+      <EuiSpacer size="s" />
+    </>
+  );
+
+  const DateHistogram = useMemo(() => {
+    return (
+      <>
+        <div className="services">
+          <div className="first-division">
+            <EuiPanel color="subdued" style={{ padding: '0px' }}>
+              <EuiSpacer size="s" />
+              <EuiFormRow label="Interval">
+                <EuiFieldNumber
+                  placeholder="Placeholder text"
+                  value={configList.span?.interval ?? 1}
+                  min={1}
+                  onChange={(e) => {
+                    e.persist();
+                    setConfigList((staleState) => {
+                      return {
+                        ...staleState,
+                        span: {
+                          ...staleState.span,
+                          interval: e.target?.value ?? 0,
+                        },
+                      };
+                    });
+                  }}
+                  aria-label="interval field"
+                />
+              </EuiFormRow>
+              <EuiFormRow label="Unit">
+                <EuiComboBox
+                  aria-label="date unit"
+                  placeholder="Select fields"
+                  singleSelection
+                  options={TIME_INTERVAL_OPTIONS.map((option) => {
+                    return {
+                      ...option,
+                      label: option.text,
+                    };
+                  })}
+                  selectedOptions={configList.span?.unit ? [...configList.span?.unit] : []}
+                  onChange={(e) => handleTimeStampFieldsChange(e, 'unit')}
+                />
+              </EuiFormRow>
+            </EuiPanel>
+          </div>
+        </div>
+      </>
+    );
+  }, [availableFields, configList.span]);
+
+  const getRenderFieldsObj = (sectionName: string): DataConfigPanelFieldProps => {
+    return {
+      list: configList[sectionName] ?? [],
+      dimensionSpan: configList[SPAN] ?? initialSpanEntry,
+      sectionName,
+      visType: visualizations.vis.name,
+      addButtonText: 'Click to add',
+      handleServiceAdd,
+      handleServiceRemove,
+      handleServiceEdit,
+    };
+  };
+
+  return isAddConfigClicked ? (
+    getCommonUI(selectedConfigItem.name)
+  ) : (
+    <>
+      <EuiTitle size="xxs">
+        <h3>Configuration</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      {visualizations.vis.name !== VIS_CHART_TYPES.Histogram ? (
+        <>
+          {DataConfigPanelFields(getRenderFieldsObj(AGGREGATIONS))}
+          <EuiSpacer size="s" />
+          {DataConfigPanelFields(getRenderFieldsObj(GROUPBY))}
+          <EuiSpacer size="s" />
+          {(visualizations.vis.name === VIS_CHART_TYPES.Bar ||
+            visualizations.vis.name === VIS_CHART_TYPES.HorizontalBar ||
+            visualizations.vis.name === VIS_CHART_TYPES.Line) && (
+            <>{DataConfigPanelFields(getRenderFieldsObj(BREAKDOWNS))}</>
+          )}
+        </>
+      ) : (
+        <>
+          <EuiTitle size="xxs">
+            <h3>Bucket Size</h3>
+          </EuiTitle>
+          {getNumberField('bucketSize')}
+
+          <EuiSpacer size="s" />
+          <EuiTitle size="xxs">
+            <h3>Bucket Offset</h3>
+          </EuiTitle>
+          {getNumberField('bucketOffset')}
+        </>
+      )}
+      <EuiSpacer size="m" />
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          data-test-subj="visualizeEditorRenderButton"
+          iconType="play"
+          onClick={() => updateChart()}
+          size="s"
+          isDisabled={isEmpty(configList[AGGREGATIONS])}
+        >
+          Update chart
+        </EuiButton>
+      </EuiFlexItem>
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts
new file mode 100644
index 0000000000..10c56703e2
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/index.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { ConfigPanelOptions } from './config_panel_options';
+export { ConfigValueOptions } from './config_value_options';
+export { ConfigChartOptions } from './config_chart_options';
+export { ConfigDataLinks } from './config_data_links';
+export { ConfigThresholds } from './config_thresholds';
+export { ConfigText } from './config_text';
+export { ConfigGaugeValueOptions } from './config_gauge_options';
+export { ColorPalettePicker } from './config_color_palette_picker';
+export { ConfigLineChartStyles } from './config_line_chart_styles';
+export { ConfigLegend } from './config_legend';
+export { ConfigTooltip } from './config_tooltip';
+export { HeatmapColorPalettePicker } from './config_heatmap_color_palette_picker';
+export { SingleColorPicker } from './config_single_color_picker';
+export { PanelItem } from './config_panel_item';
+export { ConfigTreemapParentFields } from './config_treemap_parents';
+export { InputFieldItem } from './config_number_input';
+export { SliderConfig } from './config_style_slider';
+export { ConfigColorTheme } from './config_color_theme';
+export { SwitchButton } from './config_switch_button';
+export { ButtonGroupItem } from './config_button_group';
+export { TextInputFieldItem } from './config_text_input';
+export { ConfigBarChartStyles } from './config_bar_chart_styles';
+export { ConfigAvailability } from './config_availability';
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx
new file mode 100644
index 0000000000..2794f45c83
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx
@@ -0,0 +1,248 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useEffect, useState, useContext, Fragment } from 'react';
+import {
+  EuiTitle,
+  EuiComboBox,
+  EuiSpacer,
+  EuiButton,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiIcon,
+  EuiText,
+} from '@elastic/eui';
+import { cloneDeep } from 'lodash';
+import { batch, useDispatch, useSelector } from 'react-redux';
+import {
+  AGGREGATIONS,
+  AVAILABLE_FIELDS,
+  GROUPBY,
+  SELECTED_FIELDS,
+  DISABLED_COLOUR
+} from '../../../../../../../../common/constants/explorer';
+import {
+  ConfigList,
+  ConfigListEntry,
+  DataConfigPanelProps,
+} from '../../../../../../../../common/types/explorer';
+import { TabContext } from '../../../../../hooks';
+import {
+  selectFields,
+  sortFields,
+  updateFields,
+} from '../../../../../../event_analytics/redux/slices/field_slice';
+
+export const LogsViewConfigPanelItem = ({
+  fieldOptionList,
+  visualizations,
+}: DataConfigPanelProps) => {
+  const dispatch = useDispatch();
+  const { tabId, curVisId, changeVisualizationConfig } = useContext<any>(TabContext);
+  const explorerFields = useSelector(selectFields)[tabId];
+  const { data } = visualizations;
+  const { availableFields, queriedFields, selectedFields } = data.explorer?.explorerFields;
+  const { userConfigs } = data;
+
+  const initialConfigEntry = {
+    label: '',
+    aggregation: '',
+    custom_label: '',
+    name: '',
+    side: 'right',
+    type: '',
+  };
+
+  const [configList, setConfigList] = useState<ConfigList>({});
+
+  useEffect(() => {
+    if (userConfigs && userConfigs.dataConfig) {
+      setConfigList({
+        ...userConfigs.dataConfig,
+      });
+    }
+  }, [userConfigs?.dataConfig, visualizations.vis.name]);
+
+  useEffect(() => {
+    if (queriedFields.length === 0) {
+      setConfigList({
+        [AGGREGATIONS]: [],
+        [GROUPBY]: visualizations?.data?.explorer?.explorerFields?.selectedFields.map((field) => ({
+          ...field,
+          label: field.name,
+        })),
+      });
+    }
+  }, [visualizations.data.explorer.explorerFields]);
+
+  const handleServiceRemove = (index: number, name: string) => {
+    if (queriedFields.length !== 0) {
+      return;
+    }
+    const list = { ...configList };
+    const arr = [...list[name]];
+    arr.splice(index, 1);
+    const updatedList = { ...list, [name]: arr };
+    setConfigList(updatedList);
+  };
+
+  const handleServiceAdd = (name: string) => {
+    const updatedList = { ...configList, [name]: [...configList[name], initialConfigEntry] };
+    setConfigList(updatedList);
+  };
+
+  const updateChart = () => {
+    if ((configList[GROUPBY] as ConfigListEntry[]).some((field) => field.label === '')) {
+      return;
+    }
+    const nextFields = cloneDeep(explorerFields);
+    const selectedFields = (configList[GROUPBY] as ConfigListEntry[]).map((field) => ({
+      name: field.name,
+      type: field.type,
+    }));
+    const selectedFieldNames = selectedFields.map((field) => field.name);
+    const availableFields = nextFields.unselectedFields.filter(
+      (field) => !selectedFieldNames.includes(field.name)
+    );
+    nextFields[SELECTED_FIELDS] = selectedFields;
+    nextFields[AVAILABLE_FIELDS] = availableFields;
+    batch(() => {
+      dispatch(
+        updateFields({
+          tabId,
+          data: {
+            ...nextFields,
+          },
+        })
+      );
+      dispatch(
+        sortFields({
+          tabId,
+          data: [SELECTED_FIELDS],
+        })
+      );
+    });
+    dispatch(
+      changeVisualizationConfig({
+        tabId,
+        vizId: curVisId,
+        data: {
+          ...userConfigs,
+          dataConfig: {
+            ...userConfigs.dataConfig,
+            valueOptions: {
+              [GROUPBY]: configList[GROUPBY],
+              [AGGREGATIONS]: configList[AGGREGATIONS],
+            },
+          },
+        },
+      })
+    );
+  };
+
+  const getAvailableLogsViewOptions = () => {
+    if (queriedFields.length !== 0) {
+      return [];
+    }
+    const dimensionNames = (configList[GROUPBY] as ConfigListEntry[]).map((field) => field.name);
+    const availableFields = visualizations?.data?.explorer?.explorerFields?.availableFields.filter(
+      (field) => !dimensionNames.includes(field.name)
+    );
+    return availableFields.map((field) => ({
+      ...field,
+      label: field.name,
+    }));
+  };
+
+  const updateLogsViewConfig = (value: string, field: ConfigListEntry) => {
+    const list = { ...configList };
+    const index = (list[GROUPBY] as ConfigListEntry[]).findIndex(
+      (dim) => dim.label === field.label
+    );
+    const selectedField = visualizations?.data?.explorer?.explorerFields?.availableFields.find(
+      (fld) => fld.name === value
+    );
+    const newField = { ...selectedField, label: value };
+    list[GROUPBY][index] = newField;
+    setConfigList(list);
+  };
+
+  const getLogsViewUI = () => {
+    const list = configList[GROUPBY] ? configList[GROUPBY] : [];
+    const listUI = list.map((field, index) => (
+      <EuiFormRow
+        label="Field"
+        labelAppend={
+          <EuiText size="xs">
+            <EuiIcon
+              type="cross"
+              color={queriedFields.length === 0 ? "danger" : DISABLED_COLOUR}
+              onClick={() => handleServiceRemove(index, GROUPBY)}
+            />
+          </EuiText>
+        }
+      >
+        <EuiComboBox
+          aria-label="logsViewField"
+          placeholder="Select a field"
+          singleSelection={{ asPlainText: true }}
+          options={getAvailableLogsViewOptions()}
+          selectedOptions={[{ label: field.label }]}
+          isDisabled={queriedFields.length !== 0}
+          onChange={(e) =>
+            updateLogsViewConfig(e.length > 0 ? e[0].label : '', field as ConfigListEntry)
+          }
+        />
+      </EuiFormRow>
+    ));
+    return (
+      <Fragment key="logsViewUI">
+        {listUI}
+        <EuiSpacer size="s" />
+        {
+          <EuiFlexItem grow>
+            <EuiButton
+              fullWidth
+              iconType="plusInCircleFilled"
+              color="primary"
+              onClick={() => handleServiceAdd(GROUPBY)}
+              disabled={queriedFields.length !== 0}
+            >
+              Add
+            </EuiButton>
+          </EuiFlexItem>
+        }
+      </Fragment>
+    );
+  };
+
+  return (
+    <>
+      <EuiTitle size="xxs">
+        <h3>Data Configurations</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <>
+        <EuiTitle size="xxs">
+          <h3>Columns</h3>
+        </EuiTitle>
+        {getLogsViewUI()}
+
+        <EuiSpacer size="s" />
+      </>
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          data-test-subj="visualizeEditorRenderButton"
+          iconType="play"
+          onClick={updateChart}
+          size="s"
+          isDisabled={queriedFields.length !== 0}
+        >
+          Update chart
+        </EuiButton>
+      </EuiFlexItem>
+    </>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx
new file mode 100644
index 0000000000..2870fe90f2
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx
@@ -0,0 +1,277 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiPanel,
+  EuiSpacer,
+  EuiTitle,
+  htmlIdGenerator,
+} from '@elastic/eui';
+import { uniqueId } from 'lodash';
+import React, { useContext, useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
+import {
+  CHILDFIELD,
+  AGGREGATIONS,
+  GROUPBY,
+  NUMERICAL_TYPES,
+  PARENTFIELDS,
+  VALUEFIELD,
+} from '../../../../../../../../common/constants/explorer';
+import { TabContext } from '../../../../../hooks';
+import { ConfigTreemapParentFields } from './config_treemap_parents';
+import { DataConfigItemClickPanel } from './data_config_item_click_panel';
+import {
+  DataConfigPanelProps,
+  ParentUnitType,
+} from '../../../../../../../../common/types/explorer';
+import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
+
+export const TreemapConfigPanelItem = ({
+  fieldOptionList,
+  visualizations,
+}: DataConfigPanelProps) => {
+  const dispatch = useDispatch();
+  const { tabId, curVisId, changeVisualizationConfig } = useContext<{
+    [key: string]: string | VIS_CHART_TYPES | ActionCreatorWithPayload<string, string>;
+  }>(TabContext);
+
+  const { data } = visualizations;
+  const { userConfigs } = data;
+  const { data: vizData = {}, metadata: { fields = [] } = {} } = data?.rawVizData;
+
+  const newEntry = { label: '', name: '' };
+  const initialParentState = {
+    name: '',
+    label: '',
+    type: '',
+  };
+  const [configList, setConfigList] = useState({
+    [GROUPBY]: [{ childField: { ...newEntry }, parentFields: [] }],
+    [AGGREGATIONS]: [{ valueField: { ...newEntry } }],
+  });
+  const [selectedParentItem, setSelectedParentItem] = useState<{
+    isClicked: boolean;
+    index: number;
+  }>({ isClicked: false, index: -1 });
+
+  useEffect(() => {
+    if (userConfigs && userConfigs.dataConfig) {
+      setConfigList({
+        ...userConfigs.dataConfig,
+      });
+    }
+  }, [userConfigs?.dataConfig, visualizations.vis.name]);
+
+  const updateList = (configName: string, fieldName: string, value: string | any[]) => {
+    let listItem = { ...configList[configName][0] };
+
+    const newField = {
+      label: value,
+      name: value,
+      type: value !== '' ? fields.find((x) => x.name === value)?.type : '',
+    };
+    listItem = { ...listItem, [fieldName]: typeof value === 'string' ? newField : value };
+    const newList = {
+      ...configList,
+      [configName]: [listItem],
+    };
+    setConfigList(newList);
+  };
+
+  const updateChart = () => {
+    dispatch(
+      changeVisualizationConfig({
+        tabId,
+        vizId: curVisId,
+        data: {
+          ...userConfigs,
+          dataConfig: {
+            ...userConfigs.dataConfig,
+            [GROUPBY]: configList[GROUPBY],
+            [AGGREGATIONS]: configList[AGGREGATIONS],
+          },
+        },
+      })
+    );
+  };
+
+  const getOptionsAvailable = (sectionName: string) => {
+    const { dimensions, series } = configList;
+    const selectedFields = {};
+    let allSelectedFields = [];
+
+    for (const key in configList) {
+      if (key === GROUPBY) {
+        const [dimElements] = dimensions;
+        const { childField, parentFields } = dimElements;
+        allSelectedFields = [childField, ...parentFields];
+      } else if (key === AGGREGATIONS) {
+        const [seriesElement] = series;
+        allSelectedFields = [seriesElement.valueField];
+      }
+      const allValidSelectedFields = allSelectedFields.filter((item) => item?.label);
+      allValidSelectedFields.length > 0 &&
+        allValidSelectedFields.forEach((field) => (selectedFields[field.label] = true));
+    }
+
+    const unselectedFields = fieldOptionList.filter((field) => !selectedFields[field.label]);
+    return sectionName === AGGREGATIONS
+      ? unselectedFields.filter((field) => NUMERICAL_TYPES?.includes(field.type))
+      : unselectedFields;
+  };
+
+  const options = getOptionsAvailable(GROUPBY).map((opt) => ({
+    label: opt.label,
+    name: opt.name,
+  }));
+
+  const renderParentPanel = () => {
+    const selectedAxis = configList.dimensions[0]?.parentFields;
+    const { index } = selectedParentItem;
+    return (
+      <>
+        <DataConfigItemClickPanel
+          isSecondary
+          title={`Parent ${index + 1}`}
+          closeMenu={() => isHandlePanelClickBack(selectedAxis)}
+        />
+        <EuiComboBox
+          id={htmlIdGenerator('axis-select-')}
+          placeholder="Select a field"
+          options={options}
+          selectedOptions={selectedAxis[index].label !== '' ? [selectedAxis[index]] : []}
+          isClearable
+          singleSelection={{ asPlainText: true }}
+          onChange={handleParentChange}
+          aria-label="Parent field"
+        />
+      </>
+    );
+  };
+
+  /**
+   * Update DataConfiguration of parent fields list.
+   * @param arr list to be updated
+   */
+  const handleUpdateParentFields = (arr: ParentUnitType[]) =>
+    updateList(GROUPBY, PARENTFIELDS, arr);
+
+  /**
+   * function changes the value in parent input field.
+   * @param value updated value
+   */
+  const handleParentChange = (values: Array<EuiComboBoxOptionOption<unknown>>) => {
+    const selectedAxis = configList.dimensions[0]?.parentFields;
+    const { index } = selectedParentItem;
+    const val = [
+      ...selectedAxis.slice(0, index),
+      (values[0] as ParentUnitType) ?? initialParentState,
+      ...selectedAxis.slice(index + 1, selectedAxis.length),
+    ];
+    handleUpdateParentFields(val);
+  };
+
+  /**
+   * Changes the array when back button in Data Config panel is clicked.
+   * @param parentArray updated array of parent fields.
+   */
+  const isHandlePanelClickBack = (parentArray: ParentUnitType[]) => {
+    const { index } = selectedParentItem;
+    if (parentArray[index].name === '') {
+      const arr = [
+        ...parentArray.slice(0, index),
+        ...parentArray.slice(index + 1, parentArray.length),
+      ];
+      handleUpdateParentFields(arr);
+    }
+    setSelectedParentItem({ isClicked: false, index: -1 });
+  };
+
+  return selectedParentItem.isClicked ? (
+    renderParentPanel()
+  ) : (
+    <div style={{ height: 'auto' }}>
+      <EuiTitle size="xxs">
+        <h3>Data Configurations</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiTitle size="xxs">
+        <h3>Dimensions</h3>
+      </EuiTitle>
+      <div className="first-division">
+        <EuiPanel color="subdued">
+          <EuiFormRow label="Child Field">
+            <EuiComboBox
+              placeholder="Select a field"
+              options={getOptionsAvailable(GROUPBY)}
+              selectedOptions={
+                configList.dimensions[0].childField?.label !== ''
+                  ? [{ label: configList.dimensions[0].childField?.label }]
+                  : []
+              }
+              singleSelection={{ asPlainText: true }}
+              onChange={(val) =>
+                updateList(GROUPBY, CHILDFIELD, val.length > 0 ? val[0].label : '')
+              }
+            />
+          </EuiFormRow>
+
+          <EuiSpacer size="s" />
+          <EuiTitle size="xxxs">
+            <h3>Parent Fields</h3>
+          </EuiTitle>
+          <ConfigTreemapParentFields
+            selectedAxis={configList.dimensions[0]?.parentFields}
+            handleUpdateParentFields={handleUpdateParentFields}
+            setSelectedParentItem={setSelectedParentItem}
+          />
+          <EuiSpacer size="s" />
+        </EuiPanel>
+      </div>
+      <EuiSpacer size="s" />
+      <EuiTitle size="xxs">
+        <h3>Metrics</h3>
+      </EuiTitle>
+      <div className="first-division">
+        <EuiPanel color="subdued">
+          <EuiFormRow label="Value Field">
+            <EuiComboBox
+              placeholder="Select a field"
+              options={getOptionsAvailable(AGGREGATIONS)}
+              selectedOptions={
+                configList[AGGREGATIONS][0].valueField?.label !== ''
+                  ? [{ label: configList[AGGREGATIONS][0].valueField?.label }]
+                  : []
+              }
+              singleSelection={{ asPlainText: true }}
+              onChange={(val) =>
+                updateList(AGGREGATIONS, VALUEFIELD, val.length > 0 ? val[0].label : '')
+              }
+            />
+          </EuiFormRow>
+        </EuiPanel>
+      </div>
+      <EuiSpacer size="s" />
+      <EuiSpacer size="s" />
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          data-test-subj="visualizeEditorRenderButton"
+          iconType="play"
+          onClick={() => updateChart()}
+          size="s"
+        >
+          Update chart
+        </EuiButton>
+      </EuiFlexItem>
+    </div>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
new file mode 100644
index 0000000000..6ee5397d8f
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiForm, EuiFormRow } from '@elastic/eui';
+import { ConfigPanelOptions } from './config_controls';
+
+export const VizDataPanel = ({ visualizations, onConfigChange, vizState = {}, tabProps }: any) => {
+  const handleConfigEditing = (stateFieldName) => {
+    return (changes) => {
+      onConfigChange({
+        ...vizState,
+        [stateFieldName]: changes,
+      });
+    };
+  };
+
+  const dynamicContent = tabProps.sections.map((section) => {
+    const Editor = section.editor;
+    return (
+      <EuiFormRow fullWidth>
+        <Editor
+          visualizations={visualizations}
+          schemas={section.schemas}
+          handleConfigChange={handleConfigEditing(section.mapTo)}
+          vizState={vizState[section.mapTo] || section.defaultState || {}}
+          sectionName={section.name}
+          sectionId={section.id}
+          props={section.props || {}}
+        />
+      </EuiFormRow>
+    );
+  });
+
+  return (
+    <div className="visEditorSidebar__config">
+      <EuiForm className="visEditorSidebar__form">
+        <EuiFormRow>
+          <ConfigPanelOptions
+            vizState={vizState?.panelOptions}
+            visualizations={visualizations}
+            handleConfigChange={handleConfigEditing('panelOptions')}
+          />
+        </EuiFormRow>
+        {dynamicContent}
+      </EuiForm>
+    </div>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/json_editor.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/json_editor.tsx
new file mode 100644
index 0000000000..9b15908539
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/json_editor.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { PlotlyVizEditor } from '../../shared_components/plotly_viz_editor';
+
+export const ConfigEditor = ({
+  spec,
+  onConfigEditorChange,
+  setToast,
+  visualizations,
+  ...rest
+}: any) => {
+  return (
+    <div className="visEditorSidebar__config">
+      <PlotlyVizEditor
+        spec={spec}
+        onVizConfigChange={onConfigEditorChange}
+        setToast={setToast}
+        visualizations={visualizations}
+        {...rest}
+      />
+    </div>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/index.ts b/public/components/event_analytics/explorer/visualizations/config_panel/index.ts
new file mode 100644
index 0000000000..4c1f8be6e8
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { ConfigPanel } from './config_panel';
diff --git a/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
new file mode 100644
index 0000000000..caaac78ac4
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/__snapshots__/count_distribution.test.tsx.snap
@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Count distribution component Renders count distribution component with data 1`] = `
+<CountDistribution
+  countDistribution={
+    Object {
+      "data": Object {
+        "count()": Array [
+          2549,
+          9337,
+          1173,
+        ],
+        "span(timestamp,1M)": Array [
+          "2021-05-01 00:00:00",
+          "2021-06-01 00:00:00",
+          "2021-07-01 00:00:00",
+        ],
+      },
+      "jsonData": Array [
+        Object {
+          "count()": 2549,
+          "span(timestamp,1M)": "2021-05-01 00:00:00",
+        },
+        Object {
+          "count()": 9337,
+          "span(timestamp,1M)": "2021-06-01 00:00:00",
+        },
+        Object {
+          "count()": 2549,
+          "span(timestamp,1M)": "2021-07-01 00:00:00",
+        },
+      ],
+      "metadata": Object {
+        "fields": Array [
+          Object {
+            "name": "count()",
+            "type": "integer",
+          },
+          Object {
+            "name": "span(timestamp,1M)",
+            "type": "timestamp",
+          },
+        ],
+      },
+    }
+  }
+>
+  <Plt
+    data={
+      Array [
+        Object {
+          "name": Object {
+            "name": "count()",
+            "type": "integer",
+          },
+          "orientation": "v",
+          "type": "bar",
+          "x": Array [
+            "2021-05-01 00:00:00",
+            "2021-06-01 00:00:00",
+            "2021-07-01 00:00:00",
+          ],
+          "y": Array [
+            2549,
+            9337,
+            1173,
+          ],
+        },
+      ]
+    }
+    layout={
+      Object {
+        "colorway": Array [
+          "#8C55A3",
+        ],
+        "height": 220,
+        "margin": Object {
+          "b": 15,
+          "l": 60,
+          "pad": 0,
+          "r": 10,
+          "t": 30,
+        },
+        "showlegend": true,
+      }
+    }
+  >
+    <PlotlyComponent
+      config={
+        Object {
+          "displayModeBar": false,
+        }
+      }
+      data={
+        Array [
+          Object {
+            "name": Object {
+              "name": "count()",
+              "type": "integer",
+            },
+            "orientation": "v",
+            "type": "bar",
+            "x": Array [
+              "2021-05-01 00:00:00",
+              "2021-06-01 00:00:00",
+              "2021-07-01 00:00:00",
+            ],
+            "y": Array [
+              2549,
+              9337,
+              1173,
+            ],
+          },
+        ]
+      }
+      debug={false}
+      divId="explorerPlotComponent"
+      layout={
+        Object {
+          "autosize": true,
+          "barmode": "stack",
+          "colorway": Array [
+            "#8C55A3",
+          ],
+          "height": 220,
+          "hovermode": "closest",
+          "legend": Object {
+            "orientation": "h",
+            "traceorder": "normal",
+          },
+          "margin": Object {
+            "b": 15,
+            "l": 60,
+            "pad": 0,
+            "r": 10,
+            "t": 30,
+          },
+          "showlegend": true,
+          "xaxis": Object {
+            "automargin": true,
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+          "yaxis": Object {
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+        }
+      }
+      style={
+        Object {
+          "height": "100%",
+          "width": "100%",
+        }
+      }
+      useResizeHandler={true}
+    >
+      <div
+        id="explorerPlotComponent"
+        style={
+          Object {
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      />
+    </PlotlyComponent>
+  </Plt>
+</CountDistribution>
+`;
+
+exports[`Count distribution component Renders empty count distribution component 1`] = `<CountDistribution />`;
diff --git a/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/count_distribution.test.tsx b/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/count_distribution.test.tsx
new file mode 100644
index 0000000000..9176ed34d3
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/count_distribution/__tests__/count_distribution.test.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { CountDistribution } from '../count_distribution';
+import { SAMPLE_VISUALIZATIONS } from '../../../../../../../test/event_analytics_constants';
+
+describe('Count distribution component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders empty count distribution component', async () => {
+    
+    const wrapper = mount(
+      <CountDistribution />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders count distribution component with data', async () => {
+
+    const wrapper = mount(
+      <CountDistribution
+        countDistribution={SAMPLE_VISUALIZATIONS}
+      />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx b/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx
new file mode 100644
index 0000000000..e7ea547dfb
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/count_distribution/count_distribution.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { BarOrientation, LONG_CHART_COLOR } from '../../../../../../common/constants/shared';
+import { Plt } from '../../../../visualizations/plotly/plot';
+
+export const CountDistribution = ({ countDistribution }: any) => {
+  if (
+    !countDistribution ||
+    !countDistribution.data ||
+    !countDistribution.metadata ||
+    !countDistribution.metadata.fields
+  )
+    return null;
+
+  const {
+    data,
+    metadata: { fields },
+  } = countDistribution;
+
+  const finalData = [
+    {
+      x: [...data[fields[1].name]],
+      y: [...data[fields[0].name]],
+      type: 'bar',
+      name: fields[0],
+      orientation: BarOrientation.vertical,
+    },
+  ];
+
+  return (
+    <Plt
+      data={finalData}
+      layout={{
+        showlegend: true,
+        margin: {
+          l: 60,
+          r: 10,
+          b: 15,
+          t: 30,
+          pad: 0,
+        },
+        height: 220,
+        colorway: [LONG_CHART_COLOR],
+      }}
+    />
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/count_distribution/index.ts b/public/components/event_analytics/explorer/visualizations/count_distribution/index.ts
new file mode 100644
index 0000000000..7d6456ee06
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/count_distribution/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './count_distribution';
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/visualizations/index.tsx b/public/components/event_analytics/explorer/visualizations/index.tsx
new file mode 100644
index 0000000000..98ab13799c
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/index.tsx
@@ -0,0 +1,164 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './app.scss';
+
+import { isEmpty } from 'lodash';
+
+import React from 'react';
+import { EuiResizableContainer } from '@elastic/eui';
+import { QueryManager } from 'common/query_manager';
+import { RAW_QUERY, SELECTED_TIMESTAMP } from '../../../../../common/constants/explorer';
+import {
+  IField,
+  IQuery,
+  IVisualizationContainerProps,
+  ExplorerFields,
+} from '../../../../../common/types/explorer';
+import { WorkspacePanel } from './workspace_panel';
+import { ConfigPanel } from './config_panel';
+import { Sidebar } from '../sidebar';
+import { DataConfigPanelItem } from './config_panel/config_panes/config_controls/data_configurations_panel';
+import { PPL_STATS_REGEX, VIS_CHART_TYPES } from '../../../../../common/constants/shared';
+import { TreemapConfigPanelItem } from './config_panel/config_panes/config_controls/treemap_config_panel_item';
+import { LogsViewConfigPanelItem } from './config_panel/config_panes/config_controls/logs_view_config_panel_item';
+
+interface IExplorerVisualizationsProps {
+  query: IQuery;
+  curVisId: string;
+  setCurVisId: (visId: string) => void;
+  explorerVis: any;
+  explorerFields: ExplorerFields;
+  explorerData: any;
+  handleAddField: (field: IField) => void;
+  handleRemoveField: (field: IField) => void;
+  visualizations: IVisualizationContainerProps;
+  handleOverrideTimestamp: (field: IField) => void;
+  callback?: any;
+  queryManager: QueryManager;
+}
+
+export const ExplorerVisualizations = ({
+  query,
+  curVisId,
+  setCurVisId,
+  explorerVis,
+  explorerFields,
+  explorerData,
+  handleAddField,
+  handleRemoveField,
+  visualizations,
+  handleOverrideTimestamp,
+  callback,
+  queryManager,
+}: IExplorerVisualizationsProps) => {
+  const { vis } = visualizations;
+  const fieldOptionList = explorerFields.availableFields.map((field) => ({
+    ...field,
+    label: field.name,
+  }));
+
+  const renderDataConfigContainer = () => {
+    switch (curVisId) {
+      case VIS_CHART_TYPES.TreeMap:
+        return (
+          <TreemapConfigPanelItem
+            fieldOptionList={fieldOptionList}
+            visualizations={visualizations}
+          />
+        );
+      case VIS_CHART_TYPES.LogsView:
+        return (
+          <LogsViewConfigPanelItem
+            fieldOptionList={fieldOptionList}
+            visualizations={visualizations}
+          />
+        );
+      default:
+        return (
+          <DataConfigPanelItem
+            fieldOptionList={fieldOptionList}
+            visualizations={visualizations}
+            queryManager={queryManager}
+          />
+        );
+    }
+  };
+
+  const syntheticResize = () => {
+    const event = window.document.createEvent('UIEvents');
+    event.initUIEvent('resize', true, false, window, 0);
+    window.dispatchEvent(event);
+  };
+
+  return (
+    <div id="vis__mainContent">
+      <EuiResizableContainer onPanelWidthChange={syntheticResize}>
+        {(EuiResizablePanel, EuiResizableButton) => (
+          <>
+            <EuiResizablePanel
+              initialSize={20}
+              minSize="17%"
+              mode={['collapsible', { position: 'top' }]}
+              paddingSize="none"
+              className="vis__leftPanel"
+            >
+              <div className="explorer__insights">
+                <div className="explorerFieldSelector">
+                  <Sidebar
+                    query={query}
+                    explorerFields={explorerFields}
+                    explorerData={explorerData}
+                    selectedTimestamp={visualizations?.data?.query[SELECTED_TIMESTAMP] || ''}
+                    handleOverrideTimestamp={handleOverrideTimestamp}
+                    handleAddField={(field: IField) => handleAddField(field)}
+                    handleRemoveField={(field: IField) => handleRemoveField(field)}
+                    isFieldToggleButtonDisabled={
+                      vis.name === VIS_CHART_TYPES.LogsView
+                        ? isEmpty(explorerData.jsonData) ||
+                          !isEmpty(query[RAW_QUERY].match(PPL_STATS_REGEX))
+                        : true
+                    }
+                  />
+                </div>
+                <div className="explorer__vizDataConfig">{renderDataConfigContainer()}</div>
+              </div>
+            </EuiResizablePanel>
+            <EuiResizableButton />
+            <EuiResizablePanel
+              className="ws__central--canvas"
+              initialSize={60}
+              minSize="55%"
+              mode="main"
+              paddingSize="none"
+            >
+              <WorkspacePanel
+                curVisId={curVisId}
+                setCurVisId={setCurVisId}
+                visualizations={visualizations}
+              />
+            </EuiResizablePanel>
+            <EuiResizableButton />
+            <EuiResizablePanel
+              className="ws__configPanel--right"
+              initialSize={20}
+              minSize="15%"
+              mode={['collapsible', { position: 'top' }]}
+              paddingSize="none"
+            >
+              <ConfigPanel
+                vizVectors={explorerVis}
+                visualizations={visualizations}
+                curVisId={curVisId}
+                setCurVisId={setCurVisId}
+                callback={callback}
+              />
+            </EuiResizablePanel>
+          </>
+        )}
+      </EuiResizableContainer>
+    </div>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap
new file mode 100644
index 0000000000..f409c4a8d0
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/__snapshots__/shared_components.test.tsx.snap
@@ -0,0 +1,207 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Shared components Renders empty placeholder component 1`] = `
+<EmptyPlaceholder
+  icon={[Function]}
+>
+  <EuiText
+    className="lnsChart__empty"
+    color="subdued"
+    data-test-subj="vizWorkspace__noData"
+    size="xs"
+    textAlign="center"
+  >
+    <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={[Function]}
+              >
+                <LensIconChartBar
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--xxLarge euiIcon--subdued"
+                  focusable="false"
+                  role="img"
+                  style={null}
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--xxLarge euiIcon--subdued"
+                    fill="none"
+                    focusable="false"
+                    height={22}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 30 22"
+                    width={30}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      className="lensChartIcon__subdued"
+                      d="M5 7a1 1 0 011 1v13a1 1 0 01-1 1H1a1 1 0 01-1-1V8a1 1 0 011-1h4zm16-7a1 1 0 011 1v20a1 1 0 01-1 1h-4a1 1 0 01-1-1V1a1 1 0 011-1h4z"
+                    />
+                    <path
+                      className="lensChartIcon__accent"
+                      d="M13 11a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4zm16-7a1 1 0 011 1v16a1 1 0 01-1 1h-4a1 1 0 01-1-1V5a1 1 0 011-1h4z"
+                    />
+                  </svg>
+                </LensIconChartBar>
+              </EuiIcon>
+              <EuiSpacer
+                size="l"
+              >
+                <div
+                  className="euiSpacer euiSpacer--l"
+                />
+              </EuiSpacer>
+              <p>
+                <FormattedMessage
+                  defaultMessage="No data found"
+                  id="visualization_noData"
+                  values={Object {}}
+                >
+                  <span>
+                    No data found
+                  </span>
+                </FormattedMessage>
+              </p>
+            </div>
+          </EuiTextColor>
+        </div>
+      </EuiTextAlign>
+    </div>
+  </EuiText>
+</EmptyPlaceholder>
+`;
+
+exports[`Shared components Renders tool bar button component 1`] = `
+<ToolbarButton
+  fontWeight="bold"
+  onClick={[MockFunction]}
+>
+  <EuiButton
+    className="lnsToolbarButton lnsToolbarButton--bold lnsToolbarButton--s"
+    color="text"
+    contentProps={
+      Object {
+        "className": "lnsToolbarButton__content",
+      }
+    }
+    data-test-subj=""
+    iconSide="right"
+    iconType="arrowDown"
+    onClick={[MockFunction]}
+    size="s"
+    textProps={
+      Object {
+        "className": "lnsToolbarButton__text",
+      }
+    }
+  >
+    <EuiButtonDisplay
+      baseClassName="euiButton"
+      className="lnsToolbarButton lnsToolbarButton--bold lnsToolbarButton--s"
+      color="text"
+      contentProps={
+        Object {
+          "className": "lnsToolbarButton__content",
+        }
+      }
+      data-test-subj=""
+      disabled={false}
+      element="button"
+      iconSide="right"
+      iconType="arrowDown"
+      isDisabled={false}
+      onClick={[MockFunction]}
+      size="s"
+      textProps={
+        Object {
+          "className": "lnsToolbarButton__text",
+        }
+      }
+      type="button"
+    >
+      <button
+        className="euiButton euiButton--text euiButton--small lnsToolbarButton lnsToolbarButton--bold lnsToolbarButton--s"
+        data-test-subj=""
+        disabled={false}
+        onClick={[MockFunction]}
+        style={
+          Object {
+            "minWidth": undefined,
+          }
+        }
+        type="button"
+      >
+        <EuiButtonContent
+          className="euiButton__content lnsToolbarButton__content"
+          iconSide="right"
+          iconType="arrowDown"
+          textProps={
+            Object {
+              "className": "euiButton__text lnsToolbarButton__text",
+            }
+          }
+        >
+          <span
+            className="euiButtonContent euiButtonContent--iconRight euiButton__content lnsToolbarButton__content"
+          >
+            <EuiIcon
+              className="euiButtonContent__icon"
+              color="inherit"
+              size="m"
+              type="arrowDown"
+            >
+              <EuiIconEmpty
+                aria-hidden={true}
+                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                focusable="false"
+                role="img"
+                style={null}
+              >
+                <svg
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                  focusable="false"
+                  height={16}
+                  role="img"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </EuiIconEmpty>
+            </EuiIcon>
+            <span
+              className="euiButton__text lnsToolbarButton__text"
+            >
+              <WrappedComponent>
+                <div>
+                  testing
+                </div>
+              </WrappedComponent>
+            </span>
+          </span>
+        </EuiButtonContent>
+      </button>
+    </EuiButtonDisplay>
+  </EuiButton>
+</ToolbarButton>
+`;
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx
new file mode 100644
index 0000000000..f7ba128362
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/__tests__/shared_components.test.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { EmptyPlaceholder } from '../empty_placeholder';
+import { LensIconChartBar } from '../../../../../visualizations/assets/chart_bar';
+import { ToolbarButton } from '../toolbar_button';
+
+describe('Shared components', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders empty placeholder component', async () => {
+    const wrapper = mount(<EmptyPlaceholder icon={LensIconChartBar} />);
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders tool bar button component', async () => {
+    const handleClick = jest.fn();
+    const WrappedComponent = () => <div>testing</div>;
+
+    const wrapper = mount(
+      <ToolbarButton onClick={handleClick} fontWeight="bold">
+        <WrappedComponent />
+      </ToolbarButton>
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss b/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss
new file mode 100644
index 0000000000..be379ecece
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.scss
@@ -0,0 +1,12 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+ .lnsChart__empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  font-size: 20px;
+}
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
new file mode 100644
index 0000000000..56b8886fe2
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiIcon, EuiText, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+import './empty_placeholder.scss';
+
+export const EmptyPlaceholder = (props: { icon: string }) => (
+  <>
+    <EuiText
+      className="lnsChart__empty"
+      textAlign="center"
+      color="subdued"
+      size="xs"
+      data-test-subj="vizWorkspace__noData"
+    >
+      <EuiIcon type={props.icon} color="subdued" size="xxl" />
+      <EuiSpacer size="l" />
+      <p>
+        <FormattedMessage id="visualization_noData" defaultMessage="No data found" />
+      </p>
+    </EuiText>
+  </>
+);
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/index.ts b/public/components/event_analytics/explorer/visualizations/shared_components/index.ts
new file mode 100644
index 0000000000..118494bbd0
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './empty_placeholder';
+export { ToolbarButtonProps, ToolbarButton } from './toolbar_button';
+export { VisCanvassPlaceholder } from './vis_canvass_placeholder'
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/index.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/index.tsx
new file mode 100644
index 0000000000..1238af2fed
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/index.tsx
@@ -0,0 +1 @@
+export { PlotlyVizEditor } from './plotly_viz_editor';
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_actions.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_actions.tsx
new file mode 100644
index 0000000000..e918d7b74d
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_actions.tsx
@@ -0,0 +1,77 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui';
+import { FormattedMessage } from '@osd/i18n/react';
+
+interface PlotlyEditorActionsMenuProps {
+  formatHJson(): void;
+}
+
+function PlotlyEditorActionsMenu({ formatHJson }: PlotlyEditorActionsMenuProps) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const onButtonClick = useCallback(() => setIsPopoverOpen((isOpen) => !isOpen), []);
+  const onHJsonCLick = useCallback(() => {
+    formatHJson();
+    setIsPopoverOpen(false);
+  }, [formatHJson]);
+
+  const closePopover = useCallback(() => setIsPopoverOpen(false), []);
+
+  const button = <EuiButtonIcon iconType="wrench" onClick={onButtonClick} />;
+
+  const items = [
+    <EuiContextMenuItem key="hjson" onClick={onHJsonCLick}>
+      <FormattedMessage
+        id="visTypeVega.editor.reformatAsHJSONButtonLabel"
+        defaultMessage="Reformat as HJSON"
+      />
+    </EuiContextMenuItem>,
+  ];
+
+  return (
+    <EuiPopover
+      id="actionsMenu"
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenuPanel items={items} />
+    </EuiPopover>
+  );
+}
+
+export { PlotlyEditorActionsMenu };
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_editor.scss b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_editor.scss
new file mode 100644
index 0000000000..709aaa2030
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_editor.scss
@@ -0,0 +1,22 @@
+.visEditor--vega {
+  .visEditorSidebar__config {
+    padding: 0;
+  }
+}
+
+.vgaEditor {
+  @include euiBreakpoint('xs', 's', 'm') {
+    @include euiScrollBar;
+    max-height: $euiSize * 15;
+    overflow-y: auto;
+  }
+}
+
+.vgaEditor__aceEditorActions {
+  position: absolute;
+  z-index: $euiZLevel1;
+  top: $euiSizeS;
+  // Adjust for sidebar collapse button
+  right: $euiSizeXXL;
+  line-height: 1;
+}
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_vis.scss b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_vis.scss
new file mode 100644
index 0000000000..12108c7ba3
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_vis.scss
@@ -0,0 +1,146 @@
+.vgaVis {
+  display: flex;
+  flex: 1 1 100%;
+  position: relative;
+  // flex-direction determined by js
+}
+
+.vgaVis__view {
+  z-index: 0;
+  flex: 1 1 100%;
+
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: 100%;
+  height: 100%;
+
+  // BUG #23514: Make sure Vega doesn't display the controls in two places
+  .vega-bindings {
+    // sass-lint:disable no-important
+    display: none !important;
+  }
+}
+
+.vgaVis__controls {
+  @include euiFontSizeS;
+  display: flex;
+
+  &:not(:empty) {
+    padding: $euiSizeS 0; // Adding a little bit of padding helps with the unnecessary scrollbars
+  }
+
+  &.vgaVis__controls--column {
+    flex-direction: column;
+  }
+
+  &.vgaVis__controls--row {
+    flex-direction: row;
+
+    > .vega-bind {
+      flex-grow: 1;
+    }
+  }
+
+  > .vega-bind {
+    .vega-bind-name {
+      display: inline-block;
+      width: $euiSizeM * 10 - $euiSize;
+    }
+
+    input[type='range'] {
+      width: $euiSizeM * 10;
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    label {
+      margin: 0 0 0 $euiSizeS;
+    }
+
+    select {
+      max-width: $euiSize * 10;
+    }
+
+    .vega-bind-radio label {
+      margin: 0 $euiSizeS 0 $euiSizeXS;
+    }
+  }
+}
+
+// Messages
+
+.vgaVis__messages {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  margin: auto;
+  opacity: .8;
+  z-index: 1;
+  list-style: none;
+}
+
+.vgaVis__message {
+  margin: $euiSizeS;
+
+  .vgaVis__messageCode {
+    white-space: pre-wrap;
+    padding: $euiSizeS;
+  }
+}
+
+.vgaVis__message--warn .vgaVis__messageCode {
+  $calculatedBackgroundColor: tintOrShade($euiColorWarning, 90%, 70%);
+  background-color: $calculatedBackgroundColor;
+  color: makeHighContrastColor($euiColorWarning, $calculatedBackgroundColor);
+}
+
+.vgaVis__message--err .vgaVis__messageCode {
+  $calculateBackgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
+  background-color: $calculateBackgroundColor;
+  color: makeHighContrastColor($euiColorDanger, $calculateBackgroundColor);
+}
+
+
+// Style tooltip popup (gets created dynamically at the top level if dashboard has a Vega vis)
+// Adapted from https://github.com/vega/vega-tooltip
+
+.vgaVis__tooltip {
+  max-width: 100%;
+  position: fixed;
+
+  h2 {
+    margin-bottom: $euiSizeS;
+  }
+
+  td {
+    @include euiTextTruncate;
+    padding-top: $euiSizeXS;
+    padding-bottom: $euiSizeXS;
+
+    &.key {
+      color: $euiColorMediumShade;
+      max-width: $euiSize * 10;
+      text-align: right;
+      padding-right: $euiSizeXS;
+    }
+
+    &.value {
+      max-width: $euiSizeL * 10;
+      text-align: left;
+    }
+  }
+
+
+  @media only screen and (max-width: map-get($euiBreakpoints, 'm')) {
+    td {
+      &.key {
+        max-width: $euiSize * 6;
+      }
+
+      &.value {
+        max-width: $euiSize * 10;
+      }
+    }
+  }
+}
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx
new file mode 100644
index 0000000000..f16c7b69e8
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx
@@ -0,0 +1,101 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import './plotly_vis.scss';
+import './plotly_editor.scss';
+
+import React, { useCallback } from 'react';
+import { EuiCodeEditor } from '@elastic/eui';
+import compactStringify from 'json-stringify-pretty-compact';
+import hjson from 'hjson';
+import 'brace/mode/hjson';
+import { PlotlyEditorActionsMenu } from './plotly_actions';
+
+const aceOptions = {
+  maxLines: Infinity,
+  highlightActiveLine: false,
+  showPrintMargin: false,
+  tabSize: 2,
+  useSoftTabs: true,
+  wrap: true,
+};
+
+const hjsonStringifyOptions = {
+  bracesSameLine: true,
+  keepWsc: true,
+};
+
+function PlotlyVizEditor({ spec, onVizConfigChange, setToast, vizState, userConfigs = {} }: any) {
+  const formatHJson = useCallback(
+    () => onVizConfigChange(format(spec, hjson.stringify, hjsonStringifyOptions)),
+    [onVizConfigChange, spec]
+  );
+
+  const format = (
+    value: string,
+    stringify: typeof hjson.stringify | typeof compactStringify,
+    options?: any
+  ) => {
+    try {
+      const formattedSpec = hjson.parse(value, { legacyRoot: false, keepWsc: true });
+      return stringify(formattedSpec, options);
+    } catch (err) {
+      // This is a common case - user tries to format an invalid HJSON text
+      setToast(`Error formatting spec: '${err.message}`, 'danger');
+
+      return value;
+    }
+  };
+
+  return (
+    <div className="vgaEditor">
+      <EuiCodeEditor
+        data-test-subj="vega-editor"
+        mode="hjson"
+        theme="textmate"
+        width="100%"
+        height="auto"
+        onChange={(config) => {
+          onVizConfigChange(config);
+        }}
+        value={spec}
+        setOptions={aceOptions}
+        isReadOnly={false}
+      />
+      <div className="vgaEditor__aceEditorActions">
+        <PlotlyEditorActionsMenu formatHJson={formatHJson} />
+      </div>
+    </div>
+  );
+}
+
+export { PlotlyVizEditor };
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.scss b/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.scss
new file mode 100644
index 0000000000..621cb9293d
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.scss
@@ -0,0 +1,65 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.lnsToolbarButton {
+  line-height: $euiButtonHeight; // Keeps alignment of text and chart icon
+  background-color: $euiColorEmptyShade;
+
+  // Some toolbar buttons are just icons, but EuiButton comes with margin and min-width that need to be removed
+  min-width: 0;
+
+  &[class*='--text'] {
+    // Lighten the border color for all states
+    border-color: $euiBorderColor !important; // sass-lint:disable-line no-important
+  }
+
+  &[class*='isDisabled'] {
+    // There is a popover `pointer-events: none` that messes with the not-allowed cursor
+    pointer-events: initial;
+  }
+
+  .lnsToolbarButton__text > svg {
+    margin-top: -1px; // Just some weird alignment issue when icon is the child not the `iconType`
+  }
+
+  .lnsToolbarButton__text:empty {
+    margin: 0;
+  }
+
+  // Toolbar buttons don't look good with centered text when fullWidth
+  &[class*='fullWidth'] {
+    text-align: left;
+
+    .lnsToolbarButton__content {
+      justify-content: space-between;
+    }
+  }
+
+}
+
+.lnsToolbarButton--groupLeft {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.lnsToolbarButton--groupCenter {
+  border-radius: 0;
+  border-left: none;
+}
+
+.lnsToolbarButton--groupRight {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: none;
+}
+
+.lnsToolbarButton--bold {
+  font-weight: $euiFontWeightBold;
+}
+
+.lnsToolbarButton--s {
+  box-shadow: none !important; // sass-lint:disable-line no-important
+  font-size: $euiFontSizeS;
+}
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx
new file mode 100644
index 0000000000..99d0aca643
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './toolbar_button.scss';
+import React from 'react';
+import classNames from 'classnames';
+import { EuiButton, PropsOf, EuiButtonProps } from '@elastic/eui';
+
+const groupPositionToClassMap = {
+  none: null,
+  left: 'lnsToolbarButton--groupLeft',
+  center: 'lnsToolbarButton--groupCenter',
+  right: 'lnsToolbarButton--groupRight',
+};
+
+export type ToolbarButtonProps = PropsOf<typeof EuiButton> & {
+  /**
+   * Determines prominence
+   */
+  fontWeight?: 'normal' | 'bold';
+  /**
+   * Smaller buttons also remove extra shadow for less prominence
+   */
+  size?: EuiButtonProps['size'];
+  /**
+   * Determines if the button will have a down arrow or not
+   */
+  hasArrow?: boolean;
+  /**
+   * Adjusts the borders for groupings
+   */
+  groupPosition?: 'none' | 'left' | 'center' | 'right';
+  dataTestSubj?: string;
+};
+
+export const ToolbarButton: React.FunctionComponent<ToolbarButtonProps> = ({
+  children,
+  className,
+  fontWeight = 'normal',
+  size = 's',
+  hasArrow = true,
+  groupPosition = 'none',
+  dataTestSubj = '',
+  ...rest
+}) => {
+  const classes = classNames(
+    'lnsToolbarButton',
+    groupPositionToClassMap[groupPosition],
+    [`lnsToolbarButton--${fontWeight}`, `lnsToolbarButton--${size}`],
+    className
+  );
+  return (
+    <EuiButton
+      data-test-subj={dataTestSubj}
+      className={classes}
+      iconSide="right"
+      iconType={hasArrow ? 'arrowDown' : ''}
+      color="text"
+      contentProps={{
+        className: 'lnsToolbarButton__content',
+      }}
+      textProps={{
+        className: 'lnsToolbarButton__text',
+      }}
+      {...rest}
+      size={size}
+    >
+      {children}
+    </EuiButton>
+  );
+};
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/vis_canvass_placeholder.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/vis_canvass_placeholder.tsx
new file mode 100644
index 0000000000..5ebede43e9
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/vis_canvass_placeholder.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiIcon, EuiText, EuiSpacer } from '@elastic/eui';
+import './empty_placeholder.scss';
+
+export const VisCanvassPlaceholder = (props: { message: string; icon: string }) => (
+  <>
+    <EuiText
+      className="lnsChart__empty"
+      textAlign="center"
+      color="subdued"
+      size="xs"
+      data-test-subj="vizWorkspace__noData"
+    >
+      <EuiIcon type={props.icon} color="subdued" size="xxl" />
+      <EuiSpacer size="l" />
+      <p>
+        { props.message }
+      </p>
+    </EuiText>
+  </>
+);
diff --git a/public/components/event_analytics/explorer/visualizations/visualization_specs/default.data.spec.hjson b/public/components/event_analytics/explorer/visualizations/visualization_specs/default.data.spec.hjson
new file mode 100644
index 0000000000..eb3c8a0ced
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/visualization_specs/default.data.spec.hjson
@@ -0,0 +1,4 @@
+{
+  /* data configurations */
+  data: {}
+}
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/visualizations/visualization_specs/default.layout.spec.hjson b/public/components/event_analytics/explorer/visualizations/visualization_specs/default.layout.spec.hjson
new file mode 100644
index 0000000000..f2bb3702d9
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/visualization_specs/default.layout.spec.hjson
@@ -0,0 +1,11 @@
+{ 
+  /* layout configurations */
+  layout: {
+    /* configuration options can be found: https://plotly.com/javascript/reference/layout/ */
+  }
+
+  /* figure configurations */
+  config: {
+    /* configuration options can be found: https://plotly.com/javascript/configuration-options/ */
+  }
+}
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/visualizations/visualization_specs/default_spec.ts b/public/components/event_analytics/explorer/visualizations/visualization_specs/default_spec.ts
new file mode 100644
index 0000000000..310f6613fd
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/visualization_specs/default_spec.ts
@@ -0,0 +1,10 @@
+// @ts-ignore
+
+import hjson from 'hjson';
+import defaultLayoutSpec from '!!raw-loader!./default.layout.spec.hjson';
+import defaultDataSpec from '!!raw-loader!./default.data.spec.hjson';
+
+export const getDefaultSpec = (type = 'layout') => {
+  if (type === 'data') return defaultDataSpec;
+  return defaultLayoutSpec;
+};
diff --git a/public/components/event_analytics/explorer/visualizations/workspace_panel/index.ts b/public/components/event_analytics/explorer/visualizations/workspace_panel/index.ts
new file mode 100644
index 0000000000..f8ed02d091
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/workspace_panel/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { WorkspacePanel } from './workspace_panel';
diff --git a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss
new file mode 100644
index 0000000000..a7c2eb66de
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.ws__header-dark {
+  background-color: transparent;
+}
+
+.ws__visCanvas {
+  grid-gap: 12px;
+  padding: 12px;
+  .ws__visCanvasControl {
+    height: 40px;
+    width: 140px;
+    .ws__visCanvasFlexitem {
+      display: block;
+    }
+  }
+}
+
+#vis__mainContent .ws__central--canvas {
+  background-color: #FFF;
+  border-right: 1px solid #D3DAE6;
+}
diff --git a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
new file mode 100644
index 0000000000..81bcb6e0b0
--- /dev/null
+++ b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
@@ -0,0 +1,56 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './workspace_panel.scss';
+
+import React, { useState, useMemo } from 'react';
+import { isEmpty } from 'lodash';
+import { EuiPanel, EuiSwitch } from '@elastic/eui';
+import { Visualization } from '../../../../visualizations/visualization';
+import { DataTable } from '../../../../visualizations/charts/data_table/data_table';
+import { uiSettingsService } from '../../../../../../common/utils';
+
+interface IWorkSpacePanel {
+  curVisId: string;
+  setCurVisId: any;
+  visualizations: any;
+}
+
+export function WorkspacePanel({ visualizations }: IWorkSpacePanel) {
+  const [isTableViewOn, setIsTableViewOn] = useState(false);
+  const VisualizationPanel = useMemo(() => {
+    return (
+      <Visualization visualizations={visualizations} data-test-subj="workspace__visualizations" />
+    );
+  }, [visualizations]);
+
+  return (
+    <div className="explorerViz__commonPanel ws__visCanvas">
+      <EuiPanel className="ws__visCanvasControl" paddingSize="s" color="plain" hasBorder={false}>
+        <EuiSwitch
+          className="ws__visCanvasControl--switch"
+          label="Table view"
+          type="button"
+          disabled={isEmpty(visualizations?.data?.rawVizData)}
+          checked={isTableViewOn}
+          onChange={() => {
+            setIsTableViewOn((staleState) => !staleState);
+          }}
+          aria-describedby="table view switcher"
+          data-test-subj="workspace__dataTableViewSwitch"
+          compressed
+        />
+      </EuiPanel>
+      <EuiPanel
+        paddingSize="s"
+        className={`ws__visCanvas--space ${
+          uiSettingsService.get('theme:darkMode') ? 'ag-theme-alpine-dark' : 'ag-theme-alpine'
+        }`}
+      >
+        {isTableViewOn ? <DataTable visualizations={visualizations} /> : VisualizationPanel}
+      </EuiPanel>
+    </div>
+  );
+}
diff --git a/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap b/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
new file mode 100644
index 0000000000..fcaaa6c53d
--- /dev/null
+++ b/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
@@ -0,0 +1,1742 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Saved query table component Renders saved query table 1`] = `
+<SavedQueryTable
+  handleHistoryClick={[MockFunction]}
+  handleSelectHistory={[MockFunction]}
+  isTableLoading={false}
+  savedHistories={
+    Array [
+      Object {
+        "createdTimeMs": "1638901792922",
+        "lastUpdatedTimeMs": "1638901792922",
+        "objectId": "Kocoln0BYMuJGDsOwDma",
+        "savedVisualization": Object {
+          "description": "",
+          "name": "Mock Flight count by destination save to panel",
+          "query": "source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier",
+          "selected_date_range": Object {
+            "end": "now",
+            "start": "now-15m",
+            "text": "",
+          },
+          "selected_fields": Object {
+            "text": "",
+            "tokens": Array [],
+          },
+          "selected_timestamp": Object {
+            "name": "timestamp",
+            "type": "timestamp",
+          },
+          "type": "bar",
+        },
+        "tenant": "",
+      },
+      Object {
+        "createdTimeMs": "1638901777572",
+        "lastUpdatedTimeMs": "1638901777572",
+        "objectId": "KIcoln0BYMuJGDsOhDmk",
+        "savedVisualization": Object {
+          "description": "",
+          "name": "Mock Flight count by destination",
+          "query": "source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier",
+          "selected_date_range": Object {
+            "end": "now",
+            "start": "now-15m",
+            "text": "",
+          },
+          "selected_fields": Object {
+            "text": "",
+            "tokens": Array [],
+          },
+          "selected_timestamp": Object {
+            "name": "timestamp",
+            "type": "timestamp",
+          },
+          "type": "bar",
+        },
+        "tenant": "",
+      },
+    ]
+  }
+>
+  <EuiInMemoryTable
+    columns={
+      Array [
+        Object {
+          "field": "type",
+          "name": "",
+          "render": [Function],
+          "sortable": true,
+          "width": "40px",
+        },
+        Object {
+          "field": "data",
+          "name": "Name",
+          "render": [Function],
+          "sortable": true,
+          "truncateText": true,
+          "width": "70%",
+        },
+        Object {
+          "field": "type",
+          "name": "Type",
+        },
+      ]
+    }
+    isSelectable={true}
+    itemId="id"
+    items={
+      Array [
+        Object {
+          "data": Object {
+            "date_end": "now",
+            "date_start": "now-15m",
+            "fields": Array [],
+            "name": "Mock Flight count by destination save to panel",
+            "objectId": "Kocoln0BYMuJGDsOwDma",
+            "objectType": "savedVisualization",
+            "query": "source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier",
+            "timestamp": "timestamp",
+          },
+          "id": "Kocoln0BYMuJGDsOwDma",
+          "name": "Mock Flight count by destination save to panel",
+          "type": "Visualization",
+        },
+        Object {
+          "data": Object {
+            "date_end": "now",
+            "date_start": "now-15m",
+            "fields": Array [],
+            "name": "Mock Flight count by destination",
+            "objectId": "KIcoln0BYMuJGDsOhDmk",
+            "objectType": "savedVisualization",
+            "query": "source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier",
+            "timestamp": "timestamp",
+          },
+          "id": "KIcoln0BYMuJGDsOhDmk",
+          "name": "Mock Flight count by destination",
+          "type": "Visualization",
+        },
+      ]
+    }
+    loading={false}
+    onChange={[Function]}
+    pagination={
+      Object {
+        "pageIndex": 0,
+        "pageSize": 10,
+        "pageSizeOptions": Array [
+          5,
+          10,
+          20,
+          50,
+        ],
+        "totalItemCount": 2,
+      }
+    }
+    responsive={true}
+    search={
+      Object {
+        "box": Object {
+          "incremental": true,
+        },
+        "filters": Array [
+          Object {
+            "field": "type",
+            "multiSelect": false,
+            "name": "Type",
+            "options": Array [
+              Object {
+                "name": "Visualization",
+                "value": "Visualization",
+                "view": "Visualization",
+              },
+              Object {
+                "name": "Query",
+                "value": "Query",
+                "view": "Query",
+              },
+              Object {
+                "name": "Metric",
+                "value": "Metric",
+                "view": "Metric",
+              },
+            ],
+            "type": "field_value_selection",
+          },
+        ],
+      }
+    }
+    selection={
+      Object {
+        "onSelectionChange": [Function],
+      }
+    }
+    tableLayout="fixed"
+  >
+    <div>
+      <EuiSearchBar
+        box={
+          Object {
+            "incremental": true,
+          }
+        }
+        filters={
+          Array [
+            Object {
+              "field": "type",
+              "multiSelect": false,
+              "name": "Type",
+              "options": Array [
+                Object {
+                  "name": "Visualization",
+                  "value": "Visualization",
+                  "view": "Visualization",
+                },
+                Object {
+                  "name": "Query",
+                  "value": "Query",
+                  "view": "Query",
+                },
+                Object {
+                  "name": "Metric",
+                  "value": "Metric",
+                  "view": "Metric",
+                },
+              ],
+              "type": "field_value_selection",
+            },
+          ]
+        }
+        onChange={[Function]}
+      >
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="m"
+          wrap={true}
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+          >
+            <EuiFlexItem
+              className="euiSearchBar__searchHolder"
+              grow={true}
+            >
+              <div
+                className="euiFlexItem euiSearchBar__searchHolder"
+              >
+                <EuiSearchBox
+                  incremental={true}
+                  isInvalid={false}
+                  onSearch={[Function]}
+                  placeholder="Search..."
+                  query=""
+                >
+                  <EuiFieldSearch
+                    aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                    compressed={false}
+                    defaultValue=""
+                    fullWidth={true}
+                    incremental={true}
+                    inputRef={[Function]}
+                    isClearable={true}
+                    isInvalid={false}
+                    isLoading={false}
+                    onSearch={[Function]}
+                    placeholder="Search..."
+                  >
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={true}
+                      icon="search"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiValidatableControl
+                            isInvalid={false}
+                          >
+                            <input
+                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                              className="euiFieldSearch euiFieldSearch--fullWidth"
+                              defaultValue=""
+                              onKeyUp={[Function]}
+                              placeholder="Search..."
+                              type="search"
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
+                            >
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
+                              >
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                </EuiSearchBox>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              className="euiSearchBar__filtersHolder"
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero euiSearchBar__filtersHolder"
+              >
+                <EuiSearchFilters
+                  filters={
+                    Array [
+                      Object {
+                        "field": "type",
+                        "multiSelect": false,
+                        "name": "Type",
+                        "options": Array [
+                          Object {
+                            "name": "Visualization",
+                            "value": "Visualization",
+                            "view": "Visualization",
+                          },
+                          Object {
+                            "name": "Query",
+                            "value": "Query",
+                            "view": "Query",
+                          },
+                          Object {
+                            "name": "Metric",
+                            "value": "Metric",
+                            "view": "Metric",
+                          },
+                        ],
+                        "type": "field_value_selection",
+                      },
+                    ]
+                  }
+                  onChange={[Function]}
+                  query={
+                    Query {
+                      "ast": _AST {
+                        "_clauses": Array [],
+                        "_indexedClauses": Object {
+                          "field": Object {},
+                          "group": Array [],
+                          "is": Object {},
+                          "term": Array [],
+                        },
+                      },
+                      "syntax": Object {
+                        "parse": [Function],
+                        "print": [Function],
+                        "printClause": [Function],
+                      },
+                      "text": "",
+                    }
+                  }
+                >
+                  <EuiFilterGroup>
+                    <div
+                      className="euiFilterGroup"
+                    >
+                      <FieldValueSelectionFilter
+                        config={
+                          Object {
+                            "field": "type",
+                            "multiSelect": false,
+                            "name": "Type",
+                            "options": Array [
+                              Object {
+                                "name": "Visualization",
+                                "value": "Visualization",
+                                "view": "Visualization",
+                              },
+                              Object {
+                                "name": "Query",
+                                "value": "Query",
+                                "view": "Query",
+                              },
+                              Object {
+                                "name": "Metric",
+                                "value": "Metric",
+                                "view": "Metric",
+                              },
+                            ],
+                            "type": "field_value_selection",
+                          }
+                        }
+                        index={0}
+                        onChange={[Function]}
+                        query={
+                          Query {
+                            "ast": _AST {
+                              "_clauses": Array [],
+                              "_indexedClauses": Object {
+                                "field": Object {},
+                                "group": Array [],
+                                "is": Object {},
+                                "term": Array [],
+                              },
+                            },
+                            "syntax": Object {
+                              "parse": [Function],
+                              "print": [Function],
+                              "printClause": [Function],
+                            },
+                            "text": "",
+                          }
+                        }
+                      >
+                        <EuiPopover
+                          anchorPosition="downCenter"
+                          button={
+                            <EuiFilterButton
+                              grow={true}
+                              hasActiveFilters={false}
+                              iconSide="right"
+                              iconType="arrowDown"
+                              onClick={[Function]}
+                            >
+                              Type
+                            </EuiFilterButton>
+                          }
+                          closePopover={[Function]}
+                          display="inlineBlock"
+                          hasArrow={true}
+                          id="field_value_selection_0"
+                          isOpen={false}
+                          ownFocus={true}
+                          panelClassName="euiFilterGroup__popoverPanel"
+                          panelPaddingSize="none"
+                        >
+                          <div
+                            className="euiPopover euiPopover--anchorDownCenter"
+                            id="field_value_selection_0"
+                          >
+                            <div
+                              className="euiPopover__anchor"
+                            >
+                              <EuiFilterButton
+                                grow={true}
+                                hasActiveFilters={false}
+                                iconSide="right"
+                                iconType="arrowDown"
+                                onClick={[Function]}
+                              >
+                                <EuiButtonEmpty
+                                  className="euiFilterButton euiFilterButton--hasIcon"
+                                  color="text"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  onClick={[Function]}
+                                  textProps={
+                                    Object {
+                                      "className": "",
+                                    }
+                                  }
+                                  type="button"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiButtonContent
+                                      className="euiButtonEmpty__content"
+                                      iconSide="right"
+                                      iconSize="m"
+                                      iconType="arrowDown"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButtonEmpty__text",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                      >
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="m"
+                                          type="arrowDown"
+                                        >
+                                          <EuiIconEmpty
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                            focusable="false"
+                                            role="img"
+                                            style={null}
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            />
+                                          </EuiIconEmpty>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButtonEmpty__text"
+                                        >
+                                          <span
+                                            className="euiFilterButton__textShift"
+                                            data-text="Type"
+                                            title="Type"
+                                          >
+                                            Type
+                                          </span>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonEmpty>
+                              </EuiFilterButton>
+                            </div>
+                          </div>
+                        </EuiPopover>
+                      </FieldValueSelectionFilter>
+                    </div>
+                  </EuiFilterGroup>
+                </EuiSearchFilters>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </EuiSearchBar>
+      <EuiSpacer
+        size="l"
+      >
+        <div
+          className="euiSpacer euiSpacer--l"
+        />
+      </EuiSpacer>
+      <EuiBasicTable
+        columns={
+          Array [
+            Object {
+              "field": "type",
+              "name": "",
+              "render": [Function],
+              "sortable": true,
+              "width": "40px",
+            },
+            Object {
+              "field": "data",
+              "name": "Name",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+              "width": "70%",
+            },
+            Object {
+              "field": "type",
+              "name": "Type",
+            },
+          ]
+        }
+        isSelectable={true}
+        itemId="id"
+        items={
+          Array [
+            Object {
+              "data": Object {
+                "date_end": "now",
+                "date_start": "now-15m",
+                "fields": Array [],
+                "name": "Mock Flight count by destination save to panel",
+                "objectId": "Kocoln0BYMuJGDsOwDma",
+                "objectType": "savedVisualization",
+                "query": "source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier",
+                "timestamp": "timestamp",
+              },
+              "id": "Kocoln0BYMuJGDsOwDma",
+              "name": "Mock Flight count by destination save to panel",
+              "type": "Visualization",
+            },
+            Object {
+              "data": Object {
+                "date_end": "now",
+                "date_start": "now-15m",
+                "fields": Array [],
+                "name": "Mock Flight count by destination",
+                "objectId": "KIcoln0BYMuJGDsOhDmk",
+                "objectType": "savedVisualization",
+                "query": "source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier",
+                "timestamp": "timestamp",
+              },
+              "id": "KIcoln0BYMuJGDsOhDmk",
+              "name": "Mock Flight count by destination",
+              "type": "Visualization",
+            },
+          ]
+        }
+        loading={false}
+        noItemsMessage="No items found"
+        onChange={[Function]}
+        pagination={
+          Object {
+            "hidePerPageOptions": undefined,
+            "pageIndex": 0,
+            "pageSize": 10,
+            "pageSizeOptions": Array [
+              5,
+              10,
+              20,
+              50,
+            ],
+            "totalItemCount": 2,
+          }
+        }
+        responsive={true}
+        selection={
+          Object {
+            "onSelectionChange": [Function],
+          }
+        }
+        tableLayout="fixed"
+      >
+        <div
+          className="euiBasicTable"
+        >
+          <div>
+            <EuiTableHeaderMobile>
+              <div
+                className="euiTableHeaderMobile"
+              >
+                <EuiFlexGroup
+                  alignItems="baseline"
+                  justifyContent="spaceBetween"
+                  responsive={false}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                  >
+                    <EuiFlexItem
+                      grow={false}
+                    >
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <EuiI18n
+                          default="Select all rows"
+                          token="euiBasicTable.selectAllRows"
+                        >
+                          <EuiCheckbox
+                            aria-label="Select all rows"
+                            checked={false}
+                            compressed={false}
+                            disabled={false}
+                            id="_selection_column-checkbox_random_html_id"
+                            indeterminate={false}
+                            label="Select all rows"
+                            onChange={[Function]}
+                          >
+                            <div
+                              className="euiCheckbox"
+                            >
+                              <input
+                                aria-label="Select all rows"
+                                checked={false}
+                                className="euiCheckbox__input"
+                                disabled={false}
+                                id="_selection_column-checkbox_random_html_id"
+                                onChange={[Function]}
+                                type="checkbox"
+                              />
+                              <div
+                                className="euiCheckbox__square"
+                              />
+                              <label
+                                className="euiCheckbox__label"
+                                htmlFor="_selection_column-checkbox_random_html_id"
+                              >
+                                Select all rows
+                              </label>
+                            </div>
+                          </EuiCheckbox>
+                        </EuiI18n>
+                      </div>
+                    </EuiFlexItem>
+                    <EuiFlexItem
+                      grow={false}
+                    >
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      />
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </div>
+            </EuiTableHeaderMobile>
+            <EuiTable
+              id="random_html_id"
+              responsive={true}
+              tableLayout="fixed"
+            >
+              <table
+                className="euiTable euiTable--responsive"
+                id="random_html_id"
+                tabIndex={-1}
+              >
+                <EuiScreenReaderOnly>
+                  <caption
+                    className="euiScreenReaderOnly euiTableCaption"
+                  >
+                    <EuiDelayRender
+                      delay={500}
+                    />
+                  </caption>
+                </EuiScreenReaderOnly>
+                <EuiTableHeader>
+                  <thead>
+                    <tr>
+                      <EuiTableHeaderCellCheckbox
+                        key="_selection_column_h"
+                      >
+                        <th
+                          className="euiTableHeaderCellCheckbox"
+                          scope="col"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableCellContent"
+                          >
+                            <EuiI18n
+                              default="Select all rows"
+                              token="euiBasicTable.selectAllRows"
+                            >
+                              <EuiCheckbox
+                                aria-label="Select all rows"
+                                checked={false}
+                                compressed={false}
+                                data-test-subj="checkboxSelectAll"
+                                disabled={false}
+                                id="_selection_column-checkbox_random_html_id"
+                                indeterminate={false}
+                                label={null}
+                                onChange={[Function]}
+                                type="inList"
+                              >
+                                <div
+                                  className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                >
+                                  <input
+                                    aria-label="Select all rows"
+                                    checked={false}
+                                    className="euiCheckbox__input"
+                                    data-test-subj="checkboxSelectAll"
+                                    disabled={false}
+                                    id="_selection_column-checkbox_random_html_id"
+                                    onChange={[Function]}
+                                    type="checkbox"
+                                  />
+                                  <div
+                                    className="euiCheckbox__square"
+                                  />
+                                </div>
+                              </EuiCheckbox>
+                            </EuiI18n>
+                          </div>
+                        </th>
+                      </EuiTableHeaderCellCheckbox>
+                      <EuiTableHeaderCell
+                        align="left"
+                        data-test-subj="tableHeaderCell_type_0"
+                        key="_data_h_type_0"
+                        width="40px"
+                      >
+                        <td
+                          className="euiTableHeaderCell"
+                          data-test-subj="tableHeaderCell_type_0"
+                          role="columnheader"
+                          scope="col"
+                          style={
+                            Object {
+                              "width": "40px",
+                            }
+                          }
+                        >
+                          <CellContents
+                            className="euiTableCellContent"
+                            showSortMsg={false}
+                          >
+                            <span
+                              className="euiTableCellContent"
+                            >
+                              <EuiInnerText>
+                                <EuiI18n
+                                  default="{innerText}; {description}"
+                                  token="euiTableHeaderCell.titleTextWithDesc"
+                                  values={
+                                    Object {
+                                      "description": undefined,
+                                      "innerText": undefined,
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                  />
+                                </EuiI18n>
+                              </EuiInnerText>
+                            </span>
+                          </CellContents>
+                        </td>
+                      </EuiTableHeaderCell>
+                      <EuiTableHeaderCell
+                        align="left"
+                        data-test-subj="tableHeaderCell_data_1"
+                        key="_data_h_data_1"
+                        width="70%"
+                      >
+                        <th
+                          className="euiTableHeaderCell"
+                          data-test-subj="tableHeaderCell_data_1"
+                          role="columnheader"
+                          scope="col"
+                          style={
+                            Object {
+                              "width": "70%",
+                            }
+                          }
+                        >
+                          <CellContents
+                            className="euiTableCellContent"
+                            showSortMsg={false}
+                          >
+                            <span
+                              className="euiTableCellContent"
+                            >
+                              <EuiInnerText>
+                                <EuiI18n
+                                  default="{innerText}; {description}"
+                                  token="euiTableHeaderCell.titleTextWithDesc"
+                                  values={
+                                    Object {
+                                      "description": undefined,
+                                      "innerText": "Name",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Name"
+                                  >
+                                    Name
+                                  </span>
+                                </EuiI18n>
+                              </EuiInnerText>
+                            </span>
+                          </CellContents>
+                        </th>
+                      </EuiTableHeaderCell>
+                      <EuiTableHeaderCell
+                        align="left"
+                        data-test-subj="tableHeaderCell_type_2"
+                        key="_data_h_type_2"
+                      >
+                        <th
+                          className="euiTableHeaderCell"
+                          data-test-subj="tableHeaderCell_type_2"
+                          role="columnheader"
+                          scope="col"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <CellContents
+                            className="euiTableCellContent"
+                            showSortMsg={false}
+                          >
+                            <span
+                              className="euiTableCellContent"
+                            >
+                              <EuiInnerText>
+                                <EuiI18n
+                                  default="{innerText}; {description}"
+                                  token="euiTableHeaderCell.titleTextWithDesc"
+                                  values={
+                                    Object {
+                                      "description": undefined,
+                                      "innerText": "Type",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiTableCellContent__text"
+                                    title="Type"
+                                  >
+                                    Type
+                                  </span>
+                                </EuiI18n>
+                              </EuiInnerText>
+                            </span>
+                          </CellContents>
+                        </th>
+                      </EuiTableHeaderCell>
+                    </tr>
+                  </thead>
+                </EuiTableHeader>
+                <EuiTableBody
+                  bodyRef={[Function]}
+                >
+                  <tbody>
+                    <EuiTableRow
+                      isSelectable={true}
+                      isSelected={false}
+                    >
+                      <tr
+                        className="euiTableRow euiTableRow-isSelectable"
+                      >
+                        <EuiTableRowCellCheckbox
+                          key="_selection_column_Kocoln0BYMuJGDsOwDma"
+                        >
+                          <td
+                            className="euiTableRowCellCheckbox"
+                          >
+                            <div
+                              className="euiTableCellContent"
+                            >
+                              <EuiI18n
+                                default="Select this row"
+                                token="euiBasicTable.selectThisRow"
+                              >
+                                <EuiCheckbox
+                                  aria-label="Select this row"
+                                  checked={false}
+                                  compressed={false}
+                                  data-test-subj="checkboxSelectRow-Kocoln0BYMuJGDsOwDma"
+                                  disabled={false}
+                                  id="_selection_column_Kocoln0BYMuJGDsOwDma-checkbox"
+                                  indeterminate={false}
+                                  onChange={[Function]}
+                                  title="Select this row"
+                                  type="inList"
+                                >
+                                  <div
+                                    className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                  >
+                                    <input
+                                      aria-label="Select this row"
+                                      checked={false}
+                                      className="euiCheckbox__input"
+                                      data-test-subj="checkboxSelectRow-Kocoln0BYMuJGDsOwDma"
+                                      disabled={false}
+                                      id="_selection_column_Kocoln0BYMuJGDsOwDma-checkbox"
+                                      onChange={[Function]}
+                                      title="Select this row"
+                                      type="checkbox"
+                                    />
+                                    <div
+                                      className="euiCheckbox__square"
+                                    />
+                                  </div>
+                                </EuiCheckbox>
+                              </EuiI18n>
+                            </div>
+                          </td>
+                        </EuiTableRowCellCheckbox>
+                        <EuiTableRowCell
+                          align="left"
+                          key="_data_column_type_Kocoln0BYMuJGDsOwDma_0"
+                          mobileOptions={
+                            Object {
+                              "header": "",
+                              "render": undefined,
+                            }
+                          }
+                          setScopeRow={false}
+                          textOnly={false}
+                          width="40px"
+                        >
+                          <td
+                            className="euiTableRowCell"
+                            style={
+                              Object {
+                                "width": "40px",
+                              }
+                            }
+                          >
+                            <div
+                              className="euiTableCellContent euiTableCellContent--overflowingContent"
+                            >
+                              <div
+                                className=""
+                                key=".0"
+                              >
+                                <EuiIcon
+                                  size="m"
+                                  type="visBarVerticalStacked"
+                                >
+                                  <EuiIconEmpty
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                    focusable="false"
+                                    role="img"
+                                    style={null}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium 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>
+                              </div>
+                            </div>
+                          </td>
+                        </EuiTableRowCell>
+                        <EuiTableRowCell
+                          align="left"
+                          key="_data_column_data_Kocoln0BYMuJGDsOwDma_1"
+                          mobileOptions={
+                            Object {
+                              "header": "Name",
+                              "render": undefined,
+                            }
+                          }
+                          setScopeRow={false}
+                          textOnly={false}
+                          truncateText={true}
+                          width="70%"
+                        >
+                          <td
+                            className="euiTableRowCell"
+                            style={
+                              Object {
+                                "width": "70%",
+                              }
+                            }
+                          >
+                            <div
+                              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                            >
+                              Name
+                            </div>
+                            <div
+                              className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                            >
+                              <EuiLink
+                                className=""
+                                data-test-subj="eventHome__savedQueryTableName"
+                                key=".0"
+                                onClick={[Function]}
+                              >
+                                <button
+                                  className="euiLink euiLink--primary"
+                                  data-test-subj="eventHome__savedQueryTableName"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  Mock Flight count by destination save to panel
+                                </button>
+                              </EuiLink>
+                            </div>
+                          </td>
+                        </EuiTableRowCell>
+                        <EuiTableRowCell
+                          align="left"
+                          key="_data_column_type_Kocoln0BYMuJGDsOwDma_2"
+                          mobileOptions={
+                            Object {
+                              "header": "Type",
+                              "render": undefined,
+                            }
+                          }
+                          setScopeRow={false}
+                          textOnly={true}
+                        >
+                          <td
+                            className="euiTableRowCell"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <div
+                              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                            >
+                              Type
+                            </div>
+                            <div
+                              className="euiTableCellContent"
+                            >
+                              <span
+                                className="euiTableCellContent__text"
+                              >
+                                Visualization
+                              </span>
+                            </div>
+                          </td>
+                        </EuiTableRowCell>
+                      </tr>
+                    </EuiTableRow>
+                    <EuiTableRow
+                      isSelectable={true}
+                      isSelected={false}
+                    >
+                      <tr
+                        className="euiTableRow euiTableRow-isSelectable"
+                      >
+                        <EuiTableRowCellCheckbox
+                          key="_selection_column_KIcoln0BYMuJGDsOhDmk"
+                        >
+                          <td
+                            className="euiTableRowCellCheckbox"
+                          >
+                            <div
+                              className="euiTableCellContent"
+                            >
+                              <EuiI18n
+                                default="Select this row"
+                                token="euiBasicTable.selectThisRow"
+                              >
+                                <EuiCheckbox
+                                  aria-label="Select this row"
+                                  checked={false}
+                                  compressed={false}
+                                  data-test-subj="checkboxSelectRow-KIcoln0BYMuJGDsOhDmk"
+                                  disabled={false}
+                                  id="_selection_column_KIcoln0BYMuJGDsOhDmk-checkbox"
+                                  indeterminate={false}
+                                  onChange={[Function]}
+                                  title="Select this row"
+                                  type="inList"
+                                >
+                                  <div
+                                    className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                                  >
+                                    <input
+                                      aria-label="Select this row"
+                                      checked={false}
+                                      className="euiCheckbox__input"
+                                      data-test-subj="checkboxSelectRow-KIcoln0BYMuJGDsOhDmk"
+                                      disabled={false}
+                                      id="_selection_column_KIcoln0BYMuJGDsOhDmk-checkbox"
+                                      onChange={[Function]}
+                                      title="Select this row"
+                                      type="checkbox"
+                                    />
+                                    <div
+                                      className="euiCheckbox__square"
+                                    />
+                                  </div>
+                                </EuiCheckbox>
+                              </EuiI18n>
+                            </div>
+                          </td>
+                        </EuiTableRowCellCheckbox>
+                        <EuiTableRowCell
+                          align="left"
+                          key="_data_column_type_KIcoln0BYMuJGDsOhDmk_0"
+                          mobileOptions={
+                            Object {
+                              "header": "",
+                              "render": undefined,
+                            }
+                          }
+                          setScopeRow={false}
+                          textOnly={false}
+                          width="40px"
+                        >
+                          <td
+                            className="euiTableRowCell"
+                            style={
+                              Object {
+                                "width": "40px",
+                              }
+                            }
+                          >
+                            <div
+                              className="euiTableCellContent euiTableCellContent--overflowingContent"
+                            >
+                              <div
+                                className=""
+                                key=".0"
+                              >
+                                <EuiIcon
+                                  size="m"
+                                  type="visBarVerticalStacked"
+                                >
+                                  <EuiIconEmpty
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                    focusable="false"
+                                    role="img"
+                                    style={null}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium 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>
+                              </div>
+                            </div>
+                          </td>
+                        </EuiTableRowCell>
+                        <EuiTableRowCell
+                          align="left"
+                          key="_data_column_data_KIcoln0BYMuJGDsOhDmk_1"
+                          mobileOptions={
+                            Object {
+                              "header": "Name",
+                              "render": undefined,
+                            }
+                          }
+                          setScopeRow={false}
+                          textOnly={false}
+                          truncateText={true}
+                          width="70%"
+                        >
+                          <td
+                            className="euiTableRowCell"
+                            style={
+                              Object {
+                                "width": "70%",
+                              }
+                            }
+                          >
+                            <div
+                              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                            >
+                              Name
+                            </div>
+                            <div
+                              className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                            >
+                              <EuiLink
+                                className=""
+                                data-test-subj="eventHome__savedQueryTableName"
+                                key=".0"
+                                onClick={[Function]}
+                              >
+                                <button
+                                  className="euiLink euiLink--primary"
+                                  data-test-subj="eventHome__savedQueryTableName"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  Mock Flight count by destination
+                                </button>
+                              </EuiLink>
+                            </div>
+                          </td>
+                        </EuiTableRowCell>
+                        <EuiTableRowCell
+                          align="left"
+                          key="_data_column_type_KIcoln0BYMuJGDsOhDmk_2"
+                          mobileOptions={
+                            Object {
+                              "header": "Type",
+                              "render": undefined,
+                            }
+                          }
+                          setScopeRow={false}
+                          textOnly={true}
+                        >
+                          <td
+                            className="euiTableRowCell"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <div
+                              className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                            >
+                              Type
+                            </div>
+                            <div
+                              className="euiTableCellContent"
+                            >
+                              <span
+                                className="euiTableCellContent__text"
+                              >
+                                Visualization
+                              </span>
+                            </div>
+                          </td>
+                        </EuiTableRowCell>
+                      </tr>
+                    </EuiTableRow>
+                  </tbody>
+                </EuiTableBody>
+              </table>
+            </EuiTable>
+          </div>
+          <PaginationBar
+            aria-controls="random_html_id"
+            onPageChange={[Function]}
+            onPageSizeChange={[Function]}
+            pagination={
+              Object {
+                "hidePerPageOptions": undefined,
+                "pageIndex": 0,
+                "pageSize": 10,
+                "pageSizeOptions": Array [
+                  5,
+                  10,
+                  20,
+                  50,
+                ],
+                "totalItemCount": 2,
+              }
+            }
+          >
+            <div>
+              <EuiSpacer
+                size="m"
+              >
+                <div
+                  className="euiSpacer euiSpacer--m"
+                />
+              </EuiSpacer>
+              <EuiTablePagination
+                activePage={0}
+                aria-controls="random_html_id"
+                itemsPerPage={10}
+                itemsPerPageOptions={
+                  Array [
+                    5,
+                    10,
+                    20,
+                    50,
+                  ]
+                }
+                onChangeItemsPerPage={[Function]}
+                onChangePage={[Function]}
+                pageCount={1}
+              >
+                <EuiFlexGroup
+                  alignItems="center"
+                  justifyContent="spaceBetween"
+                  responsive={false}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                  >
+                    <EuiFlexItem
+                      grow={false}
+                    >
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <EuiPopover
+                          anchorPosition="upRight"
+                          button={
+                            <EuiButtonEmpty
+                              color="text"
+                              data-test-subj="tablePaginationPopoverButton"
+                              iconSide="right"
+                              iconType="arrowDown"
+                              onClick={[Function]}
+                              size="xs"
+                            >
+                              <EuiI18n
+                                default="Rows per page"
+                                token="euiTablePagination.rowsPerPage"
+                              />
+                              : 
+                              10
+                            </EuiButtonEmpty>
+                          }
+                          closePopover={[Function]}
+                          display="inlineBlock"
+                          hasArrow={true}
+                          isOpen={false}
+                          ownFocus={true}
+                          panelPaddingSize="none"
+                        >
+                          <div
+                            className="euiPopover euiPopover--anchorUpRight"
+                          >
+                            <div
+                              className="euiPopover__anchor"
+                            >
+                              <EuiButtonEmpty
+                                color="text"
+                                data-test-subj="tablePaginationPopoverButton"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                onClick={[Function]}
+                                size="xs"
+                              >
+                                <button
+                                  className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                                  data-test-subj="tablePaginationPopoverButton"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <EuiButtonContent
+                                    className="euiButtonEmpty__content"
+                                    iconSide="right"
+                                    iconSize="s"
+                                    iconType="arrowDown"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButtonEmpty__text",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                    >
+                                      <EuiIcon
+                                        className="euiButtonContent__icon"
+                                        color="inherit"
+                                        size="s"
+                                        type="arrowDown"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                      <span
+                                        className="euiButtonEmpty__text"
+                                      >
+                                        <EuiI18n
+                                          default="Rows per page"
+                                          token="euiTablePagination.rowsPerPage"
+                                        >
+                                          Rows per page
+                                        </EuiI18n>
+                                        : 
+                                        10
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </button>
+                              </EuiButtonEmpty>
+                            </div>
+                          </div>
+                        </EuiPopover>
+                      </div>
+                    </EuiFlexItem>
+                    <EuiFlexItem
+                      grow={false}
+                    >
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <EuiPagination
+                          activePage={0}
+                          aria-controls="random_html_id"
+                          onPageClick={[Function]}
+                          pageCount={1}
+                        >
+                          <nav
+                            className="euiPagination"
+                          >
+                            <EuiI18n
+                              default="Previous page, {page}"
+                              token="euiPagination.previousPage"
+                              values={
+                                Object {
+                                  "page": 0,
+                                }
+                              }
+                            >
+                              <EuiI18n
+                                default="Previous page"
+                                token="euiPagination.disabledPreviousPage"
+                              >
+                                <EuiButtonIcon
+                                  aria-label="Previous page"
+                                  color="text"
+                                  data-test-subj="pagination-button-previous"
+                                  disabled={true}
+                                  iconType="arrowLeft"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    aria-label="Previous page"
+                                    className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                    data-test-subj="pagination-button-previous"
+                                    disabled={true}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiButtonIcon__icon"
+                                      color="inherit"
+                                      size="m"
+                                      type="arrowLeft"
+                                    >
+                                      <EuiIconEmpty
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                        focusable="false"
+                                        role="img"
+                                        style={null}
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          height={16}
+                                          role="img"
+                                          style={null}
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        />
+                                      </EuiIconEmpty>
+                                    </EuiIcon>
+                                  </button>
+                                </EuiButtonIcon>
+                              </EuiI18n>
+                            </EuiI18n>
+                            <ul
+                              className="euiPagination__list"
+                            >
+                              <PaginationButton
+                                key="0"
+                                pageIndex={0}
+                              >
+                                <li
+                                  className="euiPagination__item"
+                                >
+                                  <EuiPaginationButton
+                                    aria-controls="random_html_id"
+                                    hideOnMobile={true}
+                                    isActive={true}
+                                    onClick={[Function]}
+                                    pageIndex={0}
+                                    totalPages={1}
+                                  >
+                                    <EuiI18n
+                                      default="Page {page} of {totalPages}"
+                                      token="euiPaginationButton.longPageString"
+                                      values={
+                                        Object {
+                                          "page": 1,
+                                          "totalPages": 1,
+                                        }
+                                      }
+                                    >
+                                      <EuiI18n
+                                        default="Page {page}"
+                                        token="euiPaginationButton.shortPageString"
+                                        values={
+                                          Object {
+                                            "page": 1,
+                                          }
+                                        }
+                                      >
+                                        <EuiButtonEmpty
+                                          aria-controls="random_html_id"
+                                          aria-current={true}
+                                          aria-label="Page 1 of 1"
+                                          className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                          color="text"
+                                          data-test-subj="pagination-button-0"
+                                          href="#random_html_id"
+                                          isDisabled={true}
+                                          onClick={[Function]}
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-controls="random_html_id"
+                                            aria-current={true}
+                                            aria-label="Page 1 of 1"
+                                            className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                            data-test-subj="pagination-button-0"
+                                            disabled={true}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiButtonContent
+                                              className="euiButtonEmpty__content"
+                                              iconSide="left"
+                                              iconSize="m"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiButtonEmpty__text",
+                                                }
+                                              }
+                                            >
+                                              <span
+                                                className="euiButtonContent euiButtonEmpty__content"
+                                              >
+                                                <span
+                                                  className="euiButtonEmpty__text"
+                                                >
+                                                  1
+                                                </span>
+                                              </span>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonEmpty>
+                                      </EuiI18n>
+                                    </EuiI18n>
+                                  </EuiPaginationButton>
+                                </li>
+                              </PaginationButton>
+                            </ul>
+                            <EuiI18n
+                              default="Next page, {page}"
+                              token="euiPagination.nextPage"
+                              values={
+                                Object {
+                                  "page": 2,
+                                }
+                              }
+                            >
+                              <EuiI18n
+                                default="Next page"
+                                token="euiPagination.disabledNextPage"
+                              >
+                                <EuiButtonIcon
+                                  aria-label="Next page"
+                                  color="text"
+                                  data-test-subj="pagination-button-next"
+                                  disabled={true}
+                                  iconType="arrowRight"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    aria-label="Next page"
+                                    className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                    data-test-subj="pagination-button-next"
+                                    disabled={true}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiButtonIcon__icon"
+                                      color="inherit"
+                                      size="m"
+                                      type="arrowRight"
+                                    >
+                                      <EuiIconEmpty
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                        focusable="false"
+                                        role="img"
+                                        style={null}
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          height={16}
+                                          role="img"
+                                          style={null}
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        />
+                                      </EuiIconEmpty>
+                                    </EuiIcon>
+                                  </button>
+                                </EuiButtonIcon>
+                              </EuiI18n>
+                            </EuiI18n>
+                          </nav>
+                        </EuiPagination>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiTablePagination>
+            </div>
+          </PaginationBar>
+        </div>
+      </EuiBasicTable>
+    </div>
+  </EuiInMemoryTable>
+</SavedQueryTable>
+`;
diff --git a/public/components/event_analytics/home/__tests__/saved_query_table.test.tsx b/public/components/event_analytics/home/__tests__/saved_query_table.test.tsx
new file mode 100644
index 0000000000..e761210164
--- /dev/null
+++ b/public/components/event_analytics/home/__tests__/saved_query_table.test.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { SavedQueryTable } from '../saved_objects_table';
+import { SAVED_HISTORIES } from '../../../../../test/event_analytics_constants';
+
+describe('Saved query table component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders saved query table', async () => {
+    const handleHistoryClick = jest.fn();
+    const handleSelectHistory = jest.fn();
+    
+    const wrapper = mount(
+      <SavedQueryTable
+        savedHistories={SAVED_HISTORIES}
+        handleHistoryClick={handleHistoryClick}
+        handleSelectHistory={handleSelectHistory}
+        isTableLoading={false}
+      />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/event_analytics/home/home.scss b/public/components/event_analytics/home/home.scss
new file mode 100644
index 0000000000..bc4d8f66d0
--- /dev/null
+++ b/public/components/event_analytics/home/home.scss
@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.event-home {
+  float: left;
+  width: 100%;
+  max-width: 1130px;
+  #autocomplete-textarea {
+    min-height: 80px;
+  }
+  .ppl-link {
+    right: 5px;
+  }
+}
+
+#home-his-title {
+  padding-left: 10px;
+}
\ No newline at end of file
diff --git a/public/components/event_analytics/home/home.tsx b/public/components/event_analytics/home/home.tsx
new file mode 100644
index 0000000000..1de183f492
--- /dev/null
+++ b/public/components/event_analytics/home/home.tsx
@@ -0,0 +1,474 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './home.scss';
+
+import React, { useState, ReactElement, useRef, useEffect } from 'react';
+import { useDispatch, batch, useSelector } from 'react-redux';
+import { uniqueId } from 'lodash';
+import { useHistory } from 'react-router-dom';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+  EuiPageContent,
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiPopover,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+  EuiOverlayMask,
+  EuiLink,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiText,
+  EuiHorizontalRule,
+} from '@elastic/eui';
+import { DeleteModal } from '../../common/helpers/delete_modal';
+import { Search } from '../../common/search/search';
+import {
+  RAW_QUERY,
+  TAB_ID_TXT_PFX,
+  SELECTED_DATE_RANGE,
+  EVENT_ANALYTICS_DOCUMENTATION_URL,
+  TAB_CREATED_TYPE,
+  NEW_TAB,
+  REDIRECT_TAB,
+} from '../../../../common/constants/explorer';
+import {
+  OBSERVABILITY_BASE,
+  EVENT_ANALYTICS,
+  SAVED_OBJECTS,
+} from '../../../../common/constants/shared';
+import { EmptyTabParams, SavedQueryRes, SavedVizRes } from '../../../../common/types/explorer';
+import { HttpStart } from '../../../../../../src/core/public';
+import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects';
+import { addTab, selectQueryTabs } from '../redux/slices/query_tab_slice';
+import { init as initFields } from '../redux/slices/field_slice';
+import { init as initQuery, changeQuery } from '../redux/slices/query_slice';
+import { init as initQueryResult, selectQueryResult } from '../redux/slices/query_result_slice';
+import { init as initPatterns } from '../redux/slices/patterns_slice';
+import { SavedQueryTable } from './saved_objects_table';
+import { selectQueries } from '../redux/slices/query_slice';
+import { setSelectedQueryTab } from '../redux/slices/query_tab_slice';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
+import { getSampleDataModal } from '../../common/helpers/add_sample_modal';
+import { parseGetSuggestions, onItemSelect } from '../../common/search/autocomplete_logic';
+
+interface IHomeProps {
+  pplService: any;
+  dslService: any;
+  savedObjects: SavedObjects;
+  setToast: (
+    title: string,
+    color?: string,
+    text?: React.ReactChild | undefined,
+    side?: string | undefined
+  ) => void;
+  getExistingEmptyTab: (params: EmptyTabParams) => string;
+  http: HttpStart;
+}
+
+export const Home = (props: IHomeProps) => {
+  const { pplService, dslService, savedObjects, setToast, getExistingEmptyTab, http } = props;
+  const history = useHistory();
+  const dispatch = useDispatch();
+
+  const queries = useSelector(selectQueries);
+  const explorerData = useSelector(selectQueryResult);
+  const tabIds = useSelector(selectQueryTabs).queryTabIds;
+  const queryRef = useRef();
+  const tabIdsRef = useRef();
+  const explorerDataRef = useRef();
+  queryRef.current = queries;
+  tabIdsRef.current = tabIds;
+  explorerDataRef.current = explorerData;
+
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [selectedDateRange, setSelectedDateRange] = useState<string[]>(['now-15m', 'now']);
+  const [savedHistories, setSavedHistories] = useState<any[]>([]);
+  const [selectedHistories, setSelectedHistories] = useState<any[]>([]);
+  const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
+  const [isTableLoading, setIsTableLoading] = useState(false);
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const selectedDateRangeRef = useRef();
+  selectedDateRangeRef.current = selectedDateRange;
+
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const fetchHistories = async () => {
+    const res = await savedObjects.fetchSavedObjects({
+      objectType: ['savedQuery', 'savedVisualization'],
+      sortOrder: 'desc',
+      fromIndex: 0,
+    });
+    const nonAppObjects = res.observabilityObjectList.filter(
+      (object: SavedQueryRes | SavedVizRes) =>
+        (object.savedVisualization && !object.savedVisualization.application_id) ||
+        object.savedQuery
+    );
+    setSavedHistories(nonAppObjects);
+  };
+
+  const deleteHistoryList = async () => {
+    const objectIdsToDelete = selectedHistories.map((history) => history.data.objectId);
+    await savedObjects
+      .deleteSavedObjectsList({ objectIdList: objectIdsToDelete })
+      .then(async (res) => {
+        setSavedHistories((staleHistories) => {
+          return staleHistories.filter((his) => {
+            return !objectIdsToDelete.includes(his.objectId);
+          });
+        });
+        setToast(`Histories has been successfully deleted.`, 'success');
+      })
+      .catch((error) => {
+        setToast(`Cannot delete Histories, error: ${error.message}`, 'danger');
+      })
+      .finally(() => {
+        closeModal();
+      });
+  };
+
+  const addNewTab = async () => {
+    // get a new tabId
+    const tabId = uniqueId(TAB_ID_TXT_PFX);
+
+    // create a new tab
+    await batch(() => {
+      dispatch(initQuery({ tabId }));
+      dispatch(initQueryResult({ tabId }));
+      dispatch(initFields({ tabId }));
+      dispatch(addTab({ tabId }));
+      dispatch(initPatterns({ tabId }));
+    });
+
+    return tabId;
+  };
+
+  useEffect(() => {
+    fetchHistories();
+  }, []);
+
+  const dispatchInitialData = (tabId: string) => {
+    batch(() => {
+      dispatch(
+        changeQuery({
+          tabId,
+          query: {
+            [RAW_QUERY]: searchQuery,
+            [SELECTED_DATE_RANGE]: selectedDateRangeRef.current,
+            [TAB_CREATED_TYPE]: NEW_TAB,
+          },
+        })
+      );
+      dispatch(setSelectedQueryTab({ tabId }));
+    });
+  };
+
+  const handleQuerySearch = async () => {
+    const emptyTabId = getExistingEmptyTab({
+      tabIds: tabIdsRef.current,
+      queries: queryRef.current,
+      explorerData: explorerDataRef.current,
+    });
+    const newTabId = emptyTabId ? emptyTabId : await addNewTab();
+
+    // update this new tab with data
+    await dispatchInitialData(newTabId);
+
+    // redirect to explorer
+    history.push('/event_analytics/explorer');
+  };
+
+  const handleQueryChange = async (query: string) => setSearchQuery(query);
+
+  const handleTimePickerChange = async (timeRange: string[]) => setSelectedDateRange(timeRange);
+
+  const handleHistoryClick = async (objectId: string) => {
+    const emptyTabId = getExistingEmptyTab({
+      tabIds: tabIdsRef.current,
+      queries: queryRef.current,
+      explorerData: explorerDataRef.current,
+    });
+    const newTabId = emptyTabId ? emptyTabId : await addNewTab();
+    batch(() => {
+      dispatch(
+        changeQuery({
+          tabId: newTabId,
+          query: {
+            [TAB_CREATED_TYPE]: REDIRECT_TAB,
+          },
+        })
+      );
+      dispatch(setSelectedQueryTab({ tabId: newTabId }));
+    });
+    // redirect to explorer
+    history.push(`/event_analytics/explorer/${objectId}`);
+  };
+
+  const addSampledata = async () => {
+    setModalLayout(
+      getSampleDataModal(closeModal, async () => {
+        closeModal();
+        await addSampleEvents();
+      })
+    );
+    showModal();
+  };
+
+  const addSampleEvents = async () => {
+    try {
+      setIsTableLoading(true);
+      const flights = await http
+        .get('../api/saved_objects/_find', {
+          query: {
+            type: 'index-pattern',
+            search_fields: 'title',
+            search: 'opensearch_dashboards_sample_data_flights',
+          },
+        })
+        .then((resp: any) => resp.total === 0);
+      const logs = await http
+        .get('../api/saved_objects/_find', {
+          query: {
+            type: 'index-pattern',
+            search_fields: 'title',
+            search: 'opensearch_dashboards_sample_data_logs',
+          },
+        })
+        .then((resp: any) => resp.total === 0);
+      if (flights || logs) setToast('Adding sample data. This can take some time.');
+      await Promise.all([
+        flights ? http.post('../api/sample_data/flights') : Promise.resolve(),
+        logs ? http.post('../api/sample_data/logs') : Promise.resolve(),
+      ]);
+
+      await http
+        .get(
+          `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/addSampleSavedObjects/event_analytics`
+        )
+        .then(async (resp: any) => {
+          await http.post(`${CUSTOM_PANELS_API_PREFIX}/panels/addSamplePanels`, {
+            body: JSON.stringify({
+              savedVisualizationIds: [...resp?.savedVizIds],
+            }),
+          });
+
+          const res = await savedObjects.fetchSavedObjects({
+            objectIdList: [...resp?.savedVizIds, ...resp?.savedQueryIds] || [],
+            objectType: ['savedQuery', 'savedVisualization'],
+            sortOrder: 'desc',
+            fromIndex: 0,
+          });
+          setSavedHistories((staleHistoryList) => {
+            return [...res.observabilityObjectList, ...staleHistoryList];
+          });
+        });
+      setToast(`Sample events added successfully.`);
+    } catch (error: any) {
+      setToast(`Cannot add sample events data, error: ${error}`, 'danger');
+      console.error(error.body.message);
+    } finally {
+      setIsTableLoading(false);
+    }
+  };
+
+  const popoverButton = (
+    <EuiButton
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={() => setIsActionsPopoverOpen(!isActionsPopoverOpen)}
+      data-test-subj="eventHomeAction"
+    >
+      Actions
+    </EuiButton>
+  );
+
+  const deleteHistory = () => {
+    const customPanelString = `${selectedHistories.length > 1 ? 'histories' : 'history'}`;
+    setModalLayout(
+      <DeleteModal
+        onConfirm={deleteHistoryList}
+        onCancel={closeModal}
+        title={`Delete ${selectedHistories.length} ${customPanelString}`}
+        message={`Are you sure you want to delete the selected ${selectedHistories.length} ${customPanelString}?`}
+      />
+    );
+    showModal();
+  };
+
+  const popoverItems: ReactElement[] = [
+    <EuiContextMenuItem
+      key="delete"
+      disabled={savedHistories.length === 0 || selectedHistories.length === 0}
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        deleteHistory();
+      }}
+      data-test-subj="eventHomeAction__delete"
+    >
+      Delete
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="redirect"
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        history.push(`/event_analytics/explorer`);
+      }}
+      data-test-subj="eventHomeAction__explorer"
+    >
+      Event Explorer
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="addSample"
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        addSampledata();
+      }}
+      data-test-subj="eventHomeAction__addSamples"
+    >
+      Add samples
+    </EuiContextMenuItem>,
+  ];
+
+  return (
+    <>
+      <EuiPage>
+        <EuiPageBody>
+          <EuiPageHeader>
+            <EuiPageHeaderSection>
+              <EuiTitle data-test-subj="eventHomePageTitle" size="l">
+                <h1>Event analytics</h1>
+              </EuiTitle>
+            </EuiPageHeaderSection>
+          </EuiPageHeader>
+          <EuiPageContent className="event-home">
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem>
+                <Search
+                  query={queryRef.current![RAW_QUERY]}
+                  tempQuery={searchQuery}
+                  handleQueryChange={handleQueryChange}
+                  handleQuerySearch={handleQuerySearch}
+                  handleTimePickerChange={handleTimePickerChange}
+                  handleTimeRangePickerRefresh={handleQuerySearch}
+                  pplService={pplService}
+                  dslService={dslService}
+                  startTime={selectedDateRange[0]}
+                  endTime={selectedDateRange[1]}
+                  setStartTime={() => {}}
+                  setEndTime={() => {}}
+                  showSaveButton={false}
+                  runButtonText="New Query"
+                  getSuggestions={parseGetSuggestions}
+                  onItemSelect={onItemSelect}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="m" />
+          </EuiPageContent>
+          <EuiSpacer size="m" />
+          <EuiPageContent className="event-home">
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="s">
+                  <h3>
+                    Queries and Visualizations
+                    <span className="panel-header-count"> ({savedHistories.length})</span>
+                  </h3>
+                </EuiTitle>
+                <EuiSpacer size="s" />
+                <EuiText size="s" color="subdued">
+                  Use Events Analytics to monitor, correlate, analyze and visualize machine
+                  generated data through Piped Processing Language. Save frequently searched queries
+                  and visualizations for quick access{' '}
+                  <EuiLink external={true} href={EVENT_ANALYTICS_DOCUMENTATION_URL} target="blank">
+                    Learn more
+                  </EuiLink>
+                </EuiText>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup gutterSize="s">
+                  <EuiFlexItem>
+                    <EuiPopover
+                      panelPaddingSize="none"
+                      button={popoverButton}
+                      isOpen={isActionsPopoverOpen}
+                      closePopover={() => setIsActionsPopoverOpen(false)}
+                    >
+                      <EuiContextMenuPanel items={popoverItems} />
+                    </EuiPopover>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+            <EuiHorizontalRule margin="m" />
+            <EuiFlexGroup>
+              <EuiFlexItem grow={true}>
+                {savedHistories.length > 0 ? (
+                  <SavedQueryTable
+                    savedHistories={savedHistories}
+                    handleHistoryClick={handleHistoryClick}
+                    isTableLoading={isTableLoading}
+                    handleSelectHistory={setSelectedHistories}
+                    selectedHistories={selectedHistories}
+                  />
+                ) : (
+                  <>
+                    <EuiSpacer size="xxl" />
+                    <EuiText textAlign="center">
+                      <h2>No Queries or Visualizations</h2>
+                      <EuiSpacer size="m" />
+                      <EuiText color="subdued">
+                        Use events analytics to create and save frequently searched
+                        <br />
+                        queries and visualizations, using PPL.
+                      </EuiText>
+                    </EuiText>
+                    <EuiSpacer size="m" />
+                    <EuiFlexGroup justifyContent="center">
+                      <EuiFlexItem grow={false}>
+                        <EuiButton
+                          fullWidth={false}
+                          onClick={() => history.push(`/event_analytics/explorer`)}
+                          data-test-subj="actionEventExplorer"
+                        >
+                          Event Explorer
+                        </EuiButton>
+                      </EuiFlexItem>
+                      <EuiFlexItem grow={false}>
+                        <EuiButton
+                          fullWidth={false}
+                          onClick={() => addSampledata()}
+                          data-test-subj="actionAddSamples"
+                        >
+                          Add samples
+                        </EuiButton>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                    <EuiSpacer size="xxl" />
+                  </>
+                )}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+      {isModalVisible && modalLayout}
+    </>
+  );
+};
diff --git a/public/components/event_analytics/home/saved_objects_table.tsx b/public/components/event_analytics/home/saved_objects_table.tsx
new file mode 100644
index 0000000000..afe00992fb
--- /dev/null
+++ b/public/components/event_analytics/home/saved_objects_table.tsx
@@ -0,0 +1,159 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useRef } from 'react';
+import { EuiLink, EuiInMemoryTable, EuiIcon } from '@elastic/eui';
+import { FILTER_OPTIONS } from '../../../../common/constants/explorer';
+import { isEmpty } from 'lodash';
+
+interface savedQueryTableProps {
+  savedHistories: Array<any>;
+  handleHistoryClick: (objectId: string) => void;
+  handleSelectHistory: (selectedHistories: Array<any>) => void;
+  isTableLoading: boolean;
+  selectedHistories: Array<History>;
+}
+
+export function SavedQueryTable({
+  savedHistories,
+  handleHistoryClick,
+  handleSelectHistory,
+  isTableLoading,
+}: savedQueryTableProps) {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const pageIndexRef = useRef<number>();
+  pageIndexRef.current = pageIndex;
+  const pageSizeRef = useRef<number>();
+  pageSizeRef.current = pageSize;
+
+  const onTableChange = ({ page = {} }) => {
+    const { index: pageIndex, size: pageSize } = page;
+
+    setPageIndex(pageIndex);
+    setPageSize(pageSize);
+  };
+
+  const columns = [
+    {
+      field: 'type',
+      name: '',
+      sortable: true,
+      width: '40px',
+      render: (item: any) => {
+        if (item == 'Visualization') {
+          return (
+            <div>
+              <EuiIcon type="visBarVerticalStacked" size="m" />
+            </div>
+          );
+        } else {
+          return (
+            <div>
+              <EuiIcon type="discoverApp" size="m" />
+            </div>
+          );
+        }
+      },
+    },
+    {
+      field: 'data',
+      name: 'Name',
+      width: '70%',
+      sortable: true,
+      truncateText: true,
+      render: (item: any) => {
+        return (
+          <EuiLink
+            onClick={() => {
+              handleHistoryClick(item.objectId);
+            }}
+            data-test-subj="eventHome__savedQueryTableName"
+          >
+            {item.name}
+          </EuiLink>
+        );
+      },
+    },
+    {
+      field: 'type',
+      name: 'Type',
+    },
+  ];
+
+  const histories = savedHistories.map((h) => {
+    const isSavedVisualization = h.hasOwnProperty('savedVisualization');
+    const savedObject = isSavedVisualization ? h.savedVisualization : h.savedQuery;
+    const curType = isSavedVisualization ? 'savedVisualization' : 'savedQuery';
+    var subType = '';
+    if (isSavedVisualization) {
+      if (savedObject?.sub_type === 'metric') {
+        subType = 'Metric'
+      } else {
+        subType = savedObject?.sub_type;
+      }
+    }
+    const record = {
+      objectId: h.objectId,
+      objectType: curType,
+      name: savedObject.name,
+      query: savedObject.query,
+      date_start: savedObject.selected_date_range.start,
+      date_end: savedObject.selected_date_range.end,
+      timestamp: savedObject.selected_timestamp?.name,
+      fields: savedObject.selected_fields?.tokens || [],
+    };
+    return {
+      id: h.objectId,
+      data: record,
+      name: savedObject.name,
+      type: isSavedVisualization ? (!isEmpty(subType)) ? subType: 'Visualization' : 'Query',
+    };
+  });
+
+  const search = {
+    box: {
+      incremental: true,
+    },
+    filters: [
+      {
+        type: 'field_value_selection',
+        field: 'type',
+        name: 'Type',
+        multiSelect: false,
+        options: FILTER_OPTIONS.map((i) => ({
+          value: i,
+          name: i,
+          view: i,
+        })),
+      },
+    ],
+  };
+
+  const pagination = {
+    pageIndex,
+    pageSize,
+    totalItemCount: histories.length,
+    pageSizeOptions: [5, 10, 20, 50],
+  };
+
+  return (
+    <EuiInMemoryTable
+      itemId="id"
+      loading={isTableLoading}
+      items={histories}
+      columns={columns}
+      pagination={pagination}
+      onChange={onTableChange}
+      search={search}
+      isSelectable={true}
+      selection={{
+        onSelectionChange: (selectedHistories) => {
+          handleSelectHistory(selectedHistories);
+        },
+      }}
+    />
+  );
+}
diff --git a/public/components/event_analytics/hooks/index.ts b/public/components/event_analytics/hooks/index.ts
new file mode 100644
index 0000000000..aa6204c9e9
--- /dev/null
+++ b/public/components/event_analytics/hooks/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { useFetchEvents } from './use_fetch_events';
+export { useFetchPatterns } from './use_fetch_patterns';
+export { useFetchVisualizations } from './use_fetch_visualizations';
+export { useRenderVisualization } from './use_render_visualizations';
+export { TabContext } from './use_tab_context';
diff --git a/public/components/event_analytics/hooks/use_fetch_events.ts b/public/components/event_analytics/hooks/use_fetch_events.ts
new file mode 100644
index 0000000000..4bab880845
--- /dev/null
+++ b/public/components/event_analytics/hooks/use_fetch_events.ts
@@ -0,0 +1,218 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useRef } from 'react';
+import { batch } from 'react-redux';
+import { isEmpty } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
+import { IField } from 'common/types/explorer';
+import {
+  FINAL_QUERY,
+  SELECTED_FIELDS,
+  UNSELECTED_FIELDS,
+  AVAILABLE_FIELDS,
+  QUERIED_FIELDS,
+} from '../../../../common/constants/explorer';
+import { fetchSuccess, reset as queryResultReset } from '../redux/slices/query_result_slice';
+import { reset as patternsReset } from '../redux/slices/patterns_slice';
+import { selectQueries } from '../redux/slices/query_slice';
+import { reset as visualizationReset } from '../redux/slices/visualization_slice';
+import { updateFields, sortFields, selectFields } from '../redux/slices/field_slice';
+import PPLService from '../../../services/requests/ppl';
+
+interface IFetchEventsParams {
+  pplService: PPLService;
+  requestParams: { tabId: string };
+}
+
+export const useFetchEvents = ({ pplService, requestParams }: IFetchEventsParams) => {
+  const dispatch = useDispatch();
+  const [isEventsLoading, setIsEventsLoading] = useState(false);
+  const queries = useSelector(selectQueries);
+  const fields = useSelector(selectFields);
+  const [response, setResponse] = useState();
+  const queriesRef = useRef();
+  const fieldsRef = useRef();
+  const responseRef = useRef();
+  queriesRef.current = queries;
+  fieldsRef.current = fields;
+  responseRef.current = response;
+
+  const fetchEvents = (
+    { query }: { query: string },
+    format: string,
+    handler: (res: any) => unknown,
+    errorHandler?: (error: any) => void
+  ) => {
+    setIsEventsLoading(true);
+    return pplService
+      .fetch({ query, format }, errorHandler)
+      .then((res: any) => handler(res))
+      .catch((err: any) => {
+        console.error(err);
+        throw err;
+      })
+      .finally(() => setIsEventsLoading(false));
+  };
+
+  const dispatchOnGettingHis = (res: any) => {
+    const selectedFields: string[] = fieldsRef.current![requestParams.tabId][SELECTED_FIELDS].map(
+      (field: IField) => field.name
+    );
+    setResponse(res);
+    batch(() => {
+      dispatch(
+        queryResultReset({
+          tabId: requestParams.tabId,
+        })
+      );
+      dispatch(
+        fetchSuccess({
+          tabId: requestParams.tabId,
+          data: {
+            ...res,
+          },
+        })
+      );
+      dispatch(
+        updateFields({
+          tabId: requestParams.tabId,
+          data: {
+            [UNSELECTED_FIELDS]: res?.schema ? [...res.schema] : [],
+            [QUERIED_FIELDS]: [],
+            [AVAILABLE_FIELDS]: res?.schema || [],
+          },
+        })
+      );
+      dispatch(
+        sortFields({
+          tabId: requestParams.tabId,
+          data: [AVAILABLE_FIELDS, UNSELECTED_FIELDS],
+        })
+      );
+      dispatch(
+        visualizationReset({
+          tabId: requestParams.tabId,
+        })
+      );
+    });
+  };
+
+  const dispatchOnNoHis = (res: any) => {
+    setResponse(res);
+    batch(() => {
+      dispatch(
+        queryResultReset({
+          tabId: requestParams.tabId,
+        })
+      );
+      dispatch(
+        updateFields({
+          tabId: requestParams.tabId,
+          data: {
+            [SELECTED_FIELDS]: [],
+            [UNSELECTED_FIELDS]: [],
+            [QUERIED_FIELDS]: [],
+            [AVAILABLE_FIELDS]: res?.schema ? [...res.schema] : [],
+          },
+        })
+      );
+      dispatch(
+        sortFields({
+          tabId: requestParams.tabId,
+          data: [AVAILABLE_FIELDS],
+        })
+      );
+      dispatch(
+        visualizationReset({
+          tabId: requestParams.tabId,
+        })
+      );
+      dispatch(
+        patternsReset({
+          tabId: requestParams.tabId,
+        })
+      );
+    });
+  };
+
+  const getLiveTail = (query: string = '', errorHandler?: (error: any) => void) => {
+    const cur = queriesRef.current;
+    const searchQuery = isEmpty(query) ? cur![requestParams.tabId][FINAL_QUERY] : query;
+    fetchEvents(
+      { query: searchQuery },
+      'jdbc',
+      (res: any) => {
+        if (!isEmpty(res.jsonData)) {
+          if (!isEmpty(responseRef.current)) {
+            res.jsonData = res.jsonData.concat(responseRef.current.jsonData);
+            res.datarows = res.datarows.concat(responseRef.current.datarows);
+            res.total = res.total + responseRef.current.total;
+            res.size = res.size + responseRef.current.size;
+          }
+          dispatchOnGettingHis(res);
+        }
+        if (isEmpty(res.jsonData) && isEmpty(responseRef.current)) {
+          dispatchOnNoHis(res);
+        }
+      },
+      errorHandler
+    );
+  };
+
+  const getEvents = (query: string = '', errorHandler?: (error: any) => void) => {
+    const cur = queriesRef.current;
+    const searchQuery = isEmpty(query) ? cur![requestParams.tabId][FINAL_QUERY] : query;
+    fetchEvents(
+      { query: searchQuery },
+      'jdbc',
+      (res: any) => {
+        if (!isEmpty(res.jsonData)) {
+          return dispatchOnGettingHis(res);
+        }
+        // when no hits and needs to get available fields to override default timestamp
+        dispatchOnNoHis(res);
+      },
+      errorHandler
+    );
+  };
+
+  const getAvailableFields = (query: string) => {
+    fetchEvents({ query }, 'jdbc', (res: any) => {
+      batch(() => {
+        dispatch(
+          fetchSuccess({
+            tabId: requestParams.tabId,
+            data: {
+              jsonDataAll: res.jsonData,
+            },
+          })
+        );
+        dispatch(
+          updateFields({
+            tabId: requestParams.tabId,
+            data: {
+              [AVAILABLE_FIELDS]: res?.schema ? [...res.schema] : [],
+            },
+          })
+        );
+        dispatch(
+          sortFields({
+            tabId: requestParams.tabId,
+            data: [AVAILABLE_FIELDS, UNSELECTED_FIELDS],
+          })
+        );
+      });
+    });
+  };
+
+  return {
+    isEventsLoading,
+    getLiveTail,
+    getEvents,
+    getAvailableFields,
+    fetchEvents,
+  };
+};
diff --git a/public/components/event_analytics/hooks/use_fetch_patterns.ts b/public/components/event_analytics/hooks/use_fetch_patterns.ts
new file mode 100644
index 0000000000..dc26b57b32
--- /dev/null
+++ b/public/components/event_analytics/hooks/use_fetch_patterns.ts
@@ -0,0 +1,175 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { IField, PatternTableData } from 'common/types/explorer';
+import { isUndefined } from 'lodash';
+import PPLService from 'public/services/requests/ppl';
+import { useRef } from 'react';
+import { batch, useDispatch, useSelector } from 'react-redux';
+import {
+  FINAL_QUERY,
+  PATTERNS_REGEX,
+  PATTERN_REGEX,
+  SELECTED_PATTERN_FIELD,
+  SELECTED_TIMESTAMP,
+} from '../../../../common/constants/explorer';
+import { buildPatternsQuery } from '../../../../common/utils/query_utils';
+import { IPPLEventsDataSource } from '../../../../server/common/types';
+import { reset as resetPatterns, setPatterns } from '../redux/slices/patterns_slice';
+import { changeQuery, selectQueries } from '../redux/slices/query_slice';
+import { useFetchEvents } from './use_fetch_events';
+
+interface IFetchPatternsParams {
+  pplService: PPLService;
+  requestParams: { tabId: string };
+}
+
+export const useFetchPatterns = ({ pplService, requestParams }: IFetchPatternsParams) => {
+  const dispatch = useDispatch();
+  const { isEventsLoading, fetchEvents } = useFetchEvents({
+    pplService,
+    requestParams,
+  });
+  const queries = useSelector(selectQueries);
+  const queriesRef = useRef();
+  queriesRef.current = queries;
+
+  const dispatchOnPatterns = (res: { patternTableData: PatternTableData[] }) => {
+    batch(() => {
+      dispatch(
+        resetPatterns({
+          tabId: requestParams.tabId,
+        })
+      );
+      dispatch(
+        setPatterns({
+          tabId: requestParams.tabId,
+          data: {
+            ...res,
+          },
+        })
+      );
+    });
+  };
+
+  const buildPatternDataQuery = (query: string, patternField: string, patternRegex: string) => {
+    let statsQuery = buildPatternsQuery(query, patternField, patternRegex);
+    statsQuery += ` | stats count(), take(\`${patternField}\`, 1) by patterns_field`;
+    return statsQuery;
+  };
+
+  const buildPatternAnomaliesQuery = (
+    query: string,
+    patternField: string,
+    patternRegex: string,
+    timestampField: string,
+    interval: string
+  ) => {
+    let adQuery = buildPatternsQuery(query, patternField, patternRegex);
+    adQuery +=
+      ` | stats count() by span(\`${timestampField}\`, 1${interval || 'm'}) as timestamp, ` +
+      `patterns_field | AD time_field='timestamp' category_field='patterns_field'`;
+    return adQuery;
+  };
+
+  const clearPatternCommands = (query: string) => query.replace(PATTERNS_REGEX, '');
+
+  const getPatterns = (interval: string, errorHandler?: (error: any) => void, query?: string) => {
+    const cur = queriesRef.current;
+    const rawQuery = cur![requestParams.tabId][FINAL_QUERY];
+    const searchQuery = isUndefined(query) ? clearPatternCommands(rawQuery) : query;
+    const patternField = cur![requestParams.tabId][SELECTED_PATTERN_FIELD];
+    const timestampField = cur![requestParams.tabId][SELECTED_TIMESTAMP];
+    const patternRegex = cur![requestParams.tabId][PATTERN_REGEX];
+    const statsQuery = buildPatternDataQuery(searchQuery, patternField, patternRegex);
+    const anomaliesQuery = buildPatternAnomaliesQuery(
+      searchQuery,
+      patternField,
+      patternRegex,
+      timestampField,
+      interval
+    );
+    // Fetch patterns data for the current query results
+    Promise.allSettled([
+      fetchEvents({ query: statsQuery }, 'jdbc', (res) => res),
+      fetchEvents({ query: anomaliesQuery }, 'jdbc', (res) => res),
+    ])
+      .then((res) => {
+        const [statsResp, anomaliesResp] = res as PromiseSettledResult<IPPLEventsDataSource>[];
+        if (statsResp.status === 'rejected') {
+          throw statsResp.reason;
+        }
+
+        let anomaliesResultsAvailable = true;
+        const anomaliesMap: { [x: string]: number } = {};
+        if (anomaliesResp.status === 'fulfilled') {
+          anomaliesResp.value.datarows.forEach((row) => {
+            const pattern = row[2];
+            const score = row[3];
+            if (score > 0) {
+              anomaliesMap[pattern] = (anomaliesMap[pattern] || 0) + 1;
+            }
+          });
+        } else {
+          console.error('Error fetching anomalies in patterns');
+          anomaliesResultsAvailable = false;
+        }
+
+        const formatToTableData: PatternTableData[] = statsResp.value.datarows.map((row) => ({
+          count: row[0],
+          pattern: row[2],
+          sampleLog: row[1][0],
+          anomalyCount: anomaliesResultsAvailable ? anomaliesMap[row[2]] || 0 : undefined,
+        }));
+        dispatchOnPatterns({ patternTableData: formatToTableData });
+      })
+      .catch(errorHandler);
+  };
+
+  const setDefaultPatternsField = async (
+    index: string,
+    patternField: string,
+    errorHandler?: (error: any) => void
+  ) => {
+    if (!patternField && index) {
+      const query = `source = ${index} | head 1`;
+      await fetchEvents(
+        { query },
+        'jdbc',
+        async (res: any) => {
+          // Create array of only string type fields
+          const textFields = res.schema.filter((field: IField) => field.type === 'string');
+          // Loop through array and find field with longest value
+          let defaultPatternField = '';
+          let maxLength = 0;
+          textFields.forEach((field: IField, i: number) => {
+            const curLength = res.jsonData[0][field.name].length;
+            if (curLength > maxLength) {
+              maxLength = curLength;
+              defaultPatternField = field.name;
+            }
+          });
+          patternField = defaultPatternField;
+        },
+        errorHandler
+      );
+    }
+    // Set pattern to the pattern passed in or the default pattern field found if pattern is empty
+    dispatch(
+      changeQuery({
+        tabId: requestParams.tabId,
+        query: {
+          [SELECTED_PATTERN_FIELD]: patternField,
+        },
+      })
+    );
+  };
+
+  return {
+    isEventsLoading,
+    getPatterns,
+    setDefaultPatternsField,
+  };
+};
diff --git a/public/components/event_analytics/hooks/use_fetch_visualizations.ts b/public/components/event_analytics/hooks/use_fetch_visualizations.ts
new file mode 100644
index 0000000000..1586bb7688
--- /dev/null
+++ b/public/components/event_analytics/hooks/use_fetch_visualizations.ts
@@ -0,0 +1,146 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { useState, useRef } from 'react';
+import { batch, useDispatch, useSelector } from 'react-redux';
+import {
+  FINAL_QUERY,
+  QUERIED_FIELDS,
+  RAW_QUERY,
+  SELECTED_FIELDS,
+  SELECTED_TIMESTAMP,
+} from '../../../../common/constants/explorer';
+import { render as renderCountDis } from '../redux/slices/count_distribution_slice';
+import { selectQueries } from '../redux/slices/query_slice';
+import { render as renderExplorerVis } from '../redux/slices/visualization_slice';
+import { updateFields, sortFields } from '../redux/slices/field_slice';
+import PPLService from '../../../services/requests/ppl';
+import { fetchSuccess } from '../redux/slices/query_result_slice';
+import { setPatterns, reset as patternsReset } from '../redux/slices/patterns_slice';
+
+interface IFetchVisualizationsParams {
+  pplService: PPLService;
+  requestParams: { tabId: string };
+}
+
+export const useFetchVisualizations = ({
+  pplService,
+  requestParams,
+}: IFetchVisualizationsParams) => {
+  const dispatch = useDispatch();
+  const [isVisLoading, setIsVisLoading] = useState<boolean>(false);
+  const queries = useSelector(selectQueries);
+  const queriesRef = useRef();
+  queriesRef.current = queries;
+
+  const fetchVisualizations = async (
+    { query }: { query: string },
+    format: string,
+    successHandler: (res: any) => void,
+    errorHandler: (error: any) => void
+  ) => {
+    setIsVisLoading(true);
+
+    await pplService
+      .fetch({
+        query,
+        format,
+      }, (error) => {
+        errorHandler(error);
+        setIsVisLoading(false);
+      })
+      .then((res: any) => {
+        if (res && res.status === 200) {
+          successHandler(res);
+        }
+        setIsVisLoading(false);
+      })
+  };
+
+  const getCountVisualizations = (interval: string) => {
+    const cur = queriesRef.current;
+    const rawQuery = cur![requestParams.tabId][FINAL_QUERY];
+    fetchVisualizations(
+      {
+        query: `${rawQuery} | stats count() by span(${
+          cur![requestParams.tabId][SELECTED_TIMESTAMP]
+        }, 1${(interval = interval ? interval : 'm')})`,
+      },
+      'viz',
+      (res: any) => {
+        dispatch(
+          renderCountDis({
+            tabId: requestParams.tabId,
+            data: res,
+          })
+        );
+      },
+      (error: Error) => {}
+    );
+  };
+
+  const getVisualizations = () => {
+    const cur = queriesRef.current;
+    const rawQuery = cur![requestParams.tabId][FINAL_QUERY];
+    fetchVisualizations(
+      {
+        query: rawQuery,
+      },
+      'viz',
+      (res: any) => {
+        batch(() => {
+          dispatch(
+            renderExplorerVis({
+              tabId: requestParams.tabId,
+              data: res,
+            })
+          );
+          dispatch(
+            fetchSuccess({
+              tabId: requestParams.tabId,
+              data: {
+                jsonData: res?.jsonData || {},
+              },
+            })
+          );
+          dispatch(
+            updateFields({
+              tabId: requestParams.tabId,
+              data: {
+                [QUERIED_FIELDS]: res?.metadata?.fields || [],
+                [SELECTED_FIELDS]: [],
+              },
+            })
+          );
+          dispatch(
+            sortFields({
+              tabId: requestParams.tabId,
+              data: [QUERIED_FIELDS],
+            })
+          );
+          dispatch(
+            patternsReset({
+              tabId: requestParams.tabId,
+            })
+          );
+        });
+      },
+      (error: any) => {
+        dispatch(
+          renderExplorerVis({
+            tabId: requestParams.tabId,
+            data: error.body,
+          })
+        );
+      }
+    );
+  };
+
+  return {
+    isVisLoading,
+    getVisualizations,
+    getCountVisualizations,
+  };
+};
diff --git a/public/components/event_analytics/hooks/use_render_visualizations.ts b/public/components/event_analytics/hooks/use_render_visualizations.ts
new file mode 100644
index 0000000000..2ebbc99967
--- /dev/null
+++ b/public/components/event_analytics/hooks/use_render_visualizations.ts
@@ -0,0 +1,134 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { batch, useDispatch } from 'react-redux';
+import { updateFields, sortFields } from '../redux/slices/field_slice';
+import { render as renderExplorerVis } from '../redux/slices/visualization_slice';
+import { fetchSuccess } from '../redux/slices/query_result_slice';
+import {
+  QUERIED_FIELDS,
+  SELECTED_FIELDS,
+} from '../../../../common/constants/explorer';
+import { change as changeVizConfig } from '../redux/slices/viualization_config_slice';
+import { changeQuery } from '../redux/slices/query_slice';
+import { VisualizationState } from 'common/types/explorer';
+
+export interface IVisualizationParams {
+  query: string;
+  callback: (res: any) => void | null;
+}
+
+export const useRenderVisualization = ({ pplService, requestParams }) => {
+  const dispatch = useDispatch();
+  const fetchVisualizations = async (
+    { query }: { query: string },
+    format: string,
+    successHandler: (res: any) => void,
+    errorHandler: (error: any) => void
+  ) => {
+    await pplService
+      .fetch(
+        {
+          query,
+          format,
+        },
+        (error) => {
+          errorHandler(error);
+        }
+      )
+      .then((res: any) => {
+        if (res && res.status === 200) {
+          successHandler(res);
+        }
+      });
+  };
+
+  const getVisualizations = ({ query, callback }: IVisualizationParams) => {
+    fetchVisualizations(
+      {
+        query,
+      },
+      'viz',
+      (res: any) => {
+        callback && callback(res);
+      },
+      (error: any) => {
+        dispatch(
+          renderExplorerVis({
+            tabId: requestParams.tabId,
+            data: error.body,
+          })
+        );
+      }
+    );
+  };
+
+  const fillVisDataInStore = ({ visData, query, visConfMetadata, visMeta }: VisualizationState) => {
+    batch(() => {
+      // query
+      dispatch(
+        changeQuery({
+          tabId: requestParams.tabId,
+          query,
+        })
+      );
+
+      // explorerVisualization
+      dispatch(
+        renderExplorerVis({
+          tabId: requestParams.tabId,
+          data: visData,
+        })
+      );
+
+      // queryResults
+      dispatch(
+        fetchSuccess({
+          tabId: requestParams.tabId,
+          data: {
+            jsonData: visData?.jsonData || {},
+          },
+        })
+      );
+
+      // fields
+      dispatch(
+        updateFields({
+          tabId: requestParams.tabId,
+          data: {
+            [QUERIED_FIELDS]: visData?.metadata?.fields || [],
+            [SELECTED_FIELDS]: [],
+          },
+        })
+      );
+
+      // sort fields
+      dispatch(
+        sortFields({
+          tabId: requestParams.tabId,
+          data: [QUERIED_FIELDS],
+        })
+      );
+
+      // explorerVisualizationConfig
+      dispatch(
+        changeVizConfig({
+          tabId: requestParams.tabId,
+          vizId: visMeta.visId,
+          data: {
+            dataConfig: {
+              ...visConfMetadata,
+            },
+          },
+        })
+      );
+    });
+  };
+
+  return {
+    getVisualizations,
+    fillVisDataInStore,
+  };
+};
diff --git a/public/components/event_analytics/hooks/use_tab_context.ts b/public/components/event_analytics/hooks/use_tab_context.ts
new file mode 100644
index 0000000000..32e9902c31
--- /dev/null
+++ b/public/components/event_analytics/hooks/use_tab_context.ts
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const TabContext = createContext({});
diff --git a/public/components/event_analytics/index.tsx b/public/components/event_analytics/index.tsx
new file mode 100644
index 0000000000..ff4c225136
--- /dev/null
+++ b/public/components/event_analytics/index.tsx
@@ -0,0 +1,123 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiGlobalToastList } from '@elastic/eui';
+import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
+import { EmptyTabParams, EventAnalyticsProps } from 'common/types/explorer';
+import { isEmpty } from 'lodash';
+import React, { ReactChild, useState } from 'react';
+import { HashRouter, Route, Switch, useHistory } from 'react-router-dom';
+import { RAW_QUERY } from '../../../common/constants/explorer';
+import { ObservabilitySideBar } from '../common/side_nav';
+import { Home as EventExplorerHome } from './home/home';
+import { LogExplorer } from './explorer/log_explorer';
+
+export const EventAnalytics = ({
+  chrome,
+  parentBreadcrumbs,
+  pplService,
+  dslService,
+  savedObjects,
+  timestampUtils,
+  http,
+  notifications,
+  queryManager,
+  ...props
+}: EventAnalyticsProps) => {
+  const history = useHistory();
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const eventAnalyticsBreadcrumb = {
+    text: 'Event analytics',
+    href: '#/event_analytics',
+  };
+
+  const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => {
+    if (!text) text = '';
+    setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
+  };
+
+  const getExistingEmptyTab = ({ tabIds, queries, explorerData }: EmptyTabParams) => {
+    let emptyTabId = '';
+    for (let i = 0; i < tabIds!.length; i++) {
+      const tid = tabIds![i];
+      if (isEmpty(queries[tid][RAW_QUERY]) && isEmpty(explorerData[tid])) {
+        emptyTabId = tid;
+        break;
+      }
+    }
+    return emptyTabId;
+  };
+
+  return (
+    <>
+      <EuiGlobalToastList
+        toasts={toasts}
+        dismissToast={(removedToast) => {
+          setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
+        }}
+        toastLifeTimeMs={6000}
+      />
+      <HashRouter>
+        <Switch>
+          <Route
+            path={[`/event_analytics/explorer/:id`, `/event_analytics/explorer`]}
+            render={(prop) => {
+              chrome.setBreadcrumbs([
+                ...parentBreadcrumbs,
+                eventAnalyticsBreadcrumb,
+                {
+                  text: 'Explorer',
+                  href: `#/event_analytics/explorer`,
+                },
+              ]);
+              return (
+                <LogExplorer
+                  savedObjectId={prop.match.params.id}
+                  pplService={pplService}
+                  dslService={dslService}
+                  savedObjects={savedObjects}
+                  timestampUtils={timestampUtils}
+                  http={http}
+                  setToast={setToast}
+                  getExistingEmptyTab={getExistingEmptyTab}
+                  history={history}
+                  notifications={notifications}
+                  queryManager={queryManager}
+                />
+              );
+            }}
+          />
+          <Route
+            exact
+            path={['/', '/event_analytics']}
+            render={() => {
+              chrome.setBreadcrumbs([
+                ...parentBreadcrumbs,
+                eventAnalyticsBreadcrumb,
+                {
+                  text: 'Home',
+                  href: '#/event_analytics',
+                },
+              ]);
+              return (
+                <ObservabilitySideBar>
+                  <EventExplorerHome
+                    http={http}
+                    savedObjects={savedObjects}
+                    dslService={dslService}
+                    pplService={pplService}
+                    setToast={setToast}
+                    getExistingEmptyTab={getExistingEmptyTab}
+                  />
+                </ObservabilitySideBar>
+              );
+            }}
+          />
+        </Switch>
+      </HashRouter>
+    </>
+  );
+};
diff --git a/public/components/event_analytics/redux/reducers/fetch_reducers.ts b/public/components/event_analytics/redux/reducers/fetch_reducers.ts
new file mode 100644
index 0000000000..6853cee584
--- /dev/null
+++ b/public/components/event_analytics/redux/reducers/fetch_reducers.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const fetchSuccess = (state, { payload }) => {
+  state[payload.tabId] = { 
+    ...state[payload.tabId],
+    ...payload.data 
+  };
+};
\ No newline at end of file
diff --git a/public/components/event_analytics/redux/reducers/index.ts b/public/components/event_analytics/redux/reducers/index.ts
new file mode 100644
index 0000000000..9bdf291214
--- /dev/null
+++ b/public/components/event_analytics/redux/reducers/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { fetchSuccess } from './fetch_reducers';
\ No newline at end of file
diff --git a/public/components/event_analytics/redux/reducers/query_reducers.ts b/public/components/event_analytics/redux/reducers/query_reducers.ts
new file mode 100644
index 0000000000..bd4273e73b
--- /dev/null
+++ b/public/components/event_analytics/redux/reducers/query_reducers.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const queryChange = (state = {}, action) => {
+  return { 
+    ...action.payload
+  };
+};
\ No newline at end of file
diff --git a/public/components/event_analytics/redux/slices/count_distribution_slice.ts b/public/components/event_analytics/redux/slices/count_distribution_slice.ts
new file mode 100644
index 0000000000..434682b252
--- /dev/null
+++ b/public/components/event_analytics/redux/slices/count_distribution_slice.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createSlice } from '@reduxjs/toolkit';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+import { REDUX_EXPL_SLICE_COUNT_DISTRIBUTION } from '../../../../../common/constants/explorer';
+
+const initialState = {
+  [initialTabId]: {},
+};
+
+export const countDistributionSlice = createSlice({
+  name: REDUX_EXPL_SLICE_COUNT_DISTRIBUTION,
+  initialState,
+  reducers: {
+    render: (state, { payload }) => {
+      state[payload.tabId] = {
+        ...payload.data,
+      };
+    },
+  },
+  extraReducers: (builder) => {},
+});
+
+export const { render } = countDistributionSlice.actions;
+
+export const selectCountDistribution = (state) => state.countDistribution;
+
+export default countDistributionSlice.reducer;
diff --git a/public/components/event_analytics/redux/slices/field_slice.ts b/public/components/event_analytics/redux/slices/field_slice.ts
new file mode 100644
index 0000000000..4c691d0783
--- /dev/null
+++ b/public/components/event_analytics/redux/slices/field_slice.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createSlice } from '@reduxjs/toolkit';
+import { forEach } from 'lodash';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+import {
+  SELECTED_FIELDS,
+  UNSELECTED_FIELDS,
+  AVAILABLE_FIELDS,
+  QUERIED_FIELDS,
+  REDUX_EXPL_SLICE_FIELDS,
+} from '../../../../../common/constants/explorer';
+import { IField } from '../../../../../common/types/explorer';
+
+const initialFields = {
+  [SELECTED_FIELDS]: [],
+  [UNSELECTED_FIELDS]: [],
+  [AVAILABLE_FIELDS]: [],
+  [QUERIED_FIELDS]: [],
+};
+
+const initialState = {
+  [initialTabId]: {
+    ...initialFields,
+  },
+};
+
+export const fieldSlice = createSlice({
+  name: REDUX_EXPL_SLICE_FIELDS,
+  initialState,
+  reducers: {
+    init: (state, { payload }) => {
+      state[payload.tabId] = {
+        ...initialFields,
+      };
+    },
+    updateFields: (state, { payload }) => {
+      state[payload.tabId] = {
+        ...state[payload.tabId],
+        ...payload.data,
+      };
+    },
+    reset: (state, { payload }) => {
+      state[payload.tabId] = {
+        ...initialFields,
+      };
+    },
+    remove: (state, { payload }) => {
+      delete state[payload.tabId];
+    },
+    sortFields: (state, { payload }) => {
+      forEach(payload.data, (toSort: string) => {
+        state[payload.tabId][toSort].sort((prev: IField, cur: IField) =>
+          prev.name.localeCompare(cur.name)
+        );
+      });
+    },
+  },
+  extraReducers: (builder) => {},
+});
+
+export const { init, reset, remove, updateFields, sortFields } = fieldSlice.actions;
+
+export const selectFields = (state) => state.fields;
+
+export default fieldSlice.reducer;
diff --git a/public/components/event_analytics/redux/slices/patterns_slice.ts b/public/components/event_analytics/redux/slices/patterns_slice.ts
new file mode 100644
index 0000000000..6f6ebf4bdb
--- /dev/null
+++ b/public/components/event_analytics/redux/slices/patterns_slice.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable import/no-default-export */
+
+import { createSlice } from '@reduxjs/toolkit';
+import { fetchSuccess as fetchSuccessReducer } from '../reducers';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+import { REDUX_EXPL_SLICE_PATTERNS } from '../../../../../common/constants/explorer';
+
+const initialState = {
+  [initialTabId]: {},
+};
+
+export const patternsSlice = createSlice({
+  name: REDUX_EXPL_SLICE_PATTERNS,
+  initialState,
+  reducers: {
+    setPatterns: fetchSuccessReducer,
+    reset: (state, { payload }) => {
+      state[payload.tabId] = {};
+    },
+    init: (state, { payload }) => {
+      state[payload.tabId] = {};
+    },
+    remove: (state, { payload }) => {
+      delete state[payload.tabId];
+    },
+  },
+});
+
+export const { setPatterns, remove, reset, init } = patternsSlice.actions;
+
+export const selectPatterns = (state) => state.patterns;
+
+export default patternsSlice.reducer;
diff --git a/public/components/event_analytics/redux/slices/query_result_slice.ts b/public/components/event_analytics/redux/slices/query_result_slice.ts
new file mode 100644
index 0000000000..0de05a6bf6
--- /dev/null
+++ b/public/components/event_analytics/redux/slices/query_result_slice.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createSlice } from '@reduxjs/toolkit';
+import { fetchSuccess as fetchSuccessReducer } from '../reducers';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+import { REDUX_EXPL_SLICE_QUERY_RESULT } from '../../../../../common/constants/explorer';
+
+const initialState = {
+  [initialTabId]: {},
+};
+
+export const queryResultSlice = createSlice({
+  name: REDUX_EXPL_SLICE_QUERY_RESULT,
+  initialState,
+  reducers: {
+    fetchSuccess: fetchSuccessReducer,
+    reset: (state, { payload }) => {
+      state[payload.tabId] = {};
+    },
+    init: (state, { payload }) => {
+      state[payload.tabId] = {};
+    },
+    remove: (state, { payload }) => {
+      delete state[payload.tabId];
+    },
+  },
+});
+
+export const { fetchSuccess, remove, reset, init } = queryResultSlice.actions;
+
+export const selectQueryResult = (state) => state.queryResults;
+
+export default queryResultSlice.reducer;
diff --git a/public/components/event_analytics/redux/slices/query_slice.ts b/public/components/event_analytics/redux/slices/query_slice.ts
new file mode 100644
index 0000000000..c3653debc6
--- /dev/null
+++ b/public/components/event_analytics/redux/slices/query_slice.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createSlice } from '@reduxjs/toolkit';
+import {
+  APP_ANALYTICS_TAB_ID_REGEX,
+  FILTERED_PATTERN,
+  FINAL_QUERY,
+  INDEX,
+  PATTERN_REGEX,
+  PPL_DEFAULT_PATTERN_REGEX_FILETER,
+  RAW_QUERY,
+  REDUX_EXPL_SLICE_QUERIES,
+  SELECTED_DATE_RANGE,
+  SELECTED_PATTERN_FIELD,
+  SELECTED_TIMESTAMP,
+} from '../../../../../common/constants/explorer';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+
+const initialQueryState = {
+  [RAW_QUERY]: '',
+  [FINAL_QUERY]: '',
+  [INDEX]: '',
+  [SELECTED_PATTERN_FIELD]: '',
+  [PATTERN_REGEX]: PPL_DEFAULT_PATTERN_REGEX_FILETER,
+  [FILTERED_PATTERN]: '',
+  [SELECTED_TIMESTAMP]: '',
+  [SELECTED_DATE_RANGE]: ['now-15m', 'now'],
+};
+
+const appBaseQueryState = {
+  [RAW_QUERY]: '',
+  [FINAL_QUERY]: '',
+  [INDEX]: '',
+  [SELECTED_PATTERN_FIELD]: '',
+  [PATTERN_REGEX]: PPL_DEFAULT_PATTERN_REGEX_FILETER,
+  [FILTERED_PATTERN]: '',
+  [SELECTED_TIMESTAMP]: '',
+  [SELECTED_DATE_RANGE]: ['now-24h', 'now'],
+};
+
+const initialState = {
+  [initialTabId]: {
+    ...initialQueryState,
+  },
+};
+
+export const queriesSlice = createSlice({
+  name: REDUX_EXPL_SLICE_QUERIES,
+  initialState,
+  reducers: {
+    changeQuery: (state, { payload }) => {
+      state[payload.tabId] = {
+        ...state[payload.tabId],
+        ...payload.query,
+      };
+    },
+    changeDateRange: (state, { payload }) => {
+      state[payload.tabId] = {
+        ...state[payload.tabId],
+        ...payload.data,
+      };
+    },
+    init: (state, { payload }) => {
+      state[payload.tabId] = payload.tabId.match(APP_ANALYTICS_TAB_ID_REGEX)
+        ? appBaseQueryState
+        : initialQueryState;
+    },
+    remove: (state, { payload }) => {
+      delete state[payload.tabId];
+    },
+  },
+  extraReducers: (builder) => {},
+});
+
+export const { changeQuery, changeDateRange, remove, init } = queriesSlice.actions;
+
+export const selectQueries = (state) => state.queries;
+
+export default queriesSlice.reducer;
diff --git a/public/components/event_analytics/redux/slices/query_tab_slice.ts b/public/components/event_analytics/redux/slices/query_tab_slice.ts
new file mode 100644
index 0000000000..873986a34e
--- /dev/null
+++ b/public/components/event_analytics/redux/slices/query_tab_slice.ts
@@ -0,0 +1,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { 
+  createSlice
+} from '@reduxjs/toolkit';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+import { 
+  SELECTED_QUERY_TAB,
+  QUERY_TAB_IDS,
+  NEW_SELECTED_QUERY_TAB,
+  REDUX_EXPL_SLICE_QUERY_TABS
+} from '../../../../../common/constants/explorer';
+import { assign } from 'lodash';
+
+const initialState = {
+  queryTabIds: [initialTabId],
+  selectedQueryTab: initialTabId,
+  tabNames: {}
+};
+
+export const queryTabsSlice = createSlice({
+  name: REDUX_EXPL_SLICE_QUERY_TABS,
+  initialState,
+  reducers: {
+    addTab: (state, { payload }) => {
+      state[QUERY_TAB_IDS].push(payload.tabId);
+      state[SELECTED_QUERY_TAB] = payload.tabId;
+    },
+    removeTab: (state, { payload }) => {
+      state[QUERY_TAB_IDS] = state[QUERY_TAB_IDS].filter((tabId) => {
+        return tabId !== payload.tabId;
+      });
+      if (payload[NEW_SELECTED_QUERY_TAB]) {
+        state[SELECTED_QUERY_TAB] = payload[NEW_SELECTED_QUERY_TAB];
+      }
+    },
+    updateTabName: (state, { payload }) => {
+      const newTabNames = {
+        [payload.tabId]: payload.tabName
+      };
+      assign(state.tabNames, newTabNames);
+    },
+    setSelectedQueryTab: (state, { payload }) => {
+      state[SELECTED_QUERY_TAB] = payload.tabId;
+    }
+  },
+  extraReducers: (builder) => {}
+});
+
+export const {
+  addTab,
+  removeTab,
+  setSelectedQueryTab,
+  updateTabName
+} = queryTabsSlice.actions;
+
+export const selectQueryTabs = (state) => state.explorerTabs;
+
+export default queryTabsSlice.reducer;
\ No newline at end of file
diff --git a/public/components/event_analytics/redux/slices/visualization_slice.ts b/public/components/event_analytics/redux/slices/visualization_slice.ts
new file mode 100644
index 0000000000..d55d32017e
--- /dev/null
+++ b/public/components/event_analytics/redux/slices/visualization_slice.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createSlice } from '@reduxjs/toolkit';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+import { REDUX_EXPL_SLICE_VISUALIZATION } from '../../../../../common/constants/explorer';
+
+const initialState = {
+  [initialTabId]: {},
+};
+
+export const explorerVisualizationSlice = createSlice({
+  name: REDUX_EXPL_SLICE_VISUALIZATION,
+  initialState,
+  reducers: {
+    render: (state, { payload }) => {
+      state[payload.tabId] = payload.data;
+    },
+    reset: (state, { payload }) => {
+      state[payload.tabId] = {};
+    },
+  },
+  extraReducers: (builder) => {},
+});
+
+export const { render, reset } = explorerVisualizationSlice.actions;
+
+export const selectExplorerVisualization = (state) => state.explorerVisualization;
+
+export default explorerVisualizationSlice.reducer;
diff --git a/public/components/event_analytics/redux/slices/viualization_config_slice.ts b/public/components/event_analytics/redux/slices/viualization_config_slice.ts
new file mode 100644
index 0000000000..08c1e5f32d
--- /dev/null
+++ b/public/components/event_analytics/redux/slices/viualization_config_slice.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createSlice } from '@reduxjs/toolkit';
+import { initialTabId } from '../../../../framework/redux/store/shared_state';
+import { REDUX_EXPL_SLICE_VISUALIZATION } from '../../../../../common/constants/explorer';
+
+const initialState = {
+  [initialTabId]: {},
+};
+
+export const visualizationConfigSlice = createSlice({
+  name: 'explorerVizConfigs',
+  initialState,
+  reducers: {
+    change: (state, { payload }) => {
+      const { tabId, vizId, data } = payload;
+      let curVizPrevState = {};
+      if (state[tabId] && state[tabId][vizId]) {
+        curVizPrevState = { ...state[tabId][vizId] };
+      }
+      state[tabId] = {
+        ...state[tabId],
+        [vizId]: {
+          ...curVizPrevState,
+          ...data,
+        },
+      };
+    },
+    reset: (state, { payload }) => {
+      state[payload.tabId] = {};
+    },
+    init: (state, { payload }) => {
+      state[payload.tabId] = {};
+    },
+  },
+  extraReducers: (builder) => {},
+});
+
+export const { change, reset, init } = visualizationConfigSlice.actions;
+
+export const selectVisualizationConfig = (state) => state.explorerVisualizationConfig;
+
+export default visualizationConfigSlice.reducer;
diff --git a/public/components/event_analytics/utils/__tests__/utils.test.tsx b/public/components/event_analytics/utils/__tests__/utils.test.tsx
new file mode 100644
index 0000000000..12d9a9cdae
--- /dev/null
+++ b/public/components/event_analytics/utils/__tests__/utils.test.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+import {
+  hexToRgb,
+  lightenColor,
+  formatError,
+  isValidTraceId,
+  rangeNumDocs,
+  getHeaders,
+} from '../utils';
+
+describe('Utils event analytics helper functions', () => {
+  configure({ adapter: new Adapter() });
+
+  it('validates hexToRgb function', () => {
+    expect(hexToRgb()).toBe('rgba(60,161,199,1)');
+    expect(hexToRgb('test', 1, true)).toBe('rgba(96,353,409,1)');
+    expect(hexToRgb('#000000', 1, true)).toBe('rgba(0,0,0,1)');
+  });
+
+  it('validates lightenColor function', () => {
+    expect(lightenColor('#00000', 10)).toBe('#1a1a1a');
+  });
+
+  it('validates formatError function', () => {
+    expect(formatError('Warning', 'This is a warning', 'Test warning description')).toStrictEqual({
+      body: {
+        attributes: { error: { caused_by: { reason: 'Test warning description', type: '' } } },
+      },
+      message: 'This is a warning',
+      name: 'Warning',
+    });
+  });
+
+  it('validates isValidTraceId function', () => {
+    expect(isValidTraceId('#00000')).toBe(false);
+    expect(isValidTraceId('abcdefghijklmnopqrstuvwxyzabcdef')).toBe(true);
+  });
+
+  it('validates rangeNumDocs function', () => {
+    expect(rangeNumDocs(11000)).toBe(10000);
+    expect(rangeNumDocs(-200)).toBe(0);
+    expect(rangeNumDocs(2000)).toBe(2000);
+  });
+
+  it('validates getHeaders function', () => {
+    expect(
+      getHeaders(
+        [
+          {
+            name: 'host',
+            type: 'text',
+          },
+          {
+            name: 'ip_count',
+            type: 'integer',
+          },
+          {
+            name: 'per_ip_bytes',
+            type: 'long',
+          },
+          {
+            name: 'resp_code',
+            type: 'text',
+          },
+          {
+            name: 'sum_bytes',
+            type: 'long',
+          },
+        ],
+        ['', 'Time', '_source'],
+        undefined
+      )
+    ).toBeTruthy();
+    expect(getHeaders([], ['', 'Time', '_source'], undefined)).toBeTruthy();
+  });
+});
diff --git a/public/components/event_analytics/utils/index.tsx b/public/components/event_analytics/utils/index.tsx
new file mode 100644
index 0000000000..9330a070b0
--- /dev/null
+++ b/public/components/event_analytics/utils/index.tsx
@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export {
+  getTrs,
+  getHeaders,
+  fetchSurroundingData,
+  rangeNumDocs,
+  populateDataGrid,
+  isValidTraceId,
+  formatError,
+  getDefaultVisConfig
+} from './utils';
diff --git a/public/components/event_analytics/utils/utils.tsx b/public/components/event_analytics/utils/utils.tsx
new file mode 100644
index 0000000000..494d1e06a1
--- /dev/null
+++ b/public/components/event_analytics/utils/utils.tsx
@@ -0,0 +1,431 @@
+/* eslint-disable no-bitwise */
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import dateMath from '@elastic/datemath';
+import { uniqueId, isEmpty } from 'lodash';
+import moment from 'moment';
+import React from 'react';
+import { HttpStart } from '../../../../../../src/core/public';
+import {
+  CUSTOM_LABEL,
+  TIME_INTERVAL_OPTIONS,
+  GROUPBY,
+  AGGREGATIONS,
+  BREAKDOWNS,
+} from '../../../../common/constants/explorer';
+import { PPL_DATE_FORMAT, PPL_INDEX_REGEX } from '../../../../common/constants/shared';
+import {
+  ConfigListEntry,
+  GetTooltipHoverInfoType,
+  IExplorerFields,
+  IField,
+} from '../../../../common/types/explorer';
+import PPLService from '../../../services/requests/ppl';
+import { DocViewRow, IDocType } from '../explorer/events_views';
+import { ConfigTooltip } from '../explorer/visualizations/config_panel/config_panes/config_controls';
+import {
+  GroupByChunk,
+  GroupField,
+  StatsAggregationChunk,
+  statsChunk,
+} from '../../../../common/query_manager/ast/types';
+
+// Create Individual table rows for events datagrid and flyouts
+export const getTrs = (
+  http: HttpStart,
+  explorerFields: IField[],
+  limit: number,
+  setLimit: React.Dispatch<React.SetStateAction<number>>,
+  PAGE_SIZE: number,
+  timeStampField: any,
+  explorerFieldsFull: IExplorerFields,
+  pplService: PPLService,
+  rawQuery: string,
+  rowRefs: Array<
+    React.RefObject<{
+      closeAllFlyouts(openDocId: string): void;
+    }>
+  >,
+  setRowRefs: React.Dispatch<
+    React.SetStateAction<
+      Array<
+        React.RefObject<{
+          closeAllFlyouts(openDocId: string): void;
+        }>
+      >
+    >
+  >,
+  onFlyoutOpen: (docId: string) => void,
+  docs: any[] = [],
+  prevTrs: any[] = []
+) => {
+  if (prevTrs.length >= docs.length) return prevTrs;
+
+  // reset limit if no previous table rows
+  if (prevTrs.length === 0 && limit !== PAGE_SIZE) setLimit(PAGE_SIZE);
+  const trs = prevTrs.slice();
+
+  const upperLimit = Math.min(trs.length === 0 ? PAGE_SIZE : limit, docs.length);
+  const tempRefs = rowRefs;
+  for (let i = trs.length; i < upperLimit; i++) {
+    const docId = uniqueId('doc_view');
+    const tempRowRef = React.createRef<{
+      closeAllFlyouts(openDocId: string): void;
+    }>();
+    tempRefs.push(tempRowRef);
+    trs.push(
+      <DocViewRow
+        ref={tempRowRef}
+        http={http}
+        key={docId}
+        docId={docId}
+        doc={docs[i]}
+        selectedCols={explorerFields}
+        timeStampField={timeStampField}
+        explorerFields={explorerFieldsFull}
+        pplService={pplService}
+        rawQuery={rawQuery}
+        onFlyoutOpen={onFlyoutOpen}
+      />
+    );
+  }
+  setRowRefs(tempRefs);
+  return trs;
+};
+
+// Create table headers for events datagrid and flyouts
+export const getHeaders = (fields: any, defaultCols: string[], isFlyout?: boolean) => {
+  let tableHeadContent = null;
+  if (!fields || fields.length === 0) {
+    tableHeadContent = (
+      <>
+        {defaultCols.map((colName: string) => {
+          return <th key={uniqueId('datagrid-header-')}>{colName}</th>;
+        })}
+      </>
+    );
+  } else {
+    tableHeadContent = fields.map((selField: any) => {
+      return <th key={uniqueId('datagrid-header-')}>{selField.name}</th>;
+    });
+
+    if (!isFlyout) {
+      tableHeadContent.unshift(<th key={uniqueId('datagrid-header-')} />);
+    }
+  }
+
+  return <tr className="osdDocTableHeader">{tableHeadContent}</tr>;
+};
+
+// Populate Events datagrid and flyouts
+export const populateDataGrid = (
+  explorerFields: IExplorerFields,
+  header1: JSX.Element,
+  body1: JSX.Element,
+  header2: JSX.Element,
+  body2: JSX.Element
+) => {
+  return (
+    <>
+      <div className="dscTable dscTableFixedScroll">
+        {explorerFields?.queriedFields && explorerFields.queriedFields.length > 0 && (
+          <table className="osd-table table" data-test-subj="docTable">
+            <thead>{header1}</thead>
+            <tbody>{body1}</tbody>
+          </table>
+        )}
+        {explorerFields?.queriedFields &&
+        explorerFields?.queriedFields?.length > 0 &&
+        explorerFields.selectedFields?.length === 0 ? null : (
+          <table className="osd-table table" data-test-subj="docTable">
+            <thead>{header2}</thead>
+            <tbody>{body2}</tbody>
+          </table>
+        )}
+      </div>
+    </>
+  );
+};
+
+/* Builds Final Query for the surrounding events
+ * -> Final Query is as follows:
+ * -> finalQuery = indexPartOfQuery + timeQueryFilter + filterPartOfQuery + sortFilter
+ *
+ * Example Query for 5 new events:
+ * -> rawQuery: source = opensearch_dashboards_sample_data_logs | where geo.src = 'US'
+ * -> indexPartOfQuery = 'source = opensearch_dashboards_sample_data_logs'
+ * -> filterPartOfQuery = '| where geo.src = 'US''
+ * -> timeQueryFilter = ' | where tiimestamp > 2022-01-16 03:26:21.326'
+ * -> sortFilter = '| sort + tiimestamp | head 5'
+ * -> finalQuery = 'source logs_test | where tiimestamp > 2022-01-16 03:26:21.326 | where geo.src = 'US' | sort + timeStampField | head 5'
+ */
+const composeFinalQuery = (
+  rawQuery: string,
+  timeStampField: string,
+  eventTime: string,
+  numDocs: number,
+  typeOfDocs: 'new' | 'old'
+) => {
+  const indexMatchArray = rawQuery.match(PPL_INDEX_REGEX);
+  if (indexMatchArray == null) {
+    throw Error('index not found in Query');
+  }
+  const indexPartOfQuery = indexMatchArray[0];
+  const filterPartOfQuery = rawQuery.replace(PPL_INDEX_REGEX, '');
+  const timeSymbol = typeOfDocs === 'new' ? '>' : '<';
+  const sortSymbol = typeOfDocs === 'new' ? '+' : '-';
+  const timeQueryFilter = ` | where ${timeStampField} ${timeSymbol} '${eventTime}'`;
+  const sortFilter = ` | sort ${sortSymbol} ${timeStampField} | head ${numDocs}`;
+
+  return indexPartOfQuery + timeQueryFilter + filterPartOfQuery + sortFilter;
+};
+
+const createTds = (
+  docs: IDocType[],
+  selectedCols: IField[],
+  getTds: (doc: IDocType, selectedCols: IField[], isFlyout: boolean) => JSX.Element[]
+) => {
+  return docs.map((doc: IDocType) => (
+    <tr className="osdDocTable__row"> {getTds(doc, selectedCols, true).slice(1)}</tr>
+  ));
+};
+
+// fetches Surrounding events based on a timestamp
+export const fetchSurroundingData = async (
+  pplService: PPLService,
+  rawQuery: string,
+  timeStampField: string,
+  eventTime: string,
+  numDocs: number,
+  typeOfDocs: 'new' | 'old',
+  setEventsData: React.Dispatch<React.SetStateAction<JSX.Element[][]>>,
+  setIsError: React.Dispatch<React.SetStateAction<string>>,
+  setLoadingData: React.Dispatch<React.SetStateAction<boolean>>,
+  selectedCols: IField[],
+  getTds: (doc: IDocType, selectedCols: IField[], isFlyout: boolean) => JSX.Element[]
+) => {
+  let resultCount = 0;
+  let isErred = false;
+  const pplEventTime = moment.utc(eventTime).format(PPL_DATE_FORMAT);
+  setLoadingData(true);
+  setIsError('');
+
+  let finalQuery = '';
+  try {
+    finalQuery = composeFinalQuery(rawQuery, timeStampField, pplEventTime, numDocs, typeOfDocs);
+  } catch (error) {
+    const errorMessage = 'Issue in building surrounding data query';
+    setIsError(errorMessage);
+    isErred = true;
+    console.error(errorMessage, error);
+    setLoadingData(false);
+    return resultCount;
+  }
+
+  await pplService
+    .fetch({ query: finalQuery, format: 'jdbc' })
+    .then((res) => {
+      const resuleData = typeOfDocs == 'new' ? res.jsonData.reverse() : res.jsonData;
+      resultCount = resuleData.length;
+      setEventsData(createTds(resuleData, selectedCols, getTds));
+    })
+    .catch((error: Error) => {
+      setIsError(error.message);
+      isErred = true;
+      console.error(error);
+    })
+    .finally(() => {
+      setLoadingData(false);
+    });
+
+  if (resultCount !== numDocs && !isErred) {
+    const errorMessage =
+      resultCount !== 0
+        ? `Could only find ${resultCount} ${typeOfDocs} event${resultCount === 1 ? '' : 's'}!`
+        : `Could not find any ${typeOfDocs} event!`;
+    setIsError(errorMessage);
+  }
+
+  return resultCount;
+};
+
+// contains 0 <= value <= 10000
+export const rangeNumDocs = (value: number) => {
+  return value > 10000 ? 10000 : value < 0 ? 0 : value;
+};
+
+// check traceId Byte Size
+export const isValidTraceId = (traceId: string) => {
+  return new Blob([traceId]).size === 32;
+};
+
+export const formatError = (name: string, message: string, details: string) => {
+  return {
+    name,
+    message,
+    body: {
+      attributes: {
+        error: {
+          caused_by: {
+            type: '',
+            reason: details,
+          },
+        },
+      },
+    },
+  };
+};
+
+export const hexToRgb = (
+  hex: string = '#3CA1C7',
+  opacity: number = 1,
+  colorWithOpacity: boolean = true
+) => {
+  // default color PLOTLY_COLOR[0]: '#3CA1C7'
+  const defaultColor = [hex, '60', '161', '199'];
+  const rgbElements = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) || defaultColor;
+  const [, r, g, b] = rgbElements.map((color) => parseInt(color, 16));
+  const rgbaFormat = colorWithOpacity ? `rgba(${r},${g},${b},${opacity})` : `rgb(${r},${g},${b})`;
+  return rgbaFormat;
+};
+
+export const lightenColor = (color: string, percent: number) => {
+  const num = parseInt(color.replace('#', ''), 16);
+  const amt = Math.round(2.55 * percent);
+  const R = (num >> 16) + amt;
+  const B = ((num >> 8) & 0x00ff) + amt;
+  const G = (num & 0x0000ff) + amt;
+  return (
+    '#' +
+    (
+      0x1000000 +
+      (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+      (B < 255 ? (B < 1 ? 0 : B) : 255) * 0x100 +
+      (G < 255 ? (G < 1 ? 0 : G) : 255)
+    )
+      .toString(16)
+      .slice(1)
+  );
+};
+
+// Get config objects according to specific editor
+export const fetchConfigObject = (editor: string, propsOptions: any) => {
+  switch (editor) {
+    case 'Tooltip':
+      return {
+        id: 'tooltip_options',
+        name: 'Tooltip options',
+        editor: ConfigTooltip,
+        mapTo: 'tooltipOptions',
+        schemas: [
+          {
+            name: 'Tooltip mode',
+            component: null,
+            mapTo: 'tooltipMode',
+            props: {
+              options: [
+                { name: 'Show', id: 'show' },
+                { name: 'Hidden', id: 'hidden' },
+              ],
+              defaultSelections: [{ name: 'Show', id: 'show' }],
+            },
+          },
+          {
+            name: 'Tooltip text',
+            component: null,
+            mapTo: 'tooltipText',
+            props: propsOptions,
+          },
+        ],
+      };
+    default:
+      return null;
+  }
+};
+
+export const getTooltipHoverInfo = ({ tooltipMode, tooltipText }: GetTooltipHoverInfoType) => {
+  if (tooltipMode === 'hidden') {
+    return 'none';
+  }
+  if (tooltipText === undefined) {
+    return 'all';
+  }
+  return tooltipText;
+};
+
+export const filterDataConfigParameter = (parameter: ConfigListEntry[]) =>
+  parameter.filter((configItem: ConfigListEntry) => configItem.label);
+
+export const getRoundOf = (value: number, places: number) => value.toFixed(places);
+
+export const getPropName = (queriedVizObj: {
+  customLabel?: string;
+  aggregation: string;
+  name: string;
+  label: string;
+}) => {
+  if (queriedVizObj) {
+    if (queriedVizObj[CUSTOM_LABEL] === '' || queriedVizObj[CUSTOM_LABEL] === undefined) {
+      return `${queriedVizObj.aggregation}(${queriedVizObj.name})`;
+    }
+    return queriedVizObj[CUSTOM_LABEL];
+  } else {
+    return '';
+  }
+};
+
+export const getDefaultVisConfig = (statsToken: statsChunk) => {
+  if (statsToken === null) {
+    return {
+      [GROUPBY]: [],
+      [AGGREGATIONS]: [],
+      [BREAKDOWNS]: [],
+    };
+  }
+
+  const groupByToken = statsToken.groupby;
+  // const seriesToken = statsToken.aggregations && statsToken.aggregations[0];
+  const span = getSpanValue(groupByToken);
+  return {
+    [AGGREGATIONS]: statsToken.aggregations.map((agg) => ({
+      label: agg.function?.value_expression,
+      name: agg.function?.value_expression,
+      aggregation: agg.function?.name,
+      [CUSTOM_LABEL]: agg[CUSTOM_LABEL as keyof StatsAggregationChunk],
+    })),
+    [GROUPBY]: groupByToken?.group_fields?.map((agg) => ({
+      label: agg.name ?? '',
+      name: agg.name ?? '',
+      [CUSTOM_LABEL]: agg[CUSTOM_LABEL as keyof GroupField] ?? '',
+    })),
+    span,
+  };
+};
+
+const getSpanValue = (groupByToken: GroupByChunk) => {
+  const timeUnitValue = TIME_INTERVAL_OPTIONS.find(
+    (time_unit) => time_unit.value === groupByToken?.span?.span_expression.time_unit
+  )?.text;
+  return !isEmpty(groupByToken?.span)
+    ? {
+        time_field: [
+          {
+            name: groupByToken?.span?.span_expression?.field,
+            type: 'timestamp',
+            label: groupByToken?.span?.span_expression?.field,
+          },
+        ],
+        unit: [
+          {
+            text: timeUnitValue,
+            value: groupByToken?.span?.span_expression?.time_unit,
+            label: timeUnitValue,
+          },
+        ],
+        interval: groupByToken?.span?.span_expression?.literal_value,
+      }
+    : undefined;
+};
diff --git a/public/components/index.tsx b/public/components/index.tsx
new file mode 100644
index 0000000000..eec21a18b2
--- /dev/null
+++ b/public/components/index.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { QueryManager } from 'common/query_manager';
+import { AppMountParameters, CoreStart } from '../../../../src/core/public';
+import { AppPluginStartDependencies } from '../types';
+import { App } from './app';
+
+export const Observability = (
+  CoreStartProp: CoreStart,
+  DepsStart: AppPluginStartDependencies,
+  AppMountParametersProp: AppMountParameters,
+  pplService: any,
+  dslService: any,
+  savedObjects: any,
+  timestampUtils: any,
+  queryManager: QueryManager
+) => {
+  ReactDOM.render(
+    <App
+      CoreStartProp={CoreStartProp}
+      DepsStart={DepsStart}
+      pplService={pplService}
+      dslService={dslService}
+      savedObjects={savedObjects}
+      timestampUtils={timestampUtils}
+      queryManager={queryManager}
+    />,
+    AppMountParametersProp.element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(AppMountParametersProp.element);
+};
diff --git a/public/components/metrics/helpers/__tests__/utils.test.tsx b/public/components/metrics/helpers/__tests__/utils.test.tsx
new file mode 100644
index 0000000000..fa599cc0a9
--- /dev/null
+++ b/public/components/metrics/helpers/__tests__/utils.test.tsx
@@ -0,0 +1,100 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import {
+  createPrometheusMetricById,
+  getNewVizDimensions,
+  mergeLayoutAndMetrics,
+  onTimeChange,
+  sortMetricLayout,
+  updateMetricsWithSelections,
+} from '../utils';
+import {
+  samplePanelVisualizations1,
+  samplenewDimensions1,
+  samplenewDimensions2,
+  samplePanelVisualizations2,
+  sampleMetricsVisualizations,
+  samplePrometheusVisualizationComponent,
+  samplePrometheusVisualizationId,
+  sampleLayout,
+  sampleVisualizationsList,
+  sampleMergedVisualizations,
+  samplePrometheusSampleUpdateWithSelections,
+  sampleSavedMetric,
+  sampleSavedMetricUpdate,
+} from '../../../../../test/metrics_contants';
+import _ from 'lodash';
+
+describe('Utils helper functions', () => {
+  configure({ adapter: new Adapter() });
+
+  it('validates onTimeChange function', () => {
+    const setRecentlyUsedRanges = jest.fn((x) => x);
+    const setStart = jest.fn();
+    const setEnd = jest.fn();
+    const recentlyUsedRanges: DurationRange[] = [];
+    onTimeChange(
+      '2022-01-30T18:44:40.577Z',
+      '2022-02-25T19:18:33.075Z',
+      recentlyUsedRanges,
+      setRecentlyUsedRanges,
+      setStart,
+      setEnd
+    );
+    expect(setRecentlyUsedRanges).toHaveBeenCalledWith([
+      { start: '2022-01-30T18:44:40.577Z', end: '2022-02-25T19:18:33.075Z' },
+    ]);
+    expect(setStart).toHaveBeenCalledWith('2022-01-30T18:44:40.577Z');
+    expect(setEnd).toHaveBeenCalledWith('2022-02-25T19:18:33.075Z');
+  });
+
+  it('validates getNewVizDimensions function', () => {
+    expect(getNewVizDimensions([])).toMatchObject({
+      x: 0,
+      y: 0,
+      w: 12,
+      h: 2,
+    });
+
+    expect(getNewVizDimensions(samplePanelVisualizations1)).toStrictEqual(samplenewDimensions1);
+    expect(getNewVizDimensions(samplePanelVisualizations2)).toStrictEqual(samplenewDimensions2);
+  });
+
+  it('validates sortMetricLayout function', () => {
+    expect(sortMetricLayout(_.shuffle(sampleMetricsVisualizations))).toStrictEqual(
+      sampleMetricsVisualizations
+    );
+
+    expect(sortMetricLayout(_.shuffle(sampleMetricsVisualizations))).toStrictEqual(
+      sampleMetricsVisualizations
+    );
+  });
+
+  it('validates mergeLayoutAndMetrics function', () => {
+    expect(mergeLayoutAndMetrics(sampleLayout, sampleVisualizationsList)).toStrictEqual(
+      sampleMergedVisualizations
+    );
+  });
+
+  it('validates createPrometheusMetricById function', () => {
+    expect(createPrometheusMetricById(samplePrometheusVisualizationId)).toStrictEqual(
+      samplePrometheusVisualizationComponent
+    );
+  });
+
+  it('validates updateMetricsWithSelections function', () => {
+    expect(
+      updateMetricsWithSelections(samplePrometheusVisualizationComponent, 'now-1d', 'now', '1h')
+    ).toStrictEqual(samplePrometheusSampleUpdateWithSelections);
+
+    expect(updateMetricsWithSelections(sampleSavedMetric, 'now-30m', 'now', '1m')).toStrictEqual(
+      sampleSavedMetricUpdate
+    );
+  });
+});
diff --git a/public/components/metrics/helpers/utils.tsx b/public/components/metrics/helpers/utils.tsx
new file mode 100644
index 0000000000..dd7524bd3c
--- /dev/null
+++ b/public/components/metrics/helpers/utils.tsx
@@ -0,0 +1,212 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import dateMath from '@elastic/datemath';
+import { ShortDate } from '@elastic/eui';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import _ from 'lodash';
+import React from 'react';
+import { Layout } from 'react-grid-layout';
+import { VISUALIZATION, SAVED_VISUALIZATION } from '../../../../common/constants/metrics';
+import {
+  EVENT_ANALYTICS,
+  OBSERVABILITY_BASE,
+  SAVED_OBJECTS,
+} from '../../../../common/constants/shared';
+import PPLService from '../../../services/requests/ppl';
+import { CoreStart } from '../../../../../../src/core/public';
+import { MetricType } from '../../../../common/types/metrics';
+import { VisualizationType } from '../../../../common/types/custom_panels';
+import { DEFAULT_METRIC_HEIGHT, DEFAULT_METRIC_WIDTH } from '../../../../common/constants/metrics';
+import { UNITS_OF_MEASURE } from '../../../../common/constants/explorer';
+import { updateQuerySpanInterval } from '../../custom_panels/helpers/utils';
+
+export const onTimeChange = (
+  start: ShortDate,
+  end: ShortDate,
+  recentlyUsedRanges: DurationRange[],
+  setRecentlyUsedRanges: React.Dispatch<React.SetStateAction<DurationRange[]>>,
+  setStart: React.Dispatch<React.SetStateAction<string>>,
+  setEnd: React.Dispatch<React.SetStateAction<string>>
+) => {
+  const recentlyUsedRange = recentlyUsedRanges.filter((recentlyUsedRange) => {
+    const isDuplicate = recentlyUsedRange.start === start && recentlyUsedRange.end === end;
+    return !isDuplicate;
+  });
+  recentlyUsedRange.unshift({ start, end });
+  setStart(start);
+  setEnd(end);
+  setRecentlyUsedRanges(recentlyUsedRange.slice(0, 9));
+};
+
+// PPL Service requestor
+export const pplServiceRequestor = (pplService: PPLService, finalQuery: string) => {
+  return pplService.fetch({ query: finalQuery, format: VISUALIZATION }).catch((error: Error) => {
+    console.error(error);
+  });
+};
+
+// Observability backend to fetch visualizations/custom metrics
+export const getVisualizations = (http: CoreStart['http']) => {
+  return http
+    .get(`${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}`, {
+      query: { objectType: [SAVED_VISUALIZATION] },
+    })
+    .catch((err) => {
+      console.error('Issue in fetching all saved visualizations', err);
+    });
+};
+
+interface boxType {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+const calculatOverlapArea = (bb1: boxType, bb2: boxType) => {
+  const x_left = Math.max(bb1.x1, bb2.x1);
+  const y_top = Math.max(bb1.y1, bb2.y1);
+  const x_right = Math.min(bb1.x2, bb2.x2);
+  const y_bottom = Math.min(bb1.y2, bb2.y2);
+
+  if (x_right < x_left || y_bottom < y_top) return 0;
+  return (x_right - x_left) * (y_bottom - y_top);
+};
+
+const getTotalOverlapArea = (panelVisualizations: MetricType[]) => {
+  const newVizBox = { x1: 0, y1: 0, x2: DEFAULT_METRIC_WIDTH, y2: DEFAULT_METRIC_HEIGHT };
+  const currentVizBoxes = panelVisualizations.map((visualization) => {
+    return {
+      x1: visualization.x,
+      y1: visualization.y,
+      x2: visualization.x + visualization.w,
+      y2: visualization.y + visualization.h,
+    };
+  });
+
+  let isOverlapping = 0;
+  currentVizBoxes.map((viz) => {
+    isOverlapping += calculatOverlapArea(viz, newVizBox);
+  });
+  return isOverlapping;
+};
+
+// We want to check if the new visualization being added, can be placed at { x: 0, y: 0, w: 6, h: 4 };
+// To check this we try to calculate overlap between all the current visualizations and new visualization
+// if there is no overalap (i.e Total Overlap Area is 0), we place the new viz. in default position
+// else, we add it to the bottom of the panel
+export const getNewVizDimensions = (panelVisualizations: MetricType[]) => {
+  let maxY: number = 0;
+  let maxYH: number = 0;
+
+  // check if we can place the new visualization at default location
+  if (getTotalOverlapArea(panelVisualizations) === 0) {
+    return { x: 0, y: 0, w: DEFAULT_METRIC_WIDTH, h: DEFAULT_METRIC_HEIGHT };
+  }
+
+  // else place the new visualization at the bottom of the panel
+  panelVisualizations.map((panelVisualization: MetricType) => {
+    if (panelVisualization.y >= maxY) {
+      maxY = panelVisualization.y;
+      maxYH = panelVisualization.h;
+    }
+  });
+
+  return { x: 0, y: maxY + maxYH, w: DEFAULT_METRIC_WIDTH, h: DEFAULT_METRIC_HEIGHT };
+};
+
+export const getMinSpanInterval = (start: any, end: any) => {
+  const momentStart = dateMath.parse(start)!;
+  const momentEnd = dateMath.parse(end, { roundUp: true })!;
+  const diffSeconds = momentEnd.unix() - momentStart.unix();
+  let minInterval;
+  // // less than 1 second
+  // if (diffSeconds <= 1) minInterval = 'ms';
+  // less than 2 minutes
+  if (diffSeconds <= 60 * 2) minInterval = 's';
+  // less than 2 hours
+  else if (diffSeconds <= 3600 * 2) minInterval = 'm';
+  // less than 2 days
+  else if (diffSeconds <= 86400 * 2) minInterval = 'h';
+  // less than 1 month
+  else if (diffSeconds <= 86400 * 31) minInterval = 'd';
+  // less than 3 months
+  else if (diffSeconds <= 86400 * 93) minInterval = 'w';
+  // less than 1 year
+  else if (diffSeconds <= 86400 * 366) minInterval = 'M';
+
+  return minInterval;
+};
+
+// Merges new layout into visualizations
+export const mergeLayoutAndMetrics = (
+  layout: Layout[],
+  newVisualizationList: VisualizationType[]
+) => {
+  const newPanelVisualizations: VisualizationType[] = [];
+
+  for (let i = 0; i < newVisualizationList.length; i++) {
+    for (let j = 0; j < layout.length; j++) {
+      if (newVisualizationList[i].id == layout[j].i) {
+        newPanelVisualizations.push({
+          ...newVisualizationList[i],
+          x: layout[j].x,
+          y: layout[j].y,
+          w: layout[j].w,
+          h: layout[j].h,
+        });
+      }
+    }
+  }
+  return newPanelVisualizations;
+};
+
+export const sortMetricLayout = (metricsLayout: MetricType[]) => {
+  return metricsLayout.sort((a: MetricType, b: MetricType) => {
+    if (a.y > b.y) return 1;
+    if (a.y < b.y) return -1;
+    else return 0;
+  });
+};
+
+export const createPrometheusMetricById = (metricId: string) => {
+  return {
+    name: '[Prometheus Metric] ' + metricId,
+    description: '',
+    query: 'source = ' + metricId + ' | stats avg(@value) by span(@timestamp,1h)',
+    type: 'line',
+    timeField: '@timestamp',
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+    sub_type: 'metric',
+    user_configs: {},
+  };
+};
+
+export const updateMetricsWithSelections = (
+  savedVisualization: any,
+  startTime: ShortDate,
+  endTime: ShortDate,
+  spanValue: string
+) => {
+  return {
+    query: updateQuerySpanInterval(
+      savedVisualization.query,
+      savedVisualization.timeField,
+      spanValue
+    ),
+    fields: savedVisualization.selected_fields.tokens,
+    dateRange: [startTime, endTime],
+    timestamp: savedVisualization.timeField,
+    name: savedVisualization.name,
+    description: savedVisualization.description,
+    type: 'line',
+    subType: 'metric',
+    userConfigs: JSON.stringify(savedVisualization.user_configs),
+  };
+};
diff --git a/public/components/metrics/index.scss b/public/components/metrics/index.scss
new file mode 100644
index 0000000000..1b96965459
--- /dev/null
+++ b/public/components/metrics/index.scss
@@ -0,0 +1,24 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+#opensearch-dashboards-body {
+  overflow-y: hidden;
+}
+
+.liveStream {
+  margin : 8px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  display: flex;
+  flex-grow: 1;
+  vertical-align: baseline;
+}
+
+.mainContentTabs .euiResizableContainer {
+  height: calc(100vh - 298px);
+}
+  
\ No newline at end of file
diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
new file mode 100644
index 0000000000..0647cdaba3
--- /dev/null
+++ b/public/components/metrics/index.tsx
@@ -0,0 +1,225 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './index.scss';
+import {
+  EuiButtonIcon,
+  EuiGlobalToastList,
+  EuiPage,
+  EuiPageBody,
+  htmlIdGenerator,
+  OnTimeChangeProps,
+  ShortDate,
+} from '@elastic/eui';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import React, { useEffect, useState } from 'react';
+import { Route, RouteComponentProps } from 'react-router-dom';
+import classNames from 'classnames';
+import { StaticContext } from 'react-router-dom';
+import { ChromeBreadcrumb, CoreStart, Toast } from '../../../../../src/core/public';
+import { onTimeChange } from './helpers/utils';
+import { Sidebar } from './sidebar/sidebar';
+import { EmptyMetricsView } from './view/empty_view';
+import PPLService from '../../services/requests/ppl';
+import { TopMenu } from './top_menu/top_menu';
+import { MetricType } from '../../../common/types/metrics';
+import { MetricsGrid } from './view/metrics_grid';
+import { useSelector } from 'react-redux';
+import { metricsLayoutSelector, selectedMetricsSelector } from './redux/slices/metrics_slice';
+import { resolutionOptions } from '../../../common/constants/metrics';
+import SavedObjects from '../../services/saved_objects/event_analytics/saved_objects';
+
+interface MetricsProps {
+  http: CoreStart['http'];
+  chrome: CoreStart['chrome'];
+  parentBreadcrumb: ChromeBreadcrumb;
+  renderProps: RouteComponentProps<any, StaticContext, any>;
+  pplService: PPLService;
+  savedObjects: SavedObjects;
+}
+
+export const Home = ({
+  http,
+  chrome,
+  parentBreadcrumb,
+  renderProps,
+  pplService,
+  savedObjects,
+}: MetricsProps) => {
+  // Redux tools
+  const selectedMetrics = useSelector(selectedMetricsSelector);
+  const metricsLayout = useSelector(metricsLayoutSelector);
+
+  // Date picker constants
+  const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<DurationRange[]>([]);
+  const [startTime, setStartTime] = useState<ShortDate>('now-1d');
+  const [endTime, setEndTime] = useState<ShortDate>('now');
+
+  // Top panel
+  const [IsTopPanelDisabled, setIsTopPanelDisabled] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [onRefresh, setOnRefresh] = useState(false);
+  const [editActionType, setEditActionType] = useState('');
+  const [resolutionValue, setResolutionValue] = useState(resolutionOptions[2].value);
+  const [spanValue, setSpanValue] = useState(1);
+  const resolutionSelectId = htmlIdGenerator('resolutionSelect')();
+  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [toastRightSide, setToastRightSide] = useState<boolean>(true);
+  const [search, setSearch] = useState<boolean>(false);
+
+  // Side bar constants
+  const [isSidebarClosed, setIsSidebarClosed] = useState(false);
+
+  // Metrics constants
+  const [panelVisualizations, setPanelVisualizations] = useState<MetricType[]>([]);
+
+  const setToast = (title: string, color = 'success', text?: ReactChild, side?: string) => {
+    if (!text) text = '';
+    setToastRightSide(!side ? true : false);
+    setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
+  };
+
+  const onRefreshFilters = (startTime: ShortDate, endTime: ShortDate) => {
+    if (spanValue < 1) {
+      setToast('Please add a valid span interval', 'danger');
+      return;
+    }
+    setOnRefresh(!onRefresh);
+  };
+
+  const onDatePickerChange = (props: OnTimeChangeProps) => {
+    onTimeChange(
+      props.start,
+      props.end,
+      recentlyUsedRanges,
+      setRecentlyUsedRanges,
+      setStartTime,
+      setEndTime
+    );
+    onRefreshFilters(props.start, props.end);
+  };
+
+  const onEditClick = (savedVisualizationId: string) => {
+    window.location.assign(`#/event_analytics/explorer/${savedVisualizationId}`);
+  };
+
+  const onSideBarClick = () => {
+    setIsSidebarClosed((staleState) => {
+      return !staleState;
+    });
+    setTimeout(function () {
+      window.dispatchEvent(new Event('resize'));
+    }, 300);
+  };
+
+  useEffect(() => {
+    if (!editMode) {
+      selectedMetrics.length > 0 ? setIsTopPanelDisabled(false) : setIsTopPanelDisabled(true);
+    } else {
+      setIsTopPanelDisabled(true);
+    }
+  }, [selectedMetrics, editMode]);
+
+  useEffect(() => {
+    setPanelVisualizations(metricsLayout);
+  }, [metricsLayout]);
+
+  const mainSectionClassName = classNames({
+    'col-md-10': !isSidebarClosed,
+    'col-md-12': isSidebarClosed,
+  });
+
+  const sidebarClassName = classNames({
+    closed: isSidebarClosed,
+  });
+
+  return (
+    <>
+      <EuiGlobalToastList
+        toasts={toasts}
+        dismissToast={(removedToast) => {
+          setToasts(toasts.filter((toast) => toast.id !== removedToast.id));
+        }}
+        side={toastRightSide ? 'right' : 'left'}
+        toastLifeTimeMs={6000}
+      />
+      <Route
+        exact
+        path="/metrics_analytics"
+        render={(props) => (
+          <div>
+            <EuiPage>
+              <EuiPageBody component="div">
+                <TopMenu
+                  http={http}
+                  IsTopPanelDisabled={IsTopPanelDisabled}
+                  startTime={startTime}
+                  endTime={endTime}
+                  onDatePickerChange={onDatePickerChange}
+                  recentlyUsedRanges={recentlyUsedRanges}
+                  editMode={editMode}
+                  setEditMode={setEditMode}
+                  setEditActionType={setEditActionType}
+                  panelVisualizations={panelVisualizations}
+                  setPanelVisualizations={setPanelVisualizations}
+                  resolutionValue={resolutionValue}
+                  setResolutionValue={setResolutionValue}
+                  spanValue={spanValue}
+                  setSpanValue={setSpanValue}
+                  resolutionSelectId={resolutionSelectId}
+                  savedObjects={savedObjects}
+                  setToast={setToast}
+                  setSearch={setSearch}
+                />
+                <div className="dscAppContainer">
+                  <div
+                    className={`col-md-2 dscSidebar__container dscCollapsibleSidebar ${sidebarClassName}`}
+                  >
+                    <div className="">
+                      {!isSidebarClosed && (
+                        <Sidebar http={http} pplService={pplService} search={search} />
+                      )}
+                      <EuiButtonIcon
+                        iconType={isSidebarClosed ? 'menuRight' : 'menuLeft'}
+                        iconSize="m"
+                        size="s"
+                        onClick={() => onSideBarClick()}
+                        data-test-subj="collapseSideBarButton"
+                        aria-controls="discover-sidebar"
+                        aria-expanded={isSidebarClosed ? 'false' : 'true'}
+                        aria-label="Toggle sidebar"
+                        className="dscCollapsibleSidebar__collapseButton"
+                      />
+                    </div>
+                  </div>
+                  <div className={`dscWrapper ${mainSectionClassName}`}>
+                    {selectedMetrics.length > 0 ? (
+                      <MetricsGrid
+                        http={http}
+                        chrome={chrome}
+                        panelVisualizations={panelVisualizations}
+                        setPanelVisualizations={setPanelVisualizations}
+                        editMode={editMode}
+                        pplService={pplService}
+                        startTime={startTime}
+                        endTime={endTime}
+                        moveToEvents={onEditClick}
+                        onRefresh={onRefresh}
+                        editActionType={editActionType}
+                        spanParam={spanValue + resolutionValue}
+                      />
+                    ) : (
+                      <EmptyMetricsView />
+                    )}
+                  </div>
+                </div>
+              </EuiPageBody>
+            </EuiPage>
+          </div>
+        )}
+      />
+    </>
+  );
+};
diff --git a/public/components/metrics/redux/slices/metrics_slice.ts b/public/components/metrics/redux/slices/metrics_slice.ts
new file mode 100644
index 0000000000..7620e6a7ed
--- /dev/null
+++ b/public/components/metrics/redux/slices/metrics_slice.ts
@@ -0,0 +1,176 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import {
+  PPL_DATASOURCES_REQUEST,
+  REDUX_SLICE_METRICS,
+} from '../../../../../common/constants/metrics';
+import {
+  pplServiceRequestor,
+  getVisualizations,
+  getNewVizDimensions,
+  sortMetricLayout,
+} from '../../helpers/utils';
+import PPLService from '../../../../services/requests/ppl';
+import { MetricType } from '../../../../../common/types/metrics';
+
+const initialState = {
+  pplService: PPLService,
+  metrics: [],
+  selected: [],
+  searched: [],
+  metricsLayout: [],
+};
+
+export const loadMetrics = createAsyncThunk('metrics/loadData', async (services: any) => {
+  const { http, pplService } = services;
+  const customData = await fetchCustomMetrics(http);
+  const remoteData = await fetchRemoteMetrics(pplService);
+
+  return Promise.all([customData, ...remoteData]).then((datasets) => datasets.flat());
+});
+
+const fetchCustomMetrics = async (http: any) => {
+  const dataSet = await getVisualizations(http);
+  const savedMetrics = dataSet.observabilityObjectList.filter(
+    (obj: any) => obj.savedVisualization.sub_type === 'metric'
+  );
+  const normalizedData = savedMetrics.map((obj: any) => ({
+    id: obj.objectId,
+    name: obj.savedVisualization.name,
+    catalog: 'CUSTOM_METRICS',
+    type: obj.savedVisualization.type,
+    recentlyCreated: (Date.now() - obj.createdTimeMs) / 36e5 <= 12,
+  }));
+  return normalizedData;
+};
+
+const fetchRemoteMetrics = async (pplService: any) => {
+  const dataSet = [];
+  const dataSources = await pplServiceRequestor(pplService, PPL_DATASOURCES_REQUEST);
+  for (const dataSource of dataSources.jsonData) {
+    const catalogData = await pplServiceRequestor(
+      pplService,
+      `source = ${dataSource.DATASOURCE_NAME}.information_schema.tables`
+    );
+    const normalizedData = catalogData.jsonData.map((obj: any) => ({
+      id: `${obj.TABLE_CATALOG}.${obj.TABLE_NAME}`,
+      name: `${obj.TABLE_CATALOG}.${obj.TABLE_NAME}`,
+      catalog: `${dataSource.DATASOURCE_NAME}`,
+      type: obj.TABLE_TYPE,
+      recentlyCreated: false,
+    }));
+    dataSet.push(normalizedData);
+  }
+  return dataSet;
+};
+
+const updateLayoutBySelection = (state: any, newMetric: any) => {
+  const newDimensions = getNewVizDimensions(state.metricsLayout);
+
+  const metricVisualization: MetricType = {
+    id: newMetric.id,
+    savedVisualizationId: newMetric.id,
+    x: newDimensions.x,
+    y: newDimensions.y,
+    h: newDimensions.h,
+    w: newDimensions.w,
+    metricType: newMetric.catalog === 'CUSTOM_METRICS' ? 'savedCustomMetric' : 'prometheusMetric',
+  };
+  state.metricsLayout = [...state.metricsLayout, metricVisualization];
+};
+
+const updateLayoutByDeSelection = (state: any, newMetric: any) => {
+  const sortedMetricsLayout = sortMetricLayout(state.metricsLayout);
+
+  let newMetricsLayout = [] as MetricType[];
+  let heightSubtract = 0;
+
+  sortedMetricsLayout.map((metricLayout: MetricType) => {
+    if (metricLayout.id !== newMetric.id) {
+      metricLayout.y = metricLayout.y - heightSubtract;
+      newMetricsLayout.push(metricLayout);
+    } else {
+      heightSubtract = metricLayout.h;
+    }
+  });
+  state.metricsLayout = newMetricsLayout;
+};
+
+const filterDeletedLayoutIds = (state: any, payload: any) => {
+  let deletedMetricIds: string[] = [];
+  const payloadIds = payload.map((metric: any) => metric.id);
+  state.metricsLayout.map((metricLayout: MetricType) => {
+    if (!payloadIds.includes(metricLayout.id)) deletedMetricIds.push(metricLayout.id);
+  });
+  deletedMetricIds.map((metricId: string) => updateLayoutByDeSelection(state, { id: metricId }));
+};
+
+export const metricSlice = createSlice({
+  name: REDUX_SLICE_METRICS,
+  initialState,
+  reducers: {
+    selectMetric: (state, { payload }) => {
+      state.selected.push(payload.id);
+      updateLayoutBySelection(state, payload);
+    },
+    deSelectMetric: (state, { payload }) => {
+      updateLayoutByDeSelection(state, payload);
+      state.selected = state.selected.filter((id) => id !== payload.id);
+    },
+    searchMetric: (state, { payload }) => {
+      state.searched = state.metrics.filter(
+        (metric: any) => metric.name.includes(payload.id) && !state.selected.includes(payload.id)
+      );
+    },
+    clearSearchedMetrics: (state, { payload }) => {
+      state.searched = [];
+    },
+    updateMetricsLayout: (state, { payload }) => {
+      state.metricsLayout = payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(loadMetrics.fulfilled, (state, { payload }) => {
+      state.metrics = payload;
+      state.searched = [];
+      filterDeletedLayoutIds(state, payload);
+    });
+  },
+});
+
+export const {
+  deSelectMetric,
+  selectMetric,
+  updateMetricsLayout,
+  searchMetric,
+  clearSearchedMetrics,
+} = metricSlice.actions;
+
+export const metricsStateSelector = (state) => state.metrics;
+
+export const availableMetricsSelector = (state) =>
+  state.metrics.metrics.filter(
+    (metric) => !state.metrics.selected.includes(metric.id) && !metric.recentlyCreated
+  );
+
+export const selectedMetricsSelector = (state) =>
+  state.metrics.metrics.filter((metric) => state.metrics.selected.includes(metric.id));
+
+export const recentlyCreatedMetricsSelector = (state) =>
+  state.metrics.metrics.filter(
+    (metric) => !state.metrics.selected.includes(metric.id) && metric.recentlyCreated
+  );
+
+export const searchedMetricsSelector = (state) =>
+  state.metrics.searched.filter((metric) => !state.metrics.selected.includes(metric.id));
+
+export const allAvailableMetricsSelector = (state) =>
+  state.metrics.metrics.filter((metric) => !state.metrics.selected.includes(metric.id));
+
+export const metricsLayoutSelector = (state) => state.metrics.metricsLayout;
+
+export default metricSlice.reducer;
diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
new file mode 100644
index 0000000000..1a271b63c5
--- /dev/null
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/searchbar.test.tsx.snap
@@ -0,0 +1,295 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search Bar Component Search Side Bar Component with available metrics 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <SearchBar
+    setSearch={[MockFunction]}
+  >
+    <div>
+      <EuiSearchBar
+        box={
+          Object {
+            "incremental": true,
+            "placeholder": "Search for metrics",
+          }
+        }
+        defaultQuery=""
+        onChange={[Function]}
+      >
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="m"
+          wrap={true}
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+          >
+            <EuiFlexItem
+              className="euiSearchBar__searchHolder"
+              grow={true}
+            >
+              <div
+                className="euiFlexItem euiSearchBar__searchHolder"
+              >
+                <EuiSearchBox
+                  incremental={true}
+                  isInvalid={false}
+                  onSearch={[Function]}
+                  placeholder="Search for metrics"
+                  query=""
+                >
+                  <EuiFieldSearch
+                    aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                    compressed={false}
+                    defaultValue=""
+                    fullWidth={true}
+                    incremental={true}
+                    inputRef={[Function]}
+                    isClearable={true}
+                    isInvalid={false}
+                    isLoading={false}
+                    onSearch={[Function]}
+                    placeholder="Search for metrics"
+                  >
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={true}
+                      icon="search"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiValidatableControl
+                            isInvalid={false}
+                          >
+                            <input
+                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                              className="euiFieldSearch euiFieldSearch--fullWidth"
+                              defaultValue=""
+                              onKeyUp={[Function]}
+                              placeholder="Search for metrics"
+                              type="search"
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
+                            >
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
+                              >
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
+                                  >
+                                    <EuiIconSearch
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </EuiIconSearch>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                </EuiSearchBox>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </EuiSearchBar>
+    </div>
+  </SearchBar>
+</Provider>
+`;
+
+exports[`Search Bar Component Search Side Bar Component with no available metrics 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <SearchBar
+    setSearch={[MockFunction]}
+  >
+    <div>
+      <EuiSearchBar
+        box={
+          Object {
+            "incremental": true,
+            "placeholder": "Search for metrics",
+          }
+        }
+        defaultQuery=""
+        onChange={[Function]}
+      >
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="m"
+          wrap={true}
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+          >
+            <EuiFlexItem
+              className="euiSearchBar__searchHolder"
+              grow={true}
+            >
+              <div
+                className="euiFlexItem euiSearchBar__searchHolder"
+              >
+                <EuiSearchBox
+                  incremental={true}
+                  isInvalid={false}
+                  onSearch={[Function]}
+                  placeholder="Search for metrics"
+                  query=""
+                >
+                  <EuiFieldSearch
+                    aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                    compressed={false}
+                    defaultValue=""
+                    fullWidth={true}
+                    incremental={true}
+                    inputRef={[Function]}
+                    isClearable={true}
+                    isInvalid={false}
+                    isLoading={false}
+                    onSearch={[Function]}
+                    placeholder="Search for metrics"
+                  >
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={true}
+                      icon="search"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiValidatableControl
+                            isInvalid={false}
+                          >
+                            <input
+                              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                              className="euiFieldSearch euiFieldSearch--fullWidth"
+                              defaultValue=""
+                              onKeyUp={[Function]}
+                              placeholder="Search for metrics"
+                              type="search"
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
+                            >
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
+                              >
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                </EuiSearchBox>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </EuiSearchBar>
+    </div>
+  </SearchBar>
+</Provider>
+`;
diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
new file mode 100644
index 0000000000..b4ba2e2b76
--- /dev/null
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -0,0 +1,446 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Side Bar Component renders Side Bar Component 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <Sidebar
+    http={[MockFunction]}
+    pplService={
+      PPLService {
+        "fetch": [Function],
+        "http": [MockFunction],
+      }
+    }
+    search={false}
+  >
+    <I18nProvider>
+      <IntlProvider
+        defaultLocale="en"
+        formats={
+          Object {
+            "date": Object {
+              "full": Object {
+                "day": "numeric",
+                "month": "long",
+                "weekday": "long",
+                "year": "numeric",
+              },
+              "long": Object {
+                "day": "numeric",
+                "month": "long",
+                "year": "numeric",
+              },
+              "medium": Object {
+                "day": "numeric",
+                "month": "short",
+                "year": "numeric",
+              },
+              "short": Object {
+                "day": "numeric",
+                "month": "numeric",
+                "year": "2-digit",
+              },
+            },
+            "number": Object {
+              "currency": Object {
+                "style": "currency",
+              },
+              "percent": Object {
+                "style": "percent",
+              },
+            },
+            "relative": Object {
+              "days": Object {
+                "units": "day",
+              },
+              "hours": Object {
+                "units": "hour",
+              },
+              "minutes": Object {
+                "units": "minute",
+              },
+              "months": Object {
+                "units": "month",
+              },
+              "seconds": Object {
+                "units": "second",
+              },
+              "years": Object {
+                "units": "year",
+              },
+            },
+            "time": Object {
+              "full": Object {
+                "hour": "numeric",
+                "minute": "numeric",
+                "second": "numeric",
+                "timeZoneName": "short",
+              },
+              "long": Object {
+                "hour": "numeric",
+                "minute": "numeric",
+                "second": "numeric",
+                "timeZoneName": "short",
+              },
+              "medium": Object {
+                "hour": "numeric",
+                "minute": "numeric",
+                "second": "numeric",
+              },
+              "short": Object {
+                "hour": "numeric",
+                "minute": "numeric",
+              },
+            },
+          }
+        }
+        locale="en"
+        messages={Object {}}
+        textComponent={Symbol(react.fragment)}
+      >
+        <PseudoLocaleWrapper>
+          <section
+            className="sidebarHeight"
+          >
+            <MetricsAccordion
+              handleClick={[Function]}
+              headerName="Recently Created Metrics"
+              metricsList={Array []}
+            >
+              <EuiAccordion
+                arrowDisplay="left"
+                buttonContent={
+                  <EuiTitle
+                    size="xxxs"
+                  >
+                    <span>
+                      Recently Created Metrics
+                    </span>
+                  </EuiTitle>
+                }
+                id="Recently Created MetricsSelector"
+                initialIsOpen={true}
+                isLoading={false}
+                isLoadingMessage={false}
+                paddingSize="none"
+              >
+                <div
+                  className="euiAccordion euiAccordion-isOpen"
+                >
+                  <div
+                    className="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="Recently Created MetricsSelector"
+                      aria-expanded={true}
+                      className="euiAccordion__button"
+                      id="random_html_id"
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <span
+                        className="euiAccordion__iconWrapper"
+                      >
+                        <EuiIcon
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          size="m"
+                          type="arrowRight"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </span>
+                      <span
+                        className="euiIEFlexWrapFix"
+                      >
+                        <EuiTitle
+                          size="xxxs"
+                        >
+                          <span
+                            className="euiTitle euiTitle--xxxsmall"
+                          >
+                            Recently Created Metrics
+                          </span>
+                        </EuiTitle>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    className="euiAccordion__childWrapper"
+                    id="Recently Created MetricsSelector"
+                    role="region"
+                    tabIndex={-1}
+                  >
+                    <EuiResizeObserver
+                      onResize={[Function]}
+                    >
+                      <div>
+                        <div
+                          className=""
+                        >
+                          <ul
+                            className="metricsList"
+                          />
+                        </div>
+                      </div>
+                    </EuiResizeObserver>
+                  </div>
+                </div>
+              </EuiAccordion>
+            </MetricsAccordion>
+            <EuiSpacer
+              size="s"
+            >
+              <div
+                className="euiSpacer euiSpacer--s"
+              />
+            </EuiSpacer>
+            <MetricsAccordion
+              handleClick={[Function]}
+              headerName="Selected Metrics"
+              metricsList={Array []}
+            >
+              <EuiAccordion
+                arrowDisplay="left"
+                buttonContent={
+                  <EuiTitle
+                    size="xxxs"
+                  >
+                    <span>
+                      Selected Metrics
+                    </span>
+                  </EuiTitle>
+                }
+                id="Selected MetricsSelector"
+                initialIsOpen={true}
+                isLoading={false}
+                isLoadingMessage={false}
+                paddingSize="none"
+              >
+                <div
+                  className="euiAccordion euiAccordion-isOpen"
+                >
+                  <div
+                    className="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="Selected MetricsSelector"
+                      aria-expanded={true}
+                      className="euiAccordion__button"
+                      id="random_html_id"
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <span
+                        className="euiAccordion__iconWrapper"
+                      >
+                        <EuiIcon
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          size="m"
+                          type="arrowRight"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </span>
+                      <span
+                        className="euiIEFlexWrapFix"
+                      >
+                        <EuiTitle
+                          size="xxxs"
+                        >
+                          <span
+                            className="euiTitle euiTitle--xxxsmall"
+                          >
+                            Selected Metrics
+                          </span>
+                        </EuiTitle>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    className="euiAccordion__childWrapper"
+                    id="Selected MetricsSelector"
+                    role="region"
+                    tabIndex={-1}
+                  >
+                    <EuiResizeObserver
+                      onResize={[Function]}
+                    >
+                      <div>
+                        <div
+                          className=""
+                        >
+                          <ul
+                            className="metricsList"
+                          />
+                        </div>
+                      </div>
+                    </EuiResizeObserver>
+                  </div>
+                </div>
+              </EuiAccordion>
+            </MetricsAccordion>
+            <EuiSpacer
+              size="s"
+            >
+              <div
+                className="euiSpacer euiSpacer--s"
+              />
+            </EuiSpacer>
+            <MetricsAccordion
+              handleClick={[Function]}
+              headerName="Available Metrics"
+              metricsList={Array []}
+            >
+              <EuiAccordion
+                arrowDisplay="left"
+                buttonContent={
+                  <EuiTitle
+                    size="xxxs"
+                  >
+                    <span>
+                      Available Metrics
+                    </span>
+                  </EuiTitle>
+                }
+                id="Available MetricsSelector"
+                initialIsOpen={true}
+                isLoading={false}
+                isLoadingMessage={false}
+                paddingSize="none"
+              >
+                <div
+                  className="euiAccordion euiAccordion-isOpen"
+                >
+                  <div
+                    className="euiAccordion__triggerWrapper"
+                  >
+                    <button
+                      aria-controls="Available MetricsSelector"
+                      aria-expanded={true}
+                      className="euiAccordion__button"
+                      id="random_html_id"
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <span
+                        className="euiAccordion__iconWrapper"
+                      >
+                        <EuiIcon
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          size="m"
+                          type="arrowRight"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon euiAccordion__icon-isOpen"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </span>
+                      <span
+                        className="euiIEFlexWrapFix"
+                      >
+                        <EuiTitle
+                          size="xxxs"
+                        >
+                          <span
+                            className="euiTitle euiTitle--xxxsmall"
+                          >
+                            Available Metrics
+                          </span>
+                        </EuiTitle>
+                      </span>
+                    </button>
+                  </div>
+                  <div
+                    aria-labelledby="random_html_id"
+                    className="euiAccordion__childWrapper"
+                    id="Available MetricsSelector"
+                    role="region"
+                    tabIndex={-1}
+                  >
+                    <EuiResizeObserver
+                      onResize={[Function]}
+                    >
+                      <div>
+                        <div
+                          className=""
+                        >
+                          <ul
+                            className="metricsList"
+                          />
+                        </div>
+                      </div>
+                    </EuiResizeObserver>
+                  </div>
+                </div>
+              </EuiAccordion>
+            </MetricsAccordion>
+          </section>
+        </PseudoLocaleWrapper>
+      </IntlProvider>
+    </I18nProvider>
+  </Sidebar>
+</Provider>
+`;
diff --git a/public/components/metrics/sidebar/__tests__/searchbar.test.tsx b/public/components/metrics/sidebar/__tests__/searchbar.test.tsx
new file mode 100644
index 0000000000..cc84dc0ebc
--- /dev/null
+++ b/public/components/metrics/sidebar/__tests__/searchbar.test.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { SearchBar } from '../search_bar';
+import { Provider } from 'react-redux';
+import { applyMiddleware, createStore } from 'redux';
+import thunk from 'redux-thunk';
+import rootReducer from '../../../../framework/redux/reducers';
+
+describe('Search Bar Component', () => {
+  configure({ adapter: new Adapter() });
+  const store = createStore(rootReducer, applyMiddleware(thunk));
+
+  it('Search Side Bar Component with no available metrics', async () => {
+    const setSearch = jest.fn();
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <SearchBar setSearch={setSearch} />
+      </Provider>
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Search Side Bar Component with available metrics', async () => {
+    const setSearch = jest.fn();
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <SearchBar setSearch={setSearch} />
+      </Provider>
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/metrics/sidebar/__tests__/sidebar.test.tsx b/public/components/metrics/sidebar/__tests__/sidebar.test.tsx
new file mode 100644
index 0000000000..747201fa75
--- /dev/null
+++ b/public/components/metrics/sidebar/__tests__/sidebar.test.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
+import PPLService from '../../../../services/requests/ppl';
+import { applyMiddleware, createStore } from '@reduxjs/toolkit';
+import rootReducer from '../../../../framework/redux/reducers';
+import { Provider } from 'react-redux';
+import { Sidebar } from '../sidebar';
+import thunk from 'redux-thunk';
+
+describe('Side Bar Component', () => {
+  configure({ adapter: new Adapter() });
+  const store = createStore(rootReducer, applyMiddleware(thunk));
+
+  it('renders Side Bar Component', async () => {
+    httpClientMock.get = jest.fn();
+
+    const http = httpClientMock;
+    const pplService = new PPLService(httpClientMock);
+    const search = false;
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <Sidebar http={http} pplService={pplService} search={search} />
+      </Provider>
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/metrics/sidebar/metric_name.tsx b/public/components/metrics/sidebar/metric_name.tsx
new file mode 100644
index 0000000000..0998912bf5
--- /dev/null
+++ b/public/components/metrics/sidebar/metric_name.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiButtonEmpty, EuiToken } from '@elastic/eui';
+
+interface IMetricNameProps {
+  metric: any;
+  handleClick: (props: any) => void;
+}
+
+export const MetricName = (props: IMetricNameProps) => {
+  const { metric, handleClick } = props;
+
+  const title = metric.catalog === 'CUSTOM_METRICS' ? 'OpenSearch' : 'Prometheus';
+  const token =
+    metric.catalog === 'CUSTOM_METRICS'
+      ? '/ui/default_branding/opensearch_mark_default_mode.svg'
+      : 'tokenProperty';
+  const name = (metricName: string) => {
+    return metric.catalog === 'CUSTOM_METRICS' ? metricName : metricName.split('.')[1];
+  };
+
+  return (
+    <EuiButtonEmpty
+      className="eui-textTruncate"
+      title={metric.name}
+      onClick={() => handleClick(metric)}
+    >
+      <EuiToken
+        className="tokenMargin"
+        title={title}
+        iconType={token}
+        fill="light"
+        color="euiColorVis1"
+        shape="square"
+      />{' '}
+      {name(metric.name)}
+    </EuiButtonEmpty>
+  );
+};
diff --git a/public/components/metrics/sidebar/metrics_accordion.tsx b/public/components/metrics/sidebar/metrics_accordion.tsx
new file mode 100644
index 0000000000..71b42e6741
--- /dev/null
+++ b/public/components/metrics/sidebar/metrics_accordion.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiAccordion, EuiTitle } from '@elastic/eui';
+import { MetricName } from './metric_name';
+
+interface IMetricNameProps {
+  metricsList: [];
+  headerName: string;
+  handleClick: (props: any) => void;
+}
+
+export const MetricsAccordion = (props: IMetricNameProps) => {
+  const { metricsList, headerName, handleClick } = props;
+
+  return (
+    <EuiAccordion
+      initialIsOpen
+      id={`${headerName}Selector`}
+      buttonContent={
+        <EuiTitle size="xxxs">
+          <span>{headerName}</span>
+        </EuiTitle>
+      }
+      paddingSize="none"
+    >
+      <ul className="metricsList">
+        {metricsList.slice(0, 100).map((metric: any) => (
+          <li key={metric.id} className="metricsListContainer">
+            <MetricName metric={metric} handleClick={handleClick} />
+          </li>
+        ))}
+      </ul>
+      {metricsList.length > 100 && <p>Use search bar for searching through all metrics.</p>}
+    </EuiAccordion>
+  );
+};
diff --git a/public/components/metrics/sidebar/search_bar.tsx b/public/components/metrics/sidebar/search_bar.tsx
new file mode 100644
index 0000000000..fc56564750
--- /dev/null
+++ b/public/components/metrics/sidebar/search_bar.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiSearchBar } from '@elastic/eui';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { clearSearchedMetrics, searchMetric } from '../redux/slices/metrics_slice';
+
+interface ISearchBarProps {
+  setSearch: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const SearchBar = (props: ISearchBarProps) => {
+  const { setSearch } = props;
+
+  const dispatch = useDispatch();
+
+  const onChange = ({ query }: { query: any }) => {
+    if (query.text !== '') {
+      setSearch(true);
+      dispatch(searchMetric({ id: query.text }));
+    } else {
+      setSearch(false);
+      dispatch(clearSearchedMetrics({}));
+    }
+  };
+
+  return (
+    <div>
+      <EuiSearchBar
+        box={{
+          placeholder: 'Search for metrics',
+          incremental: true,
+        }}
+        defaultQuery={''}
+        onChange={onChange}
+      />
+    </div>
+  );
+};
diff --git a/public/components/metrics/sidebar/sidebar.scss b/public/components/metrics/sidebar/sidebar.scss
new file mode 100644
index 0000000000..9cba0fc766
--- /dev/null
+++ b/public/components/metrics/sidebar/sidebar.scss
@@ -0,0 +1,165 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.dscSidebar__container {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  background-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.dscIndexPattern__container {
+  display: flex;
+  align-items: center;
+  height: $euiSize * 3;
+  margin-top: -$euiSizeS;
+}
+
+.dscIndexPattern__triggerButton {
+  @include euiTitle('xs');
+  line-height: $euiSizeXXL;
+}
+
+.dscFieldList {
+  list-style: none;
+  margin-bottom: 0;
+}
+
+.dscFieldListHeader {
+  padding: $euiSizeS $euiSizeS 0 $euiSizeS;
+  background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
+}
+
+.dscFieldList--popular {
+  background-color: lightOrDarkTheme(tint($euiColorPrimary, 90%), $euiColorLightShade);
+}
+
+.dscFieldChooser__toggle {
+  color: $euiColorMediumShade;
+  margin-left: $euiSizeS  !important;
+}
+
+/**
+ * 1. Only visually hide the action, so that it's still accessible to screen readers.
+ * 2. When tabbed to, this element needs to be visible for keyboard accessibility.
+ */
+.dscSidebarItem__action {
+  opacity: 0;
+  /* 1 */
+  transition: none;
+
+  &:focus {
+    opacity: 1;
+    /* 2 */
+  }
+
+  font-size: $euiFontSizeXS;
+  padding: 2px 6px !important;
+  height: 22px !important;
+  min-width: auto !important;
+
+  .euiButton__content {
+    padding: 0 4px;
+  }
+}
+
+.dscFieldSearch {
+  padding: $euiSizeS;
+}
+
+.dscFieldSearch__toggleButton {
+  width: calc(100% - #{$euiSizeS});
+  color: $euiColorPrimary;
+  padding-left: $euiSizeXS;
+  margin-left: $euiSizeXS;
+}
+
+.dscFieldSearch__filterWrapper {
+  flex-grow: 0;
+}
+
+.dscFieldSearch__formWrapper {
+  padding: $euiSizeM;
+}
+
+.dscFieldDetails {
+  color: $euiTextColor;
+  margin-bottom: $euiSizeS;
+}
+
+.dscSidebarItem__fieldPopoverPanel {
+  min-width: 300px;
+  max-width: 600px;
+  max-height: 600px;
+  overflow-y: scroll;
+}
+
+.override_timestamp_loading {
+  vertical-align: middle;
+}
+
+.explorerFieldSelector {
+  padding: $euiSizeS;
+}
+
+#vis__mainContent {
+  .explorer__insights {
+    min-height: 0;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    height: 100%;
+
+    .explorerFieldSelector,
+    .explorer__vizDataConfig {
+      padding: $euiSizeS;
+      overflow: auto;
+
+      &__fieldGroups {
+        @include euiYScrollWithShadows;
+
+        overflow-y: auto;
+        margin-right: -$euiSizeS;
+        padding-right: $euiSizeS;
+        margin-top: $euiSizeS;
+      }
+
+      &__fieldGroup {
+        margin-top: $euiSizeS;
+
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+
+    .explorerFieldSelector {
+      @include euiYScrollWithShadows;
+
+      .sidebar-list {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.sidebarHeight {
+  line-height: normal;
+  overflow: auto;
+  max-height: 100vh;
+}
+
+.metricsList {
+  line-height: normal;
+}
+
+.metricsListContainer {
+  margin-left: 15px;
+  margin-right: 5px;
+}
+
+.tokenMargin {
+  vertical-align: middle;
+}
\ No newline at end of file
diff --git a/public/components/metrics/sidebar/sidebar.tsx b/public/components/metrics/sidebar/sidebar.tsx
new file mode 100644
index 0000000000..c137dec3be
--- /dev/null
+++ b/public/components/metrics/sidebar/sidebar.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './sidebar.scss';
+
+import React, { useEffect } from 'react';
+import { EuiSpacer } from '@elastic/eui';
+import { I18nProvider } from '@osd/i18n/react';
+import { batch, useDispatch, useSelector } from 'react-redux';
+import {
+  availableMetricsSelector,
+  deSelectMetric,
+  selectMetric,
+  loadMetrics,
+  selectedMetricsSelector,
+  recentlyCreatedMetricsSelector,
+  searchedMetricsSelector,
+} from '../redux/slices/metrics_slice';
+import { CoreStart } from '../../../../../../src/core/public';
+import PPLService from '../../../services/requests/ppl';
+import { MetricsAccordion } from './metrics_accordion';
+
+interface ISidebarProps {
+  http: CoreStart['http'];
+  pplService: PPLService;
+  search: boolean;
+}
+
+export const Sidebar = (props: ISidebarProps) => {
+  const { http, pplService, search } = props;
+  const dispatch = useDispatch();
+
+  const availableMetrics = useSelector(availableMetricsSelector);
+  const selectedMetrics = useSelector(selectedMetricsSelector);
+  const recentlyCreatedMetrics = useSelector(recentlyCreatedMetricsSelector);
+  const searchedMetrics = useSelector(searchedMetricsSelector);
+
+  useEffect(() => {
+    batch(() => {
+      dispatch(loadMetrics({ http, pplService }));
+    });
+  }, []);
+
+  const handleAddMetric = (metric: any) => dispatch(selectMetric(metric));
+
+  const handleRemoveMetric = (metric: any) => {
+    dispatch(deSelectMetric(metric));
+  };
+
+  const availableMetricsDisplay = search ? searchedMetrics : availableMetrics;
+
+  return (
+    <I18nProvider>
+      <section className="sidebarHeight">
+        <MetricsAccordion
+          metricsList={recentlyCreatedMetrics}
+          headerName="Recently Created Metrics"
+          handleClick={handleAddMetric}
+        />
+        <EuiSpacer size="s" />
+        <MetricsAccordion
+          metricsList={selectedMetrics}
+          headerName="Selected Metrics"
+          handleClick={handleRemoveMetric}
+        />
+        <EuiSpacer size="s" />
+        <MetricsAccordion
+          metricsList={availableMetricsDisplay}
+          headerName="Available Metrics"
+          handleClick={handleAddMetric}
+        />
+      </section>
+    </I18nProvider>
+  );
+};
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
new file mode 100644
index 0000000000..f9101b0eab
--- /dev/null
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
@@ -0,0 +1,315 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <MetricsExportPanel
+    http={[MockFunction]}
+    selectedPanelOptions={Array []}
+    setSelectedPanelOptions={[MockFunction]}
+    setVisualizationsMetaData={[MockFunction]}
+    sortedMetricsLayout={
+      Array [
+        Object {
+          "h": 2,
+          "id": "Y4muP4QBiaYaSxpXk7r8",
+          "metricType": "savedCustomMetric",
+          "savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
+          "w": 12,
+          "x": 0,
+          "y": 0,
+        },
+        Object {
+          "h": 2,
+          "id": "prometheus.process_resident_memory_bytes",
+          "metricType": "prometheusMetric",
+          "savedVisualizationId": "prometheus.process_resident_memory_bytes",
+          "w": 12,
+          "x": 0,
+          "y": 2,
+        },
+      ]
+    }
+    visualizationsMetaData={Array []}
+  >
+    <div
+      style={
+        Object {
+          "minWidth": "15vw",
+        }
+      }
+    >
+      <EuiFormRow
+        describedByIds={Array []}
+        display="row"
+        fullWidth={false}
+        hasChildLabel={true}
+        hasEmptyLabelSpace={false}
+        helpText="Search existing dashboards or applications by name"
+        label="Custom operational dashboards/application"
+        labelType="label"
+      >
+        <div
+          className="euiFormRow"
+          id="random_html_id-row"
+        >
+          <div
+            className="euiFormRow__labelWrapper"
+          >
+            <EuiFormLabel
+              className="euiFormRow__label"
+              htmlFor="random_html_id"
+              isFocused={false}
+              type="label"
+            >
+              <label
+                className="euiFormLabel euiFormRow__label"
+                htmlFor="random_html_id"
+              >
+                Custom operational dashboards/application
+              </label>
+            </EuiFormLabel>
+          </div>
+          <div
+            className="euiFormRow__fieldWrapper"
+          >
+            <EuiComboBox
+              aria-describedby="random_html_id-help-0"
+              async={false}
+              compressed={false}
+              data-test-subj="eventExplorer__querySaveComboBox"
+              fullWidth={false}
+              id="random_html_id"
+              isClearable={true}
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              options={Array []}
+              placeholder="Select dashboards/applications"
+              selectedOptions={Array []}
+              singleSelection={false}
+              sortMatchesBy="none"
+            >
+              <div
+                aria-describedby="random_html_id-help-0"
+                aria-expanded={false}
+                aria-haspopup="listbox"
+                className="euiComboBox"
+                data-test-subj="eventExplorer__querySaveComboBox"
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                role="combobox"
+              >
+                <EuiComboBoxInput
+                  autoSizeInputRef={[Function]}
+                  compressed={false}
+                  fullWidth={false}
+                  hasSelectedOptions={false}
+                  id="random_html_id"
+                  inputRef={[Function]}
+                  isListOpen={false}
+                  noIcon={false}
+                  onChange={[Function]}
+                  onClear={[Function]}
+                  onClick={[Function]}
+                  onCloseListClick={[Function]}
+                  onFocus={[Function]}
+                  onOpenListClick={[Function]}
+                  onRemoveOption={[Function]}
+                  placeholder="Select dashboards/applications"
+                  rootId={[Function]}
+                  searchValue=""
+                  selectedOptions={Array []}
+                  singleSelection={false}
+                  toggleButtonRef={[Function]}
+                  updatePosition={[Function]}
+                  value=""
+                >
+                  <EuiFormControlLayout
+                    compressed={false}
+                    fullWidth={false}
+                    icon={
+                      Object {
+                        "aria-label": "Open list of options",
+                        "data-test-subj": "comboBoxToggleListButton",
+                        "disabled": undefined,
+                        "onClick": [Function],
+                        "ref": [Function],
+                        "side": "right",
+                        "type": "arrowDown",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiFormControlLayout"
+                    >
+                      <div
+                        className="euiFormControlLayout__childrenWrapper"
+                      >
+                        <div
+                          className="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                          data-test-subj="comboBoxInput"
+                          onClick={[Function]}
+                          tabIndex={-1}
+                        >
+                          <p
+                            className="euiComboBoxPlaceholder"
+                          >
+                            Select dashboards/applications
+                          </p>
+                          <AutosizeInput
+                            aria-controls=""
+                            className="euiComboBox__input"
+                            data-test-subj="comboBoxSearchInput"
+                            id="random_html_id"
+                            injectStyles={true}
+                            inputRef={[Function]}
+                            minWidth={1}
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            role="textbox"
+                            style={
+                              Object {
+                                "fontSize": 14,
+                              }
+                            }
+                            value=""
+                          >
+                            <div
+                              className="euiComboBox__input"
+                              style={
+                                Object {
+                                  "display": "inline-block",
+                                  "fontSize": 14,
+                                }
+                              }
+                            >
+                              <input
+                                aria-controls=""
+                                data-test-subj="comboBoxSearchInput"
+                                id="random_html_id"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                role="textbox"
+                                style={
+                                  Object {
+                                    "boxSizing": "content-box",
+                                    "width": "2px",
+                                  }
+                                }
+                                value=""
+                              />
+                              <div
+                                style={
+                                  Object {
+                                    "height": 0,
+                                    "left": 0,
+                                    "overflow": "scroll",
+                                    "position": "absolute",
+                                    "top": 0,
+                                    "visibility": "hidden",
+                                    "whiteSpace": "pre",
+                                  }
+                                }
+                              />
+                            </div>
+                          </AutosizeInput>
+                        </div>
+                        <EuiFormControlLayoutIcons
+                          compressed={false}
+                          icon={
+                            Object {
+                              "aria-label": "Open list of options",
+                              "data-test-subj": "comboBoxToggleListButton",
+                              "disabled": undefined,
+                              "onClick": [Function],
+                              "ref": [Function],
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                        >
+                          <div
+                            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                          >
+                            <EuiFormControlLayoutCustomIcon
+                              aria-label="Open list of options"
+                              data-test-subj="comboBoxToggleListButton"
+                              iconRef={[Function]}
+                              onClick={[Function]}
+                              size="m"
+                              type="arrowDown"
+                            >
+                              <button
+                                aria-label="Open list of options"
+                                className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                data-test-subj="comboBoxToggleListButton"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <EuiIcon
+                                  aria-hidden="true"
+                                  className="euiFormControlLayoutCustomIcon__icon"
+                                  size="m"
+                                  type="arrowDown"
+                                >
+                                  <EuiIconEmpty
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    role="img"
+                                    style={null}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    />
+                                  </EuiIconEmpty>
+                                </EuiIcon>
+                              </button>
+                            </EuiFormControlLayoutCustomIcon>
+                          </div>
+                        </EuiFormControlLayoutIcons>
+                      </div>
+                    </div>
+                  </EuiFormControlLayout>
+                </EuiComboBoxInput>
+              </div>
+            </EuiComboBox>
+            <EuiFormHelpText
+              className="euiFormRow__text"
+              id="random_html_id-help-0"
+              key="Search existing dashboards or applications by name"
+            >
+              <div
+                className="euiFormHelpText euiFormRow__text"
+                id="random_html_id-help-0"
+              >
+                Search existing dashboards or applications by name
+              </div>
+            </EuiFormHelpText>
+          </div>
+        </div>
+      </EuiFormRow>
+    </div>
+  </MetricsExportPanel>
+</Provider>
+`;
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
new file mode 100644
index 0000000000..edf4f44904
--- /dev/null
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
@@ -0,0 +1,3799 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Metrics Top Menu Component renders Top Menu Component when disabled in edit mode 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <TopMenu
+    IsTopPanelDisabled={true}
+    editMode={true}
+    endTime="now"
+    http={[MockFunction]}
+    onDatePickerChange={[MockFunction]}
+    panelVisualizations={
+      Array [
+        Object {
+          "h": 2,
+          "id": "Y4muP4QBiaYaSxpXk7r8",
+          "metricType": "savedCustomMetric",
+          "savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
+          "w": 12,
+          "x": 0,
+          "y": 0,
+        },
+        Object {
+          "h": 2,
+          "id": "tomAP4QBiaYaSxpXALls",
+          "metricType": "savedCustomMetric",
+          "savedVisualizationId": "tomAP4QBiaYaSxpXALls",
+          "w": 12,
+          "x": 0,
+          "y": 2,
+        },
+        Object {
+          "h": 2,
+          "id": "prometheus.process_resident_memory_bytes",
+          "metricType": "prometheusMetric",
+          "savedVisualizationId": "prometheus.process_resident_memory_bytes",
+          "w": 12,
+          "x": 0,
+          "y": 4,
+        },
+      ]
+    }
+    recentlyUsedRanges={Array []}
+    resolutionSelectId="select_123"
+    resolutionValue="h"
+    savedObjects={
+      SavedObjects {
+        "http": [MockFunction],
+      }
+    }
+    setEditActionType={[MockFunction]}
+    setEditMode={[MockFunction]}
+    setPanelVisualizations={[MockFunction]}
+    setResolutionValue={[MockFunction]}
+    setSpanValue={[MockFunction]}
+    setToast={[MockFunction]}
+    spanValue={1}
+    startTime="now-1d"
+  >
+    <EuiPageHeader>
+      <header
+        className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+      >
+        <EuiPageHeaderSection>
+          <div
+            className="euiPageHeaderSection"
+          >
+            <EuiFlexGroup
+              className="search-bar-top-menu"
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive search-bar-top-menu"
+              >
+                <EuiFlexItem>
+                  <div
+                    className="euiFlexItem"
+                  >
+                    <SearchBar>
+                      <div>
+                        <EuiSearchBar
+                          box={
+                            Object {
+                              "incremental": true,
+                              "placeholder": "Search for metrics",
+                            }
+                          }
+                          defaultQuery=""
+                          onChange={[Function]}
+                        >
+                          <EuiFlexGroup
+                            alignItems="center"
+                            gutterSize="m"
+                            wrap={true}
+                          >
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                            >
+                              <EuiFlexItem
+                                className="euiSearchBar__searchHolder"
+                                grow={true}
+                              >
+                                <div
+                                  className="euiFlexItem euiSearchBar__searchHolder"
+                                >
+                                  <EuiSearchBox
+                                    incremental={true}
+                                    isInvalid={false}
+                                    onSearch={[Function]}
+                                    placeholder="Search for metrics"
+                                    query=""
+                                  >
+                                    <EuiFieldSearch
+                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                                      compressed={false}
+                                      defaultValue=""
+                                      fullWidth={true}
+                                      incremental={true}
+                                      inputRef={[Function]}
+                                      isClearable={true}
+                                      isInvalid={false}
+                                      isLoading={false}
+                                      onSearch={[Function]}
+                                      placeholder="Search for metrics"
+                                    >
+                                      <EuiFormControlLayout
+                                        compressed={false}
+                                        fullWidth={true}
+                                        icon="search"
+                                        isLoading={false}
+                                      >
+                                        <div
+                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                        >
+                                          <div
+                                            className="euiFormControlLayout__childrenWrapper"
+                                          >
+                                            <EuiValidatableControl
+                                              isInvalid={false}
+                                            >
+                                              <input
+                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                defaultValue=""
+                                                onKeyUp={[Function]}
+                                                placeholder="Search for metrics"
+                                                type="search"
+                                              />
+                                            </EuiValidatableControl>
+                                            <EuiFormControlLayoutIcons
+                                              compressed={false}
+                                              icon="search"
+                                              isLoading={false}
+                                            >
+                                              <div
+                                                className="euiFormControlLayoutIcons"
+                                              >
+                                                <EuiFormControlLayoutCustomIcon
+                                                  size="m"
+                                                  type="search"
+                                                >
+                                                  <span
+                                                    className="euiFormControlLayoutCustomIcon"
+                                                  >
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiFormControlLayoutCustomIcon__icon"
+                                                      size="m"
+                                                      type="search"
+                                                    >
+                                                      <EuiIconSearch
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        role="img"
+                                                        style={null}
+                                                      >
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                          <path
+                                                            d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                                          />
+                                                        </svg>
+                                                      </EuiIconSearch>
+                                                    </EuiIcon>
+                                                  </span>
+                                                </EuiFormControlLayoutCustomIcon>
+                                              </div>
+                                            </EuiFormControlLayoutIcons>
+                                          </div>
+                                        </div>
+                                      </EuiFormControlLayout>
+                                    </EuiFieldSearch>
+                                  </EuiSearchBox>
+                                </div>
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </EuiSearchBar>
+                      </div>
+                    </SearchBar>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </div>
+        </EuiPageHeaderSection>
+        <EuiPageHeaderSection>
+          <div
+            className="euiPageHeaderSection"
+          >
+            <EuiFlexGroup
+              gutterSize="s"
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <div
+                      className="resolutionSelect"
+                    >
+                      <EuiFieldText
+                        append={
+                          <EuiSelect
+                            aria-label="resolutionSelect"
+                            id="select_123"
+                            onChange={[Function]}
+                            options={
+                              Array [
+                                Object {
+                                  "text": "seconds",
+                                  "value": "s",
+                                },
+                                Object {
+                                  "text": "minutes",
+                                  "value": "m",
+                                },
+                                Object {
+                                  "text": "hours",
+                                  "value": "h",
+                                },
+                                Object {
+                                  "text": "days",
+                                  "value": "d",
+                                },
+                                Object {
+                                  "text": "years",
+                                  "value": "y",
+                                },
+                              ]
+                            }
+                            value="h"
+                          />
+                        }
+                        aria-label="resolutionField"
+                        className="resolutionSelectText"
+                        disabled={true}
+                        isInvalid={false}
+                        onChange={[Function]}
+                        prepend="Span Interval"
+                        value={1}
+                      >
+                        <EuiFormControlLayout
+                          append={
+                            <EuiSelect
+                              aria-label="resolutionSelect"
+                              id="select_123"
+                              onChange={[Function]}
+                              options={
+                                Array [
+                                  Object {
+                                    "text": "seconds",
+                                    "value": "s",
+                                  },
+                                  Object {
+                                    "text": "minutes",
+                                    "value": "m",
+                                  },
+                                  Object {
+                                    "text": "hours",
+                                    "value": "h",
+                                  },
+                                  Object {
+                                    "text": "days",
+                                    "value": "d",
+                                  },
+                                  Object {
+                                    "text": "years",
+                                    "value": "y",
+                                  },
+                                ]
+                              }
+                              value="h"
+                            />
+                          }
+                          fullWidth={false}
+                          prepend="Span Interval"
+                        >
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--group"
+                          >
+                            <EuiFormLabel
+                              className="euiFormControlLayout__prepend"
+                            >
+                              <label
+                                className="euiFormLabel euiFormControlLayout__prepend"
+                              >
+                                Span Interval
+                              </label>
+                            </EuiFormLabel>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl
+                                isInvalid={false}
+                              >
+                                <input
+                                  aria-label="resolutionField"
+                                  className="euiFieldText resolutionSelectText euiFieldText--inGroup"
+                                  disabled={true}
+                                  onChange={[Function]}
+                                  type="text"
+                                  value={1}
+                                />
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                            <EuiSelect
+                              aria-label="resolutionSelect"
+                              className="euiFormControlLayout__append"
+                              id="select_123"
+                              key="0/.0"
+                              onChange={[Function]}
+                              options={
+                                Array [
+                                  Object {
+                                    "text": "seconds",
+                                    "value": "s",
+                                  },
+                                  Object {
+                                    "text": "minutes",
+                                    "value": "m",
+                                  },
+                                  Object {
+                                    "text": "hours",
+                                    "value": "h",
+                                  },
+                                  Object {
+                                    "text": "days",
+                                    "value": "d",
+                                  },
+                                  Object {
+                                    "text": "years",
+                                    "value": "y",
+                                  },
+                                ]
+                              }
+                              value="h"
+                            >
+                              <EuiFormControlLayout
+                                compressed={false}
+                                fullWidth={false}
+                                icon={
+                                  Object {
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
+                                }
+                                inputId="select_123"
+                                isLoading={false}
+                              >
+                                <div
+                                  className="euiFormControlLayout"
+                                >
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiValidatableControl>
+                                      <select
+                                        aria-label="resolutionSelect"
+                                        className="euiSelect euiFormControlLayout__append"
+                                        id="select_123"
+                                        onChange={[Function]}
+                                        onMouseUp={[Function]}
+                                        value="h"
+                                      >
+                                        <option
+                                          key="0"
+                                          value="s"
+                                        >
+                                          seconds
+                                        </option>
+                                        <option
+                                          key="1"
+                                          value="m"
+                                        >
+                                          minutes
+                                        </option>
+                                        <option
+                                          key="2"
+                                          value="h"
+                                        >
+                                          hours
+                                        </option>
+                                        <option
+                                          key="3"
+                                          value="d"
+                                        >
+                                          days
+                                        </option>
+                                        <option
+                                          key="4"
+                                          value="y"
+                                        >
+                                          years
+                                        </option>
+                                      </select>
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons
+                                      compressed={false}
+                                      icon={
+                                        Object {
+                                          "side": "right",
+                                          "type": "arrowDown",
+                                        }
+                                      }
+                                      isLoading={false}
+                                    >
+                                      <div
+                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                      >
+                                        <EuiFormControlLayoutCustomIcon
+                                          size="m"
+                                          type="arrowDown"
+                                        >
+                                          <span
+                                            className="euiFormControlLayoutCustomIcon"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiFormControlLayoutCustomIcon__icon"
+                                              size="m"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                          </span>
+                                        </EuiFormControlLayoutCustomIcon>
+                                      </div>
+                                    </EuiFormControlLayoutIcons>
+                                  </div>
+                                </div>
+                              </EuiFormControlLayout>
+                            </EuiSelect>
+                          </div>
+                        </EuiFormControlLayout>
+                      </EuiFieldText>
+                    </div>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <EuiSuperDatePicker
+                      commonlyUsedRanges={
+                        Array [
+                          Object {
+                            "end": "now/d",
+                            "label": "Today",
+                            "start": "now/d",
+                          },
+                          Object {
+                            "end": "now/w",
+                            "label": "This week",
+                            "start": "now/w",
+                          },
+                          Object {
+                            "end": "now/M",
+                            "label": "This month",
+                            "start": "now/M",
+                          },
+                          Object {
+                            "end": "now/y",
+                            "label": "This year",
+                            "start": "now/y",
+                          },
+                          Object {
+                            "end": "now-1d/d",
+                            "label": "Yesterday",
+                            "start": "now-1d/d",
+                          },
+                          Object {
+                            "end": "now",
+                            "label": "Week to date",
+                            "start": "now/w",
+                          },
+                          Object {
+                            "end": "now",
+                            "label": "Month to date",
+                            "start": "now/M",
+                          },
+                          Object {
+                            "end": "now",
+                            "label": "Year to date",
+                            "start": "now/y",
+                          },
+                        ]
+                      }
+                      dateFormat=""
+                      end="now"
+                      isAutoRefreshOnly={false}
+                      isDisabled={true}
+                      isPaused={true}
+                      onTimeChange={[MockFunction]}
+                      recentlyUsedRanges={Array []}
+                      refreshInterval={0}
+                      showUpdateButton={true}
+                      start="now-1d"
+                      timeFormat="HH:mm"
+                    >
+                      <EuiFlexGroup
+                        className="euiSuperDatePicker__flexWrapper"
+                        gutterSize="s"
+                        responsive={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                        >
+                          <EuiFlexItem>
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiFormControlLayout
+                                className="euiSuperDatePicker"
+                                isDisabled={true}
+                                prepend={
+                                  <EuiQuickSelectPopover
+                                    applyTime={[Function]}
+                                    commonlyUsedRanges={
+                                      Array [
+                                        Object {
+                                          "end": "now/d",
+                                          "label": "Today",
+                                          "start": "now/d",
+                                        },
+                                        Object {
+                                          "end": "now/w",
+                                          "label": "This week",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now/M",
+                                          "label": "This month",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now/y",
+                                          "label": "This year",
+                                          "start": "now/y",
+                                        },
+                                        Object {
+                                          "end": "now-1d/d",
+                                          "label": "Yesterday",
+                                          "start": "now-1d/d",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Week to date",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Month to date",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Year to date",
+                                          "start": "now/y",
+                                        },
+                                      ]
+                                    }
+                                    dateFormat=""
+                                    end="now"
+                                    isAutoRefreshOnly={false}
+                                    isDisabled={true}
+                                    isPaused={true}
+                                    recentlyUsedRanges={Array []}
+                                    refreshInterval={0}
+                                    start="now-1d"
+                                  />
+                                }
+                              >
+                                <div
+                                  className="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-isDisabled euiSuperDatePicker"
+                                >
+                                  <EuiQuickSelectPopover
+                                    applyTime={[Function]}
+                                    className="euiFormControlLayout__prepend"
+                                    commonlyUsedRanges={
+                                      Array [
+                                        Object {
+                                          "end": "now/d",
+                                          "label": "Today",
+                                          "start": "now/d",
+                                        },
+                                        Object {
+                                          "end": "now/w",
+                                          "label": "This week",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now/M",
+                                          "label": "This month",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now/y",
+                                          "label": "This year",
+                                          "start": "now/y",
+                                        },
+                                        Object {
+                                          "end": "now-1d/d",
+                                          "label": "Yesterday",
+                                          "start": "now-1d/d",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Week to date",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Month to date",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Year to date",
+                                          "start": "now/y",
+                                        },
+                                      ]
+                                    }
+                                    dateFormat=""
+                                    end="now"
+                                    isAutoRefreshOnly={false}
+                                    isDisabled={true}
+                                    isPaused={true}
+                                    key="0/.0"
+                                    recentlyUsedRanges={Array []}
+                                    refreshInterval={0}
+                                    start="now-1d"
+                                  >
+                                    <EuiPopover
+                                      anchorClassName="euiQuickSelectPopover__anchor"
+                                      anchorPosition="downLeft"
+                                      button={
+                                        <EuiButtonEmpty
+                                          aria-label="Date quick select"
+                                          className="euiFormControlLayout__prepend"
+                                          data-test-subj="superDatePickerToggleQuickMenuButton"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          isDisabled={true}
+                                          onClick={[Function]}
+                                          size="xs"
+                                          textProps={
+                                            Object {
+                                              "className": "euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <EuiIcon
+                                            type="calendar"
+                                          />
+                                        </EuiButtonEmpty>
+                                      }
+                                      closePopover={[Function]}
+                                      display="inlineBlock"
+                                      hasArrow={true}
+                                      isOpen={false}
+                                      ownFocus={true}
+                                      panelPaddingSize="m"
+                                    >
+                                      <div
+                                        className="euiPopover euiPopover--anchorDownLeft"
+                                      >
+                                        <div
+                                          className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                        >
+                                          <EuiButtonEmpty
+                                            aria-label="Date quick select"
+                                            className="euiFormControlLayout__prepend"
+                                            data-test-subj="superDatePickerToggleQuickMenuButton"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            isDisabled={true}
+                                            onClick={[Function]}
+                                            size="xs"
+                                            textProps={
+                                              Object {
+                                                "className": "euiQuickSelectPopover__buttonText",
+                                              }
+                                            }
+                                          >
+                                            <button
+                                              aria-label="Date quick select"
+                                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiFormControlLayout__prepend"
+                                              data-test-subj="superDatePickerToggleQuickMenuButton"
+                                              disabled={true}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButtonEmpty__content"
+                                                iconSide="right"
+                                                iconSize="s"
+                                                iconType="arrowDown"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                                >
+                                                  <EuiIcon
+                                                    className="euiButtonContent__icon"
+                                                    color="inherit"
+                                                    size="s"
+                                                    type="arrowDown"
+                                                  >
+                                                    <EuiIconArrowDown
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                          fillRule="non-zero"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconArrowDown>
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                                  >
+                                                    <EuiIcon
+                                                      type="calendar"
+                                                    >
+                                                      <EuiIconCalendar
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium"
+                                                        focusable="false"
+                                                        role="img"
+                                                        style={null}
+                                                      >
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                          <path
+                                                            d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                            fillRule="evenodd"
+                                                          />
+                                                        </svg>
+                                                      </EuiIconCalendar>
+                                                    </EuiIcon>
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonEmpty>
+                                        </div>
+                                      </div>
+                                    </EuiPopover>
+                                  </EuiQuickSelectPopover>
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiDatePickerRange
+                                      className="euiDatePickerRange--inGroup"
+                                      endDateControl={<div />}
+                                      iconType={false}
+                                      isCustom={true}
+                                      startDateControl={<div />}
+                                    >
+                                      <div
+                                        className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                      >
+                                        <button
+                                          className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
+                                          data-test-subj="superDatePickerShowDatesButton"
+                                          disabled={true}
+                                          onClick={[Function]}
+                                        >
+                                          Last 1 day
+                                          <span
+                                            className="euiSuperDatePicker__prettyFormatLink"
+                                          >
+                                            <EuiI18n
+                                              default="Show dates"
+                                              token="euiSuperDatePicker.showDatesButtonLabel"
+                                            >
+                                              Show dates
+                                            </EuiI18n>
+                                          </span>
+                                        </button>
+                                      </div>
+                                    </EuiDatePickerRange>
+                                    <EuiFormControlLayoutIcons />
+                                  </div>
+                                </div>
+                              </EuiFormControlLayout>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <EuiSuperUpdateButton
+                                data-test-subj="superDatePickerApplyTimeButton"
+                                isDisabled={true}
+                                isLoading={false}
+                                needsUpdate={false}
+                                onClick={[Function]}
+                                showTooltip={true}
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiI18n
+                                      default="Cannot update"
+                                      token="euiSuperUpdateButton.cannotUpdateTooltip"
+                                    />
+                                  }
+                                  delay="regular"
+                                  position="bottom"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <EuiButton
+                                      className="euiSuperUpdateButton"
+                                      color="primary"
+                                      data-test-subj="superDatePickerApplyTimeButton"
+                                      fill={true}
+                                      iconType="refresh"
+                                      isDisabled={true}
+                                      isLoading={false}
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      textProps={
+                                        Object {
+                                          "className": "euiSuperUpdateButton__text",
+                                        }
+                                      }
+                                    >
+                                      <EuiButtonDisplay
+                                        baseClassName="euiButton"
+                                        className="euiSuperUpdateButton"
+                                        color="primary"
+                                        data-test-subj="superDatePickerApplyTimeButton"
+                                        disabled={true}
+                                        element="button"
+                                        fill={true}
+                                        iconType="refresh"
+                                        isDisabled={true}
+                                        isLoading={false}
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        textProps={
+                                          Object {
+                                            "className": "euiSuperUpdateButton__text",
+                                          }
+                                        }
+                                        type="button"
+                                      >
+                                        <button
+                                          className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled euiSuperUpdateButton"
+                                          data-test-subj="superDatePickerApplyTimeButton"
+                                          disabled={true}
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          style={
+                                            Object {
+                                              "minWidth": undefined,
+                                            }
+                                          }
+                                          type="button"
+                                        >
+                                          <EuiButtonContent
+                                            className="euiButton__content"
+                                            iconSide="left"
+                                            iconType="refresh"
+                                            isLoading={false}
+                                            textProps={
+                                              Object {
+                                                "className": "euiButton__text euiSuperUpdateButton__text",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="euiButtonContent euiButton__content"
+                                            >
+                                              <EuiIcon
+                                                className="euiButtonContent__icon"
+                                                color="inherit"
+                                                size="m"
+                                                type="refresh"
+                                              >
+                                                <EuiIconRefresh
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                                                    />
+                                                  </svg>
+                                                </EuiIconRefresh>
+                                              </EuiIcon>
+                                              <span
+                                                className="euiButton__text euiSuperUpdateButton__text"
+                                              >
+                                                <EuiI18n
+                                                  default="Refresh"
+                                                  token="euiSuperUpdateButton.refreshButtonLabel"
+                                                >
+                                                  Refresh
+                                                </EuiI18n>
+                                              </span>
+                                            </span>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonDisplay>
+                                    </EuiButton>
+                                  </span>
+                                </EuiToolTip>
+                              </EuiSuperUpdateButton>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </EuiSuperDatePicker>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <EuiPopover
+                      anchorPosition="downCenter"
+                      button={
+                        <EuiButton
+                          data-test-subj="metrics__saveManagementPopover"
+                          iconSide="right"
+                          iconType="arrowDown"
+                          isDisabled={true}
+                          onClick={[Function]}
+                        >
+                          Save
+                        </EuiButton>
+                      }
+                      closePopover={[Function]}
+                      display="inlineBlock"
+                      hasArrow={true}
+                      isOpen={false}
+                      ownFocus={true}
+                      panelPaddingSize="m"
+                    >
+                      <div
+                        className="euiPopover euiPopover--anchorDownCenter"
+                      >
+                        <div
+                          className="euiPopover__anchor"
+                        >
+                          <EuiButton
+                            data-test-subj="metrics__saveManagementPopover"
+                            iconSide="right"
+                            iconType="arrowDown"
+                            isDisabled={true}
+                            onClick={[Function]}
+                          >
+                            <EuiButtonDisplay
+                              baseClassName="euiButton"
+                              data-test-subj="metrics__saveManagementPopover"
+                              disabled={true}
+                              element="button"
+                              iconSide="right"
+                              iconType="arrowDown"
+                              isDisabled={true}
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <button
+                                className="euiButton euiButton--primary euiButton-isDisabled"
+                                data-test-subj="metrics__saveManagementPopover"
+                                disabled={true}
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "minWidth": undefined,
+                                  }
+                                }
+                                type="button"
+                              >
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                  >
+                                    <EuiIcon
+                                      className="euiButtonContent__icon"
+                                      color="inherit"
+                                      size="m"
+                                      type="arrowDown"
+                                    >
+                                      <EuiIconArrowDown
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                        focusable="false"
+                                        role="img"
+                                        style={null}
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                          focusable="false"
+                                          height={16}
+                                          role="img"
+                                          style={null}
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                            fillRule="non-zero"
+                                          />
+                                        </svg>
+                                      </EuiIconArrowDown>
+                                    </EuiIcon>
+                                    <span
+                                      className="euiButton__text"
+                                    >
+                                      Save
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </button>
+                            </EuiButtonDisplay>
+                          </EuiButton>
+                        </div>
+                      </div>
+                    </EuiPopover>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </div>
+        </EuiPageHeaderSection>
+      </header>
+    </EuiPageHeader>
+    <EuiFlexGroup
+      gutterSize="s"
+      justifyContent="flexEnd"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <EuiButton
+              color="danger"
+              iconType="cross"
+              onClick={[Function]}
+              size="s"
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                color="danger"
+                disabled={false}
+                element="button"
+                iconType="cross"
+                isDisabled={false}
+                onClick={[Function]}
+                size="s"
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--danger euiButton--small"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    iconType="cross"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="cross"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        Cancel
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <EuiButton
+              iconType="save"
+              onClick={[Function]}
+              size="s"
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                disabled={false}
+                element="button"
+                iconType="save"
+                isDisabled={false}
+                onClick={[Function]}
+                size="s"
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary euiButton--small"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    iconType="save"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="save"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        Save view
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </TopMenu>
+</Provider>
+`;
+
+exports[`Metrics Top Menu Component renders Top Menu Component when disabled with no metric visualizations 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <TopMenu
+    IsTopPanelDisabled={true}
+    editMode={false}
+    endTime="now"
+    http={[MockFunction]}
+    onDatePickerChange={[MockFunction]}
+    panelVisualizations={Array []}
+    recentlyUsedRanges={Array []}
+    resolutionSelectId="select_123"
+    resolutionValue="h"
+    savedObjects={
+      SavedObjects {
+        "http": [MockFunction],
+      }
+    }
+    setEditActionType={[MockFunction]}
+    setEditMode={[MockFunction]}
+    setPanelVisualizations={[MockFunction]}
+    setResolutionValue={[MockFunction]}
+    setSpanValue={[MockFunction]}
+    setToast={[MockFunction]}
+    spanValue={1}
+    startTime="now-1d"
+  >
+    <EuiPageHeader>
+      <header
+        className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+      >
+        <EuiPageHeaderSection>
+          <div
+            className="euiPageHeaderSection"
+          >
+            <EuiFlexGroup
+              className="search-bar-top-menu"
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive search-bar-top-menu"
+              >
+                <EuiFlexItem>
+                  <div
+                    className="euiFlexItem"
+                  >
+                    <SearchBar>
+                      <div>
+                        <EuiSearchBar
+                          box={
+                            Object {
+                              "incremental": true,
+                              "placeholder": "Search for metrics",
+                            }
+                          }
+                          defaultQuery=""
+                          onChange={[Function]}
+                        >
+                          <EuiFlexGroup
+                            alignItems="center"
+                            gutterSize="m"
+                            wrap={true}
+                          >
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                            >
+                              <EuiFlexItem
+                                className="euiSearchBar__searchHolder"
+                                grow={true}
+                              >
+                                <div
+                                  className="euiFlexItem euiSearchBar__searchHolder"
+                                >
+                                  <EuiSearchBox
+                                    incremental={true}
+                                    isInvalid={false}
+                                    onSearch={[Function]}
+                                    placeholder="Search for metrics"
+                                    query=""
+                                  >
+                                    <EuiFieldSearch
+                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                                      compressed={false}
+                                      defaultValue=""
+                                      fullWidth={true}
+                                      incremental={true}
+                                      inputRef={[Function]}
+                                      isClearable={true}
+                                      isInvalid={false}
+                                      isLoading={false}
+                                      onSearch={[Function]}
+                                      placeholder="Search for metrics"
+                                    >
+                                      <EuiFormControlLayout
+                                        compressed={false}
+                                        fullWidth={true}
+                                        icon="search"
+                                        isLoading={false}
+                                      >
+                                        <div
+                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                        >
+                                          <div
+                                            className="euiFormControlLayout__childrenWrapper"
+                                          >
+                                            <EuiValidatableControl
+                                              isInvalid={false}
+                                            >
+                                              <input
+                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                defaultValue=""
+                                                onKeyUp={[Function]}
+                                                placeholder="Search for metrics"
+                                                type="search"
+                                              />
+                                            </EuiValidatableControl>
+                                            <EuiFormControlLayoutIcons
+                                              compressed={false}
+                                              icon="search"
+                                              isLoading={false}
+                                            >
+                                              <div
+                                                className="euiFormControlLayoutIcons"
+                                              >
+                                                <EuiFormControlLayoutCustomIcon
+                                                  size="m"
+                                                  type="search"
+                                                >
+                                                  <span
+                                                    className="euiFormControlLayoutCustomIcon"
+                                                  >
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiFormControlLayoutCustomIcon__icon"
+                                                      size="m"
+                                                      type="search"
+                                                    >
+                                                      <EuiIconSearch
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        role="img"
+                                                        style={null}
+                                                      >
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                          <path
+                                                            d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                                          />
+                                                        </svg>
+                                                      </EuiIconSearch>
+                                                    </EuiIcon>
+                                                  </span>
+                                                </EuiFormControlLayoutCustomIcon>
+                                              </div>
+                                            </EuiFormControlLayoutIcons>
+                                          </div>
+                                        </div>
+                                      </EuiFormControlLayout>
+                                    </EuiFieldSearch>
+                                  </EuiSearchBox>
+                                </div>
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </EuiSearchBar>
+                      </div>
+                    </SearchBar>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </div>
+        </EuiPageHeaderSection>
+        <EuiPageHeaderSection>
+          <div
+            className="euiPageHeaderSection"
+          >
+            <EuiFlexGroup
+              gutterSize="s"
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <div
+                      className="resolutionSelect"
+                    >
+                      <EuiFieldText
+                        append={
+                          <EuiSelect
+                            aria-label="resolutionSelect"
+                            id="select_123"
+                            onChange={[Function]}
+                            options={
+                              Array [
+                                Object {
+                                  "text": "seconds",
+                                  "value": "s",
+                                },
+                                Object {
+                                  "text": "minutes",
+                                  "value": "m",
+                                },
+                                Object {
+                                  "text": "hours",
+                                  "value": "h",
+                                },
+                                Object {
+                                  "text": "days",
+                                  "value": "d",
+                                },
+                                Object {
+                                  "text": "years",
+                                  "value": "y",
+                                },
+                              ]
+                            }
+                            value="h"
+                          />
+                        }
+                        aria-label="resolutionField"
+                        className="resolutionSelectText"
+                        disabled={true}
+                        isInvalid={false}
+                        onChange={[Function]}
+                        prepend="Span Interval"
+                        value={1}
+                      >
+                        <EuiFormControlLayout
+                          append={
+                            <EuiSelect
+                              aria-label="resolutionSelect"
+                              id="select_123"
+                              onChange={[Function]}
+                              options={
+                                Array [
+                                  Object {
+                                    "text": "seconds",
+                                    "value": "s",
+                                  },
+                                  Object {
+                                    "text": "minutes",
+                                    "value": "m",
+                                  },
+                                  Object {
+                                    "text": "hours",
+                                    "value": "h",
+                                  },
+                                  Object {
+                                    "text": "days",
+                                    "value": "d",
+                                  },
+                                  Object {
+                                    "text": "years",
+                                    "value": "y",
+                                  },
+                                ]
+                              }
+                              value="h"
+                            />
+                          }
+                          fullWidth={false}
+                          prepend="Span Interval"
+                        >
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--group"
+                          >
+                            <EuiFormLabel
+                              className="euiFormControlLayout__prepend"
+                            >
+                              <label
+                                className="euiFormLabel euiFormControlLayout__prepend"
+                              >
+                                Span Interval
+                              </label>
+                            </EuiFormLabel>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl
+                                isInvalid={false}
+                              >
+                                <input
+                                  aria-label="resolutionField"
+                                  className="euiFieldText resolutionSelectText euiFieldText--inGroup"
+                                  disabled={true}
+                                  onChange={[Function]}
+                                  type="text"
+                                  value={1}
+                                />
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                            <EuiSelect
+                              aria-label="resolutionSelect"
+                              className="euiFormControlLayout__append"
+                              id="select_123"
+                              key="0/.0"
+                              onChange={[Function]}
+                              options={
+                                Array [
+                                  Object {
+                                    "text": "seconds",
+                                    "value": "s",
+                                  },
+                                  Object {
+                                    "text": "minutes",
+                                    "value": "m",
+                                  },
+                                  Object {
+                                    "text": "hours",
+                                    "value": "h",
+                                  },
+                                  Object {
+                                    "text": "days",
+                                    "value": "d",
+                                  },
+                                  Object {
+                                    "text": "years",
+                                    "value": "y",
+                                  },
+                                ]
+                              }
+                              value="h"
+                            >
+                              <EuiFormControlLayout
+                                compressed={false}
+                                fullWidth={false}
+                                icon={
+                                  Object {
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
+                                }
+                                inputId="select_123"
+                                isLoading={false}
+                              >
+                                <div
+                                  className="euiFormControlLayout"
+                                >
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiValidatableControl>
+                                      <select
+                                        aria-label="resolutionSelect"
+                                        className="euiSelect euiFormControlLayout__append"
+                                        id="select_123"
+                                        onChange={[Function]}
+                                        onMouseUp={[Function]}
+                                        value="h"
+                                      >
+                                        <option
+                                          key="0"
+                                          value="s"
+                                        >
+                                          seconds
+                                        </option>
+                                        <option
+                                          key="1"
+                                          value="m"
+                                        >
+                                          minutes
+                                        </option>
+                                        <option
+                                          key="2"
+                                          value="h"
+                                        >
+                                          hours
+                                        </option>
+                                        <option
+                                          key="3"
+                                          value="d"
+                                        >
+                                          days
+                                        </option>
+                                        <option
+                                          key="4"
+                                          value="y"
+                                        >
+                                          years
+                                        </option>
+                                      </select>
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons
+                                      compressed={false}
+                                      icon={
+                                        Object {
+                                          "side": "right",
+                                          "type": "arrowDown",
+                                        }
+                                      }
+                                      isLoading={false}
+                                    >
+                                      <div
+                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                      >
+                                        <EuiFormControlLayoutCustomIcon
+                                          size="m"
+                                          type="arrowDown"
+                                        >
+                                          <span
+                                            className="euiFormControlLayoutCustomIcon"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiFormControlLayoutCustomIcon__icon"
+                                              size="m"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                          </span>
+                                        </EuiFormControlLayoutCustomIcon>
+                                      </div>
+                                    </EuiFormControlLayoutIcons>
+                                  </div>
+                                </div>
+                              </EuiFormControlLayout>
+                            </EuiSelect>
+                          </div>
+                        </EuiFormControlLayout>
+                      </EuiFieldText>
+                    </div>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <EuiSuperDatePicker
+                      commonlyUsedRanges={
+                        Array [
+                          Object {
+                            "end": "now/d",
+                            "label": "Today",
+                            "start": "now/d",
+                          },
+                          Object {
+                            "end": "now/w",
+                            "label": "This week",
+                            "start": "now/w",
+                          },
+                          Object {
+                            "end": "now/M",
+                            "label": "This month",
+                            "start": "now/M",
+                          },
+                          Object {
+                            "end": "now/y",
+                            "label": "This year",
+                            "start": "now/y",
+                          },
+                          Object {
+                            "end": "now-1d/d",
+                            "label": "Yesterday",
+                            "start": "now-1d/d",
+                          },
+                          Object {
+                            "end": "now",
+                            "label": "Week to date",
+                            "start": "now/w",
+                          },
+                          Object {
+                            "end": "now",
+                            "label": "Month to date",
+                            "start": "now/M",
+                          },
+                          Object {
+                            "end": "now",
+                            "label": "Year to date",
+                            "start": "now/y",
+                          },
+                        ]
+                      }
+                      dateFormat=""
+                      end="now"
+                      isAutoRefreshOnly={false}
+                      isDisabled={true}
+                      isPaused={true}
+                      onTimeChange={[MockFunction]}
+                      recentlyUsedRanges={Array []}
+                      refreshInterval={0}
+                      showUpdateButton={true}
+                      start="now-1d"
+                      timeFormat="HH:mm"
+                    >
+                      <EuiFlexGroup
+                        className="euiSuperDatePicker__flexWrapper"
+                        gutterSize="s"
+                        responsive={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                        >
+                          <EuiFlexItem>
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiFormControlLayout
+                                className="euiSuperDatePicker"
+                                isDisabled={true}
+                                prepend={
+                                  <EuiQuickSelectPopover
+                                    applyTime={[Function]}
+                                    commonlyUsedRanges={
+                                      Array [
+                                        Object {
+                                          "end": "now/d",
+                                          "label": "Today",
+                                          "start": "now/d",
+                                        },
+                                        Object {
+                                          "end": "now/w",
+                                          "label": "This week",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now/M",
+                                          "label": "This month",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now/y",
+                                          "label": "This year",
+                                          "start": "now/y",
+                                        },
+                                        Object {
+                                          "end": "now-1d/d",
+                                          "label": "Yesterday",
+                                          "start": "now-1d/d",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Week to date",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Month to date",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Year to date",
+                                          "start": "now/y",
+                                        },
+                                      ]
+                                    }
+                                    dateFormat=""
+                                    end="now"
+                                    isAutoRefreshOnly={false}
+                                    isDisabled={true}
+                                    isPaused={true}
+                                    recentlyUsedRanges={Array []}
+                                    refreshInterval={0}
+                                    start="now-1d"
+                                  />
+                                }
+                              >
+                                <div
+                                  className="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-isDisabled euiSuperDatePicker"
+                                >
+                                  <EuiQuickSelectPopover
+                                    applyTime={[Function]}
+                                    className="euiFormControlLayout__prepend"
+                                    commonlyUsedRanges={
+                                      Array [
+                                        Object {
+                                          "end": "now/d",
+                                          "label": "Today",
+                                          "start": "now/d",
+                                        },
+                                        Object {
+                                          "end": "now/w",
+                                          "label": "This week",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now/M",
+                                          "label": "This month",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now/y",
+                                          "label": "This year",
+                                          "start": "now/y",
+                                        },
+                                        Object {
+                                          "end": "now-1d/d",
+                                          "label": "Yesterday",
+                                          "start": "now-1d/d",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Week to date",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Month to date",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Year to date",
+                                          "start": "now/y",
+                                        },
+                                      ]
+                                    }
+                                    dateFormat=""
+                                    end="now"
+                                    isAutoRefreshOnly={false}
+                                    isDisabled={true}
+                                    isPaused={true}
+                                    key="0/.0"
+                                    recentlyUsedRanges={Array []}
+                                    refreshInterval={0}
+                                    start="now-1d"
+                                  >
+                                    <EuiPopover
+                                      anchorClassName="euiQuickSelectPopover__anchor"
+                                      anchorPosition="downLeft"
+                                      button={
+                                        <EuiButtonEmpty
+                                          aria-label="Date quick select"
+                                          className="euiFormControlLayout__prepend"
+                                          data-test-subj="superDatePickerToggleQuickMenuButton"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          isDisabled={true}
+                                          onClick={[Function]}
+                                          size="xs"
+                                          textProps={
+                                            Object {
+                                              "className": "euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <EuiIcon
+                                            type="calendar"
+                                          />
+                                        </EuiButtonEmpty>
+                                      }
+                                      closePopover={[Function]}
+                                      display="inlineBlock"
+                                      hasArrow={true}
+                                      isOpen={false}
+                                      ownFocus={true}
+                                      panelPaddingSize="m"
+                                    >
+                                      <div
+                                        className="euiPopover euiPopover--anchorDownLeft"
+                                      >
+                                        <div
+                                          className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                        >
+                                          <EuiButtonEmpty
+                                            aria-label="Date quick select"
+                                            className="euiFormControlLayout__prepend"
+                                            data-test-subj="superDatePickerToggleQuickMenuButton"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            isDisabled={true}
+                                            onClick={[Function]}
+                                            size="xs"
+                                            textProps={
+                                              Object {
+                                                "className": "euiQuickSelectPopover__buttonText",
+                                              }
+                                            }
+                                          >
+                                            <button
+                                              aria-label="Date quick select"
+                                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiFormControlLayout__prepend"
+                                              data-test-subj="superDatePickerToggleQuickMenuButton"
+                                              disabled={true}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButtonEmpty__content"
+                                                iconSide="right"
+                                                iconSize="s"
+                                                iconType="arrowDown"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                                >
+                                                  <EuiIcon
+                                                    className="euiButtonContent__icon"
+                                                    color="inherit"
+                                                    size="s"
+                                                    type="arrowDown"
+                                                  >
+                                                    <EuiIconArrowDown
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                          fillRule="non-zero"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconArrowDown>
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                                  >
+                                                    <EuiIcon
+                                                      type="calendar"
+                                                    >
+                                                      <EuiIconCalendar
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium"
+                                                        focusable="false"
+                                                        role="img"
+                                                        style={null}
+                                                      >
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                          <path
+                                                            d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                            fillRule="evenodd"
+                                                          />
+                                                        </svg>
+                                                      </EuiIconCalendar>
+                                                    </EuiIcon>
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonEmpty>
+                                        </div>
+                                      </div>
+                                    </EuiPopover>
+                                  </EuiQuickSelectPopover>
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiDatePickerRange
+                                      className="euiDatePickerRange--inGroup"
+                                      endDateControl={<div />}
+                                      iconType={false}
+                                      isCustom={true}
+                                      startDateControl={<div />}
+                                    >
+                                      <div
+                                        className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                      >
+                                        <button
+                                          className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--disabled"
+                                          data-test-subj="superDatePickerShowDatesButton"
+                                          disabled={true}
+                                          onClick={[Function]}
+                                        >
+                                          Last 1 day
+                                          <span
+                                            className="euiSuperDatePicker__prettyFormatLink"
+                                          >
+                                            <EuiI18n
+                                              default="Show dates"
+                                              token="euiSuperDatePicker.showDatesButtonLabel"
+                                            >
+                                              Show dates
+                                            </EuiI18n>
+                                          </span>
+                                        </button>
+                                      </div>
+                                    </EuiDatePickerRange>
+                                    <EuiFormControlLayoutIcons />
+                                  </div>
+                                </div>
+                              </EuiFormControlLayout>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <EuiSuperUpdateButton
+                                data-test-subj="superDatePickerApplyTimeButton"
+                                isDisabled={true}
+                                isLoading={false}
+                                needsUpdate={false}
+                                onClick={[Function]}
+                                showTooltip={true}
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiI18n
+                                      default="Cannot update"
+                                      token="euiSuperUpdateButton.cannotUpdateTooltip"
+                                    />
+                                  }
+                                  delay="regular"
+                                  position="bottom"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <EuiButton
+                                      className="euiSuperUpdateButton"
+                                      color="primary"
+                                      data-test-subj="superDatePickerApplyTimeButton"
+                                      fill={true}
+                                      iconType="refresh"
+                                      isDisabled={true}
+                                      isLoading={false}
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      textProps={
+                                        Object {
+                                          "className": "euiSuperUpdateButton__text",
+                                        }
+                                      }
+                                    >
+                                      <EuiButtonDisplay
+                                        baseClassName="euiButton"
+                                        className="euiSuperUpdateButton"
+                                        color="primary"
+                                        data-test-subj="superDatePickerApplyTimeButton"
+                                        disabled={true}
+                                        element="button"
+                                        fill={true}
+                                        iconType="refresh"
+                                        isDisabled={true}
+                                        isLoading={false}
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        textProps={
+                                          Object {
+                                            "className": "euiSuperUpdateButton__text",
+                                          }
+                                        }
+                                        type="button"
+                                      >
+                                        <button
+                                          className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled euiSuperUpdateButton"
+                                          data-test-subj="superDatePickerApplyTimeButton"
+                                          disabled={true}
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          style={
+                                            Object {
+                                              "minWidth": undefined,
+                                            }
+                                          }
+                                          type="button"
+                                        >
+                                          <EuiButtonContent
+                                            className="euiButton__content"
+                                            iconSide="left"
+                                            iconType="refresh"
+                                            isLoading={false}
+                                            textProps={
+                                              Object {
+                                                "className": "euiButton__text euiSuperUpdateButton__text",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="euiButtonContent euiButton__content"
+                                            >
+                                              <EuiIcon
+                                                className="euiButtonContent__icon"
+                                                color="inherit"
+                                                size="m"
+                                                type="refresh"
+                                              >
+                                                <EuiIconRefresh
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                                                    />
+                                                  </svg>
+                                                </EuiIconRefresh>
+                                              </EuiIcon>
+                                              <span
+                                                className="euiButton__text euiSuperUpdateButton__text"
+                                              >
+                                                <EuiI18n
+                                                  default="Refresh"
+                                                  token="euiSuperUpdateButton.refreshButtonLabel"
+                                                >
+                                                  Refresh
+                                                </EuiI18n>
+                                              </span>
+                                            </span>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonDisplay>
+                                    </EuiButton>
+                                  </span>
+                                </EuiToolTip>
+                              </EuiSuperUpdateButton>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </EuiSuperDatePicker>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <EuiPopover
+                      anchorPosition="downCenter"
+                      button={
+                        <EuiButton
+                          data-test-subj="metrics__saveManagementPopover"
+                          iconSide="right"
+                          iconType="arrowDown"
+                          isDisabled={true}
+                          onClick={[Function]}
+                        >
+                          Save
+                        </EuiButton>
+                      }
+                      closePopover={[Function]}
+                      display="inlineBlock"
+                      hasArrow={true}
+                      isOpen={false}
+                      ownFocus={true}
+                      panelPaddingSize="m"
+                    >
+                      <div
+                        className="euiPopover euiPopover--anchorDownCenter"
+                      >
+                        <div
+                          className="euiPopover__anchor"
+                        >
+                          <EuiButton
+                            data-test-subj="metrics__saveManagementPopover"
+                            iconSide="right"
+                            iconType="arrowDown"
+                            isDisabled={true}
+                            onClick={[Function]}
+                          >
+                            <EuiButtonDisplay
+                              baseClassName="euiButton"
+                              data-test-subj="metrics__saveManagementPopover"
+                              disabled={true}
+                              element="button"
+                              iconSide="right"
+                              iconType="arrowDown"
+                              isDisabled={true}
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <button
+                                className="euiButton euiButton--primary euiButton-isDisabled"
+                                data-test-subj="metrics__saveManagementPopover"
+                                disabled={true}
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "minWidth": undefined,
+                                  }
+                                }
+                                type="button"
+                              >
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                  >
+                                    <EuiIcon
+                                      className="euiButtonContent__icon"
+                                      color="inherit"
+                                      size="m"
+                                      type="arrowDown"
+                                    >
+                                      <EuiIconArrowDown
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                        focusable="false"
+                                        role="img"
+                                        style={null}
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                          focusable="false"
+                                          height={16}
+                                          role="img"
+                                          style={null}
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                            fillRule="non-zero"
+                                          />
+                                        </svg>
+                                      </EuiIconArrowDown>
+                                    </EuiIcon>
+                                    <span
+                                      className="euiButton__text"
+                                    >
+                                      Save
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </button>
+                            </EuiButtonDisplay>
+                          </EuiButton>
+                        </div>
+                      </div>
+                    </EuiPopover>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </div>
+        </EuiPageHeaderSection>
+      </header>
+    </EuiPageHeader>
+    <EuiFlexGroup
+      gutterSize="s"
+      justifyContent="flexEnd"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <EuiButton
+              iconType="pencil"
+              isDisabled={true}
+              onClick={[Function]}
+              size="s"
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                disabled={true}
+                element="button"
+                iconType="pencil"
+                isDisabled={true}
+                onClick={[Function]}
+                size="s"
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                  disabled={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    iconType="pencil"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="pencil"
+                      >
+                        <EuiIconPencil
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12.148 3.148L11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 01-.708 0 .502.502 0 010-.708l8.002-7.998zM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 010 1.414l-9 9A.997.997 0 015 15H2a1 1 0 01-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0111 1zM5 14H2v-3l3 3z"
+                            />
+                          </svg>
+                        </EuiIconPencil>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        Edit view
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </TopMenu>
+</Provider>
+`;
+
+exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <TopMenu
+    IsTopPanelDisabled={false}
+    editMode={false}
+    endTime="now"
+    http={[MockFunction]}
+    onDatePickerChange={[MockFunction]}
+    panelVisualizations={
+      Array [
+        Object {
+          "h": 2,
+          "id": "Y4muP4QBiaYaSxpXk7r8",
+          "metricType": "savedCustomMetric",
+          "savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
+          "w": 12,
+          "x": 0,
+          "y": 0,
+        },
+        Object {
+          "h": 2,
+          "id": "tomAP4QBiaYaSxpXALls",
+          "metricType": "savedCustomMetric",
+          "savedVisualizationId": "tomAP4QBiaYaSxpXALls",
+          "w": 12,
+          "x": 0,
+          "y": 2,
+        },
+        Object {
+          "h": 2,
+          "id": "prometheus.process_resident_memory_bytes",
+          "metricType": "prometheusMetric",
+          "savedVisualizationId": "prometheus.process_resident_memory_bytes",
+          "w": 12,
+          "x": 0,
+          "y": 4,
+        },
+      ]
+    }
+    recentlyUsedRanges={Array []}
+    resolutionSelectId="select_123"
+    resolutionValue="h"
+    savedObjects={
+      SavedObjects {
+        "http": [MockFunction],
+      }
+    }
+    setEditActionType={[MockFunction]}
+    setEditMode={[MockFunction]}
+    setPanelVisualizations={[MockFunction]}
+    setResolutionValue={[MockFunction]}
+    setSpanValue={[MockFunction]}
+    setToast={[MockFunction]}
+    spanValue={1}
+    startTime="now-1d"
+  >
+    <EuiPageHeader>
+      <header
+        className="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+      >
+        <EuiPageHeaderSection>
+          <div
+            className="euiPageHeaderSection"
+          >
+            <EuiFlexGroup
+              className="search-bar-top-menu"
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive search-bar-top-menu"
+              >
+                <EuiFlexItem>
+                  <div
+                    className="euiFlexItem"
+                  >
+                    <SearchBar>
+                      <div>
+                        <EuiSearchBar
+                          box={
+                            Object {
+                              "incremental": true,
+                              "placeholder": "Search for metrics",
+                            }
+                          }
+                          defaultQuery=""
+                          onChange={[Function]}
+                        >
+                          <EuiFlexGroup
+                            alignItems="center"
+                            gutterSize="m"
+                            wrap={true}
+                          >
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+                            >
+                              <EuiFlexItem
+                                className="euiSearchBar__searchHolder"
+                                grow={true}
+                              >
+                                <div
+                                  className="euiFlexItem euiSearchBar__searchHolder"
+                                >
+                                  <EuiSearchBox
+                                    incremental={true}
+                                    isInvalid={false}
+                                    onSearch={[Function]}
+                                    placeholder="Search for metrics"
+                                    query=""
+                                  >
+                                    <EuiFieldSearch
+                                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                                      compressed={false}
+                                      defaultValue=""
+                                      fullWidth={true}
+                                      incremental={true}
+                                      inputRef={[Function]}
+                                      isClearable={true}
+                                      isInvalid={false}
+                                      isLoading={false}
+                                      onSearch={[Function]}
+                                      placeholder="Search for metrics"
+                                    >
+                                      <EuiFormControlLayout
+                                        compressed={false}
+                                        fullWidth={true}
+                                        icon="search"
+                                        isLoading={false}
+                                      >
+                                        <div
+                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                        >
+                                          <div
+                                            className="euiFormControlLayout__childrenWrapper"
+                                          >
+                                            <EuiValidatableControl
+                                              isInvalid={false}
+                                            >
+                                              <input
+                                                aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                defaultValue=""
+                                                onKeyUp={[Function]}
+                                                placeholder="Search for metrics"
+                                                type="search"
+                                              />
+                                            </EuiValidatableControl>
+                                            <EuiFormControlLayoutIcons
+                                              compressed={false}
+                                              icon="search"
+                                              isLoading={false}
+                                            >
+                                              <div
+                                                className="euiFormControlLayoutIcons"
+                                              >
+                                                <EuiFormControlLayoutCustomIcon
+                                                  size="m"
+                                                  type="search"
+                                                >
+                                                  <span
+                                                    className="euiFormControlLayoutCustomIcon"
+                                                  >
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiFormControlLayoutCustomIcon__icon"
+                                                      size="m"
+                                                      type="search"
+                                                    >
+                                                      <EuiIconEmpty
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        role="img"
+                                                        style={null}
+                                                      >
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        />
+                                                      </EuiIconEmpty>
+                                                    </EuiIcon>
+                                                  </span>
+                                                </EuiFormControlLayoutCustomIcon>
+                                              </div>
+                                            </EuiFormControlLayoutIcons>
+                                          </div>
+                                        </div>
+                                      </EuiFormControlLayout>
+                                    </EuiFieldSearch>
+                                  </EuiSearchBox>
+                                </div>
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </EuiSearchBar>
+                      </div>
+                    </SearchBar>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </div>
+        </EuiPageHeaderSection>
+        <EuiPageHeaderSection>
+          <div
+            className="euiPageHeaderSection"
+          >
+            <EuiFlexGroup
+              gutterSize="s"
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+              >
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <div
+                      className="resolutionSelect"
+                    >
+                      <EuiFieldText
+                        append={
+                          <EuiSelect
+                            aria-label="resolutionSelect"
+                            id="select_123"
+                            onChange={[Function]}
+                            options={
+                              Array [
+                                Object {
+                                  "text": "seconds",
+                                  "value": "s",
+                                },
+                                Object {
+                                  "text": "minutes",
+                                  "value": "m",
+                                },
+                                Object {
+                                  "text": "hours",
+                                  "value": "h",
+                                },
+                                Object {
+                                  "text": "days",
+                                  "value": "d",
+                                },
+                                Object {
+                                  "text": "years",
+                                  "value": "y",
+                                },
+                              ]
+                            }
+                            value="h"
+                          />
+                        }
+                        aria-label="resolutionField"
+                        className="resolutionSelectText"
+                        disabled={false}
+                        isInvalid={false}
+                        onChange={[Function]}
+                        prepend="Span Interval"
+                        value={1}
+                      >
+                        <EuiFormControlLayout
+                          append={
+                            <EuiSelect
+                              aria-label="resolutionSelect"
+                              id="select_123"
+                              onChange={[Function]}
+                              options={
+                                Array [
+                                  Object {
+                                    "text": "seconds",
+                                    "value": "s",
+                                  },
+                                  Object {
+                                    "text": "minutes",
+                                    "value": "m",
+                                  },
+                                  Object {
+                                    "text": "hours",
+                                    "value": "h",
+                                  },
+                                  Object {
+                                    "text": "days",
+                                    "value": "d",
+                                  },
+                                  Object {
+                                    "text": "years",
+                                    "value": "y",
+                                  },
+                                ]
+                              }
+                              value="h"
+                            />
+                          }
+                          fullWidth={false}
+                          prepend="Span Interval"
+                        >
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--group"
+                          >
+                            <EuiFormLabel
+                              className="euiFormControlLayout__prepend"
+                            >
+                              <label
+                                className="euiFormLabel euiFormControlLayout__prepend"
+                              >
+                                Span Interval
+                              </label>
+                            </EuiFormLabel>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl
+                                isInvalid={false}
+                              >
+                                <input
+                                  aria-label="resolutionField"
+                                  className="euiFieldText resolutionSelectText euiFieldText--inGroup"
+                                  disabled={false}
+                                  onChange={[Function]}
+                                  type="text"
+                                  value={1}
+                                />
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                            <EuiSelect
+                              aria-label="resolutionSelect"
+                              className="euiFormControlLayout__append"
+                              id="select_123"
+                              key="0/.0"
+                              onChange={[Function]}
+                              options={
+                                Array [
+                                  Object {
+                                    "text": "seconds",
+                                    "value": "s",
+                                  },
+                                  Object {
+                                    "text": "minutes",
+                                    "value": "m",
+                                  },
+                                  Object {
+                                    "text": "hours",
+                                    "value": "h",
+                                  },
+                                  Object {
+                                    "text": "days",
+                                    "value": "d",
+                                  },
+                                  Object {
+                                    "text": "years",
+                                    "value": "y",
+                                  },
+                                ]
+                              }
+                              value="h"
+                            >
+                              <EuiFormControlLayout
+                                compressed={false}
+                                fullWidth={false}
+                                icon={
+                                  Object {
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
+                                }
+                                inputId="select_123"
+                                isLoading={false}
+                              >
+                                <div
+                                  className="euiFormControlLayout"
+                                >
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiValidatableControl>
+                                      <select
+                                        aria-label="resolutionSelect"
+                                        className="euiSelect euiFormControlLayout__append"
+                                        id="select_123"
+                                        onChange={[Function]}
+                                        onMouseUp={[Function]}
+                                        value="h"
+                                      >
+                                        <option
+                                          key="0"
+                                          value="s"
+                                        >
+                                          seconds
+                                        </option>
+                                        <option
+                                          key="1"
+                                          value="m"
+                                        >
+                                          minutes
+                                        </option>
+                                        <option
+                                          key="2"
+                                          value="h"
+                                        >
+                                          hours
+                                        </option>
+                                        <option
+                                          key="3"
+                                          value="d"
+                                        >
+                                          days
+                                        </option>
+                                        <option
+                                          key="4"
+                                          value="y"
+                                        >
+                                          years
+                                        </option>
+                                      </select>
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons
+                                      compressed={false}
+                                      icon={
+                                        Object {
+                                          "side": "right",
+                                          "type": "arrowDown",
+                                        }
+                                      }
+                                      isLoading={false}
+                                    >
+                                      <div
+                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                      >
+                                        <EuiFormControlLayoutCustomIcon
+                                          size="m"
+                                          type="arrowDown"
+                                        >
+                                          <span
+                                            className="euiFormControlLayoutCustomIcon"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiFormControlLayoutCustomIcon__icon"
+                                              size="m"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                          </span>
+                                        </EuiFormControlLayoutCustomIcon>
+                                      </div>
+                                    </EuiFormControlLayoutIcons>
+                                  </div>
+                                </div>
+                              </EuiFormControlLayout>
+                            </EuiSelect>
+                          </div>
+                        </EuiFormControlLayout>
+                      </EuiFieldText>
+                    </div>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <EuiSuperDatePicker
+                      commonlyUsedRanges={
+                        Array [
+                          Object {
+                            "end": "now/d",
+                            "label": "Today",
+                            "start": "now/d",
+                          },
+                          Object {
+                            "end": "now/w",
+                            "label": "This week",
+                            "start": "now/w",
+                          },
+                          Object {
+                            "end": "now/M",
+                            "label": "This month",
+                            "start": "now/M",
+                          },
+                          Object {
+                            "end": "now/y",
+                            "label": "This year",
+                            "start": "now/y",
+                          },
+                          Object {
+                            "end": "now-1d/d",
+                            "label": "Yesterday",
+                            "start": "now-1d/d",
+                          },
+                          Object {
+                            "end": "now",
+                            "label": "Week to date",
+                            "start": "now/w",
+                          },
+                          Object {
+                            "end": "now",
+                            "label": "Month to date",
+                            "start": "now/M",
+                          },
+                          Object {
+                            "end": "now",
+                            "label": "Year to date",
+                            "start": "now/y",
+                          },
+                        ]
+                      }
+                      dateFormat=""
+                      end="now"
+                      isAutoRefreshOnly={false}
+                      isDisabled={false}
+                      isPaused={true}
+                      onTimeChange={[MockFunction]}
+                      recentlyUsedRanges={Array []}
+                      refreshInterval={0}
+                      showUpdateButton={true}
+                      start="now-1d"
+                      timeFormat="HH:mm"
+                    >
+                      <EuiFlexGroup
+                        className="euiSuperDatePicker__flexWrapper"
+                        gutterSize="s"
+                        responsive={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper"
+                        >
+                          <EuiFlexItem>
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiFormControlLayout
+                                className="euiSuperDatePicker"
+                                isDisabled={false}
+                                prepend={
+                                  <EuiQuickSelectPopover
+                                    applyTime={[Function]}
+                                    commonlyUsedRanges={
+                                      Array [
+                                        Object {
+                                          "end": "now/d",
+                                          "label": "Today",
+                                          "start": "now/d",
+                                        },
+                                        Object {
+                                          "end": "now/w",
+                                          "label": "This week",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now/M",
+                                          "label": "This month",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now/y",
+                                          "label": "This year",
+                                          "start": "now/y",
+                                        },
+                                        Object {
+                                          "end": "now-1d/d",
+                                          "label": "Yesterday",
+                                          "start": "now-1d/d",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Week to date",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Month to date",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Year to date",
+                                          "start": "now/y",
+                                        },
+                                      ]
+                                    }
+                                    dateFormat=""
+                                    end="now"
+                                    isAutoRefreshOnly={false}
+                                    isDisabled={false}
+                                    isPaused={true}
+                                    recentlyUsedRanges={Array []}
+                                    refreshInterval={0}
+                                    start="now-1d"
+                                  />
+                                }
+                              >
+                                <div
+                                  className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                                >
+                                  <EuiQuickSelectPopover
+                                    applyTime={[Function]}
+                                    className="euiFormControlLayout__prepend"
+                                    commonlyUsedRanges={
+                                      Array [
+                                        Object {
+                                          "end": "now/d",
+                                          "label": "Today",
+                                          "start": "now/d",
+                                        },
+                                        Object {
+                                          "end": "now/w",
+                                          "label": "This week",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now/M",
+                                          "label": "This month",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now/y",
+                                          "label": "This year",
+                                          "start": "now/y",
+                                        },
+                                        Object {
+                                          "end": "now-1d/d",
+                                          "label": "Yesterday",
+                                          "start": "now-1d/d",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Week to date",
+                                          "start": "now/w",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Month to date",
+                                          "start": "now/M",
+                                        },
+                                        Object {
+                                          "end": "now",
+                                          "label": "Year to date",
+                                          "start": "now/y",
+                                        },
+                                      ]
+                                    }
+                                    dateFormat=""
+                                    end="now"
+                                    isAutoRefreshOnly={false}
+                                    isDisabled={false}
+                                    isPaused={true}
+                                    key="0/.0"
+                                    recentlyUsedRanges={Array []}
+                                    refreshInterval={0}
+                                    start="now-1d"
+                                  >
+                                    <EuiPopover
+                                      anchorClassName="euiQuickSelectPopover__anchor"
+                                      anchorPosition="downLeft"
+                                      button={
+                                        <EuiButtonEmpty
+                                          aria-label="Date quick select"
+                                          className="euiFormControlLayout__prepend"
+                                          data-test-subj="superDatePickerToggleQuickMenuButton"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          isDisabled={false}
+                                          onClick={[Function]}
+                                          size="xs"
+                                          textProps={
+                                            Object {
+                                              "className": "euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <EuiIcon
+                                            type="calendar"
+                                          />
+                                        </EuiButtonEmpty>
+                                      }
+                                      closePopover={[Function]}
+                                      display="inlineBlock"
+                                      hasArrow={true}
+                                      isOpen={false}
+                                      ownFocus={true}
+                                      panelPaddingSize="m"
+                                    >
+                                      <div
+                                        className="euiPopover euiPopover--anchorDownLeft"
+                                      >
+                                        <div
+                                          className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                        >
+                                          <EuiButtonEmpty
+                                            aria-label="Date quick select"
+                                            className="euiFormControlLayout__prepend"
+                                            data-test-subj="superDatePickerToggleQuickMenuButton"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            isDisabled={false}
+                                            onClick={[Function]}
+                                            size="xs"
+                                            textProps={
+                                              Object {
+                                                "className": "euiQuickSelectPopover__buttonText",
+                                              }
+                                            }
+                                          >
+                                            <button
+                                              aria-label="Date quick select"
+                                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                              data-test-subj="superDatePickerToggleQuickMenuButton"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButtonEmpty__content"
+                                                iconSide="right"
+                                                iconSize="s"
+                                                iconType="arrowDown"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                                >
+                                                  <EuiIcon
+                                                    className="euiButtonContent__icon"
+                                                    color="inherit"
+                                                    size="s"
+                                                    type="arrowDown"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                                  >
+                                                    <EuiIcon
+                                                      type="calendar"
+                                                    >
+                                                      <EuiIconEmpty
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                        focusable="false"
+                                                        role="img"
+                                                        style={null}
+                                                      >
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium 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>
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonEmpty>
+                                        </div>
+                                      </div>
+                                    </EuiPopover>
+                                  </EuiQuickSelectPopover>
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiDatePickerRange
+                                      className="euiDatePickerRange--inGroup"
+                                      endDateControl={<div />}
+                                      iconType={false}
+                                      isCustom={true}
+                                      startDateControl={<div />}
+                                    >
+                                      <div
+                                        className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                      >
+                                        <button
+                                          className="euiSuperDatePicker__prettyFormat"
+                                          data-test-subj="superDatePickerShowDatesButton"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                        >
+                                          Last 1 day
+                                          <span
+                                            className="euiSuperDatePicker__prettyFormatLink"
+                                          >
+                                            <EuiI18n
+                                              default="Show dates"
+                                              token="euiSuperDatePicker.showDatesButtonLabel"
+                                            >
+                                              Show dates
+                                            </EuiI18n>
+                                          </span>
+                                        </button>
+                                      </div>
+                                    </EuiDatePickerRange>
+                                    <EuiFormControlLayoutIcons />
+                                  </div>
+                                </div>
+                              </EuiFormControlLayout>
+                            </div>
+                          </EuiFlexItem>
+                          <EuiFlexItem
+                            grow={false}
+                          >
+                            <div
+                              className="euiFlexItem euiFlexItem--flexGrowZero"
+                            >
+                              <EuiSuperUpdateButton
+                                data-test-subj="superDatePickerApplyTimeButton"
+                                isDisabled={false}
+                                isLoading={false}
+                                needsUpdate={false}
+                                onClick={[Function]}
+                                showTooltip={true}
+                              >
+                                <EuiToolTip
+                                  delay="regular"
+                                  position="bottom"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <EuiButton
+                                      className="euiSuperUpdateButton"
+                                      color="primary"
+                                      data-test-subj="superDatePickerApplyTimeButton"
+                                      fill={true}
+                                      iconType="refresh"
+                                      isDisabled={false}
+                                      isLoading={false}
+                                      onBlur={[Function]}
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      textProps={
+                                        Object {
+                                          "className": "euiSuperUpdateButton__text",
+                                        }
+                                      }
+                                    >
+                                      <EuiButtonDisplay
+                                        baseClassName="euiButton"
+                                        className="euiSuperUpdateButton"
+                                        color="primary"
+                                        data-test-subj="superDatePickerApplyTimeButton"
+                                        disabled={false}
+                                        element="button"
+                                        fill={true}
+                                        iconType="refresh"
+                                        isDisabled={false}
+                                        isLoading={false}
+                                        onBlur={[Function]}
+                                        onClick={[Function]}
+                                        onFocus={[Function]}
+                                        textProps={
+                                          Object {
+                                            "className": "euiSuperUpdateButton__text",
+                                          }
+                                        }
+                                        type="button"
+                                      >
+                                        <button
+                                          className="euiButton euiButton--primary euiButton--fill euiSuperUpdateButton"
+                                          data-test-subj="superDatePickerApplyTimeButton"
+                                          disabled={false}
+                                          onBlur={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          style={
+                                            Object {
+                                              "minWidth": undefined,
+                                            }
+                                          }
+                                          type="button"
+                                        >
+                                          <EuiButtonContent
+                                            className="euiButton__content"
+                                            iconSide="left"
+                                            iconType="refresh"
+                                            isLoading={false}
+                                            textProps={
+                                              Object {
+                                                "className": "euiButton__text euiSuperUpdateButton__text",
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              className="euiButtonContent euiButton__content"
+                                            >
+                                              <EuiIcon
+                                                className="euiButtonContent__icon"
+                                                color="inherit"
+                                                size="m"
+                                                type="refresh"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                              <span
+                                                className="euiButton__text euiSuperUpdateButton__text"
+                                              >
+                                                <EuiI18n
+                                                  default="Refresh"
+                                                  token="euiSuperUpdateButton.refreshButtonLabel"
+                                                >
+                                                  Refresh
+                                                </EuiI18n>
+                                              </span>
+                                            </span>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonDisplay>
+                                    </EuiButton>
+                                  </span>
+                                </EuiToolTip>
+                              </EuiSuperUpdateButton>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </EuiSuperDatePicker>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem
+                  grow={false}
+                >
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <EuiPopover
+                      anchorPosition="downCenter"
+                      button={
+                        <EuiButton
+                          data-test-subj="metrics__saveManagementPopover"
+                          iconSide="right"
+                          iconType="arrowDown"
+                          isDisabled={false}
+                          onClick={[Function]}
+                        >
+                          Save
+                        </EuiButton>
+                      }
+                      closePopover={[Function]}
+                      display="inlineBlock"
+                      hasArrow={true}
+                      isOpen={false}
+                      ownFocus={true}
+                      panelPaddingSize="m"
+                    >
+                      <div
+                        className="euiPopover euiPopover--anchorDownCenter"
+                      >
+                        <div
+                          className="euiPopover__anchor"
+                        >
+                          <EuiButton
+                            data-test-subj="metrics__saveManagementPopover"
+                            iconSide="right"
+                            iconType="arrowDown"
+                            isDisabled={false}
+                            onClick={[Function]}
+                          >
+                            <EuiButtonDisplay
+                              baseClassName="euiButton"
+                              data-test-subj="metrics__saveManagementPopover"
+                              disabled={false}
+                              element="button"
+                              iconSide="right"
+                              iconType="arrowDown"
+                              isDisabled={false}
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <button
+                                className="euiButton euiButton--primary"
+                                data-test-subj="metrics__saveManagementPopover"
+                                disabled={false}
+                                onClick={[Function]}
+                                style={
+                                  Object {
+                                    "minWidth": undefined,
+                                  }
+                                }
+                                type="button"
+                              >
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text",
+                                    }
+                                  }
+                                >
+                                  <span
+                                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                  >
+                                    <EuiIcon
+                                      className="euiButtonContent__icon"
+                                      color="inherit"
+                                      size="m"
+                                      type="arrowDown"
+                                    >
+                                      <EuiIconEmpty
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                        focusable="false"
+                                        role="img"
+                                        style={null}
+                                      >
+                                        <svg
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                          focusable="false"
+                                          height={16}
+                                          role="img"
+                                          style={null}
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        />
+                                      </EuiIconEmpty>
+                                    </EuiIcon>
+                                    <span
+                                      className="euiButton__text"
+                                    >
+                                      Save
+                                    </span>
+                                  </span>
+                                </EuiButtonContent>
+                              </button>
+                            </EuiButtonDisplay>
+                          </EuiButton>
+                        </div>
+                      </div>
+                    </EuiPopover>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </div>
+        </EuiPageHeaderSection>
+      </header>
+    </EuiPageHeader>
+    <EuiFlexGroup
+      gutterSize="s"
+      justifyContent="flexEnd"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <EuiButton
+              iconType="pencil"
+              isDisabled={false}
+              onClick={[Function]}
+              size="s"
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                disabled={false}
+                element="button"
+                iconType="pencil"
+                isDisabled={false}
+                onClick={[Function]}
+                size="s"
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary euiButton--small"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    iconType="pencil"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="pencil"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        Edit view
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </TopMenu>
+</Provider>
+`;
diff --git a/public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx b/public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx
new file mode 100644
index 0000000000..00496f1beb
--- /dev/null
+++ b/public/components/metrics/top_menu/__tests__/metrics_export_panel.test.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
+import {
+  samplePanelOptions,
+  sampleSortedMetricsLayout,
+  sampleVisualizationById,
+} from '../../../../../test/metrics_contants';
+import { createStore } from '@reduxjs/toolkit';
+import rootReducer from '../../../../framework/redux/reducers';
+import { Provider } from 'react-redux';
+import { HttpResponse } from '../../../../../../../src/core/public';
+import { MetricsExportPanel } from '../metrics_export_panel';
+import { EuiComboBoxOptionOption } from '@elastic/eui';
+
+describe('Export Metrics Panel Component', () => {
+  configure({ adapter: new Adapter() });
+  const store = createStore(rootReducer);
+
+  it('renders Export Metrics Panel Component', async () => {
+    let httpFlag = 1;
+    httpClientMock.get = jest.fn(() => {
+      if (httpFlag == 1) {
+        httpFlag += 1;
+        return Promise.resolve((samplePanelOptions as unknown) as HttpResponse);
+      } else {
+        return Promise.resolve((sampleVisualizationById as unknown) as HttpResponse);
+      }
+    });
+
+    const http = httpClientMock;
+    const visualizationsMetaData: any = [];
+    const setVisualizationsMetaData = jest.fn();
+    const sortedMetricsLayout = sampleSortedMetricsLayout;
+    const selectedPanelOptions: EuiComboBoxOptionOption<unknown>[] = [];
+    const setSelectedPanelOptions = jest.fn();
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <MetricsExportPanel
+          http={http}
+          visualizationsMetaData={visualizationsMetaData}
+          setVisualizationsMetaData={setVisualizationsMetaData}
+          sortedMetricsLayout={sortedMetricsLayout}
+          selectedPanelOptions={selectedPanelOptions}
+          setSelectedPanelOptions={setSelectedPanelOptions}
+        />
+      </Provider>
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/metrics/top_menu/__tests__/top_menu.test.tsx b/public/components/metrics/top_menu/__tests__/top_menu.test.tsx
new file mode 100644
index 0000000000..b34591b625
--- /dev/null
+++ b/public/components/metrics/top_menu/__tests__/top_menu.test.tsx
@@ -0,0 +1,183 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
+import { sampleMetric, sampleMetricsVisualizations } from '../../../../../test/metrics_contants';
+import { createStore } from '@reduxjs/toolkit';
+import rootReducer from '../../../../framework/redux/reducers';
+import { Provider } from 'react-redux';
+import { HttpResponse } from '../../../../../../../src/core/public';
+import { TopMenu } from '../top_menu';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import SavedObjects from '../../../../services/saved_objects/event_analytics/saved_objects';
+import { MetricType } from '../../../../../common/types/metrics';
+
+describe('Metrics Top Menu Component', () => {
+  configure({ adapter: new Adapter() });
+  const store = createStore(rootReducer);
+
+  it('renders Top Menu Component when enabled', async () => {
+    httpClientMock.get = jest.fn(() => Promise.resolve((sampleMetric as unknown) as HttpResponse));
+
+    const http = httpClientMock;
+    const IsTopPanelDisabled = false;
+    const startTime = 'now-1d';
+    const endTime = 'now';
+    const onDatePickerChange = jest.fn();
+    const recentlyUsedRanges: DurationRange[] = [];
+    const editMode = false;
+    const setEditMode = jest.fn();
+    const setEditActionType = jest.fn();
+    const panelVisualizations = sampleMetricsVisualizations;
+    const setPanelVisualizations = jest.fn();
+    const resolutionValue = 'h';
+    const setResolutionValue = jest.fn();
+    const spanValue = 1;
+    const setSpanValue = jest.fn();
+    const resolutionSelectId = 'select_123';
+    const savedObjects = new SavedObjects(httpClientMock);
+    const setToast = jest.fn();
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <TopMenu
+          http={http}
+          IsTopPanelDisabled={IsTopPanelDisabled}
+          startTime={startTime}
+          endTime={endTime}
+          onDatePickerChange={onDatePickerChange}
+          recentlyUsedRanges={recentlyUsedRanges}
+          editMode={editMode}
+          setEditMode={setEditMode}
+          setEditActionType={setEditActionType}
+          panelVisualizations={panelVisualizations}
+          setPanelVisualizations={setPanelVisualizations}
+          resolutionValue={resolutionValue}
+          setResolutionValue={setResolutionValue}
+          spanValue={spanValue}
+          setSpanValue={setSpanValue}
+          resolutionSelectId={resolutionSelectId}
+          savedObjects={savedObjects}
+          setToast={setToast}
+        />
+      </Provider>
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('renders Top Menu Component when disabled with no metric visualizations', async () => {
+    httpClientMock.get = jest.fn();
+
+    const http = httpClientMock;
+    const IsTopPanelDisabled = true;
+    const startTime = 'now-1d';
+    const endTime = 'now';
+    const onDatePickerChange = jest.fn();
+    const recentlyUsedRanges: DurationRange[] = [];
+    const editMode = false;
+    const setEditMode = jest.fn();
+    const setEditActionType = jest.fn();
+    const panelVisualizations: MetricType[] = [];
+    const setPanelVisualizations = jest.fn();
+    const resolutionValue = 'h';
+    const setResolutionValue = jest.fn();
+    const spanValue = 1;
+    const setSpanValue = jest.fn();
+    const resolutionSelectId = 'select_123';
+    const savedObjects = new SavedObjects(httpClientMock);
+    const setToast = jest.fn();
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <TopMenu
+          http={http}
+          IsTopPanelDisabled={IsTopPanelDisabled}
+          startTime={startTime}
+          endTime={endTime}
+          onDatePickerChange={onDatePickerChange}
+          recentlyUsedRanges={recentlyUsedRanges}
+          editMode={editMode}
+          setEditMode={setEditMode}
+          setEditActionType={setEditActionType}
+          panelVisualizations={panelVisualizations}
+          setPanelVisualizations={setPanelVisualizations}
+          resolutionValue={resolutionValue}
+          setResolutionValue={setResolutionValue}
+          spanValue={spanValue}
+          setSpanValue={setSpanValue}
+          resolutionSelectId={resolutionSelectId}
+          savedObjects={savedObjects}
+          setToast={setToast}
+        />
+      </Provider>
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('renders Top Menu Component when disabled in edit mode', async () => {
+    httpClientMock.get = jest.fn(() => Promise.resolve((sampleMetric as unknown) as HttpResponse));
+
+    const http = httpClientMock;
+    const IsTopPanelDisabled = true;
+    const startTime = 'now-1d';
+    const endTime = 'now';
+    const onDatePickerChange = jest.fn();
+    const recentlyUsedRanges: DurationRange[] = [];
+    const editMode = true;
+    const setEditMode = jest.fn();
+    const setEditActionType = jest.fn();
+    const panelVisualizations = sampleMetricsVisualizations;
+    const setPanelVisualizations = jest.fn();
+    const resolutionValue = 'h';
+    const setResolutionValue = jest.fn();
+    const spanValue = 1;
+    const setSpanValue = jest.fn();
+    const resolutionSelectId = 'select_123';
+    const savedObjects = new SavedObjects(httpClientMock);
+    const setToast = jest.fn();
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <TopMenu
+          http={http}
+          IsTopPanelDisabled={IsTopPanelDisabled}
+          startTime={startTime}
+          endTime={endTime}
+          onDatePickerChange={onDatePickerChange}
+          recentlyUsedRanges={recentlyUsedRanges}
+          editMode={editMode}
+          setEditMode={setEditMode}
+          setEditActionType={setEditActionType}
+          panelVisualizations={panelVisualizations}
+          setPanelVisualizations={setPanelVisualizations}
+          resolutionValue={resolutionValue}
+          setResolutionValue={setResolutionValue}
+          spanValue={spanValue}
+          setSpanValue={setSpanValue}
+          resolutionSelectId={resolutionSelectId}
+          savedObjects={savedObjects}
+          setToast={setToast}
+        />
+      </Provider>
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/metrics/top_menu/metrics_export_panel.tsx b/public/components/metrics/top_menu/metrics_export_panel.tsx
new file mode 100644
index 0000000000..9a26d4630c
--- /dev/null
+++ b/public/components/metrics/top_menu/metrics_export_panel.tsx
@@ -0,0 +1,130 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
+import React, { useEffect, useState } from 'react';
+import { CoreStart } from '../../../../../../src/core/public';
+import {
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFormRow,
+  EuiFlexItem,
+  EuiForm,
+} from '@elastic/eui';
+import { createPrometheusMetricById } from '../helpers/utils';
+import { MetricType } from '../../../../common/types/metrics';
+import { fetchVisualizationById } from '../../custom_panels/helpers/utils';
+
+interface MetricsExportPanelProps {
+  http: CoreStart['http'];
+  visualizationsMetaData: any;
+  setVisualizationsMetaData: React.Dispatch<any>;
+  sortedMetricsLayout: MetricType[];
+  selectedPanelOptions: EuiComboBoxOptionOption<unknown>[] | undefined;
+  setSelectedPanelOptions: React.Dispatch<
+    React.SetStateAction<EuiComboBoxOptionOption<unknown>[] | undefined>
+  >;
+}
+
+interface CustomPanelOptions {
+  id: string;
+  name: string;
+  dateCreated: string;
+  dateModified: string;
+}
+
+export const MetricsExportPanel = ({
+  http,
+  visualizationsMetaData,
+  setVisualizationsMetaData,
+  sortedMetricsLayout,
+  selectedPanelOptions,
+  setSelectedPanelOptions,
+}: MetricsExportPanelProps) => {
+  const [options, setOptions] = useState([]);
+
+  const [errorResponse, setErrorResponse] = useState('');
+
+  const getCustomPanelList = async () => {
+    http
+      .get(`${CUSTOM_PANELS_API_PREFIX}/panels`)
+      .then((res: any) => {
+        setOptions(res.panels || []);
+      })
+      .catch((error: any) => console.error(error));
+  };
+
+  const fetchAllvisualizationsById = async () => {
+    let tempVisualizationsMetaData = await Promise.all(
+      sortedMetricsLayout.map(async (metricLayout) => {
+        return metricLayout.metricType === 'savedCustomMetric'
+          ? await fetchVisualizationById(http, metricLayout.id, setErrorResponse)
+          : createPrometheusMetricById(metricLayout.id);
+      })
+    );
+    setVisualizationsMetaData(tempVisualizationsMetaData);
+  };
+
+  useEffect(() => {
+    getCustomPanelList();
+    fetchAllvisualizationsById();
+  }, []);
+
+  const onNameChange = (index: number, name: string) => {
+    let tempVisualizationsMetaData = [...visualizationsMetaData];
+    tempVisualizationsMetaData[index].name = name;
+    setVisualizationsMetaData(tempVisualizationsMetaData);
+  };
+
+  return (
+    <div style={{ minWidth: '15vw' }}>
+      <EuiFormRow
+        label="Custom operational dashboards/application"
+        helpText="Search existing dashboards or applications by name"
+      >
+        <EuiComboBox
+          placeholder="Select dashboards/applications"
+          onChange={(options) => {
+            setSelectedPanelOptions(options);
+          }}
+          selectedOptions={selectedPanelOptions}
+          options={options.map((option: CustomPanelOptions) => {
+            return {
+              panel: option,
+              label: option.name,
+            };
+          })}
+          isClearable={true}
+          data-test-subj="eventExplorer__querySaveComboBox"
+        />
+      </EuiFormRow>
+
+      {visualizationsMetaData.length > 0 && (
+        <div style={{ maxHeight: '30vh', overflowY: 'scroll', width: 'auto', overflowX: 'hidden' }}>
+          {visualizationsMetaData.map((metaData: any, index: number) => {
+            return (
+              <EuiForm component="form">
+                <EuiFlexGroup>
+                  <EuiFlexItem>
+                    <EuiFormRow label={'Metric Name #' + (index + 1)}>
+                      <EuiFieldText
+                        key={'save-panel-id'}
+                        value={visualizationsMetaData[index].name}
+                        onChange={(e) => onNameChange(index, e.target.value)}
+                        data-test-subj="metrics__querySaveName"
+                      />
+                    </EuiFormRow>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiForm>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/public/components/metrics/top_menu/top_menu.scss b/public/components/metrics/top_menu/top_menu.scss
new file mode 100644
index 0000000000..c69f202452
--- /dev/null
+++ b/public/components/metrics/top_menu/top_menu.scss
@@ -0,0 +1,20 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.resolutionSelect {
+    .euiFormControlLayout {
+        .euiFormControlLayout {
+            width: 116px;
+        }
+    }
+}
+
+.resolutionSelectText {
+    width: 70px;
+}
+
+.search-bar-top-menu{
+   width:25vw;
+}
\ No newline at end of file
diff --git a/public/components/metrics/top_menu/top_menu.tsx b/public/components/metrics/top_menu/top_menu.tsx
new file mode 100644
index 0000000000..cd3d17e3b3
--- /dev/null
+++ b/public/components/metrics/top_menu/top_menu.tsx
@@ -0,0 +1,313 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFieldText,
+  EuiSelect,
+  EuiSuperDatePicker,
+  ShortDate,
+  OnTimeChangeProps,
+  EuiButton,
+  EuiComboBoxOptionOption,
+  EuiButtonEmpty,
+  EuiPopover,
+  EuiPopoverFooter,
+} from '@elastic/eui';
+import { DurationRange } from '@elastic/eui/src/components/date_picker/types';
+import { useDispatch, useSelector } from 'react-redux';
+import { uiSettingsService } from '../../../../common/utils';
+import React, { useEffect, useState } from 'react';
+import { MetricType } from '../../../../common/types/metrics';
+import { resolutionOptions } from '../../../../common/constants/metrics';
+import './top_menu.scss';
+import {
+  allAvailableMetricsSelector,
+  metricsLayoutSelector,
+  selectMetric,
+} from '../redux/slices/metrics_slice';
+import { SearchBar } from '../sidebar/search_bar';
+import { CoreStart } from '../../../../../../src/core/public';
+import SavedObjects from '../../../services/saved_objects/event_analytics/saved_objects';
+import { sortMetricLayout, updateMetricsWithSelections } from '../helpers/utils';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
+import { MetricsExportPanel } from './metrics_export_panel';
+
+interface TopMenuProps {
+  http: CoreStart['http'];
+  IsTopPanelDisabled: boolean;
+  startTime: ShortDate;
+  endTime: ShortDate;
+  onDatePickerChange: (props: OnTimeChangeProps) => void;
+  recentlyUsedRanges: DurationRange[];
+  editMode: boolean;
+  setEditMode: React.Dispatch<React.SetStateAction<boolean>>;
+  setEditActionType: React.Dispatch<React.SetStateAction<string>>;
+  panelVisualizations: MetricType[];
+  setPanelVisualizations: React.Dispatch<React.SetStateAction<MetricType[]>>;
+  resolutionValue: string;
+  setResolutionValue: React.Dispatch<React.SetStateAction<string>>;
+  spanValue: number;
+  setSpanValue: React.Dispatch<React.SetStateAction<number>>;
+  resolutionSelectId: string;
+  savedObjects: SavedObjects;
+  setToast: (title: string, color?: string, text?: any, side?: string) => void;
+  setSearch: any;
+}
+
+export const TopMenu = ({
+  http,
+  IsTopPanelDisabled,
+  startTime,
+  endTime,
+  onDatePickerChange,
+  recentlyUsedRanges,
+  editMode,
+  setEditActionType,
+  setEditMode,
+  panelVisualizations,
+  setPanelVisualizations,
+  resolutionValue,
+  setResolutionValue,
+  spanValue,
+  setSpanValue,
+  resolutionSelectId,
+  savedObjects,
+  setToast,
+  setSearch,
+}: TopMenuProps) => {
+  // Redux tools
+  const dispatch = useDispatch();
+  const allAvailableMetrics = useSelector(allAvailableMetricsSelector);
+  const handleAddMetric = (metric: any) => dispatch(selectMetric(metric));
+  const metricsLayout = useSelector(metricsLayoutSelector);
+  const sortedMetricsLayout = sortMetricLayout([...metricsLayout]);
+
+  const [visualizationsMetaData, setVisualizationsMetaData] = useState<any>([]);
+  const [originalPanelVisualizations, setOriginalPanelVisualizations] = useState<MetricType[]>([]);
+  const [isSavePanelOpen, setIsSavePanelOpen] = useState(false);
+  const [selectedPanelOptions, setSelectedPanelOptions] = useState<
+    EuiComboBoxOptionOption<unknown>[] | undefined
+  >([]);
+
+  // toggle between panel edit mode
+  const editPanel = (editType: string) => {
+    setEditMode(!editMode);
+    switch (editType) {
+      case 'edit': {
+        setOriginalPanelVisualizations([...panelVisualizations]);
+        break;
+      }
+      case 'cancel': {
+        setPanelVisualizations(originalPanelVisualizations);
+        setOriginalPanelVisualizations([]);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+    setEditActionType(editType);
+  };
+
+  const onResolutionChange = (e) => {
+    setResolutionValue(e.target.value);
+  };
+
+  const cancelButton = (
+    <EuiButton size="s" iconType="cross" color="danger" onClick={() => editPanel('cancel')}>
+      Cancel
+    </EuiButton>
+  );
+
+  const saveButton = (
+    <EuiButton size="s" iconType="save" onClick={() => editPanel('save')}>
+      Save view
+    </EuiButton>
+  );
+
+  const editButton = (
+    <EuiButton
+      size="s"
+      iconType="pencil"
+      onClick={() => editPanel('edit')}
+      isDisabled={IsTopPanelDisabled}
+    >
+      Edit view
+    </EuiButton>
+  );
+
+  const Savebutton = (
+    <EuiButton
+      iconSide="right"
+      onClick={() => {
+        setIsSavePanelOpen((staleState) => !staleState);
+      }}
+      data-test-subj="metrics__saveManagementPopover"
+      iconType="arrowDown"
+      isDisabled={IsTopPanelDisabled}
+    >
+      Save
+    </EuiButton>
+  );
+
+  const handleSavingObjects = async () => {
+    let savedMetricIds = [];
+    let savedMetricsInPanels = [];
+
+    try {
+      savedMetricIds = await Promise.all(
+        sortedMetricsLayout.map(async (metricLayout, index) => {
+          const updatedMetric = updateMetricsWithSelections(
+            visualizationsMetaData[index],
+            startTime,
+            endTime,
+            spanValue + resolutionValue
+          );
+
+          if (metricLayout.metricType === 'prometheusMetric') {
+            return await savedObjects.createSavedVisualization(updatedMetric);
+          } else {
+            return await savedObjects.updateSavedVisualizationById({
+              ...updatedMetric,
+              objectId: metricLayout.id,
+            });
+          }
+        })
+      );
+    } catch (e) {
+      const message = 'Issue in saving metrics';
+      console.error(message, e);
+      setToast('Issue in saving metrics', 'danger');
+    }
+
+    setToast('Saved metrics successfully!');
+
+    if (selectedPanelOptions.length > 0) {
+      try {
+        const allMetricIds = savedMetricIds.map((metric) => metric.objectId);
+        savedMetricsInPanels = await Promise.all(
+          selectedPanelOptions.map((panel) => {
+            return http.post(`${CUSTOM_PANELS_API_PREFIX}/visualizations/multiple`, {
+              body: JSON.stringify({
+                panelId: panel.panel.id,
+                savedVisualizationIds: allMetricIds,
+              }),
+            });
+          })
+        );
+      } catch (e) {
+        const message = 'Issue in saving metrics to panels';
+        console.error(message, e);
+        setToast('Issue in saving metrics', 'danger');
+      }
+      setToast('Saved metrics to panels successfully!');
+    }
+  };
+
+  return (
+    <>
+      <EuiPageHeader>
+        <EuiPageHeaderSection>
+          <EuiFlexGroup className="search-bar-top-menu">
+            <EuiFlexItem>
+              <SearchBar setSearch={setSearch} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPageHeaderSection>
+        <EuiPageHeaderSection>
+          <EuiFlexGroup gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <div className="resolutionSelect">
+                <EuiFieldText
+                  className="resolutionSelectText"
+                  prepend="Span Interval"
+                  value={spanValue}
+                  isInvalid={spanValue < 1}
+                  onChange={(e) => setSpanValue(e.target.value)}
+                  append={
+                    <EuiSelect
+                      id={resolutionSelectId}
+                      options={resolutionOptions}
+                      value={resolutionValue}
+                      onChange={(e) => onResolutionChange(e)}
+                      aria-label="resolutionSelect"
+                    />
+                  }
+                  disabled={IsTopPanelDisabled}
+                  aria-label="resolutionField"
+                />
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiSuperDatePicker
+                dateFormat={uiSettingsService.get('dateFormat')}
+                start={startTime}
+                end={endTime}
+                onTimeChange={onDatePickerChange}
+                recentlyUsedRanges={recentlyUsedRanges}
+                isDisabled={IsTopPanelDisabled}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiPopover
+                button={Savebutton}
+                isOpen={isSavePanelOpen}
+                closePopover={() => setIsSavePanelOpen(false)}
+              >
+                <MetricsExportPanel
+                  http={http}
+                  visualizationsMetaData={visualizationsMetaData}
+                  setVisualizationsMetaData={setVisualizationsMetaData}
+                  sortedMetricsLayout={sortedMetricsLayout}
+                  selectedPanelOptions={selectedPanelOptions}
+                  setSelectedPanelOptions={setSelectedPanelOptions}
+                />
+                <EuiPopoverFooter>
+                  <EuiFlexGroup justifyContent="flexEnd">
+                    <EuiFlexItem grow={false}>
+                      <EuiButtonEmpty
+                        size="s"
+                        onClick={() => setIsSavePanelOpen(false)}
+                        data-test-subj="metrics__SaveCancel"
+                      >
+                        Cancel
+                      </EuiButtonEmpty>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiButton
+                        size="s"
+                        fill
+                        onClick={() => {
+                          handleSavingObjects().then(() => setIsSavePanelOpen(false));
+                        }}
+                        data-test-subj="metrics__SaveConfirm"
+                      >
+                        Save
+                      </EuiButton>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiPopoverFooter>
+              </EuiPopover>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPageHeaderSection>
+      </EuiPageHeader>
+      <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
+        {editMode ? (
+          <>
+            <EuiFlexItem grow={false}>{cancelButton}</EuiFlexItem>
+            <EuiFlexItem grow={false}>{saveButton}</EuiFlexItem>
+          </>
+        ) : (
+          <EuiFlexItem grow={false}>{editButton}</EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </>
+  );
+};
diff --git a/public/components/metrics/view/__tests__/__snapshots__/empty_view.test.tsx.snap b/public/components/metrics/view/__tests__/__snapshots__/empty_view.test.tsx.snap
new file mode 100644
index 0000000000..c9427636e0
--- /dev/null
+++ b/public/components/metrics/view/__tests__/__snapshots__/empty_view.test.tsx.snap
@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Empty View Component renders empty view container without metrics 1`] = `
+<EmptyMetricsView>
+  <div>
+    <EuiPanel
+      className="empty-view-metrics"
+    >
+      <div
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow empty-view-metrics"
+      >
+        <div
+          className="align-center-view"
+        >
+          <EuiText>
+            <div
+              className="euiText euiText--medium"
+            >
+              <EuiIcon
+                size="xxl"
+                type="minusInCircle"
+              >
+                <EuiIconEmpty
+                  aria-hidden={true}
+                  className="euiIcon euiIcon--xxLarge euiIcon-isLoading"
+                  focusable="false"
+                  role="img"
+                  style={null}
+                >
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--xxLarge 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="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <h2>
+                No Metrics Selected
+              </h2>
+              <EuiSpacer
+                size="m"
+              >
+                <div
+                  className="euiSpacer euiSpacer--m"
+                />
+              </EuiSpacer>
+              <EuiText
+                color="subdued"
+                size="m"
+              >
+                <div
+                  className="euiText euiText--medium"
+                >
+                  <EuiTextColor
+                    color="subdued"
+                    component="div"
+                  >
+                    <div
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      Select a metric from the left sidepanel to view results.
+                    </div>
+                  </EuiTextColor>
+                </div>
+              </EuiText>
+            </div>
+          </EuiText>
+        </div>
+      </div>
+    </EuiPanel>
+  </div>
+</EmptyMetricsView>
+`;
diff --git a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
new file mode 100644
index 0000000000..e03336e60d
--- /dev/null
+++ b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
@@ -0,0 +1,1198 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
+<Provider
+  store={
+    Object {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <MetricsGrid
+    chrome={
+      Object {
+        "getIsNavDrawerLocked$": [MockFunction] {
+          "calls": Array [
+            Array [],
+            Array [],
+            Array [],
+            Array [],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": Observable {
+                "_isScalar": false,
+                "_subscribe": [Function],
+              },
+            },
+            Object {
+              "type": "return",
+              "value": Observable {
+                "_isScalar": false,
+                "_subscribe": [Function],
+              },
+            },
+            Object {
+              "type": "return",
+              "value": Observable {
+                "_isScalar": false,
+                "_subscribe": [Function],
+              },
+            },
+            Object {
+              "type": "return",
+              "value": Observable {
+                "_isScalar": false,
+                "_subscribe": [Function],
+              },
+            },
+          ],
+        },
+        "setBreadcrumbs": [MockFunction],
+      }
+    }
+    editActionType="save"
+    editMode={false}
+    endTime="now"
+    http={[MockFunction]}
+    moveToEvents={[MockFunction]}
+    onRefresh={true}
+    panelVisualizations={
+      Array [
+        Object {
+          "h": 2,
+          "id": "Y4muP4QBiaYaSxpXk7r8",
+          "metricType": "savedCustomMetric",
+          "savedVisualizationId": "Y4muP4QBiaYaSxpXk7r8",
+          "w": 12,
+          "x": 0,
+          "y": 0,
+        },
+        Object {
+          "h": 2,
+          "id": "tomAP4QBiaYaSxpXALls",
+          "metricType": "savedCustomMetric",
+          "savedVisualizationId": "tomAP4QBiaYaSxpXALls",
+          "w": 12,
+          "x": 0,
+          "y": 2,
+        },
+        Object {
+          "h": 2,
+          "id": "prometheus.process_resident_memory_bytes",
+          "metricType": "prometheusMetric",
+          "savedVisualizationId": "prometheus.process_resident_memory_bytes",
+          "w": 12,
+          "x": 0,
+          "y": 4,
+        },
+      ]
+    }
+    pplService={
+      PPLService {
+        "fetch": [Function],
+        "http": [MockFunction],
+      }
+    }
+    setPanelVisualizations={[MockFunction]}
+    spanParam="1h"
+    startTime="now-30m"
+  >
+    <WidthProvider
+      breakpoints={
+        Object {
+          "lg": 1200,
+          "md": 996,
+          "sm": 768,
+          "xs": 480,
+          "xxs": 0,
+        }
+      }
+      className="layout full-width"
+      cols={
+        Object {
+          "lg": 12,
+          "md": 12,
+          "sm": 12,
+          "xs": 1,
+          "xxs": 1,
+        }
+      }
+      layouts={
+        Object {
+          "lg": Array [
+            Object {
+              "h": 2,
+              "i": "Y4muP4QBiaYaSxpXk7r8",
+              "maxW": 12,
+              "minW": 12,
+              "static": true,
+              "w": 12,
+              "x": 0,
+              "y": 0,
+            },
+            Object {
+              "h": 2,
+              "i": "tomAP4QBiaYaSxpXALls",
+              "maxW": 12,
+              "minW": 12,
+              "static": true,
+              "w": 12,
+              "x": 0,
+              "y": 2,
+            },
+            Object {
+              "h": 2,
+              "i": "prometheus.process_resident_memory_bytes",
+              "maxW": 12,
+              "minW": 12,
+              "static": true,
+              "w": 12,
+              "x": 0,
+              "y": 4,
+            },
+          ],
+          "md": Array [
+            Object {
+              "h": 2,
+              "i": "Y4muP4QBiaYaSxpXk7r8",
+              "maxW": 12,
+              "minW": 12,
+              "static": true,
+              "w": 12,
+              "x": 0,
+              "y": 0,
+            },
+            Object {
+              "h": 2,
+              "i": "tomAP4QBiaYaSxpXALls",
+              "maxW": 12,
+              "minW": 12,
+              "static": true,
+              "w": 12,
+              "x": 0,
+              "y": 2,
+            },
+            Object {
+              "h": 2,
+              "i": "prometheus.process_resident_memory_bytes",
+              "maxW": 12,
+              "minW": 12,
+              "static": true,
+              "w": 12,
+              "x": 0,
+              "y": 4,
+            },
+          ],
+          "sm": Array [
+            Object {
+              "h": 2,
+              "i": "Y4muP4QBiaYaSxpXk7r8",
+              "maxW": 12,
+              "minW": 12,
+              "static": true,
+              "w": 12,
+              "x": 0,
+              "y": 0,
+            },
+            Object {
+              "h": 2,
+              "i": "tomAP4QBiaYaSxpXALls",
+              "maxW": 12,
+              "minW": 12,
+              "static": true,
+              "w": 12,
+              "x": 0,
+              "y": 2,
+            },
+            Object {
+              "h": 2,
+              "i": "prometheus.process_resident_memory_bytes",
+              "maxW": 12,
+              "minW": 12,
+              "static": true,
+              "w": 12,
+              "x": 0,
+              "y": 4,
+            },
+          ],
+        }
+      }
+      measureBeforeMount={false}
+      onLayoutChange={[Function]}
+    >
+      <ResponsiveReactGridLayout
+        breakpoints={
+          Object {
+            "lg": 1200,
+            "md": 996,
+            "sm": 768,
+            "xs": 480,
+            "xxs": 0,
+          }
+        }
+        className="layout full-width"
+        cols={
+          Object {
+            "lg": 12,
+            "md": 12,
+            "sm": 12,
+            "xs": 1,
+            "xxs": 1,
+          }
+        }
+        layouts={
+          Object {
+            "lg": Array [
+              Object {
+                "h": 2,
+                "i": "Y4muP4QBiaYaSxpXk7r8",
+                "maxW": 12,
+                "minW": 12,
+                "static": true,
+                "w": 12,
+                "x": 0,
+                "y": 0,
+              },
+              Object {
+                "h": 2,
+                "i": "tomAP4QBiaYaSxpXALls",
+                "maxW": 12,
+                "minW": 12,
+                "static": true,
+                "w": 12,
+                "x": 0,
+                "y": 2,
+              },
+              Object {
+                "h": 2,
+                "i": "prometheus.process_resident_memory_bytes",
+                "maxW": 12,
+                "minW": 12,
+                "static": true,
+                "w": 12,
+                "x": 0,
+                "y": 4,
+              },
+            ],
+            "md": Array [
+              Object {
+                "h": 2,
+                "i": "Y4muP4QBiaYaSxpXk7r8",
+                "maxW": 12,
+                "minW": 12,
+                "static": true,
+                "w": 12,
+                "x": 0,
+                "y": 0,
+              },
+              Object {
+                "h": 2,
+                "i": "tomAP4QBiaYaSxpXALls",
+                "maxW": 12,
+                "minW": 12,
+                "static": true,
+                "w": 12,
+                "x": 0,
+                "y": 2,
+              },
+              Object {
+                "h": 2,
+                "i": "prometheus.process_resident_memory_bytes",
+                "maxW": 12,
+                "minW": 12,
+                "static": true,
+                "w": 12,
+                "x": 0,
+                "y": 4,
+              },
+            ],
+            "sm": Array [
+              Object {
+                "h": 2,
+                "i": "Y4muP4QBiaYaSxpXk7r8",
+                "maxW": 12,
+                "minW": 12,
+                "static": true,
+                "w": 12,
+                "x": 0,
+                "y": 0,
+              },
+              Object {
+                "h": 2,
+                "i": "tomAP4QBiaYaSxpXALls",
+                "maxW": 12,
+                "minW": 12,
+                "static": true,
+                "w": 12,
+                "x": 0,
+                "y": 2,
+              },
+              Object {
+                "h": 2,
+                "i": "prometheus.process_resident_memory_bytes",
+                "maxW": 12,
+                "minW": 12,
+                "static": true,
+                "w": 12,
+                "x": 0,
+                "y": 4,
+              },
+            ],
+          }
+        }
+        onBreakpointChange={[Function]}
+        onLayoutChange={[Function]}
+        onWidthChange={[Function]}
+        width={0}
+      >
+        <ReactGridLayout
+          autoSize={true}
+          className="layout full-width"
+          cols={1}
+          compactType="vertical"
+          containerPadding={null}
+          draggableCancel=""
+          draggableHandle=""
+          isDraggable={true}
+          isResizable={true}
+          layout={
+            Array [
+              Object {
+                "h": 2,
+                "i": "Y4muP4QBiaYaSxpXk7r8",
+                "isDraggable": undefined,
+                "isResizable": undefined,
+                "maxH": undefined,
+                "maxW": 12,
+                "minH": undefined,
+                "minW": 12,
+                "moved": false,
+                "static": true,
+                "w": 1,
+                "x": 0,
+                "y": 0,
+              },
+              Object {
+                "h": 2,
+                "i": "tomAP4QBiaYaSxpXALls",
+                "isDraggable": undefined,
+                "isResizable": undefined,
+                "maxH": undefined,
+                "maxW": 12,
+                "minH": undefined,
+                "minW": 12,
+                "moved": false,
+                "static": true,
+                "w": 1,
+                "x": 0,
+                "y": 2,
+              },
+              Object {
+                "h": 2,
+                "i": "prometheus.process_resident_memory_bytes",
+                "isDraggable": undefined,
+                "isResizable": undefined,
+                "maxH": undefined,
+                "maxW": 12,
+                "minH": undefined,
+                "minW": 12,
+                "moved": false,
+                "static": true,
+                "w": 1,
+                "x": 0,
+                "y": 4,
+              },
+            ]
+          }
+          margin={
+            Array [
+              10,
+              10,
+            ]
+          }
+          maxRows={Infinity}
+          onDrag={[Function]}
+          onDragStart={[Function]}
+          onDragStop={[Function]}
+          onLayoutChange={[Function]}
+          onResize={[Function]}
+          onResizeStart={[Function]}
+          onResizeStop={[Function]}
+          preventCollision={false}
+          rowHeight={150}
+          style={Object {}}
+          useCSSTransforms={true}
+          verticalCompact={true}
+          width={0}
+        >
+          <div
+            className="react-grid-layout layout full-width"
+            style={
+              Object {
+                "height": "970px",
+              }
+            }
+          >
+            <GridItem
+              cancel=""
+              className=""
+              cols={1}
+              containerPadding={
+                Array [
+                  10,
+                  10,
+                ]
+              }
+              containerWidth={0}
+              h={2}
+              handle=""
+              i="Y4muP4QBiaYaSxpXk7r8"
+              isDraggable={false}
+              isResizable={false}
+              key=".$Y4muP4QBiaYaSxpXk7r8"
+              margin={
+                Array [
+                  10,
+                  10,
+                ]
+              }
+              maxH={Infinity}
+              maxRows={Infinity}
+              maxW={12}
+              minH={1}
+              minW={12}
+              onDrag={[Function]}
+              onDragStart={[Function]}
+              onDragStop={[Function]}
+              onResize={[Function]}
+              onResizeStart={[Function]}
+              onResizeStop={[Function]}
+              rowHeight={150}
+              static={true}
+              useCSSTransforms={true}
+              usePercentages={false}
+              w={1}
+              x={0}
+              y={0}
+            >
+              <div
+                className="react-grid-item static cssTransforms"
+                key="Y4muP4QBiaYaSxpXk7r8"
+                style={
+                  Object {
+                    "MozTransform": "translate(10px,10px)",
+                    "OTransform": "translate(10px,10px)",
+                    "WebkitTransform": "translate(10px,10px)",
+                    "height": "310px",
+                    "msTransform": "translate(10px,10px)",
+                    "position": "absolute",
+                    "transform": "translate(10px,10px)",
+                    "width": "-20px",
+                  }
+                }
+              >
+                <VisualizationContainer
+                  editMode={false}
+                  fromTime="now-30m"
+                  http={[MockFunction]}
+                  key="Y4muP4QBiaYaSxpXk7r8"
+                  onEditClick={[MockFunction]}
+                  onRefresh={true}
+                  pplFilterValue=""
+                  pplService={
+                    PPLService {
+                      "fetch": [Function],
+                      "http": [MockFunction],
+                    }
+                  }
+                  removeVisualization={[Function]}
+                  savedVisualizationId="Y4muP4QBiaYaSxpXk7r8"
+                  spanParam="1h"
+                  toTime="now"
+                  usedInNotebooks={true}
+                  visualizationId="Y4muP4QBiaYaSxpXk7r8"
+                >
+                  <EuiPanel
+                    className="panel-full-width"
+                    data-test-subj="VisualizationPanel"
+                    grow={false}
+                  >
+                    <div
+                      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width"
+                      data-test-subj="VisualizationPanel"
+                    >
+                      <div
+                        className=""
+                      >
+                        <EuiFlexGroup
+                          justifyContent="spaceBetween"
+                        >
+                          <div
+                            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <EuiFlexItem
+                              style={
+                                Object {
+                                  "width": "35%",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiFlexItem"
+                                style={
+                                  Object {
+                                    "width": "35%",
+                                  }
+                                }
+                              >
+                                <EuiText
+                                  className="panels-title-text"
+                                  grow={false}
+                                >
+                                  <div
+                                    className="euiText euiText--medium panels-title-text euiText--constrainedWidth"
+                                  >
+                                    <EuiToolTip
+                                      content=""
+                                      delay="long"
+                                      position="top"
+                                    >
+                                      <span
+                                        className="euiToolTipAnchor"
+                                        onKeyUp={[Function]}
+                                        onMouseOut={[Function]}
+                                        onMouseOver={[Function]}
+                                      >
+                                        <h5
+                                          onBlur={[Function]}
+                                          onFocus={[Function]}
+                                        />
+                                      </span>
+                                    </EuiToolTip>
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </EuiFlexItem>
+                            <EuiFlexItem
+                              className="visualization-action-button"
+                              grow={false}
+                            >
+                              <div
+                                className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
+                              >
+                                <EuiPopover
+                                  anchorPosition="downLeft"
+                                  button={
+                                    <EuiButtonIcon
+                                      aria-label="actionMenuButton"
+                                      iconType="boxesHorizontal"
+                                      onClick={[Function]}
+                                    />
+                                  }
+                                  closePopover={[Function]}
+                                  display="inlineBlock"
+                                  hasArrow={true}
+                                  isOpen={false}
+                                  ownFocus={true}
+                                  panelPaddingSize="m"
+                                >
+                                  <div
+                                    className="euiPopover euiPopover--anchorDownLeft"
+                                  >
+                                    <div
+                                      className="euiPopover__anchor"
+                                    >
+                                      <EuiButtonIcon
+                                        aria-label="actionMenuButton"
+                                        iconType="boxesHorizontal"
+                                        onClick={[Function]}
+                                      >
+                                        <button
+                                          aria-label="actionMenuButton"
+                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <EuiIcon
+                                            aria-hidden="true"
+                                            className="euiButtonIcon__icon"
+                                            color="inherit"
+                                            size="m"
+                                            type="boxesHorizontal"
+                                          >
+                                            <EuiIconEmpty
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              />
+                                            </EuiIconEmpty>
+                                          </EuiIcon>
+                                        </button>
+                                      </EuiButtonIcon>
+                                    </div>
+                                  </div>
+                                </EuiPopover>
+                              </div>
+                            </EuiFlexItem>
+                          </div>
+                        </EuiFlexGroup>
+                      </div>
+                      <div
+                        className="visualization-div"
+                      >
+                        <EuiLoadingChart
+                          className="visualization-loading-chart"
+                          mono={true}
+                          size="xl"
+                        >
+                          <span
+                            className="euiLoadingChart euiLoadingChart--mono visualization-loading-chart euiLoadingChart--xLarge"
+                          >
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                          </span>
+                        </EuiLoadingChart>
+                      </div>
+                    </div>
+                  </EuiPanel>
+                </VisualizationContainer>
+              </div>
+            </GridItem>
+            <GridItem
+              cancel=""
+              className=""
+              cols={1}
+              containerPadding={
+                Array [
+                  10,
+                  10,
+                ]
+              }
+              containerWidth={0}
+              h={2}
+              handle=""
+              i="tomAP4QBiaYaSxpXALls"
+              isDraggable={false}
+              isResizable={false}
+              key=".$tomAP4QBiaYaSxpXALls"
+              margin={
+                Array [
+                  10,
+                  10,
+                ]
+              }
+              maxH={Infinity}
+              maxRows={Infinity}
+              maxW={12}
+              minH={1}
+              minW={12}
+              onDrag={[Function]}
+              onDragStart={[Function]}
+              onDragStop={[Function]}
+              onResize={[Function]}
+              onResizeStart={[Function]}
+              onResizeStop={[Function]}
+              rowHeight={150}
+              static={true}
+              useCSSTransforms={true}
+              usePercentages={false}
+              w={1}
+              x={0}
+              y={2}
+            >
+              <div
+                className="react-grid-item static cssTransforms"
+                key="tomAP4QBiaYaSxpXALls"
+                style={
+                  Object {
+                    "MozTransform": "translate(10px,330px)",
+                    "OTransform": "translate(10px,330px)",
+                    "WebkitTransform": "translate(10px,330px)",
+                    "height": "310px",
+                    "msTransform": "translate(10px,330px)",
+                    "position": "absolute",
+                    "transform": "translate(10px,330px)",
+                    "width": "-20px",
+                  }
+                }
+              >
+                <VisualizationContainer
+                  editMode={false}
+                  fromTime="now-30m"
+                  http={[MockFunction]}
+                  key="tomAP4QBiaYaSxpXALls"
+                  onEditClick={[MockFunction]}
+                  onRefresh={true}
+                  pplFilterValue=""
+                  pplService={
+                    PPLService {
+                      "fetch": [Function],
+                      "http": [MockFunction],
+                    }
+                  }
+                  removeVisualization={[Function]}
+                  savedVisualizationId="tomAP4QBiaYaSxpXALls"
+                  spanParam="1h"
+                  toTime="now"
+                  usedInNotebooks={true}
+                  visualizationId="tomAP4QBiaYaSxpXALls"
+                >
+                  <EuiPanel
+                    className="panel-full-width"
+                    data-test-subj="VisualizationPanel"
+                    grow={false}
+                  >
+                    <div
+                      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width"
+                      data-test-subj="VisualizationPanel"
+                    >
+                      <div
+                        className=""
+                      >
+                        <EuiFlexGroup
+                          justifyContent="spaceBetween"
+                        >
+                          <div
+                            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <EuiFlexItem
+                              style={
+                                Object {
+                                  "width": "35%",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiFlexItem"
+                                style={
+                                  Object {
+                                    "width": "35%",
+                                  }
+                                }
+                              >
+                                <EuiText
+                                  className="panels-title-text"
+                                  grow={false}
+                                >
+                                  <div
+                                    className="euiText euiText--medium panels-title-text euiText--constrainedWidth"
+                                  >
+                                    <EuiToolTip
+                                      content=""
+                                      delay="long"
+                                      position="top"
+                                    >
+                                      <span
+                                        className="euiToolTipAnchor"
+                                        onKeyUp={[Function]}
+                                        onMouseOut={[Function]}
+                                        onMouseOver={[Function]}
+                                      >
+                                        <h5
+                                          onBlur={[Function]}
+                                          onFocus={[Function]}
+                                        />
+                                      </span>
+                                    </EuiToolTip>
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </EuiFlexItem>
+                            <EuiFlexItem
+                              className="visualization-action-button"
+                              grow={false}
+                            >
+                              <div
+                                className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
+                              >
+                                <EuiPopover
+                                  anchorPosition="downLeft"
+                                  button={
+                                    <EuiButtonIcon
+                                      aria-label="actionMenuButton"
+                                      iconType="boxesHorizontal"
+                                      onClick={[Function]}
+                                    />
+                                  }
+                                  closePopover={[Function]}
+                                  display="inlineBlock"
+                                  hasArrow={true}
+                                  isOpen={false}
+                                  ownFocus={true}
+                                  panelPaddingSize="m"
+                                >
+                                  <div
+                                    className="euiPopover euiPopover--anchorDownLeft"
+                                  >
+                                    <div
+                                      className="euiPopover__anchor"
+                                    >
+                                      <EuiButtonIcon
+                                        aria-label="actionMenuButton"
+                                        iconType="boxesHorizontal"
+                                        onClick={[Function]}
+                                      >
+                                        <button
+                                          aria-label="actionMenuButton"
+                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <EuiIcon
+                                            aria-hidden="true"
+                                            className="euiButtonIcon__icon"
+                                            color="inherit"
+                                            size="m"
+                                            type="boxesHorizontal"
+                                          >
+                                            <EuiIconEmpty
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              />
+                                            </EuiIconEmpty>
+                                          </EuiIcon>
+                                        </button>
+                                      </EuiButtonIcon>
+                                    </div>
+                                  </div>
+                                </EuiPopover>
+                              </div>
+                            </EuiFlexItem>
+                          </div>
+                        </EuiFlexGroup>
+                      </div>
+                      <div
+                        className="visualization-div"
+                      >
+                        <EuiLoadingChart
+                          className="visualization-loading-chart"
+                          mono={true}
+                          size="xl"
+                        >
+                          <span
+                            className="euiLoadingChart euiLoadingChart--mono visualization-loading-chart euiLoadingChart--xLarge"
+                          >
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                          </span>
+                        </EuiLoadingChart>
+                      </div>
+                    </div>
+                  </EuiPanel>
+                </VisualizationContainer>
+              </div>
+            </GridItem>
+            <GridItem
+              cancel=""
+              className=""
+              cols={1}
+              containerPadding={
+                Array [
+                  10,
+                  10,
+                ]
+              }
+              containerWidth={0}
+              h={2}
+              handle=""
+              i="prometheus.process_resident_memory_bytes"
+              isDraggable={false}
+              isResizable={false}
+              key=".$prometheus.process_resident_memory_bytes"
+              margin={
+                Array [
+                  10,
+                  10,
+                ]
+              }
+              maxH={Infinity}
+              maxRows={Infinity}
+              maxW={12}
+              minH={1}
+              minW={12}
+              onDrag={[Function]}
+              onDragStart={[Function]}
+              onDragStop={[Function]}
+              onResize={[Function]}
+              onResizeStart={[Function]}
+              onResizeStop={[Function]}
+              rowHeight={150}
+              static={true}
+              useCSSTransforms={true}
+              usePercentages={false}
+              w={1}
+              x={0}
+              y={4}
+            >
+              <div
+                className="react-grid-item static cssTransforms"
+                key="prometheus.process_resident_memory_bytes"
+                style={
+                  Object {
+                    "MozTransform": "translate(10px,650px)",
+                    "OTransform": "translate(10px,650px)",
+                    "WebkitTransform": "translate(10px,650px)",
+                    "height": "310px",
+                    "msTransform": "translate(10px,650px)",
+                    "position": "absolute",
+                    "transform": "translate(10px,650px)",
+                    "width": "-20px",
+                  }
+                }
+              >
+                <VisualizationContainer
+                  catalogVisualization={true}
+                  editMode={false}
+                  fromTime="now-30m"
+                  http={[MockFunction]}
+                  key="prometheus.process_resident_memory_bytes"
+                  onEditClick={[MockFunction]}
+                  onRefresh={true}
+                  pplFilterValue=""
+                  pplService={
+                    PPLService {
+                      "fetch": [Function],
+                      "http": [MockFunction],
+                    }
+                  }
+                  removeVisualization={[Function]}
+                  savedVisualizationId="prometheus.process_resident_memory_bytes"
+                  spanParam="1h"
+                  toTime="now"
+                  usedInNotebooks={true}
+                  visualizationId="prometheus.process_resident_memory_bytes"
+                >
+                  <EuiPanel
+                    className="panel-full-width"
+                    data-test-subj="prometheus.process_resident_memory_bytesVisualizationPanel"
+                    grow={false}
+                  >
+                    <div
+                      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--flexGrowZero panel-full-width"
+                      data-test-subj="prometheus.process_resident_memory_bytesVisualizationPanel"
+                    >
+                      <div
+                        className=""
+                      >
+                        <EuiFlexGroup
+                          justifyContent="spaceBetween"
+                        >
+                          <div
+                            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+                          >
+                            <EuiFlexItem
+                              style={
+                                Object {
+                                  "width": "35%",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiFlexItem"
+                                style={
+                                  Object {
+                                    "width": "35%",
+                                  }
+                                }
+                              >
+                                <EuiText
+                                  className="panels-title-text"
+                                  grow={false}
+                                >
+                                  <div
+                                    className="euiText euiText--medium panels-title-text euiText--constrainedWidth"
+                                  >
+                                    <EuiToolTip
+                                      content="prometheus.process_resident_memory_bytes"
+                                      delay="long"
+                                      position="top"
+                                    >
+                                      <span
+                                        className="euiToolTipAnchor"
+                                        onKeyUp={[Function]}
+                                        onMouseOut={[Function]}
+                                        onMouseOver={[Function]}
+                                      >
+                                        <h5
+                                          onBlur={[Function]}
+                                          onFocus={[Function]}
+                                        >
+                                          prometheus.process_resident_memory_bytes
+                                        </h5>
+                                      </span>
+                                    </EuiToolTip>
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </EuiFlexItem>
+                            <EuiFlexItem
+                              className="visualization-action-button"
+                              grow={false}
+                            >
+                              <div
+                                className="euiFlexItem euiFlexItem--flexGrowZero visualization-action-button"
+                              >
+                                <EuiPopover
+                                  anchorPosition="downLeft"
+                                  button={
+                                    <EuiButtonIcon
+                                      aria-label="actionMenuButton"
+                                      iconType="boxesHorizontal"
+                                      onClick={[Function]}
+                                    />
+                                  }
+                                  closePopover={[Function]}
+                                  display="inlineBlock"
+                                  hasArrow={true}
+                                  isOpen={false}
+                                  ownFocus={true}
+                                  panelPaddingSize="m"
+                                >
+                                  <div
+                                    className="euiPopover euiPopover--anchorDownLeft"
+                                  >
+                                    <div
+                                      className="euiPopover__anchor"
+                                    >
+                                      <EuiButtonIcon
+                                        aria-label="actionMenuButton"
+                                        iconType="boxesHorizontal"
+                                        onClick={[Function]}
+                                      >
+                                        <button
+                                          aria-label="actionMenuButton"
+                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          type="button"
+                                        >
+                                          <EuiIcon
+                                            aria-hidden="true"
+                                            className="euiButtonIcon__icon"
+                                            color="inherit"
+                                            size="m"
+                                            type="boxesHorizontal"
+                                          >
+                                            <EuiIconEmpty
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              />
+                                            </EuiIconEmpty>
+                                          </EuiIcon>
+                                        </button>
+                                      </EuiButtonIcon>
+                                    </div>
+                                  </div>
+                                </EuiPopover>
+                              </div>
+                            </EuiFlexItem>
+                          </div>
+                        </EuiFlexGroup>
+                      </div>
+                      <div
+                        className="visualization-div"
+                      >
+                        <EuiLoadingChart
+                          className="visualization-loading-chart"
+                          mono={true}
+                          size="xl"
+                        >
+                          <span
+                            className="euiLoadingChart euiLoadingChart--mono visualization-loading-chart euiLoadingChart--xLarge"
+                          >
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                            <span
+                              className="euiLoadingChart__bar"
+                            />
+                          </span>
+                        </EuiLoadingChart>
+                      </div>
+                    </div>
+                  </EuiPanel>
+                </VisualizationContainer>
+              </div>
+            </GridItem>
+          </div>
+        </ReactGridLayout>
+      </ResponsiveReactGridLayout>
+    </WidthProvider>
+  </MetricsGrid>
+</Provider>
+`;
diff --git a/public/components/metrics/view/__tests__/empty_view.test.tsx b/public/components/metrics/view/__tests__/empty_view.test.tsx
new file mode 100644
index 0000000000..d27a946cae
--- /dev/null
+++ b/public/components/metrics/view/__tests__/empty_view.test.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { EmptyMetricsView } from '../empty_view';
+import { waitFor } from '@testing-library/react';
+
+describe('Empty View Component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty view container without metrics', async () => {
+    const wrapper = mount(<EmptyMetricsView />);
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/metrics/view/__tests__/metrics_grid.test.tsx b/public/components/metrics/view/__tests__/metrics_grid.test.tsx
new file mode 100644
index 0000000000..2cf11a5014
--- /dev/null
+++ b/public/components/metrics/view/__tests__/metrics_grid.test.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { MetricsGrid } from '../metrics_grid';
+import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
+import { coreStartMock } from '../../../../../test/__mocks__/coreMocks';
+import PPLService from '../../../../services/requests/ppl';
+import { sampleMetric, sampleMetricsVisualizations } from '../../../../../test/metrics_contants';
+import { createStore } from '@reduxjs/toolkit';
+import rootReducer from '../../../../framework/redux/reducers';
+import { Provider } from 'react-redux';
+import { HttpResponse } from '../../../../../../../src/core/public';
+
+describe('Metrics Grid Component', () => {
+  configure({ adapter: new Adapter() });
+  const store = createStore(rootReducer);
+
+  it('renders Metrics Grid Component', async () => {
+    httpClientMock.get = jest.fn(() => Promise.resolve((sampleMetric as unknown) as HttpResponse));
+
+    const http = httpClientMock;
+    const core = coreStartMock;
+    const panelVisualizations = sampleMetricsVisualizations;
+    const setPanelVisualizations = jest.fn();
+    const editMode = false;
+    const pplService = new PPLService(httpClientMock);
+    const startTime = 'now-30m';
+    const endTime = 'now';
+    const onEditClick = jest.fn();
+    const onRefresh = true;
+    const editActionType = 'save';
+    const spanParam = '1h';
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <MetricsGrid
+          http={http}
+          chrome={core.chrome}
+          panelVisualizations={panelVisualizations}
+          setPanelVisualizations={setPanelVisualizations}
+          editMode={editMode}
+          pplService={pplService}
+          startTime={startTime}
+          endTime={endTime}
+          moveToEvents={onEditClick}
+          onRefresh={onRefresh}
+          editActionType={editActionType}
+          spanParam={spanParam}
+        />
+      </Provider>
+    );
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/metrics/view/empty_view.scss b/public/components/metrics/view/empty_view.scss
new file mode 100644
index 0000000000..d3c9a60268
--- /dev/null
+++ b/public/components/metrics/view/empty_view.scss
@@ -0,0 +1,15 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.empty-view-metrics {
+    min-height: 70vh;
+    justify-content: center;
+    display: flex;
+    align-items: center;
+}
+
+.align-center-view {
+    text-align: center
+}
\ No newline at end of file
diff --git a/public/components/metrics/view/empty_view.tsx b/public/components/metrics/view/empty_view.tsx
new file mode 100644
index 0000000000..f67b6e1a45
--- /dev/null
+++ b/public/components/metrics/view/empty_view.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiSpacer, EuiText, EuiIcon, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import React, { useState } from 'react';
+import './empty_view.scss';
+
+export const EmptyMetricsView = () => {
+  return (
+    <div>
+      <EuiPanel className="empty-view-metrics">
+        <div className="align-center-view">
+          <EuiText>
+            <EuiIcon type="minusInCircle" size="xxl" />
+            <EuiSpacer size="s" />
+            <h2>No Metrics Selected</h2>
+            <EuiSpacer size="m" />
+            <EuiText color="subdued" size="m">
+              Select a metric from the left sidepanel to view results.
+            </EuiText>
+          </EuiText>
+        </div>
+      </EuiPanel>
+    </div>
+  );
+};
diff --git a/public/components/metrics/view/metrics_grid.scss b/public/components/metrics/view/metrics_grid.scss
new file mode 100644
index 0000000000..ff866b444b
--- /dev/null
+++ b/public/components/metrics/view/metrics_grid.scss
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+ .metrics-grid-div {
+     min-height: 70vh;
+ }
\ No newline at end of file
diff --git a/public/components/metrics/view/metrics_grid.tsx b/public/components/metrics/view/metrics_grid.tsx
new file mode 100644
index 0000000000..13f92d04fe
--- /dev/null
+++ b/public/components/metrics/view/metrics_grid.tsx
@@ -0,0 +1,175 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import PPLService from 'public/services/requests/ppl';
+import React, { useEffect, useState } from 'react';
+import { CoreStart } from '../../../../../../src/core/public';
+import { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';
+import { useObservable } from 'react-use';
+import { VisualizationContainer } from '../../custom_panels/panel_modules/visualization_container';
+import { MetricType } from '../../../../common/types/metrics';
+import _ from 'lodash';
+import { mergeLayoutAndVisualizations } from '../../custom_panels/helpers/utils';
+import { useDispatch } from 'react-redux';
+import { updateMetricsLayout, deSelectMetric } from '../redux/slices/metrics_slice';
+import { mergeLayoutAndMetrics } from '../helpers/utils';
+
+import './metrics_grid.scss';
+
+// HOC container to provide dynamic width for Grid layout
+const ResponsiveGridLayout = WidthProvider(Responsive);
+
+interface MetricsGridProps {
+  http: CoreStart['http'];
+  chrome: CoreStart['chrome'];
+  panelVisualizations: MetricType[];
+  setPanelVisualizations: React.Dispatch<React.SetStateAction<MetricType[]>>;
+  editMode: boolean;
+  pplService: PPLService;
+  startTime: string;
+  endTime: string;
+  moveToEvents: (savedVisualizationId: string) => any;
+  onRefresh: boolean;
+  editActionType: string;
+  spanParam: string;
+}
+
+export const MetricsGrid = ({
+  http,
+  chrome,
+  panelVisualizations,
+  setPanelVisualizations,
+  editMode,
+  pplService,
+  startTime,
+  endTime,
+  moveToEvents,
+  onRefresh,
+  editActionType,
+  spanParam,
+}: MetricsGridProps) => {
+  // Redux tools
+  const dispatch = useDispatch();
+  const updateLayout = (metric: any) => dispatch(updateMetricsLayout(metric));
+  const handleRemoveMetric = (metric: any) => {
+    dispatch(deSelectMetric(metric));
+  };
+
+  const [currentLayout, setCurrentLayout] = useState<Layout[]>([]);
+  const [postEditLayout, setPostEditLayout] = useState<Layout[]>([]);
+  const [gridData, setGridData] = useState(panelVisualizations.map(() => <></>));
+  const [removeMetricsList, setRemoveMetricsList] = useState<{ id: string }[]>([]);
+  const isLocked = useObservable(chrome.getIsNavDrawerLocked$());
+
+  // Reset Size of Visualizations when layout is changed
+  const layoutChanged = (currLayouts: Layout[], allLayouts: Layouts) => {
+    window.dispatchEvent(new Event('resize'));
+    setPostEditLayout(currLayouts);
+  };
+
+  const loadVizComponents = () => {
+    const gridDataComps = panelVisualizations.map((panelVisualization: MetricType, index) => (
+      <VisualizationContainer
+        key={panelVisualization.id}
+        http={http}
+        editMode={editMode}
+        visualizationId={panelVisualization.id}
+        savedVisualizationId={panelVisualization.savedVisualizationId}
+        pplService={pplService}
+        fromTime={startTime}
+        toTime={endTime}
+        onRefresh={onRefresh}
+        onEditClick={moveToEvents}
+        usedInNotebooks={true}
+        pplFilterValue=""
+        removeVisualization={removeVisualization}
+        catalogVisualization={
+          panelVisualization.metricType === 'savedCustomMetric' ? undefined : true
+        }
+        spanParam={spanParam}
+      />
+    ));
+    setGridData(gridDataComps);
+  };
+
+  // Reload the Layout
+  const reloadLayout = () => {
+    const tempLayout: Layout[] = panelVisualizations.map((panelVisualization) => {
+      return {
+        i: panelVisualization.id,
+        x: panelVisualization.x,
+        y: panelVisualization.y,
+        w: panelVisualization.w,
+        h: panelVisualization.h,
+        minW: 12, // restricting width of the metric visualization
+        maxW: 12,
+        static: !editMode,
+      } as Layout;
+    });
+    setCurrentLayout(tempLayout);
+  };
+
+  // remove visualization from panel in edit mode
+  const removeVisualization = (visualizationId: string) => {
+    const newVisualizationList = _.reject(panelVisualizations, {
+      id: visualizationId,
+    });
+    setRemoveMetricsList([...removeMetricsList, { id: visualizationId }]);
+    mergeLayoutAndVisualizations(postEditLayout, newVisualizationList, setPanelVisualizations);
+  };
+
+  // Update layout whenever user edit gets completed
+  useEffect(() => {
+    if (editMode) {
+      reloadLayout();
+      loadVizComponents();
+    }
+  }, [editMode]);
+
+  useEffect(() => {
+    if (editActionType === 'cancel') {
+      setRemoveMetricsList([]);
+    }
+    if (editActionType === 'save') {
+      removeMetricsList.map((value) => handleRemoveMetric(value));
+      updateLayout(mergeLayoutAndMetrics(postEditLayout, panelVisualizations));
+    }
+  }, [editActionType]);
+
+  // Update layout whenever visualizations are updated
+  useEffect(() => {
+    reloadLayout();
+    loadVizComponents();
+  }, [panelVisualizations]);
+
+  // Reset Size of Panel Grid when Nav Dock is Locked
+  useEffect(() => {
+    setTimeout(function () {
+      window.dispatchEvent(new Event('resize'));
+    }, 300);
+  }, [isLocked]);
+
+  useEffect(() => {
+    loadVizComponents();
+  }, [onRefresh]);
+
+  useEffect(() => {
+    loadVizComponents();
+  }, []);
+
+  return (
+    <ResponsiveGridLayout
+      layouts={{ lg: currentLayout, md: currentLayout, sm: currentLayout }}
+      className="layout full-width"
+      breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
+      cols={{ lg: 12, md: 12, sm: 12, xs: 1, xxs: 1 }}
+      onLayoutChange={layoutChanged}
+    >
+      {panelVisualizations.map((panelVisualization: MetricType, index) => (
+        <div key={panelVisualization.id}>{gridData[index]}</div>
+      ))}
+    </ResponsiveGridLayout>
+  );
+};
diff --git a/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap
new file mode 100644
index 0000000000..e4bd2c8fad
--- /dev/null
+++ b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap
@@ -0,0 +1,1125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NoteTable /> spec renders the component 1`] = `
+<div
+  style="float: left; width: 100%; max-width: 1130px;"
+>
+  <div
+    class="euiPage euiPage--paddingMedium euiPage--grow"
+  >
+    <div
+      class="euiPageBody euiPageBody--borderRadiusNone"
+    >
+      <header
+        class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+      >
+        <div
+          class="euiPageHeaderSection"
+        >
+          <h1
+            class="euiTitle euiTitle--large"
+          >
+            Notebooks
+          </h1>
+        </div>
+      </header>
+      <div
+        class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+        id="notebookArea"
+        role="main"
+      >
+        <div
+          class="euiPageContentHeader euiPageContentHeader--responsive"
+        >
+          <div
+            class="euiPageContentHeaderSection"
+          >
+            <h3
+              class="euiTitle euiTitle--small"
+            >
+              Notebooks
+              <span
+                class="panel-header-count"
+              >
+                 (
+                5
+                )
+              </span>
+            </h3>
+            <div
+              class="euiSpacer euiSpacer--s"
+            />
+            <div
+              class="euiText euiText--small"
+            >
+              <div
+                class="euiTextColor euiTextColor--subdued"
+              >
+                Use Notebooks to interactively and collaboratively develop rich reports backed by live data. Common use cases for notebooks includes creating postmortem reports, designing run books, building live infrastructure reports, or even documentation.
+                 
+                <a
+                  class="euiLink euiLink--primary"
+                  href="https://opensearch.org/docs/latest/observability-plugin/notebooks/"
+                  rel="noreferrer"
+                  target="blank"
+                >
+                  Learn more
+                  <svg
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M13 8.5a.5.5 0 111 0V12a2 2 0 01-2 2H4a2 2 0 01-2-2V4a2 2 0 012-2h3.5a.5.5 0 010 1H4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V8.5zm-5.12.339a.5.5 0 11-.706-.707L13.305 2H10.5a.5.5 0 110-1H14a1 1 0 011 1v3.5a.5.5 0 11-1 0V2.72L7.88 8.838z"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiPageContentHeaderSection"
+          >
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem"
+              >
+                <div
+                  class="euiPopover euiPopover--anchorDownCenter"
+                >
+                  <div
+                    class="euiPopover__anchor"
+                  >
+                    <button
+                      class="euiButton euiButton--primary"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                            fill-rule="non-zero"
+                          />
+                        </svg>
+                        <span
+                          class="euiButton__text"
+                        >
+                          Actions
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFlexItem"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create notebook
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <hr
+          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+        />
+        <div
+          class="euiFormControlLayout euiFormControlLayout--fullWidth"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+          >
+            <input
+              class="euiFieldSearch euiFieldSearch--fullWidth"
+              placeholder="Search notebook name"
+              type="search"
+              value=""
+            />
+            <div
+              class="euiFormControlLayoutIcons"
+            >
+              <span
+                class="euiFormControlLayoutCustomIcon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+        <hr
+          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+        />
+        <div
+          class="euiBasicTable"
+        >
+          <div>
+            <div
+              class="euiTableHeaderMobile"
+            >
+              <div
+                class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+              >
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <div
+                    class="euiCheckbox"
+                  >
+                    <input
+                      aria-label="Select all rows"
+                      class="euiCheckbox__input"
+                      id="_selection_column-checkbox_random_html_id"
+                      type="checkbox"
+                    />
+                    <div
+                      class="euiCheckbox__square"
+                    />
+                    <label
+                      class="euiCheckbox__label"
+                      for="_selection_column-checkbox_random_html_id"
+                    >
+                      Select all rows
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <div
+                    class="euiTableSortMobile"
+                  >
+                    <div
+                      class="euiPopover euiPopover--anchorDownRight"
+                    >
+                      <div
+                        class="euiPopover__anchor"
+                      >
+                        <button
+                          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                          type="button"
+                        >
+                          <span
+                            class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                              focusable="false"
+                              height="16"
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                fill-rule="non-zero"
+                              />
+                            </svg>
+                            <span
+                              class="euiButtonEmpty__text"
+                            >
+                              Sorting
+                            </span>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <table
+              class="euiTable euiTable--responsive euiTable--auto"
+              id="random_html_id"
+              tabindex="-1"
+            >
+              <caption
+                class="euiScreenReaderOnly euiTableCaption"
+              />
+              <thead>
+                <tr>
+                  <th
+                    class="euiTableHeaderCellCheckbox"
+                    scope="col"
+                  >
+                    <div
+                      class="euiTableCellContent"
+                    >
+                      <div
+                        class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                      >
+                        <input
+                          aria-label="Select all rows"
+                          class="euiCheckbox__input"
+                          data-test-subj="checkboxSelectAll"
+                          id="_selection_column-checkbox_random_html_id"
+                          type="checkbox"
+                        />
+                        <div
+                          class="euiCheckbox__square"
+                        />
+                      </div>
+                    </div>
+                  </th>
+                  <th
+                    aria-live="polite"
+                    aria-sort="none"
+                    class="euiTableHeaderCell"
+                    data-test-subj="tableHeaderCell_path_0"
+                    role="columnheader"
+                    scope="col"
+                  >
+                    <button
+                      class="euiTableHeaderButton"
+                      data-test-subj="tableHeaderSortButton"
+                      type="button"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Name"
+                        >
+                          Name
+                        </span>
+                      </span>
+                    </button>
+                  </th>
+                  <th
+                    aria-live="polite"
+                    aria-sort="descending"
+                    class="euiTableHeaderCell"
+                    data-test-subj="tableHeaderCell_dateModified_1"
+                    role="columnheader"
+                    scope="col"
+                  >
+                    <button
+                      class="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                      data-test-subj="tableHeaderSortButton"
+                      type="button"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Last updated"
+                        >
+                          Last updated
+                        </span>
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </span>
+                    </button>
+                  </th>
+                  <th
+                    aria-live="polite"
+                    aria-sort="none"
+                    class="euiTableHeaderCell"
+                    data-test-subj="tableHeaderCell_dateCreated_2"
+                    role="columnheader"
+                    scope="col"
+                  >
+                    <button
+                      class="euiTableHeaderButton"
+                      data-test-subj="tableHeaderSortButton"
+                      type="button"
+                    >
+                      <span
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                          title="Created"
+                        >
+                          Created
+                        </span>
+                      </span>
+                    </button>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  class="euiTableRow euiTableRow-isSelectable"
+                >
+                  <td
+                    class="euiTableRowCellCheckbox"
+                  >
+                    <div
+                      class="euiTableCellContent"
+                    >
+                      <div
+                        class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                      >
+                        <input
+                          aria-label="Select this row"
+                          class="euiCheckbox__input"
+                          data-test-subj="checkboxSelectRow-id-0"
+                          id="_selection_column_id-0-checkbox"
+                          title="Select this row"
+                          type="checkbox"
+                        />
+                        <div
+                          class="euiCheckbox__square"
+                        />
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Name
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                    >
+                      <a
+                        class="euiLink euiLink--primary"
+                        href="#/notebooks/id-0"
+                        rel="noreferrer"
+                      >
+                        path-0
+                      </a>
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Last updated
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Invalid date
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Created
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Invalid date
+                    </div>
+                  </td>
+                </tr>
+                <tr
+                  class="euiTableRow euiTableRow-isSelectable"
+                >
+                  <td
+                    class="euiTableRowCellCheckbox"
+                  >
+                    <div
+                      class="euiTableCellContent"
+                    >
+                      <div
+                        class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                      >
+                        <input
+                          aria-label="Select this row"
+                          class="euiCheckbox__input"
+                          data-test-subj="checkboxSelectRow-id-1"
+                          id="_selection_column_id-1-checkbox"
+                          title="Select this row"
+                          type="checkbox"
+                        />
+                        <div
+                          class="euiCheckbox__square"
+                        />
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Name
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                    >
+                      <a
+                        class="euiLink euiLink--primary"
+                        href="#/notebooks/id-1"
+                        rel="noreferrer"
+                      >
+                        path-1
+                      </a>
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Last updated
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Invalid date
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Created
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Invalid date
+                    </div>
+                  </td>
+                </tr>
+                <tr
+                  class="euiTableRow euiTableRow-isSelectable"
+                >
+                  <td
+                    class="euiTableRowCellCheckbox"
+                  >
+                    <div
+                      class="euiTableCellContent"
+                    >
+                      <div
+                        class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                      >
+                        <input
+                          aria-label="Select this row"
+                          class="euiCheckbox__input"
+                          data-test-subj="checkboxSelectRow-id-2"
+                          id="_selection_column_id-2-checkbox"
+                          title="Select this row"
+                          type="checkbox"
+                        />
+                        <div
+                          class="euiCheckbox__square"
+                        />
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Name
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                    >
+                      <a
+                        class="euiLink euiLink--primary"
+                        href="#/notebooks/id-2"
+                        rel="noreferrer"
+                      >
+                        path-2
+                      </a>
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Last updated
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Invalid date
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Created
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Invalid date
+                    </div>
+                  </td>
+                </tr>
+                <tr
+                  class="euiTableRow euiTableRow-isSelectable"
+                >
+                  <td
+                    class="euiTableRowCellCheckbox"
+                  >
+                    <div
+                      class="euiTableCellContent"
+                    >
+                      <div
+                        class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                      >
+                        <input
+                          aria-label="Select this row"
+                          class="euiCheckbox__input"
+                          data-test-subj="checkboxSelectRow-id-3"
+                          id="_selection_column_id-3-checkbox"
+                          title="Select this row"
+                          type="checkbox"
+                        />
+                        <div
+                          class="euiCheckbox__square"
+                        />
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Name
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                    >
+                      <a
+                        class="euiLink euiLink--primary"
+                        href="#/notebooks/id-3"
+                        rel="noreferrer"
+                      >
+                        path-3
+                      </a>
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Last updated
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Invalid date
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Created
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Invalid date
+                    </div>
+                  </td>
+                </tr>
+                <tr
+                  class="euiTableRow euiTableRow-isSelectable"
+                >
+                  <td
+                    class="euiTableRowCellCheckbox"
+                  >
+                    <div
+                      class="euiTableCellContent"
+                    >
+                      <div
+                        class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                      >
+                        <input
+                          aria-label="Select this row"
+                          class="euiCheckbox__input"
+                          data-test-subj="checkboxSelectRow-id-4"
+                          id="_selection_column_id-4-checkbox"
+                          title="Select this row"
+                          type="checkbox"
+                        />
+                        <div
+                          class="euiCheckbox__square"
+                        />
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Name
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                    >
+                      <a
+                        class="euiLink euiLink--primary"
+                        href="#/notebooks/id-4"
+                        rel="noreferrer"
+                      >
+                        path-4
+                      </a>
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Last updated
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Invalid date
+                    </div>
+                  </td>
+                  <td
+                    class="euiTableRowCell"
+                  >
+                    <div
+                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                    >
+                      Created
+                    </div>
+                    <div
+                      class="euiTableCellContent euiTableCellContent--overflowingContent"
+                    >
+                      Invalid date
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div>
+            <div
+              class="euiSpacer euiSpacer--m"
+            />
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+            >
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <div
+                  class="euiPopover euiPopover--anchorUpRight"
+                >
+                  <div
+                    class="euiPopover__anchor"
+                  >
+                    <button
+                      class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                      data-test-subj="tablePaginationPopoverButton"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                            fill-rule="non-zero"
+                          />
+                        </svg>
+                        <span
+                          class="euiButtonEmpty__text"
+                        >
+                          Rows per page
+                          : 
+                          10
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <nav
+                  class="euiPagination"
+                >
+                  <button
+                    aria-label="Previous page"
+                    class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                    data-test-subj="pagination-button-previous"
+                    disabled=""
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </button>
+                  <ul
+                    class="euiPagination__list"
+                  >
+                    <li
+                      class="euiPagination__item"
+                    >
+                      <button
+                        aria-controls="random_html_id"
+                        aria-current="true"
+                        aria-label="Page 1 of 1"
+                        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                        data-test-subj="pagination-button-0"
+                        disabled=""
+                        type="button"
+                      >
+                        <span
+                          class="euiButtonContent euiButtonEmpty__content"
+                        >
+                          <span
+                            class="euiButtonEmpty__text"
+                          >
+                            1
+                          </span>
+                        </span>
+                      </button>
+                    </li>
+                  </ul>
+                  <button
+                    aria-label="Next page"
+                    class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                    data-test-subj="pagination-button-next"
+                    disabled=""
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </button>
+                </nav>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<NoteTable /> spec renders the empty component 1`] = `
+<div
+  style="float: left; width: 100%; max-width: 1130px;"
+>
+  <div
+    class="euiPage euiPage--paddingMedium euiPage--grow"
+  >
+    <div
+      class="euiPageBody euiPageBody--borderRadiusNone"
+    >
+      <header
+        class="euiPageHeader euiPageHeader--responsive euiPageHeader--center"
+      >
+        <div
+          class="euiPageHeaderSection"
+        >
+          <h1
+            class="euiTitle euiTitle--large"
+          >
+            Notebooks
+          </h1>
+        </div>
+      </header>
+      <div
+        class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent"
+        id="notebookArea"
+        role="main"
+      >
+        <div
+          class="euiPageContentHeader euiPageContentHeader--responsive"
+        >
+          <div
+            class="euiPageContentHeaderSection"
+          >
+            <h3
+              class="euiTitle euiTitle--small"
+            >
+              Notebooks
+              <span
+                class="panel-header-count"
+              >
+                 (
+                0
+                )
+              </span>
+            </h3>
+            <div
+              class="euiSpacer euiSpacer--s"
+            />
+            <div
+              class="euiText euiText--small"
+            >
+              <div
+                class="euiTextColor euiTextColor--subdued"
+              >
+                Use Notebooks to interactively and collaboratively develop rich reports backed by live data. Common use cases for notebooks includes creating postmortem reports, designing run books, building live infrastructure reports, or even documentation.
+                 
+                <a
+                  class="euiLink euiLink--primary"
+                  href="https://opensearch.org/docs/latest/observability-plugin/notebooks/"
+                  rel="noreferrer"
+                  target="blank"
+                >
+                  Learn more
+                  <svg
+                    aria-hidden="true"
+                    aria-label="External link"
+                    class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </a>
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiPageContentHeaderSection"
+          >
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <div
+                class="euiFlexItem"
+              >
+                <div
+                  class="euiPopover euiPopover--anchorDownCenter"
+                >
+                  <div
+                    class="euiPopover__anchor"
+                  >
+                    <button
+                      class="euiButton euiButton--primary"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                        <span
+                          class="euiButton__text"
+                        >
+                          Actions
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="euiFlexItem"
+              >
+                <button
+                  class="euiButton euiButton--primary euiButton--fill"
+                  type="button"
+                >
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Create notebook
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <hr
+          class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+        />
+        <div
+          class="euiSpacer euiSpacer--xxl"
+        />
+        <div
+          class="euiText euiText--medium"
+        >
+          <div
+            class="euiTextAlign euiTextAlign--center"
+          >
+            <h2>
+              No notebooks
+            </h2>
+            <div
+              class="euiSpacer euiSpacer--m"
+            />
+            <div
+              class="euiText euiText--medium"
+            >
+              <div
+                class="euiTextColor euiTextColor--subdued"
+              >
+                Use notebooks to create post-mortem reports, build live infrastructure
+                <br />
+                reports, or foster explorative collaborations with data.
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--m"
+        />
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <button
+              class="euiButton euiButton--primary"
+              data-test-subj="note-table-empty-state-create-notebook-button"
+              type="button"
+            >
+              <span
+                class="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  Create notebook
+                </span>
+              </span>
+            </button>
+          </div>
+          <div
+            class="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <button
+              class="euiButton euiButton--primary"
+              type="button"
+            >
+              <span
+                class="euiButtonContent euiButton__content"
+              >
+                <span
+                  class="euiButton__text"
+                >
+                  Add samples
+                </span>
+              </span>
+            </button>
+          </div>
+        </div>
+        <div
+          class="euiSpacer euiSpacer--xxl"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap
new file mode 100644
index 0000000000..73718f4afb
--- /dev/null
+++ b/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap
@@ -0,0 +1,609 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Notebook /> spec renders the component 1`] = `
+<div
+  style="float: left; width: 100%; max-width: 1500px;"
+>
+  <div
+    class="euiPage euiPage--paddingMedium euiPage--grow"
+  >
+    <div
+      class="euiPageBody euiPageBody--borderRadiusNone"
+    >
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            class="euiPopover euiPopover--anchorDownCenter"
+          >
+            <div
+              class="euiPopover__anchor"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="notebook-paragraph-actions-button"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                      fill-rule="non-zero"
+                    />
+                  </svg>
+                  <span
+                    class="euiButton__text"
+                  >
+                    Paragraph actions
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            class="euiPopover euiPopover--anchorDownCenter"
+          >
+            <div
+              class="euiPopover__anchor"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="notebook-notebook-actions-button"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                      fill-rule="non-zero"
+                    />
+                  </svg>
+                  <span
+                    class="euiButton__text"
+                  >
+                    Notebook actions
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--s"
+      />
+      <h1
+        class="euiTitle euiTitle--large"
+      />
+      <div
+        class="euiSpacer euiSpacer--m"
+      />
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            class="euiText euiText--medium"
+          >
+            <div>
+              <p>
+                Created 
+                <br />
+                 
+                Invalid date
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        style="float: left; width: 100%; max-width: 1130px; margin-top: 20px;"
+      >
+        <div
+          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <div
+            class="euiSpacer euiSpacer--xxl"
+          />
+          <div
+            class="euiText euiText--medium"
+          >
+            <div
+              class="euiTextAlign euiTextAlign--center"
+            >
+              <h2>
+                No paragraphs
+              </h2>
+              <div
+                class="euiText euiText--medium"
+              >
+                Add a paragraph to compose your document or story. Notebooks now support two types of input:
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--xl"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceEvenly euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrow2"
+            />
+            <div
+              class="euiFlexItem euiFlexItem--flexGrow3"
+            >
+              <div
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasIcon"
+              >
+                <div
+                  class="euiCard__top"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--xxLarge euiCard__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M2.414 8.036L4.89 10.51a.5.5 0 01-.707.708L1.354 8.389a.5.5 0 010-.707l2.828-2.828a.5.5 0 11.707.707L2.414 8.036zm8.768 2.474l2.475-2.474-2.475-2.475a.5.5 0 01.707-.707l2.829 2.828a.5.5 0 010 .707l-2.829 2.829a.5.5 0 11-.707-.708zM8.559 2.506a.5.5 0 01.981.19L7.441 13.494a.5.5 0 01-.981-.19L8.559 2.506z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="euiCard__content"
+                >
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
+                  >
+                    Code block
+                  </span>
+                  <div
+                    class="euiText euiText--small euiCard__description"
+                    id="random_html_idDescription"
+                  >
+                    <p>
+                      Write contents directly using markdown, SQL or PPL.
+                    </p>
+                  </div>
+                </div>
+                <div
+                  class="euiCard__footer"
+                >
+                  <button
+                    class="euiButton euiButton--primary"
+                    style="margin-bottom: 17px;"
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Add code block
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrow3"
+            >
+              <div
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasIcon"
+              >
+                <div
+                  class="euiCard__top"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--xxLarge euiCard__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M3 13h10V9.913l-2.571-2.826L8.56 8.753a.5.5 0 01-.728-.067L4.448 4.317 3 6.191V13zm5.295-5.35l1.837-1.64a.5.5 0 01.703.037l3.035 3.336a.5.5 0 01.13.337v3.78a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5V6.02a.5.5 0 01.104-.305l1.947-2.52a.5.5 0 01.791-.001L8.295 7.65zM1 15h13.5a.5.5 0 110 1H.5a.5.5 0 01-.5-.5v-14a.5.5 0 011 0V15z"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="euiCard__content"
+                >
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
+                  >
+                    Visualization
+                  </span>
+                  <div
+                    class="euiText euiText--small euiCard__description"
+                    id="random_html_idDescription"
+                  >
+                    <p>
+                      Import OpenSearch Dashboards or Observability visualizations to the notes.
+                    </p>
+                  </div>
+                </div>
+                <div
+                  class="euiCard__footer"
+                >
+                  <button
+                    class="euiButton euiButton--primary"
+                    style="margin-bottom: 17px;"
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Add visualization
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrow2"
+            />
+          </div>
+          <div
+            class="euiSpacer euiSpacer--xxl"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<Notebook /> spec renders the empty component 1`] = `
+<div
+  style="float: left; width: 100%; max-width: 1500px;"
+>
+  <div
+    class="euiPage euiPage--paddingMedium euiPage--grow"
+  >
+    <div
+      class="euiPageBody euiPageBody--borderRadiusNone"
+    >
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            class="euiPopover euiPopover--anchorDownCenter"
+          >
+            <div
+              class="euiPopover__anchor"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="notebook-paragraph-actions-button"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiButton__text"
+                  >
+                    Paragraph actions
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        />
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            class="euiPopover euiPopover--anchorDownCenter"
+          >
+            <div
+              class="euiPopover__anchor"
+            >
+              <button
+                class="euiButton euiButton--primary"
+                data-test-subj="notebook-notebook-actions-button"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                  <span
+                    class="euiButton__text"
+                  >
+                    Notebook actions
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiSpacer euiSpacer--s"
+      />
+      <h1
+        class="euiTitle euiTitle--large"
+      />
+      <div
+        class="euiSpacer euiSpacer--m"
+      />
+      <div
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <div
+            class="euiText euiText--medium"
+          >
+            <div>
+              <p>
+                Created 
+                <br />
+                 
+                Invalid date
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        style="float: left; width: 100%; max-width: 1130px; margin-top: 20px;"
+      >
+        <div
+          class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <div
+            class="euiSpacer euiSpacer--xxl"
+          />
+          <div
+            class="euiText euiText--medium"
+          >
+            <div
+              class="euiTextAlign euiTextAlign--center"
+            >
+              <h2>
+                No paragraphs
+              </h2>
+              <div
+                class="euiText euiText--medium"
+              >
+                Add a paragraph to compose your document or story. Notebooks now support two types of input:
+              </div>
+            </div>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--xl"
+          />
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceEvenly euiFlexGroup--directionRow euiFlexGroup--responsive"
+          >
+            <div
+              class="euiFlexItem euiFlexItem--flexGrow2"
+            />
+            <div
+              class="euiFlexItem euiFlexItem--flexGrow3"
+            >
+              <div
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasIcon"
+              >
+                <div
+                  class="euiCard__top"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--xxLarge euiIcon-isLoading euiCard__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </div>
+                <div
+                  class="euiCard__content"
+                >
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
+                  >
+                    Code block
+                  </span>
+                  <div
+                    class="euiText euiText--small euiCard__description"
+                    id="random_html_idDescription"
+                  >
+                    <p>
+                      Write contents directly using markdown, SQL or PPL.
+                    </p>
+                  </div>
+                </div>
+                <div
+                  class="euiCard__footer"
+                >
+                  <button
+                    class="euiButton euiButton--primary"
+                    style="margin-bottom: 17px;"
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Add code block
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrow3"
+            >
+              <div
+                class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--hasIcon"
+              >
+                <div
+                  class="euiCard__top"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--xxLarge euiIcon-isLoading euiCard__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </div>
+                <div
+                  class="euiCard__content"
+                >
+                  <span
+                    class="euiTitle euiTitle--small euiCard__title"
+                    id="random_html_idTitle"
+                  >
+                    Visualization
+                  </span>
+                  <div
+                    class="euiText euiText--small euiCard__description"
+                    id="random_html_idDescription"
+                  >
+                    <p>
+                      Import OpenSearch Dashboards or Observability visualizations to the notes.
+                    </p>
+                  </div>
+                </div>
+                <div
+                  class="euiCard__footer"
+                >
+                  <button
+                    class="euiButton euiButton--primary"
+                    style="margin-bottom: 17px;"
+                    type="button"
+                  >
+                    <span
+                      class="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        class="euiButton__text"
+                      >
+                        Add visualization
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiFlexItem euiFlexItem--flexGrow2"
+            />
+          </div>
+          <div
+            class="euiSpacer euiSpacer--xxl"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/components/notebooks/components/__tests__/note_table.test.tsx b/public/components/notebooks/components/__tests__/note_table.test.tsx
new file mode 100644
index 0000000000..70eb5fe30a
--- /dev/null
+++ b/public/components/notebooks/components/__tests__/note_table.test.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { NoteTable } from '../note_table';
+
+describe('<NoteTable /> spec', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders the empty component', () => {
+    const fetchNotebooks = jest.fn();
+    const addSampleNotebooks = jest.fn();
+    const createNotebook = jest.fn();
+    const renameNotebook = jest.fn();
+    const cloneNotebook = jest.fn();
+    const deleteNotebook = jest.fn();
+    const setBreadcrumbs = jest.fn();
+    const setToast = jest.fn();
+    const utils = render(
+      <NoteTable
+        loading={false}
+        fetchNotebooks={fetchNotebooks}
+        addSampleNotebooks={addSampleNotebooks}
+        notebooks={[]}
+        createNotebook={createNotebook}
+        renameNotebook={renameNotebook}
+        cloneNotebook={cloneNotebook}
+        deleteNotebook={deleteNotebook}
+        parentBreadcrumb={{ href: 'parent-href', text: 'parent-text' }}
+        setBreadcrumbs={setBreadcrumbs}
+        setToast={setToast}
+      />
+    );
+    expect(utils.container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders the component', () => {
+    const fetchNotebooks = jest.fn();
+    const addSampleNotebooks = jest.fn();
+    const createNotebook = jest.fn();
+    const renameNotebook = jest.fn();
+    const cloneNotebook = jest.fn();
+    const deleteNotebook = jest.fn();
+    const setBreadcrumbs = jest.fn();
+    const setToast = jest.fn();
+    const notebooks = Array.from({ length: 5 }, (v, k) => ({
+      path: `path-${k}`,
+      id: `id-${k}`,
+      dateCreated: 'date-created',
+      dateModified: 'date-modified',
+    }));
+    const utils = render(
+      <NoteTable
+        loading={false}
+        fetchNotebooks={fetchNotebooks}
+        addSampleNotebooks={addSampleNotebooks}
+        notebooks={notebooks}
+        createNotebook={createNotebook}
+        renameNotebook={renameNotebook}
+        cloneNotebook={cloneNotebook}
+        deleteNotebook={deleteNotebook}
+        parentBreadcrumb={{ href: 'parent-href', text: 'parent-text' }}
+        setBreadcrumbs={setBreadcrumbs}
+        setToast={setToast}
+      />
+    );
+    expect(utils.container.firstChild).toMatchSnapshot();
+
+    utils.getByText('Actions').click();
+    utils.getByText('Add samples').click();
+    utils.getAllByLabelText('Select this row')[0].click();
+    utils.getByText('Actions').click();
+    utils.getByText('Delete').click();
+    utils.getByText('Cancel').click();
+    utils.getAllByLabelText('Select this row')[0].click();
+    utils.getByText('Actions').click();
+    utils.getByText('Rename').click();
+  });
+});
diff --git a/public/components/notebooks/components/__tests__/notebook.test.tsx b/public/components/notebooks/components/__tests__/notebook.test.tsx
new file mode 100644
index 0000000000..eaabb3654a
--- /dev/null
+++ b/public/components/notebooks/components/__tests__/notebook.test.tsx
@@ -0,0 +1,120 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import PPLService from '../../../../services/requests/ppl';
+import React from 'react';
+import { HttpResponse } from '../../../../../../../src/core/public';
+import httpClientMock from '../../../../../test/__mocks__/httpClientMock';
+import { sampleNotebook1 } from '../helpers/__tests__/sampleDefaultNotebooks';
+import { Notebook } from '../notebook';
+
+jest.mock('../../../../../../../src/plugins/embeddable/public', () => ({
+  ViewMode: {
+    EDIT: 'edit',
+    VIEW: 'view',
+  },
+}));
+
+// @ts-ignore
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () =>
+      Promise.resolve({
+        status: {
+          statuses: [{ id: 'plugin:reportsDashboards' }],
+        },
+      }),
+  })
+);
+
+describe('<Notebook /> spec', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders the empty component', async () => {
+    const pplService = new PPLService(httpClientMock);
+    const setBreadcrumbs = jest.fn();
+    const renameNotebook = jest.fn();
+    const cloneNotebook = jest.fn();
+    const deleteNotebook = jest.fn();
+    const setToast = jest.fn();
+    const location = jest.fn();
+    const history = jest.fn() as any;
+    history.replace = jest.fn();
+    const utils = render(
+      <Notebook
+        pplService={pplService}
+        openedNoteId="mock-id"
+        DashboardContainerByValueRenderer={jest.fn()}
+        http={httpClientMock}
+        parentBreadcrumb={{ href: 'parent-href', text: 'parent-text' }}
+        setBreadcrumbs={setBreadcrumbs}
+        renameNotebook={renameNotebook}
+        cloneNotebook={cloneNotebook}
+        deleteNotebook={deleteNotebook}
+        setToast={setToast}
+        location={location}
+        history={history}
+      />
+    );
+    expect(utils.container.firstChild).toMatchSnapshot();
+    utils.getByText('Add code block').click();
+    utils.getByText('Add visualization').click();
+  });
+
+  it('renders the component', async () => {
+    const pplService = new PPLService(httpClientMock);
+    const setBreadcrumbs = jest.fn();
+    const renameNotebook = jest.fn();
+    const cloneNotebook = jest.fn();
+    const deleteNotebook = jest.fn();
+    const setToast = jest.fn();
+    const location = jest.fn();
+    const history = jest.fn() as any;
+    history.replace = jest.fn();
+    httpClientMock.get = jest.fn(() =>
+      Promise.resolve(({
+        ...sampleNotebook1,
+        path: sampleNotebook1.name,
+        visualizations: [
+          {
+            id: 'oiuccXwBYVazWqOO1e06',
+            name: 'Flight Count by Origin',
+            query:
+              'source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier',
+            type: 'bar',
+            timeField: 'timestamp',
+          },
+        ],
+        savedVisualizations: Array.from({ length: 5 }, (v, k) => ({
+          label: `vis-${k}`,
+          key: `vis-${k}`,
+        })),
+      } as unknown) as HttpResponse)
+    );
+    const utils = render(
+      <Notebook
+        pplService={pplService}
+        openedNoteId={sampleNotebook1.id}
+        DashboardContainerByValueRenderer={jest.fn()}
+        http={httpClientMock}
+        parentBreadcrumb={{ href: 'parent-href', text: 'parent-text' }}
+        setBreadcrumbs={setBreadcrumbs}
+        renameNotebook={renameNotebook}
+        cloneNotebook={cloneNotebook}
+        deleteNotebook={deleteNotebook}
+        setToast={setToast}
+        location={location}
+        history={history}
+      />
+    );
+
+    await waitFor(() => {
+      expect(utils.container.firstChild).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap b/public/components/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap
new file mode 100644
index 0000000000..5ed44ca009
--- /dev/null
+++ b/public/components/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`modal_containers spec render delete notebooks modal 1`] = `
+<EuiOverlayMask>
+  <EuiModal
+    initialFocus="[name=input]"
+    onClose={[MockFunction]}
+  >
+    <EuiModalHeader>
+      <EuiModalHeaderTitle>
+        title
+      </EuiModalHeaderTitle>
+    </EuiModalHeader>
+    <EuiModalBody>
+      <EuiText>
+        message
+      </EuiText>
+      <EuiText>
+        The action cannot be undone.
+      </EuiText>
+      <EuiSpacer />
+      <EuiForm>
+        <EuiFormRow
+          describedByIds={Array []}
+          display="row"
+          fullWidth={false}
+          hasChildLabel={true}
+          hasEmptyLabelSpace={false}
+          label="To confirm deletion, enter \\"delete\\" in the text field"
+          labelType="label"
+        >
+          <EuiFieldText
+            data-test-subj="delete-notebook-modal-input"
+            name="input"
+            onChange={[Function]}
+            placeholder="delete"
+            value=""
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </EuiModalBody>
+    <EuiModalFooter>
+      <EuiButtonEmpty
+        onClick={[MockFunction]}
+      >
+        Cancel
+      </EuiButtonEmpty>
+      <EuiButton
+        color="danger"
+        data-test-subj="delete-notebook-modal-delete-button"
+        disabled={true}
+        fill={true}
+        onClick={[Function]}
+      >
+        Delete
+      </EuiButton>
+    </EuiModalFooter>
+  </EuiModal>
+</EuiOverlayMask>
+`;
+
+exports[`modal_containers spec render get clone modal 1`] = `""`;
+
+exports[`modal_containers spec render get custom modal 1`] = `
+<EuiOverlayMask>
+  <EuiModal
+    initialFocus="[name=input]"
+    onClose={[MockFunction]}
+  >
+    <EuiModalHeader>
+      <EuiModalHeaderTitle>
+        title
+      </EuiModalHeaderTitle>
+    </EuiModalHeader>
+    <EuiModalBody>
+      <EuiForm>
+        <EuiFormRow
+          describedByIds={Array []}
+          display="row"
+          fullWidth={false}
+          hasChildLabel={true}
+          hasEmptyLabelSpace={false}
+          helpText="help text"
+          label="label"
+          labelType="label"
+        >
+          <EuiFieldText
+            data-test-subj="custom-input-modal-input"
+            name="input"
+            onChange={[Function]}
+            value="mock-path"
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </EuiModalBody>
+    <EuiModalFooter>
+      <EuiButtonEmpty
+        onClick={[MockFunction]}
+      >
+        Cancel
+      </EuiButtonEmpty>
+      <EuiButton
+        data-test-subj="custom-input-modal-confirm-button"
+        fill={true}
+        onClick={[Function]}
+      >
+        Confirm
+      </EuiButton>
+    </EuiModalFooter>
+  </EuiModal>
+</EuiOverlayMask>
+`;
+
+exports[`modal_containers spec render get delete modal 1`] = `""`;
+
+exports[`modal_containers spec render get delete modal 2`] = `""`;
+
+exports[`modal_containers spec render get sample notebooks modal 1`] = `""`;
diff --git a/public/components/notebooks/components/helpers/__tests__/default_parser.test.tsx b/public/components/notebooks/components/helpers/__tests__/default_parser.test.tsx
new file mode 100644
index 0000000000..3c03a3d5b9
--- /dev/null
+++ b/public/components/notebooks/components/helpers/__tests__/default_parser.test.tsx
@@ -0,0 +1,97 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { defaultParagraphParser } from '../default_parser';
+import {
+  sampleNotebook1,
+  sampleNotebook2,
+  sampleNotebook3,
+  sampleNotebook4,
+  sampleNotebook5,
+  sampleParsedParagraghs1,
+  sampleParsedParagraghs2,
+} from './sampleDefaultNotebooks';
+
+// Perfect schema
+describe('Testing default backend parser function with perfect schema', () => {
+  test('defaultParagraphParserTest1', (done) => {
+    const parsedParagraphs1 = defaultParagraphParser(sampleNotebook1.paragraphs);
+    const parsedParagraphs2 = defaultParagraphParser(sampleNotebook2.paragraphs);
+    const parsedParagraphs3 = defaultParagraphParser([]);
+    expect(parsedParagraphs1).toEqual(sampleParsedParagraghs1);
+    expect(parsedParagraphs2).toEqual(sampleParsedParagraghs2);
+    expect(parsedParagraphs3).toEqual([]);
+    done();
+  });
+
+  it('returns parsed paragraphs', () => {
+    const MockVis = sampleNotebook1.paragraphs[2].input.inputText;
+
+    const parsedPara = defaultParagraphParser(
+      Array.from({ length: 5 }, (v, k) => {
+        const isVisualization = k % 2 === 0;
+        return {
+          id: `paragraph-${k}`,
+          input: {
+            inputText: isVisualization ? MockVis : `text-${k}`,
+            inputType: isVisualization ? 'VISUALIZATION' : 'MARKDOWN',
+          },
+          output: [
+            {
+              result: isVisualization ? '' : `text-${k}`,
+              outputType: isVisualization ? 'VISUALIZATION' : 'MARKDOWN',
+              execution_time: '0s',
+            },
+          ],
+        };
+      })
+    );
+
+    const expected = Array.from({ length: 5 }, (v, k) => {
+      const isVisualization = k % 2 === 0;
+      return {
+        uniqueId: `paragraph-${k}`,
+        isRunning: false,
+        inQueue: false,
+        isSelected: false,
+        isInputHidden: false,
+        isOutputHidden: false,
+        showAddPara: false,
+        isVizualisation: isVisualization,
+        vizObjectInput: isVisualization ? MockVis : '',
+        id: k + 1,
+        inp: isVisualization ? MockVis : `text-${k}`,
+        lang: isVisualization ? 'text/x-' : 'text/x-md',
+        editorLanguage: isVisualization ? '' : 'md',
+        typeOut: isVisualization ? ['VISUALIZATION'] : ['MARKDOWN'],
+        out: isVisualization ? [''] : [`text-${k}`],
+        isInputExpanded: false,
+        isOutputStale: false,
+        paraRef: undefined,
+        paraDivRef: undefined,
+        visStartTime: isVisualization ? '2020-07-21T18:37:44.710Z' : undefined,
+        visEndTime: isVisualization ? '2020-08-20T18:37:44.710Z' : undefined,
+        visSavedObjId: isVisualization ? '935afa20-e0cd-11e7-9d07-1398ccfcefa3' : undefined,
+      };
+    });
+    expect(parsedPara).toEqual(expected);
+  });
+});
+
+// Issue in schema
+describe('Testing default backend parser function with wrong schema', () => {
+  test('defaultParagraphParserTest2', (done) => {
+    expect(() => {
+      const parsedParagraphs1 = defaultParagraphParser(sampleNotebook3.paragraphs);
+    }).toThrow(Error);
+    expect(() => {
+      const parsedParagraphs2 = defaultParagraphParser(sampleNotebook4.paragraphs);
+    }).toThrow(Error);
+    expect(() => {
+      const parsedParagraphs3 = defaultParagraphParser(sampleNotebook5.paragraphs);
+    }).toThrow(Error);
+    done();
+  });
+});
diff --git a/public/components/notebooks/components/helpers/__tests__/legacy_route_helpers.test.ts b/public/components/notebooks/components/helpers/__tests__/legacy_route_helpers.test.ts
new file mode 100644
index 0000000000..c4d1a78554
--- /dev/null
+++ b/public/components/notebooks/components/helpers/__tests__/legacy_route_helpers.test.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { RedirectProps } from 'react-router-dom';
+import { convertLegacyNotebooksUrl } from '../legacy_route_helpers';
+
+describe('Test legacy route helpers', () => {
+  it('converts legacy notebooks url', () => {
+    const locations = [
+      {
+        pathname: '/app/notebooks-dashboards',
+        search: '',
+        hash: '#/GQ5icXwBJCegTOBKO4Um',
+      },
+      {
+        pathname: '/app/notebooks-dashboards',
+        search: '?view=view_both',
+        hash: '#/clPiPXwBEM7l9gC0xTpA',
+      },
+      {
+        pathname: '/testBasePath/app/notebooks-dashboards',
+        search: '?view=output_only&security_tenant=global',
+        hash: `#/GQ5icXwBJCegTOBKO4Um?_g=(time:(from:'2021-10-15T20:25:09.556Z',to:'2021-10-15T20:55:09.556Z'))`,
+      },
+    ] as Location[];
+    const expected = [
+      '/app/observability-dashboards#/notebooks/GQ5icXwBJCegTOBKO4Um',
+      '/app/observability-dashboards#/notebooks/clPiPXwBEM7l9gC0xTpA?view=view_both',
+      `/testBasePath/app/observability-dashboards#/notebooks/GQ5icXwBJCegTOBKO4Um?_g=(time:(from:'2021-10-15T20:25:09.556Z',to:'2021-10-15T20:55:09.556Z'))&view=output_only&security_tenant=global`,
+    ] as RedirectProps['to'][];
+    expect(locations.map((location) => convertLegacyNotebooksUrl(location))).toEqual(expected);
+  });
+});
diff --git a/public/components/notebooks/components/helpers/__tests__/modal_containers.test.tsx b/public/components/notebooks/components/helpers/__tests__/modal_containers.test.tsx
new file mode 100644
index 0000000000..c0c982a9bd
--- /dev/null
+++ b/public/components/notebooks/components/helpers/__tests__/modal_containers.test.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import {
+  DeleteNotebookModal,
+  getCloneModal,
+  getCustomModal,
+  getDeleteModal,
+  getSampleNotebooksModal,
+} from '../modal_containers';
+
+describe('modal_containers spec', () => {
+  configure({ adapter: new Adapter() });
+
+  it('render get custom modal', () => {
+    const runModal = jest.fn();
+    const closeModal = jest.fn();
+    const wrapper = shallow(
+      getCustomModal(
+        runModal,
+        closeModal,
+        'label',
+        'title',
+        'Cancel',
+        'Confirm',
+        'mock-path',
+        'help text'
+      )
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('render get clone modal', () => {
+    const onCancel = jest.fn();
+    const onConfirm = jest.fn();
+    const wrapper = shallow(getCloneModal(onCancel, onConfirm));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('render get sample notebooks modal', () => {
+    const onCancel = jest.fn();
+    const onConfirm = jest.fn();
+    const wrapper = shallow(getSampleNotebooksModal(onCancel, onConfirm));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('render get delete modal', () => {
+    const onCancel = jest.fn();
+    const onConfirm = jest.fn();
+    const wrapper = shallow(
+      getDeleteModal(onCancel, onConfirm, 'Delete', 'Delete message', 'Confirm message')
+    );
+    expect(wrapper).toMatchSnapshot();
+
+    const noConfirmMessageWrapper = shallow(
+      getDeleteModal(onCancel, onConfirm, 'Delete', 'Delete message')
+    );
+    expect(noConfirmMessageWrapper).toMatchSnapshot();
+  });
+
+  it('render delete notebooks modal', () => {
+    const onCancel = jest.fn();
+    const onConfirm = jest.fn();
+    const wrapper = shallow(
+      <DeleteNotebookModal
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+        title="title"
+        message="message"
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('checks delete notebooks modal', () => {
+    const onCancel = jest.fn();
+    const onConfirm = jest.fn();
+    const utils = render(
+      <DeleteNotebookModal
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+        title="title"
+        message="message"
+      />
+    );
+    fireEvent.change(utils.getAllByTestId('delete-notebook-modal-input')[0], {
+      target: { value: 'delete' },
+    });
+    fireEvent.click(utils.getAllByTestId('delete-notebook-modal-delete-button')[0]);
+    expect(onConfirm).toBeCalled();
+  });
+});
diff --git a/public/components/notebooks/components/helpers/__tests__/reporting_context_menu_helper.test.tsx b/public/components/notebooks/components/helpers/__tests__/reporting_context_menu_helper.test.tsx
new file mode 100644
index 0000000000..90b951df20
--- /dev/null
+++ b/public/components/notebooks/components/helpers/__tests__/reporting_context_menu_helper.test.tsx
@@ -0,0 +1,139 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  contextMenuCreateReportDefinition,
+  contextMenuViewReports,
+  generateInContextReport
+} from '../reporting_context_menu_helper';
+
+describe('reporting_context_menu_helper tests', () => {
+  test('contextMenuViewReports will redirect', () => {
+    const savedLocation = window.location;
+    // @ts-ignore
+    delete window.location;
+
+    window.location = {
+      ...savedLocation,
+      assign: jest.fn(),
+    };
+    contextMenuViewReports();
+    expect(window.location.assign).toBeCalledWith('reports-dashboards#/');
+    window.location = savedLocation;
+  });
+
+  test('contextMenuCreateReportDefinition', () => {
+    const savedLocation = window.location;
+    // @ts-ignore
+    delete window.location;
+
+    window.location = {
+      ...savedLocation,
+      assign: jest.fn(),
+    };
+    contextMenuCreateReportDefinition('https://mock-base.uri/mock-base-path');
+    expect(window.location.assign).toBeCalledWith(
+      'reports-dashboards#/create?previous=notebook:mock-base-path?timeFrom=0?timeTo=0'
+    );
+    window.location = savedLocation;
+  });
+
+  function generateReport(
+    status: number,
+    filename: string,
+    tenant: string,
+    setToast: (...args: any[]) => void,
+    toggleReportingLoadingModal: (toggle: boolean) => void
+  ) {
+    const fileFormat = filename.match(/\.([^.]+)$/)?.[1] || 'pdf';
+    // @ts-ignore
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        status,
+        json: () => Promise.resolve({ filename, fileFormat, data: 'test-data' }),
+        text: () => Promise.resolve({ tenant }),
+      })
+    );
+    const props = { setToast };
+    return generateInContextReport(fileFormat, props, toggleReportingLoadingModal);
+  }
+
+  it('generates csv for private tenant', async () => {
+    const setToast = jest.fn();
+    const toggleReportingLoadingModal = jest.fn();
+    await generateReport(200, 'test.csv', '__user__', setToast, toggleReportingLoadingModal);
+    expect(toggleReportingLoadingModal).toBeCalledWith(true);
+    expect(setToast).toBeCalledWith('Successfully generated report.', 'success');
+  });
+
+  it('generates pdf for global tenant', async () => {
+    const setToast = jest.fn();
+    const toggleReportingLoadingModal = jest.fn();
+    await generateReport(200, 'test.pdf', '', setToast, toggleReportingLoadingModal);
+    expect(toggleReportingLoadingModal).toBeCalledWith(true);
+    expect(setToast).toBeCalledWith('Successfully generated report.', 'success');
+  });
+
+  it('generates png for custom tenant', async () => {
+    const setToast = jest.fn();
+    const toggleReportingLoadingModal = jest.fn();
+    await generateReport(200, 'test.png', 'custom_tenant', setToast, toggleReportingLoadingModal);
+    expect(toggleReportingLoadingModal).toBeCalledWith(true);
+    expect(setToast).toBeCalledWith('Successfully generated report.', 'success');
+  });
+
+  it('generates png for custom tenant', async () => {
+    const setToast = jest.fn();
+    const toggleReportingLoadingModal = jest.fn();
+    await generateReport(200, 'test.png', 'custom_tenant', setToast, toggleReportingLoadingModal);
+    expect(toggleReportingLoadingModal).toBeCalledWith(true);
+    expect(setToast).toBeCalledWith('Successfully generated report.', 'success');
+  });
+
+  it('handles 404 error', async () => {
+    const setToast = jest.fn();
+    const toggleReportingLoadingModal = jest.fn();
+    await generateReport(404, 'test.png', 'custom_tenant', setToast, toggleReportingLoadingModal);
+    expect(toggleReportingLoadingModal).toBeCalledWith(true);
+    expect(setToast).toBeCalledWith(
+      'Download error',
+      'danger',
+      'There was an error generating this report.'
+    );
+  });
+
+  it('handles permission error', async () => {
+    const setToast = jest.fn();
+    const toggleReportingLoadingModal = jest.fn();
+    await generateReport(403, 'test.png', 'custom_tenant', setToast, toggleReportingLoadingModal);
+    expect(toggleReportingLoadingModal).toBeCalledWith(true);
+    expect(setToast).toBeCalledWith(
+      'Error generating report,',
+      'danger',
+      'Insufficient permissions. Reach out to your OpenSearch Dashboards administrator.'
+    );
+  });
+
+  it('handles timeout error', async () => {
+    const setToast = jest.fn();
+    const toggleReportingLoadingModal = jest.fn();
+    await generateReport(503, 'test.png', 'custom_tenant', setToast, toggleReportingLoadingModal);
+    expect(toggleReportingLoadingModal).toBeCalledWith(true);
+    expect(setToast).toBeCalledWith(
+      'Error generating report.',
+      'danger',
+      'Timed out generating on-demand report from notebook. Try again later.'
+    );
+  });
+
+  it('handles tenant errors', async () => {
+    global.fetch = jest.fn(() => Promise.reject({ status: 500 }));
+    const setToast = jest.fn();
+    const toggleReportingLoadingModal = jest.fn();
+    await generateInContextReport('csv', { setToast }, toggleReportingLoadingModal);
+    expect(toggleReportingLoadingModal).toBeCalledWith(true);
+    expect(setToast).toBeCalledWith('Tenant error', 'danger', 'Failed to get user tenant.');
+  });
+});
diff --git a/public/components/notebooks/components/helpers/__tests__/sampleDefaultNotebooks.tsx b/public/components/notebooks/components/helpers/__tests__/sampleDefaultNotebooks.tsx
new file mode 100644
index 0000000000..17e077ed52
--- /dev/null
+++ b/public/components/notebooks/components/helpers/__tests__/sampleDefaultNotebooks.tsx
@@ -0,0 +1,354 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Sample notebook with all input and output
+export const sampleNotebook1 = {
+  id: 'note_5f4b9eed-5898-4b39-ba6c-755c0fadd84e',
+  dateCreated: '2020-08-20T18:00:59.845Z',
+  name: 'test 1',
+  dateModified: '2020-08-20T18:37:56.844Z',
+  pluginVersion: '7.9.0',
+  backend: 'Default',
+  paragraphs: [
+    {
+      output: [{ result: '# Type your input here', outputType: 'MARKDOWN', execution_time: '0s' }],
+      input: { inputText: '# Type your input here', inputType: 'MARKDOWN' },
+      dateCreated: '2020-08-20T18:00:59.845Z',
+      dateModified: '2020-08-20T18:00:59.845Z',
+      id: 'paragraph_1a710988-ec19-4caa-83cc-38eb609427d1',
+    },
+    {
+      output: [{ result: '# add code here\n', outputType: 'MARKDOWN', execution_time: '0s' }],
+      input: { inputText: '# add code here\n', inputType: 'MARKDOWN' },
+      dateCreated: '2020-08-20T18:01:07.662Z',
+      dateModified: '2020-08-20T18:01:18.295Z',
+      id: 'paragraph_c3107b15-da7d-4836-aef4-0996abbc8ab2',
+    },
+    {
+      output: [{ result: '', outputType: 'VISUALIZATION', execution_time: '0s' }],
+      input: {
+        inputText:
+          '{"viewMode":"view","panels":{"1":{"gridData":{"x":1,"y":0,"w":44,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"935afa20-e0cd-11e7-9d07-1398ccfcefa3","vis":null}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"i3ccc6260-e314-11ea-9f99-b37e94bb02ca","timeRange":{"to":"2020-08-20T18:37:44.710Z","from":"2020-07-21T18:37:44.710Z"},"title":"embed_viz_i3ccc6260-e314-11ea-9f99-b37e94bb02ca","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+        inputType: 'VISUALIZATION',
+      },
+      dateCreated: '2020-08-20T18:37:44.809Z',
+      dateModified: '2020-08-20T18:37:56.844Z',
+      id: 'paragraph_6d3237a9-6486-4f93-aa25-0a1c838faabd',
+    },
+    {
+      output: [
+        {
+          result:
+            '{"schema":[{"name":"FlightNum","type":"keyword"},{"name":"Origin","type":"keyword"},{"name":"OriginLocation","type":"geo_point"},{"name":"DestLocation","type":"geo_point"},{"name":"FlightDelay","type":"boolean"},{"name":"DistanceMiles","type":"float"},{"name":"FlightTimeMin","type":"float"},{"name":"OriginWeather","type":"keyword"},{"name":"dayOfWeek","type":"integer"},{"name":"AvgTicketPrice","type":"float"},{"name":"Carrier","type":"keyword"},{"name":"FlightDelayMin","type":"integer"},{"name":"OriginRegion","type":"keyword"},{"name":"DestAirportID","type":"keyword"},{"name":"FlightDelayType","type":"keyword"},{"name":"timestamp","type":"timestamp"},{"name":"Dest","type":"keyword"},{"name":"FlightTimeHour","type":"keyword"},{"name":"Cancelled","type":"boolean"},{"name":"DistanceKilometers","type":"float"},{"name":"OriginCityName","type":"keyword"},{"name":"DestWeather","type":"keyword"},{"name":"OriginCountry","type":"keyword"},{"name":"DestCountry","type":"keyword"},{"name":"DestRegion","type":"keyword"},{"name":"DestCityName","type":"keyword"},{"name":"OriginAirportID","type":"keyword"}],"datarows":[["9HY9SWR","Frankfurt am Main Airport",{"lat":50.033333,"lon":8.570556},{"lat":-33.94609833,"lon":151.177002},false,10247.856,1030.7704,"Sunny",0,841.2656,"OpenSearch Dashboards Airlines",0,"DE-HE","SYD","No Delay","2021-11-01 00:00:00","Sydney Kingsford Smith International Airport","17.179506930998397",false,16492.326,"Frankfurt am Main","Rain","DE","AU","SE-BD","Sydney","FRA"],["X98CCZO","Cape Town International Airport",{"lat":-33.96480179,"lon":18.60169983},{"lat":45.505299,"lon":12.3519},false,5482.6064,464.3895,"Clear",0,882.98267,"Logstash Airways",0,"SE-BD","VE05","No Delay","2021-11-01 18:27:00","Venice Marco Polo Airport","7.73982468459836",false,8823.4,"Cape Town","Sunny","ZA","IT","IT-34","Venice","CPT"]],"total":2,"size":2,"status":200}',
+          outputType: 'QUERY',
+          execution_time: '0s',
+        },
+      ],
+      input: {
+        inputText: '%sql select * from opensearch_dashboards_sample_data_flights limit 2',
+        inputType: 'QUERY',
+      },
+      dateCreated: '2020-08-20T18:37:44.809Z',
+      dateModified: '2020-08-20T18:37:56.844Z',
+      id: 'paragraph_f1b2db55-8704-4822-a8ff-6445fe1fa10c',
+    },
+  ],
+};
+
+// Parsed Output of sample notebook1
+export const sampleParsedParagraghs1 = [
+  {
+    uniqueId: 'paragraph_1a710988-ec19-4caa-83cc-38eb609427d1',
+    isRunning: false,
+    inQueue: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: false,
+    vizObjectInput: '',
+    id: 1,
+    inp: '# Type your input here',
+    isInputExpanded: false,
+    isOutputStale: false,
+    paraDivRef: undefined,
+    paraRef: undefined,
+    visEndTime: undefined,
+    visSavedObjId: undefined,
+    visStartTime: undefined,
+    lang: 'text/x-md',
+    editorLanguage: 'md',
+    typeOut: ['MARKDOWN'],
+    out: ['# Type your input here'],
+  },
+  {
+    uniqueId: 'paragraph_c3107b15-da7d-4836-aef4-0996abbc8ab2',
+    isRunning: false,
+    inQueue: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: false,
+    vizObjectInput: '',
+    id: 2,
+    inp: '# add code here\n',
+    isInputExpanded: false,
+    isOutputStale: false,
+    paraDivRef: undefined,
+    paraRef: undefined,
+    visEndTime: undefined,
+    visSavedObjId: undefined,
+    visStartTime: undefined,
+    lang: 'text/x-md',
+    editorLanguage: 'md',
+    typeOut: ['MARKDOWN'],
+    out: ['# add code here\n'],
+  },
+  {
+    uniqueId: 'paragraph_6d3237a9-6486-4f93-aa25-0a1c838faabd',
+    isRunning: false,
+    inQueue: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: true,
+    vizObjectInput:
+      '{"viewMode":"view","panels":{"1":{"gridData":{"x":1,"y":0,"w":44,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"935afa20-e0cd-11e7-9d07-1398ccfcefa3","vis":null}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"i3ccc6260-e314-11ea-9f99-b37e94bb02ca","timeRange":{"to":"2020-08-20T18:37:44.710Z","from":"2020-07-21T18:37:44.710Z"},"title":"embed_viz_i3ccc6260-e314-11ea-9f99-b37e94bb02ca","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+    id: 3,
+    inp: '{"viewMode":"view","panels":{"1":{"gridData":{"x":1,"y":0,"w":44,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"935afa20-e0cd-11e7-9d07-1398ccfcefa3","vis":null}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"i3ccc6260-e314-11ea-9f99-b37e94bb02ca","timeRange":{"to":"2020-08-20T18:37:44.710Z","from":"2020-07-21T18:37:44.710Z"},"title":"embed_viz_i3ccc6260-e314-11ea-9f99-b37e94bb02ca","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+    lang: 'text/x-',
+    isInputExpanded: false,
+    isOutputStale: false,
+    paraDivRef: undefined,
+    paraRef: undefined,
+    visEndTime: '2020-08-20T18:37:44.710Z',
+    visSavedObjId: '935afa20-e0cd-11e7-9d07-1398ccfcefa3',
+    visStartTime: '2020-07-21T18:37:44.710Z',
+    editorLanguage: '',
+    typeOut: ['VISUALIZATION'],
+    out: [''],
+  },
+  {
+    uniqueId: 'paragraph_f1b2db55-8704-4822-a8ff-6445fe1fa10c',
+    isRunning: false,
+    inQueue: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: false,
+    vizObjectInput: '',
+    id: 4,
+    inp: `%sql select * from opensearch_dashboards_sample_data_flights limit 2`,
+    isInputExpanded: false,
+    isOutputStale: false,
+    paraDivRef: undefined,
+    paraRef: undefined,
+    visEndTime: undefined,
+    visSavedObjId: undefined,
+    visStartTime: undefined,
+    lang: 'text/x-',
+    editorLanguage: '',
+    typeOut: ['QUERY'],
+    out: [
+      '{"schema":[{"name":"FlightNum","type":"keyword"},{"name":"Origin","type":"keyword"},{"name":"OriginLocation","type":"geo_point"},{"name":"DestLocation","type":"geo_point"},{"name":"FlightDelay","type":"boolean"},{"name":"DistanceMiles","type":"float"},{"name":"FlightTimeMin","type":"float"},{"name":"OriginWeather","type":"keyword"},{"name":"dayOfWeek","type":"integer"},{"name":"AvgTicketPrice","type":"float"},{"name":"Carrier","type":"keyword"},{"name":"FlightDelayMin","type":"integer"},{"name":"OriginRegion","type":"keyword"},{"name":"DestAirportID","type":"keyword"},{"name":"FlightDelayType","type":"keyword"},{"name":"timestamp","type":"timestamp"},{"name":"Dest","type":"keyword"},{"name":"FlightTimeHour","type":"keyword"},{"name":"Cancelled","type":"boolean"},{"name":"DistanceKilometers","type":"float"},{"name":"OriginCityName","type":"keyword"},{"name":"DestWeather","type":"keyword"},{"name":"OriginCountry","type":"keyword"},{"name":"DestCountry","type":"keyword"},{"name":"DestRegion","type":"keyword"},{"name":"DestCityName","type":"keyword"},{"name":"OriginAirportID","type":"keyword"}],"datarows":[["9HY9SWR","Frankfurt am Main Airport",{"lat":50.033333,"lon":8.570556},{"lat":-33.94609833,"lon":151.177002},false,10247.856,1030.7704,"Sunny",0,841.2656,"OpenSearch Dashboards Airlines",0,"DE-HE","SYD","No Delay","2021-11-01 00:00:00","Sydney Kingsford Smith International Airport","17.179506930998397",false,16492.326,"Frankfurt am Main","Rain","DE","AU","SE-BD","Sydney","FRA"],["X98CCZO","Cape Town International Airport",{"lat":-33.96480179,"lon":18.60169983},{"lat":45.505299,"lon":12.3519},false,5482.6064,464.3895,"Clear",0,882.98267,"Logstash Airways",0,"SE-BD","VE05","No Delay","2021-11-01 18:27:00","Venice Marco Polo Airport","7.73982468459836",false,8823.4,"Cape Town","Sunny","ZA","IT","IT-34","Venice","CPT"]],"total":2,"size":2,"status":200}',
+    ],
+  },
+];
+
+// Sample notebook with all input and cleared outputs
+export const sampleNotebook2 = {
+  id: 'note_5f4b9eed-5898-4b39-ba6c-755c0fadd84e',
+  dateCreated: '2020-08-20T18:00:59.845Z',
+  name: 'test 1',
+  dateModified: '2020-08-20T19:13:06.509Z',
+  pluginVersion: '7.9.0',
+  backend: 'Default',
+  paragraphs: [
+    {
+      output: [
+        {
+          result:
+            '# Type no output here\n* Sample link: [link](https://opensearch.org/)\n* ~~Strike~~, **Bold**, __Italic__',
+          outputType: 'MARKDOWN',
+          execution_time: '0s',
+        },
+      ],
+      input: {
+        inputText:
+          '# Type no output here\n* Sample link: [link](https://opensearch.org/)\n* ~~Strike~~, **Bold**, __Italic__',
+        inputType: 'MARKDOWN',
+      },
+      dateCreated: '2020-08-20T18:00:59.845Z',
+      dateModified: '2020-08-20T19:13:06.509Z',
+      id: 'paragraph_1a710988-ec19-4caa-83cc-38eb609427d1',
+    },
+    {
+      output: [],
+      input: { inputText: '# no output here\n', inputType: 'MARKDOWN' },
+      dateCreated: '2020-08-20T18:01:07.662Z',
+      dateModified: '2020-08-20T19:09:19.210Z',
+      id: 'paragraph_c3107b15-da7d-4836-aef4-0996abbc8ab2',
+    },
+    {
+      output: [],
+      input: {
+        inputText:
+          '{"viewMode":"view","panels":{"1":{"gridData":{"x":1,"y":0,"w":44,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"935afa20-e0cd-11e7-9d07-1398ccfcefa3","vis":null}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"i3ccc6260-e314-11ea-9f99-b37e94bb02ca","timeRange":{"to":"2020-08-20T18:37:44.710Z","from":"2020-07-21T18:37:44.710Z"},"title":"embed_viz_i3ccc6260-e314-11ea-9f99-b37e94bb02ca","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+        inputType: 'VISUALIZATION',
+      },
+      dateCreated: '2020-08-20T18:37:44.809Z',
+      dateModified: '2020-08-20T18:37:56.844Z',
+      id: 'paragraph_6d3237a9-6486-4f93-aa25-0a1c838faabd',
+    },
+  ],
+};
+
+// Parsed Output of sample notebook2
+export const sampleParsedParagraghs2 = [
+  {
+    uniqueId: 'paragraph_1a710988-ec19-4caa-83cc-38eb609427d1',
+    isRunning: false,
+    inQueue: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: false,
+    vizObjectInput: '',
+    id: 1,
+    inp: '# Type no output here\n* Sample link: [link](https://opensearch.org/)\n* ~~Strike~~, **Bold**, __Italic__',
+    lang: 'text/x-md',
+    isInputExpanded: false,
+    isOutputStale: false,
+    paraDivRef: undefined,
+    paraRef: undefined,
+    visEndTime: undefined,
+    visSavedObjId: undefined,
+    visStartTime: undefined,
+    editorLanguage: 'md',
+    typeOut: ['MARKDOWN'],
+    out: [
+      '# Type no output here\n* Sample link: [link](https://opensearch.org/)\n* ~~Strike~~, **Bold**, __Italic__',
+    ],
+  },
+  {
+    uniqueId: 'paragraph_c3107b15-da7d-4836-aef4-0996abbc8ab2',
+    isRunning: false,
+    inQueue: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: false,
+    vizObjectInput: '',
+    id: 2,
+    inp: '# no output here\n',
+    isInputExpanded: false,
+    isOutputStale: false,
+    paraDivRef: undefined,
+    paraRef: undefined,
+    visEndTime: undefined,
+    visSavedObjId: undefined,
+    visStartTime: undefined,
+    lang: 'text/x-md',
+    editorLanguage: 'md',
+    typeOut: [],
+    out: [],
+  },
+  {
+    uniqueId: 'paragraph_6d3237a9-6486-4f93-aa25-0a1c838faabd',
+    isRunning: false,
+    inQueue: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: true,
+    vizObjectInput:
+      '{"viewMode":"view","panels":{"1":{"gridData":{"x":1,"y":0,"w":44,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"935afa20-e0cd-11e7-9d07-1398ccfcefa3","vis":null}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"i3ccc6260-e314-11ea-9f99-b37e94bb02ca","timeRange":{"to":"2020-08-20T18:37:44.710Z","from":"2020-07-21T18:37:44.710Z"},"title":"embed_viz_i3ccc6260-e314-11ea-9f99-b37e94bb02ca","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+    id: 3,
+    inp: '{"viewMode":"view","panels":{"1":{"gridData":{"x":1,"y":0,"w":44,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"935afa20-e0cd-11e7-9d07-1398ccfcefa3","vis":null}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"i3ccc6260-e314-11ea-9f99-b37e94bb02ca","timeRange":{"to":"2020-08-20T18:37:44.710Z","from":"2020-07-21T18:37:44.710Z"},"title":"embed_viz_i3ccc6260-e314-11ea-9f99-b37e94bb02ca","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+    lang: 'text/x-',
+    isInputExpanded: false,
+    isOutputStale: false,
+    paraDivRef: undefined,
+    paraRef: undefined,
+    visEndTime: '2020-08-20T18:37:44.710Z',
+    visSavedObjId: '935afa20-e0cd-11e7-9d07-1398ccfcefa3',
+    visStartTime: '2020-07-21T18:37:44.710Z',
+    editorLanguage: '',
+    typeOut: [],
+    out: [],
+  },
+];
+
+// Sample notebook with no input
+export const sampleNotebook3 = {
+  id: 'note_5f4b9eed-5898-4b39-ba6c-755c0fadd84e',
+  dateCreated: '2020-08-20T18:00:59.845Z',
+  name: 'test 1',
+  dateModified: '2020-08-20T19:13:06.509Z',
+  pluginVersion: '7.9.0',
+  backend: 'Default',
+  paragraphs: [
+    {
+      output: [
+        {
+          result:
+            '# Type no output here\n* Sample link: [link](https://opensearch.org/)\n* ~~Strike~~, **Bold**, __Italic__',
+          outputType: 'MARKDOWN',
+          execution_time: '0s',
+        },
+      ],
+      dateCreated: '2020-08-20T18:00:59.845Z',
+      dateModified: '2020-08-20T19:13:06.509Z',
+      id: 'paragraph_1a710988-ec19-4caa-83cc-38eb609427d1',
+    },
+  ],
+};
+
+// Sample notebook with no paragraph id
+export const sampleNotebook4 = {
+  id: 'note_5f4b9eed-5898-4b39-ba6c-755c0fadd84e',
+  dateCreated: '2020-08-20T18:00:59.845Z',
+  name: 'test 1',
+  dateModified: '2020-08-20T19:13:06.509Z',
+  pluginVersion: '7.9.0',
+  backend: 'Default',
+  paragraphs: [
+    {
+      output: [
+        {
+          result:
+            '# Type no output here\n* Sample link: [link](https://opensearch.org/)\n* ~~Strike~~, **Bold**, __Italic__',
+          outputType: 'MARKDOWN',
+          execution_time: '0s',
+        },
+      ],
+      dateCreated: '2020-08-20T18:00:59.845Z',
+      dateModified: '2020-08-20T19:13:06.509Z',
+    },
+  ],
+};
+
+// Sample notebook with no input and output
+export const sampleNotebook5 = {
+  id: 'note_5f4b9eed-5898-4b39-ba6c-755c0fadd84e',
+  dateCreated: '2020-08-20T18:00:59.845Z',
+  name: 'test 1',
+  dateModified: '2020-08-20T19:13:06.509Z',
+  pluginVersion: '7.9.0',
+  backend: 'Default',
+  paragraphs: [
+    {
+      dateCreated: '2020-08-20T18:00:59.845Z',
+      dateModified: '2020-08-20T19:13:06.509Z',
+      id: 'paragraph_c3107b15-da7d-4836-aef4-0996abbc8ab2',
+    },
+  ],
+};
diff --git a/public/components/notebooks/components/helpers/__tests__/sampleZeppelinNotebooks.tsx b/public/components/notebooks/components/helpers/__tests__/sampleZeppelinNotebooks.tsx
new file mode 100644
index 0000000000..db07da1c51
--- /dev/null
+++ b/public/components/notebooks/components/helpers/__tests__/sampleZeppelinNotebooks.tsx
@@ -0,0 +1,359 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Sample notebook with all input and output
+export const sampleNotebook1 = {
+  paragraphs: [
+    {
+      text:
+        "%md \n\n### Hi Everyone\n* Here's a demo on **OpenSearch Dashboards Notebooks**\n* You may use the top left buttons to play around with notebooks and Paragraphs",
+      user: 'anonymous',
+      dateUpdated: '2020-08-20 21:15:04.590',
+      config: {},
+      settings: { params: {}, forms: {} },
+      results: {
+        code: 'SUCCESS',
+        msg: [
+          {
+            type: 'HTML',
+            data:
+              '<div class="markdown-body">\n<h3>Hi Everyone</h3>\n<ul>\n<li>Here&rsquo;s a demo on <strong>OpenSearch Dashboards Notebooks</strong></li>\n<li>You may use the top left buttons to play around with notebooks and Paragraphs</li>\n</ul>\n\n</div>',
+          },
+        ],
+      },
+      apps: [],
+      runtimeInfos: {},
+      progressUpdateIntervalMs: 500,
+      jobName: 'paragraph_1597958104590_901298942',
+      id: 'paragraph_1596519508360_932236116',
+      dateCreated: '2020-08-20 21:15:04.590',
+      status: 'READY',
+    },
+    {
+      title: 'VISUALIZATION',
+      text:
+        '%sh #vizobject:{"viewMode":"view","panels":{"1":{"gridData":{"x":15,"y":0,"w":20,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"06cf9c40-9ee8-11e7-8711-e7a007dcef99"}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"iab4eaba1-e32b-11ea-aac8-99f209533253","timeRange":{"to":"2020-08-20T21:25:28.538Z","from":"2020-07-21T21:25:28.538Z"},"title":"embed_viz_iab4eaba1-e32b-11ea-aac8-99f209533253","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+      user: 'anonymous',
+      dateUpdated: '2020-08-20 21:25:28.588',
+      config: {},
+      settings: { params: {}, forms: {} },
+      apps: [],
+      runtimeInfos: {},
+      progressUpdateIntervalMs: 500,
+      jobName: 'paragraph_1597958728587_1310320520',
+      id: 'paragraph_1597958728587_1310320520',
+      dateCreated: '2020-08-20 21:25:28.587',
+      status: 'READY',
+    },
+  ],
+  name: 'Embed Vizualization',
+  id: '2FJH8PW8K',
+  defaultInterpreterGroup: 'spark',
+  version: '0.9.0-preview2',
+  noteParams: {},
+  noteForms: {},
+  angularObjects: {},
+  config: { isZeppelinNotebookCronEnable: false },
+  info: {},
+};
+
+// Parsed Output of sample notebook1
+export const sampleParsedParagraghs1 = [
+  {
+    uniqueId: 'paragraph_1596519508360_932236116',
+    isRunning: false,
+    inQueue: false,
+    ishovered: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: false,
+    vizObjectInput: '',
+    id: 1,
+    inp:
+      "%md \n\n### Hi Everyone\n* Here's a demo on **OpenSearch Dashboards Notebooks**\n* You may use the top left buttons to play around with notebooks and Paragraphs",
+    lang: 'text/x-',
+    editorLanguage: '',
+    typeOut: ['HTML'],
+    out: [
+      '<div class="markdown-body">\n<h3>Hi Everyone</h3>\n<ul>\n<li>Here&rsquo;s a demo on <strong>OpenSearch Dashboards Notebooks</strong></li>\n<li>You may use the top left buttons to play around with notebooks and Paragraphs</li>\n</ul>\n\n</div>',
+    ],
+  },
+  {
+    uniqueId: 'paragraph_1597958728587_1310320520',
+    isRunning: false,
+    inQueue: false,
+    ishovered: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: true,
+    vizObjectInput:
+      '{"viewMode":"view","panels":{"1":{"gridData":{"x":15,"y":0,"w":20,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"06cf9c40-9ee8-11e7-8711-e7a007dcef99"}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"iab4eaba1-e32b-11ea-aac8-99f209533253","timeRange":{"to":"2020-08-20T21:25:28.538Z","from":"2020-07-21T21:25:28.538Z"},"title":"embed_viz_iab4eaba1-e32b-11ea-aac8-99f209533253","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+    id: 2,
+    inp:
+      '%sh #vizobject:{"viewMode":"view","panels":{"1":{"gridData":{"x":15,"y":0,"w":20,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"06cf9c40-9ee8-11e7-8711-e7a007dcef99"}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"iab4eaba1-e32b-11ea-aac8-99f209533253","timeRange":{"to":"2020-08-20T21:25:28.538Z","from":"2020-07-21T21:25:28.538Z"},"title":"embed_viz_iab4eaba1-e32b-11ea-aac8-99f209533253","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+    lang: 'text/x-',
+    editorLanguage: '',
+    typeOut: [],
+    out: [],
+  },
+];
+
+// Sample notebook with all input and cleared outputs
+export const sampleNotebook2 = {
+  paragraphs: [
+    {
+      text:
+        "%md \n\n### Hi Everyone\n* Here's a demo on **OpenSearch Dashboards Notebooks**\n* You may use the top left buttons to play around with notebooks and Paragraphs",
+      user: 'anonymous',
+      dateUpdated: '2020-08-20 21:15:04.590',
+      config: {},
+      settings: { params: {}, forms: {} },
+      apps: [],
+      runtimeInfos: {},
+      progressUpdateIntervalMs: 500,
+      jobName: 'paragraph_1597958104590_901298942',
+      id: 'paragraph_1596519508360_932236116',
+      dateCreated: '2020-08-20 21:15:04.590',
+      status: 'READY',
+    },
+    {
+      title: 'Paragraph inserted',
+      text: '%md\n\n## Greetings!\n* Yay! you may import and export me ',
+      user: 'anonymous',
+      dateUpdated: '2020-08-20 21:15:04.590',
+      config: {},
+      settings: { params: {}, forms: {} },
+      apps: [],
+      runtimeInfos: {},
+      progressUpdateIntervalMs: 500,
+      jobName: 'paragraph_1597958104590_1715920734',
+      id: 'paragraph_1596742076640_674206137',
+      dateCreated: '2020-08-20 21:15:04.590',
+      status: 'READY',
+    },
+    {
+      title: 'Paragraph inserted',
+      text:
+        "%md\n\n### Let's use Visualization API with dashboard container to embed Visualizations in notebooks\n2. **Unpin** the container to *edit the size* or *delete it*\n3. **Refresh** the container after *date is changed*",
+      user: 'anonymous',
+      dateUpdated: '2020-08-20 21:15:04.590',
+      config: {},
+      settings: { params: {}, forms: {} },
+      apps: [],
+      runtimeInfos: {},
+      progressUpdateIntervalMs: 500,
+      jobName: 'paragraph_1597958104590_931410594',
+      id: 'paragraph_1596524302932_2112910756',
+      dateCreated: '2020-08-20 21:15:04.590',
+      status: 'READY',
+    },
+    {
+      title: 'VISUALIZATION',
+      text:
+        '%sh #vizobject:{"viewMode":"view","panels":{"1":{"gridData":{"x":15,"y":0,"w":20,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"06cf9c40-9ee8-11e7-8711-e7a007dcef99"}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"iab4eaba1-e32b-11ea-aac8-99f209533253","timeRange":{"to":"2020-08-20T21:25:28.538Z","from":"2020-07-21T21:25:28.538Z"},"title":"embed_viz_iab4eaba1-e32b-11ea-aac8-99f209533253","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+      user: 'anonymous',
+      dateUpdated: '2020-08-20 21:25:28.588',
+      config: {},
+      settings: { params: {}, forms: {} },
+      apps: [],
+      runtimeInfos: {},
+      progressUpdateIntervalMs: 500,
+      jobName: 'paragraph_1597958728587_1310320520',
+      id: 'paragraph_1597958728587_1310320520',
+      dateCreated: '2020-08-20 21:25:28.587',
+      status: 'READY',
+    },
+  ],
+  name: 'Embed Vizualization',
+  id: '2FJH8PW8K',
+  defaultInterpreterGroup: 'spark',
+  version: '0.9.0-preview2',
+  noteParams: {},
+  noteForms: {},
+  angularObjects: {},
+  config: { isZeppelinNotebookCronEnable: false },
+  info: {},
+};
+
+// Parsed Output of sample notebook2
+export const sampleParsedParagraghs2 = [
+  {
+    uniqueId: 'paragraph_1596519508360_932236116',
+    isRunning: false,
+    inQueue: false,
+    ishovered: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: false,
+    vizObjectInput: '',
+    id: 1,
+    inp:
+      "%md \n\n### Hi Everyone\n* Here's a demo on **OpenSearch Dashboards Notebooks**\n* You may use the top left buttons to play around with notebooks and Paragraphs",
+    lang: 'text/x-',
+    editorLanguage: '',
+    typeOut: [],
+    out: [],
+  },
+  {
+    uniqueId: 'paragraph_1596742076640_674206137',
+    isRunning: false,
+    inQueue: false,
+    ishovered: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: false,
+    vizObjectInput: '',
+    id: 2,
+    inp: '%md\n\n## Greetings!\n* Yay! you may import and export me ',
+    lang: 'text/x-md',
+    editorLanguage: 'md',
+    typeOut: [],
+    out: [],
+  },
+  {
+    uniqueId: 'paragraph_1596524302932_2112910756',
+    isRunning: false,
+    inQueue: false,
+    ishovered: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: false,
+    vizObjectInput: '',
+    id: 3,
+    inp:
+      "%md\n\n### Let's use Visualization API with dashboard container to embed Visualizations in notebooks\n2. **Unpin** the container to *edit the size* or *delete it*\n3. **Refresh** the container after *date is changed*",
+    lang: 'text/x-md',
+    editorLanguage: 'md',
+    typeOut: [],
+    out: [],
+  },
+  {
+    uniqueId: 'paragraph_1597958728587_1310320520',
+    isRunning: false,
+    inQueue: false,
+    ishovered: false,
+    isSelected: false,
+    isInputHidden: false,
+    isOutputHidden: false,
+    showAddPara: false,
+    isVizualisation: true,
+    vizObjectInput:
+      '{"viewMode":"view","panels":{"1":{"gridData":{"x":15,"y":0,"w":20,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"06cf9c40-9ee8-11e7-8711-e7a007dcef99"}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"iab4eaba1-e32b-11ea-aac8-99f209533253","timeRange":{"to":"2020-08-20T21:25:28.538Z","from":"2020-07-21T21:25:28.538Z"},"title":"embed_viz_iab4eaba1-e32b-11ea-aac8-99f209533253","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+    id: 4,
+    inp:
+      '%sh #vizobject:{"viewMode":"view","panels":{"1":{"gridData":{"x":15,"y":0,"w":20,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"06cf9c40-9ee8-11e7-8711-e7a007dcef99"}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"iab4eaba1-e32b-11ea-aac8-99f209533253","timeRange":{"to":"2020-08-20T21:25:28.538Z","from":"2020-07-21T21:25:28.538Z"},"title":"embed_viz_iab4eaba1-e32b-11ea-aac8-99f209533253","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+    lang: 'text/x-',
+    editorLanguage: '',
+    typeOut: [],
+    out: [],
+  },
+];
+
+// Sample notebook with no paragraph Id
+export const sampleNotebook3 = {
+  paragraphs: [
+    {
+      text:
+        "%md \n\n### Hi Everyone\n* Here's a demo on **OpenSearch Dashboards Notebooks**\n* You may use the top left buttons to play around with notebooks and Paragraphs",
+      user: 'anonymous',
+      dateUpdated: '2020-08-20 21:15:04.590',
+      config: {},
+      settings: { params: {}, forms: {} },
+      results: {
+        code: 'SUCCESS',
+        msg: [
+          {
+            type: 'HTML',
+            data:
+              '<div class="markdown-body">\n<h3>Hi Everyone</h3>\n<ul>\n<li>Here&rsquo;s a demo on <strong>OpenSearch Dashboards Notebooks</strong></li>\n<li>You may use the top left buttons to play around with notebooks and Paragraphs</li>\n</ul>\n\n</div>',
+          },
+        ],
+      },
+      apps: [],
+      runtimeInfos: {},
+      progressUpdateIntervalMs: 500,
+      jobName: 'paragraph_1597958104590_901298942',
+      dateCreated: '2020-08-20 21:15:04.590',
+      status: 'READY',
+    },
+  ],
+  name: 'Embed Vizualization',
+  id: '2FJH8PW8K',
+  defaultInterpreterGroup: 'spark',
+  version: '0.9.0-preview2',
+  noteParams: {},
+  noteForms: {},
+  angularObjects: {},
+  config: { isZeppelinNotebookCronEnable: false },
+  info: {},
+};
+
+// Sample notebook with no VISUALIZAITON title
+export const sampleNotebook4 = {
+  paragraphs: [
+    {
+      text:
+        '%sh #vizobject:{"viewMode":"view","panels":{"1":{"gridData":{"x":15,"y":0,"w":20,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"06cf9c40-9ee8-11e7-8711-e7a007dcef99"}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"iab4eaba1-e32b-11ea-aac8-99f209533253","timeRange":{"to":"2020-08-20T21:25:28.538Z","from":"2020-07-21T21:25:28.538Z"},"title":"embed_viz_iab4eaba1-e32b-11ea-aac8-99f209533253","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+      user: 'anonymous',
+      dateUpdated: '2020-08-20 21:25:28.588',
+      config: {},
+      settings: { params: {}, forms: {} },
+      apps: [],
+      runtimeInfos: {},
+      progressUpdateIntervalMs: 500,
+      jobName: 'paragraph_1597958728587_1310320520',
+      id: 'paragraph_1597958728587_1310320520',
+      dateCreated: '2020-08-20 21:25:28.587',
+      status: 'READY',
+    },
+  ],
+  name: 'Embed Vizualization',
+  id: '2FJH8PW8K',
+  defaultInterpreterGroup: 'spark',
+  version: '0.9.0-preview2',
+  noteParams: {},
+  noteForms: {},
+  angularObjects: {},
+  config: { isZeppelinNotebookCronEnable: false },
+  info: {},
+};
+
+// Sample notebook with no input and output
+export const sampleNotebook5 = {
+  paragraphs: [
+    {
+      user: 'anonymous',
+      dateUpdated: '2020-08-20 21:25:28.588',
+      config: {},
+      settings: { params: {}, forms: {} },
+      apps: [],
+      runtimeInfos: {},
+      progressUpdateIntervalMs: 500,
+      jobName: 'paragraph_1597958728587_1310320520',
+      id: 'paragraph_1597958728587_1310320520',
+      dateCreated: '2020-08-20 21:25:28.587',
+      status: 'READY',
+    },
+  ],
+  name: 'Embed Vizualization',
+  id: '2FJH8PW8K',
+  defaultInterpreterGroup: 'spark',
+  version: '0.9.0-preview2',
+  noteParams: {},
+  noteForms: {},
+  angularObjects: {},
+  config: { isZeppelinNotebookCronEnable: false },
+  info: {},
+};
diff --git a/public/components/notebooks/components/helpers/__tests__/zeppelin_parser.test.tsx b/public/components/notebooks/components/helpers/__tests__/zeppelin_parser.test.tsx
new file mode 100644
index 0000000000..e6c5b351e1
--- /dev/null
+++ b/public/components/notebooks/components/helpers/__tests__/zeppelin_parser.test.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { zeppelinParagraphParser } from '../zeppelin_parser';
+import {
+  sampleNotebook1,
+  sampleNotebook2,
+  sampleNotebook3,
+  sampleNotebook4,
+  sampleNotebook5,
+  sampleParsedParagraghs1,
+  sampleParsedParagraghs2,
+} from './sampleZeppelinNotebooks';
+
+// Perfect schema
+describe('Testing Zeppelin backend parser function with perfect schema', () => {
+  test('zeppelinParagraphParserTest1', (done) => {
+    const parsedParagraphs1 = zeppelinParagraphParser(sampleNotebook1.paragraphs);
+    const parsedParagraphs2 = zeppelinParagraphParser(sampleNotebook2.paragraphs);
+    const parsedParagraphs3 = zeppelinParagraphParser([]);
+    expect(parsedParagraphs1).toEqual(sampleParsedParagraghs1);
+    expect(parsedParagraphs2).toEqual(sampleParsedParagraghs2);
+    expect(parsedParagraphs3).toEqual([]);
+    done();
+  });
+});
+
+// Issue in schema
+describe('Testing default backend parser function with wrong schema', () => {
+  test('zeppelinParagraphParserTest2', (done) => {
+    expect(() => {
+      const parsedParagraphs1 = zeppelinParagraphParser(sampleNotebook3.paragraphs);
+    }).toThrow(Error);
+    expect(() => {
+      const parsedParagraphs2 = zeppelinParagraphParser(sampleNotebook4.paragraphs);
+    }).toThrow(Error);
+    expect(() => {
+      const parsedParagraphs3 = zeppelinParagraphParser(sampleNotebook5.paragraphs);
+    }).toThrow(Error);
+    done();
+  });
+});
diff --git a/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap b/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap
new file mode 100644
index 0000000000..69461a2540
--- /dev/null
+++ b/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CustomInputModal /> spec renders the component 1`] = `
+<EuiOverlayMask>
+  <EuiModal
+    initialFocus="[name=input]"
+    onClose={[MockFunction]}
+  >
+    <EuiModalHeader>
+      <EuiModalHeaderTitle>
+        title
+      </EuiModalHeaderTitle>
+    </EuiModalHeader>
+    <EuiModalBody>
+      <EuiForm>
+        <EuiFormRow
+          describedByIds={Array []}
+          display="row"
+          fullWidth={false}
+          hasChildLabel={true}
+          hasEmptyLabelSpace={false}
+          helpText="help text"
+          label="label"
+          labelType="label"
+        >
+          <EuiFieldText
+            data-test-subj="custom-input-modal-input"
+            name="input"
+            onChange={[Function]}
+            value="mock-path"
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </EuiModalBody>
+    <EuiModalFooter>
+      <EuiButtonEmpty
+        onClick={[MockFunction]}
+      >
+        Cancel
+      </EuiButtonEmpty>
+      <EuiButton
+        data-test-subj="custom-input-modal-confirm-button"
+        fill={true}
+        onClick={[Function]}
+      >
+        Confirm
+      </EuiButton>
+    </EuiModalFooter>
+  </EuiModal>
+</EuiOverlayMask>
+`;
+
+exports[`<CustomInputModal /> spec renders the component 2`] = `
+<EuiOverlayMask>
+  <EuiModal
+    initialFocus="[name=input]"
+    onClose={[MockFunction]}
+  >
+    <EuiModalHeader>
+      <EuiModalHeaderTitle>
+        title
+      </EuiModalHeaderTitle>
+    </EuiModalHeader>
+    <EuiModalBody>
+      <EuiForm>
+        <EuiFormRow
+          describedByIds={Array []}
+          display="row"
+          fullWidth={false}
+          hasChildLabel={true}
+          hasEmptyLabelSpace={false}
+          helpText="help text"
+          label="label"
+          labelType="label"
+        >
+          <EuiFieldText
+            data-test-subj="custom-input-modal-input"
+            name="input"
+            onChange={[Function]}
+            value=""
+          />
+        </EuiFormRow>
+      </EuiForm>
+    </EuiModalBody>
+    <EuiModalFooter>
+      <EuiButtonEmpty
+        onClick={[MockFunction]}
+      >
+        Cancel
+      </EuiButtonEmpty>
+      <EuiButton
+        data-test-subj="custom-input-modal-confirm-button"
+        fill={true}
+        onClick={[Function]}
+      >
+        Confirm
+      </EuiButton>
+    </EuiModalFooter>
+  </EuiModal>
+</EuiOverlayMask>
+`;
diff --git a/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/reporting_loading_modal.test.tsx.snap b/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/reporting_loading_modal.test.tsx.snap
new file mode 100644
index 0000000000..08ff025232
--- /dev/null
+++ b/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/reporting_loading_modal.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<GenerateReportLoadingModal /> spec renders the component 1`] = `<div />`;
diff --git a/public/components/notebooks/components/helpers/custom_modals/__tests__/custom_input_modal.test.tsx b/public/components/notebooks/components/helpers/custom_modals/__tests__/custom_input_modal.test.tsx
new file mode 100644
index 0000000000..452696ed8f
--- /dev/null
+++ b/public/components/notebooks/components/helpers/custom_modals/__tests__/custom_input_modal.test.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { CustomInputModal } from '../custom_input_modal';
+
+describe('<CustomInputModal /> spec', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders the component', () => {
+    const runModal = jest.fn();
+    const closeModal = jest.fn();
+    const wrapper = shallow(
+      <CustomInputModal
+        runModal={runModal}
+        closeModal={closeModal}
+        labelTxt="label"
+        titletxt="title"
+        btn1txt="Cancel"
+        btn2txt="Confirm"
+        openNoteName="mock-path"
+        helpText="help text"
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+    const emptyNameWrapper = shallow(
+      <CustomInputModal
+        runModal={runModal}
+        closeModal={closeModal}
+        labelTxt="label"
+        titletxt="title"
+        btn1txt="Cancel"
+        btn2txt="Confirm"
+        openNoteName=""
+        helpText="help text"
+      />
+    );
+    expect(emptyNameWrapper).toMatchSnapshot();
+  });
+
+  it('clicks buttons', () => {
+    const runModal = jest.fn();
+    const closeModal = jest.fn();
+    const utils = render(
+      <CustomInputModal
+        runModal={runModal}
+        closeModal={closeModal}
+        labelTxt="label"
+        titletxt="title"
+        btn1txt="Cancel"
+        btn2txt="Confirm"
+        openNoteName="mock-path"
+        helpText="help text"
+      />
+    );
+    fireEvent.change(utils.getByTestId('custom-input-modal-input'), {
+      target: { value: 'test-name' },
+    });
+    utils.getByTestId('custom-input-modal-confirm-button').click();
+    expect(runModal).toBeCalledWith('test-name');
+  });
+});
diff --git a/public/components/notebooks/components/helpers/custom_modals/__tests__/reporting_loading_modal.test.tsx b/public/components/notebooks/components/helpers/custom_modals/__tests__/reporting_loading_modal.test.tsx
new file mode 100644
index 0000000000..abfd4e5a06
--- /dev/null
+++ b/public/components/notebooks/components/helpers/custom_modals/__tests__/reporting_loading_modal.test.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { GenerateReportLoadingModal } from '../reporting_loading_modal';
+
+describe('<GenerateReportLoadingModal /> spec', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders the component', () => {
+    const setShowLoading = jest.fn();
+    const utils = render(<GenerateReportLoadingModal setShowLoading={setShowLoading} />);
+    expect(utils.container.firstChild).toMatchSnapshot();
+    utils.getByTestId('reporting-loading-modal-close-button').click();
+    expect(setShowLoading).toBeCalledWith(false);
+  });
+});
diff --git a/public/components/notebooks/components/helpers/custom_modals/custom_input_modal.tsx b/public/components/notebooks/components/helpers/custom_modals/custom_input_modal.tsx
new file mode 100644
index 0000000000..5c11986490
--- /dev/null
+++ b/public/components/notebooks/components/helpers/custom_modals/custom_input_modal.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiButtonEmpty,
+  EuiForm,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiFormRow,
+  EuiFieldText,
+  EuiButton,
+} from '@elastic/eui';
+
+/*
+ * "CustomInputModalProps" component is used to create a modal with an input filed
+ *
+ * Props taken in as params are:
+ * runModal - function to fetch input field value and trigger closing modal
+ * closeModal - function to trigger closing modal
+ * titletxt - string as header for title of modal
+ * labelTxt - string as header for input field
+ * btn1txt - string as content to fill "close button"
+ * btn2txt - string as content to fill "confirm button"
+ * openNoteName - Default input value for the field
+ */
+type CustomInputModalProps = {
+  runModal: (value: string) => void;
+  closeModal: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void;
+  labelTxt: string;
+  titletxt: string;
+  btn1txt: string;
+  btn2txt: string;
+  openNoteName: string;
+  helpText: string;
+};
+
+export const CustomInputModal = (props: CustomInputModalProps) => {
+  const { runModal, closeModal, labelTxt, titletxt, btn1txt, btn2txt, openNoteName, helpText } = props;
+  const [value, setValue] = useState(openNoteName || ''); // sets input value
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  return (
+    <EuiOverlayMask>
+      <EuiModal onClose={closeModal} initialFocus="[name=input]">
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>{titletxt}</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <EuiForm>
+            <EuiFormRow label={labelTxt} helpText={helpText}>
+              <EuiFieldText
+                data-test-subj="custom-input-modal-input"
+                name="input"
+                value={value}
+                onChange={(e) => onChange(e)}
+              />
+            </EuiFormRow>
+          </EuiForm>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButtonEmpty onClick={closeModal}>{btn1txt}</EuiButtonEmpty>
+          <EuiButton data-test-subj="custom-input-modal-confirm-button" onClick={() => runModal(value)} fill>
+            {btn2txt}
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};
diff --git a/public/components/notebooks/components/helpers/custom_modals/reporting_loading_modal.tsx b/public/components/notebooks/components/helpers/custom_modals/reporting_loading_modal.tsx
new file mode 100644
index 0000000000..97de6788d1
--- /dev/null
+++ b/public/components/notebooks/components/helpers/custom_modals/reporting_loading_modal.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { 
+  EuiOverlayMask, 
+  EuiModal, 
+  EuiModalHeader, 
+  EuiTitle, 
+  EuiText, 
+  EuiModalBody, 
+  EuiSpacer, 
+  EuiFlexGroup, 
+  EuiFlexItem, 
+  EuiLoadingSpinner, 
+  EuiButton 
+} from "@elastic/eui";
+import React from "react";
+
+export function GenerateReportLoadingModal(props: { setShowLoading: any; }) {
+  const {
+    setShowLoading
+  } = props;
+  
+  const closeModal = () => {
+    setShowLoading(false);
+  };
+
+  return (
+    <div>
+      <EuiOverlayMask>
+        <EuiModal
+          onClose={closeModal}
+          style={{ maxWidth: 350, minWidth: 300 }}
+          id="downloadInProgressLoadingModal"
+        >
+          <EuiModalHeader>
+            <EuiTitle>
+              <EuiText textAlign="right">
+                <h2>Generating report</h2>
+              </EuiText>
+            </EuiTitle>
+          </EuiModalHeader>
+          <EuiModalBody>
+            <EuiText>Preparing your file for download.</EuiText>
+            <EuiText>You can close this dialog while we continue in the background.</EuiText>
+            <EuiSpacer />
+            <EuiFlexGroup justifyContent="center" alignItems="center">
+              <EuiFlexItem grow={false}>
+                <EuiLoadingSpinner size="xl" style={{ minWidth: 75, minHeight: 75 }} />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="l" />
+            <EuiFlexGroup alignItems="flexEnd" justifyContent="flexEnd">
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  data-test-subj="reporting-loading-modal-close-button"
+                  onClick={closeModal}
+                >
+                  Close
+                </EuiButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiModalBody>
+        </EuiModal>
+      </EuiOverlayMask>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/public/components/notebooks/components/helpers/default_parser.tsx b/public/components/notebooks/components/helpers/default_parser.tsx
new file mode 100644
index 0000000000..c38dad3cd5
--- /dev/null
+++ b/public/components/notebooks/components/helpers/default_parser.tsx
@@ -0,0 +1,119 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ParaType } from '../../../../../common/types/notebooks';
+
+// Get the type of output and result in a default notebook paragraph
+// Param: Default Backend Paragraph
+const parseOutput = (paraObject: any) => {
+  try {
+    let outputType = [];
+    let result = [];
+    paraObject.output.map((output: { outputType: string; result: string }) => {
+      outputType.push(output.outputType);
+      result.push(output.result);
+    });
+    return {
+      outputType: outputType,
+      outputData: result,
+    };
+  } catch (error) {
+    return {
+      outputType: [],
+      outputData: [],
+    };
+  }
+};
+
+// Get the coding language by type of paragraph
+// Param: Default Backend Paragraph
+const parseInputType = (paraObject: any) => {
+  try {
+    if (paraObject.input.inputType === 'MARKDOWN') {
+      return 'md';
+    } else {
+      return '';
+    }
+  } catch (error) {
+    throw new Error('Parsing Input Issue ' + error);
+  }
+};
+
+// Get the visualization by type of paragraph
+// Param: Default Backend Paragraph
+const parseVisualization = (paraObject: any) => {
+  try {
+    if (paraObject.input.inputType.includes('VISUALIZATION')) {
+      let vizContent = paraObject.input.inputText;
+      const startDate = new Date();
+      startDate.setDate(startDate.getDate() - 30);
+      let visStartTime = startDate.toISOString();
+      let visEndTime = new Date().toISOString();
+      let visSavedObjId = '';
+      if (vizContent !== '') {
+        const { panels, timeRange } = JSON.parse(vizContent);
+        visStartTime = timeRange.from;
+        visEndTime = timeRange.to;
+        visSavedObjId = panels['1'].explicitInput.savedObjectId;
+      }
+      return {
+        isViz: true,
+        VizObject: vizContent,
+        visStartTime,
+        visEndTime,
+        visSavedObjId,
+      };
+    } else {
+      return {
+        isViz: false,
+        VizObject: '',
+      };
+    }
+  } catch (error) {
+    throw new Error('Parsing Input Issue ' + error);
+  }
+};
+
+// Placeholder for default parser
+// Param: Default Backend Paragraph
+export const defaultParagraphParser = (defaultBackendParagraphs: any) => {
+  let parsedPara: Array<ParaType> = [];
+  try {
+    defaultBackendParagraphs.map((paraObject: any, index: number) => {
+      const codeLanguage = parseInputType(paraObject);
+      const vizParams = parseVisualization(paraObject);
+      const message = parseOutput(paraObject);
+
+      let tempPara: ParaType = {
+        uniqueId: paraObject.id,
+        isRunning: false,
+        inQueue: false,
+        isSelected: false,
+        isInputHidden: false,
+        isOutputHidden: false,
+        showAddPara: false,
+        isVizualisation: vizParams.isViz,
+        vizObjectInput: vizParams.VizObject,
+        id: index + 1,
+        inp: paraObject.input.inputText || '',
+        lang: 'text/x-' + codeLanguage,
+        editorLanguage: codeLanguage,
+        typeOut: message.outputType,
+        out: message.outputData,
+        isInputExpanded: false,
+        isOutputStale: false,
+        paraRef: undefined,
+        paraDivRef: undefined,
+        visStartTime: vizParams.visStartTime,
+        visEndTime: vizParams.visEndTime,
+        visSavedObjId: vizParams.visSavedObjId,
+      };
+      parsedPara.push(tempPara);
+    });
+    return parsedPara;
+  } catch (error) {
+    throw new Error('Parsing Paragraph Issue ' + error);
+  }
+};
diff --git a/public/components/notebooks/components/helpers/download_json.tsx b/public/components/notebooks/components/helpers/download_json.tsx
new file mode 100644
index 0000000000..53128ac354
--- /dev/null
+++ b/public/components/notebooks/components/helpers/download_json.tsx
@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Helper function to create download object
+export function onDownload(content: any, fileName: string) {
+  let dataUri =
+    'data:application/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(content));
+  let downloadElement = document.createElement('a');
+  downloadElement.setAttribute('href', dataUri);
+  downloadElement.setAttribute('download', fileName);
+  downloadElement.click();
+}
diff --git a/public/components/notebooks/components/helpers/legacy_route_helpers.ts b/public/components/notebooks/components/helpers/legacy_route_helpers.ts
new file mode 100644
index 0000000000..8bda04cc59
--- /dev/null
+++ b/public/components/notebooks/components/helpers/legacy_route_helpers.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { observabilityID } from "../../../../../common/constants/shared";
+
+export const convertLegacyNotebooksUrl = (location: Location)=> {
+  const pathname = location.pathname.replace('notebooks-dashboards', observabilityID);
+  const hash = `#/notebooks${location.hash.replace(/^#/, '')}${
+    location.hash.includes('?') ? location.search.replace(/^\?/, '&') : location.search
+  }`;
+  return pathname + hash;
+};
diff --git a/public/components/notebooks/components/helpers/modal_containers.tsx b/public/components/notebooks/components/helpers/modal_containers.tsx
new file mode 100644
index 0000000000..53448012d8
--- /dev/null
+++ b/public/components/notebooks/components/helpers/modal_containers.tsx
@@ -0,0 +1,183 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiOverlayMask,
+  EuiConfirmModal,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFieldText,
+  EuiForm,
+  EuiFormRow,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiText,
+  EuiSpacer
+} from '@elastic/eui';
+import { CustomInputModal } from './custom_modals/custom_input_modal';
+
+/* The file contains helper functions for modal layouts
+ * getCustomModal - returns modal with input field
+ * getCloneModal - returns a confirm-modal with clone option
+ * getDeleteModal - returns a confirm-modal with delete option
+ */
+
+export const getCustomModal = (
+  runModal: (value: string) => void,
+  closeModal: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void,
+  labelTxt: string,
+  titletxt: string,
+  btn1txt: string,
+  btn2txt: string,
+  openNoteName?: string,
+  helpText?: string,
+) => {
+  return (
+    <CustomInputModal
+      runModal={runModal}
+      closeModal={closeModal}
+      labelTxt={labelTxt}
+      titletxt={titletxt}
+      btn1txt={btn1txt}
+      btn2txt={btn2txt}
+      openNoteName={openNoteName}
+      helpText={helpText}
+    />
+  );
+};
+
+export const getCloneModal = (
+  onCancel: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void,
+  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+) => {
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title="Clone Notebook"
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelButtonText="Cancel"
+        confirmButtonText="Yes"
+        defaultFocusedButton="confirm"
+      >
+        <p>Do you want to clone this notebook?</p>
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};
+
+export const getSampleNotebooksModal = (
+  onCancel: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void,
+  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+) => {
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title="Add sample notebooks"
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelButtonText="Cancel"
+        confirmButtonText="Yes"
+        defaultFocusedButton="confirm"
+      >
+        <p>Do you want to add sample notebooks? This will also add Dashboards sample flights and logs data if they have not been added.</p>
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};
+
+export const getDeleteModal = (
+  onCancel: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void,
+  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
+  title: string,
+  message: string,
+  confirmMessage?: string,
+) => {
+  return (
+    <EuiOverlayMask>
+      <EuiConfirmModal
+        title={title}
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        cancelButtonText="Cancel"
+        confirmButtonText={confirmMessage || "Delete"}
+        buttonColor="danger"
+        defaultFocusedButton="confirm"
+      >
+        {message}
+      </EuiConfirmModal>
+    </EuiOverlayMask>
+  );
+};
+
+export const DeleteNotebookModal = ({
+  onCancel,
+  onConfirm,
+  title,
+  message,
+}: {
+  onCancel: (
+    event?: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void;
+  onConfirm: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  title: string;
+  message: string;
+}) => {
+  const [value, setValue] = useState('');
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+  return (
+    <EuiOverlayMask>
+      <EuiModal onClose={onCancel} initialFocus="[name=input]">
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <EuiText>{message}</EuiText>
+          <EuiText>The action cannot be undone.</EuiText>
+          <EuiSpacer />
+          <EuiForm>
+            <EuiFormRow label={'To confirm deletion, enter "delete" in the text field'}>
+              <EuiFieldText
+                data-test-subj="delete-notebook-modal-input"
+                name="input"
+                placeholder="delete"
+                value={value}
+                onChange={(e) => onChange(e)}
+              />
+            </EuiFormRow>
+          </EuiForm>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButtonEmpty onClick={onCancel}>Cancel</EuiButtonEmpty>
+          <EuiButton
+            data-test-subj="delete-notebook-modal-delete-button"
+            onClick={() => onConfirm()}
+            color="danger"
+            fill
+            disabled={value !== 'delete'}
+          >
+            Delete
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    </EuiOverlayMask>
+  );
+};
diff --git a/public/components/notebooks/components/helpers/reporting_context_menu_helper.tsx b/public/components/notebooks/components/helpers/reporting_context_menu_helper.tsx
new file mode 100644
index 0000000000..a174da65b8
--- /dev/null
+++ b/public/components/notebooks/components/helpers/reporting_context_menu_helper.tsx
@@ -0,0 +1,236 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { parse } from "url";
+
+const getReportSourceURL = (baseURI: string) => {
+  return baseURI.substr(baseURI.lastIndexOf('/') + 1, baseURI.length);
+}
+
+export const readDataReportToFile = async (
+  stream: string,
+  fileFormat: string,
+  fileName: string
+) => {
+  const blob = new Blob([stream]);
+  const url = URL.createObjectURL(blob);
+  let link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const getFileFormatPrefix = (fileFormat: string) => {
+  var fileFormatPrefix = 'data:' + fileFormat + ';base64,';
+  return fileFormatPrefix;
+};
+
+const readStreamToFile = async (
+  stream: string,
+  fileFormat: string,
+  fileName: string
+) => {
+  let link = document.createElement('a');
+  if (fileName.includes('csv')) {
+    readDataReportToFile(stream, fileFormat, fileName);
+    return;
+  }
+  let fileFormatPrefix = getFileFormatPrefix(fileFormat);
+  let url = fileFormatPrefix + stream;
+  if (typeof link.download !== 'string') {
+    window.open(url, '_blank');
+    return;
+  }
+  link.download = fileName;
+  link.href = url;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+async function getTenantInfoIfExists() {
+  const res = await fetch(`../api/v1/multitenancy/tenant`, {
+    headers: {
+      'Content-Type': 'application/json',
+      'osd-xsrf': 'true',
+      accept: '*/*',
+      'accept-language': 'en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7,zh-TW;q=0.6',
+      pragma: 'no-cache',
+      'sec-fetch-dest': 'empty',
+      'sec-fetch-mode': 'cors',
+      'sec-fetch-site': 'same-origin',
+    },
+    method: 'GET',
+    referrerPolicy: 'strict-origin-when-cross-origin',
+    mode: 'cors',
+    credentials: 'include',
+  })
+    .then((response) => {
+      if (response.status === 404) {
+        // endpoint doesn't exist, security plugin is not enabled.
+        return undefined;
+      } else {
+        return response.text();
+      }
+    })
+    .then((tenant) => {
+      if (tenant === '') {
+        tenant = 'global';
+      } else if (tenant === '__user__') {
+        tenant = 'private';
+      }
+      return tenant;
+    });
+
+  return res;
+}
+
+function addTenantToURL(url, userRequestedTenant) {
+  // build fake url from relative url
+  const fakeUrl = `http://opensearch.com${url}`;
+  const tenantKey = 'security_tenant';
+  const tenantKeyAndValue =
+    tenantKey + '=' + encodeURIComponent(userRequestedTenant);
+
+  const { pathname, search } = parse(fakeUrl);
+  const queryDelimiter = !search ? '?' : '&';
+  // The url parser returns null if the search is empty. Change that to an empty
+  // string so that we can use it to build the values later
+  if (search && search.toLowerCase().indexOf(tenantKey) > -1) {
+    // If we for some reason already have a tenant in the URL we skip any updates
+    return url;
+  }
+
+  // A helper for finding the part in the string that we want to extend/replace
+  const valueToReplace = pathname + (search || '');
+  const replaceWith = valueToReplace + queryDelimiter + tenantKeyAndValue;
+
+  return url.replace(valueToReplace, replaceWith);
+}
+
+export const generateInContextReport = async (
+  fileFormat: string,
+  props: any,
+  toggleReportingLoadingModal: any,
+  rest = {}
+) => {
+  toggleReportingLoadingModal(true);
+  let baseUrl =
+    location.pathname +
+    location.hash.replace(/\?view=(view_both|input_only|output_only)/, '') +
+    '?view=output_only';
+  // Add selected tenant info to url
+  try {
+    const tenant = await getTenantInfoIfExists();
+    if (tenant) {
+      baseUrl = addTenantToURL(baseUrl, tenant) 
+    }
+  } catch (error) {
+    props.setToast(
+      'Tenant error',
+      'danger',
+      'Failed to get user tenant.'
+    );
+    console.log(`failed to get user tenant: ${error}`);
+  }
+
+  const reportSource = 'Notebook';
+  const contextMenuOnDemandReport = {
+    query_url: baseUrl,
+    time_from: 0, // no time range for notebook reports
+    time_to: 0,
+    report_definition: {
+      report_params: {
+        report_name: 'In-context ' + document.getElementById('notebookTitle')?.innerText,
+        report_source: reportSource,
+        description: 'In-context report download',
+        core_params: {
+          base_url: baseUrl,
+          report_format: fileFormat,
+          time_duration: 'PT30M', // time duration can be hard-coded 
+          ...rest,
+        },
+      },
+      delivery: {
+        configIds: [],
+        title: '',
+        textDescription: '',
+        htmlDescription: '',
+      },
+      trigger: {
+        trigger_type: 'On demand',
+      },
+    },
+  };
+  fetch(
+    '../api/reporting/generateReport',
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        'osd-xsrf': 'true',
+        accept: '*/*',
+        'accept-language': 'en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7,zh-TW;q=0.6',
+        pragma: 'no-cache',
+        'sec-fetch-dest': 'empty',
+        'sec-fetch-mode': 'cors',
+        'sec-fetch-site': 'same-origin',
+      },
+      method: 'POST',
+      body: JSON.stringify(contextMenuOnDemandReport),
+      referrerPolicy: 'strict-origin-when-cross-origin',
+      mode: 'cors',
+      credentials: 'include',
+    }
+  )
+  .then((response) => {
+    toggleReportingLoadingModal(false);
+    if (response.status === 200) {
+      // success toast
+      props.setToast('Successfully generated report.', 'success');
+    } else {
+      if (response.status === 403) {
+        // permissions failure toast
+        props.setToast(
+          'Error generating report,',
+          'danger',
+          'Insufficient permissions. Reach out to your OpenSearch Dashboards administrator.'
+        );
+      } else if (response.status === 503) {
+        // timeout failure
+        props.setToast(
+          'Error generating report.',
+          'danger',
+          'Timed out generating on-demand report from notebook. Try again later.'
+        );
+      } else {
+        // generic failure
+        props.setToast(
+          'Download error',
+          'danger',
+          'There was an error generating this report.'
+        );
+      }
+    }
+    return response.json();
+  })
+  .then(async (data) => {
+    await readStreamToFile(data.data, fileFormat, data.filename);
+  })
+}
+
+export const contextMenuCreateReportDefinition = (baseURI: string) => {
+  const reportSourceId = getReportSourceURL(baseURI);
+  let reportSource = 'notebook:';
+
+  reportSource += reportSourceId.toString();
+  window.location.assign(
+    `reports-dashboards#/create?previous=${reportSource}?timeFrom=0?timeTo=0`
+  );
+};
+
+export const contextMenuViewReports = () =>
+  window.location.assign('reports-dashboards#/');
diff --git a/public/components/notebooks/components/helpers/zeppelin_parser.tsx b/public/components/notebooks/components/helpers/zeppelin_parser.tsx
new file mode 100644
index 0000000000..f2293c3a72
--- /dev/null
+++ b/public/components/notebooks/components/helpers/zeppelin_parser.tsx
@@ -0,0 +1,149 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* This file contains parsing functions
+ * These functions have to be changed based on backend configuration
+ * If backend changes the incoming paragraph structures may change, so parsing adapts to it
+ */
+
+import { ParaType } from '../../../common';
+
+const visualizationPrefix = '%sh #vizobject:';
+const observabilityVisualizationPrefix = '%sh #observabilityviz:';
+
+const langSupport = {
+  '%sh': 'shell',
+  '%md': 'md',
+  '%python': 'python',
+  '%opensearchsql': 'sql',
+  '%elasticsearch': 'json',
+};
+
+// Get the coding language from a Zeppelin paragraph input
+// Param: textHeader-> header on a Zeppelin paragraph example "%md"
+const parseCodeLanguage = (textHeader: string) => {
+  const codeLanguage = langSupport[textHeader];
+  return codeLanguage || '';
+};
+
+// Get the type of output message from a Zeppelin paragraph
+// Param: Zeppelin Paragraph
+const parseMessage = (paraObject: any) => {
+  try {
+    let mtype = [];
+    let mdata = [];
+    paraObject.results.msg.map((msg: { type: string; data: string }) => {
+      mtype.push(msg.type);
+      mdata.push(msg.data);
+    });
+    return {
+      outputType: mtype,
+      outputData: mdata,
+    };
+  } catch (error) {
+    return {
+      outputType: [],
+      outputData: [],
+    };
+  }
+};
+
+// Get the type of output message from a Zeppelin paragraph
+// Param: Zeppelin Paragraph
+const parseText = (paraObject: any) => {
+  if ('text' in paraObject) {
+    return paraObject.text;
+  } else {
+    throw new Error('Input text parse issue');
+  }
+};
+
+// Get the visualization from a Zeppelin Paragraph input
+// All Visualizations in Zeppelin are stored as shell comment -> "%sh #vizobject:"
+// TODO: This is a workaround need to look for better solutions
+// Param: Zeppelin Paragraph
+const parseVisualization = (paraObject: any) => {
+  let vizContent = '';
+  if (
+    paraObject.hasOwnProperty('text') &&
+    paraObject.text.substring(0, 15) === visualizationPrefix
+  ) {
+    if (paraObject.title !== 'VISUALIZATION') {
+      throw new Error('Visualization parse issue');
+    }
+    vizContent = paraObject.text.substring(15);
+    return {
+      isViz: true,
+      VizObject: vizContent,
+    };
+  }
+
+  if (
+    paraObject.hasOwnProperty('text') &&
+    paraObject.text.substring(0, 22) === observabilityVisualizationPrefix
+  ) {
+    if (paraObject.title !== 'OBSERVABILITY_VISUALIZATION') {
+      throw new Error('Visualization parse issue');
+    }
+    vizContent = paraObject.text.substring(22);
+    return {
+      isViz: true,
+      VizObject: vizContent,
+    };
+  }
+
+  return {
+    isViz: false,
+    VizObject: vizContent,
+  };
+};
+
+// This parser is used to get paragraph id
+// Param: Zeppelin Paragraph
+const parseId = (paraObject: any) => {
+  if ('id' in paraObject) {
+    return paraObject.id;
+  } else {
+    throw new Error('Id not found in paragraph');
+  }
+};
+
+// This parser helps to convert Zeppelin paragraphs to a common ParaType format
+// This parsing makes any backend notebook compatible with notebooks plugin
+export const zeppelinParagraphParser = (zeppelinBackendParagraphs: any) => {
+  let parsedPara: Array<ParaType> = [];
+  try {
+    zeppelinBackendParagraphs.map((paraObject: ParaType, index: number) => {
+      const paragraphId = parseId(paraObject);
+      const vizParams = parseVisualization(paraObject);
+      const inputParam = parseText(paraObject);
+      const codeLanguage = parseCodeLanguage(inputParam.split('\n')[0].split('.')[0]);
+      const message = parseMessage(paraObject);
+
+      let tempPara = {
+        uniqueId: paragraphId,
+        isRunning: false,
+        inQueue: false,
+        ishovered: false,
+        isSelected: false,
+        isInputHidden: false,
+        isOutputHidden: false,
+        showAddPara: false,
+        isVizualisation: vizParams.isViz,
+        vizObjectInput: vizParams.VizObject,
+        id: index + 1,
+        inp: inputParam,
+        lang: 'text/x-' + codeLanguage,
+        editorLanguage: codeLanguage,
+        typeOut: message.outputType,
+        out: message.outputData,
+      };
+      parsedPara.push(tempPara);
+    });
+    return parsedPara;
+  } catch (error) {
+    throw new Error('Parsing Paragraph Issue ' + error);
+  }
+};
diff --git a/public/components/notebooks/components/main.tsx b/public/components/notebooks/components/main.tsx
new file mode 100644
index 0000000000..9ba18c8e7b
--- /dev/null
+++ b/public/components/notebooks/components/main.tsx
@@ -0,0 +1,354 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable no-console */
+
+import { EuiGlobalToastList, EuiLink } from '@elastic/eui';
+import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
+import React, { ReactChild } from 'react';
+// eslint-disable-next-line @osd/eslint/module_migration
+import { Route, Switch } from 'react-router';
+import { HashRouter, RouteComponentProps } from 'react-router-dom';
+import PPLService from '../../../services/requests/ppl';
+import { ChromeBreadcrumb, CoreStart } from '../../../../../../src/core/public';
+import { DashboardStart } from '../../../../../../src/plugins/dashboard/public';
+import {
+  NOTEBOOKS_API_PREFIX,
+  NOTEBOOKS_DOCUMENTATION_URL,
+} from '../../../../common/constants/notebooks';
+import { ObservabilitySideBar } from '../../common/side_nav';
+import { Notebook } from './notebook';
+import { NoteTable } from './note_table';
+
+/*
+ * "Main" component renders the whole Notebooks as a single page application
+ *
+ * Props taken in as params are:
+ * DashboardContainerByValueRenderer: Dashboard container renderer for visualization
+ * http object: for making API requests
+ *
+ * Cell component of nteract used as a container for paragraphs in notebook UI.
+ * https://components.nteract.io/#cell
+ */
+
+type MainProps = RouteComponentProps & {
+  DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
+  http: CoreStart['http'];
+  pplService: PPLService;
+  notifications: CoreStart['notifications'];
+  parentBreadcrumb: ChromeBreadcrumb;
+  setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
+};
+
+interface MainState {
+  data: NotebookType[];
+  openedNotebook: NotebookType | undefined;
+  toasts: Toast[];
+  loading: boolean;
+}
+
+export interface NotebookType {
+  path: string;
+  id: string;
+  dateCreated: string;
+  dateModified: string;
+}
+
+export class Main extends React.Component<MainProps, MainState> {
+  constructor(props: Readonly<MainProps>) {
+    super(props);
+    this.state = {
+      data: [],
+      openedNotebook: undefined,
+      toasts: [],
+      loading: false,
+    };
+  }
+
+  setToast = (title: string, color = 'success', text?: ReactChild) => {
+    if (!text) text = '';
+    this.setState((prevState) => ({
+      toasts: [
+        ...prevState.toasts,
+        {
+          id: new Date().toISOString(),
+          title,
+          text,
+          color,
+        } as Toast,
+      ],
+    }));
+  };
+
+  // Fetches path and id for all stored notebooks
+  fetchNotebooks = () => {
+    return this.props.http
+      .get(`${NOTEBOOKS_API_PREFIX}/`)
+      .then((res) => this.setState(res))
+      .catch((err) => {
+        console.error('Issue in fetching the notebooks', err.body.message);
+      });
+  };
+
+  // Creates a new notebook
+  createNotebook = (newNoteName: string) => {
+    if (newNoteName.length >= 50 || newNoteName.length === 0) {
+      this.setToast('Invalid notebook name', 'danger');
+      return;
+    }
+    const newNoteObject = {
+      name: newNoteName,
+    };
+
+    return this.props.http
+      .post(`${NOTEBOOKS_API_PREFIX}/note`, {
+        body: JSON.stringify(newNoteObject),
+      })
+      .then(async (res) => {
+        this.setToast(`Notebook "${newNoteName}" successfully created!`);
+        window.location.assign(`#/notebooks/${res}`);
+      })
+      .catch((err) => {
+        this.setToast(
+          'Please ask your administrator to enable Notebooks for you.',
+          'danger',
+          <EuiLink href={NOTEBOOKS_DOCUMENTATION_URL} target="_blank">
+            Documentation
+          </EuiLink>
+        );
+        console.error(err);
+      });
+  };
+
+  // Renames an existing notebook
+  renameNotebook = (editedNoteName: string, editedNoteID: string) => {
+    if (editedNoteName.length >= 50 || editedNoteName.length === 0) {
+      this.setToast('Invalid notebook name', 'danger');
+      return;
+    }
+    const renameNoteObject = {
+      name: editedNoteName,
+      noteId: editedNoteID,
+    };
+
+    return this.props.http
+      .put(`${NOTEBOOKS_API_PREFIX}/note/rename`, {
+        body: JSON.stringify(renameNoteObject),
+      })
+      .then((res) => {
+        this.setState((prevState) => {
+          const newData = [...prevState.data];
+          const renamedNotebook = newData.find((notebook) => notebook.id === editedNoteID);
+          if (renamedNotebook) renamedNotebook.path = editedNoteName;
+          return { data: newData };
+        });
+        this.setToast(`Notebook successfully renamed into "${editedNoteName}"`);
+      })
+      .catch((err) => {
+        this.setToast(
+          'Error renaming notebook, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  // Clones an existing notebook, return new notebook's id
+  cloneNotebook = (clonedNoteName: string, clonedNoteID: string): Promise<string> => {
+    if (clonedNoteName.length >= 50 || clonedNoteName.length === 0) {
+      this.setToast('Invalid notebook name', 'danger');
+      return Promise.reject();
+    }
+    const cloneNoteObject = {
+      name: clonedNoteName,
+      noteId: clonedNoteID,
+    };
+
+    return this.props.http
+      .post(`${NOTEBOOKS_API_PREFIX}/note/clone`, {
+        body: JSON.stringify(cloneNoteObject),
+      })
+      .then((res) => {
+        this.setState((prevState) => ({
+          data: [
+            ...prevState.data,
+            {
+              path: clonedNoteName,
+              id: res.body.id,
+              dateCreated: res.body.dateCreated,
+              dateModified: res.body.dateModified,
+            },
+          ],
+        }));
+        this.setToast(`Notebook "${clonedNoteName}" successfully created!`);
+        return res.body.id;
+      })
+      .catch((err) => {
+        this.setToast(
+          'Error cloning notebook, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  // Deletes existing notebooks
+  deleteNotebook = (notebookList: string[], toastMessage?: string) => {
+    return this.props.http
+      .delete(`${NOTEBOOKS_API_PREFIX}/note/${notebookList.join(',')}`)
+      .then((res) => {
+        this.setState((prevState) => ({
+          data: prevState.data.filter((notebook) => !notebookList.includes(notebook.id)),
+        }));
+        const message =
+          toastMessage || `Notebook${notebookList.length > 1 ? 's' : ''} successfully deleted!`;
+        this.setToast(message);
+        return res;
+      })
+      .catch((err) => {
+        this.setToast(
+          'Error deleting notebook, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  addSampleNotebooks = async () => {
+    try {
+      this.setState({ loading: true });
+      const flights = await this.props.http
+        .get('../api/saved_objects/_find', {
+          query: {
+            type: 'index-pattern',
+            search_fields: 'title',
+            search: 'opensearch_dashboards_sample_data_flights',
+          },
+        })
+        .then((resp) => resp.total === 0);
+      const logs = await this.props.http
+        .get('../api/saved_objects/_find', {
+          query: {
+            type: 'index-pattern',
+            search_fields: 'title',
+            search: 'opensearch_dashboards_sample_data_logs',
+          },
+        })
+        .then((resp) => resp.total === 0);
+      if (flights || logs) this.setToast('Adding sample data. This can take some time.');
+      await Promise.all([
+        flights ? this.props.http.post('../api/sample_data/flights') : Promise.resolve(),
+        logs ? this.props.http.post('../api/sample_data/logs') : Promise.resolve(),
+      ]);
+      const visIds: string[] = [];
+      await this.props.http
+        .get('../api/saved_objects/_find', {
+          query: {
+            type: 'visualization',
+            search_fields: 'title',
+            search: '[Logs] Response Codes Over Time + Annotations',
+          },
+        })
+        .then((resp) => visIds.push(resp.saved_objects[0].id));
+      await this.props.http
+        .get('../api/saved_objects/_find', {
+          query: {
+            type: 'visualization',
+            search_fields: 'title',
+            search: '[Logs] Unique Visitors vs. Average Bytes',
+          },
+        })
+        .then((resp) => visIds.push(resp.saved_objects[0].id));
+      await this.props.http
+        .get('../api/saved_objects/_find', {
+          query: {
+            type: 'visualization',
+            search_fields: 'title',
+            search: '[Flights] Flight Count and Average Ticket Price',
+          },
+        })
+        .then((resp) => visIds.push(resp.saved_objects[0].id));
+      await this.props.http
+        .post(`${NOTEBOOKS_API_PREFIX}/note/addSampleNotebooks`, {
+          body: JSON.stringify({ visIds }),
+        })
+        .then((res) => {
+          const newData = res.body.map((notebook: any) => ({
+            path: notebook.name,
+            id: notebook.id,
+            dateCreated: notebook.dateCreated,
+            dateModified: notebook.dateModified,
+          }));
+          this.setState((prevState) => ({
+            data: [...prevState.data, ...newData],
+          }));
+        });
+      this.setToast(`Sample notebooks successfully added.`);
+    } catch (err: any) {
+      this.setToast('Error adding sample notebooks.', 'danger');
+      console.error(err.body.message);
+    } finally {
+      this.setState({ loading: false });
+    }
+  };
+
+  render() {
+    return (
+      <HashRouter>
+        <>
+          <EuiGlobalToastList
+            toasts={this.state.toasts}
+            dismissToast={(removedToast) => {
+              this.setState({
+                toasts: this.state.toasts.filter((toast) => toast.id !== removedToast.id),
+              });
+            }}
+            toastLifeTimeMs={6000}
+          />
+          <Switch>
+            <Route
+              path="/notebooks/:id"
+              render={(props) => (
+                <Notebook
+                  pplService={this.props.pplService}
+                  openedNoteId={props.match.params.id}
+                  DashboardContainerByValueRenderer={this.props.DashboardContainerByValueRenderer}
+                  http={this.props.http}
+                  parentBreadcrumb={this.props.parentBreadcrumb}
+                  setBreadcrumbs={this.props.setBreadcrumbs}
+                  renameNotebook={this.renameNotebook}
+                  cloneNotebook={this.cloneNotebook}
+                  deleteNotebook={this.deleteNotebook}
+                  setToast={this.setToast}
+                  location={this.props.location}
+                  history={this.props.history}
+                />
+              )}
+            />
+            <Route
+              path="/notebooks"
+              render={(props) => (
+                <ObservabilitySideBar>
+                  <NoteTable
+                    loading={this.state.loading}
+                    fetchNotebooks={this.fetchNotebooks}
+                    addSampleNotebooks={this.addSampleNotebooks}
+                    notebooks={this.state.data}
+                    createNotebook={this.createNotebook}
+                    renameNotebook={this.renameNotebook}
+                    cloneNotebook={this.cloneNotebook}
+                    deleteNotebook={this.deleteNotebook}
+                    parentBreadcrumb={this.props.parentBreadcrumb}
+                    setBreadcrumbs={this.props.setBreadcrumbs}
+                    setToast={this.setToast}
+                  />
+                </ObservabilitySideBar>
+              )}
+            />
+          </Switch>
+        </>
+      </HashRouter>
+    );
+  }
+}
diff --git a/public/components/notebooks/components/note_table.tsx b/public/components/notebooks/components/note_table.tsx
new file mode 100644
index 0000000000..d7ba77625f
--- /dev/null
+++ b/public/components/notebooks/components/note_table.tsx
@@ -0,0 +1,393 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiPopover,
+  EuiSpacer,
+  EuiTableFieldDataColumnType,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import _ from 'lodash';
+import moment from 'moment';
+import React, { ReactElement, useEffect, useState } from 'react';
+import { ChromeBreadcrumb } from '../../../../../../src/core/public';
+import {
+  CREATE_NOTE_MESSAGE,
+  NOTEBOOKS_DOCUMENTATION_URL,
+} from '../../../../common/constants/notebooks';
+import { UI_DATE_FORMAT } from '../../../../common/constants/shared';
+import {
+  DeleteNotebookModal,
+  getCustomModal,
+  getSampleNotebooksModal,
+} from './helpers/modal_containers';
+import { NotebookType } from './main';
+import { pageStyles } from '../../../../common/constants/shared';
+
+interface NoteTableProps {
+  loading: boolean;
+  fetchNotebooks: () => void;
+  addSampleNotebooks: () => void;
+  notebooks: NotebookType[];
+  createNotebook: (newNoteName: string) => void;
+  renameNotebook: (newNoteName: string, noteId: string) => void;
+  cloneNotebook: (newNoteName: string, noteId: string) => void;
+  deleteNotebook: (noteList: string[], toastMessage?: string) => void;
+  parentBreadcrumb: ChromeBreadcrumb;
+  setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
+  setToast: (title: string, color?: string, text?: string) => void;
+}
+
+export function NoteTable(props: NoteTableProps) {
+  const [isModalVisible, setIsModalVisible] = useState(false); // Modal Toggle
+  const [modalLayout, setModalLayout] = useState(<EuiOverlayMask />); // Modal Layout
+  const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
+  const [selectedNotebooks, setSelectedNotebooks] = useState<NotebookType[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const { notebooks, createNotebook, renameNotebook, cloneNotebook, deleteNotebook } = props;
+
+  useEffect(() => {
+    props.setBreadcrumbs([
+      props.parentBreadcrumb,
+      {
+        text: 'Notebooks',
+        href: '#/notebooks',
+      },
+    ]);
+    props.fetchNotebooks();
+  }, []);
+
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+  const showModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const onCreate = async (newNoteName: string) => {
+    createNotebook(newNoteName);
+    closeModal();
+  };
+
+  const onRename = async (newNoteName: string) => {
+    renameNotebook(newNoteName, selectedNotebooks[0].id);
+    closeModal();
+  };
+
+  const onClone = async (newName: string) => {
+    cloneNotebook(newName, selectedNotebooks[0].id);
+    closeModal();
+  };
+
+  const onDelete = async () => {
+    const toastMessage = `Notebook${
+      selectedNotebooks.length > 1 ? 's' : ' "' + selectedNotebooks[0].path + '"'
+    } successfully deleted!`;
+    await deleteNotebook(
+      selectedNotebooks.map((note) => note.id),
+      toastMessage
+    );
+    closeModal();
+  };
+
+  const createNote = () => {
+    setModalLayout(
+      getCustomModal(
+        onCreate,
+        closeModal,
+        'Name',
+        'Create notebook',
+        'Cancel',
+        'Create',
+        undefined,
+        CREATE_NOTE_MESSAGE
+      )
+    );
+    showModal();
+  };
+
+  const renameNote = () => {
+    setModalLayout(
+      getCustomModal(
+        onRename,
+        closeModal,
+        'Name',
+        'Rename notebook',
+        'Cancel',
+        'Rename',
+        selectedNotebooks[0].path,
+        CREATE_NOTE_MESSAGE
+      )
+    );
+    showModal();
+  };
+
+  const cloneNote = () => {
+    setModalLayout(
+      getCustomModal(
+        onClone,
+        closeModal,
+        'Name',
+        'Duplicate notebook',
+        'Cancel',
+        'Duplicate',
+        selectedNotebooks[0].path + ' (copy)',
+        CREATE_NOTE_MESSAGE
+      )
+    );
+    showModal();
+  };
+
+  const deleteNote = () => {
+    const notebookString = `notebook${selectedNotebooks.length > 1 ? 's' : ''}`;
+    setModalLayout(
+      <DeleteNotebookModal
+        onConfirm={onDelete}
+        onCancel={closeModal}
+        title={`Delete ${selectedNotebooks.length} ${notebookString}`}
+        message={`Are you sure you want to delete the selected ${selectedNotebooks.length} ${notebookString}?`}
+      />
+    );
+    showModal();
+  };
+
+  const addSampleNotebooks = async () => {
+    setModalLayout(
+      getSampleNotebooksModal(closeModal, async () => {
+        closeModal();
+        await props.addSampleNotebooks();
+      })
+    );
+    showModal();
+  };
+
+  const popoverButton = (
+    <EuiButton
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={() => setIsActionsPopoverOpen(!isActionsPopoverOpen)}
+    >
+      Actions
+    </EuiButton>
+  );
+
+  const popoverItems: ReactElement[] = [
+    <EuiContextMenuItem
+      key="rename"
+      disabled={notebooks.length === 0 || selectedNotebooks.length !== 1}
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        renameNote();
+      }}
+    >
+      Rename
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="duplicate"
+      disabled={notebooks.length === 0 || selectedNotebooks.length !== 1}
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        cloneNote();
+      }}
+    >
+      Duplicate
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="delete"
+      disabled={notebooks.length === 0 || selectedNotebooks.length === 0}
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        deleteNote();
+      }}
+    >
+      Delete
+    </EuiContextMenuItem>,
+    <EuiContextMenuItem
+      key="addSample"
+      onClick={() => {
+        setIsActionsPopoverOpen(false);
+        addSampleNotebooks();
+      }}
+    >
+      Add samples
+    </EuiContextMenuItem>,
+  ];
+
+  const tableColumns = [
+    {
+      field: 'path',
+      name: 'Name',
+      sortable: true,
+      truncateText: true,
+      render: (value, record) => (
+        <EuiLink href={`#/notebooks/${record.id}`}>{_.truncate(value, { length: 100 })}</EuiLink>
+      ),
+    },
+    {
+      field: 'dateModified',
+      name: 'Last updated',
+      sortable: true,
+      render: (value) => moment(value).format(UI_DATE_FORMAT),
+    },
+    {
+      field: 'dateCreated',
+      name: 'Created',
+      sortable: true,
+      render: (value) => moment(value).format(UI_DATE_FORMAT),
+    },
+  ] as Array<
+    EuiTableFieldDataColumnType<{
+      path: string;
+      id: string;
+      dateCreated: string;
+      dateModified: string;
+    }>
+  >;
+
+  return (
+    <div style={pageStyles}>
+      <EuiPage>
+        <EuiPageBody component="div">
+          <EuiPageHeader>
+            <EuiPageHeaderSection>
+              <EuiTitle size="l">
+                <h1>Notebooks</h1>
+              </EuiTitle>
+            </EuiPageHeaderSection>
+          </EuiPageHeader>
+          <EuiPageContent id="notebookArea">
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="s">
+                  <h3>
+                    Notebooks<span className="panel-header-count"> ({notebooks.length})</span>
+                  </h3>
+                </EuiTitle>
+                <EuiSpacer size="s" />
+                <EuiText size="s" color="subdued">
+                  Use Notebooks to interactively and collaboratively develop rich reports backed by
+                  live data. Common use cases for notebooks includes creating postmortem reports,
+                  designing run books, building live infrastructure reports, or even documentation.{' '}
+                  <EuiLink external={true} href={NOTEBOOKS_DOCUMENTATION_URL} target="blank">
+                    Learn more
+                  </EuiLink>
+                </EuiText>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup gutterSize="s">
+                  <EuiFlexItem>
+                    <EuiPopover
+                      panelPaddingSize="none"
+                      button={popoverButton}
+                      isOpen={isActionsPopoverOpen}
+                      closePopover={() => setIsActionsPopoverOpen(false)}
+                    >
+                      <EuiContextMenuPanel items={popoverItems} />
+                    </EuiPopover>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiButton fill onClick={() => createNote()}>
+                      Create notebook
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+            <EuiHorizontalRule margin="m" />
+            {notebooks.length > 0 ? (
+              <>
+                <EuiFieldSearch
+                  fullWidth
+                  placeholder="Search notebook name"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+                <EuiHorizontalRule margin="m" />
+                <EuiInMemoryTable
+                  loading={props.loading}
+                  items={
+                    searchQuery
+                      ? notebooks.filter((notebook) =>
+                          notebook.path.toLowerCase().includes(searchQuery.toLowerCase())
+                        )
+                      : notebooks
+                  }
+                  itemId="id"
+                  columns={tableColumns}
+                  tableLayout="auto"
+                  pagination={{
+                    initialPageSize: 10,
+                    pageSizeOptions: [8, 10, 13],
+                  }}
+                  sorting={{
+                    sort: {
+                      field: 'dateModified',
+                      direction: 'desc',
+                    },
+                  }}
+                  allowNeutralSort={false}
+                  isSelectable={true}
+                  selection={{
+                    onSelectionChange: (items) => setSelectedNotebooks(items),
+                  }}
+                />
+              </>
+            ) : (
+              <>
+                <EuiSpacer size="xxl" />
+                <EuiText textAlign="center">
+                  <h2>No notebooks</h2>
+                  <EuiSpacer size="m" />
+                  <EuiText color="subdued">
+                    Use notebooks to create post-mortem reports, build live infrastructure
+                    <br />
+                    reports, or foster explorative collaborations with data.
+                  </EuiText>
+                </EuiText>
+                <EuiSpacer size="m" />
+                <EuiFlexGroup justifyContent="center">
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      data-test-subj="note-table-empty-state-create-notebook-button"
+                      fullWidth={false}
+                      onClick={() => createNote()}
+                    >
+                      Create notebook
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton fullWidth={false} onClick={() => addSampleNotebooks()}>
+                      Add samples
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+                <EuiSpacer size="xxl" />
+              </>
+            )}
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+      {isModalVisible && modalLayout}
+    </div>
+  );
+}
diff --git a/public/components/notebooks/components/notebook.tsx b/public/components/notebooks/components/notebook.tsx
new file mode 100644
index 0000000000..b97ab17234
--- /dev/null
+++ b/public/components/notebooks/components/notebook.tsx
@@ -0,0 +1,1113 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiButtonGroup,
+  EuiButtonGroupOption,
+  EuiCard,
+  EuiContextMenu,
+  EuiContextMenuPanelDescriptor,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiOverlayMask,
+  EuiPage,
+  EuiPageBody,
+  EuiPanel,
+  EuiPopover,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import CSS from 'csstype';
+import moment from 'moment';
+import PPLService from '../../../services/requests/ppl';
+import queryString from 'query-string';
+import React, { Component } from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+import { ChromeBreadcrumb, CoreStart } from '../../../../../../src/core/public';
+import { DashboardStart } from '../../../../../../src/plugins/dashboard/public';
+import {
+  CREATE_NOTE_MESSAGE,
+  NOTEBOOKS_API_PREFIX,
+  NOTEBOOKS_SELECTED_BACKEND,
+} from '../../../../common/constants/notebooks';
+import { UI_DATE_FORMAT } from '../../../../common/constants/shared';
+import { ParaType } from '../../../../common/types/notebooks';
+import { GenerateReportLoadingModal } from './helpers/custom_modals/reporting_loading_modal';
+import { defaultParagraphParser } from './helpers/default_parser';
+import { DeleteNotebookModal, getCustomModal, getDeleteModal } from './helpers/modal_containers';
+import {
+  contextMenuCreateReportDefinition,
+  contextMenuViewReports,
+  generateInContextReport,
+} from './helpers/reporting_context_menu_helper';
+import { zeppelinParagraphParser } from './helpers/zeppelin_parser';
+import { Paragraphs } from './paragraph_components/paragraphs';
+const panelStyles: CSS.Properties = {
+  float: 'left',
+  width: '100%',
+  maxWidth: '1130px',
+  marginTop: '20px',
+};
+
+const pageStyles: CSS.Properties = {
+  float: 'left',
+  width: '100%',
+  maxWidth: '1500px',
+};
+
+/*
+ * "Notebook" component is used to display an open notebook
+ *
+ * Props taken in as params are:
+ * DashboardContainerByValueRenderer - Dashboard container renderer for visualization
+ * http object - for making API requests
+ * setBreadcrumbs - sets breadcrumbs on top
+ */
+type NotebookProps = {
+  pplService: PPLService;
+  openedNoteId: string;
+  DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
+  http: CoreStart['http'];
+  parentBreadcrumb: ChromeBreadcrumb;
+  setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
+  renameNotebook: (newNoteName: string, noteId: string) => void;
+  cloneNotebook: (newNoteName: string, noteId: string) => Promise<string>;
+  deleteNotebook: (noteList: string[], toastMessage?: string) => void;
+  setToast: (title: string, color?: string, text?: string) => void;
+  location: RouteComponentProps['location'];
+  history: RouteComponentProps['history'];
+};
+
+type NotebookState = {
+  selectedViewId: string;
+  path: string;
+  dateCreated: string;
+  dateModified: string;
+  paragraphs: any; // notebook paragraphs fetched from API
+  parsedPara: Array<ParaType>; // paragraphs parsed to a common format
+  vizPrefix: string; // prefix for visualizations in Zeppelin Adaptor
+  isAddParaPopoverOpen: boolean;
+  isParaActionsPopoverOpen: boolean;
+  isNoteActionsPopoverOpen: boolean;
+  isReportingPluginInstalled: boolean;
+  isReportingActionsPopoverOpen: boolean;
+  isReportingLoadingModalOpen: boolean;
+  isModalVisible: boolean;
+  modalLayout: React.ReactNode;
+  showQueryParagraphError: boolean;
+  queryParagraphErrorMessage: string;
+};
+export class Notebook extends Component<NotebookProps, NotebookState> {
+  constructor(props: Readonly<NotebookProps>) {
+    super(props);
+    this.state = {
+      selectedViewId: 'view_both',
+      path: '',
+      dateCreated: '',
+      dateModified: '',
+      paragraphs: [],
+      parsedPara: [],
+      vizPrefix: '',
+      isAddParaPopoverOpen: false,
+      isParaActionsPopoverOpen: false,
+      isNoteActionsPopoverOpen: false,
+      isReportingPluginInstalled: false,
+      isReportingActionsPopoverOpen: false,
+      isReportingLoadingModalOpen: false,
+      isModalVisible: false,
+      modalLayout: <EuiOverlayMask></EuiOverlayMask>,
+      showQueryParagraphError: false,
+      queryParagraphErrorMessage: '',
+    };
+  }
+
+  toggleReportingLoadingModal = (show: boolean) => {
+    this.setState({ isReportingLoadingModalOpen: show });
+  };
+
+  parseAllParagraphs = () => {
+    let parsedPara = this.parseParagraphs(this.state.paragraphs);
+    this.setState({ parsedPara });
+  };
+
+  // parse paragraphs based on backend
+  parseParagraphs = (paragraphs: any[]): ParaType[] => {
+    try {
+      let parsedPara;
+      // @ts-ignore
+      if (NOTEBOOKS_SELECTED_BACKEND === 'ZEPPELIN') {
+        parsedPara = zeppelinParagraphParser(paragraphs);
+        this.setState({ vizPrefix: '%sh #vizobject:' });
+      } else {
+        parsedPara = defaultParagraphParser(paragraphs);
+      }
+      parsedPara.forEach((para: ParaType) => {
+        para.isInputExpanded = this.state.selectedViewId === 'input_only';
+        para.paraRef = React.createRef();
+        para.paraDivRef = React.createRef<HTMLDivElement>();
+      });
+      return parsedPara;
+    } catch (err) {
+      this.props.setToast(
+        'Error parsing paragraphs, please make sure you have the correct permission.',
+        'danger'
+      );
+      console.error(err);
+      this.setState({ parsedPara: [] });
+      return [];
+    }
+  };
+
+  // Assigns Loading, Running & inQueue for paragraphs in current notebook
+  showParagraphRunning = (param: number | string) => {
+    let parsedPara = this.state.parsedPara;
+    this.state.parsedPara.map((_: ParaType, index: number) => {
+      if (param === 'queue') {
+        parsedPara[index].inQueue = true;
+        parsedPara[index].isOutputHidden = true;
+      } else if (param === 'loading') {
+        parsedPara[index].isRunning = true;
+        parsedPara[index].isOutputHidden = true;
+      } else if (param === index) {
+        parsedPara[index].isRunning = true;
+        parsedPara[index].isOutputHidden = true;
+      }
+    });
+    this.setState({ parsedPara });
+  };
+
+  // Sets a paragraph to selected and deselects all others
+  paragraphSelector = (index: number) => {
+    let parsedPara = this.state.parsedPara;
+    this.state.parsedPara.map((_: ParaType, idx: number) => {
+      if (index === idx) parsedPara[idx].isSelected = true;
+      else parsedPara[idx].isSelected = false;
+    });
+    this.setState({ parsedPara });
+  };
+
+  // Function for delete a Notebook button
+  deleteParagraphButton = (para: ParaType, index: number) => {
+    if (index !== -1) {
+      return this.props.http
+        .delete(`${NOTEBOOKS_API_PREFIX}/paragraph`, {
+          query: {
+            noteId: this.props.openedNoteId,
+            paragraphId: para.uniqueId,
+          },
+        })
+        .then((res) => {
+          const paragraphs = [...this.state.paragraphs];
+          paragraphs.splice(index, 1);
+          const parsedPara = [...this.state.parsedPara];
+          parsedPara.splice(index, 1);
+          this.setState({ paragraphs, parsedPara });
+        })
+        .catch((err) => {
+          this.props.setToast(
+            'Error deleting paragraph, please make sure you have the correct permission.',
+            'danger'
+          );
+          console.error(err.body.message);
+        });
+    }
+  };
+
+  showDeleteParaModal = (para: ParaType, index: number) => {
+    this.setState({
+      modalLayout: getDeleteModal(
+        () => this.setState({ isModalVisible: false }),
+        () => {
+          this.deleteParagraphButton(para, index);
+          this.setState({ isModalVisible: false });
+        },
+        'Delete paragraph',
+        'Are you sure you want to delete the paragraph? The action cannot be undone.'
+      ),
+    });
+    this.setState({ isModalVisible: true });
+  };
+
+  showDeleteAllParaModal = () => {
+    this.setState({
+      modalLayout: getDeleteModal(
+        () => this.setState({ isModalVisible: false }),
+        async () => {
+          this.setState({ isModalVisible: false });
+          await this.props.http
+            .delete(`${NOTEBOOKS_API_PREFIX}/paragraph`, {
+              query: {
+                noteId: this.props.openedNoteId,
+              },
+            })
+            .then((res) => {
+              this.setState({ paragraphs: res.paragraphs });
+              this.parseAllParagraphs();
+              this.props.setToast('Paragraphs successfully deleted!');
+            })
+            .catch((err) => {
+              this.props.setToast(
+                'Error deleting paragraph, please make sure you have the correct permission.',
+                'danger'
+              );
+              console.error(err.body.message);
+            });
+        },
+        'Delete all paragraphs',
+        'Are you sure you want to delete all paragraphs? The action cannot be undone.'
+      ),
+    });
+    this.setState({ isModalVisible: true });
+  };
+
+  showClearOutputsModal = () => {
+    this.setState({
+      modalLayout: getDeleteModal(
+        () => this.setState({ isModalVisible: false }),
+        () => {
+          this.clearParagraphButton();
+          this.setState({ isModalVisible: false });
+        },
+        'Clear all outputs',
+        'Are you sure you want to clear all outputs? The action cannot be undone.',
+        'Clear'
+      ),
+    });
+    this.setState({ isModalVisible: true });
+  };
+
+  showRenameModal = () => {
+    this.setState({
+      modalLayout: getCustomModal(
+        (newName: string) => {
+          this.props.renameNotebook(newName, this.props.openedNoteId);
+          this.setState({ isModalVisible: false });
+          this.loadNotebook();
+        },
+        () => this.setState({ isModalVisible: false }),
+        'Name',
+        'Rename notebook',
+        'Cancel',
+        'Rename',
+        this.state.path,
+        CREATE_NOTE_MESSAGE
+      ),
+    });
+    this.setState({ isModalVisible: true });
+  };
+
+  showCloneModal = () => {
+    this.setState({
+      modalLayout: getCustomModal(
+        (newName: string) => {
+          this.props.cloneNotebook(newName, this.props.openedNoteId).then((id: string) => {
+            window.location.assign(`#/notebooks/${id}`);
+            setTimeout(() => {
+              this.loadNotebook();
+            }, 300);
+          });
+          this.setState({ isModalVisible: false });
+        },
+        () => this.setState({ isModalVisible: false }),
+        'Name',
+        'Duplicate notebook',
+        'Cancel',
+        'Duplicate',
+        this.state.path + ' (copy)',
+        CREATE_NOTE_MESSAGE
+      ),
+    });
+    this.setState({ isModalVisible: true });
+  };
+
+  showDeleteNotebookModal = () => {
+    this.setState({
+      modalLayout: (
+        <DeleteNotebookModal
+          onConfirm={async () => {
+            const toastMessage = `Notebook "${this.state.path}" successfully deleted!`;
+            await this.props.deleteNotebook([this.props.openedNoteId], toastMessage);
+            this.setState({ isModalVisible: false }, () =>
+              setTimeout(() => {
+                this.props.history.push('.');
+              }, 1000)
+            );
+          }}
+          onCancel={() => this.setState({ isModalVisible: false })}
+          title={`Delete notebook "${this.state.path}"`}
+          message="Delete notebook will remove all contents in the paragraphs."
+        />
+      ),
+    });
+    this.setState({ isModalVisible: true });
+  };
+
+  // Function for delete Visualization from notebook
+  deleteVizualization = (uniqueId: string) => {
+    this.props.http
+      .delete(`${NOTEBOOKS_API_PREFIX}/paragraph/` + this.props.openedNoteId + '/' + uniqueId)
+      .then((res) => {
+        this.setState({ paragraphs: res.paragraphs });
+        this.parseAllParagraphs();
+      })
+      .catch((err) => {
+        this.props.setToast(
+          'Error deleting visualization, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  // Backend call to add a paragraph, switch to "view both" if in output only view
+  addPara = (index: number, newParaContent: string, inpType: string) => {
+    const addParaObj = {
+      noteId: this.props.openedNoteId,
+      paragraphIndex: index,
+      paragraphInput: newParaContent,
+      inputType: inpType,
+    };
+
+    return this.props.http
+      .post(`${NOTEBOOKS_API_PREFIX}/paragraph/`, {
+        body: JSON.stringify(addParaObj),
+      })
+      .then((res) => {
+        const paragraphs = [...this.state.paragraphs];
+        paragraphs.splice(index, 0, res);
+        const newPara = this.parseParagraphs([res])[0];
+        newPara.isInputExpanded = true;
+        const parsedPara = [...this.state.parsedPara];
+        parsedPara.splice(index, 0, newPara);
+
+        this.setState({ paragraphs, parsedPara });
+        this.paragraphSelector(index);
+        if (this.state.selectedViewId === 'output_only')
+          this.setState({ selectedViewId: 'view_both' });
+      })
+      .catch((err) => {
+        this.props.setToast(
+          'Error adding paragraph, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  // Function to clone a paragraph
+  cloneParaButton = (para: ParaType, index: number) => {
+    let inputType = 'CODE';
+    if (para.typeOut[0] === 'VISUALIZATION') {
+      inputType = 'VISUALIZATION';
+    }
+    if (para.typeOut[0] === 'OBSERVABILITY_VISUALIZATION') {
+      inputType = 'OBSERVABILITY_VISUALIZATION';
+    }
+    if (index !== -1) {
+      return this.addPara(index, para.inp, inputType);
+    }
+  };
+
+  // Function to move a paragraph
+  movePara = (index: number, targetIndex: number) => {
+    const paragraphs = [...this.state.paragraphs];
+    paragraphs.splice(targetIndex, 0, paragraphs.splice(index, 1)[0]);
+    const parsedPara = [...this.state.parsedPara];
+    parsedPara.splice(targetIndex, 0, parsedPara.splice(index, 1)[0]);
+
+    const moveParaObj = {
+      noteId: this.props.openedNoteId,
+      paragraphs,
+    };
+
+    return this.props.http
+      .post(`${NOTEBOOKS_API_PREFIX}/set_paragraphs/`, {
+        body: JSON.stringify(moveParaObj),
+      })
+      .then((res) => this.setState({ paragraphs, parsedPara }))
+      .then((res) => this.scrollToPara(targetIndex))
+      .catch((err) => {
+        this.props.setToast(
+          'Error moving paragraphs, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  scrollToPara(index: number) {
+    setTimeout(() => {
+      window.scrollTo({
+        left: 0,
+        top: this.state.parsedPara[index].paraDivRef.current?.offsetTop,
+        behavior: 'smooth',
+      });
+    }, 0);
+  }
+
+  // Function for clearing outputs button
+  clearParagraphButton = () => {
+    this.showParagraphRunning('loading');
+    const clearParaObj = {
+      noteId: this.props.openedNoteId,
+    };
+    this.props.http
+      .put(`${NOTEBOOKS_API_PREFIX}/paragraph/clearall/`, {
+        body: JSON.stringify(clearParaObj),
+      })
+      .then((res) => {
+        this.setState({ paragraphs: res.paragraphs });
+        this.parseAllParagraphs();
+      })
+      .catch((err) => {
+        this.props.setToast(
+          'Error clearing paragraphs, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err.body.message);
+      });
+  };
+
+  // Backend call to update and run contents of paragraph
+  updateRunParagraph = (
+    para: ParaType,
+    index: number,
+    vizObjectInput?: string,
+    paraType?: string
+  ) => {
+    this.showParagraphRunning(index);
+    if (vizObjectInput) {
+      para.inp = this.state.vizPrefix + vizObjectInput; // "%sh check"
+    }
+
+    const paraUpdateObject = {
+      noteId: this.props.openedNoteId,
+      paragraphId: para.uniqueId,
+      paragraphInput: para.inp,
+      paragraphType: paraType || '',
+    };
+
+    return this.props.http
+      .post(`${NOTEBOOKS_API_PREFIX}/paragraph/update/run/`, {
+        body: JSON.stringify(paraUpdateObject),
+      })
+      .then(async (res) => {
+        if (res.output[0]?.outputType === 'QUERY') {
+          await this.loadQueryResultsFromInput(res);
+          const checkErrorJSON = JSON.parse(res.output[0].result);
+          if (this.checkQueryOutputError(checkErrorJSON)) {
+            return;
+          }
+        }
+        const paragraphs = this.state.paragraphs;
+        paragraphs[index] = res;
+        const parsedPara = [...this.state.parsedPara];
+        parsedPara[index] = this.parseParagraphs([res])[0];
+        this.setState({ paragraphs, parsedPara });
+      })
+      .catch((err) => {
+        if (err.body.statusCode === 413)
+          this.props.setToast(`Error running paragraph: ${err.body.message}`, 'danger');
+        else
+          this.props.setToast(
+            'Error running paragraph, please make sure you have the correct permission.',
+            'danger'
+          );
+        console.error(err.body.message);
+      });
+  };
+
+  checkQueryOutputError = (checkErrorJSON: JSON) => {
+    // if query output has error output
+    if (checkErrorJSON.hasOwnProperty('error')) {
+      this.setState({
+        showQueryParagraphError: true,
+        queryParagraphErrorMessage: checkErrorJSON.error.reason,
+      });
+      return true;
+    }
+    // query ran successfully, reset error variables if currently set to true
+    else if (this.state.showQueryParagraphError) {
+      this.setState({
+        showQueryParagraphError: false,
+        queryParagraphErrorMessage: '',
+      });
+      return false;
+    }
+  };
+
+  runForAllParagraphs = (reducer: (para: ParaType, index: number) => Promise<any>) => {
+    return this.state.parsedPara
+      .map((para: ParaType, index: number) => () => reducer(para, index))
+      .reduce((chain, func) => chain.then(func), Promise.resolve());
+  };
+
+  // Handles text editor value and syncs with paragraph input
+  textValueEditor = (evt: React.ChangeEvent<HTMLTextAreaElement>, index: number) => {
+    if (!(evt.key === 'Enter' && evt.shiftKey)) {
+      let parsedPara = this.state.parsedPara;
+      parsedPara[index].inp = evt.target.value;
+      this.setState({ parsedPara });
+    }
+  };
+
+  // Handles run paragraph shortcut "Shift+Enter"
+  handleKeyPress = (evt: React.KeyboardEvent<Element>, para: ParaType, index: number) => {
+    if (evt.key === 'Enter' && evt.shiftKey) {
+      this.updateRunParagraph(para, index);
+    }
+  };
+
+  // update view mode, scrolls to paragraph and expands input if scrollToIndex is given
+  updateView = (selectedViewId: string, scrollToIndex?: number) => {
+    this.configureViewParameter(selectedViewId);
+    let parsedPara = [...this.state.parsedPara];
+    this.state.parsedPara.map((para: ParaType, index: number) => {
+      parsedPara[index].isInputExpanded = selectedViewId === 'input_only';
+    });
+
+    if (scrollToIndex !== undefined) {
+      parsedPara[scrollToIndex].isInputExpanded = true;
+      this.scrollToPara(scrollToIndex);
+    }
+    this.setState({ parsedPara, selectedViewId });
+    this.paragraphSelector(scrollToIndex !== undefined ? scrollToIndex : -1);
+  };
+
+  loadNotebook = () => {
+    this.showParagraphRunning('queue');
+    this.props.http
+      .get(`${NOTEBOOKS_API_PREFIX}/note/` + this.props.openedNoteId)
+      .then(async (res) => {
+        this.setBreadcrumbs(res.path);
+        let index = 0;
+        for (index = 0; index < res.paragraphs.length; ++index) {
+          // if the paragraph is a query, load the query output
+          if (res.paragraphs[index].output[0]?.outputType === 'QUERY') {
+            await this.loadQueryResultsFromInput(res.paragraphs[index]);
+          }
+        }
+        this.setState(res, this.parseAllParagraphs);
+      })
+      .catch((err) => {
+        this.props.setToast(
+          'Error fetching notebooks, please make sure you have the correct permission.',
+          'danger'
+        );
+        console.error(err?.body?.message || err);
+      });
+  };
+
+  loadQueryResultsFromInput = async (paragraph: any) => {
+    const queryType =
+      paragraph.input.inputText.substring(0, 4) === '%sql' ? 'sqlquery' : 'pplquery';
+    await this.props.http
+      .post(`/api/sql/${queryType}`, {
+        body: JSON.stringify(paragraph.output[0].result),
+      })
+      .then((response) => {
+        paragraph.output[0].result = response.data.resp;
+        return paragraph;
+      })
+      .catch((err) => {
+        this.props.setToast('Error getting query output', 'danger');
+        console.error(err);
+      });
+  };
+
+  setPara = (para: ParaType, index: number) => {
+    const parsedPara = [...this.state.parsedPara];
+    parsedPara.splice(index, 1, para);
+    this.setState({ parsedPara });
+  };
+
+  setBreadcrumbs(path: string) {
+    this.props.setBreadcrumbs([
+      this.props.parentBreadcrumb,
+      {
+        text: 'Notebooks',
+        href: '#/notebooks',
+      },
+      {
+        text: path,
+        href: `#/notebooks/${this.props.openedNoteId}`,
+      },
+    ]);
+  }
+
+  checkIfReportingPluginIsInstalled() {
+    fetch('../api/status', {
+      headers: {
+        'Content-Type': 'application/json',
+        'osd-xsrf': 'true',
+        'accept-language': 'en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7,zh-TW;q=0.6',
+        pragma: 'no-cache',
+        'sec-fetch-dest': 'empty',
+        'sec-fetch-mode': 'cors',
+        'sec-fetch-site': 'same-origin',
+      },
+      method: 'GET',
+      referrerPolicy: 'strict-origin-when-cross-origin',
+      mode: 'cors',
+      credentials: 'include',
+    })
+      .then(function (response) {
+        return response.json();
+      })
+      .then((data) => {
+        for (let i = 0; i < data.status.statuses.length; ++i) {
+          if (data.status.statuses[i].id.includes('plugin:reportsDashboards')) {
+            this.setState({ isReportingPluginInstalled: true });
+          }
+        }
+      })
+      .catch((error) => {
+        console.log('error is', error);
+      });
+  }
+
+  configureViewParameter(id: string) {
+    this.props.history.replace({
+      ...this.props.location,
+      search: `view=${id}`,
+    });
+  }
+
+  componentDidMount() {
+    this.setBreadcrumbs('');
+    this.loadNotebook();
+    this.checkIfReportingPluginIsInstalled();
+    const searchParams = queryString.parse(this.props.location.search);
+    const view = searchParams['view'];
+    if (!view) {
+      this.configureViewParameter('view_both');
+    }
+    if (view === 'output_only') {
+      this.setState({ selectedViewId: 'output_only' });
+    } else if (view === 'input_only') {
+      this.setState({ selectedViewId: 'input_only' });
+    }
+  }
+
+  render() {
+    const createdText = (
+      <div>
+        <p>
+          Created <br /> {moment(this.state.dateCreated).format(UI_DATE_FORMAT)}
+        </p>
+      </div>
+    );
+    const viewOptions: EuiButtonGroupOption[] = [
+      {
+        id: 'view_both',
+        label: 'View both',
+      },
+      {
+        id: 'input_only',
+        label: 'Input only',
+      },
+      {
+        id: 'output_only',
+        label: 'Output only',
+      },
+    ];
+    const addParaPanels: EuiContextMenuPanelDescriptor[] = [
+      {
+        id: 0,
+        title: 'Type',
+        items: [
+          {
+            name: 'Code block',
+            onClick: () => {
+              this.setState({ isAddParaPopoverOpen: false });
+              this.addPara(this.state.paragraphs.length, '', 'CODE');
+            },
+          },
+          {
+            name: 'Visualization',
+            onClick: () => {
+              this.setState({ isAddParaPopoverOpen: false });
+              this.addPara(this.state.paragraphs.length, '', 'VISUALIZATION');
+            },
+          },
+        ],
+      },
+    ];
+    const paraActionsPanels: EuiContextMenuPanelDescriptor[] = [
+      {
+        id: 0,
+        title: 'Actions',
+        items: [
+          {
+            name: 'Add paragraph to top',
+            panel: 1,
+          },
+          {
+            name: 'Add paragraph to bottom',
+            panel: 2,
+          },
+          {
+            name: 'Run all paragraphs',
+            disabled: this.state.parsedPara.length === 0,
+            onClick: () => {
+              this.setState({ isParaActionsPopoverOpen: false });
+              this.runForAllParagraphs((para: ParaType, index: number) => {
+                return para.paraRef.current?.runParagraph();
+              });
+              if (this.state.selectedViewId === 'input_only') {
+                this.updateView('view_both');
+              }
+            },
+          },
+          {
+            name: 'Clear all outputs',
+            disabled: this.state.parsedPara.length === 0,
+            onClick: () => {
+              this.setState({ isParaActionsPopoverOpen: false });
+              this.showClearOutputsModal();
+            },
+          },
+          {
+            name: 'Delete all paragraphs',
+            disabled: this.state.parsedPara.length === 0,
+            onClick: () => {
+              this.setState({ isParaActionsPopoverOpen: false });
+              this.showDeleteAllParaModal();
+            },
+          },
+        ],
+      },
+      {
+        id: 1,
+        title: 'Add to top',
+        items: [
+          {
+            name: 'Code block',
+            onClick: () => {
+              this.setState({ isParaActionsPopoverOpen: false });
+              this.addPara(0, '', 'CODE');
+            },
+          },
+          {
+            name: 'Visualization',
+            onClick: () => {
+              this.setState({ isParaActionsPopoverOpen: false });
+              this.addPara(0, '', 'VISUALIZATION');
+            },
+          },
+        ],
+      },
+      {
+        id: 2,
+        title: 'Add to bottom',
+        items: [
+          {
+            name: 'Code block',
+            onClick: () => {
+              this.setState({ isParaActionsPopoverOpen: false });
+              this.addPara(this.state.paragraphs.length, '', 'CODE');
+            },
+          },
+          {
+            name: 'Visualization',
+            onClick: () => {
+              this.setState({ isParaActionsPopoverOpen: false });
+              this.addPara(this.state.paragraphs.length, '', 'VISUALIZATION');
+            },
+          },
+        ],
+      },
+    ];
+    const noteActionsPanels: EuiContextMenuPanelDescriptor[] = [
+      {
+        id: 0,
+        title: 'Notebook actions',
+        items: [
+          {
+            name: 'Rename notebook',
+            onClick: () => {
+              this.setState({ isNoteActionsPopoverOpen: false });
+              this.showRenameModal();
+            },
+          },
+          {
+            name: 'Duplicate notebook',
+            onClick: () => {
+              this.setState({ isNoteActionsPopoverOpen: false });
+              this.showCloneModal();
+            },
+          },
+          {
+            name: 'Delete notebook',
+            onClick: () => {
+              this.setState({ isNoteActionsPopoverOpen: false });
+              this.showDeleteNotebookModal();
+            },
+          },
+        ],
+      },
+    ];
+
+    const reportingActionPanels: EuiContextMenuPanelDescriptor[] = [
+      {
+        id: 0,
+        title: 'Reporting',
+        items: [
+          {
+            name: 'Download PDF',
+            icon: <EuiIcon type="download" />,
+            onClick: () => {
+              this.setState({ isReportingActionsPopoverOpen: false });
+              generateInContextReport('pdf', this.props, this.toggleReportingLoadingModal);
+            },
+          },
+          {
+            name: 'Download PNG',
+            icon: <EuiIcon type="download" />,
+            onClick: () => {
+              this.setState({ isReportingActionsPopoverOpen: false });
+              generateInContextReport('png', this.props, this.toggleReportingLoadingModal);
+            },
+          },
+          {
+            name: 'Create report definition',
+            icon: <EuiIcon type="calendar" />,
+            onClick: () => {
+              this.setState({ isReportingActionsPopoverOpen: false });
+              contextMenuCreateReportDefinition(window.location.href);
+            },
+          },
+          {
+            name: 'View reports',
+            icon: <EuiIcon type="document" />,
+            onClick: () => {
+              this.setState({ isReportingActionsPopoverOpen: false });
+              contextMenuViewReports();
+            },
+          },
+        ],
+      },
+    ];
+
+    const showReportingContextMenu = this.state.isReportingPluginInstalled ? (
+      <div>
+        <EuiPopover
+          panelPaddingSize="none"
+          withTitle
+          button={
+            <EuiButton
+              id="reportingActionsButton"
+              iconType="arrowDown"
+              iconSide="right"
+              onClick={() => this.setState({ isReportingActionsPopoverOpen: true })}
+            >
+              Reporting actions
+            </EuiButton>
+          }
+          isOpen={this.state.isReportingActionsPopoverOpen}
+          closePopover={() => this.setState({ isReportingActionsPopoverOpen: false })}
+        >
+          <EuiContextMenu initialPanelId={0} panels={reportingActionPanels} />
+        </EuiPopover>
+      </div>
+    ) : null;
+
+    const showLoadingModal = this.state.isReportingLoadingModalOpen ? (
+      <GenerateReportLoadingModal setShowLoading={this.toggleReportingLoadingModal} />
+    ) : null;
+
+    return (
+      <div style={pageStyles}>
+        <EuiPage>
+          <EuiPageBody component="div">
+            <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
+              <EuiFlexItem />
+              {this.state.parsedPara.length > 0 && (
+                <EuiFlexItem grow={false}>
+                  <EuiButtonGroup
+                    buttonSize="m"
+                    options={viewOptions}
+                    idSelected={this.state.selectedViewId}
+                    onChange={(id) => {
+                      this.updateView(id);
+                    }}
+                  />
+                </EuiFlexItem>
+              )}
+              <EuiFlexItem grow={false} />
+              <EuiFlexItem grow={false} />
+              <EuiFlexItem grow={false}>
+                <EuiPopover
+                  panelPaddingSize="none"
+                  withTitle
+                  button={
+                    <EuiButton
+                      data-test-subj="notebook-paragraph-actions-button"
+                      iconType="arrowDown"
+                      iconSide="right"
+                      onClick={() => this.setState({ isParaActionsPopoverOpen: true })}
+                    >
+                      Paragraph actions
+                    </EuiButton>
+                  }
+                  isOpen={this.state.isParaActionsPopoverOpen}
+                  closePopover={() => this.setState({ isParaActionsPopoverOpen: false })}
+                >
+                  <EuiContextMenu initialPanelId={0} panels={paraActionsPanels} />
+                </EuiPopover>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>{showReportingContextMenu}</EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiPopover
+                  panelPaddingSize="none"
+                  withTitle
+                  button={
+                    <EuiButton
+                      data-test-subj="notebook-notebook-actions-button"
+                      iconType="arrowDown"
+                      iconSide="right"
+                      onClick={() => this.setState({ isNoteActionsPopoverOpen: true })}
+                    >
+                      Notebook actions
+                    </EuiButton>
+                  }
+                  isOpen={this.state.isNoteActionsPopoverOpen}
+                  closePopover={() => this.setState({ isNoteActionsPopoverOpen: false })}
+                >
+                  <EuiContextMenu initialPanelId={0} panels={noteActionsPanels} />
+                </EuiPopover>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiSpacer size="s" />
+            <EuiTitle size="l">
+              <h1>{this.state.path}</h1>
+            </EuiTitle>
+            <EuiSpacer size="m" />
+            <EuiFlexGroup alignItems={'flexStart'} gutterSize={'l'}>
+              <EuiFlexItem grow={false}>
+                <EuiText>{createdText}</EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            {this.state.parsedPara.length > 0 ? (
+              <>
+                {this.state.parsedPara.map((para: ParaType, index: number) => (
+                  <div
+                    ref={this.state.parsedPara[index].paraDivRef}
+                    key={`para_div_${para.uniqueId}`}
+                    style={panelStyles}
+                  >
+                    <Paragraphs
+                      ref={this.state.parsedPara[index].paraRef}
+                      pplService={this.props.pplService}
+                      para={para}
+                      setPara={(para: ParaType) => this.setPara(para, index)}
+                      dateModified={this.state.paragraphs[index]?.dateModified}
+                      index={index}
+                      paraCount={this.state.parsedPara.length}
+                      paragraphSelector={this.paragraphSelector}
+                      textValueEditor={this.textValueEditor}
+                      handleKeyPress={this.handleKeyPress}
+                      addPara={this.addPara}
+                      DashboardContainerByValueRenderer={
+                        this.props.DashboardContainerByValueRenderer
+                      }
+                      deleteVizualization={this.deleteVizualization}
+                      http={this.props.http}
+                      selectedViewId={this.state.selectedViewId}
+                      setSelectedViewId={this.updateView}
+                      deletePara={this.showDeleteParaModal}
+                      runPara={this.updateRunParagraph}
+                      clonePara={this.cloneParaButton}
+                      movePara={this.movePara}
+                      showQueryParagraphError={this.state.showQueryParagraphError}
+                      queryParagraphErrorMessage={this.state.queryParagraphErrorMessage}
+                    />
+                  </div>
+                ))}
+                {this.state.selectedViewId !== 'output_only' && (
+                  <>
+                    <EuiSpacer />
+                    <EuiPopover
+                      panelPaddingSize="none"
+                      withTitle
+                      button={
+                        <EuiButton
+                          iconType="arrowDown"
+                          iconSide="right"
+                          onClick={() => this.setState({ isAddParaPopoverOpen: true })}
+                        >
+                          Add paragraph
+                        </EuiButton>
+                      }
+                      isOpen={this.state.isAddParaPopoverOpen}
+                      closePopover={() => this.setState({ isAddParaPopoverOpen: false })}
+                    >
+                      <EuiContextMenu initialPanelId={0} panels={addParaPanels} />
+                    </EuiPopover>
+                  </>
+                )}
+              </>
+            ) : (
+              // show default paragraph if no paragraphs in this notebook
+              <div style={panelStyles}>
+                <EuiPanel>
+                  <EuiSpacer size="xxl" />
+                  <EuiText textAlign="center">
+                    <h2>No paragraphs</h2>
+                    <EuiText>
+                      Add a paragraph to compose your document or story. Notebooks now support two
+                      types of input:
+                    </EuiText>
+                  </EuiText>
+                  <EuiSpacer size="xl" />
+                  <EuiFlexGroup justifyContent="spaceEvenly">
+                    <EuiFlexItem grow={2} />
+                    <EuiFlexItem grow={3}>
+                      <EuiCard
+                        icon={<EuiIcon size="xxl" type="editorCodeBlock" />}
+                        title="Code block"
+                        description="Write contents directly using markdown, SQL or PPL."
+                        footer={
+                          <EuiButton
+                            onClick={() => this.addPara(0, '', 'CODE')}
+                            style={{ marginBottom: 17 }}
+                          >
+                            Add code block
+                          </EuiButton>
+                        }
+                      />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={3}>
+                      <EuiCard
+                        icon={<EuiIcon size="xxl" type="visArea" />}
+                        title="Visualization"
+                        description="Import OpenSearch Dashboards or Observability visualizations to the notes."
+                        footer={
+                          <EuiButton
+                            onClick={() => this.addPara(0, '', 'VISUALIZATION')}
+                            style={{ marginBottom: 17 }}
+                          >
+                            Add visualization
+                          </EuiButton>
+                        }
+                      />
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={2} />
+                  </EuiFlexGroup>
+                  <EuiSpacer size="xxl" />
+                </EuiPanel>
+              </div>
+            )}
+            {showLoadingModal}
+          </EuiPageBody>
+        </EuiPage>
+        {this.state.isModalVisible && this.state.modalLayout}
+      </div>
+    );
+  }
+}
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap
new file mode 100644
index 0000000000..813c41868f
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap
@@ -0,0 +1,318 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<para_input /> spec renders the markdown component 1`] = `
+<div
+  class="sc-gKXOVf fPkmRS"
+>
+  <div
+    class="sc-bczRLJ hRTESd"
+  />
+  <div
+    style="width: 100%;"
+  >
+    <div
+      class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingSmall euiCodeBlock--hasControls prismjs language-none"
+      style="max-height: 200px;"
+    >
+      <pre
+        class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+        style="max-height: 200px;"
+        tabindex="-1"
+      >
+        <code
+          class="euiCodeBlock__code"
+        >
+          # Type your input here
+        </code>
+      </pre>
+      <div
+        class="euiCodeBlock__controls"
+      >
+        <button
+          aria-label="Expand"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiCodeBlock__fullScreenButton"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<para_input /> spec renders the visualization component 1`] = `
+<div
+  class="sc-gKXOVf fPkmRS"
+>
+  <div
+    class="sc-bczRLJ hRTESd"
+  />
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem euiFlexItem--flexGrow6"
+    >
+      <div
+        class="euiFormRow euiFormRow--fullWidth"
+        id="random_html_id-row"
+      >
+        <div
+          class="euiFormRow__labelWrapper"
+        >
+          <label
+            class="euiFormLabel euiFormRow__label"
+            for="random_html_id"
+          >
+            Title
+          </label>
+        </div>
+        <div
+          class="euiFormRow__fieldWrapper"
+        >
+          <div
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            class="euiComboBox"
+            role="combobox"
+          >
+            <div
+              class="euiFormControlLayout"
+            >
+              <div
+                class="euiFormControlLayout__childrenWrapper"
+              >
+                <div
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                  data-test-subj="comboBoxInput"
+                  tabindex="-1"
+                >
+                  <span
+                    class="euiComboBoxPill euiComboBoxPill--plainText"
+                  >
+                    visualization-0
+                  </span>
+                  <div
+                    class="euiComboBox__input"
+                    style="font-size: 14px; display: inline-block;"
+                  >
+                    <input
+                      aria-controls=""
+                      data-test-subj="comboBoxSearchInput"
+                      id="random_html_id"
+                      role="textbox"
+                      style="box-sizing: content-box; width: 2px;"
+                      value=""
+                    />
+                    <div
+                      style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                >
+                  <button
+                    aria-label="Clear input"
+                    class="euiFormControlLayoutClearButton"
+                    data-test-subj="comboBoxClearButton"
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutClearButton__icon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </button>
+                  <button
+                    aria-label="Open list of options"
+                    class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                    data-test-subj="comboBoxToggleListButton"
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      focusable="false"
+                      height="16"
+                      role="img"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <button
+        class="euiButton euiButton--primary"
+        data-test-subj="para-input-visualization-browse-button"
+        type="button"
+      >
+        <span
+          class="euiButtonContent euiButton__content"
+        >
+          <span
+            class="euiButton__text"
+          >
+            Browse
+          </span>
+        </span>
+      </button>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrow2"
+    />
+    <div
+      class="euiFlexItem euiFlexItem--flexGrow9"
+    >
+      <div
+        class="euiFormRow euiFormRow--fullWidth"
+        id="random_html_id-row"
+      >
+        <div
+          class="euiFormRow__labelWrapper"
+        >
+          <label
+            class="euiFormLabel euiFormRow__label"
+            for="random_html_id"
+          >
+            Date range
+          </label>
+        </div>
+        <div
+          class="euiFormRow__fieldWrapper"
+        >
+          <div
+            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+          >
+            <div
+              class="euiFlexItem"
+            >
+              <div
+                class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+              >
+                <div
+                  class="euiPopover euiPopover--anchorDownLeft"
+                >
+                  <div
+                    class="euiPopover__anchor euiQuickSelectPopover__anchor"
+                  >
+                    <button
+                      aria-label="Date quick select"
+                      class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                      type="button"
+                    >
+                      <span
+                        class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                        <span
+                          class="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="euiIcon euiIcon--medium euiIcon-isLoading"
+                            focusable="false"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+                <div
+                  class="euiFormControlLayout__childrenWrapper"
+                >
+                  <div
+                    class="euiDatePickerRange euiDatePickerRange--inGroup"
+                  >
+                    <div
+                      class="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiSuperDatePicker__startPopoverButton"
+                    >
+                      <div
+                        class="euiPopover__anchor"
+                      >
+                        <button
+                          class="euiDatePopoverButton euiDatePopoverButton--start"
+                          data-test-subj="superDatePickerstartDatePopoverButton"
+                          title="2020-07-21T18:37:44.710Z"
+                        >
+                          2020-07-21T18:37:44+00:00
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="euiText euiText--small euiDatePickerRange__delimeter"
+                    >
+                      <div
+                        class="euiTextColor euiTextColor--subdued"
+                      >
+                        →
+                      </div>
+                    </div>
+                    <div
+                      class="euiPopover euiPopover--anchorDownRight euiPopover--displayBlock"
+                    >
+                      <div
+                        class="euiPopover__anchor"
+                      >
+                        <button
+                          class="euiDatePopoverButton euiDatePopoverButton--end"
+                          data-test-subj="superDatePickerendDatePopoverButton"
+                          title="2020-08-20T18:37:44.710Z"
+                        >
+                          2020-08-20T18:37:44+00:00
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiFlexItem"
+    />
+  </div>
+</div>
+`;
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
new file mode 100644
index 0000000000..0828c3f4c9
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_output.test.tsx.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ParaOutput /> spec renders markdown outputs 1`] = `
+<div
+  class="euiText euiText--medium markdown-output-text"
+>
+  <div
+    class="markdown-body "
+  >
+    <h1>
+      Type your input here
+    </h1>
+  </div>
+</div>
+`;
+
+exports[`<ParaOutput /> spec renders other types of outputs 1`] = `
+<div
+  class="euiText euiText--medium"
+>
+  <div
+    class="sc-crXcEl gqVnJo"
+  />
+</div>
+`;
+
+exports[`<ParaOutput /> spec renders query outputs 1`] = `
+<div>
+  <div
+    class="euiText euiText--medium"
+  >
+    <b>
+       select * from opensearch_dashboards_sample_data_flights limit 2
+    </b>
+  </div>
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+  <div
+    id="queryDataGrid"
+  >
+    <span
+      class="euiLoadingSpinner euiLoadingSpinner--xLarge"
+    />
+    <div
+      class="euiSpacer euiSpacer--l"
+    />
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
+    <div
+      class="euiDataGrid__focusWrap"
+      data-focus-lock-disabled="disabled"
+    >
+      <div
+        class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
+      />
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
+  </div>
+</div>
+`;
+
+exports[`<ParaOutput /> spec renders visualization outputs 1`] = `
+<div
+  class="euiText euiText--small"
+  style="margin-left: 9px;"
+>
+  2020-07-21T18:37:44+00:00 - 2020-08-20T18:37:44+00:00
+</div>
+`;
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_query_grid.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_query_grid.test.tsx.snap
new file mode 100644
index 0000000000..45b5c59e52
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_query_grid.test.tsx.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<QueryDataGridMemo /> spec renders the component 1`] = `
+<div
+  id="queryDataGrid"
+>
+  <span
+    class="euiLoadingSpinner euiLoadingSpinner--xLarge"
+  />
+  <div
+    class="euiSpacer euiSpacer--l"
+  />
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+  <div
+    class="euiDataGrid__focusWrap"
+    data-focus-lock-disabled="disabled"
+  >
+    <div
+      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+</div>
+`;
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
new file mode 100644
index 0000000000..2081be1521
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
@@ -0,0 +1,291 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Paragraphs /> spec renders the component 1`] = `
+<div
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+>
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem"
+    >
+      <div
+        class="euiText euiText--medium"
+        style="font-size: 17px;"
+      >
+        [1] Code block 
+        <button
+          aria-label="Toggle show input"
+          class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+          type="button"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+            focusable="false"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiPopover euiPopover--anchorDownCenter"
+      >
+        <div
+          class="euiPopover__anchor"
+        >
+          <button
+            aria-label="Open paragraph menu"
+            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+              focusable="false"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="euiSpacer euiSpacer--s"
+  />
+  <div
+    class="notebooks-paragraph notebooks-paragraph-light"
+  >
+    <div
+      class="euiSpacer euiSpacer--s"
+    />
+    <div
+      class="euiFormRow euiFormRow--fullWidth"
+      id="random_html_id-row"
+    >
+      <div
+        class="euiFormRow__fieldWrapper"
+      >
+        <div
+          class="sc-gKXOVf fPkmRS"
+        >
+          <div
+            class="sc-bczRLJ hRTESd"
+          />
+          <div
+            style="width: 100%;"
+          >
+            <div
+              class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingSmall euiCodeBlock--hasControls prismjs language-none"
+              style="max-height: 200px;"
+            >
+              <pre
+                class="euiCodeBlock__pre euiCodeBlock__pre--whiteSpacePreWrap"
+                style="max-height: 200px;"
+                tabindex="-1"
+              >
+                <code
+                  class="euiCodeBlock__code"
+                >
+                  # Type your input here
+                </code>
+              </pre>
+              <div
+                class="euiCodeBlock__controls"
+              >
+                <button
+                  aria-label="Expand"
+                  class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiCodeBlock__fullScreenButton"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiFormHelpText euiFormRow__text"
+          id="random_html_id-help-0"
+        >
+          <div
+            class="euiText euiText--small"
+          >
+            Specify the input language on the first line using %[language type]. Supported languages include markdown, 
+            <a
+              class="euiLink euiLink--primary"
+              href="https://opensearch.org/docs/latest/search-plugins/sql/index/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+               
+              SQL 
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--small euiIcon-isLoading"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+               
+              <svg
+                aria-hidden="true"
+                aria-label="External link"
+                class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+              <span
+                class="euiScreenReaderOnly"
+              >
+                (opens in a new tab or window)
+              </span>
+            </a>
+             and 
+            <a
+              class="euiLink euiLink--primary"
+              href="https://opensearch.org/docs/latest/observability-plugin/ppl/commands/"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+               
+              PPL 
+              <svg
+                aria-hidden="true"
+                class="euiIcon euiIcon--small euiIcon-isLoading"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+              <svg
+                aria-hidden="true"
+                aria-label="External link"
+                class="euiIcon euiIcon--small euiIcon-isLoading euiLink__externalIcon"
+                focusable="false"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              />
+              <span
+                class="euiScreenReaderOnly"
+              >
+                (opens in a new tab or window)
+              </span>
+            </a>
+            .
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiSpacer euiSpacer--m"
+    />
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <button
+          class="euiButton euiButton--primary euiButton--fill"
+          type="button"
+        >
+          <span
+            class="euiButtonContent euiButton__content"
+          >
+            <span
+              class="euiButton__text"
+            >
+              Refresh
+            </span>
+          </span>
+        </button>
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      />
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiIcon--secondary euiIcon-isLoading"
+          focusable="false"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </div>
+      <div
+        class="euiFlexItem"
+      >
+        <div
+          class="euiText euiText--medium"
+        >
+          <div
+            class="euiTextColor euiTextColor--subdued"
+          >
+            Last successful run Invalid date.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiSpacer euiSpacer--m"
+    />
+    <hr
+      class="euiHorizontalRule euiHorizontalRule--full"
+    />
+    <div
+      style="opacity: 1; padding: 15px;"
+    >
+      <div
+        class="euiText euiText--medium markdown-output-text"
+      >
+        <div
+          class="markdown-body "
+        >
+          <h1>
+            Type your input here
+          </h1>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/para_input.test.tsx b/public/components/notebooks/components/paragraph_components/__tests__/para_input.test.tsx
new file mode 100644
index 0000000000..de07ab37d0
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/__tests__/para_input.test.tsx
@@ -0,0 +1,160 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { sampleParsedParagraghs1 } from '../../helpers/__tests__/sampleDefaultNotebooks';
+import { ParaInput } from '../para_input';
+
+describe('<para_input /> spec', () => {
+  configure({ adapter: new Adapter() });
+  const visOptions1 = Array.from({ length: 5 }, (v, k) => ({
+    label: `visualization-${k}`,
+    key: `key-${k}`,
+  }));
+  const visOptions2 = Array.from({ length: 5 }, (v, k) => ({
+    label: `visualization-${k}`,
+    key: `key-${k}`,
+  }));
+  const visOptions = [
+    { label: 'VisOptions1', options: visOptions1 },
+    { label: 'VisOptions2', options: visOptions2 },
+  ];
+
+  it('renders the markdown component', () => {
+    const para = sampleParsedParagraghs1[0];
+    const textValueEditor = jest.fn();
+    const handleKeyPress = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setIsOutputStale = jest.fn();
+    const setSelectedVisOption = jest.fn();
+    const setVisType = jest.fn();
+    const utils = render(
+      <ParaInput
+        para={para}
+        index={1}
+        runParaError={false}
+        textValueEditor={textValueEditor}
+        handleKeyPress={handleKeyPress}
+        startTime={para.visStartTime}
+        setStartTime={setStartTime}
+        endTime={para.visEndTime}
+        setEndTime={setEndTime}
+        setIsOutputStale={setIsOutputStale}
+        visOptions={[]}
+        selectedVisOption={[]}
+        setSelectedVisOption={setSelectedVisOption}
+        setVisType={setVisType}
+      />
+    );
+    expect(utils.container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders the visualization component', () => {
+    const para = sampleParsedParagraghs1[2];
+    const textValueEditor = jest.fn();
+    const handleKeyPress = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setIsOutputStale = jest.fn();
+    const setSelectedVisOption = jest.fn();
+    const setVisType = jest.fn();
+    const utils = render(
+      <ParaInput
+        para={para}
+        index={1}
+        runParaError={false}
+        textValueEditor={textValueEditor}
+        handleKeyPress={handleKeyPress}
+        startTime={para.visStartTime}
+        setStartTime={setStartTime}
+        endTime={para.visEndTime}
+        setEndTime={setEndTime}
+        setIsOutputStale={setIsOutputStale}
+        visOptions={visOptions}
+        selectedVisOption={[visOptions1[0]]}
+        setSelectedVisOption={setSelectedVisOption}
+        setVisType={setVisType}
+      />
+    );
+    expect(utils.container.firstChild).toMatchSnapshot();
+  });
+
+  it('types in the markdown component', () => {
+    const para = sampleParsedParagraghs1[0];
+    para.isSelected = true;
+    const textValueEditor = jest.fn();
+    const handleKeyPress = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setIsOutputStale = jest.fn();
+    const setSelectedVisOption = jest.fn();
+    const setVisType = jest.fn();
+    const utils = render(
+      <ParaInput
+        para={para}
+        index={1}
+        runParaError={false}
+        textValueEditor={textValueEditor}
+        handleKeyPress={handleKeyPress}
+        startTime={para.visStartTime}
+        setStartTime={setStartTime}
+        endTime={para.visEndTime}
+        setEndTime={setEndTime}
+        setIsOutputStale={setIsOutputStale}
+        visOptions={[]}
+        selectedVisOption={[]}
+        setSelectedVisOption={setSelectedVisOption}
+        setVisType={setVisType}
+      />
+    );
+    const textarea = utils.container.querySelectorAll('textarea#editorArea')[0];
+    fireEvent.change(textarea, { target: { value: 'test input' } });
+    expect(setIsOutputStale).toBeCalledWith(true);
+  });
+
+  it('clicks the visualization component', async () => {
+    const para = sampleParsedParagraghs1[2];
+    para.isSelected = true;
+    const textValueEditor = jest.fn();
+    const handleKeyPress = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setIsOutputStale = jest.fn();
+    const setSelectedVisOption = jest.fn();
+    const setVisType = jest.fn();
+    const utils = render(
+      <ParaInput
+        para={para}
+        index={1}
+        runParaError={false}
+        textValueEditor={textValueEditor}
+        handleKeyPress={handleKeyPress}
+        startTime={para.visStartTime}
+        setStartTime={setStartTime}
+        endTime={para.visEndTime}
+        setEndTime={setEndTime}
+        setIsOutputStale={setIsOutputStale}
+        visOptions={visOptions}
+        selectedVisOption={[visOptions2[0]]}
+        setSelectedVisOption={setSelectedVisOption}
+        setVisType={setVisType}
+      />
+    );
+    const datepicker = utils.container.querySelectorAll(
+      'button[data-test-subj="superDatePickerstartDatePopoverButton"]'
+    );
+    fireEvent.click(datepicker[0]);
+
+    utils.getByTestId('para-input-visualization-browse-button').click();
+    await waitFor(() => {
+      // modal should show up
+      utils.getByTestId('para-input-select-button').click();
+    });
+  });
+});
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx b/public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx
new file mode 100644
index 0000000000..167daf25a2
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/__tests__/para_output.test.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { sampleParsedParagraghs1 } from '../../helpers/__tests__/sampleDefaultNotebooks';
+import { ParaOutput } from '../para_output';
+
+describe('<ParaOutput /> spec', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders markdown outputs', () => {
+    const para = sampleParsedParagraghs1[0];
+    para.isSelected = true;
+    const setVisInput = jest.fn();
+    const utils = render(
+      <ParaOutput
+        key={para.uniqueId}
+        para={para}
+        visInput={jest.fn()}
+        setVisInput={setVisInput}
+        DashboardContainerByValueRenderer={jest.fn()}
+      />
+    );
+    expect(utils.container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders query outputs', () => {
+    const para = sampleParsedParagraghs1[3];
+    para.isSelected = true;
+    const setVisInput = jest.fn();
+    const utils = render(
+      <ParaOutput
+        key={para.uniqueId}
+        para={para}
+        visInput={jest.fn()}
+        setVisInput={setVisInput}
+        DashboardContainerByValueRenderer={jest.fn()}
+      />
+    );
+    expect(utils.container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders visualization outputs', () => {
+    const para = sampleParsedParagraghs1[2];
+    para.isSelected = true;
+    const setVisInput = jest.fn();
+    const utils = render(
+      <ParaOutput
+        key={para.uniqueId}
+        para={para}
+        visInput={{
+          timeRange: { from: '2020-07-21T18:37:44.710Z', to: '2020-08-20T18:37:44.710Z' },
+        }}
+        setVisInput={setVisInput}
+        DashboardContainerByValueRenderer={() => null}
+      />
+    );
+    expect(utils.container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders other types of outputs', () => {
+    const para = sampleParsedParagraghs1[0];
+    para.isSelected = true;
+    para.typeOut = ['HTML', 'TABLE', 'IMG', 'UNKNOWN', undefined];
+    para.out = ['', '', '', '', ''];
+    const setVisInput = jest.fn();
+    const utils = render(
+      <ParaOutput
+        key={para.uniqueId}
+        para={para}
+        visInput={jest.fn()}
+        setVisInput={setVisInput}
+        DashboardContainerByValueRenderer={jest.fn()}
+      />
+    );
+    expect(utils.container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/para_query_grid.test.tsx b/public/components/notebooks/components/paragraph_components/__tests__/para_query_grid.test.tsx
new file mode 100644
index 0000000000..6a59f8e6c4
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/__tests__/para_query_grid.test.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '@testing-library/react';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { QueryDataGridMemo } from '../para_query_grid';
+
+describe('<QueryDataGridMemo /> spec', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders the component', () => {
+    const props = {
+      rowCount: 5,
+      queryColumns: [
+        {
+          id: 'bytes',
+          displayAsText: 'bytes',
+        },
+      ],
+      visibleColumns: ['bytes'],
+      dataValues: [
+        {
+          bytes: 6219,
+        },
+        {
+          bytes: 6850,
+        },
+        {
+          bytes: 0,
+        },
+        {
+          bytes: 14113,
+        },
+        {
+          bytes: 2492,
+        },
+      ],
+    };
+    const utils = render(<QueryDataGridMemo setVisibleColumns={jest.fn()} {...props} />);
+    expect(utils.container.firstChild).toMatchSnapshot();
+  });
+});
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/paragraphs.test.tsx b/public/components/notebooks/components/paragraph_components/__tests__/paragraphs.test.tsx
new file mode 100644
index 0000000000..26a8e2c0a5
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/__tests__/paragraphs.test.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { fireEvent, render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import httpClientMock from '../../../../../../test/__mocks__/httpClientMock';
+import { sampleParsedParagraghs1 } from '../../helpers/__tests__/sampleDefaultNotebooks';
+import { Paragraphs } from '../paragraphs';
+
+jest.mock('../../../../../../../../src/plugins/embeddable/public', () => ({
+  ViewMode: {
+    EDIT: 'edit',
+    VIEW: 'view',
+  },
+}));
+
+describe('<Paragraphs /> spec', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders the component', () => {
+    const setPara = jest.fn();
+    const paragraphSelector = jest.fn();
+    const textValueEditor = jest.fn();
+    const handleKeyPress = jest.fn();
+    const addPara = jest.fn();
+    const DashboardContainerByValueRenderer = jest.fn();
+    const deleteVizualization = jest.fn();
+    const setSelectedViewId = jest.fn();
+    const deletePara = jest.fn();
+    const runPara = jest.fn();
+    const clonePara = jest.fn();
+    const movePara = jest.fn();
+    const para = sampleParsedParagraghs1[0];
+    para.isInputExpanded = true;
+    const utils = render(
+      <Paragraphs
+        ref={jest.fn()}
+        para={para}
+        setPara={setPara}
+        dateModified={'modified-date'}
+        index={0}
+        paraCount={2}
+        paragraphSelector={paragraphSelector}
+        textValueEditor={textValueEditor}
+        handleKeyPress={handleKeyPress}
+        addPara={addPara}
+        DashboardContainerByValueRenderer={DashboardContainerByValueRenderer}
+        deleteVizualization={deleteVizualization}
+        http={httpClientMock}
+        selectedViewId="view_both"
+        setSelectedViewId={setSelectedViewId}
+        deletePara={deletePara}
+        runPara={runPara}
+        clonePara={clonePara}
+        movePara={movePara}
+        showQueryParagraphError={false}
+        queryParagraphErrorMessage="error-message"
+      />
+    );
+    expect(utils.container.firstChild).toMatchSnapshot();
+
+    utils.getByLabelText('Open paragraph menu').click()
+    utils.getByText('Run input').click()
+    utils.getByLabelText('Open paragraph menu').click()
+    utils.getByText('Duplicate').click()
+    utils.getByLabelText('Open paragraph menu').click()
+    utils.getByText('Delete').click()
+  });
+});
diff --git a/public/components/notebooks/components/paragraph_components/para_input.tsx b/public/components/notebooks/components/paragraph_components/para_input.tsx
new file mode 100644
index 0000000000..5cc41ddd0d
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/para_input.tsx
@@ -0,0 +1,241 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiCodeBlock,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiSelectableOption,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiHighlight,
+  EuiLink,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiOverlayMask,
+  EuiSelectable,
+  EuiSpacer,
+  EuiSuperDatePicker,
+  EuiText,
+  EuiTextArea,
+} from '@elastic/eui';
+import { Input, Prompt } from '@nteract/presentational-components';
+import { uiSettingsService } from '../../../../../common/utils';
+import React, { useState } from 'react';
+import { ParaType } from '../../../../../common/types/notebooks';
+
+/*
+ * "ParaInput" component is used by notebook to populate paragraph inputs for an open notebook.
+ *
+ * Props taken in as params are:
+ * para - parsed paragraph from notebook
+ * index - index of paragraph in the notebook
+ * textValueEditor - function for handling input in textarea
+ * handleKeyPress - function for handling key press like "Shift-key+Enter" to run paragraph
+ *
+ * Input component of nteract used as a container for notebook UI.
+ * https://components.nteract.io/#input
+ */
+
+export const ParaInput = (props: {
+  para: ParaType;
+  index: number;
+  runParaError: boolean;
+  textValueEditor: (evt: React.ChangeEvent<HTMLTextAreaElement>, index: number) => void;
+  handleKeyPress: (evt: React.KeyboardEvent<Element>, para: any, index: number) => void;
+  startTime: string;
+  setStartTime: (startTime: string) => void;
+  endTime: string;
+  setEndTime: (endTime: string) => void;
+  setIsOutputStale: (isStale?: boolean) => void;
+  visOptions: EuiComboBoxOptionOption[];
+  selectedVisOption: EuiComboBoxOptionOption[];
+  setSelectedVisOption: (newOption: EuiComboBoxOptionOption[]) => void;
+  setVisType: React.Dispatch<React.SetStateAction<string>>;
+}) => {
+  const { para, index, runParaError, textValueEditor, handleKeyPress } = props;
+
+  const inputPlaceholderString =
+    'Type %md, %sql or %ppl on the first line to define the input type. \nCode block starts here.';
+
+  const renderParaInput = () => {
+    return (
+      <div style={{ width: '100%' }}>
+        {/* If the para is selected show the editor else display the code in the paragraph */}
+        {para.isSelected ? (
+          <EuiTextArea
+            placeholder={inputPlaceholderString}
+            id="editorArea"
+            className="editorArea"
+            fullWidth
+            isInvalid={runParaError}
+            onChange={(evt) => {
+              textValueEditor(evt, index);
+              props.setIsOutputStale(true);
+            }}
+            onKeyPress={(evt) => handleKeyPress(evt, para, index)}
+            value={para.inp}
+            autoFocus
+          />
+        ) : (
+          <EuiCodeBlock
+            language={para.inp.match(/^%(sql|md)/)?.[1]}
+            overflowHeight={200}
+            paddingSize="s"
+          >
+            {para.inp}
+          </EuiCodeBlock>
+        )}
+      </div>
+    );
+  };
+
+  const renderVisInput = () => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [selectableOptions, setSelectableOptions] = useState<EuiSelectableOption[]>([]);
+    const [selectableError, setSelectableError] = useState(false);
+
+    const onSelect = () => {
+      const selectedOptions = selectableOptions.filter((opt) => opt.checked === 'on');
+      if (selectedOptions.length === 0) {
+        setSelectableError(true);
+        return;
+      }
+      props.setIsOutputStale(true);
+      if (selectedOptions.length > 0) props.setVisType(selectedOptions[0].className);
+      props.setSelectedVisOption(selectedOptions);
+      setIsModalOpen(false);
+    };
+
+    const renderOption = (option: EuiComboBoxOptionOption, searchValue: string) => {
+      let visURL = `visualize#/edit/${option.key}?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'${props.startTime}',to:'${props.endTime}'))`;
+      if (option.className === 'OBSERVABILITY_VISUALIZATION') {
+        visURL = `#/event_analytics/explorer/${option.key}`;
+      }
+      return (
+        <EuiLink href={visURL} target="_blank">
+          <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>
+        </EuiLink>
+      );
+    };
+
+    return (
+      <>
+        <EuiFlexGroup alignItems="flexEnd" gutterSize="s">
+          <EuiFlexItem grow={6}>
+            <EuiFormRow label="Title" fullWidth>
+              <EuiComboBox
+                placeholder="Find visualization"
+                singleSelection={{ asPlainText: true }}
+                options={props.visOptions}
+                selectedOptions={props.selectedVisOption}
+                onChange={(newOption: EuiComboBoxOptionOption[]) => {
+                  if (newOption.length > 0) props.setVisType(newOption[0].className);
+                  props.setSelectedVisOption(newOption);
+                  props.setIsOutputStale(true);
+                }}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              data-test-subj="para-input-visualization-browse-button"
+              onClick={() => {
+                setSelectableOptions([
+                  ...props.visOptions[0].options,
+                  ...props.visOptions[1].options,
+                ]);
+                setSelectableError(false);
+                setIsModalOpen(true);
+              }}
+            >
+              Browse
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem grow={2} />
+          <EuiFlexItem grow={9}>
+            <EuiFormRow label="Date range" fullWidth>
+              <EuiSuperDatePicker
+                start={props.startTime}
+                end={props.endTime}
+                showUpdateButton={false}
+                dateFormat={uiSettingsService.get('dateFormat')}
+                onTimeChange={(e) => {
+                  props.setStartTime(e.start);
+                  props.setEndTime(e.end);
+                  props.setIsOutputStale(true);
+                }}
+              />
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem />
+        </EuiFlexGroup>
+
+        {isModalOpen && (
+          <EuiOverlayMask>
+            <EuiModal onClose={() => setIsModalOpen(false)} style={{ width: 500 }}>
+              <EuiModalHeader>
+                <EuiModalHeaderTitle>Browse visualizations</EuiModalHeaderTitle>
+              </EuiModalHeader>
+
+              <EuiModalBody>
+                <EuiSelectable
+                  aria-label="Searchable Visualizations"
+                  searchable
+                  options={selectableOptions}
+                  singleSelection={true}
+                  renderOption={renderOption}
+                  onChange={(newOptions) => {
+                    setSelectableOptions(newOptions);
+                    setSelectableError(false);
+                  }}
+                >
+                  {(list, search) => (
+                    <>
+                      {search}
+                      {list}
+                    </>
+                  )}
+                </EuiSelectable>
+                {selectableError && (
+                  <>
+                    <EuiSpacer size="s" />
+                    <EuiText color="danger" size="s">
+                      {'Visualization is required.'}
+                    </EuiText>
+                  </>
+                )}
+              </EuiModalBody>
+
+              <EuiModalFooter>
+                <EuiButtonEmpty onClick={() => setIsModalOpen(false)}>Cancel</EuiButtonEmpty>
+                <EuiButton
+                  data-test-subj="para-input-select-button"
+                  onClick={() => onSelect()}
+                  fill
+                >
+                  Select
+                </EuiButton>
+              </EuiModalFooter>
+            </EuiModal>
+          </EuiOverlayMask>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <Input hidden={para.isInputHidden}>
+      <Prompt blank={true} running={para.isRunning} queued={para.inQueue} />
+      {para.isVizualisation ? renderVisInput() : renderParaInput()}
+    </Input>
+  );
+};
diff --git a/public/components/notebooks/components/paragraph_components/para_output.tsx b/public/components/notebooks/components/paragraph_components/para_output.tsx
new file mode 100644
index 0000000000..0a3776e9fc
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/para_output.tsx
@@ -0,0 +1,189 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiCodeBlock, EuiSpacer, EuiText } from '@elastic/eui';
+import MarkdownRender from '@nteract/markdown';
+import { Media } from '@nteract/outputs';
+import moment from 'moment';
+import { VisualizationContainer } from '../../../../components/custom_panels/panel_modules/visualization_container';
+import PPLService from '../../../../services/requests/ppl';
+import React, { useState } from 'react';
+import { CoreStart } from '../../../../../../../src/core/public';
+import {
+  DashboardContainerInput,
+  DashboardStart,
+} from '../../../../../../../src/plugins/dashboard/public';
+import { ParaType } from '../../../../../common/types/notebooks';
+import { uiSettingsService } from '../../../../../common/utils';
+import { QueryDataGridMemo } from './para_query_grid';
+
+/*
+ * "ParaOutput" component is used by notebook to populate paragraph outputs for an open notebook.
+ *
+ * Props taken in as params are:
+ * para - parsed paragraph from notebook
+ *
+ * Outputs component of nteract used as a container for notebook UI.
+ * https://components.nteract.io/#outputs
+ */
+export const ParaOutput = (props: {
+  http: CoreStart['http'];
+  pplService: PPLService;
+  para: ParaType;
+  visInput: DashboardContainerInput;
+  setVisInput: (input: DashboardContainerInput) => void;
+  DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
+}) => {
+  const createQueryColumns = (jsonColumns: any[]) => {
+    let index = 0;
+    let datagridColumns = [];
+    for (index = 0; index < jsonColumns.length; ++index) {
+      const datagridColumnObject = {
+        id: jsonColumns[index].name,
+        displayAsText: jsonColumns[index].name,
+      };
+      datagridColumns.push(datagridColumnObject);
+    }
+    return datagridColumns;
+  };
+
+  const getQueryOutputData = (queryObject: any) => {
+    const data = [];
+    let index = 0;
+    let schemaIndex = 0;
+    for (index = 0; index < queryObject.datarows.length; ++index) {
+      let datarowValue = {};
+      for (schemaIndex = 0; schemaIndex < queryObject.schema.length; ++schemaIndex) {
+        const columnName = queryObject.schema[schemaIndex].name;
+        if (typeof queryObject.datarows[index][schemaIndex] === 'object') {
+          datarowValue[columnName] = JSON.stringify(queryObject.datarows[index][schemaIndex]);
+        } else if (typeof queryObject.datarows[index][schemaIndex] === 'boolean') {
+          datarowValue[columnName] = queryObject.datarows[index][schemaIndex].toString();
+        } else {
+          datarowValue[columnName] = queryObject.datarows[index][schemaIndex];
+        }
+      }
+      data.push(datarowValue);
+    }
+    return data;
+  };
+
+  const outputBody = (key: string, typeOut: string, val: string) => {
+    /* Returns a component to render paragraph outputs using the para.typeOut property
+     * Currently supports HTML, TABLE, IMG
+     * TODO: add table rendering
+     */
+    const dateFormat = uiSettingsService.get('dateFormat');
+
+    if (typeOut !== undefined) {
+      switch (typeOut) {
+        case 'QUERY':
+          const inputQuery = para.inp.substring(4, para.inp.length);
+          const queryObject = JSON.parse(val);
+          if (queryObject.hasOwnProperty('error')) {
+            return <EuiCodeBlock key={key}>{val}</EuiCodeBlock>;
+          } else {
+            const columns = createQueryColumns(queryObject.schema);
+            const data = getQueryOutputData(queryObject);
+            const [visibleColumns, setVisibleColumns] = useState(() => columns.map(({ id }) => id));
+            return (
+              <div>
+                <EuiText key={'query-input-key'}>
+                  <b>{inputQuery}</b>
+                </EuiText>
+                <EuiSpacer />
+                <QueryDataGridMemo
+                  key={key}
+                  rowCount={queryObject.datarows.length}
+                  queryColumns={columns}
+                  visibleColumns={visibleColumns}
+                  setVisibleColumns={setVisibleColumns}
+                  dataValues={data}
+                />
+              </div>
+            );
+          }
+        case 'MARKDOWN':
+          return (
+            <EuiText key={key} className="markdown-output-text">
+              <MarkdownRender source={val} />
+            </EuiText>
+          );
+        case 'VISUALIZATION':
+          let from = moment(visInput?.timeRange?.from).format(dateFormat);
+          let to = moment(visInput?.timeRange?.to).format(dateFormat);
+          from = from === 'Invalid date' ? visInput.timeRange.from : from;
+          to = to === 'Invalid date' ? visInput.timeRange.to : to;
+          return (
+            <>
+              <EuiText size="s" style={{ marginLeft: 9 }}>
+                {`${from} - ${to}`}
+              </EuiText>
+              <DashboardContainerByValueRenderer
+                key={key}
+                input={visInput}
+                onInputUpdated={setVisInput}
+              />
+            </>
+          );
+        case 'OBSERVABILITY_VISUALIZATION':
+          let fromObs = moment(visInput?.timeRange?.from).format(dateFormat);
+          let toObs = moment(visInput?.timeRange?.to).format(dateFormat);
+          fromObs = fromObs === 'Invalid date' ? visInput.timeRange.from : fromObs;
+          toObs = toObs === 'Invalid date' ? visInput.timeRange.to : toObs;
+          const onEditClick = (savedVisualizationId: string) => {
+            window.location.assign(`#/event_analytics/explorer/${savedVisualizationId}`);
+          };
+          return (
+            <>
+              <EuiText size="s" style={{ marginLeft: 9 }}>
+                {`${fromObs} - ${toObs}`}
+              </EuiText>
+              <div style={{ height: '300px', width: '100%' }}>
+                <VisualizationContainer
+                  http={props.http}
+                  editMode={false}
+                  visualizationId={''}
+                  onEditClick={onEditClick}
+                  savedVisualizationId={para.visSavedObjId}
+                  pplService={props.pplService}
+                  fromTime={para.visStartTime}
+                  toTime={para.visEndTime}
+                  onRefresh={false}
+                  pplFilterValue={''}
+                  usedInNotebooks={true}
+                />
+              </div>
+            </>
+          );
+        case 'HTML':
+          return (
+            <EuiText key={key}>
+              <Media.HTML data={val} />
+            </EuiText>
+          );
+        case 'TABLE':
+          return <pre key={key}>{val}</pre>;
+        case 'IMG':
+          return <img alt="" src={'data:image/gif;base64,' + val} key={key} />;
+        default:
+          return <pre key={key}>{val}</pre>;
+      }
+    } else {
+      console.log('output not supported', typeOut);
+      return <pre />;
+    }
+  };
+
+  const { para, DashboardContainerByValueRenderer, visInput, setVisInput } = props;
+
+  return !para.isOutputHidden ? (
+    <>
+      {para.typeOut.map((typeOut: string, tIdx: number) => {
+        return outputBody(para.uniqueId + '_paraOutputBody', typeOut, para.out[tIdx]);
+      })}
+    </>
+  ) : null;
+};
diff --git a/public/components/notebooks/components/paragraph_components/para_query_grid.tsx b/public/components/notebooks/components/paragraph_components/para_query_grid.tsx
new file mode 100644
index 0000000000..8b8425278f
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/para_query_grid.tsx
@@ -0,0 +1,128 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import $ from 'jquery';
+import { 
+  EuiDataGrid,
+  EuiLoadingSpinner,
+  EuiSpacer
+} from '@elastic/eui';
+
+type QueryDataGridProps = {
+  rowCount: number,
+  queryColumns: Array<any>,
+  visibleColumns: Array<any>,
+  setVisibleColumns: (visibleColumns: string[]) => void,
+  dataValues: Array<any>,
+}
+
+type RenderCellValueProps = {
+  rowIndex: number,
+  columnId: string
+}
+
+function QueryDataGrid(props: QueryDataGridProps) {
+  const {
+    rowCount,
+    queryColumns,
+    visibleColumns,
+    setVisibleColumns,
+    dataValues,
+  } = props;
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  // ** Sorting config
+  const [sortingColumns, setSortingColumns] = useState([]);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const onSort = useCallback(
+    (sortingColumns) => {
+      setSortingColumns(sortingColumns);
+    },
+    [setSortingColumns]
+  );
+
+  const onChangeItemsPerPage = useCallback(
+    (pageSize) =>
+      setPagination((pagination) => ({
+        ...pagination,
+        pageSize,
+        pageIndex: 0,
+      })),
+    [setPagination]
+  );
+
+  const onChangePage = useCallback(
+    (pageIndex) =>
+      setPagination((pagination) => ({ ...pagination, pageIndex })),
+    [setPagination]
+  );
+
+  const renderCellValue = useMemo(() => {
+    return ({ rowIndex, columnId }: RenderCellValueProps) => {
+      return dataValues.hasOwnProperty(rowIndex)
+        ? dataValues[rowIndex][columnId]
+        : null;
+    };
+  }, []);
+
+  const getUpdatedVisibleColumns = (queryColumns: Array<Object>) => {
+    let updatedVisibleColumns = [];
+    for (let index = 0; index < queryColumns.length; ++index) {
+      updatedVisibleColumns.push(queryColumns[index].displayAsText);
+    }
+    return updatedVisibleColumns;
+  }
+
+  
+  useEffect(() => {
+    if ($('.euiDataGrid__overflow').is(':visible')) {
+      setIsVisible(true);
+    }
+    setTimeout(() => {
+      if ($('.euiDataGrid__overflow').is(':visible')) {
+        setIsVisible(true);
+      }
+    }, 1000);
+    setVisibleColumns(getUpdatedVisibleColumns(queryColumns));
+  }, []);
+
+  const displayLoadingSpinner = (!isVisible) ? (
+    <>
+      <EuiLoadingSpinner size="xl"/>
+      <EuiSpacer />
+    </>
+  ) : null;
+
+  return (
+    <div id="queryDataGrid">
+      {displayLoadingSpinner}
+      <EuiDataGrid
+        aria-label='Query datagrid'
+        columns={queryColumns}
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
+        rowCount={rowCount}
+        renderCellValue={renderCellValue}
+        inMemory={{ level: 'sorting' }}
+        sorting={{ columns: sortingColumns, onSort }}
+        pagination={{
+          ...pagination,
+          pageSizeOptions: [10, 20, 50],
+          onChangeItemsPerPage: onChangeItemsPerPage,
+          onChangePage: onChangePage,
+        }}
+      />
+    </div>
+  )
+}
+
+function queryDataGridPropsAreEqual(prevProps: QueryDataGridProps, nextProps: QueryDataGridProps) {
+  return prevProps.rowCount === nextProps.rowCount
+    && JSON.stringify(prevProps.queryColumns) === JSON.stringify(nextProps.queryColumns)
+    && JSON.stringify(prevProps.visibleColumns) === JSON.stringify(nextProps.visibleColumns)
+    && JSON.stringify(prevProps.dataValues) === JSON.stringify(nextProps.dataValues)
+}
+
+export const QueryDataGridMemo = React.memo(QueryDataGrid, queryDataGridPropsAreEqual);
\ No newline at end of file
diff --git a/public/components/notebooks/components/paragraph_components/paragraphs.tsx b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
new file mode 100644
index 0000000000..7926ef2633
--- /dev/null
+++ b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
@@ -0,0 +1,569 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiComboBoxOptionOption,
+  EuiContextMenu,
+  EuiContextMenuPanelDescriptor,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiHorizontalRule,
+  EuiIcon,
+  EuiLink,
+  EuiPanel,
+  EuiPopover,
+  EuiSpacer,
+  EuiText,
+  htmlIdGenerator,
+} from '@elastic/eui';
+import moment from 'moment';
+import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { CoreStart } from '../../../../../../../src/core/public';
+import {
+  DashboardContainerInput,
+  DashboardStart,
+} from '../../../../../../../src/plugins/dashboard/public';
+import { ViewMode } from '../../../../../../../src/plugins/embeddable/public';
+import { NOTEBOOKS_API_PREFIX } from '../../../../../common/constants/notebooks';
+import {
+  PPL_DOCUMENTATION_URL,
+  SQL_DOCUMENTATION_URL,
+  UI_DATE_FORMAT,
+} from '../../../../../common/constants/shared';
+import { ParaType } from '../../../../../common/types/notebooks';
+import { uiSettingsService } from '../../../../../common/utils';
+import { ParaInput } from './para_input';
+import { ParaOutput } from './para_output';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../../common/constants/custom_panels';
+import PPLService from '../../../../services/requests/ppl';
+import _ from 'lodash';
+
+/*
+ * "Paragraphs" component is used to render cells of the notebook open and "add para div" between paragraphs
+ *
+ * Props taken in as params are:
+ * para - parsed paragraph from notebook
+ * dateModified - last modified time of paragraph
+ * index - index of paragraph in the notebook
+ * paragraphSelector - function used to select a para on click
+ * textValueEditor - function for handling input in textarea
+ * handleKeyPress - function for handling key press like "Shift-key+Enter" to run paragraph
+ * addPara - function to add a new para onclick - "Add Para" Div
+ * DashboardContainerByValueRenderer - Dashboard container renderer for visualization
+ * deleteVizualization - function to delete a para
+ * http object - for making API requests
+ * selectedViewId - selected view: view_both, input_only, output_only
+ * deletePara - function to delete the selected para
+ * runPara - function to run the selected para
+ * clonePara - function to clone the selected para
+ * clearPara - function to clear output of all the paras
+ * movePara - function to move a paragraph at an index to another index
+ *
+ * Cell component of nteract used as a container for paragraphs in notebook UI.
+ * https://components.nteract.io/#cell
+ */
+type ParagraphProps = {
+  pplService: PPLService;
+  para: ParaType;
+  setPara: (para: ParaType) => void;
+  dateModified: string;
+  index: number;
+  paraCount: number;
+  paragraphSelector: (index: number) => void;
+  textValueEditor: (evt: React.ChangeEvent<HTMLTextAreaElement>, index: number) => void;
+  handleKeyPress: (evt: React.KeyboardEvent<Element>, para: ParaType, index: number) => void;
+  addPara: (index: number, newParaContent: string, inputType: string) => void;
+  DashboardContainerByValueRenderer: DashboardStart['DashboardContainerByValueRenderer'];
+  deleteVizualization: (uniqueId: string) => void;
+  http: CoreStart['http'];
+  selectedViewId: string;
+  setSelectedViewId: (viewId: string, scrollToIndex?: number) => void;
+  deletePara: (para: ParaType, index: number) => void;
+  runPara: (para: ParaType, index: number, vizObjectInput?: string, paraType?: string) => void;
+  clonePara: (para: ParaType, index: number) => void;
+  movePara: (index: number, targetIndex: number) => void;
+  showQueryParagraphError: boolean;
+  queryParagraphErrorMessage: string;
+};
+
+export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
+  const {
+    pplService,
+    para,
+    index,
+    paragraphSelector,
+    textValueEditor,
+    handleKeyPress,
+    DashboardContainerByValueRenderer,
+    showQueryParagraphError,
+    queryParagraphErrorMessage,
+    http,
+  } = props;
+
+  const [visOptions, setVisOptions] = useState<EuiComboBoxOptionOption[]>([]); // options for loading saved visualizations
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [runParaError, setRunParaError] = useState(false);
+  const [selectedVisOption, setSelectedVisOption] = useState<EuiComboBoxOptionOption[]>([]);
+  const [visInput, setVisInput] = useState(undefined);
+  const [visType, setVisType] = useState('');
+
+  // output is available if it's not cleared and vis paragraph has a selected visualization
+  const isOutputAvailable =
+    (para.out.length > 0 && para.out[0] !== '') ||
+    (para.isVizualisation && para.typeOut.length > 0 && visInput !== undefined);
+
+  useImperativeHandle(ref, () => ({
+    runParagraph() {
+      return onRunPara();
+    },
+  }));
+
+  const fetchVisualizations = async () => {
+    let opt1: EuiComboBoxOptionOption[] = [];
+    let opt2: EuiComboBoxOptionOption[] = [];
+    await http
+      .get(`${NOTEBOOKS_API_PREFIX}/visualizations`)
+      .then((res) => {
+        opt1 = res.savedVisualizations.map((vizObject) => ({
+          label: vizObject.label,
+          key: vizObject.key,
+          className: 'VISUALIZATION',
+        }));
+      })
+      .catch((err) => console.error('Fetching dashboard visualization issue', err.body.message));
+
+    await http
+      .get(`${CUSTOM_PANELS_API_PREFIX}/visualizations`)
+      .then((res) => {
+        const noAppVisualizations = res.visualizations.filter((vis) => {
+          return !!!vis.application_id;
+        });
+        opt2 = noAppVisualizations.map((vizObject) => ({
+          label: vizObject.name,
+          key: vizObject.id,
+          className: 'OBSERVABILITY_VISUALIZATION',
+        }));
+      })
+      .catch((err) =>
+        console.error('Fetching observability visualization issue', err.body.message)
+      );
+
+    const allVisualizations = [
+      { label: 'Dashboards Visualizations', options: opt1 },
+      { label: 'Observability Visualizations', options: opt2 },
+    ];
+    setVisOptions(allVisualizations);
+
+    const selectedObject = _.filter([...opt1, ...opt2], {
+      key: para.visSavedObjId,
+    });
+    if (selectedObject.length > 0) {
+      setVisType(selectedObject.className);
+      setSelectedVisOption(selectedObject);
+    }
+  };
+
+  useEffect(() => {
+    if (para.isVizualisation) {
+      if (para.visSavedObjId !== '') setVisInput(JSON.parse(para.vizObjectInput));
+      fetchVisualizations();
+    }
+  }, []);
+
+  const createDashboardVizObject = (objectId: string) => {
+    const vizUniqueId = htmlIdGenerator()();
+    // a dashboard container object for new visualization
+    const newVizObject: DashboardContainerInput = {
+      viewMode: ViewMode.VIEW,
+      panels: {
+        '1': {
+          gridData: {
+            x: 0,
+            y: 0,
+            w: 50,
+            h: 20,
+            i: '1',
+          },
+          type: 'visualization',
+          explicitInput: {
+            id: '1',
+            savedObjectId: objectId,
+          },
+        },
+      },
+      isFullScreenMode: false,
+      filters: [],
+      useMargins: false,
+      id: vizUniqueId,
+      timeRange: {
+        to: para.visEndTime,
+        from: para.visStartTime,
+      },
+      title: 'embed_viz_' + vizUniqueId,
+      query: {
+        query: '',
+        language: 'lucene',
+      },
+      refreshConfig: {
+        pause: true,
+        value: 15,
+      },
+    };
+    return newVizObject;
+  };
+
+  const onRunPara = () => {
+    if (
+      (!para.isVizualisation && !para.inp) ||
+      (para.isVizualisation && selectedVisOption.length === 0)
+    ) {
+      setRunParaError(true);
+      return;
+    }
+    let newVisObjectInput = undefined;
+    if (para.isVizualisation) {
+      const inputTemp = createDashboardVizObject(selectedVisOption[0].key);
+      setVisInput(inputTemp);
+      setRunParaError(false);
+      newVisObjectInput = JSON.stringify(inputTemp);
+    }
+    setRunParaError(false);
+    return props.runPara(para, index, newVisObjectInput, visType);
+  };
+
+  const setStartTime = (time: string) => {
+    const newPara = props.para;
+    newPara.visStartTime = time;
+    props.setPara(newPara);
+  };
+  const setEndTime = (time: string) => {
+    const newPara = props.para;
+    newPara.visEndTime = time;
+    props.setPara(newPara);
+  };
+  const setIsOutputStale = (isStale: boolean) => {
+    const newPara = props.para;
+    newPara.isOutputStale = isStale;
+    props.setPara(newPara);
+  };
+
+  // do not show output if it is a visualization paragraph and visInput is not loaded yet
+  const paraOutput = (!para.isVizualisation || visInput) && (
+    <ParaOutput
+      http={http}
+      pplService={pplService}
+      key={para.uniqueId}
+      para={para}
+      visInput={visInput}
+      setVisInput={setVisInput}
+      DashboardContainerByValueRenderer={DashboardContainerByValueRenderer}
+    />
+  );
+
+  // do not show input and EuiPanel if view mode is output_only
+  if (props.selectedViewId === 'output_only') {
+    return paraOutput;
+  }
+
+  const renderParaHeader = (type: string, index: number) => {
+    const panels: EuiContextMenuPanelDescriptor[] = [
+      {
+        id: 0,
+        title: 'Paragraph actions',
+        items: [
+          {
+            name: 'Insert paragraph above',
+            panel: 1,
+          },
+          {
+            name: 'Insert paragraph below',
+            panel: 2,
+          },
+          {
+            name: 'Run input',
+            onClick: () => {
+              setIsPopoverOpen(false);
+              onRunPara();
+            },
+          },
+          {
+            name: 'Move up',
+            disabled: index === 0,
+            onClick: () => {
+              setIsPopoverOpen(false);
+              props.movePara(index, index - 1);
+            },
+          },
+          {
+            name: 'Move to top',
+            disabled: index === 0,
+            onClick: () => {
+              setIsPopoverOpen(false);
+              props.movePara(index, 0);
+            },
+          },
+          {
+            name: 'Move down',
+            disabled: index === props.paraCount - 1,
+            onClick: () => {
+              setIsPopoverOpen(false);
+              props.movePara(index, index + 1);
+            },
+          },
+          {
+            name: 'Move to bottom',
+            disabled: index === props.paraCount - 1,
+            onClick: () => {
+              setIsPopoverOpen(false);
+              props.movePara(index, props.paraCount - 1);
+            },
+          },
+          {
+            name: 'Duplicate',
+            onClick: () => {
+              setIsPopoverOpen(false);
+              props.clonePara(para, index + 1);
+            },
+          },
+          {
+            name: 'Delete',
+            onClick: () => {
+              setIsPopoverOpen(false);
+              props.deletePara(para, index);
+            },
+          },
+        ],
+      },
+      {
+        id: 1,
+        title: 'Insert paragraph above',
+        items: [
+          {
+            name: 'Code block',
+            onClick: () => {
+              setIsPopoverOpen(false);
+              props.addPara(index, '', 'CODE');
+            },
+          },
+          {
+            name: 'Visualization',
+            onClick: () => {
+              setIsPopoverOpen(false);
+              props.addPara(index, '', 'VISUALIZATION');
+            },
+          },
+        ],
+      },
+      {
+        id: 2,
+        title: 'Insert paragraph below',
+        items: [
+          {
+            name: 'Code block',
+            onClick: () => {
+              setIsPopoverOpen(false);
+              props.addPara(index + 1, '', 'CODE');
+            },
+          },
+          {
+            name: 'Visualization',
+            onClick: () => {
+              setIsPopoverOpen(false);
+              props.addPara(index + 1, '', 'VISUALIZATION');
+            },
+          },
+        ],
+      },
+    ];
+
+    return (
+      <>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiText style={{ fontSize: 17 }}>
+              {`[${index + 1}] ${type} `}
+              <EuiButtonIcon
+                aria-label="Toggle show input"
+                iconType={para.isInputExpanded ? 'arrowUp' : 'arrowDown'}
+                onClick={() => {
+                  const newPara = props.para;
+                  newPara.isInputExpanded = !newPara.isInputExpanded;
+                  props.setPara(newPara);
+                }}
+              />
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiPopover
+              panelPaddingSize="none"
+              withTitle
+              button={
+                <EuiButtonIcon
+                  aria-label="Open paragraph menu"
+                  iconType="boxesHorizontal"
+                  onClick={() => setIsPopoverOpen(true)}
+                />
+              }
+              isOpen={isPopoverOpen}
+              closePopover={() => setIsPopoverOpen(false)}
+            >
+              <EuiContextMenu initialPanelId={0} panels={panels} />
+            </EuiPopover>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="s" />
+      </>
+    );
+  };
+
+  const renderOutputTimestampMessage = () => {
+    if (props.selectedViewId === 'view_both') {
+      return (
+        <>
+          <EuiFlexItem grow={false} />
+          <EuiFlexItem grow={false}>
+            {para.isOutputStale ? (
+              <EuiIcon type="questionInCircle" color="primary" />
+            ) : (
+              <EuiIcon type="check" color="secondary" />
+            )}
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText color="subdued">
+              {`Last successful run ${moment(props.dateModified).format(UI_DATE_FORMAT)}.`}
+            </EuiText>
+          </EuiFlexItem>
+        </>
+      );
+    } else {
+      // render message when view mode is input_only
+      return (
+        <>
+          <EuiFlexItem grow={false} />
+          <EuiFlexItem grow={false}>
+            <EuiIcon type="questionInCircle" color="primary" />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText color="subdued">
+              {`Output available from ${moment(props.dateModified).format(UI_DATE_FORMAT)}`}
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText>
+              <EuiLink onClick={() => props.setSelectedViewId('view_both', index)}>
+                View both
+              </EuiLink>
+            </EuiText>
+          </EuiFlexItem>
+        </>
+      );
+    }
+  };
+
+  const sqlIcon = (
+    <EuiLink href={SQL_DOCUMENTATION_URL} target="_blank">
+      {' '}
+      SQL <EuiIcon type="popout" size="s" />{' '}
+    </EuiLink>
+  );
+
+  const pplIcon = (
+    <EuiLink href={PPL_DOCUMENTATION_URL} target="_blank">
+      {' '}
+      PPL <EuiIcon type="popout" size="s" />
+    </EuiLink>
+  );
+
+  const paragraphLabel = !para.isVizualisation ? (
+    <EuiText size="s">
+      Specify the input language on the first line using %[language type]. Supported languages
+      include markdown, {sqlIcon} and {pplIcon}.
+    </EuiText>
+  ) : null;
+
+  const queryErrorMessage = queryParagraphErrorMessage.includes('SQL') ? (
+    <EuiText size="s">
+      {queryParagraphErrorMessage}. Learn More{' '}
+      <EuiLink href={SQL_DOCUMENTATION_URL} target="_blank">
+        <EuiIcon type="popout" size="s" />
+      </EuiLink>
+    </EuiText>
+  ) : (
+    <EuiText size="s">
+      {queryParagraphErrorMessage}.{' '}
+      <EuiLink href={PPL_DOCUMENTATION_URL} target="_blank">
+        Learn More <EuiIcon type="popout" size="s" />
+      </EuiLink>
+    </EuiText>
+  );
+
+  const paraClass = `notebooks-paragraph notebooks-paragraph-${
+    uiSettingsService.get('theme:darkMode') ? 'dark' : 'light'
+  }`;
+
+  return (
+    <>
+      <EuiPanel>
+        {renderParaHeader(!para.isVizualisation ? 'Code block' : 'Visualization', index)}
+        <div key={index} className={paraClass} onClick={() => paragraphSelector(index)}>
+          {para.isInputExpanded && (
+            <>
+              <EuiSpacer size="s" />
+              <EuiFormRow
+                fullWidth={true}
+                helpText={paragraphLabel}
+                isInvalid={showQueryParagraphError}
+                error={queryErrorMessage}
+              >
+                <ParaInput
+                  para={para}
+                  index={index}
+                  runParaError={runParaError}
+                  textValueEditor={textValueEditor}
+                  handleKeyPress={handleKeyPress}
+                  startTime={para.visStartTime}
+                  setStartTime={setStartTime}
+                  endTime={para.visEndTime}
+                  setEndTime={setEndTime}
+                  setIsOutputStale={setIsOutputStale}
+                  visOptions={visOptions}
+                  selectedVisOption={selectedVisOption}
+                  setSelectedVisOption={setSelectedVisOption}
+                  setVisType={setVisType}
+                />
+              </EuiFormRow>
+              {runParaError && (
+                <EuiText color="danger" size="s">{`${
+                  para.isVizualisation ? 'Visualization' : 'Input'
+                } is required.`}</EuiText>
+              )}
+              <EuiSpacer size="m" />
+              <EuiFlexGroup alignItems="center" gutterSize="s">
+                <EuiFlexItem grow={false}>
+                  <EuiButton onClick={() => onRunPara()} fill>
+                    {isOutputAvailable ? 'Refresh' : 'Run'}
+                  </EuiButton>
+                </EuiFlexItem>
+                {isOutputAvailable && renderOutputTimestampMessage()}
+              </EuiFlexGroup>
+              <EuiSpacer size="m" />
+            </>
+          )}
+          {props.selectedViewId !== 'input_only' && isOutputAvailable && (
+            <>
+              <EuiHorizontalRule margin="none" />
+              <div style={{ opacity: para.isOutputStale ? 0.5 : 1, padding: '15px' }}>
+                {paraOutput}
+              </div>
+            </>
+          )}
+        </div>
+      </EuiPanel>
+    </>
+  );
+});
diff --git a/public/components/notebooks/docs/dev/API_Documentation.md b/public/components/notebooks/docs/dev/API_Documentation.md
new file mode 100644
index 0000000000..31aec29f68
--- /dev/null
+++ b/public/components/notebooks/docs/dev/API_Documentation.md
@@ -0,0 +1,706 @@
+# Notebooks API Design Documentation
+
+## Contents
+
+1. [**Notebook Examples**](#notebook-examples)
+2. [**Note APIs**](#notes-apis)
+3. [**Paragraph APIs**](#paragraph-apis)
+4. [**Future Work**](#future-work)
+5. [**References**](#references)
+
+## OpenSearch Dashboards Notebooks REST APIs
+
+**_NOTE:_** The Notebook/Paragraph structure used in body & responses, are with Zeppelin Backend Adaptor. The structure of noteboook and paragraph changes with change in backend, but format of request body and response body remains the same.
+
+## Notebook Examples
+
+- **Default Notebook**
+
+```
+{
+  id: 'note_5f4b9eed-5898-4b39-ba6c-755c0fadd84e',
+  dateCreated: '2020-08-20T18:00:59.845Z',
+  name: 'test 1',
+  dateModified: '2020-08-20T18:37:56.844Z',
+  pluginVersion: '7.9.0',
+  backend: 'Default',
+  paragraphs: [
+    {
+      output: [{ result: '# Type your input here', outputType: 'MARKDOWN', execution_time: '0s' }],
+      input: { inputText: '# Type your input here', inputType: 'MARKDOWN' },
+      dateCreated: '2020-08-20T18:00:59.845Z',
+      dateModified: '2020-08-20T18:00:59.845Z',
+      id: 'paragraph_1a710988-ec19-4caa-83cc-38eb609427d1',
+    },
+    {
+      output: [{ result: '', outputType: 'VISUALIZATION', execution_time: '0s' }],
+      input: {
+        inputText:
+          '{"viewMode":"view","panels":{"1":{"gridData":{"x":1,"y":0,"w":44,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"935afa20-e0cd-11e7-9d07-1398ccfcefa3","vis":null}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"i3ccc6260-e314-11ea-9f99-b37e94bb02ca","timeRange":{"to":"2020-08-20T18:37:44.710Z","from":"2020-07-21T18:37:44.710Z"},"title":"embed_viz_i3ccc6260-e314-11ea-9f99-b37e94bb02ca","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}',
+        inputType: 'VISUALIZATION',
+      },
+      dateCreated: '2020-08-20T18:37:44.809Z',
+      dateModified: '2020-08-20T18:37:56.844Z',
+      id: 'paragraph_6d3237a9-6486-4f93-aa25-0a1c838faabd',
+    },
+  ],
+};
+
+```
+
+- **Zeppelin Notebook**
+
+```
+{
+  paragraphs: [
+    {
+      text:
+        "%md\n Input",
+      dateUpdated: '2020-08-20 21:15:04.590',
+      config: {},
+      settings: { params: {}, forms: {} },
+      results: {
+        code: 'SUCCESS',
+        msg: [
+          {
+            type: 'HTML',
+            data:
+              '<div class="markdown-body">\nInput</div>',
+          },
+        ],
+      },
+      apps: [],
+      runtimeInfos: {},
+      progressUpdateIntervalMs: 500,
+      jobName: 'paragraph_1597958104590_901298942',
+      id: 'paragraph_1596519508360_932236116',
+      dateCreated: '2020-08-20 21:15:04.590',
+      status: 'READY',
+    },
+  ],
+  name: 'Embed Vizualization',
+  id: '2FJH8PW8K',
+  defaultInterpreterGroup: 'spark',
+  version: '0.9.0-preview2',
+  noteParams: {},
+  noteForms: {},
+  angularObjects: {},
+  config: { isZeppelinNotebookCronEnable: false },
+  info: {},
+};
+```
+
+## Notes APIs
+
+1. **Fetch all the notebooks available →** returns a list of notebook id and paths
+
+```
+    GET api/notebooks/
+
+    RESPONSE BODY
+    {
+        "data": [
+        {
+        "id": "2FF3GW3H8",
+        "path": "/Embed Viz"
+        },
+        {
+        "id": "2FHEP953H",
+        "path": "/Log Analysis"
+        },
+        {
+        "id": "2FES7PY77",
+        "path": "/Post-mortem Report"
+        },
+        {
+        "id": "2FFAMT6VV",
+        "path": "/test 1"
+        }
+    ]
+    }
+```
+
+2. **Get all paragraphs of a notebook →** returns list of paragraphs
+
+```
+    GET api/notebooks/note/{noteId}
+
+    RESPONSE BODY // list of Paragraphs
+    {
+    "paragraphs": [
+        {
+        "text": "%md\n# This is markdown test",
+        "user": "anonymous",
+        "dateUpdated": "Aug 11, 2020 8:24:38 AM",
+        "config": {
+            "tableHide": true,
+            "editorSetting": {
+            "language": "markdown",
+            "editOnDblClick": true,
+            "completionSupport": false
+            },
+            "colWidth": 12,
+            "editorMode": "ace/mode/markdown",
+            "fontSize": 9,
+            "editorHide": false,
+            "results": {},
+            "enabled": true
+        },
+        "settings": {
+            "params": {},
+            "forms": {}
+        },
+        "results": {
+            "code": "SUCCESS",
+            "msg": [
+            {
+                "type": "HTML",
+                "data": "<div class=\"markdown-body\">\n<h1>This is markdown test</h1>\n\n</div>"
+            }
+            ]
+        },
+        "apps": [],
+        "runtimeInfos": {},
+        "progressUpdateIntervalMs": 500,
+        "jobName": "paragraph_1597133766113_507090317",
+        "id": "paragraph_1597101740623_82179823",
+        "dateCreated": "Aug 11, 2020 8:16:06 AM",
+        "dateStarted": "Aug 11, 2020 8:24:38 AM",
+        "dateFinished": "Aug 11, 2020 8:24:38 AM",
+        "status": "FINISHED"
+        },
+        {
+        "title": "Paragraph inserted",
+        "text": "%md\n# markdown cell number 2 ",
+        "user": "anonymous",
+        "dateUpdated": "Aug 11, 2020 8:24:32 AM",
+        "config": {},
+        "settings": {
+            "params": {},
+            "forms": {}
+        },
+        "results": {
+            "code": "SUCCESS",
+            "msg": [
+            {
+                "type": "HTML",
+                "data": "<div class=\"markdown-body\">\n<h1>markdown cell number 2</h1>\n\n</div>"
+            }
+            ]
+        },
+        "apps": [],
+        "runtimeInfos": {},
+        "progressUpdateIntervalMs": 500,
+        "jobName": "paragraph_1597134223413_576247989",
+        "id": "paragraph_1597134223413_576247989",
+        "dateCreated": "Aug 11, 2020 8:23:43 AM",
+        "dateStarted": "Aug 11, 2020 8:24:32 AM",
+        "dateFinished": "Aug 11, 2020 8:24:32 AM",
+        "status": "FINISHED"
+        }
+    ]
+    }
+```
+
+3. **Add a Notebook →** returns new notebook id
+
+```
+    POST api/notebooks/note
+
+    REQUEST BODY
+    {"name": "Demo Notebook"} // new name
+
+    RESPONSE BODY
+    {
+        "status": "OK",
+        "message": "",
+        "body": "2FG6FWGY5" //New Notebook ID
+    }
+```
+
+4. **Rename a Notebook →** returns acknowledgement
+
+```
+    PUT api/notebooks/note/rename
+
+    REQUEST BODY
+    {
+        "noteId": "2FG6FWGY5", // notebook id to be renamed
+        "name":"Demo 1", // new name
+    }
+
+    RESPONSE BODY
+    {
+        "status": "OK",
+        "message": ""
+    }
+```
+
+5. **Clone a Notebook →** returns new notebook id
+
+```
+    POST api/notebooks/note/clone
+
+    REQUEST BODY
+    {
+     "noteId": "2FG6FWGY5", // notebook id to be cloned
+     "name":"Demo 1_copy", // new name for cloned notebook
+     }
+
+    RESPONSE BODY
+    {
+        "status": "OK",
+        "message": "",
+        "body": "2FFAG7HAQ"
+    }
+```
+
+6. **Delete a Notebook →** returns acknowledgement
+
+```
+    DELETE api/notebooks/note/{noteid}
+
+    RESPONSE BODY
+    {
+        "status": "OK",
+        "message": ""
+    }
+```
+
+7. **Import a Notebook →** returns new notebooks Id
+
+```
+    POST api/notebooks/note/import
+
+    REQUEST BODY
+    // { noteObj: {notebooks as json} }
+
+    {
+    "noteObj": {
+        "angularObjects": {},
+        "config": {
+            "isZeppelinNotebookCronEnable": false
+        },
+        "defaultInterpreterGroup": "md",
+        "id": "2FH5EF6QF",
+        "info": {},
+        "name": "test 1",
+        "noteForms": {},
+        "noteParams": {},
+        "paragraphs": [{
+            "apps": [],
+            "config": {
+                "colWidth": 12,
+                "editorHide": false,
+                "editorMode": "ace/mode/markdown",
+                "editorSetting": {
+                    "completionSupport": false,
+                    "editOnDblClick": true,
+                    "language": "markdown"
+                },
+                "enabled": true,
+                "fontSize": 9,
+                "results": {},
+                "tableHide": true
+            },
+            "dateCreated": "2020-08-10 23:22:20.623",
+            "dateFinished": "2020-08-11 08:15:21.175",
+            "dateStarted": "2020-08-11 08:15:21.150",
+            "dateUpdated": "2020-08-11 08:15:21.140",
+            "id": "paragraph_1597101740623_82179823",
+            "jobName": "paragraph_1597101740623_82179823",
+            "progressUpdateIntervalMs": 500,
+            "results": {
+                "code": "SUCCESS",
+                "msg": [{
+                    "data": "<div class=\"markdown-body\">\n<h1>This is markdown test</h1>\n\n</div>",
+                    "type": "HTML"
+                }]
+            },
+            "runtimeInfos": {},
+            "settings": {
+                "forms": {},
+                "params": {}
+            },
+            "status": "FINISHED",
+            "text": "# This is markdown test",
+            "user": "anonymous"
+        }],
+        "version": "0.9.0-SNAPSHOT"
+        }
+    }
+
+
+    RESPONSE BODY
+    {
+        "status": "OK",
+        "message": "",
+        "body": "2FF38BHBY" //new notebook id
+    }
+```
+
+8. **Export a Notebook →** Returns a notebooks object
+
+```
+    GET api/notebooks/note/export/{noteid}
+
+    RESPONSE BODY // A notebook object
+    {
+    "paragraphs": [
+        {
+        "text": "# This is markdown test",
+        "user": "anonymous",
+        "dateUpdated": "2020-08-11 17:08:24.063",
+        "config": {
+            "tableHide": true,
+            "editorSetting": {
+            "completionSupport": false,
+            "editOnDblClick": true,
+            "language": "markdown"
+            },
+            "colWidth": 12.0,
+            "editorMode": "ace/mode/markdown",
+            "editorHide": false,
+            "fontSize": 9.0,
+            "results": {},
+            "enabled": true
+        },
+        "settings": {
+            "params": {},
+            "forms": {}
+        },
+        "results": {
+            "code": "SUCCESS",
+            "msg": [
+            {
+                "type": "HTML",
+                "data": "<div class=\"markdown-body\">\n<h1>This is markdown test</h1>\n\n</div>"
+            }
+            ]
+        },
+        "apps": [],
+        "runtimeInfos": {},
+        "progressUpdateIntervalMs": 500,
+        "jobName": "paragraph_1597165704063_563073184",
+        "id": "paragraph_1597101740623_82179823",
+        "dateCreated": "2020-08-11 17:08:24.063",
+        "status": "READY"
+        }
+    ],
+    "name": "test 1",
+    "id": "2FF38BHBY",
+    "defaultInterpreterGroup": "spark",
+    "version": "0.9.0-SNAPSHOT",
+    "noteParams": {},
+    "noteForms": {},
+    "angularObjects": {},
+    "config": {
+        "isZeppelinNotebookCronEnable": false
+    },
+    "info": {}
+    }
+```
+
+## Paragraph APIs
+
+1. **Update and Run a Paragraph →** returns the updated paragraph
+
+Does the following backend tasks:
+
+    1. Updates a paragraph (with new input)
+    2. Runs it
+    3. Fetches the paragraph  (with updated input and executed result output)
+
+```
+    POST api/notebooks/paragraph/update/run
+
+    REQUEST BODY
+    {
+        "noteId": "2FF38BHBY", // notebook id
+        "paragraphId": "paragraph_1597101740623_82179823", // para id
+        "paragraphInput": "%md\n# This is markdown test 2" // para inp
+    }
+
+    RESPONSE BODY
+    {
+    "text": "%md\n# This is markdown test 2",
+    "user": "anonymous",
+    "dateUpdated": "Aug 11, 2020 5:35:01 PM",
+    "config": {
+        "tableHide": true,
+        "editorSetting": {
+        "completionSupport": false,
+        "editOnDblClick": true,
+        "language": "markdown"
+        },
+        "colWidth": 12,
+        "editorMode": "ace/mode/markdown",
+        "editorHide": false,
+        "fontSize": 9,
+        "results": {},
+        "enabled": true
+    },
+    "settings": {
+        "params": {},
+        "forms": {}
+    },
+    "results": {
+        "code": "SUCCESS",
+        "msg": [
+        {
+            "type": "HTML",
+            "data": "<div class=\"markdown-body\">\n<h1>This is markdown test 2</h1>\n\n</div>"
+        }
+        ]
+    },
+    "apps": [],
+    "runtimeInfos": {},
+    "progressUpdateIntervalMs": 500,
+    "jobName": "paragraph_1597165704063_563073184",
+    "id": "paragraph_1597101740623_82179823",
+    "dateCreated": "Aug 11, 2020 5:08:24 PM",
+    "dateStarted": "Aug 11, 2020 5:35:01 PM",
+    "dateFinished": "Aug 11, 2020 5:35:01 PM",
+    "status": "FINISHED"
+    }
+```
+
+2. **Update a Paragraph →** returns the updated paragraph
+
+Does the following backend tasks:
+
+    1. Updates a paragraph (with new input)
+    2. Fetches the paragraph  (with updated input and old output)
+
+NOTE: This API call doesn’t execute the paragraph input, should be used to save a partially written code
+
+```
+    PUT api/notebooks/paragraph/
+
+    REQUEST BODY
+    {
+        "noteId": "2FF3GW3H8", // notebook id
+        "paragraphId": "paragraph_1596519508360_932236116", // para id
+        "paragraphInput": "%md \n\n### Hi Everyone\n* Here's a demo on **OpenSearch Dashboards Notebooks**\n* I was not present in previous input"
+        // new input
+    }
+
+    RESPONSE BODY
+    {
+        "text": "%md \n\n### Hi Everyone\n* Here's a demo on **OpenSearch Dashboards Notebooks**\n* I was present in previous input",
+        "user": "anonymous",
+        "dateUpdated": "Aug 11, 2020 5:52:14 PM",
+        "config": {},
+        "settings": {
+            "params": {},
+            "forms": {}
+        },
+        "results": {
+            "code": "SUCCESS",
+            "msg": [{
+                "type": "HTML",
+                // old result
+                "data": "<div class=\"markdown-body\">\n<h3>Hi Everyone</h3>\n<ul>\n<li>Here&rsquo;s a demo on <strong>OpenSearch Dashboards Notebooks</strong></li>\n</ul>\n\n</div>"
+            }]
+        },
+        "apps": [],
+        "runtimeInfos": {},
+        "progressUpdateIntervalMs": 500,
+        "jobName": "paragraph_1597104141269_874537409",
+        "id": "paragraph_1596519508360_932236116",
+        "dateCreated": "Aug 11, 2020 12:02:21 AM",
+        "dateStarted": "Aug 11, 2020 5:51:43 PM",
+        "dateFinished": "Aug 11, 2020 5:51:43 PM",
+        "status": "FINISHED"
+    }
+```
+
+3. **Add a new paragraph →** returns newly created paragraph
+
+Does the following backend tasks:
+
+    1. Adds new a paragraph
+    2. Fetches the newly created paragraph
+
+```
+    POST api/notebooks/paragraph/
+
+    REQUEST BODY
+    {
+        "noteId": "2FF3GW3H8", // notebook id
+        "paragraphIndex": 1, // index to create a new para
+        "paragraphInput": "%opensearch\n" // input to be provided in the new para
+        "inputType": "CODE" // a paragraph can be of type CODE or VISUALIZATION
+    }
+
+    RESPONSE BODY
+    {
+        "title": "Paragraph inserted",
+        "text": "%opensearch\n",
+        "user": "anonymous",
+        "dateUpdated": "Aug 11, 2020 5:56:23 PM",
+        "config": {},
+        "settings": {
+            "params": {},
+            "forms": {}
+        },
+        "apps": [],
+        "runtimeInfos": {},
+        "progressUpdateIntervalMs": 500,
+        "jobName": "paragraph_1597168583538_1357513873",
+        "id": "paragraph_1597168583538_1357513873",
+        "dateCreated": "Aug 11, 2020 5:56:23 PM",
+        "status": "READY"
+    }
+```
+
+4. **Delete a paragraph →** returns list of paragraphs
+
+```
+    DELETE api/notebooks/paragraph/{noteId}/{paragraphId}
+
+    RESPONSE BODY // list of Paragraphs
+    {
+        "paragraphs": [{
+            "text": "%md\n# This is markdown test 2",
+            "user": "anonymous",
+            "dateUpdated": "Aug 11, 2020 6:55:07 PM",
+            "config": {
+                "tableHide": true,
+                "editorSetting": {
+                    "completionSupport": false,
+                    "editOnDblClick": true,
+                    "language": "markdown"
+                },
+                "colWidth": 12,
+                "editorMode": "ace/mode/markdown",
+                "editorHide": false,
+                "fontSize": 9,
+                "results": {},
+                "enabled": true
+            },
+            "settings": {
+                "params": {},
+                "forms": {}
+            },
+            "results": {
+                "code": "SUCCESS",
+                "msg": [{
+                    "type": "HTML",
+                    "data": "<div class=\"markdown-body\">\n<h1>This is markdown test 2</h1>\n\n</div>"
+                }]
+            },
+            "apps": [],
+            "runtimeInfos": {},
+            "progressUpdateIntervalMs": 500,
+            "jobName": "paragraph_1597165704063_563073184",
+            "id": "paragraph_1597101740623_82179823",
+            "dateCreated": "Aug 11, 2020 5:08:24 PM",
+            "dateStarted": "Aug 11, 2020 6:55:07 PM",
+            "dateFinished": "Aug 11, 2020 6:55:07 PM",
+            "status": "FINISHED"
+        }, {
+            "title": "Paragraph inserted",
+            "text": "%opensearch\n",
+            "user": "anonymous",
+            "dateUpdated": "Aug 11, 2020 6:55:07 PM",
+            "config": {},
+            "settings": {
+                "params": {},
+                "forms": {}
+            },
+            "apps": [],
+            "runtimeInfos": {},
+            "progressUpdateIntervalMs": 500,
+            "jobName": "paragraph_1597172107715_362327829",
+            "id": "paragraph_1597172107715_362327829",
+            "dateCreated": "Aug 11, 2020 6:55:07 PM",
+            "status": "READY"
+        }]
+    }
+```
+
+5. **Clear outputs of all paragraphs →** returns list of paragraphs (with empty outputs)
+
+```
+    PUT api/notebooks/paragraph/clear
+
+    REQUEST BODY
+    {"noteId":"2FF38BHBY"} // notebook id to clear all paras
+
+    RESPONSE BODY // list of Paragraphs
+    {
+        "paragraphs": [{
+            "text": "%md\n# This is markdown test 2",
+            "user": "anonymous",
+            "dateUpdated": "Aug 11, 2020 6:55:07 PM",
+            "config": {
+                "tableHide": true,
+                "editorSetting": {
+                    "completionSupport": false,
+                    "editOnDblClick": true,
+                    "language": "markdown"
+                },
+                "colWidth": 12,
+                "editorMode": "ace/mode/markdown",
+                "editorHide": false,
+                "fontSize": 9,
+                "results": {},
+                "enabled": true
+            },
+            "settings": {
+                "params": {},
+                "forms": {}
+            },
+            "apps": [],
+            "runtimeInfos": {},
+            "progressUpdateIntervalMs": 500,
+            "jobName": "paragraph_1597165704063_563073184",
+            "id": "paragraph_1597101740623_82179823",
+            "dateCreated": "Aug 11, 2020 5:08:24 PM",
+            "dateStarted": "Aug 11, 2020 6:55:07 PM",
+            "dateFinished": "Aug 11, 2020 6:55:07 PM",
+            "status": "FINISHED"
+        }, {
+            "title": "Paragraph inserted",
+            "text": "%md\n\n# Output is empty\n",
+            "user": "anonymous",
+            "dateUpdated": "Aug 11, 2020 7:17:31 PM",
+            "config": {},
+            "settings": {
+                "params": {},
+                "forms": {}
+            },
+            "apps": [],
+            "runtimeInfos": {},
+            "progressUpdateIntervalMs": 500,
+            "jobName": "paragraph_1597172107715_362327829",
+            "id": "paragraph_1597172107715_362327829",
+            "dateCreated": "Aug 11, 2020 6:55:07 PM",
+            "dateStarted": "Aug 11, 2020 7:17:31 PM",
+            "dateFinished": "Aug 11, 2020 7:17:31 PM",
+            "status": "FINISHED"
+        }]
+    }
+```
+
+## **Future Work**
+
+### **Short Term**
+
+1. **Notes APIs**
+   1. Run notebook → runs all the paragraphs and returns the updated list of paragraphs
+   2. Save notebook → updates all the paragraphs and returns the updated list of paragraphs
+2. **Paragraph APIs**
+   1. Run a paragraph → runs the paragraph with pre-exisiting input code and returns the updated paragraph (with executed result)
+   2. Refresh a paragraph → runs the paragraph with pre-exisiting input code at certain intervals and returns the updated paragraph (with executed result)
+
+### **Long Term**
+
+1. Checkpoint notebook → saves all the paragraphs and returns acknowledgement
+2. Extend endpoints like refresh, run, save and checkpoint to be asynchronous
+
+## References:
+
+1.  Zeppelin APIs : http://zeppelin.apache.org/docs/0.9.0/usage/rest_api/notebook.html
+2.  More About Zeppelin: https://zeppelin.apache.org/docs/0.9.0/
diff --git a/public/components/notebooks/docs/dev/Build_Documentation.md b/public/components/notebooks/docs/dev/Build_Documentation.md
new file mode 100644
index 0000000000..9af1785714
--- /dev/null
+++ b/public/components/notebooks/docs/dev/Build_Documentation.md
@@ -0,0 +1,15 @@
+# Build OpenSearch Dashboards Notebooks Plugin
+
+## Setup OpenSearch & OpenSearch Dashboards dev environment and use the plugin with Zeppelin
+
+- Please follow [README.md](../../../../../../DEVELOPER_GUIDE.md) for build instructions.
+
+- **[Optional] If using Zeppelin Backend Adaptor:**
+  - Setup Zeppelin as mentioned in [Apache Zeppelin Setup: Zeppelin Backend Adaptor](./Zeppelin_backend_adaptor.md#apache-zeppelin-setup)
+  - Edit [this line](https://github.com/opensearch-project/dashboards-notebooks/blob/dev/common/index.ts#L19) to `SELECTED_BACKEND = 'ZEPPELIN';`
+  - Edit [this line](https://github.com/opensearch-project/dashboards-notebooks/blob/dev/common/index.ts#L21) for adding Zeppelin endpoint `zeppelinURL = 'http://localhost:8080';`
+- Start OpenSearch Dashboards
+
+- More on [Usage of Plugin](./Usage_Documentation.md)
+
+- Happy Notebooking :)
diff --git a/public/components/notebooks/docs/dev/OpenSearch-Dashboards-Notebooks-Design-Proposal.md b/public/components/notebooks/docs/dev/OpenSearch-Dashboards-Notebooks-Design-Proposal.md
new file mode 100644
index 0000000000..b9bd9050e7
--- /dev/null
+++ b/public/components/notebooks/docs/dev/OpenSearch-Dashboards-Notebooks-Design-Proposal.md
@@ -0,0 +1,278 @@
+# RFC - OpenSearch Dashboards Notebooks
+
+## Contents
+
+1. [Overview](#1-overview)
+2. [Requirements](#2-requirements)
+3. [User Stories](#3-user-stories)
+4. [Design](#4-design)
+5. [Design Details and Implementation](#5-design-details-and-implementation)
+6. [Build & Usage](#6-build--usage)
+7. [Appendix](#7-appendix)
+8. [References](#8-references)
+
+## 1. Overview
+
+### **1.1 Introduction**
+
+OpenSearch Dashboards Notebooks enable data-driven, interactive data analytics and collaborative documents to be created and used as live notes in OpenSearch Dashboards. They allow devops, support specialists, solution and presales specialists, customer success experts and engineers to create and share stories. They facilitate combining visualizations, timelines and text, code and adding annotations. Here are a few OpenSearch Dashboards Notebooks use-cases:
+
+1. Create post-mortem documents
+2. Design runbooks
+3. Build Live infrastructure reports
+4. Foster data driven explorative collaborations
+
+### **1.2 Motivation**
+
+- **Existing Solution:** OpenSearch Dashboards Dashboards offer a solution for a few selected use cases, and are a great tool if you’re focused on monitoring a known set of metrics over time. Current issues include:
+  - Dashboards are static in nature and are not user-friendly to make quick changes in iterations
+  - Dashboards lack context for visualizations
+  - Dashboards do not have multi-timeline support which are needed for post-mortem and cause analysis
+  - Dashboards are restricted to data sources within the OpenSearch environment
+
+* **Our Solution:** OpenSearch Dashboards Notebooks provide:
+  - Familiar notebooks user-interface for faster iterations as live notes
+  - Markdown/Code interpreters for contextual use of data with detailed explanations by allowing a user to combine saved visualizations, text and graphs
+  - Adaptors to embellish existing data in OpenSearch with other reference data sources.
+  - Support multiple timelines to compare and contrast visualizations
+
+### **1.3 Glossary**
+
+1. _Notebooks:_ An interface for on-the-go code writing and execution
+2. _Paragraphs:_ Each notebook consists on multiple paragraphs with allows users to input code or embed a visualization
+3. _Input Cell:_ Each paragraph consists an input cell that contains code for execution in supported interpreters such as markdown, SQL and DSL.
+4. _Output Cell:_ Each paragraph consists an output cell that contains execution result of code or an embeded visualization with its time-range
+5. _Backend Adaptor:_ An add-on to the existing default backend that provides additional interpreters and storage options.
+
+## 2. Requirements
+
+**Functional:**
+
+1. **Notebooks**
+   1. As a user, I should be able to use OpenSearch Dashboards Notebooks plugin UI for all the interactions
+   2. As a user, I should be able to View all the notebooks available
+   3. As a user, I should be able to Create, Edit, Rename, Delete and Clone Notebooks
+   4. As a user, I should be able to Import and Export Notebooks for collaborative story telling
+2. **Paragraphs**
+   1. As a user, I should be able to use Create, Edit, Save, Delete and Clone Paragraphs
+   2. As a user, I should be able to use Toggle all Inputs of paragraphs
+   3. As a user, I should be able to use Clear and Toggle all Outputs of paragraphs
+3. **Visualizations**
+   1. As a user, I should be able to embed Saved Visualizations
+   2. As a user, I should be able to Resize and Delete embedded Visualizations
+   3. As a user, I should be able to use multiple timelines for different visualizations
+   4. As a user, I should be able to Inspect Visualization Data
+4. **Default Backend**
+   1. As a user, I should be able to use Visualizations and Markdown interpreter in Notebooks
+   2. As a user, I should be able to use SQL and DSL query interpreters in Notebooks
+   3. As a user, I should be able to store Notebooks as OpenSearch indices
+5. **Backend Adaptors**
+   1. As a user, I should be able to plug an add-on external backend services (like [Apache Zeppelin](https://zeppelin.apache.org/), [Amazon SageMaker](https://aws.amazon.com/sagemaker/), [Jupyter](https://jupyter.org/)) to the plugin using adaptors
+   2. As a user, I should be able to use all the interpreters provided by the plugged backend service in addition to those provided by default
+   3. As a user, I should be able to use the storage adaptors provided by the plugged backend service
+   4. As a user, I should be able to use external data sources and environments provided by the plugged backend
+
+**Non-functional:**
+
+1. **Default Backend** - As a user, I should be able to use the plugin’s default interpreters without setting up any external backend service
+2. **Backend Adaptors** - As a user, I should be free to create and use external data planes/environments and bring them to OpenSearch Dashboards via supported adaptors
+3. **Security** - As a user, I should be able to view/clone/read/save/edit notebooks adhering to my role settings
+
+## 3. User Stories
+
+**Operations on notebooks**
+
+1. Create: As a user, I should be able to create a notebook.
+2. View: As a user, I should be able to view the notebook.
+3. Save: As a user, I should be able to save the notebook.
+4. Checkpoint: The notebook automatically saves the notebook after every 3 minutes. If the user loads the notebook after the checkpoint is triggered, it will allow load the content till that point.
+5. Save, Autosave: The notebook can saved. After a given time period, the autosave is triggered on the notebook.
+6. Clone: As a user, I should be able to clone the notebook
+7. Rename: As a user, I should be able to rename the notebook
+8. Delete: As a user, I should be able to delete the notebook
+
+**Create, Edit, Delete content in an individual notebook**
+
+1. As a user, I should be able to add paragraphs to a notebook. I should be able to add markdown or code to a paragraph.
+2. Markdown in a paragraph allows adding text and enables the use of titles/headings, images, lists and hyperlinks.
+3. Code can be added in the form of queries, DSL, PPL, SQL etc.
+4. As a user, I should be able to execute the code block or the markup and the output will get reflected in the output cell. The output will display text, images, lists, visualizations/graphs etc.
+5. As a user, I should be able to annotate the output with comments/tags, usernames, time/date etc. using markdown
+6. Time periods: As a user I should be able to set the date/time periods or date/time to the individual output cells. By default, the date/time reflected is global. This is different from the actual timestamp on when the content was edited.
+
+**Share, export and download notebooks**
+
+1. As a creator of notebooks, I should be able to share a OpenSearch Dashboards Notebook with other users so that they can view and/or edit the notebooks as per the privileges and permissions they have.
+2. I should also be able to share the notebook as a pdf via email. I should also be able to download the story as a pdf.
+
+**List of Notebooks**
+
+1. As a user, I should be able to add the notebooks to a list of notebooks. The list of notebooks shows name of the notebook, creator’s details, and last modified dates.
+2. I should be able to view, share and download the individual notebooks in the list of notebooks.
+3. I should be able to view the list of notebooks.
+4. I should be able to filter notebooks based on whether I created or someone else created them and as per dates modified.
+
+## 4. Design
+
+### **4.1 What (Notebooks)**
+
+- Notebooks are browser-based [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) built upon a number of popular open-source libraries
+
+### **4.2 Where (Notebooks Storage)**
+
+- Notebooks are stored as OpenSearch indices in the default backend. If backend adaptors are used by user, the storage is switched to storage options provided by the external backend service.
+- For example: Apache Zeppelin backend service supports files, Git, Amazon S3, mongo and other storage options.
+
+### **4.3 How (Releases)**
+
+- OpenSearch Dashboards Notebooks will be released as a OpenSearch Dashboards plugin shipped with the Open-Distro for OpenSearch solution.
+
+### **4.4 Architecture**
+
+**4.4.1 Version 1:** In this architecture, Backend is tightly coupled with Apache Zeppelin as a backend service to provide interpreters and storage adaptors
+
+![Notebooks Arch_v1](images/Notebooks_v1.png)
+
+- Pros:
+  - Single Backend configuration is easier for development and usage
+  - Zeppelin Backend will provide one stop shop for interpreters, runtime-environments and storage adaptors
+- Cons:
+  - Users will not be free to customize Zeppelin Backend runtime-environment/storage adaptors
+  - Need to develop a new storage adaptor for Zeppelin to store notebooks as OpenSearch indices [POC details](../poc/docs/Zeppelin_OpenSearch_Storage.md)
+  - Difficult to maintain releases, as we have to sync version currency/patches to Zeppelin code repository
+
+**4.4.2 Version 2:** In this architecture, Backends are switchable with two options of Default backend (Markdown, Visualization support) or Apache Zeppelin Backend (25+ interpreter support)
+
+![Notebooks Arch_v1](images/Notebooks_v2.png)
+
+- Pros:
+  - Default Backend configuration is easy to use for any user who wants to stay away from setting up additional environments and interpreters
+  - Apache Zeppelin Backend will provide users the customizability to add new environments and interpreters
+- Cons:
+  - Once a user selects Apache Zeppelin Backend they will not be able to use visualizations to be embedded in notebooks (provided only by default backend)
+
+**4.4.3 Version 3:** In this architecture, Default backend (Markdown, Visualization support) is provided upfront and a user may choose to bring in their own endpoints for adaptors like Apache Zeppelin, Amazon SageMaker or Jupyter
+
+![Notebooks Arch_v1](images/Notebooks_v3.png)
+
+- Pros:
+  - Default Backend configuration is easy to use for any user who wants to stay away from setting up additional environments and interpreters
+  - An Adaptor provides additional functionalities on top of Default Backend, rather than being replacement
+  - Users are free to bring in their backend service with endpoints for interpreter support, runtime-environment and storages
+- Cons:
+  - Need to develop UI as a decoupled service and need to development of multiple parsers as notebook structures change with different backend adaptors
+
+**4.4.4 Decision:** Even though “Version 1” provides good coupling and ease of development, the maintenance and releases are a big issue striking this option out. "Version 2" provides switchable backends which is easy to use but this switching happens at a cost of not supporting a core functionality of visualizations with Zeppelin backend. Finally, we selected "version 3" as it provides user flexibility to bring their own external backend services to connect to OpenSearch Dashboards Notebooks.
+
+## 5. Design Details and Implementation
+
+### **5.1 OpenSearch Dashboards Notebooks Plugin UI**
+
+1. **React based UI**, uses elements from [OpenSearch UI](https://elastic.github.io/eui/#/) elements & [Nteract.io components](https://components.nteract.io/)
+2. **OpenSearch UI Components**
+   1. Used for blending notebooks in OpenSearch Dashboards Plugins environment
+   2. All container UI components and buttons use OpenSearch UI components
+3. **Nteract Components**
+   1. [_Presentational-components_](https://components.nteract.io/#section-nteractpresentational-components) module of nteract is used specifically for notebook UI
+   2. _[Outputs](https://components.nteract.io/#section-nteractoutputs)_ module is used for rendering markdown if backend adaptor doesn't have a markdown interpreter
+4. **Notebook Parsers**
+   1. Each Backend has a different notebook structure, thus we need a parser to convert these notebooks to a common structure. Based on the selected backend a parser converts paragraphs in notebook to a parsed-Paragraph.
+   2. Parsed-Paragraphs are used to render components of notebooks.
+   3. FUTURE: Can shift this module to the backend, need to weigh pros and cons as behavior of APIs will change especially for Import and Export would change drastically
+5. Here’s a sample wireframe
+
+![OpenSearch Dashboards Notebooks UI](images/UI.png)
+
+### **5.2 OpenSearch Dashboards Notebooks Plugin Backend**
+
+1. Uses the Hapi Backend Contianer provided by OpenSearch Dashboards
+2. Provides API routes for connecting UI components to a backend service
+3. **_Router Modules_:**
+   1. NotebookConnector - routes Notebook CRUD operations
+   2. ParagraphConnector - routes Paragraph CRUD operations
+4. **_Default Backend_:**
+   1. Provides markdown interpreter support for notebooks
+   2. Provides ability to embed saved visualizations using Dashboard Containers
+   3. FUTURE: provide interpreter support for SQL and DSL queries
+5. **Backend Adaptors**
+   1. A Backend Adaptor provides an interface to connect external notebook backends
+   2. An external notebook backend service is connected through a HTTP endpoint
+   3. Once a backend service is connected all the interpreters, environments and data sources provided by the service are automatically extended in notebooks
+   4. Uses [Hapi Wreck](https://hapi.dev/module/wreck/) to connect a backend service with a HTTP endpoint
+   5. Example Adaptor: **Zeppelin Backend Server**
+      ![Zeppelin Server](images/zeppelin_architecture.png)
+      - Open source, provided by [Apache Zeppelin](http://zeppelin.apache.org/)
+      - Provides all communication to and from a notebook & supports 25+ interpreters
+      - Connects via a HTTP endpoint to the Plugin backend
+      - [Interpreter APIs](http://zeppelin.apache.org/docs/0.9.0/usage/rest_api/interpreter.html) Get interpreter settings, create/update/restart/delete interpreter setting
+      - [Notebook APIs](http://zeppelin.apache.org/docs/0.9.0/usage/rest_api/notebook.html) Create/update/restart/delete noteboooks and paragraphs
+      - Provides inter-paragraph communication capabilities
+      - Can be setup to provide OpenSearch and OpenSearch-SQL interpreters
+      - Can be connected with python environment to use ML/plot libraries
+
+### **5.3 Data Model**
+
+- **Default Backend Notebook Schema:** Each notebook object contains it’s name, unique id, date of creation/modification, OpenSearch Dashboards Notebooks plugin version and an array of paragraphs. The paragraphs contain their unique id, date of creation/modification and input/output cells. An input cell contains a code or text and it’s type (markdown/visualization). Each paragraph contains an array of outputs, this is an array as execution of code can result into multiple outputs like a text with an image. Each output contains the type of output, result value and execution time.
+
+![Default Notebooks](images/Default_Notebooks_Schemav2.png)
+
+### **5.4 WorkFlows**
+
+- **Default Backend -** _View Notebooks:_ View notebooks operation is responsible for loading the sidemenu with folder tree. When user loads the plugin a call is made to the backend server. The default backend fetches all the notebooks from “.notebooks” OpenSearch index and responds with notebook Ids and paths. This response load is then used to populate the folder tree with default parser on UI.
+
+  ![View Notebook](images/default_view_notebook.png)
+
+- **Default Backend -** _Create/Edit/Delete Notebooks_: All the other notebook operations like create/delete/clone/import/export and editing paragraphs in notebooks use this workflow. When a use interacts with these notebook functionalities a backend request is made with payload [like paragraphInput, paragraphId] if necessary. The default backend first searches the “.notebooks” OpenSearch index to get the current state of the notebook. Once fetched/searched, it performs the required operation and then indexes/updates/deletes the notebook. After the successful completion of operations a response is sent back to the UI with either whole or partial notebook information (as required) and parsed by default parser taking the notebook schema into consideration.
+
+  ![View Notebook](images/default_operation_notebook.png)
+
+- **Zeppelin Adaptor -** _All Operations:_ When a user uses the Zeppelin backend adaptor for running notebooks, the backend switches its way of making requests. For any user operation including viewing notebooks in folder tree, a backend request is made by UI. This request may contain any payload [like paragraphInput, paragraphId] if necessary. This payload is reformatted and added with additional options like the user’s Zeppelin HTTP endpoint and request headers. Finally this request is sent to the user’s Zeppelin Server, which does the operation and responds back. The response is sent back to the UI with either whole or partial notebook information (as required) and parsed by Zeppelin parser taking Zeppelin’s notebook schema into consideration.
+
+  ![Zeppelin Notebook](images/zeppelin_notebooks_sequence.png)
+
+### **5.5** [API Design Documentation](API_Documentation.md)
+
+## 6. Build & Usage
+
+### **6.1** [Build Documentation](Build_Documentation.md)
+
+### **6.1** [Usage Documentation](Usage_Documentation.md)
+
+## 7. Appendix
+
+### **7.1** POC: [Embeddable API & Usage](../poc/docs/OpenSearch Dashboards_Embeddable_Documentation.md)
+
+### **7.2** POC: [Zeppelin OpenSearch Storage](../poc/docs/Zeppelin_OpenSearch_Storage.md)
+
+### **7.3** Screenshots:
+
+- **Default Backend**
+
+  - **Markdown Interpreter**
+    ![Markdown](images/Markdown_ss.png)
+  - **Embedding Saved Visualizations**
+    ![Viz](images/vizembed_ss.png)
+  - **Multi-Timeline Support**
+    ![Multi-Timeline Support](images/Multi-timeline_ss.png)
+
+- **Zeppelin Backend Adaptor**
+
+  - **Zeppelin Adaptor in OpenSearch Dashboards Notebooks**:
+    ![Sample UI](images/Zeppelin_ss.png)
+  - **Make requests to OpenSearch Service**:
+    ![OpenSearch service UI](images/opensearch_ss.png)
+  - **Transmit Data between Interpreters**:
+
+    - Use output of an OpenSearch Query as save as a Zeppelin Context in a variable
+      ![OpenSearch Query](images/opensearch_ss_zepcontext.png)
+    - Use the Zeppelin Context vairable and import it in python
+      ![Import Context](images/python_ss.png)
+
+  - **Plot Visualization with Language specific Viz. tools (like Matplotlib)**:
+    ![Matplot Viz.](images/matplot_ss.png)
+
+## 8. References
+
+### **8.1** [More Zeppelin and Backend Adaptor](Zeppelin_backend_adaptor.md)
+
+### **8.2** [Nteract.io](https://nteract.io/) React components: [components.nteract.io](https://components.nteract.io/)
diff --git a/public/components/notebooks/docs/dev/Usage_Documentation.md b/public/components/notebooks/docs/dev/Usage_Documentation.md
new file mode 100644
index 0000000000..c4fc7a3fa0
--- /dev/null
+++ b/public/components/notebooks/docs/dev/Usage_Documentation.md
@@ -0,0 +1,40 @@
+# Using OpenSearch Dashboards Notebooks
+
+## Usage & Interface
+
+![OpenSearch Dashboards Notebooks](./images/dashboards-notebooks.gif)
+
+### 1. Notebook Functionalities
+
+![OpenSearch Dashboards Notebooks](./images/notebook-buttons.png)
+
+- **Create Notebook** - creates a new notebook document
+- **Rename Notebook** - renames the current notebook with new name
+- **Clone Notebook** - clones the current notebook and gives the name <currentNotebook_copy>
+- **Delete Notebook** - deletes the current notebook
+- **Import Notebook** - imports a notebook json file
+- **Export Notebook** - exports the current notebook as a json file
+
+### 2. Paragraph Functionalities
+
+![OpenSearch Dashboards Notebooks](./images/paragraph-buttons.png)
+NOTE: Please select a paragraph before using these buttons
+
+- **Run Paragraph** - Runs the selected paragraph and saves it
+- **Save Paragraph** - Saves the input of selected paragraph/visualization
+- **Clone Paragraph** - Clones the selected paragraph
+- **Delete Paragraph** - Deletes the selected paragraph
+- **Clear All Paragraph** - Clears the output of all the paragraphs
+- **Hide Inputs** - Hides the input cells of all the paragraphs
+- **Hide Outputs** - Hides the output cells of all the paragraphs
+
+### 3. Miscellaneous
+
+- **Adding a paragraph** - Hover between paragraphs to add a new para/visualization
+- **Editing Visualization Timeline** - Edit timeframes in datepicker to add "from" and "to" time range, then refresh the visualization
+- **Resize Visualizations** - To resize a visualization, unpin the visualization to enter the edit mode, once resized pin the visualization and save it with save button on top
+
+## Import Example Notebooks
+
+- Import sample notebooks from [example_notebooks folder](https://github.com/opensearch-project/dashboards-notebooks/tree/dev) based on your backend
+- A notebook from one backend is incompatible to the other
diff --git a/public/components/notebooks/docs/dev/Zeppelin_backend_adaptor.md b/public/components/notebooks/docs/dev/Zeppelin_backend_adaptor.md
new file mode 100644
index 0000000000..054c1a886e
--- /dev/null
+++ b/public/components/notebooks/docs/dev/Zeppelin_backend_adaptor.md
@@ -0,0 +1,129 @@
+# Zeppelin Backend Adaptor
+
+## Contents
+
+1. [**Zeppelin Backend Service**](#zeppelin-backend-service)
+2. [**Apache Zeppelin Setup**](#apache-zeppelin-setup)
+
+## Zeppelin Backend Service
+
+**Apache Zeppelin** provides several REST APIs for interaction and remote activation of zeppelin functionality. All REST APIs are available starting with the following endpoint `http://[zeppelin-server]:[zeppelin-port]/api`.
+
+![Zeppelin Server](images/zeppelin_architecture.png)
+
+1. **APIs Provided:**
+   1. **[Server:](http://zeppelin.apache.org/docs/0.9.0/usage/rest_api/zeppelin_server.html)** Get status, version, Log Level
+   2. **[Interpreter:](http://zeppelin.apache.org/docs/0.9.0/usage/rest_api/interpreter.html)** Get interpreter settings, create/update/restart/delete interpreter setting
+   3. **[Notebook:](http://zeppelin.apache.org/docs/0.9.0/usage/rest_api/notebook.html)** Create/update/restart/delete note and paragraph ops
+   4. **[Repository:](http://zeppelin.apache.org/docs/0.9.0/usage/rest_api/notebook_repository.html)** Get/Update NB repo
+   5. **[Configuration:](http://zeppelin.apache.org/docs/0.9.0/usage/rest_api/configuration.html)** Get all [Zeppelin config](http://zeppelin.apache.org/docs/0.9.0/setup/operation/configuration.html) - server port, ssl, S3 bucket, S3.user
+   6. **[Credential:](http://zeppelin.apache.org/docs/0.9.0/usage/rest_api/credential.html)** List credentials for all users, create/delete
+   7. **[Helium:](http://zeppelin.apache.org/docs/0.9.0/usage/rest_api/helium.html)** Contains APIs for all plugin packages (Not needed as of now)
+2. **Security:**
+   1. By default the APIs are exposed to anonymous user
+   2. Recommended way to use **access control**: **[Shiro Auth](http://zeppelin.apache.org/docs/0.9.0/setup/security/shiro_authentication.html)**
+      1. Need to change [**Shiro.ini (Apache link)**](http://shiro.apache.org/configuration.html#ini-sections) in conf directory
+      2. Ideally should be used with [**Apache KnoxSSO**](https://knox.apache.org/books/knox-0-13-0/dev-guide.html#KnoxSSO+Integration)
+      3. Also, [Notebooks](http://zeppelin.apache.org/docs/0.9.0/setup/security/notebook_authorization.html) can have access control based on Shiro defined users
+3. **Deployment:**
+   1. Recommended way is to use stand alone docker
+   2. Create a **custom docker** with new Shiro & Zeppelin configs and set interpreter config for OpenSearch and OpenSearch-sql.
+   3. Sample scripts available in `scripts/docker/spark-cluster-managers`
+4. **Storage:**
+   1. Apache Zeppelin has a pluggable notebook storage mechanism controlled by `zeppelin.notebook.storage` configuration option with multiple implementations.
+   2. Zeppelin has** built-in S3/github connector**. Just provide credentials in [properties or env-sh](http://zeppelin.apache.org/docs/0.9.0/setup/storage/storage.html#notebook-storage-in-s3)
+   3. The notebooks are automatically synced by Zeppelin
+
+## **Apache Zeppelin Setup**
+
+- https://zeppelin.apache.org/
+- Web-based notebook that enables data-driven, interactive data analytics and collaborative documents with SQL, Scala and more.
+- **[Installation Steps](http://zeppelin.apache.org/docs/0.9.0/quickstart/install.html)**
+  - http://zeppelin.apache.org/download.html → Install using Binary package with all interpreters.
+  - Unpack the downloaded tar
+  - To Run the service use `bin/zeppelin-daemon.sh start`
+  - To Stop the service use `bin/zeppelin-daemon.sh stop`
+  - Service starts on port 8080
+  - If on a remote server (like ec2) and want to use server IP to access the notebook:
+    - Make sure your inbound/outbound ports are set correctly on the remote machine
+    - You may want to change the Zeppelin host ip to 0.0.0.0 (or keep it localhost)
+    - To change the host ip use the `zeppelin-site.xml.template` inside “conf/“ directory
+    - `cp conf/zeppelin-site.xml.template conf/zeppelin-site.xml`
+    - `vi conf/zeppelin-site.xml` and edit the host ip
+    - Then restart the service
+- **[Optional] Setup OpenSearch Interpreter:**
+
+  - [Zeppelin OpenSearch interpreter Documentation](https://zeppelin.apache.org/docs/0.9.0/interpreter/elasticsearch.html)
+  - This interpreter can be used for OpenSearch:
+
+    - **Note: current issues with OpenSearch Interpreter in Zeppelin**
+    - User needs to remove ssl flag from the OpenSearch config as Zeppelin doesn’t support ssl request yet: https://issues.apache.org/jira/browse/ZEPPELIN-2031 so run the OpenSearch service without ssl enabled
+    - Zeppelin has “no support for ssl” (only uses http) in elastic interpreter:
+      - [Code](https://github.com/apache/zeppelin/blob/0b8423c62ae52f3716d4bb63d60762fee6910788/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/client/HttpBasedClient.java#L105)
+      - [Apache Issues](https://issues.apache.org/jira/browse/ZEPPELIN-2031)
+    - Zeppelin has “no issue in search query” in elastic interpreter:
+      - [Apache Issues](https://issues.apache.org/jira/browse/ZEPPELIN-4843?jql=project%20%3D%20ZEPPELIN%20AND%20status%20%3D%20Open%20AND%20text%20~%20%22elasticsearch%22)
+    - Zeppelin “No support for search template“ issue in elastic interpreter:
+      - [Apache Issues](https://issues.apache.org/jira/browse/ZEPPELIN-4184?jql=project%20%3D%20ZEPPELIN%20AND%20text%20~%20%22elastic%20search%22)
+    - **To Change the interpreter settings of Elastic Search Interpreter on Zeppelin:**
+      - Open Zeppelin in browser `localhost:8080`
+      - Please click the top right menu beside drop down and select interpreter option
+      - In the interpreters window, search for elasticsearch interpreter
+      - Edit config parameters similar to that your local/remote service
+      - You’ll be prompted to restart the interpreter -> Click on ok
+    - **If using the default settings, add below mentioned changes in interpreter config:**
+
+      - Change transport.type to http
+      - host → localhost (if running on same machine as Zeppelin) & port → 9200
+      - username: admin & password: admin
+      - Once configured the screen should look like this:
+        ![OpenSearch Interpreter](images/opensearch-zeppelin.png)
+
+    - Start a new notebook to try out the below commands
+    - Run a shell command from notebook to check availability of OpenSearch:
+      - `%sh curl -XGET http://localhost:9200 -u admin:admin`
+
+```
+%elasticsearch
+index movies/default/1 {
+    "title": "The Godfather",
+    "director": "Francis Ford Coppola",
+    "year": 1972,
+    "genres": ["Crime", "Drama"],
+    "rating":5
+}
+```
+
+- **[Optional] Setup OpenSearch-SQL JDBC Interpreter:**
+  - [Zeppelin JDBC Interpreter Documentation](https://zeppelin.apache.org/docs/0.9.0/interpreter/jdbc.html)
+  - Zeppelin has a generic JDBC interpreter, we can use this to add our OpenSearch-SQL Driver
+  - Download [OpenSearch-SQL Driver](https://opensearch.org/) Jar file
+  - To Use JDBC interpreter:
+    - **To add the JDBC interpreter settings for OpenSearch-SQL:**
+      - Open Zeppelin in browser `localhost:8080`
+      - Please click the top right menu beside drop down and select interpreter option
+      - Click on "+ Create" Button
+      - Add OpenSearch-SQL interpreter with type JDBC **configure name: “opensearchsql”**
+      - Note: The name you assign to the interpreter is used later for accessing paragraphs in notebook - “%opensearchsql”
+      - Edit config for with OpenSearch-SQL Driver details (Please refer to the [Github README](https://github.com/opensearch-project/sql/tree/main/sql-jdbc))
+    - **If using the default settings, add below mentioned changes in interpreter config:**
+      - Edit the url: `jdbc:elasticsearch://localhost:9200`
+      - Edit the driver class: `org.opensearch.jdbc.Driver`
+      - Edit the username to admin
+      - Edit the password to admin
+      - Add absolute path to the Jar in the last input box
+      - You’ll be prompted to restart the interpreter -> Click on ok
+      - Once configured the screen should look like this:
+        ![SQL Interpreter](images/opensearch-zeppelin-settings.png)
+        
+    - Open a notebook and run below commands to check if interpreter settings are set correctly
+
+```
+%opensearchsql
+SELECT * FROM movies
+```
+
+- **Appendix:**
+  - **[More on Zeppelin UI](http://zeppelin.apache.org/docs/latest/quickstart/explore_ui.html)**
+  - [**More on Zeppelin Config**](http://zeppelin.apache.org/docs/latest/setup/operation/configuration.html)
+  - [**S3-Notebook Storage**](http://zeppelin.apache.org/docs/0.8.2/setup/storage/storage.html#notebook-storage-in-s3)
diff --git a/public/components/notebooks/docs/dev/images/Default_Notebooks_Schemav2.png b/public/components/notebooks/docs/dev/images/Default_Notebooks_Schemav2.png
new file mode 100644
index 0000000000..8a0e2b5ed1
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/Default_Notebooks_Schemav2.png differ
diff --git a/public/components/notebooks/docs/dev/images/Embeddable_API.png b/public/components/notebooks/docs/dev/images/Embeddable_API.png
new file mode 100644
index 0000000000..e24715664e
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/Embeddable_API.png differ
diff --git a/public/components/notebooks/docs/dev/images/Markdown_ss.png b/public/components/notebooks/docs/dev/images/Markdown_ss.png
new file mode 100644
index 0000000000..80c9aa7887
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/Markdown_ss.png differ
diff --git a/public/components/notebooks/docs/dev/images/Multi-timeline_ss.png b/public/components/notebooks/docs/dev/images/Multi-timeline_ss.png
new file mode 100644
index 0000000000..b349d96cab
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/Multi-timeline_ss.png differ
diff --git a/public/components/notebooks/docs/dev/images/Notebooks_v1.png b/public/components/notebooks/docs/dev/images/Notebooks_v1.png
new file mode 100644
index 0000000000..9e246ad32f
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/Notebooks_v1.png differ
diff --git a/public/components/notebooks/docs/dev/images/Notebooks_v2.png b/public/components/notebooks/docs/dev/images/Notebooks_v2.png
new file mode 100644
index 0000000000..825c924cc1
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/Notebooks_v2.png differ
diff --git a/public/components/notebooks/docs/dev/images/Notebooks_v3.png b/public/components/notebooks/docs/dev/images/Notebooks_v3.png
new file mode 100644
index 0000000000..752e1b2527
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/Notebooks_v3.png differ
diff --git a/public/components/notebooks/docs/dev/images/UI.png b/public/components/notebooks/docs/dev/images/UI.png
new file mode 100644
index 0000000000..a8716452aa
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/UI.png differ
diff --git a/public/components/notebooks/docs/dev/images/Zeppelin_ss.png b/public/components/notebooks/docs/dev/images/Zeppelin_ss.png
new file mode 100644
index 0000000000..7efd3c8544
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/Zeppelin_ss.png differ
diff --git a/public/components/notebooks/docs/dev/images/dashboards-notebooks.gif b/public/components/notebooks/docs/dev/images/dashboards-notebooks.gif
new file mode 100644
index 0000000000..2439e1ab01
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/dashboards-notebooks.gif differ
diff --git a/public/components/notebooks/docs/dev/images/dashboards_notebooks_ss.png b/public/components/notebooks/docs/dev/images/dashboards_notebooks_ss.png
new file mode 100644
index 0000000000..e230c1ed7c
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/dashboards_notebooks_ss.png differ
diff --git a/public/components/notebooks/docs/dev/images/default_backend_model.png b/public/components/notebooks/docs/dev/images/default_backend_model.png
new file mode 100644
index 0000000000..954e18f0f7
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/default_backend_model.png differ
diff --git a/public/components/notebooks/docs/dev/images/default_operation_notebook.png b/public/components/notebooks/docs/dev/images/default_operation_notebook.png
new file mode 100644
index 0000000000..122765d9a1
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/default_operation_notebook.png differ
diff --git a/public/components/notebooks/docs/dev/images/default_view_notebook.png b/public/components/notebooks/docs/dev/images/default_view_notebook.png
new file mode 100644
index 0000000000..631288692c
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/default_view_notebook.png differ
diff --git a/public/components/notebooks/docs/dev/images/matplot_ss.png b/public/components/notebooks/docs/dev/images/matplot_ss.png
new file mode 100644
index 0000000000..91efc0c22a
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/matplot_ss.png differ
diff --git a/public/components/notebooks/docs/dev/images/notebook-buttons.png b/public/components/notebooks/docs/dev/images/notebook-buttons.png
new file mode 100644
index 0000000000..30bc67dcd4
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/notebook-buttons.png differ
diff --git a/public/components/notebooks/docs/dev/images/opensearch-zeppelin-settings.png b/public/components/notebooks/docs/dev/images/opensearch-zeppelin-settings.png
new file mode 100644
index 0000000000..ee05b5ced3
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/opensearch-zeppelin-settings.png differ
diff --git a/public/components/notebooks/docs/dev/images/opensearch-zeppelin.png b/public/components/notebooks/docs/dev/images/opensearch-zeppelin.png
new file mode 100644
index 0000000000..479be39c28
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/opensearch-zeppelin.png differ
diff --git a/public/components/notebooks/docs/dev/images/opensearch_ss.png b/public/components/notebooks/docs/dev/images/opensearch_ss.png
new file mode 100644
index 0000000000..fc6317879b
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/opensearch_ss.png differ
diff --git a/public/components/notebooks/docs/dev/images/opensearch_ss_zepcontext.png b/public/components/notebooks/docs/dev/images/opensearch_ss_zepcontext.png
new file mode 100644
index 0000000000..5a0ab2b944
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/opensearch_ss_zepcontext.png differ
diff --git a/public/components/notebooks/docs/dev/images/paragraph-buttons.png b/public/components/notebooks/docs/dev/images/paragraph-buttons.png
new file mode 100644
index 0000000000..9b1f159f46
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/paragraph-buttons.png differ
diff --git a/public/components/notebooks/docs/dev/images/python_ss.png b/public/components/notebooks/docs/dev/images/python_ss.png
new file mode 100644
index 0000000000..297c7ed091
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/python_ss.png differ
diff --git a/public/components/notebooks/docs/dev/images/vizembed_ss.png b/public/components/notebooks/docs/dev/images/vizembed_ss.png
new file mode 100644
index 0000000000..d3c89b471a
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/vizembed_ss.png differ
diff --git a/public/components/notebooks/docs/dev/images/zeppelin_architecture.png b/public/components/notebooks/docs/dev/images/zeppelin_architecture.png
new file mode 100644
index 0000000000..cc1a64e70c
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/zeppelin_architecture.png differ
diff --git a/public/components/notebooks/docs/dev/images/zeppelin_notebooks_sequence.png b/public/components/notebooks/docs/dev/images/zeppelin_notebooks_sequence.png
new file mode 100644
index 0000000000..27d4c50331
Binary files /dev/null and b/public/components/notebooks/docs/dev/images/zeppelin_notebooks_sequence.png differ
diff --git a/public/components/notebooks/docs/example_notebooks/default/Introduction Notebook.json b/public/components/notebooks/docs/example_notebooks/default/Introduction Notebook.json
new file mode 100644
index 0000000000..a0667d3c78
--- /dev/null
+++ b/public/components/notebooks/docs/example_notebooks/default/Introduction Notebook.json	
@@ -0,0 +1 @@
+{"id":"note_97f67897-2786-48de-8f89-a3e4ffbf82b7","dateCreated":"2020-08-21T04:14:37.422Z","name":"Introduction Notebook","dateModified":"2020-08-21T04:18:47.576Z","pluginVersion":"7.9.0","backend":"Default","paragraphs":[{"output":[{"result":"## Hi Everyone,\n### Here's an intro to **OpenSearch Dashboards Notebooks**\n* You may use the top left buttons to create, rename, clone, delete, import and export with notebooks \n* Inner top left buttons are used to run, save, clone, delete the selected paragraph. \n* Long hover over the buttons to see Tooltip helpers","outputType":"MARKDOWN","execution_time":"0s"}],"input":{"inputText":"## Hi Everyone,\n### Here's an intro to **OpenSearch Dashboards Notebooks**\n* You may use the top left buttons to create, rename, clone, delete, import and export with notebooks \n* Inner top left buttons are used to run, save, clone, delete the selected paragraph. \n* Long hover over the buttons to see Tooltip helpers","inputType":"MARKDOWN"},"dateCreated":"2020-08-21T04:14:37.422Z","dateModified":"2020-08-21T04:15:02.395Z","id":"paragraph_51ff08eb-1fac-4198-8988-eba18de27440"},{"output":[{"result":"## Greetings!\n* The notebooks are stored in elasticsearch index\n* Yay! you may import and export me as json files\n* **Run** a paragraph with a keyboard shortcut **\"Shift+Enter\"**\n* The default backend supports **markdown** and **saved visualizations**","outputType":"MARKDOWN","execution_time":"0s"}],"input":{"inputText":"## Greetings!\n* The notebooks are stored in elasticsearch index\n* Yay! you may import and export me as json files\n* **Run** a paragraph with a keyboard shortcut **\"Shift+Enter\"**\n* The default backend supports **markdown** and **saved visualizations**","inputType":"MARKDOWN"},"dateCreated":"2020-08-21T04:15:06.311Z","dateModified":"2020-08-21T04:18:27.636Z","id":"paragraph_bb4e4188-0d9f-44ed-b0ea-e37c4f6293be"},{"output":[{"result":"### Hover between paragraphs to add a Saved Visualization or a New Paragraph\n2. **Unpin** the container to *edit the size* or *delete it*\n3. **Refresh** the container after *date is changed*\n","outputType":"MARKDOWN","execution_time":"0s"}],"input":{"inputText":"### Hover between paragraphs to add a Saved Visualization or a New Paragraph\n2. **Unpin** the container to *edit the size* or *delete it*\n3. **Refresh** the container after *date is changed*\n","inputType":"MARKDOWN"},"dateCreated":"2020-08-21T04:18:31.129Z","dateModified":"2020-08-21T04:18:38.923Z","id":"paragraph_7521a92a-1390-4e12-9b69-75de5878791f"},{"output":[{"result":"# Start typing here","outputType":"MARKDOWN","execution_time":"0s"}],"input":{"inputText":"# Start typing here","inputType":"MARKDOWN"},"dateCreated":"2020-08-21T04:18:45.508Z","dateModified":"2020-08-21T04:18:47.576Z","id":"paragraph_8a1a37a2-f759-4f28-8dfd-0c3210edc23b"}]}
diff --git a/public/components/notebooks/docs/example_notebooks/zeppelin/Introduction Notebook-Zeppelin.json b/public/components/notebooks/docs/example_notebooks/zeppelin/Introduction Notebook-Zeppelin.json
new file mode 100644
index 0000000000..90e3c157fe
--- /dev/null
+++ b/public/components/notebooks/docs/example_notebooks/zeppelin/Introduction Notebook-Zeppelin.json	
@@ -0,0 +1 @@
+{"paragraphs":[{"text":"%md \n\n## Hi Everyone,\n### Here's an intro to **OpenSearch Dashboards Notebooks**\n* You may use the top left buttons to create, rename, clone, delete, import and export with notebooks \n* Inner top left buttons are used to run, save, clone, delete the selected paragraph. \n* Long hover over the buttons to see Tooltip helpers","user":"anonymous","dateUpdated":"2020-08-21 00:55:58.360","config":{},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"HTML","data":"<div class=\"markdown-body\">\n<h2>Hi Everyone,</h2>\n<h3>Here&rsquo;s an intro to <strong>OpenSearch Dashboards Notebooks</strong></h3>\n<ul>\n<li>You may use the top left buttons to create, rename, clone, delete, import and export with notebooks</li>\n<li>Inner top left buttons are used to run, save, clone, delete the selected paragraph.</li>\n<li>Long hover over the buttons to see Tooltip helpers</li>\n</ul>\n\n</div>"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597958104590_901298942","id":"paragraph_1596519508360_932236116","dateCreated":"2020-08-20 21:15:04.590","dateStarted":"2020-08-21 00:55:58.362","dateFinished":"2020-08-21 00:55:58.368","status":"FINISHED"},{"title":"CODE","text":"%md\n\n## Greetings!\n* Yay! you may import and export me as json files\n* **Run** a paragraph with a keyboard shortcut **\"Shift+Enter\"**\n* In Zeppelin each paragraph has to have a \"%[interpreter]\" header (like %md in this paragraph)","user":"anonymous","dateUpdated":"2020-08-21 01:08:56.942","config":{},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"HTML","data":"<div class=\"markdown-body\">\n<h2>Greetings!</h2>\n<ul>\n<li>Yay! you may import and export me as json files</li>\n<li><strong>Run</strong> a paragraph with a keyboard shortcut <strong>&ldquo;Shift+Enter&rdquo;</strong></li>\n<li>In Zeppelin each paragraph has to have a &ldquo;%[interpreter]&rdquo; header (like %md in this paragraph)</li>\n</ul>\n\n</div>"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597972120089_1145163794","id":"paragraph_1597972120089_1145163794","dateCreated":"2020-08-21 01:08:40.089","dateStarted":"2020-08-21 01:08:56.944","dateFinished":"2020-08-21 01:08:56.952","status":"FINISHED"},{"title":"Paragraph inserted","text":"%md\n\n## Now that you are using Zeppelin \n* Checkout how to [setup other interpreters](https://zeppelin.apache.org/docs/0.9.0/#available-interpreters)\n* To setup Elasticsearch interpreter and OpenSearch-SQL interpreters [checkout](https://github.com/opensearch-project/dashboards-notebooks/blob/dev/docs/dev/Zeppelin_backend_adaptor.md#apache-zeppelin-setup)\n","user":"anonymous","dateUpdated":"2020-08-21 01:08:52.286","config":{},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"HTML","data":"<div class=\"markdown-body\">\n<h2>Now that you are using Zeppelin</h2>\n<ul>\n<li>Checkout how to <a href=\"https://zeppelin.apache.org/docs/0.9.0/#available-interpreters\">setup other interpreters</a></li>\n<li>To setup Elasticsearch interpreter and OpenSearch-SQL interpreters <a href=\"https://github.com/opensearch-project/dashboards-notebooks/blob/dev/docs/dev/Zeppelin_backend_adaptor.md#apache-zeppelin-setup\">checkout</a></li>\n</ul>\n\n</div>"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597958104590_1715920734","id":"paragraph_1596742076640_674206137","dateCreated":"2020-08-20 21:15:04.590","dateStarted":"2020-08-21 01:08:52.288","dateFinished":"2020-08-21 01:08:52.295","status":"FINISHED"},{"title":"Paragraph inserted","text":"%md\n\n### Hover between paragraphs to add a Saved Visualization or a New Paragraph\n2. **Unpin** the container to *edit the size* or *delete it*\n3. **Refresh** the container after *date is changed*","user":"anonymous","dateUpdated":"2020-08-21 01:09:14.147","config":{},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"HTML","data":"<div class=\"markdown-body\">\n<h3>Hover between paragraphs to add a Saved Visualization or a New Paragraph</h3>\n<ol start=\"2\">\n<li><strong>Unpin</strong> the container to <em>edit the size</em> or <em>delete it</em></li>\n<li><strong>Refresh</strong> the container after <em>date is changed</em></li>\n</ol>\n\n</div>"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597958104590_931410594","id":"paragraph_1596524302932_2112910756","dateCreated":"2020-08-20 21:15:04.590","dateStarted":"2020-08-21 01:09:14.149","dateFinished":"2020-08-21 01:09:14.160","status":"FINISHED"},{"title":"CODE","text":"%md\n\n# Start typing here","user":"anonymous","dateUpdated":"2020-08-21 00:56:41.827","config":{},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"HTML","data":"<div class=\"markdown-body\">\n<h1>Start typing here</h1>\n\n</div>"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597971380477_32105829","id":"paragraph_1597971380477_32105829","dateCreated":"2020-08-21 00:56:20.477","dateStarted":"2020-08-21 00:56:41.830","dateFinished":"2020-08-21 00:56:41.836","status":"FINISHED"}],"name":"Introduction Notebook-Zeppelin","id":"2FJH8PW8K","defaultInterpreterGroup":"spark","version":"0.9.0-preview2","noteParams":{},"noteForms":{},"angularObjects":{},"config":{"isZeppelinNotebookCronEnable":false},"info":{}}
diff --git a/public/components/notebooks/docs/example_notebooks/zeppelin/Log Analysis-Zeppelin.json b/public/components/notebooks/docs/example_notebooks/zeppelin/Log Analysis-Zeppelin.json
new file mode 100644
index 0000000000..61571248e3
--- /dev/null
+++ b/public/components/notebooks/docs/example_notebooks/zeppelin/Log Analysis-Zeppelin.json	
@@ -0,0 +1 @@
+{"paragraphs":[{"title":"CODE","text":"%md\n## Let's use Zeppelin Adaptor to explore data with Inter-Para Communication\n* Before diving into this notebook make sure:\n  * You have integrated [**Sample web logs**](https://www.elastic.co/guide/en/kibana/7.8/getting-started.html#get-data-in)\n  * You have used the **Introduction Notebook**\n  * You have setup a [**python interpreter**](https://zeppelin.apache.org/docs/0.9.0/interpreter/python.html) & [**OpenSearch-SQL interpreter**](https://github.com/opensearch-project/dashboards-notebooks/blob/dev/docs/dev/Zeppelin_backend_adaptor.md#apache-zeppelin-setup)","user":"anonymous","dateUpdated":"2020-08-21 01:07:36.617","config":{},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"HTML","data":"<div class=\"markdown-body\">\n<h2>Let&rsquo;s use Zeppelin Adaptor to explore data with Inter-Para Communication</h2>\n<ul>\n<li>Before diving into this notebook make sure:\n<ul>\n<li>You have integrated <a href=\"https://www.elastic.co/guide/en/kibana/7.8/getting-started.html#get-data-in\"><strong>Sample web logs</strong></a></li>\n<li>You have used the <strong>Introduction Notebook</strong></li>\n<li>You have setup a <a href=\"https://zeppelin.apache.org/docs/0.9.0/interpreter/python.html\"><strong>python interpreter</strong></a> &amp; <a href=\"https://github.com/opensearch-project/dashboards-notebooks/blob/dev/docs/dev/Zeppelin_backend_adaptor.md#apache-zeppelin-setup\"><strong>OpenSearch-SQL interpreter</strong></a></li>\n</ul>\n</li>\n</ul>\n\n</div>"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597970420851_2109527240","id":"paragraph_1597970420851_2109527240","dateCreated":"2020-08-21 00:40:20.851","dateStarted":"2020-08-21 01:07:36.619","dateFinished":"2020-08-21 01:07:36.626","status":"FINISHED"},{"title":"CODE","text":"%md\n## We'll use the pre-indexed sample web logs provided by OpenSearch Dashboards  \n* Make an OpenSearch-SQL query \n* Import the output of SQL query in a python paragraph\n* Plot an anomaly graph using python-matplot","user":"anonymous","dateUpdated":"2020-08-21 00:58:02.620","config":{},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"HTML","data":"<div class=\"markdown-body\">\n<h2>We&rsquo;ll use the pre-indexed sample web logs provided by OpenSearch Dashboards</h2>\n<ul>\n<li>Make an OpenSearch-SQL query</li>\n<li>Import the output of SQL query in a python paragraph</li>\n<li>Plot an anomaly graph using python-matplot</li>\n</ul>\n\n</div>"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597971322703_978148592","id":"paragraph_1597971322703_978148592","dateCreated":"2020-08-21 00:55:22.703","dateStarted":"2020-08-21 00:58:02.629","dateFinished":"2020-08-21 00:58:02.634","status":"FINISHED"},{"title":"Paragraph inserted","text":"%md\n**OpenSearch-SQL Query to fetch size of request and agent data for all the web requests made**\nSelect bytes,agent from opensearch_dashboards_sample_data_logs\n","user":"anonymous","dateUpdated":"2020-08-20 21:16:13.576","config":{"editorSetting":{"language":"scala","editOnDblClick":false,"completionKey":"TAB","completionSupport":true},"colWidth":12,"editorMode":"ace/mode/scala","fontSize":9,"results":{},"enabled":true},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"HTML","data":"<div class=\"markdown-body\">\n<p><strong>OpenSearch-SQL Query to fetch size of request and agent data for all the web requests made</strong><br />\nSelect bytes,agent from opensearch_dashboards_sample_data_logs</p>\n\n</div>"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597958173576_437396150","id":"paragraph_1591897831553_-310393619","dateCreated":"2020-08-20 21:16:13.576","status":"READY"},{"title":"Paragraph inserted","text":"%opensearchsql(saveAs=data_logs)\nselect bytes,agent from opensearch_dashboards_sample_data_logs","user":"anonymous","dateUpdated":"2020-08-20 21:16:13.576","config":{"saveAs":"opensearch_dashboards_sample_data_logs","editorSetting":{"language":"sql","editOnDblClick":false,"completionKey":"TAB","completionSupport":true},"colWidth":12,"editorMode":"ace/mode/sql","fontSize":9,"results":{"0":{"graph":{"mode":"table","height":300,"optionOpen":false,"setting":{"table":{"tableGridState":{},"tableColumnTypeState":{"names":{"bytes":"string","agent":"string"},"updated":false},"tableOptionSpecHash":"[{\"name\":\"useFilter\",\"valueType\":\"boolean\",\"defaultValue\":false,\"widget\":\"checkbox\",\"description\":\"Enable filter for columns\"},{\"name\":\"showPagination\",\"valueType\":\"boolean\",\"defaultValue\":false,\"widget\":\"checkbox\",\"description\":\"Enable pagination for better navigation\"},{\"name\":\"showAggregationFooter\",\"valueType\":\"boolean\",\"defaultValue\":false,\"widget\":\"checkbox\",\"description\":\"Enable a footer for displaying aggregated values\"}]","tableOptionValue":{"useFilter":false,"showPagination":false,"showAggregationFooter":false},"updated":false,"initialized":false}},"commonSetting":{}}}},"enabled":true},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"TABLE","data":"bytes\tagent\n6219\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n6850\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n0\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n14113\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n2492\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n0\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n1872\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n4531\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n3629\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n9797\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9920\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n6936\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n8489\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n2860\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n8535\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n4529\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9888\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n5919\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9890\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n3039\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n8766\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n8261\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n5028\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n8130\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9934\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n3314\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n2492\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n1950\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n0\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n8489\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9029\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n2860\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n8120\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n3930\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n0\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n3464\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n8535\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n17403\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9773\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n875\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n18082\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n6514\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n8323\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n8364\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n6274\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n2108\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n7174\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n5846\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n7594\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n7169\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n9338\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9217\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n8390\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n9101\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n6936\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n4634\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n8909\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n7343\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n4939\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n55\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n1778\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n8996\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n5197\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n2153\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n5223\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n178\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n5400\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n8676\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n6960\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n18409\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n2441\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n3010\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n9263\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n3853\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n4238\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n2377\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n8928\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n6193\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n2372\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n6942\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n173\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n4877\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n15894\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n7468\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n5481\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n6920\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9920\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n5476\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n2432\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n2034\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n9021\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n7719\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n4037\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n17598\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n6312\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n5835\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n2647\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n8655\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n17357\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n4064\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n3034\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n1634\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n3807\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n8738\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n3629\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n9446\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n7182\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n2159\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n4861\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n3317\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n8663\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n1793\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n6648\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n3307\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n5052\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n4531\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n8995\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n4579\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n8522\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n7304\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n255\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9052\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n6795\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n6739\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n7936\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n7309\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n6254\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n2453\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n3378\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n9375\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n1685\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n0\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n0\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n4154\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n5919\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n4633\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n3039\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n5375\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n5424\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n14113\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n3841\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n1638\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n0\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n5861\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n3994\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n1828\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n4529\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n5321\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n15990\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n4806\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n4072\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n4617\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n9486\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9888\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n7193\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n0\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n6429\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n8648\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n7377\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n9371\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n8590\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n2765\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9424\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n0\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9716\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n1858\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n2432\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n9797\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n2999\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n6817\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n4842\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n16227\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n1603\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n19561\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n1936\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n5540\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n7085\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n5767\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n2053\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n4061\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n7675\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n0\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n979\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n685\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n6509\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n8723\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n9414\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n3086\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n1872\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9174\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n5073\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n10103\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n7531\tMozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24\n5988\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n7009\tMozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)\n6540\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n0\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n9952\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n7873\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n3050\tMozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1\n"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597958173576_876823109","id":"paragraph_1591897481776_702487776","dateCreated":"2020-08-20 21:16:13.576","status":"READY"},{"title":"Paragraph inserted","text":"%md\n**Import this query output in python**\n","user":"anonymous","dateUpdated":"2020-08-20 21:16:13.577","config":{"tableHide":false,"editorSetting":{"language":"markdown","editOnDblClick":true,"completionSupport":false},"colWidth":12,"editorMode":"ace/mode/markdown","fontSize":9,"editorHide":true,"results":{},"enabled":true},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"HTML","data":"<div class=\"markdown-body\">\n<p><strong>Import this query output in python</strong></p>\n\n</div>"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597958173576_599341048","id":"paragraph_1591897902017_-1544489575","dateCreated":"2020-08-20 21:16:13.577","status":"READY"},{"title":"Paragraph inserted","text":"%python.ipython\n%matplotlib inline\nlogs = z.getAsDataFrame('data_logs')\nlogs","user":"anonymous","dateUpdated":"2020-08-20 21:16:13.577","config":{"editorSetting":{"language":"scala","editOnDblClick":false,"completionKey":"TAB","completionSupport":true},"colWidth":12,"editorMode":"ace/mode/scala","fontSize":9,"results":{},"enabled":true},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"HTML","data":"<div>\n<style scoped>\n    .dataframe tbody tr th:only-of-type {\n        vertical-align: middle;\n    }\n\n    .dataframe tbody tr th {\n        vertical-align: top;\n    }\n\n    .dataframe thead th {\n        text-align: right;\n    }\n</style>\n<table border=\"1\" class=\"dataframe\">\n  <thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      <th>bytes</th>\n      <th>agent</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>0</th>\n      <td>6219</td>\n      <td>Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Geck...</td>\n    </tr>\n    <tr>\n      <th>1</th>\n      <td>6850</td>\n      <td>Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Geck...</td>\n    </tr>\n    <tr>\n      <th>2</th>\n      <td>0</td>\n      <td>Mozilla/5.0 (X11; Linux i686) AppleWebKit/534....</td>\n    </tr>\n    <tr>\n      <th>3</th>\n      <td>14113</td>\n      <td>Mozilla/4.0 (compatible; MSIE 6.0; Windows NT ...</td>\n    </tr>\n    <tr>\n      <th>4</th>\n      <td>2492</td>\n      <td>Mozilla/4.0 (compatible; MSIE 6.0; Windows NT ...</td>\n    </tr>\n    <tr>\n      <th>...</th>\n      <td>...</td>\n      <td>...</td>\n    </tr>\n    <tr>\n      <th>195</th>\n      <td>6540</td>\n      <td>Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Geck...</td>\n    </tr>\n    <tr>\n      <th>196</th>\n      <td>0</td>\n      <td>Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Geck...</td>\n    </tr>\n    <tr>\n      <th>197</th>\n      <td>9952</td>\n      <td>Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Geck...</td>\n    </tr>\n    <tr>\n      <th>198</th>\n      <td>7873</td>\n      <td>Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Geck...</td>\n    </tr>\n    <tr>\n      <th>199</th>\n      <td>3050</td>\n      <td>Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Geck...</td>\n    </tr>\n  </tbody>\n</table>\n<p>200 rows × 2 columns</p>\n</div>"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597958173577_325755404","id":"paragraph_1591898708896_1841265952","dateCreated":"2020-08-20 21:16:13.577","status":"READY"},{"title":"Paragraph inserted","text":"\n%md\n**Plot a scatter graph for requests made per browser using matplot**\n","user":"anonymous","dateUpdated":"2020-08-20 21:16:13.577","config":{"editorSetting":{"language":"scala","editOnDblClick":false,"completionKey":"TAB","completionSupport":true},"colWidth":12,"editorMode":"ace/mode/scala","fontSize":9,"results":{},"enabled":true},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"HTML","data":"<div class=\"markdown-body\">\n<p><strong>Plot a scatter graph for requests made per browser using matplot</strong></p>\n\n</div>"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597958173577_2096035472","id":"paragraph_1591899582298_-864868294","dateCreated":"2020-08-20 21:16:13.577","status":"READY"},{"title":"Paragraph inserted","text":"%python.ipython\n\n%matplotlib inline\n\nimport warnings\nimport numpy as np\nwarnings.filterwarnings(\"ignore\")\nimport matplotlib.pyplot as plt\n\nlogs = z.getAsDataFrame('data_logs')\nagent_with_firefox = logs['agent'].str.count('Firefox').values\nfirefox_bytes = logs['bytes'].values[agent_with_firefox==1]\n\nagent_with_chrome_safari = logs['agent'].str.count('Chrome').values\nchrome_bytes = logs['bytes'].values[agent_with_chrome_safari==1]\n\nagent_with_msie = logs['agent'].str.count('MSIE').values\nmsie_bytes = logs['bytes'].values[agent_with_msie==1]\n\nprint(\"Total Requests:\", len(agent_with_firefox))\nprint(\"# Requests from Firefox Browser\", np.sum(agent_with_firefox))\nprint(\"# Requests from Chrome/Safari Browser\", np.sum(agent_with_chrome_safari))\nprint(\"# Requests from MSIE Browser\", np.sum(agent_with_msie), \"\\n\\n\")\n\nplt.figure(num=None, figsize=(30, 6))\nplt.title(\"Request size for each browser\")\nplt.ylabel('Request Size in Bytes')\nplt.xlabel('Requests made')\nplt.axhline(y=10000, color='r', linestyle='--')\nplt.plot(msie_bytes, 'ro', markersize=5, label=\"MSIE\")\nplt.plot(firefox_bytes, 'bo', markersize=5, label=\"Firefox\")\nplt.plot(chrome_bytes, 'go', markersize=5, label=\"Chrome\")\nplt.legend()\n\n\n\n\n \n","user":"anonymous","dateUpdated":"2020-08-20 21:16:13.577","config":{"editorSetting":{"language":"python","editOnDblClick":false,"completionKey":"TAB","completionSupport":true},"colWidth":12,"editorMode":"ace/mode/python","fontSize":9,"results":{},"enabled":true},"settings":{"params":{},"forms":{}},"results":{"code":"SUCCESS","msg":[{"type":"TEXT","data":"Total Requests: 200\n# Requests from Firefox Browser 86\n# Requests from Chrome/Safari Browser 54\n# Requests from MSIE Browser 60 \n\n\n<matplotlib.legend.Legend at 0x7ff41415dc50>\n"},{"type":"IMG","data":"iVBORw0KGgoAAAANSUhEUgAABs0AAAGDCAYAAABgLF6CAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAADh0RVh0U29mdHdhcmUAbWF0cGxvdGxpYiB2ZXJzaW9uMy4xLjMsIGh0dHA6Ly9tYXRwbG90bGliLm9yZy+AADFEAAAgAElEQVR4nOzdfXxcZZ3w/8+3U0oxEQSsAq3YSkEBhUSKcXVRlIc4GB5cWaEKVFll8WHVvX1kb9Zqyy56q/f6w1VWXAERtuINPmB1NiBaQIVoamJBUShYpaWFCiuQ8FA6vX5/nJMyadMkbWcyk+Tzfr3mdc65ztP3zJxMzpzvua4rUkpIkiRJkiRJkiRJk9mUegcgSZIkSZIkSZIk1ZtJM0mSJEmSJEmSJE16Js0kSZIkSZIkSZI06Zk0kyRJkiRJkiRJ0qRn0kySJEmSJEmSJEmTnkkzSZIkSZIkSZIkTXomzSRJkiRpjEXEURHx+xps94KI+HNErKv2tqslIi6PiAtGuezsiEgRMbXWcUmSJEmSSTNJkiRJDSEiVkXEExHRFxHr8uRKc73j2paIODoiVu/IuimlW1JKL65yPC8APgQcklLap5rbliRJkqTJwKSZJEmSpEZyYkqpGWgBWoHz6hzPePJC4KGU0oPbu+JEqcnVaMcREYV6xyBJkiRp9EyaSZIkSWo4KaV1QCdZ8gyAiNg1Ij4XEX+KiAci4j8iYreK+R+JiLURcX9EnJ036zc3n7csIt5ZsezbI+KnFdMviYgbIuLhiPh9RLylYt4JEfHbiHgsItZExIcjogkoAfvlNeP6ImK/LY9jqHXz8s211CLitIpt9EXEUxGxbDTHXLGfY4EbKuK5PC8/KSJ+ExF/yd+DgyvWWRURH4uIFUD/UAmnEd6XN0ZET0Q8GhH3RcQnt1j3ryPi5/m+74uIt1fM3jMifpC/L10RccCW+97C2fnnujYiPlSxj09GxDURcWVEPAq8PX/PvpAvf38+vmu+/E0R8eaK+FJEnDDwHkZEbz4+N1/2kby5y6tH+Z5cHhEXR8QPI6IfeN0IxyVJkiSpgZg0kyRJktRwImIWUARWVhR/BjiILJE2F5gJfCJf/g3Ah4HjgAOBY7djX01kCaf/Ap4HzAe+HBGH5ot8Dfj7lNKzgZcCP04p9efx3Z9Sas5f9w+x+a3W3XKBlNLVA9sA9gPuBZaMdMxbbONHW8Tz9og4KN/OB4EZwA+B70fEtIpV5wNvBJ6TUtq4ne9LP3AW8Jx8G++OiFPydfcnSyp+Md93C9C7xX4/BexJ9hn/yxDvXaXXkX2uxwMfz5OEA04GrsnjuAr438Ar830eDrwCOD9f9ibg6Hz8NWTv9Wsrpm/KxxcD1+fxzcqPYzTvCcBb8+N5NvBTJEmSJI0bJs0kSZIkNZLvRsRjwH3Ag8BCgIgI4F3AP6aUHk4pPQb8K3B6vt5bgMtSSnfkCa1Pbsc+O4BVKaXLUkobU0q/Aq4FTs3nPw0cEhG7p5T+J58/WqNeNyKmkCVjlqWUvjKKYx7JacAPUko3pJSeBj4H7Aa8qmKZi1JK96WUnhhi/WHfl5TSspTS7SmlTSmlFWQJuoEE1NuAH6WUlqSUnk4pPZRSqkyafTul9Is8UXcVFTUKt+FTKaX+lNLtwGVkyaoBt6aUvpvH8US+70UppQdTSuvJknNn5svexOAk2YUV06/lmaTZ02TNXe6XUnoypTSQ/BrpXAH4XkrpZ3k8T45wXJIkSZIaiEkzSZIkSY3klLxW1tHAS4Dn5uUzgGcBy/Pm/v4C/HdeDlkNrfsqtvPH7djnC4G2ge3m234bsE8+/83ACcAf8yb7/mo7tr096w7UTnp/Pj3SMY9kPyreh5TSJrL3aGbFMvdtuVKFYd+XiGiLiJ9ExPqIeAQ4l2c+rxcA9wyz7XUV448DzSMcy5af7X7bmAdbHPcWy98KHBQRzydL1F0BvCAinktWI+3mfLmPAgH8Im/e8uy8fKRzZah4JEmSJI0TDdVJsiRJkiQBpJRuyvvl+hxwCvBn4Ang0JTSmiFWWUuWqBmw/xbz+8kSUAO2THLclFI6bhux/BI4OSJ2Ad4HfCvfVxrFcWxr3UEi4nSy2lNH5rXCYORjHsn9wMsq9hH5viu3NdwxDPu+kNWK+3egmFJ6MiK+wDNJs/vIklDV8gLgd/n4/mTHNmDLY7ifLLn1my2XTyk9HhHLgQ8Ad6SUNkTEz4H/BdyTUvpzvtw6slp+RMRfAz+KiJsZ+T0ZKh5JkiRJ44Q1zSRJkiQ1qi8Ax0VES15L6qvAv0XE8wAiYmZEtOfLfgt4e0QcEhHPIm/WsUIv8DcR8ayImAv8XcW8pWS1j86MiF3y15ERcXBETIuIt0XEHnky61GgnK/3ALB3ROwxVPAjrFu5XCtZn1mn5M0JAptrhg13zCP5FvDGiDgmT9p9CHgK+Pko19/m+5LPfzbwcJ4wewVZX14DrgKOjYi3RMTUiNg7IkZqgnE4/5x/docC7wCuHmbZJcD5ETEjr0H2CeDKivk3kSUwB5piXLbFNBHxt3m/egD/Q5YIKzPyeyJJkiRpHDNpJkmSJKkh5QmkK4B/zos+BqwEbouIR4EfAS/Oly2RJdl+nC/z4y0292/ABrJE19fJkjoD+3kMOJ6sr7D7yZoO/Aywa77ImcCqfJ/nAmfk6/2OLEFzb95UX2WTgQy37hZOBvYEfhoRffmrNNIxjySl9Pt8f18kq7V2InBiSmnDKNcf6X15D7Ao74PuE2RJuoF1/0TWLOWHgIfJkpaHj2a/23AT2ftwI/C5lNL1wyx7AdANrABuB36Vl1Vu69k80xTjltMARwJdEdEHXAd8IKX0h1G8J5IkSZLGsUjJliMkSZIkTTwRkYADU0or6x2LJEmSJKnxWdNMkiRJkiRJkiRJk55JM0mSJEmSJEmSJE16Ns8oSZIkSZIkSZKkSc+aZpIkSZIkSZIkSZr0TJpJkiRJkiRJkiRp0pta7wDG2nOf+9w0e/bseochSZIkSZIkSZKkMbZ8+fI/p5RmDDVv0iXNZs+eTXd3d73DkCRJkiRJkiRJ0hiLiD9ua57NM0qSJEmSJEmSJGnSM2kmSZIkSZIkSZKkSa9mSbOIeEFE/CQi7oyI30TEB/LyvSLihoi4Ox/umZdHRFwUESsjYkVEvLxiWwvy5e+OiAUV5UdExO35OhdFRNTqeCRJkiRJkiRJkjRx1bJPs43Ah1JKv4qIZwPLI+IG4O3AjSmlT0fEx4GPAx8DisCB+asNuBhoi4i9gIXAPCDl27kupfQ/+TLnALcBPwTeAJRqeEySJEmSJEmSJEl18/TTT7N69WqefPLJeofS0KZPn86sWbPYZZddRr1OzZJmKaW1wNp8/LGIuBOYCZwMHJ0v9nVgGVnS7GTgipRSAm6LiOdExL75sjeklB4GyBNvb4iIZcDuKaVb8/IrgFMwaSZJkiRJkiRJkiao1atX8+xnP5vZs2djA3xDSynx0EMPsXr1aubMmTPq9cakT7OImA20Al3A8/OE2kBi7Xn5YjOB+ypWW52XDVe+eohySZIkSZIkSZKkCenJJ59k7733NmE2jIhg77333u7aeDVPmkVEM3At8MGU0qPDLTpEWdqB8qFiOCciuiOie/369SOFLEmSJEmSJEmS1LBMmI1sR96jmibNImIXsoTZVSmlb+fFD+TNLpIPH8zLVwMvqFh9FnD/COWzhijfSkrpkpTSvJTSvBkzZuzcQUmSJEmSJEmSJE1iEcGZZ565eXrjxo3MmDGDjo4OAB544AE6Ojo4/PDDOeSQQzjhhBMAWLVqFS996UsBWLZsGXvssQctLS2bXz/60Y/G/mAq1KxPs8hSeF8D7kwp/d+KWdcBC4BP58PvVZS/LyK+CbQBj6SU1kZEJ/CvEbFnvtzxwHkppYcj4rGIeCVZs49nAV+s1fFIkiRJkiRJkiSNO+UylErQ0wOtrVAsQqGwU5tsamrijjvu4IknnmC33XbjhhtuYObMZ3rQ+sQnPsFxxx3HBz7wAQBWrFgx5HaOOuooli5dulOxVFMta5q9GjgTeH1E9OavE8iSZcdFxN3Acfk0wA+Be4GVwFeB9wCklB4GFgO/zF+L8jKAdwP/ma9zD1Cq4fFIkiRJkiap8qYyS+9ayuKbFrP0rqWUN5XrHZIkSZI0snIZ2tth/nxYuDAbtrdn5TupWCzygx/8AIAlS5Ywf/78zfPWrl3LrFnPNBZ42GGH7fT+xkLNapqllH7K0P2OARwzxPIJeO82tnUpcOkQ5d3AS3ciTEmSJEmShlXeVKb9yna61nTRv6GfpmlNtM1so/OMTgpTdu4JXUmSJKmmSiXo6oK+vmy6ry+bLpUgb0pxR51++uksWrSIjo4OVqxYwdlnn80tt9wCwHvf+15OO+00/v3f/51jjz2Wd7zjHey3335bbeOWW26hpaVl8/S1117LAQccsFNx7Yya9mkmSZIkSdJ4V1pZomtNF30b+kgk+jb00bWmi9JKGzuRJElSg+vpgf7+wWX9/dDbu9ObPuyww1i1ahVLlizZ3GfZgPb2du69917e9a538bvf/Y7W1lbWr1+/1TaOOuooent7N7/qmTADk2aSJEmSJA2rZ20P/RsG32jo39BP77qdv9EgSZIk1VRrKzQ1DS5raoKK2l0746STTuLDH/7woKYZB+y111689a1v5Rvf+AZHHnkkN998c1X2WUsmzSRJkiRJGkbrvq00TRt8o6FpWhMt+1TnRoMkSZJUM8UitLVBczNEZMO2tqy8Cs4++2w+8YlP8LKXvWxQ+Y9//GMef/xxAB577DHuuece9t9//6rss5Zq1qeZJEmSJEkTQXFukbaZbVv1aVacW50bDZIkSVLNFArQ2Zn1Ydbbm9UwKxaz8iqYNWsWH/jAB7YqX758Oe973/uYOnUqmzZt4p3vfCdHHnkkq1atGrTcln2anX/++Zx66qlViW1HREqpbjuvh3nz5qXu7u56hyFJkiRJGkfKm8qUVpboXddLyz4tFOcWKUypzo0GSZIkaXvceeedHHzwwfUOY1wY6r2KiOUppXlDLW9NM0mSJEmSRlCYUqDjoA46DuqodyiSJEmSasQ+zSRJkiRJkiRJkjTpmTSTJEmSJEmSJEnSpGfSTJIkSZIkSZIkSZOeSTNJkiRJkiRJkiRNeibNJEmSJEmSJEmSNOmZNJMkSZIkSZIkSdKoFQoFWlpaNr9WrVpFd3c373//+7d7Wx/5yEc49NBD+chHPlKDSLfP1HoHIEmSJEmSJEmSpNool6FUgp4eaG2FYhEKhZ3b5m677UZvb++gstmzZzNv3rytlt24cSNTp247HfWVr3yF9evXs+uuu+5cUFVgTTNJkiRJkiRJkqQJqFyG9naYPx8WLsyG7e1ZebUtW7aMjo4OAD75yU9yzjnncPzxx3PWWWdRLpf5yEc+wpFHHslhhx3GV77yFQBOOukk+vv7aWtr4+qrr+aPf/wjxxxzDIcddhjHHHMMf/rTnwA4+eSTueKKK4Asyfa2t72t+geANc0kSZIkSZIkSZImpFIJurqgry+b7uvLpkslyPNbO+SJJ56gpaUFgDlz5vCd73xnq2WWL1/OT3/6U3bbbTcuueQS9thjD375y1/y1FNP8epXv5rjjz+e6667jubm5s211k488UTOOussFixYwKWXXsr73/9+vvvd73LJJZfw6le/mjlz5vD5z3+e2267bceDH4ZJM0mSJEmSJEmSpAmopwf6+weX9fdDb+/OJc2Gap5xSyeddBK77bYbANdffz0rVqzgmmuuAeCRRx7h7rvvZs6cOYPWufXWW/n2t78NwJlnnslHP/pRAJ7//OezaNEiXve61/Gd73yHvfbaa8eDH4ZJM0nSxFKLRpolSZIkSZKkcai1FZqanqlpBtl0XkmsppqamjaPp5T44he/SHt7+3ZtIyI2j99+++3svffe3H///VWLcUv2aSZJmjjGspFmSZIkSZIkqcEVi9DWBs3NEJEN29qy8rHU3t7OxRdfzNNPPw3AXXfdRf+WVeCAV73qVXzzm98E4KqrruKv//qvAfjFL35BqVSip6eHz33uc/zhD3+oSZzWNJMkTRy1aqRZkiRJkiRJGocKBejszG6P9fZmNczq0TDTO9/5TlatWsXLX/5yUkrMmDGD7373u1std9FFF3H22Wfz2c9+lhkzZnDZZZfx1FNP8a53vYvLLruM/fbbj89//vOcffbZ/PjHPx5UE60aIqVU1Q02unnz5qXu7u56hyFJqoXFi7MaZpX/2yJg0SI4//z6xSVJkiRJkiRVyZ133snBBx9c7zDGhaHeq4hYnlKaN9TyNs8oSZo4BhpprjRWjTRLkiRJkiRJGtdMmknSKJQ3lVl611IW37SYpXctpbzJPrIaUqM00ixJkiRJkiRp3LFPM0kaQXlTmfYr2+la00X/hn6apjXRNrONzjM6KUwZ48Z/NbxGaaRZkiRJkiRJ0rhj0kySRlBaWaJrTRd9G/oA6NvQR9eaLkorS3Qc1FHn6LSVQgE6OrKXJEmSJEmSJI2SzTNK0gh61vbQv6F/UFn/hn561/XWKSJJkiRJkiRJUrWZNJOkEbTu20rTtKZBZU3TmmjZp6VOEUmSJEmSJEmSqs2kmSSNoDi3SNvMNpqnNRMEzdOaaZvZRnFusd6hSZIkSZIkSdKYW7duHaeffjoHHHAAhxxyCCeccAKXXHIJHeO8yxT7NJOkERSmFOg8o5PSyhK963pp2aeF4twihSmFeocmSZIkSZIkScMqbypTWlmiZ20Prfu27vS9zZQSb3rTm1iwYAHf/OY3Aejt7eX73//+6OIplykUGvPeqkkzSRqFwpQCHQd10HHQ+H5SQlLtVftCVJIkSZIkaUeVN5Vpv7KdrjVd9G/op2laE20z2+g8o3OH71f85Cc/YZddduHcc8/dXNbS0sJf/vIXbrzxRk499VTuuOMOjjjiCK688koigtmzZ3P22Wdz/fXX8773vY+XvOQlnHvuuTz++OMccMABXHrppey5554cffTRtLa2snz5ctavX88VV1zBhRdeyO23385pp53GBRdcAMCVV17JRRddxIYNG2hra+PLX/5yVRJxNWueMSIujYgHI+KOirKrI6I3f62KiN68fHZEPFEx7z8q1jkiIm6PiJURcVFERF6+V0TcEBF358M9a3UskiRJozFwITr/2vksXLaQ+dfOp/3KdsqbyvUOTZIkSZIkTUKllSW61nTRt6GPRKJvQx9da7oorSzt8DYHEmJD6enp4Qtf+AK//e1vuffee/nZz362ed706dP56U9/yumnn85ZZ53FZz7zGVasWMHLXvYyPvWpT21ebtq0adx8882ce+65nHzyyXzpS1/ijjvu4PLLL+ehhx7izjvv5Oqrr+ZnP/sZvb29FAoFrrrqqh0+nkq17NPscuANlQUppdNSSi0ppRbgWuDbFbPvGZiXUjq3ovxi4BzgwPw1sM2PAzemlA4EbsynJUmS6qYWF6KSJEmSJEk7qmdtD/0b+geV9W/op3ddb03294pXvIJZs2YxZcoUWlpaWLVq1eZ5p512GgCPPPIIf/nLX3jta18LwIIFC7j55ps3L3fSSScB8LKXvYxDDz2Ufffdl1133ZUXvehF3Hfffdx4440sX76cI488kpaWFm688UbuvffeqsRfs+YZU0o3R8TsoebltcXeArx+uG1ExL7A7imlW/PpK4BTgBJwMnB0vujXgWXAx3Y+cknSeFYuQ6kEPT3Q2grFIjRoE8magIa7ELV5V0mSJEmSNNZa922laVoTfRv6Npc1TWuiZZ+WHd7moYceyjXXXDPkvF133XXzeKFQYOPGjc/st6lpVNsf2MaUKVMGbW/KlCls3LiRlBILFizgwgsv3JHwh1XLmmbDOQp4IKV0d0XZnIjoiYibIuKovGwmsLpimdV5GcDzU0prAfLh82odtCSpsZXL0N4O8+fDwoXZsL09K5fGwsCFaKUdvRAtbyqz9K6lLL5pMUvvWmoTj5IkSZIkabsV5xZpm9lG87RmgqB5WjNtM9sozi3u8DZf//rX89RTT/HVr351c9kvf/lLbrrpplGtv8cee7Dnnntyyy23APCNb3xjc62z0TjmmGO45pprePDBBwF4+OGH+eMf/7gdR7BtNatpNoL5wJKK6bXA/imlhyLiCOC7EXEoEEOsm7Z3ZxFxDlkTj+y///47EK4kaTwolaCrC/ryB2f6+rLpUgk6rOSjMTBwIbpl57rbeyFai056JUmSJEnS5FOYUqDzjE5KK0v0ruulZZ8WinOLO3V/ISL4zne+wwc/+EE+/elPM336dGbPns0pp5wy6m18/etf59xzz+Xxxx/nRS96EZdddtmo1z3kkEO44IILOP7449m0aRO77LILX/rSl3jhC1+4I4czSKS03Tmo0W88a55xaUrppRVlU4E1wBEppdXbWG8Z8OF8uZ+klF6Sl88Hjk4p/X1E/D4fX5s347gspfTikWKaN29e6u7u3rkDkyQ1pMWLsxpmlf/aImDRIjj//PrFpcmlvKm80xeiS+9ayvxr5w9qOqF5WjNL3rzEZh4lSZIkSZrk7rzzTg4++OB6hzEuDPVeRcTylNK8oZavR/OMxwK/q0yYRcSMiCjk4y8CDgTuzZtdfCwiXpn3g3YW8L18teuABfn4gopySdIk1doKWzaN3NQELTveRLO03QpTCnQc1MH5rzmfjoM6dujJrbHupFeSJEmSJEk1TJpFxBLgVuDFEbE6Iv4un3U6g5tmBHgNsCIifg1cA5ybUno4n/du4D+BlcA9QCkv/zRwXETcDRyXT0uSJrFiEdraoLk5q2HW3JxNF3e8iWapLqrZN5okSZIkSZJGp2Z9mqWU5m+j/O1DlF0LXLuN5buBlw5R/hBwzM5FKUmaSAoF6OzM+jDr7c1qmBWLWbk0nlSrbzRJkiRJkiSNXs2SZpIk1UOhAB0d2Usar2rRSa8kSZIkSZo4UkpkvVppW1JK272OSTNJkqQGNNA3WsdBZoAlSZIkSdIzpk+fzkMPPcTee+9t4mwbUko89NBDTJ8+fbvWM2kmSZIkSZIkSZI0TsyaNYvVq1ezfv36eofS0KZPn86sWbO2ax2TZpIkSZIkSZIkSePELrvswpw5c+odxoQ0pd4BSJIkSZIkSZIkSfVm0kySJEmSJEmSJEmTnkkzSZIkSZIkSZIkTXomzSRJkiRJkiRJkjTpmTSTJEmSJEmSJEnSpGfSTJIkSZIkSZIkSZOeSTNJkiRJkiRJkiRNelPrHYAkSZIkSVJVlctQKkFPD7S2QrEIhUK9o5IkSVKDM2kmSZIkSZImjnIZ2tuhqwv6+6GpCdraoLPTxJkkSZKGZfOMkiRJkiRp4iiVsoRZXx+klA27urJySZIkaRgmzSRJkiRJ0sTR05PVMKvU3w+9vfWJR5IkSeOGzTNKkiRJkqSJo7U1a5Kxr++ZsqYmaGmpX0yqObuxkyRJ1WDSTJIk1U15U5nSyhI9a3to3beV4twihSne3ZAkSTuhWMz6MNuyT7Nisd6RqUbsxk6SJFWLSTNJklQX5U1l2q9sp2tNF/0b+mma1kTbzDY6z+g0cSZJknZcoZBlS0qlrEnGlharHU1wld3YweBu7Do66hubJEkaX+zTTJIk1UVpZYmuNV30begjkejb0EfXmi5KK0v1Dk2SJI13hUKWLTn//GxowmxCsxs7SZJULSbNJElSXfSs7aF/w+C7G/0b+uld590NSZIkjd5AN3aV7MZOkiTtCJNmkiSpLlr3baVp2uC7G03TmmjZx7sbkiRJGr2BbuyamyEiG9qNnSRJ2hH2aSZJkuqiOLdI28y2rfo0K8717oYkSZJGz27sJElStURKqd4xjKl58+al7u7ueochSZKA8qYypZUletf10rJPC8W5RQpTvLshSZIkSZKk2oiI5SmleUPNs6aZJEmqm8KUAh0HddBxUEe9Q5EkSZIkSdIkZ59mkiRJkiRJkiRJmvRMmkmSJEmSJEmSJGnSM2kmSZIkSZIkSZKkSc+kmSRJkiRJkiRJkiY9k2aSJEmSJEmSJEma9GqWNIuISyPiwYi4o6LskxGxJiJ689cJFfPOi4iVEfH7iGivKH9DXrYyIj5eUT4nIroi4u6IuDoiptXqWCRJkiRJkiRJkjSx1bKm2eXAG4Yo/7eUUkv++iFARBwCnA4cmq/z5YgoREQB+BJQBA4B5ufLAnwm39aBwP8Af1fDY5EkSZIkSZIkSdIEVrOkWUrpZuDhUS5+MvDNlNJTKaU/ACuBV+SvlSmle1NKG4BvAidHRACvB67J1/86cEpVD0CSJEmSJEmSJEmTRj36NHtfRKzIm2/cMy+bCdxXsczqvGxb5XsDf0kpbdyiXJIkSZIkSZIkSdpuY500uxg4AGgB1gKfz8tjiGXTDpQPKSLOiYjuiOhev3799kUsSZIkSZIkSZKkCW9Mk2YppQdSSuWU0ibgq2TNL0JWU+wFFYvOAu4fpvzPwHMiYuoW5dva7yUppXkppXkzZsyozsFIkiRJkiRJkiRpwhjTpFlE7Fsx+Sbgjnz8OuD0iNg1IuYABwK/AH4JHBgRcyJiGnA6cF1KKQE/AU7N118AfG8sjkGSJEmSJEmSJEkTz9SRF9kxEbEEOBp4bkSsBhYCR0dEC1lTiquAvwdIKf0mIr4F/BbYCLw3pVTOt/M+oBMoAJemlH6T7+JjwDcj4gKgB/harY5FkiRJkiRJkiRJE1tklbYmj3nz5qXu7u56hyFJkiRJkiRJkqQxFhHLU0rzhpo3ps0zSpIkSZIkSZIkSY3IpJkkSZIkSZIkSZImPZNmkiRJkiRJkiRJmvRMmkmSJEmSJEmSJGnSM2kmSZIkSZIkSZKkSW9qvQNQgyqXoVSCnh5obYViEQqFekclSZIkaTzw94QkSZKkccikmbZWLkN7O3R1QX8/NDVBWxt0dvpDV5IkSdLw/D0hSZIkaZyyeUZtrVTKfuD29UFK2bCrKyuXJEmSpOH4e0KSJEnSOGXSTFvr6cmeCK3U3w+9vfWJR5IkSdL44e8JSZIkSeOUSTNtrbU1a0KlUlMTtLTUJx5JkiRJ44e/JyRJkiSNU6OC6cYAACAASURBVCbNtLViMetzoLkZIrJhW1tWLkmSJEnD8feEJEmSpHFqar0DUAMqFLJOukulrAmVlpbsB66ddkuSJEkaib8nJEmSJI1TkVKqdwxjat68eam7u7veYUiSJEmSJEmSJGmMRcTylNK8oebZPKMkSZIkSZIkSZImPZNmkiRJkiRJkiRJmvRMmkmSJEmSJEmSJGnSM2kmSZIkSZIkSZKkSc+kmSRJkiRJkiRJkiY9k2aSJEmSJEmSJEma9EyaSZIkSZIkSZIkadIzaSZJkiRJkiRJkqRJb8SkWUQcEBG75uNHR8T7I+I5tQ9NkiRJkiRJkiRJGhujqWl2LVCOiLnA14A5wH/VNCpJkiRJkiRJkiRpDI0mabYppbQReBPwhZTSPwL71jYsSZIkSZIkSZIkaeyMJmn2dETMBxYAS/OyXWoXkiRJkiRJkiRJkjS2RpM0ewfwV8C/pJT+EBFzgCtrG5YkSZIkSZIkSZI0dqaOtEBK6bcR8TFg/3z6D8Cnax2YJEmSJEmSJEmSNFZGrGkWEScCvcB/59MtEXFdrQOTJEmSJEmSJEmSxspommf8JPAK4C8AKaVeYE4NY5IkSZIkSZIkSZLG1GiSZhtTSo9sUZZGWikiLo2IByPijoqyz0bE7yJiRUR8JyKek5fPjognIqI3f/1HxTpHRMTtEbEyIi6KiMjL94qIGyLi7ny45+gOWZIkSZIkSZIkSRpsNEmzOyLirUAhIg6MiC8CPx/FepcDb9ii7AbgpSmlw4C7gPMq5t2TUmrJX+dWlF8MnAMcmL8Gtvlx4MaU0oHAjfm0JEmSJEmSJEmStN1GkzT7B+BQ4Cngv4BHgA+MtFJK6Wbg4S3Krk8pbcwnbwNmDbeNiNgX2D2ldGtKKQFXAKfks08Gvp6Pf72iXJIkSZIkSZIkSdouo0mavTGl9L9TSkfmr/OBk6qw77OBUsX0nIjoiYibIuKovGwmsLpimdV5GcDzU0prAfLh87a1o4g4JyK6I6J7/fr1VQhdkiRJkiRJkiRJE8lokmbnjbJs1CLifwMbgavyorXA/imlVuB/Af8VEbsDMcTqI/anttUKKV2SUpqXUpo3Y8aMHQ1bkiRJkiRJkiRJE9TUbc2IiCJwAjAzIi6qmLU7WcJrh0TEAqADOCZvcpGU0lNkzT+SUloeEfcAB5HVLKtswnEWcH8+/kBE7JtSWps34/jgjsYkSZIkSZIkSZKkyW24mmb3A93Ak8Dyitd1QPuO7Cwi3gB8DDgppfR4RfmMiCjk4y8CDgTuzZtdfCwiXhkRAZwFfC9f7TpgQT6+oKJckiRJkiRJkiRJ2i7brGmWUvo18OuIeBj4QUpp0/ZsOCKWAEcDz42I1cBCsmYddwVuyHJg3JZSOhd4DbAoIjYCZeDclNLD+abeDVwO7EbWB9pAP2ifBr4VEX8H/An42+2JT5IkSZIkSZIkSRoQeQuJ214g4krgr4BrgctSSneORWC1Mm/evNTd3V3vMCRJkiRJkiRJkjTGImJ5SmneUPOGa54RgJTSGUArcA9wWUTcGhHnRMSzqxynJEmSJEmSJEmSVBcjJs0AUkqPktU0+yawL/Am4FcR8Q81jE2SJEmSJEmSJEkaEyMmzSLixIj4DvBjYBfgFSmlInA48OEaxydJkiRJkiRJkiTV3NRRLPO3wL+llG6uLEwpPR4RZ9cmLEmSJEmSJEmSJGnsjJg0SymdNTAeEc8FHkoppXzejTWMTZIkSZIkSZIkSRoT22yeMSJeGRHLIuLbEdEaEXcAdwAPRMQbxi5ESZIkSZIkSZIkqbaGq2n278A/AXuQ9WdWTCndFhEvAZYA/z0G8UmSJEmSJEmSJEk1t82aZsDUlNL1KaX/B6xLKd0GkFL63diEJkmSJEmSJEmSJI2N4ZJmmyrGn9hiXqpBLJIkSZIkSZIkSVJdDNc84+ER8SgQwG75OPn09JpHJkmSJEmSJEmSJI2RbSbNUkqFsQxEkiRJkiRJkiRJqpfhmmeUJEmSJEmSJEmSJgWTZpIkSZIkSZIkSZr0TJpJkiRJkiRJkiRp0jNpJkmSJEmSJEmSpElvxKRZRPxNRNwdEY9ExKMR8VhEPDoWwUmSJEmSJEmSJEljYeoolvk/wIkppTtrHYwkSZIkSZIkSZJUD6NpnvEBE2aSJEmSJEmSJEmayEZT06w7Iq4Gvgs8NVCYUvp2zaKSJEmSJEmSJEmSxtBokma7A48Dx1eUJcCkmSRJkiRJkiRJkiaEEZNmKaV3jEUgkiRJkiRJkiRJUr1sM2kWER9NKf2fiPgiWc2yQVJK769pZJIkSZIkSZIkSdIYGa6m2Z35sHssApEkSZIkSZIkSZLqZZtJs5TS9/Ph18cuHEmSJEmSJEmSJGnsTal3AJIkSZIkSZIkSVK9mTSTJEmSJEmSJEnSpGfSTJIkSZIkSZIkSZPeiEmziDgoIm6MiDvy6cMi4vzahyZJkiRJkiRJkiSNjdHUNPsqcB7wNEBKaQVwei2DkiRJkiRJkiRJY6tchqVLYfHibFgu1zsiaWyNJmn2rJTSL7Yo2ziajUfEpRHx4EAttbxsr4i4ISLuzod75uURERdFxMqIWBERL69YZ0G+/N0RsaCi/IiIuD1f56KIiNHEJUmSJEmSJEmSnlEuQ3s7zJ8PCxdmw/Z2E2eaXEaTNPtzRBwAJICIOBVYO8rtXw68YYuyjwM3ppQOBG7MpwGKwIH56xzg4nx/ewELgTbgFcDCgURbvsw5FettuS9Jaig+rSNJkiRJkqRGVCpBVxf09UFK2bCrKytXxnt7E9/UUSzzXuAS4CURsQb4A3DGaDaeUro5ImZvUXwycHQ+/nVgGfCxvPyKlFICbouI50TEvvmyN6SUHgaIiBuAN0TEMmD3lNKtefkVwCnA8H/Cv/89HH304LK3vAXe8x54/HE44YSt13n727PXn/8Mp5669fx3vxtOOw3uuw/OPHPr+R/6EJx4Yrbvv//7reeffz4ceyz09sIHP7j1/H/9V3jVq+DnP4d/+qet53/hC9DSAj/6EVxwwdbzv/IVePGL4fvfh89/fuv53/gGvOAFcPXVcPHFW8+/5hp47nPh8suz15Z++EN41rPgy1+Gb31r6/nLlmXDz30u+yaptNtuz3zrLl4MN944eP7ee8O112bj550Ht946eP6sWXDlldn4Bz+YvYeVDjoILrkkGz/nHMp3/Z7S3g/T09xHa18zxRe8jsIXLsrmn3EGrF49eP2/+iu48MJs/M1vhoceAqBMyrZz+PNoPf0fKc4tUnhjBzzxxOD1Ozrgwx/Oxrc876Aq51751NMoXbGenkXX0dq8kuJeXRRiUzbfcy8bNsC5x113UU5TaF/xWboePZj+TdNpap5CWxt0Pu9MCvffN3j9bZx7mx1zDPzzP2fjxWJdzj2/98bPuTdIS0v2/sF2fe9t5rnnuQeee+Pg3CunKZQebqOnb252ffD991CY7bnnuTf+vvfKS79P6f6b6PneV2i9bRXFh/aiQEUDI5572bjn3tbz/Z+bjXvubT3fcy8b99zber7nnuceTPpzr+cf/kh/3zuorGvT35/o7Q06kude+fcrB9/b22UDba+ZTmcnFBZ47m2l0b/3tmHEpFlK6V7g2IhoAqaklB4b9daH9vyU0tp822sj4nl5+Uyg8q7x6rxsuPLVQ5RvJSLOIauRxmG77rqT4Wu8KrOJ9sNX0LX7o/QXNtFUnkJbeoTOTf9GYUphO7aTntlOuoOma39B28w2OpnK6LdCdjPr9hfSsxhaD5lCMU15Jtk12m1sCtrboevWvel//B00TXmStt3vpPOwj2z3tlR7pYfb6Hr0YPo2PQuoeFrniMPpGPQ1J0nSjtvqIY0pT9J2xhQ6b2K7rlWkeiuTaP9/J9G1rpv+DX00HTKFtkd3p/PXhw1OnEmStBM2P2x07SG0NkHxpV4zafJqbV5J05QnN9+7AmjaLdHSEnk7dJPbVvf2np6+uSZeR51jU/VEVrFrmAUiysBngfPyWmBExK9SSi8fdsVn1p8NLE0pvTSf/ktK6TkV8/8npbRnRPwAuDCl9NO8/Ebgo8DrgV1TShfk5f8MPA7cnC9/bF5+FPDRlNKJw8Uzb9681N3dPZrQNcEsvWsp86+dT9+Gvs1lzdOaWfLmJXQcNPqvtWpsZ6B94K4u6O+HpiayGkedUNiOK7OlS7O2hfueCYXmZliyJHsQQVDeVKa0skTP2h5a923NagVuR5K0mhYvztqDrvzajYBFi7IHMyRJqgavDzRRVOv6XZKkbanW/RlpovBvYnje25s4ImJ5SmneUPNG06fZb/Llrs/7FwN26rG+B/JmF8mHD+blq4EXVCw3C7h/hPJZQ5RLQ+pZ20P/hv5BZf0b+uld17uNNWq3nWq1D9zTk/0DGxRL/9Y1iSer8qYy7Ve2M//a+SxctpD5186n/cp2ypvq09hwa2t2sVGpqSmrhSxJUrV4faCJolrX7xOWHWpI0k6z/yZpsEIhS5AtWZIlgpYsMWFWyXt7k8NokmYbU0ofBb4K3BIRR7BzlTGvAxbk4wuA71WUnxWZVwKP5M04dgLHR8SeEbEncDzQmc97LCJeGREBnFWxLWkrrfu20jRt8Lda07QmWvbZvm+1amynWjez/KIeXmllia41XfRt6COR6NvQR9eaLkor63P1WyxmT+c0N2dPoTQ3Z9PFYl3CkSRNUF4faKKo1vX7hDTwGPj8+dnjzvPnZ9MmziRpu/iwkbS1QiFroeL887OhCbNneG9vchhN0iwAUkrfAt4CXAa8aDQbj4glwK3AiyNidUT8HfBp4LiIuBs4Lp8G+CFwL7CSLEH3nny/DwOLgV/mr0V5GcC7gf/M17kH8DkQbVNxbpG2mW00T2smCJqnNdM2s43i3O37VqvGdqp1M8sv6uE12tPJPq0jSRoLXh9ooqjW9fuEZNUISaoKHzaStD28tzc5jKZPsyNSSssrpncHTkkpXVHr4GrBPs0mt4H+rXrX9dKyT8sO92+1s9upZvvA5XL227i3N7uoKxb9oh5gPxiSpMnK6wNNFNW6fp9w7FBDqpmB/6E9PVlCxf+hE5v9N0nS5DRcn2bbTJpFxOtTSj+OiL8Zan5K6dtVjHHMmDRTo/BmVu0N9GnWtaaL/g39NE1rom1mG51ndHqzRZKkccabmJowqnEyL12aNcnY98zDYTQ3Z487d/hwmLSjTKBMTt6fmZy8tpQmtx1Nmn0qpbQwIi4bYnZKKZ1dzSDHikkzaXLx6WSpNvyBIWkseRNTDaEa//yqdTKXy5SPL1L6+R70PHkwrdPvpPiqRyhcX/KPQtoJ5qOlycFrS0nDJc2mbmullNLCfPiOWgUmSbVWmFKg46AOm2OUqsgfGJLGWmX3TTC4+yZvYmpMVOufX5VO5jIF2umkizL9TKGJTbRRoJPAf8XSjuvpyf7EK/X3ZzWQ/H8jTRxeW0oazpRtzYiIEyPihRXTn4iIX0fEdRExZ2zCkyQNqVzOHoNcvDgblsv1jkjbMgE/q8ofGCkN/oEhSbUw3E1MaUxU659flU7mUgm6fhH0PTmVxBT6npxK1y/C/8XSTmptzXLilZqasib7JE0cXltKGs42a5oB/wK8EiAiOoAzgPlAK/AfQHvNo5Mkbc1qPuPHBP2sfAJX0lgbuIlZ2VyWNzE1pqr1z69KJ7P/i6XaKBazy/UtL9+LxXpHJqmaGvHa0i4QpMaxzZpmZP2WPZ6P/w3wtZTS8pTSfwIzah+aJGlIVvMZPyboZ1XNJ3AnYEU8STUwcBOzuRkisqE3MTWmqvXPr0ons7VhpNooFLLn25YsgUWLsuE4f95N0hAa7dpy4Hnb+fNh4cJs2N7u72OpXoaraRYR0Qw8DhwDfLli3vSaRiVp7PlIy/jho8XjxwT9rKr1BO4ErYgnTRiNdGkwcBOzVMq+QltavFSZLBrmPKzWP78qnczWhpFqp1DILtXH8eW6pBE02rWlfaxJjWW4pNkXgF7gUeDOlFI3QES0AmvHIDZJY8U71+NLI7YjoKFN0M+qWj8wJuoPg4a5watxqbypTGlliZ61PbTu20pxbpHClLE/gRrx0sCbmJNPQ52H1by7VoWTudFu9kmSNN400rXlBH3eVhq3tpk0SyldGhGdwPOAX1fMWge8o9aBSRpDE/XO9UTlo8XjxwT+rAqU6aBER+oh6+60CGzfnbpq/jBolERVQ93g1bhT3lSm/cp2utZ00b+hn6ZpTbTNbKPzjM4xT5x5aaBG0HDnYSPdXaPhwpEkSTtogj5vK41bw9U0I6W0BlizRZm1zKSJxkdaxhcfLR4/JupnVaXMULV+GDRSoqrhbvBqXCmtLNG1pou+DdkJ1Lehj641XZRWlug4aGxPIC8N1Ag8DyVJ0mQwgZ+3lcalYZNmkmqnUZpfAnykZTzy0eLxYyJ+VlXKDFXrh0EjJaq8waud0bO2h/4Ng0+g/g399K7rHfOkmZcGagSeh5IkaTKYqM/bSuOVSTOpDhqp+SXAR1rUGBqlfT2NrEqZoWr9MGikRJU3eLUzWvdtpWla0+aaZgBN05po2WcHTqCd/E710kCNwPNwfGmohwIlSRpnJuLzttJ4NWLSLCK+kVI6c6QySaPXSM0vAT7SovprpPb1NLIqZoaq8cOgkRJV3uAdO1W7OdtACfvi3CJtM9u2eqimOHc7T6AqfKd6aaBGUK3z0GRO7TXcQ4GSJEnSDoqU0vALRPwqpfTyiukCcHtK6ZBaB1cL8+bNS93d3fUOQ5Pc4psWs3DZQhLP/P0FwaLXLeL815xfx8ikOlm6FObPH5z1aG6GJUt8zKoRNViSs8HC2ZyDMdFQO1W7OdtoJw/P3NzvXddLyz4tO3Zz3+9UaTOTOWNj6V1LmX/t/EE1ZZunNbPkzUvq81CgpJppoOeNJEnaYRGxPKU0b6h526xpFhHnAf8E7BYRjw4UAxuAS6oepTSJVLX5pSqp1oWvF9DjS8N8Xj09lPueoMQb6aGVVnoo9v03BTuCakwNVgWlwcKxWY0xULUa243UIV6uMKVAx0EdO3eTuZHaLNW40zDXBlXScC08TFCN1CejpNppwOeNJEmqum0mzVJKFwIXRsSFKaXzxjAmacKrWvNLVVKtC18voMeXRvq8yoe10l64ga7yPPp5Fk08Tluhm86X9eOp06AaLDPUYOGoxqp2c3aiJpcaqc1SjSuNdG1QLSZzxkYjPhQoqfoa8HkjSZKqbsoollkaEU0AEXFGRPzfiHhhjeOSJrTClAKdZ3Sy5M1LWPS6RSx585K6NhFTeeGb0uAL33psZyIrbyqz9K6lLL5pMUvvWkp5U7lusWSfVxr8ed2W6vJ5lSjSRRt9PJtEgT6eTRdtlLAjKElbG7g5W2mHbs4OJJcGbWgCJJcGOtdrboaIbGjnehqFiXgtV7XvCw1r4KHA5mnNBEHztOa6PhQoqTaGe95IkqSJYps1zSpcDBweEYcDHwW+BlwBvLaWgUkTXVWaX6qSaj1oP1Ef2Aeq0lZRo/Wp0bN8E/19kLW8m+nvT/T+KtHRMZpnKqoYy4oC/Zt2G1TWv2k3em8POk4e01AkjQNVq7E9kFzaslrNeE8uNVqbpRo3JuK1XKO18DBRDTwUuNN9MkpqaFZmlyRNBqNJmm1MKaWIOBn4/1JKX4uIBbUOTGpoE6yzh2pd+E7YC+gqtVXUaH1qtJa7aeIQ+mjeXNbE47Rs/C3wirGNpRWammKLcyfG/7kjqSaqdnN2IieXbLNUO2AiXsuZzBk7jfRQoKTamKjPG0mSVGk0SbPHIuI84EzgqIgoALvUNiypgU3Azh6qdeE7YS+gq9Rwe6P1qVEsXE8bj9JF2zP9iNFFcWoXY500m7DnjqSaqdrNWZNL0mYT9f+xyRxJqo6J/LyRJEkDRpM0Ow14K3B2SmldROwPfLa2YUkNbAL2fFutC9+qXkA3Um2+nh7KfU9Q4o300EorPRT7/pvCdrZV1GgdpBeOaKGz6c2U+o+ilxZa6KXYdAuFl1819rH440uSpLrz/7EkaSQ+b/T/t3f/UZKddZ3HP9+u0CapCgQ0OMMkgeBkFPxBN5ZpBI0gkqawNbIBTWsQAQ26sOCuugs4x8FpWXFFfuxZDmsIeJBgByQgY0vZCQohLlCkJ9UCIRIbiDCTGYiCkKqYdFL93T/uraSqp7u6q/tW3VvPfb/OmVNTt6qrnvp173Of7/P9PgCA0Jm7b30ns8dKutDdP2JmZ0oquPvdA2/dAJTLZV9aWkq7GRhlc3PSoUPR6uhtZtLhw9LBg+m1KyQZy+ZrfWhB05cVVWuVH8rIKixp8bqmCpdu/0wha2uaZe19BgAAAAAAAIBBM7Oj7l7e6LYtM83M7NckXSnpUZK+R9I+Sf9X0jOTbCQwMkJc7CFrMpbNV1VFNd2nhs6MmqOzVNOUqvoO9dOazK2pwXRyAAAAAAAAAHjQdsozvkzR4jY1SXL3fzazRw+0VUCWhbrYQ5bU69F726nZjAI7KQTN6p8pqLl2Rndz1s7Q8mdNM5f291iZW1OD2hoAgBHRWmupulJV/URdk3sn0514AgAAAAAI0naCZve5+6qZSZLM7DRJW9d0BEJFds7gZSybL2qOrWuOkVwIAMCQZK7EMQAAAADsQqsVDS/X69HYI8PL2bGdoNmNZvYaSWeY2bMk/WdJfz3YZgEZR3bOYGUsmy9jzQEAIHeqK1XVjtfUWI1msDRWG6odr6m6Us1O9jYAAAAAbEOrJU1PnzrWuLhI4CwLthM0e5Wkl0j6rKSXSvqwpKsH2SgAOZexbL6MNQcA+sP0NQSgfqKu5mp36ebmalPLJ5cJmgEAAAAYKdVqFDBrV7VqNKLr1So5GlmwZdDM3dckvT3+BwDDkbFsvow1BwC2h+lrCMTk3kkVx4sPZppJUnG8qIk91EpGfrHOHwAAwGiq16NT9E7NZjRZn7HH9G0ZNDOzL2uDNczc/fEDaREAABgYko5yhulrCERlf0VT+6ZOWdOssp9aycgn1vkDAAAYXZOT0ZzWxkNzAlUsRtWtkL7tlGcsd/z/dEnPl/SonT6hmX2vpPd2bHq8pN+TdLakX5N0V7z9Ne7+4fhvXq2oRGRL0ivcfTHe/mxJb5FUkHS1u79+p+0CACB0JB3lENPXEIjCWEGLVyyqulLV8sllTeyZIKsGucY6f1sjEw8AAGRVpRKNx6wfn6kwJzATtlOe8d/WbXqzmf2DokBX39z9C5ImJMnMCpKOS/qgpBdJepO7v6Hz/mb2REmXS/p+SY+R9BEzOxDf/FZJz5J0TNLNZnbE3T+/k3YBABA6ko62IbRUPKavISCFsYJmDswQEADEOn9bIRMPAABkWaEQTWCuVqM5rRMToz/8EJLtlGd8csfVMUWZZ2cl9PzPlPRFd/8XM9vsPpdKutbd75P0ZTNbkXRRfNuKu38pbue18X0JmgEAsAGSjrYQYioe09cAILwJEWKdv62QiQcAALKuUIjGYhiPyZ7tlGf8k47/PyDpDkk/n9DzXy5pvuP6y83slyUtSfotd/+mpH2SPtVxn2PxNkn66rrtUxs9iZldKelKSTr//POTaTkAIJMoxbM5ko62EGIqHtPXsAvsTxGEVkutSyqqfuIRqt/7BE2e/i5Vnvq/Vbi+OtL7Qtb5641MPAAAAOzUdsozPmMQT2xm45J+VtKr401vkzQnyePLP5H0YkkbpaC5oqy3jbafutH9KklXSVK5XN7wPgCA0Ucpnt5IOtpCqKl4TF/DDrA/RShaC1VN3/hq1VplNXWmivfeo6kbl7S4UFXh0tHdL7LOX29k4gEAAGCntlOe8b/1ut3d37jD565IusXdvxY/ztc6nvPtkhbiq8ckndfxd+dKujP+/2bbAQDbEFoWQcileJKoLEXS0RZIxQMexP4Uoaj+ZUO11k+oEa8w0NBZqrXKqr7/bzRzacqN2yXW+dscmXjIAo43AACMpu2UZyxL+hFJR+LrPyPp4+oujbgTs+oozWhme939RHz1uZI+F///iKS/MLM3SnqMpAslfVpRBtqFZnaBpOOKSj3+4i7bBAC5EWIWQaileJJcaoukox5IxQMexP4UoahrUk2d2bWtqTO1rAmN7jcZWyETD2njeAMAwOjaTtDsuyQ92d3vliQze62kv3T3X93pk5rZmZKeJemlHZv/l5lNKCqxeEf7Nne/1czeJ+nzitZUe5m7t+LHebmkRUkFSe9091t32iYAyJsQswhCLcUT4lJbmUQqHvAg9qcIxeTz96t47X1qtB4KnBUL92nieRem2CoMA5l4SBPHG4SErEkAebOdoNn5klY7rq9KetxuntTd75H0neu2vaDH/V8n6XUbbP+wpA/vpi0AkFchZhGEWoon1KW2MolUvIHjpHs0sD9FKCozBU39xBmqfeIBNe8dU/H0NU099QxVZjZaOhtAKgLsHHC8QSjImgSQR9sJmr1b0qfN7IOKssCeK+nPB9oqYJ3Q1l0CsiCpLIIs/T5DLcUT9FJbAQ6SYHOcdG8tKz8J9qcIRaEgLV5vqlZPi5OIxzjUAFkSaOeA4w1CQdYkgDwyd9/6TmZPlvTj8dWPu3t9oK0aoHK57EtLS2k3IzeSGPgJcd0lIAuS+G3x+xyOQMcSAn5h2MzCgjQ72z2AVCpJ8/OcdEv8JIaB9xgAMibQzgHHG4Ribk46dEjqHD42kw4flg4eTK9dALBbZnbU3csb3badTDNJOlPSt939z8zsHDO7wN2/nFwTEaKkOokhrrsEZEESWQT8Pocj2KW2mLaYO5Qq6i3Un0SmMpJD3Z8CwKgKtHPA8Qa7kZXKAxJZkwDyacugmZkdklSW9L2S/kzSwyRdI+lpg20aRl1SAz8hrrsEZMVuF0jn9zk8QS61FeggCTbHSXdvIf4kspiRXFBLM6pqxuuSJiVVJDGKCQCpCLhzEGT/HQOXtSzFSiV6Vkea0AAAIABJREFU/vXtqYz2MrcA0NPYNu7zXEk/K6kpSe5+p6SzBtkohKHXwE8/2usuddrJuksAksfvE7vSHiTpFMggCTbWPukulaKyLqUSJ92dQvxJdGYku7wrIzkV7ZGo2dmo1tDsbHS91UqnPXGTFhai8kcLC6k2BQCGj84B0KVzArp79wT0NLSzJufno5KM8/OUGQUQvu2UZ1x1dzczlyQzK271B4CU3ISxyv6KpvZNnTJDubKfTjSQNn6f2BWmLeYOpYp6C/EnkbmM5IzVwMzabHIAGDo6B0CXLFYeIGsSQN5sJ2j2PjP7U0lnm9mvSXqxpKsH2yyEIKmBnyTWXUKOZakYeID4fWJXGCTJJU66NxfiT6Kdkdxe+1JKOSM5YyNRGYvhAUA66BwADwq4YmliGObJHz5zDJu5+9Z3MnuWpEskmaRFd79h0A0blHK57EtLS2k3IzfaO7VQBn4wYpi+DQBAqjK3ptnCQlSSsXMkqlSKag2lMFg7NxdView8JTOLyh8dPDj05gAAgJQxjNEb70/+8JljUMzsqLuXN7xtO0GzdQ9WkHS5u78nicYNG0EzIEcyNjAGAEAetdZa2clIzthZN10VAMCwkKkxOpiAvjn6TvnDZ45B6RU027Q8o5k9XNLLJO2TdETSDfH135G0LGkkg2YAciRjJZgAAGLEJocKYwXNHJhJZw2zUxqTrRqYIa5jBwDInozNGcEWqFi6OYZ58ofPHGnotabZuyV9U9InJf2qomDZuKRL3X15CG0DgN0JuBh4e9Z+/URdk3snWUcMwGhgxAZZkKGRqIzF8LAFYv4ARhVraCIUAQ/zYBN85khDr6DZ4939ByXJzK6W9K+Sznf3u4fSMqSKE0IEIdDp25lbHwYAtiuDIzb0eZC2DMXw0AMxfwCjjEwNhCLQYR70wGeONPQKmt3f/o+7t8zsywTM8oETQgQj0Onb1ZWqasdraqxGg86N1YZqx2uqrlSzUfoKADaTsREb+jwAtiuDMX8A2DYyNRCKQId50AOfOdLQK2j2JDP7dvx/k3RGfN0kubs/fOCtQyo4IURQApy+XT9RV3O1e9C5udrU8sllgmYAsi1jIzb0eQBsV8Zi/gDQFzI1EJIAh3mwBT5zDNvYZje4e8HdHx7/O8vdT+v4PwGzgPU6IQSQvsm9kyqOF7u2FceLmtjDNEEAGdcesSmVJLPoMsURG/o8ALarHfPvRJYGgFHRztSYn5cOH44uyawHMGitlrSwIM3NRZetVtotAranV6YZcipjk8CBXQlxrZrK/oqm9k2dsqZZZT/TBAFkXMZqa9DnAbBdZGmMnhDPA4DdIFMDwDBRCh+jzNw97TYMVblc9qWlpbSbkWns1BCKTH6XEzp7b621VF2pavnksib2TKiyv6LCGD9QAOhHJo8TADKr3Y3LQMwfWwh5/04wEAAwChYWpNnZ7gmKpVKU6UrwHllgZkfdvbzRbWSa4RQZmwQO7Fjm1qpJ8Oy9MFbQzIEZ1jADkF8JjBrS5wHQD7I0RkfmzgMSEnIwEAAQFtaDxSgjaIYNcUKIEGTuAB3q2TsADFuSkxDo8wBAcDJ3HpCQ6HTC1WiYpPh04lOuatVG+nUBAMJDKXyMsrG0GwAAg5K5Bdt7nb0DALavcxKCe/ckBABA7mXuPCAh9aNraja6l9hoNl3Lt6yl1CIAADbWXg+2VJLMokvWg8WoIGgGIFiZO0CHevYOAMPGJAQAQA+ZOw9IyGRrSUXd07WtqHs08QDrtgMAsqVdCn9+Xjp8OLqknDBGBeUZAQQrc2vVtM/e15cTG/WzdwAYNmp9AAB6yNx5gJTIWpyVwvWa0rdV05SaOlNF3aMp1VQ5rSbposG0GwCAHaIUPkaVufvW9wpIuVz2pSVmYQFISftkOTNn70AYWmstVVeqqp+oa3LvpCr7KyqMpfTbSmBQDFtIcE0zAAAGLqnj1sKCWpf/kqrNH9eyJjShZVWKN6lw7XsYkQQAAOiDmR119/KGtxE0AwDsCgECpKy11tL0NdOqHa+pudpUcbyoqX1TWrxicfiBM4I5w8MkBKQsU8H6JHFcB5K3sCDNznZnSJdKUa2qfoJd9DMAAAAS0StoRnlGAMDOceKODKiuVFU7XlNjNRqIaqw2VDteU3WlqpkDQ551Xa1Gv4f2oFijEV2vVpkBnjRqfSBFmQrWd7Rp10E8juvAYPRai7Of41gm604CAACEZSztBgAARlhngMC9O0AADEn9RF3N1e6BqOZqU8snl1NoTI9BMQDB6AzWu7wrWJ+GdhBv9rpZHfrYIc1eN6vpa6bVWmv190Ac14HBaK/F2Wmna3G2J40cPBhdEjADAABIFEEzAMDOESBABkzunVRxvHsgqjhe1MSeHQxE7boxyQ2KtVpRNae5ueiy1efYd9KPA+AhmQrWK8EgHsd1YDAqlShrs1SSzKLLqaloOwAAADKF8owAgJ1rBwg612fY6axZYIcq+yua2jd1Spm0yv4UBqLag2LrS5v1OSiWVIU0Kq0Bg9EO1rfLwkopBuvVO4jXV5lajuvAYFBWEQAAYGQQNAMA7FxCAQJgNwpjBS1esajqSlXLJ5c1sWdiZ2v5JNKYZAbFkloajSXWhieR9aQwMjIVrFeCQTyO68DgsBYnAGDAWq3oXK9ej+ZCMT8D2JnUgmZmdoekuyW1JD3g7mUze5Sk90p6nKQ7JP28u3/TzEzSWyQ9R9I9kn7F3W+JH+eFkg7GD/sH7v6uYb4OYMc4kiEEzJpFRhTGCpo5MNNfRsXAGrP7QbFeFdL6edikHge9tdeTWh9AWbxikcBZoDIVrFeCQTyO6wAAACOJKiNActLONHuGu/9rx/VXSfo7d3+9mb0qvv4/JFUkXRj/m5L0NklTcZDtkKSyJJd01MyOuPs3h/kigL5xJENImDWLgGRlPkNSFdKotDYcnetJSepaTyoTgVwMRJaC9YkG8TiuAwAAjByqjADJGUu7AetcKqmdKfYuST/Xsf3PPfIpSWeb2V5J05JucPdvxIGyGyQ9e9iNBvrWeSRz7z6SAQD612pJCwvS3Fx02Wrt6CGmp6XZWenQoehyenpHD7Vr7QpppZJkFl3upEJaUo+D3nqtJzXSEvhdYXjaQbyDFx/UzIEZshwBAABypFeVEQD9STPTzCVdb2Yu6U/d/SpJ3+3uJyTJ3U+Y2aPj++6T9NWOvz0Wb9tsexczu1LSlZJ0/vnnJ/06gP5RLwsAkpNQ9m6WZuYlVSGNSmvDkdh6UllCVnxusT4fUpeVtG8AAEYIVUaA5KQZNHuau98ZB8ZuMLN/6nFf22Cb99jevSEKyF0lSeVy+ZTbgaHjSAYAyUko2pW1+QxJVUij0trgJbaeVJZkKYqMoWF9PqSOgD0AADvSrjKy/hBKlRGgf6mVZ3T3O+PLr0v6oKSLJH0tLruo+PLr8d2PSTqv48/PlXRnj+1AtlEvCwCSk1AdivZ8hk7MZ8B2tNeTmr9sXoefcVjzl82PfpCB+i651Lk+n8u71ucDhoIy9gAA7Ei7ysj8vHT4cHTJnBNgZ1LJNDOzoqQxd787/v8lkg5LOiLphZJeH19+KP6TI5JebmbXSpqS9K24fOOipP9pZo+M73eJpFcP8aUAO0O9LOAUlIPCjiWUvcvMPOxGez2pmQOBZGGRFT88GSpF12t9vtS+2xl6fzAEWUv7BgBghFBlBEhGWuUZv1vSB82s3Ya/cPe/NbObJb3PzF4i6SuSnh/f/8OSniNpRdI9kl4kSe7+DTObk3RzfL/D7v6N4b0M5FUi5+4cyXpifCRfKAeFXUko2sV8BoRk1xMRiCIPR4Kl6JLoO2VufT5K9eUPAftc4twPAABkibnna4mvcrnsS0tLaTcDI4xz98HjPc6fhdsXNHvdbNcgXWm8pPnL5sPJ2sBgtUdbiHYByU1E4Hc1eAsL0uxsd4CgVIrq6fQxsSqpvlPmJrEk9P5ghHAikDt85AAAIA1mdtTdyxvdltqaZsCoosz+4PEe50+vclDAtrSzdw8ejC4ZZUGOJbYuFb+rwUto7bik+k6ZW5+PtfXyhwVZcodzPwAAkDUEzYA+ce4+eLzH+dMuB9Up1XJQADDCmIgwQtql6DrtoBRdkn2n9vp8By8+qJkDM+mWSU7o/cGIIWCfK5z7AQCArCFoBvSJc/fB4z3On8r+iqb2Tak0XpLJVBovaWrflCr7WTsHAPrFRIQR0l47rlSSzKLLHawdF2zfKaH3B0B2Bbv/AgAAI4s1zYA+UXN98HiP86m11lJ1parlk8ua2DOhyv5KurPbs4YV0gFsU+bWpUJvCawdF3TfibX1gKAFvf8CAACZ1WtNM4JmwA5w7j54vMdAB0YTAPSJiQhDkLHJDPSdAIwq9l8AAGDYCJp1IGgGABg5CwvS7Gy0MnpbqSTNz0drfQA9tIMn9RN1Te6dJHgCJIHJDFti37M53hsAAAAgXb2CZqcNuzEAAKBPvVZIJ2iGHhIt05exrBogVdVqFDBrT2ZoNKLr1Sr7ZVEitBfeG2QBh3QAAIDNETQDkChmzgID0F4hvTPTjBXSsQ3Vlapqx2tqrEbfncZqQ7XjNVVXqpo50MfAPlk1QDcmM/SU2L4nQLw3SBuHdAAAgN7G0m4AgHC0Z87OXjerQx87pNnrZjV9zbRaa620mwaMtkolGs0olSSz6HJqKtoO9FA/UVdztXtgv7na1PLJ5f4eqDOrxr07qwbIo/Zkhk5MZnhQYvueAPHeIG0c0gEAAHojaAYgMZ0zZ13eNXMWwC4UCtH03/l56fDh6JLpwNiGyb2TKo53D+wXx4ua2NPnwH69rtY9DS0ckOYulhYOSK17GlFWTUparWi5v7m56LLF/AwME5MZekps3xMg3pvRE9rxpleiLAAAACjPCCBBvWbOUm4G2KVCISr5Rdkv9KGyv6KpfVOnrJ1T2d/fwH5r4oc0/cKCantaaj5MKt4vTZ0saPFJP6g0QreUlkLq2pMZqtVopHligkWBOiS17wkR781oCfF4Q9VvAACA3giaAUhMe+Zse40GiZmzAJCmwlhBi1csqrpS1fLJZU3smdjRWpPVC6XauVIj/rPGd0TXqxdKaYRxO0tLSd2lpYgrY2iYzLCppPY9IeK9GS0hHm/aibLrA4EkygIAAEQImmGgWmstVVeqqp+oa3LvJCeEgWPmLABkT2GsoJkDM7vK+K1/7TNqFta6tjULa1r++mc1832X9vVYSfQNepWWGtVBTCA0Sex7QsV7MzpCPN6QKAsAANAbQTMMTGutpelrpk8JoCxesUjgLFDMnAWAMCWVSZxU34DSUgCAYQj1eEOiLAAAwObG0m4AwlVdqap2vKbGakMuV2O1odrxmqor1bSbhgFqz5w9ePFBzRyY2XHArLXW0sLtC5q7cU4Lty+otTbiK24DwAhrZxKXxksymUrjpR1lEifVN2iXliqVJLPoktJSAICkcbwBAADIHzLNMDD1E3U1V7trWTRXm1o+uUwpEvREliIAZEtSmcRJ9Q0oLQUAGAaONwAAAPlD0AwDk1QpJ+RPZyaCpK5MBAKuAJCOJNbgSbJvQGkp7BRr7gLoB8cbAACAfCFohoFpl3Jany3Ubykn5A9ZiltrtaIZr/V6tNYCM14BjIIs9g0IoAxBhg5aZLMDAAAAAHohaIaBSaqUE/KHLMXeWi1pelqq1aRmM1qMfGoqKh1D4AxAlmWtb0AAZQgydtAimx0AAAAA0MtY2g1A2NqlnA5efFAzB2YYgMK2tDMRSuMlmUyl8VLqmQhZUq1GY4+NhuQeXdZq0XYAyLos9Q06Aygu7wqgICEZO2j1ymYHAAAAAIBMMwCZk7VMhKyp16PJ+p2azWhxctZaAIDtoxzwEGTsoEU2O5B9lM0FAABAmgiaIV8ytKYGemtnIjBoearJyai6VeOh8T4Vi9IE433JYn8BBC/RAAr7jI1l7KCVxXX1EsN3EAGgbC4AAEB/OA1IHkEz5EfG1tQAdqpSib6667/KlQDG+zKD/QWQC4kFUNhnbC5jB61gs9n5DiIQrDsIYJQxcA1g2DgNGAyCZsiPzjU1pO41NahphxFSKEQHv2o1qm41MUFnPHHsL4BcSCyAwj5jcxk8aAWZzc53EIGgbC6AUcXANYA0cBowGATNMBqSmK6TsTU1gsXUqqEoFKKvLV/dAWF/AeRGIgEU9hm9cdAaPL6DCATrDgIYVQxcA0gDpwGDQdAM2ZfUdJ2MrakRJKZWIRTsLwD0g30G0sZ3EIEIet1BAF1Cm2/LwDWANHAaMBhjaTcA2FLndB337uk6/WivqVEqSWbRJQtBJSupzwpIG/sLAP1gn4G08R1EINplc+cvm9fhZxzW/GXzWrxicfTXHQTQpT3fdnZWOnQoupyejraPqvbAdScGrgEMGqcBg0GmGbIvqek6GVxTIzhMrUIo2F8A6Af7jJ5Cm0meSXwHEZAg1x0E0CXEUobtgev1hXcYuAYwSJwGDAZBM2RfknmmrKkxWOQEIyTsLwD0g33GhqjcPER8BwEAIyLE+bYMXANIC6cByRt6eUYzO8/MPmpmt5nZrWb2ynj7a83suJktx/+e0/E3rzazFTP7gplNd2x/drxtxcxeNezXgm1otaSFBWluLrrcSa49eaa9JfEeJ4XPCgAAdKByMwAAWC/UUobtgeuDB6NLAmYAMJrSyDR7QNJvufstZnaWpKNmdkN825vc/Q2ddzazJ0q6XNL3S3qMpI+Y2YH45rdKepakY5JuNrMj7v75obwKbC2pqcVM19lc1qZv81kBmddaa6m6UlX9RF2TeydV2V9hnZAOvD9AskKcSQ7sVrAlS4N9YQCSRilDAECWDT1o5u4nJJ2I/3+3md0maV+PP7lU0rXufp+kL5vZiqSL4ttW3P1LkmRm18b3JWiWFUkWqSbPdGNZLATOZwVkVmutpel3X6LaVz6h5tq9Ko6drqnzn6rFF1xPYEjx+3PNtGrHa2quNlUcL2pq35QWr1jk/cGWGCveGJWbgW5Zm/OWmGBfGIBBYL4tACDLhl6esZOZPU7SpKRavOnlZvYZM3unmT0y3rZP0lc7/uxYvG2z7Rs9z5VmtmRmS3fddVeCrwA99ZpajGTwHgPoQ/X2BdW+eKMaa/fKJTXW7lXtizeqevtC2k3LhOpKVbXjNTVWG3K5GqsN1Y7XVF2hjhx6a48Vz85Khw5Fl9PT6VZMzgoqNwPdgi1ZGuwLAzAolDIEAGRVakEzMytJuk7Sb7r7tyW9TdL3SJpQlIn2J+27bvDn3mP7qRvdr3L3sruXzznnnF23HdsUapHqLOE9BtCH+k1/qaZ1j+I3raXlm96fUouypX6iruZq90SE5mpTyyeZiIDeGCveXHsm+fy8dPhwdEniCfIs2Dlvwb4wAAAA5E0qQTMze5iigNl73P0DkuTuX3P3lruvSXq7HirBeEzSeR1/fq6kO3tsR1YwtXjweI+B3GittbRw+4LmbpzTwu0Laq31n8IyeUIq3t+9rXi/NHEyoUaOuMm9kyqOd09EKI4XNbGHiQjojbHi3kKdSd5qSQsL0txcdElmIbYj2Dlvwb4wAAAA5M3Q1zQzM5P0Dkm3ufsbO7bvjdc7k6TnSvpc/P8jkv7CzN4o6TGSLpT0aUWZZhea2QWSjku6XNIvDudVYFsoUj14vMdA5iWxzlFSa21VJp+vqQ9eq9qelpoPiwJmUycLqjz3eX2+qjBV9lc0tW/qlPe5sp+JCOiNdbvyh+WbsFPtOW/rvzsjP+ct2BcGAACAvDH3DSsaDu4JzX5M0k2SPitpLd78GkmzikozuqQ7JL20HUQzs9+V9GJJDygq51iNtz9H0pslFSS9091ft9Xzl8tlX1paSvIlAQCwoaQGVRduX9DsdbNqrD40Il8aL2n+snnNHJjpq0Gt6UtUvesTWj77Xk38++mqnPNUFRavZ5Q31lprqbpS1fLJZU3smVBlf6WvwGSyjUkg4oqhIICSPwsL0dp1nYHSUikqPznTx24Z+dTevQc35y3YFwYASAKnNwCyxMyOunt5w9uGHTRLG0EzhKY9wFs/Udfk3sl0B3gBdElqUHXuxjkd+tghecfSnSbT4Wcc1sGLD/bXKAa0RgNRmJHDTytf5uakQ4eiNezazKJ12w72uVsGAAAIHac3ALKmV9Bs6OUZASQnqZJtAAaj1zpH/QTN2mttdWaa7XitrfbiQqRCZFu1Gp1RtiOujUZ0vVrls8soflr5QklOAACQdVnK7OL0BsAoGUu7AcAwhbZge3WlqtrxmhqrDblcjdWGasdrqq5U024aAD00qNppJ4Oq7bW2SuMlmUyl8RJrbYWuV8QVQOrayzeVSlGGWanE8k0YYaGdJGFo+OoA2dXO7JqdjbLjZ2ej62n9TkM+vWFfCISHTDPkRoip4PUTdTVXu3sdzdWmlk8u97fOEYCBqFSki6Za+sRdVd37yLpO/+akLjqnokqlv51OYaygxSsWs7PWFgaPNBbgVBmaLl0oRH1ISnJi5IV4koSh4KsDZFvWMrtCPb1hXwiEiaAZciNrHYYkJFqyDUDyrCW9YFr6Sk1aa0pjRen8KckWJfUfOJs5MENAPC/aaSzrz75IY0FeZXBEgpKcCEK1qtanbla1+ROqa1KTjboqn7pJhVE+ScJQhHh+DYQkqaUCkhLq6Q37QiBMlGdEboSYCk7JNiDbqitVffrOmu5da0hy3bvW0KfvpIQqtqGdxjI/Lx0+HF0yXTEfqO+ysc4RCffuEQkAO9Y6uqzp5nWa1bwO6bWa1bymm9epdcs/pt204IS2ew/x/BoISVJLBSQl1NMb9oVAmMg0Q26EmApOyTYg2yihil0hjSV/MphNlRlZmy4NBKLaukQ1PVENlSRJDZ2lmp6i6gMPF7+sWAKlYUPcvYd4fg2EJIuZXSGe3rAvBMJE0Ay5kcUOQxIo2QZkFyVUAfSF+i6bY0QCGIh6oax14Wg1daaWTysTNJMSi3aFuHsP9fwaCAXrrw4H+0IgTATNkBt0GAAMW7uEau14Tc3VporjRUqoAtgc2VSbY0QCGIjJHx5TseTr4tGmiSdbeo3KkoSiXSHu3jm/BrIvxMyurGFfCISJoBlyhQ4DgGGihCqAvpBNtTlGJICBiOLRti4ebcSj2xKKdoW6e+f8GgDYFwIhMndPuw1DVS6XfWlpKe1mAAAAAN1CXPQGQOa1l+wiHr2BhQVpdrY72lUqSfPzfY2OsnsHAADIFjM76u7lDW8jaAYAAABkBKPXAJAdCUa72L0DAABkB0GzDgTNAAAAAADAthDtAgAACE6voBlrmgEAAAAAAGyExWoAAAByZSztBgAAAAAAAAAAAABpI9MMAAAAAAAgL9olJ+t1aXKSkpMAAAAdCJoBAAAAAADkQaslTU9LtZrUbErFojQ1JS0uEjgDAAAQ5RkBANhQqyUtLEhzc9Flq5V2iwAAAIBdqlajgFmjIblHl7VatB0AAABkmgEAsB4TcAEAABCkej3q4HZqNqXlZWlmJp02AQAAZAiZZgAArMMEXAAAAARpcjKaEdapWJQmJtJpDwAAQMYQNAMAYJ1eE3ABAACAkVWpRCUUSiXJLLqcmoq294t65gAAIECUZwQAYJ32BNxG46FtTMAFAADAyCsUoprj1Wo0I2xiIgqY9VuDnHrmAAAgUGSaAQCwTpITcAEAAIBMKRSi9csOHowudxLkop45AAAIFJlmAACsk9QEXAAAACBIveqZz8yk0yYAAIAEEDQDAGAD7Qm4nPMDAAAA61DPHAAABIryjAAAAAAAANg+6pkDAIBAkWkGAAAAAEhUqxWVOa7Xo4QUyhwDgaGeOQAACBRBMwAA0LfWWkvVlarqJ+qa3Dupyv6KCmMMkoSMAXAA29VqSdPTUq0WLXFULEYJKIuL7DeAoFDPHAAABIigGQAA6EtrraXpa6ZVO15Tc7Wp4nhRU/umtHjFIoGzQDEADqAf1Wq0v2gvddRoRNerVcbWAQAAAGQba5oBALCB1lpLC7cvaO7GOS3cvqDWWivtJmVGdaWq2vGaGqsNuVyN1YZqx2uqrlTTbhoGpHMA3L17ABwA1qvXowB7p2YzquAGAAAAAFk28plmZvZsSW+RVJB0tbu/PuUmBSFrZbcoCTV4WfvMMTpC/H2SSdVb/URdzdXu0dDmalPLJ5c1c4AUghD1GgAnawTYnRD7YJOTUUZqO9NMiq5PTKTXJmwuqe9gUn3CEPuWwG7wm9gc7w2AfrDPwHaNdNDMzAqS3irpWZKOSbrZzI64++fTbdloy9pgMSWhBi9rnzlGR6i/z85MKkldmVQEhaTJvZMqjhcffH8kqThe1MQeRkNDxQA4MBih9sEqlag/sL5/UKmk3TKsl9R3MKk+Yah9S2Cn+E1sjvcGQD/YZ6Afo16e8SJJK+7+JXdflXStpEtTbtPIy1rZLUpCDV7WPnOMjlB/n70yqSBV9lc0tW9KpfGSTKbSeElT+6ZU2c9oaKjaA+ClkmQWXTIADuxeqH2wQiEagJiflw4fji4ZkMimpL6DSfUJQ+1bAjvFb2JzvDcA+sE+A/0Y9aDZPklf7bh+LN7WxcyuNLMlM1u66667hta4UZW1wWLWRBi8rH3mGB2h/j7bmVSdyKR6SGGsoMUrFjV/2bwOP+Ow5i+bH/msCPTGADgwGCH3wQqFqHzrwYPRJfuLbErqO5hUnzDUviWwU/wmNsd7A6Af7DPQj5EuzyjJNtjmp2xwv0rSVZJULpdPuR3dslZ2i5JQg5e1zxyjI9TfZzuTan2pIjKpHlIYK2jmwAzlKnOkPQDOGmZAcuiDIW1JfQeT6hOG2rcEdorfxOZ4bwD0g30G+jHqmWbHJJ3Xcf1cSXem1JZgZK3sFiWhBi9rnzlGR6i/TzKpAADDQB8MaUvqO5hUnzDUviWwU/wmNsd7A6Af7DPQD3Mf3cQrMztN0u2SninpuKT7ocXhAAAJwElEQVSbJf2iu9+62d+Uy2VfWloaUgtHV2utpepKVcsnlzWxZ0KV/ZVUB4tbrajG7PJyNAOgUqHES9Ky9pljdPD7BABg5+iDIW1JfQeT6hPStwS68ZvYHO8NgH6wz0AnMzvq7uUNbxvloJkkmdlzJL1ZUkHSO939db3uT9AMAAAAAAAAAAAgn3oFzUZ9TTO5+4clfTjtdgAAAAAAAAAAAGB0jfqaZgAAAAAAAAAAAMCuETQDAAAAAAAAAABA7hE0AwAAAAAAAAAAQO4RNAMAAAAAAAAAAEDuETQDAAAAAAAAAABA7hE0AwAAAAAAAAAAQO4RNAMAAAAAAAAAAEDuETQDAAAAAAAAAABA7hE0AwAAAAAAAAAAQO6Zu6fdhqEys7sk/Uva7Rgh3yXpX9NuBADgQeyXASBb2C8DQLawXwaAbGG/jCx6rLufs9ENuQuaoT9mtuTu5bTbAQCIsF8GgGxhvwwA2cJ+GQCyhf0yRg3lGQEAAAAAAAAAAJB7BM0AAAAAAAAAAACQewTNsJWr0m4AAKAL+2UAyBb2ywCQLeyXASBb2C9jpLCmGQAAAAAAAAAAAHKPTDMAAAAAAAAAAADkHkEzbMjMnm1mXzCzFTN7VdrtAYC8MbPzzOyjZnabmd1qZq+Mtz/KzG4ws3+OLx+ZdlsBIE/MrGBmdTNbiK9fYGa1eL/8XjMbT7uNAJAnZna2mb3fzP4p7jv/KH1mAEiPmf3XeBzjc2Y2b2an02fGKCFohlOYWUHSWyVVJD1R0qyZPTHdVgFA7jwg6bfc/QmSniLpZfG++FWS/s7dL5T0d/F1AMDwvFLSbR3X/0jSm+L98jclvSSVVgFAfr1F0t+6+/dJepKifTR9ZgBIgZntk/QKSWV3/wFJBUmXiz4zRghBM2zkIkkr7v4ld1+VdK2kS1NuEwDkirufcPdb4v/frejkf5+i/fG74ru9S9LPpdNCAMgfMztX0k9Lujq+bpJ+UtL747uwXwaAITKzh0u6WNI7JMndV93930WfGQDSdJqkM8zsNElnSjoh+swYIQTNsJF9kr7acf1YvA0AkAIze5ykSUk1Sd/t7iekKLAm6dHptQwAcufNkv67pLX4+ndK+nd3fyC+Tr8ZAIbr8ZLukvRncencq82sKPrMAJAKdz8u6Q2SvqIoWPYtSUdFnxkjhKAZNmIbbPOhtwIAIDMrSbpO0m+6+7fTbg8A5JWZzUj6ursf7dy8wV3pNwPA8Jwm6cmS3ubuk5KaohQjAKQmXkPyUkkXSHqMpKKiJYDWo8+MzCJoho0ck3Rex/VzJd2ZUlsAILfM7GGKAmbvcfcPxJu/ZmZ749v3Svp6Wu0DgJx5mqSfNbM7FJUv/0lFmWdnx6VnJPrNADBsxyQdc/dafP39ioJo9JkBIB0/JenL7n6Xu98v6QOSnir6zBghBM2wkZslXWhmF5jZuKLFGo+k3CYAyJV4nZx3SLrN3d/YcdMRSS+M//9CSR8adtsAII/c/dXufq67P05R//jv3f2XJH1U0vPiu7FfBoAhcveTkr5qZt8bb3qmpM+LPjMApOUrkp5iZmfG4xrt/TJ9ZowMcycTEqcys+comjlbkPROd39dyk0CgFwxsx+TdJOkz+qhtXNeo2hds/dJOl9RZ/T57v6NVBoJADllZk+X9NvuPmNmj1eUefYoSXVJV7j7fWm2DwDyxMwmJF0taVzSlyS9SNEkcfrMAJACM/t9Sb8g6QFF/eNfVbSGGX1mjASCZgAAAAAAAAAAAMg9yjMCAAAAAAAAAAAg9wiaAQAAAAAAAAAAIPcImgEAAAAAAAAAACD3CJoBAAAAAAAAAAAg9wiaAQAAAAAAAAAAIPcImgEAAADAAJhZy8yWzexzZvbXZnZ2Btr0mhSf+1fM7P+k9fwAAAAAsBWCZgAAAAAwGP/h7hPu/gOSviHpZWk3SFJqQTMAAAAAyDqCZgAAAAAweJ+UtK99xcx+x8xuNrPPmNnvd2z/XTP7gpl9xMzmzey34+0fM7Ny/P/vMrM74v8XzOyPOx7rpfH2vWb28Y5Mtx83s9dLOiPe9h4zK5rZ35jZP8b3+YX1jY6f903xY91mZj9iZh8ws382sz/ouN9fmdlRM7vVzK7s2P4iM7vdzG6U9LSO7eeY2XVxu282s6cJAAAAAFJ2WtoNAAAAAICQmVlB0jMlvSO+fomkCyVdJMkkHTGziyU1JV0uaVLRudotko5u8fAvkfQtd/8RM/sOSf/PzK6X9J8kLbr76+LnP9PdbzKzl7v7RNyOyyTd6e4/HV9/xCbPseruF5vZKyV9SNIPK8qc+6KZvcnd/03Si939G2Z2hqSbzew6SeOSfj++/7ckfVRSPX7Mt0h6k7v/g5mdL2lR0hO2834CAAAAwKAQNAMAAACAwTjDzJYlPU5R8OuGePsl8b92AKmkKIh2lqQPuvs9kmRmR7bxHJdI+iEze158/RHxY90s6Z1m9jBJf+Xuyxv87WclvcHM/kjSgrvftMlzHOm4/63ufiJu35cknSfp3yS9wsyeG9/vvLgNeyR9zN3viu//XkkH4vv8lKQnmln7OR5uZme5+93beM0AAAAAMBCUZwQAAACAwfiPOKvrsYqyrtprmpmkP4zXO5tw9/3u/o74Nt/ksR7QQ+dvp3dsN0n/peOxLnD3693945IulnRc0rvN7JfXP6C7364oC+yzkv7QzH5vk+e+L75c6/h/+/ppZvZ0RUGwH3X3JykKBrbbuNnrGYvv3273PgJmAAAAANJG0AwAAAAABsjdvyXpFZJ+O878WpT0YjMrSZKZ7TOzR0v6uKTnmtkZZnaWpJ/peJg7FAW4JOl5HdsXJf1G/LgyswPxWmWPlfR1d3+7orKQT47vf3/HfR8j6R53v0bSGzru069HSPqmu99jZt8n6Snx9pqkp5vZd8bP+fyOv7le0svbV8xsYofPDQAAAACJoTwjAAAAAAyYu9fN7B8lXe7u7zazJ0j6ZFyesCHpCne/JS5huCzpXyR1lkt8g6T3mdkLJP19x/arFZV/vMWiB7tL0s9Jerqk3zGz++PHb2eaXSXpM2Z2i6Q/l/THZrYm6X5Jv7HDl/e3kn7dzD4j6QuSPhW/5hNm9lpJn5R0QtEabYX4b14h6a3x35ymKGD46zt8fgAAAABIhLlvVi0DAAAAAJCWOODUcPc3pN0WAAAAAMgDyjMCAAAAAAAAAAAg98g0AwAAAAAAAAAAQO6RaQYAAAAAAAAAAIDcI2gGAAAAAAAAAACA3CNoBgAAAAAAAAAAgNwjaAYAAAAAAAAAAIDcI2gGAAAAAAAAAACA3CNoBgAAAAAAAAAAgNz7/yfnauRJYaAwAAAAAElFTkSuQmCC\n"}]},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597958173577_1190291426","id":"paragraph_1591860123109_1248831991","dateCreated":"2020-08-20 21:16:13.577","status":"READY"},{"text":"%python.ipython\n","user":"anonymous","dateUpdated":"2020-08-20 21:16:13.577","config":{},"settings":{"params":{},"forms":{}},"apps":[],"runtimeInfos":{},"progressUpdateIntervalMs":500,"jobName":"paragraph_1597958173577_538284345","id":"paragraph_1597047441935_258792906","dateCreated":"2020-08-20 21:16:13.577","status":"READY"}],"name":"Log Analysis-Zeppelin","id":"2FJF9WE51","defaultInterpreterGroup":"spark","version":"0.9.0-preview2","noteParams":{},"noteForms":{},"angularObjects":{},"config":{"isZeppelinNotebookCronEnable":false},"info":{}}
diff --git a/public/components/notebooks/docs/poc/OpenSearch_Dashboards_Embeddable_Documentation.md b/public/components/notebooks/docs/poc/OpenSearch_Dashboards_Embeddable_Documentation.md
new file mode 100644
index 0000000000..2845d22731
--- /dev/null
+++ b/public/components/notebooks/docs/poc/OpenSearch_Dashboards_Embeddable_Documentation.md
@@ -0,0 +1,55 @@
+# OpenSearch Dashboards Embeddable API & Embedding Visualizations
+
+**NOTE:** The embeddable API and Visualizations have been in high flux for past 6 releases 7.4→7.9 versions in OpenSearch Dashboards
+
+## **In Version 7.5 and older**
+
+1. [Elastic blog](https://www.elastic.co/blog/developing-new-kibana-visualizations) on embedding Visualization
+2. [Test Plugin](https://github.com/elastic/kibana/tree/7.5/test/plugin_functional/plugins/kbn_tp_visualize_embedding) for OpenSearch Dashboards Visualization embedding
+
+**Between 7.6 and 7.8 - Embeddable API has changed at a high frequency, better to use it from 7.9**
+
+## **Embeddable API - Situation post 7.9 update**
+
+- Embeddables are re-usable widgets that can be rendered in any environment or plugin. Developers can embed them directly in their plugin. End users can dynamically add them to any embeddable _containers_.
+- Containers are a special type of embeddable that can contain nested embeddables. Embeddables can be dynamically added to embeddable _containers_. _Currently only dashboard uses this interface._
+
+![Embeddable API](../dev/images/Embeddable_API.png)
+
+* [Source](https://github.com/elastic/kibana/issues/19875)
+* [Code](https://github.com/elastic/kibana/tree/main/src/plugins/embeddable)
+* [README](https://github.com/elastic/kibana/blob/main/src/plugins/embeddable/README.md)
+
+1. Visualizations, Saved Search and Dashboard embeddable are part of this API now.
+2. Embeddable Factory allows to create objects:
+   1. with “.create()” menthod → needs input of data/source/query/time range explicitly
+   2. with “.createFromSavedObject()” method → either inherits values from containers or takes from explicit input provided
+3. Each of the above has a implementation has to inherit an embeddable & Factory API like:
+   1. [Viz. Embeddable](https://github.com/elastic/kibana/blob/main/src/plugins/visualizations/public/embeddable/visualize_embeddable.ts) & [Factory](https://github.com/elastic/kibana/blob/main/src/plugins/visualizations/public/embeddable/visualize_embeddable_factory.tsx)
+   2. [Creating Custom Embeddable Example](https://github.com/elastic/kibana/blob/main/examples/embeddable_examples/public/multi_task_todo/multi_task_todo_embeddable.tsx) & [Factory](https://github.com/elastic/kibana/blob/main/examples/embeddable_examples/public/multi_task_todo/multi_task_todo_embeddable_factory.ts) by Value
+   3. [Creating Custom Embeddable Example](https://github.com/elastic/kibana/blob/main/examples/embeddable_examples/public/todo/todo_ref_embeddable.tsx) & [Factory](https://github.com/elastic/kibana/blob/main/examples/embeddable_examples/public/todo/todo_ref_embeddable_factory.tsx) by reference
+4. [Visualizations Embeddable API Code](https://github.com/streamich/kibana/tree/main/src/plugins/visualizations/public/embeddable)
+5. [Dashboard Container](https://github.com/elastic/kibana/blob/main/src/plugins/dashboard/public/application/embeddable/dashboard_container.tsx) is exposed as an embeddable - to have multiple embeddable in a GRID like structure just like the Dashboard Plugin.
+
+**Embeddable Examples**
+
+- Examples folder in OpenSearch Dashboards has all the usage samples for new APIs
+- Use <EmbeddableRenderer/> to create new embeddable objects
+- [Embeddable Examples](https://github.com/elastic/kibana/tree/main/examples/embeddable_examples) shows how to create new embeddable inheriting the API
+- [Embeddable Explorer](https://github.com/elastic/kibana/tree/main/examples/embeddable_explorer)shows usage of these embeddable examples in a Panel Container
+- [Dashboard Embeddable](https://github.com/elastic/kibana/tree/main/examples/dashboard_embeddable_examples) shows usage of these embeddable examples in a Dashboard Container
+
+**Embeddable Renderer**
+
+- The OpenSearch Dashboards react Element/Prop to create new embeddable objects: [Code](https://github.com/elastic/kibana/blob/main/src/plugins/embeddable/public/lib/embeddables/embeddable_renderer.tsx)
+- Embeddable container use the renderer to create/update each child(an embeddable object)
+  - [Example Dashboard Container](https://github.com/elastic/kibana/blob/main/src/plugins/dashboard/public/application/embeddable/dashboard_container_by_value_renderer.tsx)
+  - [Example of Static Embedding](https://github.com/elastic/kibana/blob/main/examples/embeddable_explorer/public/hello_world_embeddable_example.tsx#L59) (without factory)
+  - [Example of Embedding with factory.create() method](https://github.com/elastic/kibana/blob/main/examples/embeddable_explorer/public/hello_world_embeddable_example.tsx#L73) (with factory)
+
+## Embedding Visualizations in Notebooks Plugin
+
+- Notebooks use embeddable API with dashboard containers for embedding visualizations
+- Dashboard containers allow loading saved objects by Id
+- Notebook paragraphs store the dashboard container object as json string in input cells
+- For storing visualizations in Zeppelin input cells, the json string is stored with a prefix “%sh #{JSON_STRING}”. Making the Json object look like a comment so that, it doesn’t interrupt running the whole notebook.
diff --git a/public/components/notebooks/docs/poc/Zeppelin_OpenSearch_Storage.md b/public/components/notebooks/docs/poc/Zeppelin_OpenSearch_Storage.md
new file mode 100644
index 0000000000..256a9ff487
--- /dev/null
+++ b/public/components/notebooks/docs/poc/Zeppelin_OpenSearch_Storage.md
@@ -0,0 +1,67 @@
+# **Custom OpenSearch Storage in Zeppelin**
+
+### **Requirement:**
+
+- Use Zeppelin as a backend service for OpenSearch Dashboards Notebooks and store notebooks as OpenSearch indices
+- Use Zeppelin’s storage adaptor interface and implement a new storage adaptor using OpenSearch Client
+
+### **Design:**
+
+- [“Transport client API“](https://www.elastic.co/guide/en/elasticsearch/client/java-api/current/transport-client.html) is getting deprecated in favor of high level client.
+- Finalized, [“High level client API”](https://www.elastic.co/guide/en/elasticsearch/client/java-rest/7.8/java-rest-high.html) for ease of use and minimal operations needed for Adaptor.
+- Notebooks will be indexed as* .notebooks/\_doc/{Unique_id} →* Unique ID is generated by zeppelin
+
+### **Design Details:**
+
+1. Implements the interface common for all Zeppelin Storage adaptors
+2. Implementation of functions in OpenSearch Zeppelin storage adaptor:
+
+   - Init - Get all config params
+   - List - List all notebooks
+   - Get - fetch a notebook
+   - save - save a notebook
+   - remove - a note
+   - close - client connection
+   - Upgrade client to Https requests - Done using keystore
+
+### **Usage:**
+
+1. POC for OpenSearch adapter is stored in branch 'zeppelin-opensearch' of dashboards-notebooks
+```
+git checkout zeppelin-opensearch
+```
+2. Clone Apache Zeppelin and checkout to 'v0.9.0-preview2' branch in a separate folder 
+```
+cd /your/folder/
+git clone https://github.com/apache/zeppelin.git
+cd zeppelin
+git checkout v0.9.0-preview2
+```
+3. Apply patch from dashboards-notebooks
+```
+git apply /path/to/zeppelin-patch
+```
+4. Once, in this branch copy "opensearch" storage adaptor to your zeppelin files
+```
+cp -r /path/to/dashboards-notebooks/zeppelin/zeppelin-plugins/notebookrepo/opensearch path/to/your/zeppelin
+```
+4. Add OpenSearch storage property in zeppelin config file "conf/zeppelin-site.xml" and you should comment default git storage
+```
+<property>
+  <name>zeppelin.notebook.storage</name>
+  <value>org.apache.zeppelin.notebook.repo.OpenSearchNotebookRepo</value>
+  <description>versioned notebook persistence layer implementation</description>
+</property>
+
+<!-- 
+<property>
+  <name>zeppelin.notebook.storage</name>
+  <value>org.apache.zeppelin.notebook.repo.OpenSearchNotebookRepo</value>
+  <description>versioned notebook persistence layer implementation</description>
+</property>
+-->
+```
+5. [Build Zeppelin](https://zeppelin.apache.org/docs/0.9.0/setup/basics/how_to_build.html) using Open-JDK 8 
+```
+ mvn clean package -DskipTests 
+```
diff --git a/public/components/notebooks/docs/poc/docs/Zeppelin_OpenSearch_Storage.md b/public/components/notebooks/docs/poc/docs/Zeppelin_OpenSearch_Storage.md
new file mode 100644
index 0000000000..2449ca6723
--- /dev/null
+++ b/public/components/notebooks/docs/poc/docs/Zeppelin_OpenSearch_Storage.md
@@ -0,0 +1,73 @@
+# **Custom OpenSearch Storage in Zeppelin**
+
+### **Requirement:**
+
+- Use Zeppelin as a backend service for OpenSearch Dashboards Notebooks and store notebooks as indices
+- Use Zeppelin’s storage adaptor interface and implement a new storage adaptor using Elasticsearch Client
+
+### **Design:**
+
+- [“Transport client API“](https://www.elastic.co/guide/en/elasticsearch/client/java-api/current/transport-client.html) is getting deprecated in favor of high level client.
+- Finalized, [“High level client API”](https://www.elastic.co/guide/en/elasticsearch/client/java-rest/7.8/java-rest-high.html) for ease of use and minimal operations needed for Adaptor.
+- Notebooks will be indexed as* .notebooks/\_doc/{Unique_id} →* Unique ID is generated by zeppelin
+
+### **Design Details:**
+
+1. Implements the interface common for all Zeppelin Storage adaptors
+2. Implementation of functions in OpenSearch Zeppelin storage adaptor:
+
+   - Init - Get all config params
+   - List - List all notebooks
+   - Get - fetch a notebook
+   - save - save a notebook
+   - remove - a note
+   - close - client connection
+   - Upgrade client to Https requests - Done using keystore
+
+### **Usage:**
+
+
+1. Clone [dashbaords-notebooks](https://github.com/opensearch-project/dashboards-notebooks/) repository
+
+2. Clone [Apache Zeppelin](https://github.com/apache/zeppelin) and checkout to 'v0.9.0-preview2' branch in a separate folder
+
+```
+cd zeppelin
+git checkout v0.9.0-preview2
+```
+
+3. Apply patch from dashboards-notebooks
+
+```
+git apply /path/to/dashboards-notebooks/poc/zeppelin-patch
+```
+
+4. Once, in this branch copy "opensearch" storage adaptor to your zeppelin files
+
+```
+cp -r /path/to/dashboards-notebooks/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch path/to/your/zeppelin/zeppelin-plugins/notebookrepo/.
+```
+
+5. Add OpenSearch storage property in zeppelin config file "conf/zeppelin-site.xml" and you should comment default git storage
+
+```
+<property>
+  <name>zeppelin.notebook.storage</name>
+  <value>org.apache.zeppelin.notebook.repo.OpenSearchNotebookRepo</value>
+  <description>versioned notebook persistence layer implementation</description>
+</property>
+
+<!--
+<property>
+  <name>zeppelin.notebook.storage</name>
+  <value>org.apache.zeppelin.notebook.repo.OpenSearchNotebookRepo</value>
+  <description>versioned notebook persistence layer implementation</description>
+</property>
+-->
+```
+
+6. [Build Zeppelin](https://zeppelin.apache.org/docs/0.9.0/setup/basics/how_to_build.html) using Open-JDK 8
+
+```
+ mvn clean package -DskipTests
+``` 
diff --git a/public/components/notebooks/docs/poc/zeppelin-patch b/public/components/notebooks/docs/poc/zeppelin-patch
new file mode 100644
index 0000000000..e6f8611879
--- /dev/null
+++ b/public/components/notebooks/docs/poc/zeppelin-patch
@@ -0,0 +1,3057 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+diff --git a/elasticsearch/pom.xml b/elasticsearch/pom.xml
+index 13bc6d469..bbdde076a 100644
+--- a/elasticsearch/pom.xml
++++ b/elasticsearch/pom.xml
+@@ -23,25 +23,26 @@
+   <parent>
+     <artifactId>zeppelin-interpreter-parent</artifactId>
+     <groupId>org.apache.zeppelin</groupId>
+-    <version>0.9.0-preview2</version>
++    <version>0.9.0-SNAPSHOT</version>
+     <relativePath>../zeppelin-interpreter-parent/pom.xml</relativePath>
+   </parent>
+ 
+   <artifactId>zeppelin-elasticsearch</artifactId>
+   <packaging>jar</packaging>
+-  <version>0.9.0-preview2</version>
++  <version>0.9.0-SNAPSHOT</version>
+   <name>Zeppelin: Elasticsearch interpreter</name>
+ 
+   <properties>
+     <interpreter.name>elasticsearch</interpreter.name>
+-    <elasticsearch.version>2.4.3</elasticsearch.version>
+-    <httpasyncclient.version>4.0.2</httpasyncclient.version>
++    <elasticsearch.version>7.8.0</elasticsearch.version>
++    <httpasyncclient.version>4.1.4</httpasyncclient.version>
+     <guava.version>18.0</guava.version>
+     <json-flattener.version>0.1.6</json-flattener.version>
+     <unirest.version>1.4.9</unirest.version>
+   </properties>
+ 
+   <dependencies>
++
+     <dependency>
+       <groupId>org.opensearch</groupId>
+       <artifactId>elasticsearch</artifactId>
+@@ -58,11 +59,11 @@
+       <artifactId>commons-lang3</artifactId>
+     </dependency>
+ 
+-    <dependency>
+-      <groupId>org.apache.httpcomponents</groupId>
+-      <artifactId>httpasyncclient</artifactId>
+-      <version>${httpasyncclient.version}</version>
+-    </dependency>
++<!--    <dependency>-->
++<!--      <groupId>org.apache.httpcomponents</groupId>-->
++<!--      <artifactId>httpcore</artifactId>-->
++<!--      <version>4.4.11</version>-->
++<!--    </dependency>-->
+ 
+     <dependency>
+       <groupId>com.google.guava</groupId>
+diff --git a/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/ElasticsearchInterpreter.java b/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/ElasticsearchInterpreter.java
+index 45b37c4eb..d7987a011 100644
+--- a/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/ElasticsearchInterpreter.java
++++ b/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/ElasticsearchInterpreter.java
+@@ -21,19 +21,6 @@ import com.google.gson.Gson;
+ import com.google.gson.GsonBuilder;
+ import com.google.gson.JsonObject;
+ 
+-import org.apache.commons.lang3.StringUtils;
+-import org.opensearch.common.xcontent.XContentBuilder;
+-import org.opensearch.common.xcontent.XContentFactory;
+-import org.opensearch.common.xcontent.XContentHelper;
+-import org.opensearch.search.aggregations.Aggregation;
+-import org.opensearch.search.aggregations.Aggregations;
+-import org.opensearch.search.aggregations.InternalMultiBucketAggregation;
+-import org.opensearch.search.aggregations.bucket.InternalSingleBucketAggregation;
+-import org.opensearch.search.aggregations.bucket.MultiBucketsAggregation;
+-import org.opensearch.search.aggregations.metrics.InternalMetricsAggregation;
+-import org.slf4j.Logger;
+-import org.slf4j.LoggerFactory;
+-
+ import java.io.IOException;
+ import java.util.ArrayList;
+ import java.util.Arrays;
+@@ -48,7 +35,6 @@ import java.util.Set;
+ import java.util.TreeSet;
+ import java.util.regex.Matcher;
+ import java.util.regex.Pattern;
+-
+ import com.github.wnameless.json.flattener.JsonFlattener;
+ 
+ import org.apache.zeppelin.completer.CompletionType;
+@@ -57,12 +43,25 @@ import org.apache.zeppelin.elasticsearch.action.AggWrapper;
+ import org.apache.zeppelin.elasticsearch.action.HitWrapper;
+ import org.apache.zeppelin.elasticsearch.client.ElasticsearchClient;
+ import org.apache.zeppelin.elasticsearch.client.HttpBasedClient;
+-import org.apache.zeppelin.elasticsearch.client.TransportBasedClient;
+ import org.apache.zeppelin.interpreter.Interpreter;
+ import org.apache.zeppelin.interpreter.InterpreterContext;
+ import org.apache.zeppelin.interpreter.InterpreterResult;
+ import org.apache.zeppelin.interpreter.thrift.InterpreterCompletion;
+ 
++import org.apache.commons.lang3.StringUtils;
++import org.opensearch.common.Strings;
++import org.opensearch.common.xcontent.ToXContent;
++import org.opensearch.common.xcontent.XContentBuilder;
++import org.opensearch.common.xcontent.XContentFactory;
++import org.opensearch.search.aggregations.Aggregation;
++import org.opensearch.search.aggregations.Aggregations;
++import org.opensearch.search.aggregations.InternalMultiBucketAggregation;
++import org.opensearch.search.aggregations.bucket.InternalSingleBucketAggregation;
++import org.opensearch.search.aggregations.bucket.MultiBucketsAggregation;
++import org.opensearch.search.aggregations.metrics.InternalNumericMetricsAggregation;
++import org.slf4j.Logger;
++import org.slf4j.LoggerFactory;
++
+ /**
+  * Elasticsearch Interpreter for Zeppelin.
+  */
+@@ -70,25 +69,25 @@ public class ElasticsearchInterpreter extends Interpreter {
+   private static Logger logger = LoggerFactory.getLogger(ElasticsearchInterpreter.class);
+ 
+   private static final String HELP = "Elasticsearch interpreter:\n"
+-      + "General format: <command> /<indices>/<types>/<id> <option> <JSON>\n"
+-      + "  - indices: list of indices separated by commas (depends on the command)\n"
+-      + "  - types: list of document types separated by commas (depends on the command)\n"
+-      + "Commands:\n"
+-      + "  - search /indices/types <query>\n"
+-      + "    . indices and types can be omitted (at least, you have to provide '/')\n"
+-      + "    . a query is either a JSON-formatted query, nor a lucene query\n"
+-      + "  - size <value>\n"
+-      + "    . defines the size of the result set (default value is in the config)\n"
+-      + "    . if used, this command must be declared before a search command\n"
+-      + "  - count /indices/types <query>\n"
+-      + "    . same comments as for the search\n"
+-      + "  - get /index/type/id\n"
+-      + "  - delete /index/type/id\n"
+-      + "  - index /index/type/id <json-formatted document>\n"
+-      + "    . the id can be omitted, elasticsearch will generate one";
++          + "General format: <command> /<indices>/<types>/<id> <option> <JSON>\n"
++          + "  - indices: list of indices separated by commas (depends on the command)\n"
++          + "  - types: list of document types separated by commas (depends on the command)\n"
++          + "Commands:\n"
++          + "  - search /indices/types <query>\n"
++          + "    . indices and types can be omitted (at least, you have to provide '/')\n"
++          + "    . a query is either a JSON-formatted query, nor a lucene query\n"
++          + "  - size <value>\n"
++          + "    . defines the size of the result set (default value is in the config)\n"
++          + "    . if used, this command must be declared before a search command\n"
++          + "  - count /indices/types <query>\n"
++          + "    . same comments as for the search\n"
++          + "  - get /index/type/id\n"
++          + "  - delete /index/type/id\n"
++          + "  - index /index/type/id <json-formatted document>\n"
++          + "    . the id can be omitted, elasticsearch will generate one";
+ 
+   protected static final List<String> COMMANDS = Arrays.asList(
+-      "count", "delete", "get", "help", "index", "search");
++          "count", "delete", "get", "help", "index", "search");
+ 
+   private static final Pattern FIELD_NAME_PATTERN = Pattern.compile("\\[\\\\\"(.+)\\\\\"\\](.*)");
+ 
+@@ -119,20 +118,14 @@ public class ElasticsearchInterpreter extends Interpreter {
+       this.resultSize = Integer.parseInt(getProperty(ELASTICSEARCH_RESULT_SIZE));
+     } catch (final NumberFormatException e) {
+       this.resultSize = 10;
+-      logger.error("Unable to parse " + ELASTICSEARCH_RESULT_SIZE + " : " +
+-          getProperty(ELASTICSEARCH_RESULT_SIZE), e);
++      logger.error("Unable to parse " + ELASTICSEARCH_RESULT_SIZE + " : "
++              + getProperty(ELASTICSEARCH_RESULT_SIZE), e);
+     }
+ 
+-    try {
+-      if (StringUtils.isEmpty(clientType) || "transport".equals(clientType)) {
+-        elsClient = new TransportBasedClient(getProperties());
+-      } else if ("http".equals(clientType)) {
+-        elsClient = new HttpBasedClient(getProperties());
+-      } else {
+-        logger.error("Unknown type of Elasticsearch client: " + clientType);
+-      }
+-    } catch (final IOException e) {
+-      logger.error("Open connection with Elasticsearch", e);
++    if (StringUtils.isEmpty(clientType) || "http".equals(clientType)) {
++      elsClient = new HttpBasedClient(getProperties());
++    } else {
++      logger.error("Unknown type of Elasticsearch client: " + clientType);
+     }
+   }
+ 
+@@ -155,7 +148,8 @@ public class ElasticsearchInterpreter extends Interpreter {
+ 
+     if (elsClient == null) {
+       return new InterpreterResult(InterpreterResult.Code.ERROR,
+-        "Problem with the Elasticsearch client, please check your configuration (host, port,...)");
++              "Problem with the Elasticsearch client, please check your configuration "
++                      + "(host, port,...)");
+     }
+ 
+     String[] items = StringUtils.split(cmd.trim(), " ", 3);
+@@ -172,7 +166,7 @@ public class ElasticsearchInterpreter extends Interpreter {
+ 
+       if (lines.length < 2) {
+         return processHelp(InterpreterResult.Code.ERROR,
+-            "Size cmd must be followed by a search");
++                "Size cmd must be followed by a search");
+       }
+ 
+       final String[] sizeLine = StringUtils.split(lines[0], " ", 2);
+@@ -230,7 +224,7 @@ public class ElasticsearchInterpreter extends Interpreter {
+ 
+   @Override
+   public List<InterpreterCompletion> completion(String s, int i,
+-      InterpreterContext interpreterContext) {
++                                                InterpreterContext interpreterContext) {
+     final List suggestions = new ArrayList<>();
+ 
+     for (final String cmd : COMMANDS) {
+@@ -243,8 +237,8 @@ public class ElasticsearchInterpreter extends Interpreter {
+ 
+   private void addAngularObject(InterpreterContext interpreterContext, String prefix, Object obj) {
+     interpreterContext.getAngularObjectRegistry().add(
+-        prefix + "_" + interpreterContext.getParagraphId().replace("-", "_"),
+-        obj, null, null);
++            prefix + "_" + interpreterContext.getParagraphId().replace("-", "_"),
++            obj, null, null);
+   }
+ 
+   private String[] getIndexTypeId(String[] urlItems) {
+@@ -257,8 +251,8 @@ public class ElasticsearchInterpreter extends Interpreter {
+     final String id = StringUtils.join(Arrays.copyOfRange(urlItems, 2, urlItems.length), '/');
+ 
+     if (StringUtils.isEmpty(index)
+-        || StringUtils.isEmpty(type)
+-        || StringUtils.isEmpty(id)) {
++            || StringUtils.isEmpty(type)
++            || StringUtils.isEmpty(id)) {
+       return null;
+     }
+ 
+@@ -288,7 +282,7 @@ public class ElasticsearchInterpreter extends Interpreter {
+ 
+     if (indexTypeId == null) {
+       return new InterpreterResult(InterpreterResult.Code.ERROR,
+-          "Bad URL (it should be /index/type/id)");
++              "Bad URL (it should be /index/type/id)");
+     }
+ 
+     final ActionResponse response = elsClient.get(indexTypeId[0], indexTypeId[1], indexTypeId[2]);
+@@ -300,9 +294,9 @@ public class ElasticsearchInterpreter extends Interpreter {
+       addAngularObject(interpreterContext, "get", json);
+ 
+       return new InterpreterResult(
+-          InterpreterResult.Code.SUCCESS,
+-          InterpreterResult.Type.TEXT,
+-          jsonStr);
++              InterpreterResult.Code.SUCCESS,
++              InterpreterResult.Type.TEXT,
++              jsonStr);
+     }
+ 
+     return new InterpreterResult(InterpreterResult.Code.ERROR, "Document not found");
+@@ -317,10 +311,10 @@ public class ElasticsearchInterpreter extends Interpreter {
+    * @return Result of the count request, it contains the total hits
+    */
+   private InterpreterResult processCount(String[] urlItems, String data,
+-      InterpreterContext interpreterContext) {
++                                         InterpreterContext interpreterContext) {
+     if (urlItems.length > 2) {
+       return new InterpreterResult(InterpreterResult.Code.ERROR,
+-          "Bad URL (it should be /index1,index2,.../type1,type2,...)");
++              "Bad URL (it should be /index1,index2,.../type1,type2,...)");
+     }
+ 
+     final ActionResponse response = searchData(urlItems, data, 0);
+@@ -328,9 +322,9 @@ public class ElasticsearchInterpreter extends Interpreter {
+     addAngularObject(interpreterContext, "count", response.getTotalHits());
+ 
+     return new InterpreterResult(
+-        InterpreterResult.Code.SUCCESS,
+-        InterpreterResult.Type.TEXT,
+-        "" + response.getTotalHits());
++            InterpreterResult.Code.SUCCESS,
++            InterpreterResult.Type.TEXT,
++            "" + response.getTotalHits());
+   }
+ 
+   /**
+@@ -343,17 +337,17 @@ public class ElasticsearchInterpreter extends Interpreter {
+    * @return Result of the search request, it contains a tab-formatted string of the matching hits
+    */
+   private InterpreterResult processSearch(String[] urlItems, String data, int size,
+-      InterpreterContext interpreterContext) {
++                                          InterpreterContext interpreterContext) {
+     if (urlItems.length > 2) {
+       return new InterpreterResult(InterpreterResult.Code.ERROR,
+-          "Bad URL (it should be /index1,index2,.../type1,type2,...)");
++              "Bad URL (it should be /index1,index2,.../type1,type2,...)");
+     }
+ 
+     final ActionResponse response = searchData(urlItems, data, size);
+ 
+     addAngularObject(interpreterContext, "search",
+-        (response.getAggregations() != null && response.getAggregations().size() > 0) ?
+-            response.getAggregations() : response.getHits());
++            (response.getAggregations() != null && response.getAggregations().size() > 0)
++                    ? response.getAggregations() : response.getHits());
+ 
+     return buildResponseMessage(response);
+   }
+@@ -368,16 +362,16 @@ public class ElasticsearchInterpreter extends Interpreter {
+   private InterpreterResult processIndex(String[] urlItems, String data) {
+     if (urlItems.length < 2 || urlItems.length > 3) {
+       return new InterpreterResult(InterpreterResult.Code.ERROR,
+-          "Bad URL (it should be /index/type or /index/type/id)");
++              "Bad URL (it should be /index/type or /index/type/id)");
+     }
+ 
+     final ActionResponse response = elsClient.index(
+-        urlItems[0], urlItems[1], urlItems.length == 2 ? null : urlItems[2], data);
++            urlItems[0], urlItems[1], urlItems.length == 2 ? null : urlItems[2], data);
+ 
+     return new InterpreterResult(
+-        InterpreterResult.Code.SUCCESS,
+-        InterpreterResult.Type.TEXT,
+-        response.getHit().getId());
++            InterpreterResult.Code.SUCCESS,
++            InterpreterResult.Type.TEXT,
++            response.getHit().getId());
+   }
+ 
+   /**
+@@ -391,17 +385,17 @@ public class ElasticsearchInterpreter extends Interpreter {
+ 
+     if (indexTypeId == null) {
+       return new InterpreterResult(InterpreterResult.Code.ERROR,
+-          "Bad URL (it should be /index/type/id)");
++              "Bad URL (it should be /index/type/id)");
+     }
+ 
+     final ActionResponse response =
+-        elsClient.delete(indexTypeId[0], indexTypeId[1], indexTypeId[2]);
++            elsClient.delete(indexTypeId[0], indexTypeId[1], indexTypeId[2]);
+ 
+     if (response.isSucceeded()) {
+       return new InterpreterResult(
+-          InterpreterResult.Code.SUCCESS,
+-          InterpreterResult.Type.TEXT,
+-          response.getHit().getId());
++              InterpreterResult.Code.SUCCESS,
++              InterpreterResult.Type.TEXT,
++              response.getHit().getId());
+     }
+ 
+     return new InterpreterResult(InterpreterResult.Code.ERROR, "Document not found");
+@@ -428,20 +422,34 @@ public class ElasticsearchInterpreter extends Interpreter {
+     InterpreterResult.Type resType = InterpreterResult.Type.TEXT;
+     String resMsg = "";
+ 
+-    if (agg instanceof InternalMetricsAggregation) {
+-      resMsg = XContentHelper.toString((InternalMetricsAggregation) agg).toString();
++    if (agg instanceof InternalNumericMetricsAggregation) {
++      try {
++        XContentBuilder builder = XContentFactory.jsonBuilder();
++        InternalNumericMetricsAggregation tempAgg = (InternalNumericMetricsAggregation) agg;
++        tempAgg.toXContent(builder, ToXContent.EMPTY_PARAMS);
++        resMsg = Strings.toString(builder);
++      } catch (IOException e) {
++        logger.error("Processing bucket: " + e.getMessage(), e);
++      }
+     } else if (agg instanceof InternalSingleBucketAggregation) {
+-      resMsg = XContentHelper.toString((InternalSingleBucketAggregation) agg).toString();
++      try {
++        XContentBuilder builder = XContentFactory.jsonBuilder();
++        InternalSingleBucketAggregation tempAgg = (InternalSingleBucketAggregation) agg;
++        tempAgg.toXContent(builder, ToXContent.EMPTY_PARAMS);
++        resMsg = Strings.toString(builder);
++      } catch (IOException e) {
++        logger.error("Processing bucket: " + e.getMessage(), e);
++      }
+     } else if (agg instanceof InternalMultiBucketAggregation) {
+       final Set<String> headerKeys = new HashSet<>();
+       final List<Map<String, Object>> buckets = new LinkedList<>();
+       final InternalMultiBucketAggregation multiBucketAgg = (InternalMultiBucketAggregation) agg;
+-
+-      for (final MultiBucketsAggregation.Bucket bucket : multiBucketAgg.getBuckets()) {
++      final List<MultiBucketsAggregation.Bucket> tempBuckets = multiBucketAgg.getBuckets();
++      for (final MultiBucketsAggregation.Bucket bucket : tempBuckets) {
+         try {
+           final XContentBuilder builder = XContentFactory.jsonBuilder();
+           bucket.toXContent(builder, null);
+-          final Map<String, Object> bucketMap = JsonFlattener.flattenAsMap(builder.string());
++          final Map<String, Object> bucketMap = JsonFlattener.flattenAsMap(String.valueOf(builder));
+           headerKeys.addAll(bucketMap.keySet());
+           buckets.add(bucketMap);
+         } catch (final IOException e) {
+@@ -474,7 +482,6 @@ public class ElasticsearchInterpreter extends Interpreter {
+ 
+   private InterpreterResult buildAggResponseMessage(List<AggWrapper> aggregations) {
+     final InterpreterResult.Type resType = InterpreterResult.Type.TABLE;
+-    String resMsg = "";
+ 
+     final Set<String> headerKeys = new HashSet<>();
+     final List<Map<String, Object>> buckets = new LinkedList<>();
+@@ -501,7 +508,7 @@ public class ElasticsearchInterpreter extends Interpreter {
+       buffer.deleteCharAt(buffer.length() - 1);
+     }
+ 
+-    resMsg = buffer.toString();
++    String resMsg = buffer.toString();
+ 
+     return new InterpreterResult(InterpreterResult.Code.SUCCESS, resType, resMsg);
+   }
+@@ -527,7 +534,7 @@ public class ElasticsearchInterpreter extends Interpreter {
+         final Matcher fieldNameMatcher = FIELD_NAME_PATTERN.matcher(fieldName);
+         if (fieldNameMatcher.matches()) {
+           flattenMap.put(fieldNameMatcher.group(1) + fieldNameMatcher.group(2),
+-              flattenJsonMap.get(fieldName));
++                  flattenJsonMap.get(fieldName));
+         } else {
+           flattenMap.put(fieldName, flattenJsonMap.get(fieldName));
+         }
+@@ -571,8 +578,8 @@ public class ElasticsearchInterpreter extends Interpreter {
+     }
+ 
+     return new InterpreterResult(
+-        InterpreterResult.Code.SUCCESS,
+-        InterpreterResult.Type.TABLE,
+-        buildSearchHitsResponseMessage(response));
++            InterpreterResult.Code.SUCCESS,
++            InterpreterResult.Type.TABLE,
++            buildSearchHitsResponseMessage(response));
+   }
+ }
+diff --git a/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/client/HttpBasedClient.java b/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/client/HttpBasedClient.java
+index 94528168f..e5c096edc 100644
+--- a/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/client/HttpBasedClient.java
++++ b/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/client/HttpBasedClient.java
+@@ -51,7 +51,8 @@ import org.apache.zeppelin.elasticsearch.action.HitWrapper;
+  */
+ public class HttpBasedClient implements ElasticsearchClient {
+   private static final String QUERY_STRING_TEMPLATE =
+-      "{ \"query\": { \"query_string\": { \"query\": \"_Q_\", \"analyze_wildcard\": \"true\" } } }";
++          "{ \"query\": { \"query_string\": " +
++                  "{ \"query\": \"_Q_\", \"analyze_wildcard\": \"true\" } } }";
+ 
+   private final String host;
+   private final int port;
+@@ -119,7 +120,7 @@ public class HttpBasedClient implements ElasticsearchClient {
+                 // There are differences: to avoid problems with some special characters
+                 // such as / and # in id, use a "terms" query
+                 buffer.append("/_search?source=").append(URLEncoder
+-                      .encode("{\"query\":{\"terms\":{\"_id\":[\"" + id + "\"]}}}", "UTF-8"));
++                        .encode("{\"query\":{\"terms\":{\"_id\":[\"" + id + "\"]}}}", "UTF-8"));
+               }
+             } else {
+               buffer.append("/").append(id);
+@@ -155,27 +156,27 @@ public class HttpBasedClient implements ElasticsearchClient {
+         final JsonNode body = new JsonNode(result.getBody());
+         if (body.getObject().has("_index")) {
+           response = new ActionResponse()
+-              .succeeded(true)
+-              .hit(new HitWrapper(
+-                  getFieldAsString(body, "_index"),
+-                  getFieldAsString(body, "_type"),
+-                  getFieldAsString(body, "_id"),
+-                  getFieldAsString(body, "_source")));
++                  .succeeded(true)
++                  .hit(new HitWrapper(
++                          getFieldAsString(body, "_index"),
++                          getFieldAsString(body, "_type"),
++                          getFieldAsString(body, "_id"),
++                          getFieldAsString(body, "_source")));
+         } else {
+           final JSONArray hits = getFieldAsArray(body.getObject(), "hits/hits");
+           final JSONObject hit = (JSONObject) hits.iterator().next();
+           response = new ActionResponse()
+-              .succeeded(true)
+-              .hit(new HitWrapper(
+-                  hit.getString("_index"),
+-                  hit.getString("_type"),
+-                  hit.getString("_id"),
+-                  hit.opt("_source").toString()));
++                  .succeeded(true)
++                  .hit(new HitWrapper(
++                          hit.getString("_index"),
++                          hit.getString("_type"),
++                          hit.getString("_id"),
++                          hit.opt("_source").toString()));
+         }
+       } else {
+         if (result.getStatus() == 404) {
+           response = new ActionResponse()
+-              .succeeded(false);
++                  .succeeded(false);
+         } else {
+           throw new ActionException(result.getBody());
+         }
+@@ -201,12 +202,12 @@ public class HttpBasedClient implements ElasticsearchClient {
+       if (isSucceeded) {
+         final JsonNode body = new JsonNode(result.getBody());
+         response = new ActionResponse()
+-            .succeeded(true)
+-            .hit(new HitWrapper(
+-                getFieldAsString(body, "_index"),
+-                getFieldAsString(body, "_type"),
+-                getFieldAsString(body, "_id"),
+-                null));
++                .succeeded(true)
++                .hit(new HitWrapper(
++                        getFieldAsString(body, "_index"),
++                        getFieldAsString(body, "_type"),
++                        getFieldAsString(body, "_id"),
++                        null));
+       } else {
+         throw new ActionException(result.getBody());
+       }
+@@ -227,9 +228,9 @@ public class HttpBasedClient implements ElasticsearchClient {
+         request = Unirest.put(getUrl(index, type, id, false));
+       }
+       request
+-          .header("Accept", "application/json")
+-          .header("Content-Type", "application/json")
+-          .body(data).getHttpRequest();
++              .header("Accept", "application/json")
++              .header("Content-Type", "application/json")
++              .body(data).getHttpRequest();
+       if (StringUtils.isNotEmpty(username)) {
+         request.basicAuth(username, password);
+       }
+@@ -239,12 +240,12 @@ public class HttpBasedClient implements ElasticsearchClient {
+ 
+       if (isSucceeded) {
+         response = new ActionResponse()
+-            .succeeded(true)
+-            .hit(new HitWrapper(
+-                getFieldAsString(result, "_index"),
+-                getFieldAsString(result, "_type"),
+-                getFieldAsString(result, "_id"),
+-                null));
++                .succeeded(true)
++                .hit(new HitWrapper(
++                        getFieldAsString(result, "_index"),
++                        getFieldAsString(result, "_type"),
++                        getFieldAsString(result, "_id"),
++                        null));
+       } else {
+         throw new ActionException(result.getBody().toString());
+       }
+@@ -271,8 +272,8 @@ public class HttpBasedClient implements ElasticsearchClient {
+ 
+     try {
+       final HttpRequestWithBody request = Unirest
+-          .post(getUrl(indices, types) + "/_search?size=" + size)
+-          .header("Content-Type", "application/json");
++              .post(getUrl(indices, types) + "/_search?size=" + size)
++              .header("Content-Type", "application/json");
+ 
+       if (StringUtils.isNoneEmpty(query)) {
+         request.header("Accept", "application/json").body(query);
+@@ -289,8 +290,8 @@ public class HttpBasedClient implements ElasticsearchClient {
+         final long total = getFieldAsLong(result, "hits/total");
+ 
+         response = new ActionResponse()
+-            .succeeded(true)
+-            .totalHits(total);
++                .succeeded(true)
++                .totalHits(total);
+ 
+         if (containsAggs(result)) {
+           JSONObject aggregationsMap = body.getJSONObject("aggregations");
+@@ -305,11 +306,11 @@ public class HttpBasedClient implements ElasticsearchClient {
+               final Iterator<Object> buckets = aggResult.getJSONArray("buckets").iterator();
+               while (buckets.hasNext()) {
+                 response.addAggregation(
+-                    new AggWrapper(AggregationType.MULTI_BUCKETS, buckets.next().toString()));
++                        new AggWrapper(AggregationType.MULTI_BUCKETS, buckets.next().toString()));
+               }
+             } else {
+               response.addAggregation(
+-                  new AggWrapper(AggregationType.SIMPLE, aggregationsMap.toString()));
++                      new AggWrapper(AggregationType.SIMPLE, aggregationsMap.toString()));
+             }
+             break; // Keep only one aggregation
+           }
+@@ -320,12 +321,12 @@ public class HttpBasedClient implements ElasticsearchClient {
+           while (iter.hasNext()) {
+             final JSONObject hit = (JSONObject) iter.next();
+             final Object data =
+-                hit.opt("_source") != null ? hit.opt("_source") : hit.opt("fields");
++                    hit.opt("_source") != null ? hit.opt("_source") : hit.opt("fields");
+             response.addHit(new HitWrapper(
+-                hit.getString("_index"),
+-                hit.getString("_type"),
+-                hit.getString("_id"),
+-                data.toString()));
++                    hit.getString("_index"),
++                    hit.getString("_type"),
++                    hit.getString("_id"),
++                    data.toString()));
+           }
+         }
+       } else {
+@@ -340,8 +341,8 @@ public class HttpBasedClient implements ElasticsearchClient {
+ 
+   private boolean containsAggs(HttpResponse<JsonNode> result) {
+     return result.getBody() != null &&
+-        (result.getBody().getObject().has("aggregations") ||
+-            result.getBody().getObject().has("aggs"));
++            (result.getBody().getObject().has("aggregations") ||
++                    result.getBody().getObject().has("aggs"));
+   }
+ 
+   @Override
+diff --git a/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/client/TransportBasedClient.java b/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/client/TransportBasedClient.java
+deleted file mode 100644
+index 2af37bd3c..000000000
+--- a/elasticsearch/src/main/java/org/apache/zeppelin/elasticsearch/client/TransportBasedClient.java
++++ /dev/null
+@@ -1,230 +0,0 @@
+-/*
+- * Licensed to the Apache Software Foundation (ASF) under one or more
+- * contributor license agreements.  See the NOTICE file distributed with
+- * this work for additional information regarding copyright ownership.
+- * The ASF licenses this file to You under the Apache License, Version 2.0
+- * (the "License"); you may not use this file except in compliance with
+- * the License.  You may obtain a copy of the License at
+- *
+- *    http://www.apache.org/licenses/LICENSE-2.0
+- *
+- * Unless required by applicable law or agreed to in writing, software
+- * distributed under the License is distributed on an "AS IS" BASIS,
+- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+- * See the License for the specific language governing permissions and
+- * limitations under the License.
+- */
+-
+-package org.apache.zeppelin.elasticsearch.client;
+-
+-import com.google.gson.Gson;
+-import com.google.gson.GsonBuilder;
+-import com.google.gson.JsonSyntaxException;
+-
+-import org.apache.commons.lang3.StringUtils;
+-import org.opensearch.action.delete.DeleteResponse;
+-import org.opensearch.action.get.GetResponse;
+-import org.opensearch.action.index.IndexResponse;
+-import org.opensearch.action.search.SearchAction;
+-import org.opensearch.action.search.SearchRequestBuilder;
+-import org.opensearch.action.search.SearchResponse;
+-import org.opensearch.client.Client;
+-import org.opensearch.client.transport.TransportClient;
+-import org.opensearch.common.settings.Settings;
+-import org.opensearch.common.transport.InetSocketTransportAddress;
+-import org.opensearch.common.xcontent.XContentBuilder;
+-import org.opensearch.common.xcontent.XContentFactory;
+-import org.opensearch.common.xcontent.XContentHelper;
+-import org.opensearch.index.query.QueryBuilders;
+-import org.opensearch.search.SearchHit;
+-import org.opensearch.search.SearchHitField;
+-import org.opensearch.search.aggregations.Aggregation;
+-import org.opensearch.search.aggregations.Aggregations;
+-import org.opensearch.search.aggregations.InternalMultiBucketAggregation;
+-import org.opensearch.search.aggregations.bucket.InternalSingleBucketAggregation;
+-import org.opensearch.search.aggregations.bucket.MultiBucketsAggregation;
+-import org.opensearch.search.aggregations.metrics.InternalMetricsAggregation;
+-
+-import java.io.IOException;
+-import java.net.InetAddress;
+-import java.net.UnknownHostException;
+-import java.util.HashMap;
+-import java.util.HashSet;
+-import java.util.LinkedList;
+-import java.util.List;
+-import java.util.Map;
+-import java.util.Properties;
+-import java.util.Set;
+-
+-import org.apache.zeppelin.elasticsearch.ElasticsearchInterpreter;
+-import org.apache.zeppelin.elasticsearch.action.ActionResponse;
+-import org.apache.zeppelin.elasticsearch.action.AggWrapper;
+-import org.apache.zeppelin.elasticsearch.action.HitWrapper;
+-
+-/**
+- * Elasticsearch client using the transport protocol.
+- */
+-public class TransportBasedClient implements ElasticsearchClient {
+-  private final Gson gson = new GsonBuilder().setPrettyPrinting().create();
+-  private final Client client;
+-
+-  public TransportBasedClient(Properties props) throws UnknownHostException {
+-    final String host =
+-        props.getProperty(ElasticsearchInterpreter.ELASTICSEARCH_HOST);
+-    final int port = Integer.parseInt(
+-        props.getProperty(ElasticsearchInterpreter.ELASTICSEARCH_PORT));
+-    final String clusterName =
+-        props.getProperty(ElasticsearchInterpreter.ELASTICSEARCH_CLUSTER_NAME);
+-
+-    final Settings settings = Settings.settingsBuilder()
+-        .put("cluster.name", clusterName)
+-        .put(props)
+-        .build();
+-
+-    client = TransportClient.builder().settings(settings).build()
+-        .addTransportAddress(new InetSocketTransportAddress(InetAddress.getByName(host), port));
+-  }
+-
+-  @Override
+-  public ActionResponse get(String index, String type, String id) {
+-    final GetResponse getResp = client
+-        .prepareGet(index, type, id)
+-        .get();
+-
+-    return new ActionResponse()
+-        .succeeded(getResp.isExists())
+-        .hit(new HitWrapper(
+-            getResp.getIndex(),
+-            getResp.getType(),
+-            getResp.getId(),
+-            getResp.getSourceAsString()));
+-  }
+-
+-  @Override
+-  public ActionResponse delete(String index, String type, String id) {
+-    final DeleteResponse delResp = client
+-        .prepareDelete(index, type, id)
+-        .get();
+-
+-    return new ActionResponse()
+-        .succeeded(delResp.isFound())
+-        .hit(new HitWrapper(
+-            delResp.getIndex(),
+-            delResp.getType(),
+-            delResp.getId(),
+-            null));
+-  }
+-
+-  @Override
+-  public ActionResponse index(String index, String type, String id, String data) {
+-    final IndexResponse idxResp = client
+-        .prepareIndex(index, type, id)
+-        .setSource(data)
+-        .get();
+-
+-    return new ActionResponse()
+-        .succeeded(idxResp.isCreated())
+-        .hit(new HitWrapper(
+-            idxResp.getIndex(),
+-            idxResp.getType(),
+-            idxResp.getId(),
+-            null));
+-  }
+-
+-  @Override
+-  public ActionResponse search(String[] indices, String[] types, String query, int size) {
+-    final SearchRequestBuilder reqBuilder = new SearchRequestBuilder(
+-        client, SearchAction.INSTANCE);
+-    reqBuilder.setIndices();
+-
+-    if (indices != null) {
+-      reqBuilder.setIndices(indices);
+-    }
+-    if (types != null) {
+-      reqBuilder.setTypes(types);
+-    }
+-
+-    if (!StringUtils.isEmpty(query)) {
+-      // The query can be either JSON-formatted, nor a Lucene query
+-      // So, try to parse as a JSON => if there is an error, consider the query a Lucene one
+-      try {
+-        @SuppressWarnings("rawtypes")
+-        final Map source = gson.fromJson(query, Map.class);
+-        reqBuilder.setExtraSource(source);
+-      } catch (final JsonSyntaxException e) {
+-        // This is not a JSON (or maybe not well formatted...)
+-        reqBuilder.setQuery(QueryBuilders.queryStringQuery(query).analyzeWildcard(true));
+-      }
+-    }
+-
+-    reqBuilder.setSize(size);
+-
+-    final SearchResponse searchResp = reqBuilder.get();
+-
+-    final ActionResponse actionResp = new ActionResponse()
+-        .succeeded(true)
+-        .totalHits(searchResp.getHits().getTotalHits());
+-
+-    if (searchResp.getAggregations() != null) {
+-      setAggregations(searchResp.getAggregations(), actionResp);
+-    } else {
+-      for (final SearchHit hit: searchResp.getHits()) {
+-        // Fields can be found either in _source, or in fields (it depends on the query)
+-        // => specific for elasticsearch's version < 5
+-        //
+-        String src = hit.getSourceAsString();
+-        if (src == null) {
+-          final Map<String, Object> hitFields = new HashMap<>();
+-          for (final SearchHitField hitField : hit.getFields().values()) {
+-            hitFields.put(hitField.getName(), hitField.getValues());
+-          }
+-          src = gson.toJson(hitFields);
+-        }
+-        actionResp.addHit(new HitWrapper(hit.getIndex(), hit.getType(), hit.getId(), src));
+-      }
+-    }
+-
+-    return actionResp;
+-  }
+-
+-  private void setAggregations(Aggregations aggregations, ActionResponse actionResp) {
+-    // Only the result of the first aggregation is returned
+-    //
+-    final Aggregation agg = aggregations.asList().get(0);
+-
+-    if (agg instanceof InternalMetricsAggregation) {
+-      actionResp.addAggregation(new AggWrapper(AggWrapper.AggregationType.SIMPLE,
+-          XContentHelper.toString((InternalMetricsAggregation) agg).toString()));
+-    } else if (agg instanceof InternalSingleBucketAggregation) {
+-      actionResp.addAggregation(new AggWrapper(AggWrapper.AggregationType.SIMPLE,
+-          XContentHelper.toString((InternalSingleBucketAggregation) agg).toString()));
+-    } else if (agg instanceof InternalMultiBucketAggregation) {
+-      final Set<String> headerKeys = new HashSet<>();
+-      final List<Map<String, Object>> buckets = new LinkedList<>();
+-      final InternalMultiBucketAggregation multiBucketAgg = (InternalMultiBucketAggregation) agg;
+-
+-      for (final MultiBucketsAggregation.Bucket bucket : multiBucketAgg.getBuckets()) {
+-        try {
+-          final XContentBuilder builder = XContentFactory.jsonBuilder();
+-          bucket.toXContent(builder, null);
+-          actionResp.addAggregation(
+-              new AggWrapper(AggWrapper.AggregationType.MULTI_BUCKETS, builder.string()));
+-        } catch (final IOException e) {
+-          // Ignored
+-        }
+-      }
+-    }
+-  }
+-
+-  @Override
+-  public void close() {
+-    if (client != null) {
+-      client.close();
+-    }
+-  }
+-
+-  @Override
+-  public String toString() {
+-    return "TransportBasedClient []";
+-  }
+-}
+diff --git a/elasticsearch/src/test/java/org/apache/zeppelin/elasticsearch/ElasticsearchInterpreterTest.java b/elasticsearch/src/test/java/org/apache/zeppelin/elasticsearch/ElasticsearchInterpreterTest.java
+index a806dc314..4cf42569a 100644
+--- a/elasticsearch/src/test/java/org/apache/zeppelin/elasticsearch/ElasticsearchInterpreterTest.java
++++ b/elasticsearch/src/test/java/org/apache/zeppelin/elasticsearch/ElasticsearchInterpreterTest.java
+@@ -23,10 +23,12 @@ import static org.junit.Assert.assertNotNull;
+ 
+ import org.apache.commons.lang3.RandomUtils;
+ import org.opensearch.action.admin.indices.delete.DeleteIndexRequest;
++import org.opensearch.action.support.WriteRequest;
+ import org.opensearch.client.Client;
+ import org.opensearch.common.settings.Settings;
++import org.opensearch.env.Environment;
++import org.opensearch.monitor.fs.FsInfo;
+ import org.opensearch.node.Node;
+-import org.opensearch.node.NodeBuilder;
+ import org.junit.AfterClass;
+ import org.junit.Assert;
+ import org.junit.BeforeClass;
+@@ -36,6 +38,7 @@ import org.junit.experimental.theories.Theory;
+ import org.junit.runner.RunWith;
+ 
+ import java.io.IOException;
++import java.nio.file.Path;
+ import java.util.ArrayList;
+ import java.util.Arrays;
+ import java.util.Date;
+@@ -72,7 +75,8 @@ public class ElasticsearchInterpreterTest {
+ 
+   @BeforeClass
+   public static void populate() throws IOException {
+-    final Settings settings = Settings.settingsBuilder()
++
++    final Settings settings = Settings.builder()
+             .put("cluster.name", ELS_CLUSTER_NAME)
+             .put("network.host", ELS_HOST)
+             .put("http.port", ELS_HTTP_PORT)
+@@ -80,7 +84,8 @@ public class ElasticsearchInterpreterTest {
+             .put("path.home", ELS_PATH)
+             .build();
+ 
+-    elsNode = NodeBuilder.nodeBuilder().settings(settings).node();
++    final Environment env = new Environment(settings, (Path) FsInfo.Path.EMPTY_PARAMS);
++    elsNode =  new Node(env);
+     elsClient = elsNode.client();
+ 
+     elsClient.admin().indices().prepareCreate("logs")
+@@ -93,7 +98,7 @@ public class ElasticsearchInterpreterTest {
+ 
+     for (int i = 0; i < 48; i++) {
+       elsClient.prepareIndex("logs", "http", "" + i)
+-        .setRefresh(true)
++        .setRefreshPolicy(WriteRequest.RefreshPolicy.IMMEDIATE)
+         .setSource(jsonBuilder()
+           .startObject()
+             .field("date", new Date())
+@@ -110,7 +115,7 @@ public class ElasticsearchInterpreterTest {
+ 
+     for (int i = 1; i < 3; i++) {
+       elsClient.prepareIndex("logs", "http", "very/strange/id#" + i)
+-        .setRefresh(true)
++              .setRefreshPolicy(WriteRequest.RefreshPolicy.IMMEDIATE)
+         .setSource(jsonBuilder()
+             .startObject()
+               .field("date", new Date())
+@@ -141,7 +146,7 @@ public class ElasticsearchInterpreterTest {
+   }
+ 
+   @AfterClass
+-  public static void clean() {
++  public static void clean() throws IOException {
+     if (transportInterpreter != null) {
+       transportInterpreter.close();
+     }
+diff --git a/pom.xml b/pom.xml
+index 7f4ec216b..cef5f418d 100644
+--- a/pom.xml
++++ b/pom.xml
+@@ -19,1824 +19,144 @@
+ <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+ 
+-  <modelVersion>4.0.0</modelVersion>
++    <modelVersion>4.0.0</modelVersion>
++
++    <parent>
++        <artifactId>zeppelin</artifactId>
++        <groupId>org.apache.zeppelin</groupId>
++        <version>0.9.0-preview2</version>
++        <relativePath>..</relativePath>
++    </parent>
++
++    <groupId>org.apache.zeppelin</groupId>
++    <artifactId>zengine-plugins-parent</artifactId>
++    <packaging>pom</packaging>
++    <version>0.9.0-preview2</version>
++    <name>Zeppelin: Plugins Parent</name>
++    <description>Zeppelin Plugins Parent</description>
++    <properties>
++        <!-- no need to include hadoop jar, because it's already included in zeppelin-zengine -->
++        <hadoop.deps.scope>provided</hadoop.deps.scope>
++    </properties>
++
++    <modules>
++        <module>notebookrepo/s3</module>
++        <module>notebookrepo/github</module>
++        <module>notebookrepo/azure</module>
++        <module>notebookrepo/gcs</module>
++        <module>notebookrepo/zeppelin-hub</module>
++        <module>notebookrepo/filesystem</module>
++        <module>notebookrepo/mongo</module>
++        <module>notebookrepo/oss</module>
++
++        <module>launcher/k8s-standard</module>
++        <module>launcher/cluster</module>
++        <module>launcher/docker</module>
++        <module>launcher/yarn</module>
++        <module>launcher/flink</module>
++    </modules>
+ 
+-  <groupId>org.apache.zeppelin</groupId>
+-  <artifactId>zeppelin</artifactId>
+-  <packaging>pom</packaging>
+-  <version>0.9.0-preview2</version>
+-  <name>Zeppelin</name>
+-  <description>Zeppelin project</description>
+-  <url>https://zeppelin.apache.org</url>
+-
+-  <parent>
+-    <groupId>org.apache</groupId>
+-    <artifactId>apache</artifactId>
+-    <version>17</version>
+-  </parent>
+-
+-  <licenses>
+-    <license>
+-      <name>The Apache Software License, Version 2.0</name>
+-      <url>https://www.apache.org/licenses/LICENSE-2.0.txt</url>
+-      <distribution>repo</distribution>
+-    </license>
+-  </licenses>
+-
+-  <scm>
+-    <url>https://git-wip-us.apache.org/repos/asf/zeppelin.git</url>
+-    <connection>scm:git:https://git-wip-us.apache.org/repos/asf/zeppelin.git</connection>
+-    <developerConnection>scm:git:https://git-wip-us.apache.org/repos/asf/zeppelin.git</developerConnection>
+-  </scm>
+-
+-  <inceptionYear>2013</inceptionYear>
+-
+-  <modules>
+-    <module>zeppelin-interpreter-parent</module>
+-    <module>zeppelin-interpreter</module>
+-    <module>zeppelin-interpreter-shaded</module>
+-    <module>zeppelin-zengine</module>
+-    <module>zeppelin-display</module>
+-    <module>rlang</module>
+-    <module>zeppelin-jupyter-interpreter</module>
+-    <module>zeppelin-jupyter-interpreter-shaded</module>
+-    <module>kotlin</module>
+-    <module>groovy</module>
+-    <module>spark</module>
+-    <module>submarine</module>
+-    <module>markdown</module>
+-    <module>mongodb</module>
+-    <module>angular</module>
+-    <module>shell</module>
+-    <module>livy</module>
+-    <module>hbase</module>
+-    <module>pig</module>
+-    <module>jdbc</module>
+-    <module>file</module>
+-    <module>flink</module>
+-    <module>ignite</module>
+-    <module>influxdb</module>
+-    <module>kylin</module>
+-    <module>python</module>
+-    <module>lens</module>
+-    <module>cassandra</module>
+-    <module>elasticsearch</module>
+-    <module>bigquery</module>
+-    <module>alluxio</module>
+-    <module>scio</module>
+-    <module>neo4j</module>
+-    <module>sap</module>
+-    <module>scalding</module>
+-    <module>java</module>
+-    <module>beam</module>
+-    <module>hazelcastjet</module>
+-    <module>geode</module>
+-    <module>ksql</module>
+-    <module>sparql</module>
+-    <module>zeppelin-web</module>
+-    <module>zeppelin-server</module>
+-    <module>zeppelin-jupyter</module>
+-    <module>zeppelin-plugins</module>
+-    <module>zeppelin-distribution</module>
+-  </modules>
+-
+-  <properties>
+-    <!-- language versions -->
+-    <java.version>1.8</java.version>
+-    <scala.2.10.version>2.10.5</scala.2.10.version>
+-    <scala.version>${scala.2.10.version}</scala.version>
+-    <scala.binary.version>2.10</scala.binary.version>
+-    <scala.2.11.version>2.11.8</scala.2.11.version>
+-    <scalatest.version>3.0.7</scalatest.version>
+-    <scalacheck.version>1.12.5</scalacheck.version>
+-
+-    <!-- frontend maven plugin related versions-->
+-    <node.version>v12.3.1</node.version>
+-    <npm.version>6.9.0</npm.version>
+-    <plugin.frontend.version>1.6</plugin.frontend.version>
+-
+-    <!-- common library versions -->
+-    <slf4j.version>1.7.30</slf4j.version>
+-    <log4j.version>1.2.17</log4j.version>
+-    <libthrift.version>0.13.0</libthrift.version>
+-    <gson.version>2.2</gson.version>
+-    <gson-extras.version>0.2.1</gson-extras.version>
+-    <jetty.version>9.4.27.v20200227</jetty.version>
+-    <httpcomponents.core.version>4.4.1</httpcomponents.core.version>
+-    <httpcomponents.client.version>4.5.1</httpcomponents.client.version>
+-    <httpcomponents.asyncclient.version>4.0.2</httpcomponents.asyncclient.version>
+-    <commons.compress.version>1.20</commons.compress.version>
+-    <commons.lang3.version>3.10</commons.lang3.version>
+-    <commons.configuration.version>1.9</commons.configuration.version>
+-    <commons.exec.version>1.3</commons.exec.version>
+-    <commons.codec.version>1.14</commons.codec.version>
+-    <commons.io.version>2.6</commons.io.version>
+-    <commons.collections.version>3.2.2</commons.collections.version>
+-    <commons.logging.version>1.1.1</commons.logging.version>
+-    <commons.cli.version>1.4</commons.cli.version>
+-    <shiro.version>1.4.2</shiro.version>
+-    <joda.version>2.9.9</joda.version>
+-    <bouncycastle.version>1.60</bouncycastle.version>
+-
+-    <hadoop2.7.version>2.7.7</hadoop2.7.version>
+-    <hadoop2.6.version>2.6.5</hadoop2.6.version>
+-    <hadoop3.0.version>3.0.3</hadoop3.0.version>
+-    <hadoop3.1.version>3.1.3</hadoop3.1.version>
+-    <hadoop3.2.version>3.2.0</hadoop3.2.version>
+-    <hadoop.version>${hadoop2.7.version}</hadoop.version>
+-    
+-    <hadoop.deps.scope>provided</hadoop.deps.scope>
+-    <quartz.scheduler.version>2.3.2</quartz.scheduler.version>
+-    <jettison.version>1.4.0</jettison.version>
+-    <jsoup.version>1.13.1</jsoup.version>
+-
+-    <!-- test library versions -->
+-    <junit.version>4.12</junit.version>
+-    <mockito.version>1.10.19</mockito.version>
+-    <assertj.version>1.7.0</assertj.version>
+-    <powermock.version>1.6.4</powermock.version>
+-
+-    <!-- plugin versions -->
+-    <plugin.antrun.version>1.8</plugin.antrun.version>
+-    <plugin.assembly.version>3.2.0</plugin.assembly.version>
+-    <plugin.avro.version>1.7.7</plugin.avro.version>
+-    <plugin.buildhelper.version>1.7</plugin.buildhelper.version>
+-    <plugin.buildnumber.version>1.4</plugin.buildnumber.version>
+-    <plugin.checkstyle.version>2.17</plugin.checkstyle.version>
+-    <plugin.clean.version>3.1.0</plugin.clean.version>
+-    <plugin.cobertura.version>2.7</plugin.cobertura.version>
+-    <plugin.compiler.version>3.8.1</plugin.compiler.version>
+-    <plugin.dependency.version>3.1.2</plugin.dependency.version>
+-    <plugin.deploy.version>2.8.2</plugin.deploy.version>
+-    <plugin.download.version>1.3.0</plugin.download.version>
+-    <plugin.eclipse.version>2.8</plugin.eclipse.version>
+-    <plugin.enforcer.version>3.0.0-M3</plugin.enforcer.version>
+-    <plugin.exec.version>1.6.0</plugin.exec.version>
+-    <plugin.failsafe.version>2.17</plugin.failsafe.version>
+-    <plugin.git.commit.id.version>4.0.0</plugin.git.commit.id.version>
+-    <plugin.gpg.version>1.6</plugin.gpg.version>
+-    <plugin.install.version>3.0.0-M1</plugin.install.version>
+-    <plugin.jar.version>3.2.0</plugin.jar.version>
+-    <plugin.javadoc.version>3.2.0</plugin.javadoc.version>
+-    <plugin.jdeb.version>1.8</plugin.jdeb.version>
+-    <plugin.lifecycle.mapping.version>1.0.0</plugin.lifecycle.mapping.version>
+-    <plugin.protobuf.version>0.5.0</plugin.protobuf.version>
+-    <plugin.rat.version>0.13</plugin.rat.version>
+-    <plugin.remote.resource.version>1.7.0</plugin.remote.resource.version>
+-    <plugin.resource.version>3.1.0</plugin.resource.version>
+-    <plugin.s3.upload.version>1.4</plugin.s3.upload.version>
+-    <plugin.scala.alchim31.version>3.4.6</plugin.scala.alchim31.version>
+-    <plugin.scala.tools.version>2.15.2</plugin.scala.tools.version>
+-    <plugin.scalate.version>1.7.1</plugin.scalate.version>
+-    <plugin.scalatest.version>2.0.0</plugin.scalatest.version>
+-    <plugin.scm.version>1.11.2</plugin.scm.version>
+-    <plugin.shade.version>3.2.2</plugin.shade.version>
+-    <plugin.source.version>3.2.1</plugin.source.version>
+-    <plugin.surefire.version>2.17</plugin.surefire.version>
+-    <plugin.xml.version>1.0.2</plugin.xml.version>
+-
+-    <plugin.gitcommitid.useNativeGit>false</plugin.gitcommitid.useNativeGit>
+-
+-    <MaxMetaspace>512m</MaxMetaspace>
+-
+-    <!-- to be able to exclude some tests using command line -->
+-    <tests.to.exclude/>
+-  </properties>
+-
+-  <dependencyManagement>
+     <dependencies>
+-      <!-- Logging -->
+-      <dependency>
+-        <groupId>org.slf4j</groupId>
+-        <artifactId>slf4j-api</artifactId>
+-        <version>${slf4j.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.slf4j</groupId>
+-        <artifactId>slf4j-log4j12</artifactId>
+-        <version>${slf4j.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>log4j</groupId>
+-        <artifactId>log4j</artifactId>
+-        <version>${log4j.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.apache.thrift</groupId>
+-        <artifactId>libthrift</artifactId>
+-        <version>${libthrift.version}</version>
+-        <exclusions>
+-          <exclusion>
+-            <groupId>javax.annotation</groupId>
+-            <artifactId>javax.annotation-api</artifactId>
+-          </exclusion>
+-        </exclusions>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.apache.httpcomponents</groupId>
+-        <artifactId>httpcore</artifactId>
+-        <version>${httpcomponents.core.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.apache.httpcomponents</groupId>
+-        <artifactId>httpclient</artifactId>
+-        <version>${httpcomponents.client.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.apache.httpcomponents</groupId>
+-        <artifactId>httpasyncclient</artifactId>
+-        <version>${httpcomponents.asyncclient.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.apache.commons</groupId>
+-        <artifactId>commons-lang3</artifactId>
+-        <version>${commons.lang3.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.apache.commons</groupId>
+-        <artifactId>commons-exec</artifactId>
+-        <version>${commons.exec.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>com.google.code.gson</groupId>
+-        <artifactId>gson</artifactId>
+-        <version>${gson.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.danilopianini</groupId>
+-        <artifactId>gson-extras</artifactId>
+-        <version>${gson-extras.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>commons-configuration</groupId>
+-        <artifactId>commons-configuration</artifactId>
+-        <version>${commons.configuration.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>commons-codec</groupId>
+-        <artifactId>commons-codec</artifactId>
+-        <version>${commons.codec.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>commons-io</groupId>
+-        <artifactId>commons-io</artifactId>
+-        <version>${commons.io.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>commons-collections</groupId>
+-        <artifactId>commons-collections</artifactId>
+-        <version>${commons.collections.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>commons-logging</groupId>
+-        <artifactId>commons-logging</artifactId>
+-        <version>${commons.logging.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>commons-cli</groupId>
+-        <artifactId>commons-cli</artifactId>
+-        <version>${commons.cli.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>joda-time</groupId>
+-        <artifactId>joda-time</artifactId>
+-        <version>${joda.version}</version>
+-      </dependency>
+-
+-      <!-- Apache Shiro -->
+-      <dependency>
+-        <groupId>org.apache.shiro</groupId>
+-        <artifactId>shiro-core</artifactId>
+-        <version>${shiro.version}</version>
+-      </dependency>
+-      <dependency>
+-        <groupId>org.apache.shiro</groupId>
+-        <artifactId>shiro-web</artifactId>
+-        <version>${shiro.version}</version>
+-      </dependency>
+-      <dependency>
+-        <groupId>org.apache.shiro</groupId>
+-        <artifactId>shiro-config-core</artifactId>
+-        <version>${shiro.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.bouncycastle</groupId>
+-        <artifactId>bcpkix-jdk15on</artifactId>
+-        <version>${bouncycastle.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>com.amazonaws</groupId>
+-        <artifactId>aws-java-sdk-s3</artifactId>
+-        <version>${aws.sdk.s3.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.codehaus.jettison</groupId>
+-        <artifactId>jettison</artifactId>
+-        <version>${jettison.version}</version>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.apache.hadoop</groupId>
+-        <artifactId>hadoop-client</artifactId>
+-        <version>${hadoop.version}</version>
+-        <scope>${hadoop.deps.scope}</scope>
+-        <exclusions>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-core</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-json</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-client</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-server</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>javax.servlet</groupId>
+-            <artifactId>servlet-api</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.avro</groupId>
+-            <artifactId>avro</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.jackrabbit</groupId>
+-            <artifactId>jackrabbit-webdav</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>io.netty</groupId>
+-            <artifactId>netty</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>io.netty</groupId>
+-            <artifactId>netty-all</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>commons-httpclient</groupId>
+-            <artifactId>commons-httpclient</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jgit</groupId>
+-            <artifactId>org.eclipse.jgit</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.jcraft</groupId>
+-            <artifactId>jsch</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.commons</groupId>
+-            <artifactId>commons-compress</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>xml-apis</groupId>
+-            <artifactId>xml-apis</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>xerces</groupId>
+-            <artifactId>xercesImpl</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.google.guava</groupId>
+-            <artifactId>guava</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.google.code.findbugs</groupId>
+-            <artifactId>jsr305</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.commons</groupId>
+-            <artifactId>commons-math3</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.fasterxml.jackson.core</groupId>
+-            <artifactId>jackson-annotations</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.nimbusds</groupId>
+-            <artifactId>nimbus-jose-jwt</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jetty</groupId>
+-            <artifactId>jetty-xml</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jetty</groupId>
+-            <artifactId>jetty-servlet</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jetty</groupId>
+-            <artifactId>jetty-util</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>commons-beanutils</groupId>
+-            <artifactId>commons-beanutils</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.commons</groupId>
+-            <artifactId>commons-configuration2</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jetty</groupId>
+-            <artifactId>jetty-webapp</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.fasterxml.jackson.module</groupId>
+-            <artifactId>jackson-module-jaxb-annotations</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.fasterxml.jackson.core</groupId>
+-            <artifactId>jackson-core</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.fasterxml.jackson.core</groupId>
+-            <artifactId>jackson-databind</artifactId>
+-          </exclusion>
+-        </exclusions>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.apache.hadoop</groupId>
+-        <artifactId>hadoop-yarn-api</artifactId>
+-        <version>${hadoop.version}</version>
+-        <scope>${hadoop.deps.scope}</scope>
+-        <exclusions>
+-          <exclusion>
+-            <groupId>javax.servlet</groupId>
+-            <artifactId>servlet-api</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.avro</groupId>
+-            <artifactId>avro</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.jackrabbit</groupId>
+-            <artifactId>jackrabbit-webdav</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>io.netty</groupId>
+-            <artifactId>netty</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>commons-httpclient</groupId>
+-            <artifactId>commons-httpclient</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jgit</groupId>
+-            <artifactId>org.eclipse.jgit</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.jcraft</groupId>
+-            <artifactId>jsch</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.commons</groupId>
+-            <artifactId>commons-compress</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>xml-apis</groupId>
+-            <artifactId>xml-apis</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>xerces</groupId>
+-            <artifactId>xercesImpl</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.codehaus.jackson</groupId>
+-            <artifactId>jackson-mapper-asl</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.codehaus.jackson</groupId>
+-            <artifactId>jackson-core-asl</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.google.guava</groupId>
+-            <artifactId>guava</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.google.code.findbugs</groupId>
+-            <artifactId>jsr305</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.commons</groupId>
+-            <artifactId>commons-math3</artifactId>
+-          </exclusion>
+-        </exclusions>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.apache.hadoop</groupId>
+-        <artifactId>hadoop-hdfs</artifactId>
+-        <version>${hadoop.version}</version>
+-        <classifier>tests</classifier>
+-        <scope>test</scope>
+-        <exclusions>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-json</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-client</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>javax.servlet</groupId>
+-            <artifactId>servlet-api</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.avro</groupId>
+-            <artifactId>avro</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.jackrabbit</groupId>
+-            <artifactId>jackrabbit-webdav</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>io.netty</groupId>
+-            <artifactId>netty</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>commons-httpclient</groupId>
+-            <artifactId>commons-httpclient</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jgit</groupId>
+-            <artifactId>org.eclipse.jgit</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.jcraft</groupId>
+-            <artifactId>jsch</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.commons</groupId>
+-            <artifactId>commons-compress</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>xml-apis</groupId>
+-            <artifactId>xml-apis</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>xerces</groupId>
+-            <artifactId>xercesImpl</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.google.guava</groupId>
+-            <artifactId>guava</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>io.netty</groupId>
+-            <artifactId>netty-all</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jetty</groupId>
+-            <artifactId>jetty-util</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.fasterxml.jackson.core</groupId>
+-            <artifactId>jackson-annotations</artifactId>
+-          </exclusion>
+-        </exclusions>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.apache.hadoop</groupId>
+-        <artifactId>hadoop-common</artifactId>
+-        <version>${hadoop.version}</version>
+-        <classifier>tests</classifier>
+-        <scope>test</scope>
+-        <exclusions>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-core</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-json</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-client</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-server</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>javax.servlet</groupId>
+-            <artifactId>servlet-api</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.avro</groupId>
+-            <artifactId>avro</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.jackrabbit</groupId>
+-            <artifactId>jackrabbit-webdav</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>io.netty</groupId>
+-            <artifactId>netty</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>commons-httpclient</groupId>
+-            <artifactId>commons-httpclient</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jgit</groupId>
+-            <artifactId>org.eclipse.jgit</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.jcraft</groupId>
+-            <artifactId>jsch</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.commons</groupId>
+-            <artifactId>commons-compress</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>xml-apis</groupId>
+-            <artifactId>xml-apis</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>xerces</groupId>
+-            <artifactId>xercesImpl</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.codehaus.jackson</groupId>
+-            <artifactId>jackson-mapper-asl</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.codehaus.jackson</groupId>
+-            <artifactId>jackson-core-asl</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.google.guava</groupId>
+-            <artifactId>guava</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.google.code.findbugs</groupId>
+-            <artifactId>jsr305</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.commons</groupId>
+-            <artifactId>commons-math3</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>commons-beanutils</groupId>
+-            <artifactId>commons-beanutils</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.commons</groupId>
+-            <artifactId>commons-configuration2</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.zookeeper</groupId>
+-            <artifactId>zookeeper</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jetty</groupId>
+-            <artifactId>jetty-servlet</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jetty</groupId>
+-            <artifactId>jetty-util</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jetty</groupId>
+-            <artifactId>jetty-webapp</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jetty</groupId>
+-            <artifactId>jetty-server</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.nimbusds</groupId>
+-            <artifactId>nimbus-jose-jwt</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.fasterxml.jackson.core</groupId>
+-            <artifactId>jackson-databind</artifactId>
+-          </exclusion>
+-        </exclusions>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.apache.hadoop</groupId>
+-        <artifactId>hadoop-yarn-server-tests</artifactId>
+-        <version>${hadoop.version}</version>
+-        <classifier>tests</classifier>
+-        <scope>test</scope>
+-        <exclusions>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-core</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-client</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.sun.jersey</groupId>
+-            <artifactId>jersey-server</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>javax.servlet</groupId>
+-            <artifactId>servlet-api</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.avro</groupId>
+-            <artifactId>avro</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.jackrabbit</groupId>
+-            <artifactId>jackrabbit-webdav</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>io.netty</groupId>
+-            <artifactId>netty</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>commons-httpclient</groupId>
+-            <artifactId>commons-httpclient</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jgit</groupId>
+-            <artifactId>org.eclipse.jgit</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.jcraft</groupId>
+-            <artifactId>jsch</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.apache.commons</groupId>
+-            <artifactId>commons-compress</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>xml-apis</groupId>
+-            <artifactId>xml-apis</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>xerces</groupId>
+-            <artifactId>xercesImpl</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.codehaus.jackson</groupId>
+-            <artifactId>jackson-core-asl</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.codehaus.jackson</groupId>
+-            <artifactId>jackson-jaxrs</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.codehaus.jackson</groupId>
+-            <artifactId>jackson-xc</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.codehaus.jackson</groupId>
+-            <artifactId>jackson-mapper-asl</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.google.guava</groupId>
+-            <artifactId>guava</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>javax.xml.bind</groupId>
+-            <artifactId>jaxb-api</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.fasterxml.jackson.core</groupId>
+-            <artifactId>jackson-core</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>org.eclipse.jetty</groupId>
+-            <artifactId>jetty-util</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.zaxxer</groupId>
+-            <artifactId>HikariCP-java7</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.google.inject</groupId>
+-            <artifactId>guice</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.fasterxml.jackson.core</groupId>
+-            <artifactId>jackson-annotations</artifactId>
+-          </exclusion>
+-          <exclusion>
+-            <groupId>com.fasterxml.jackson.module</groupId>
+-            <artifactId>jackson-module-jaxb-annotations</artifactId>
+-          </exclusion>
+-<!--          <exclusion>-->
+-<!--            <groupId>com.google.inject.extensions</groupId>-->
+-<!--            <artifactId>guice-servlet</artifactId>-->
+-<!--          </exclusion>-->
+-        </exclusions>
+-      </dependency>
+-
+-      <!-- Test libraries -->
+-      <dependency>
+-        <groupId>junit</groupId>
+-        <artifactId>junit</artifactId>
+-        <version>${junit.version}</version>
+-        <scope>test</scope>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.assertj</groupId>
+-        <artifactId>assertj-core</artifactId>
+-        <version>${assertj.version}</version>
+-        <scope>test</scope>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.mockito</groupId>
+-        <artifactId>mockito-core</artifactId>
+-        <version>${mockito.version}</version>
+-        <scope>test</scope>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.mockito</groupId>
+-        <artifactId>mockito-all</artifactId>
+-        <version>${mockito.version}</version>
+-        <scope>test</scope>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.powermock</groupId>
+-        <artifactId>powermock-api-mockito</artifactId>
+-        <version>${powermock.version}</version>
+-        <scope>test</scope>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.powermock</groupId>
+-        <artifactId>powermock-core</artifactId>
+-        <version>${powermock.version}</version>
+-        <scope>test</scope>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.powermock</groupId>
+-        <artifactId>powermock-module-junit4</artifactId>
+-        <version>${powermock.version}</version>
+-        <scope>test</scope>
+-      </dependency>
+-
+-      <dependency>
+-        <groupId>org.powermock</groupId>
+-        <artifactId>powermock-reflect</artifactId>
+-        <version>${powermock.version}</version>
+-        <scope>test</scope>
+-      </dependency>
++        <dependency>
++            <groupId>${project.groupId}</groupId>
++            <artifactId>zeppelin-zengine</artifactId>
++            <version>${project.version}</version>
++            <scope>provided</scope>
++            <exclusions>
++                <exclusion>
++                    <groupId>com.fasterxml.jackson.core</groupId>
++                    <artifactId>jackson-core</artifactId>
++                </exclusion>
++            </exclusions>
++        </dependency>
++
++        <dependency>
++            <groupId>${project.groupId}</groupId>
++            <artifactId>zeppelin-zengine</artifactId>
++            <version>${project.version}</version>
++            <classifier>tests</classifier>
++            <scope>test</scope>
++        </dependency>
++
++        <!-- Test libraries -->
++        <dependency>
++            <groupId>junit</groupId>
++            <artifactId>junit</artifactId>
++            <scope>test</scope>
++        </dependency>
++
++        <dependency>
++            <groupId>org.mockito</groupId>
++            <artifactId>mockito-all</artifactId>
++            <scope>test</scope>
++        </dependency>
+     </dependencies>
+-  </dependencyManagement>
+-
+-  <build>
+-
+-    <plugins>
+-      <plugin>
+-        <groupId>org.apache.maven.plugins</groupId>
+-        <artifactId>maven-compiler-plugin</artifactId>
+-        <version>${plugin.compiler.version}</version>
+-        <configuration>
+-          <source>${java.version}</source>
+-          <target>${java.version}</target>
+-        </configuration>
+-      </plugin>
+-
+-<!--      <plugin>-->
+-<!--        <groupId>org.codehaus.mojo</groupId>-->
+-<!--        <artifactId>flatten-maven-plugin</artifactId>-->
+-<!--        <version>1.0.0</version>-->
+-<!--        <configuration>-->
+-<!--          <flattenMode>ossrh</flattenMode>-->
+-<!--          <updatePomFile>true</updatePomFile>-->
+-<!--        </configuration>-->
+-<!--        <executions>-->
+-<!--          <execution>-->
+-<!--            <id>flatten</id>-->
+-<!--            <phase>process-resources</phase>-->
+-<!--            <goals>-->
+-<!--              <goal>flatten</goal>-->
+-<!--            </goals>-->
+-<!--          </execution>-->
+-<!--          <execution>-->
+-<!--            <id>flatten.clean</id>-->
+-<!--            <phase>clean</phase>-->
+-<!--            <goals>-->
+-<!--              <goal>clean</goal>-->
+-<!--            </goals>-->
+-<!--          </execution>-->
+-<!--        </executions>-->
+-<!--      </plugin>-->
+-
+-      <!-- (TODO zjffdu disable it temporary to make CI pass)Test coverage plugin -->
+-
+-      <!--      <plugin>-->
+-      <!--        <groupId>org.codehaus.mojo</groupId>-->
+-      <!--        <artifactId>cobertura-maven-plugin</artifactId>-->
+-      <!--        <configuration>-->
+-      <!--          <formats>-->
+-      <!--            <format>html</format>-->
+-      <!--          </formats>-->
+-      <!--          <skip>true</skip>-->
+-      <!--        </configuration>-->
+-      <!--        <executions>-->
+-      <!--          <execution>-->
+-      <!--            <id>cobertura</id>-->
+-      <!--            <phase>install</phase>-->
+-      <!--            <goals>-->
+-      <!--              <goal>cobertura</goal>-->
+-      <!--            </goals>-->
+-      <!--          </execution>-->
+-      <!--        </executions>-->
+-      <!--      </plugin>-->
+-
+-      <plugin>
+-        <groupId>org.apache.maven.plugins</groupId>
+-        <artifactId>maven-checkstyle-plugin</artifactId>
+-        <version>${plugin.checkstyle.version}</version>
+-        <configuration>
+-          <skip>true</skip>
+-          <failOnViolation>false</failOnViolation>
+-          <includeTestSourceDirectory>true</includeTestSourceDirectory>
+-          <sourceDirectories>${basedir}/src/main/java,${basedir}/src/main/scala</sourceDirectories>
+-          <testSourceDirectories>${basedir}/src/test/java</testSourceDirectories>
+-          <configLocation>_tools/checkstyle.xml</configLocation>
+-          <outputFile>${basedir}/target/checkstyle-output.xml</outputFile>
+-          <inputEncoding>${project.build.sourceEncoding}</inputEncoding>
+-          <outputEncoding>${project.reporting.outputEncoding}</outputEncoding>
+-        </configuration>
+-        <executions>
+-          <execution>
+-            <id>checkstyle-fail-build</id>
+-            <phase>validate</phase>
+-            <goals>
+-              <goal>check</goal>
+-            </goals>
+-            <configuration>
+-              <failOnViolation>true</failOnViolation>
+-              <excludes>org/apache/zeppelin/interpreter/thrift/*,org/apache/zeppelin/scio/avro/*,org/apache/zeppelin/python/proto/*</excludes>
+-            </configuration>
+-          </execution>
+-          <execution>
+-            <id>checkstyle-gen-html-report</id>
+-            <phase>install</phase>
+-            <goals>
+-              <goal>checkstyle-aggregate</goal>
+-            </goals>
+-            <configuration>
+-              <excludes>org/apache/zeppelin/interpreter/thrift/*,org/apache/zeppelin/scio/avro/*,org/apache/zeppelin/python/proto/*</excludes>
+-            </configuration>
+-          </execution>
+-        </executions>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.apache.maven.plugins</groupId>
+-        <artifactId>maven-jar-plugin</artifactId>
+-        <version>${plugin.jar.version}</version>
+-        <configuration>
+-          <archive>
+-            <manifest>
+-              <addClasspath>true</addClasspath>
+-              <classpathPrefix>lib/</classpathPrefix>
+-              <mainClass>theMainClass</mainClass>
+-            </manifest>
+-          </archive>
+-        </configuration>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.apache.maven.plugins</groupId>
+-        <artifactId>maven-remote-resources-plugin</artifactId>
+-        <version>${plugin.remote.resource.version}</version>
+-        <executions>
+-          <execution>
+-            <id>process-remote-resources</id>
+-            <goals>
+-              <goal>process</goal>
+-            </goals>
+-            <configuration>
+-              <resourceBundles>
+-                <resourceBundle>org.apache:apache-jar-resource-bundle:1.0</resourceBundle>
+-              </resourceBundles>
+-            </configuration>
+-          </execution>
+-        </executions>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.apache.maven.plugins</groupId>
+-        <artifactId>maven-scm-plugin</artifactId>
+-        <version>${plugin.scm.version}</version>
+-        <configuration>
+-          <connectionType>developerConnection</connectionType>
+-          <scmVersion>branch-0.1</scmVersion>
+-          <scmVersionType>branch</scmVersionType>
+-        </configuration>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.apache.maven.plugins</groupId>
+-        <artifactId>maven-enforcer-plugin</artifactId>
+-        <version>${plugin.enforcer.version}</version>
+-        <executions>
+-          <execution>
+-            <id>enforce</id>
+-            <configuration>
+-              <rules>
+-                <DependencyConvergence/>
+-              </rules>
+-              <failFast>true</failFast>
+-            </configuration>
+-            <goals>
+-              <goal>enforce</goal>
+-            </goals>
+-          </execution>
+-          <!-- https://maven.apache.org/enforcer/enforcer-rules/requireMavenVersion.html -->
+-          <execution>
+-            <id>enforce-maven</id>
+-            <goals>
+-              <goal>enforce</goal>
+-            </goals>
+-            <configuration>
+-              <rules>
+-                <requireMavenVersion>
+-                  <version>[3.1.0,)</version>
+-                </requireMavenVersion>
+-              </rules>
+-            </configuration>
+-          </execution>
+-        </executions>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.apache.maven.plugins</groupId>
+-        <artifactId>maven-deploy-plugin</artifactId>
+-        <version>${plugin.deploy.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>pl.project13.maven</groupId>
+-        <artifactId>git-commit-id-plugin</artifactId>
+-        <version>${plugin.git.commit.id.version}</version>
+-        <executions>
+-          <execution>
+-            <goals>
+-              <goal>revision</goal>
+-            </goals>
+-          </execution>
+-        </executions>
+-        <configuration>
+-          <skipPoms>false</skipPoms>
+-          <dotGitDirectory>${project.basedir}/.git</dotGitDirectory>
+-          <useNativeGit>${plugin.gitcommitid.useNativeGit}</useNativeGit>
+-          <generateGitPropertiesFile>true</generateGitPropertiesFile>
+-          <generateGitPropertiesFilename>${project.build.outputDirectory}/git.properties</generateGitPropertiesFilename>
+-          <failOnNoGitDirectory>false</failOnNoGitDirectory>
+-          <dateFormat>yyyy-MM-dd HH:mm:ss</dateFormat>
+-        </configuration>
+-      </plugin>
+-
+-    <!--TODO(alex): make part of the build and reconcile conflicts
+-    <plugin>
+-      <groupId>com.ning.maven.plugins</groupId>
+-      <artifactId>maven-duplicate-finder-plugin</artifactId>
+-      <version>1.0.4</version>
+-      <executions>
+-        <execution>
+-          <id>default</id>
+-          <phase>verify</phase>
+-          <goals>
+-            <goal>check</goal>
+-          </goals>
+-       </execution>
+-      </executions>
+-      <configuration>
+-        <failBuildInCaseOfConflict>true</failBuildInCaseOfConflict>
+-      </configuration>
+-    </plugin>
+-    -->
+-    </plugins>
+-
+-    <pluginManagement>
+-      <plugins>
+-          <plugin>
+-              <groupId>org.apache.maven.plugins</groupId>
+-              <artifactId>maven-shade-plugin</artifactId>
+-              <version>${plugin.shade.version}</version>
+-          </plugin>
+ 
+-        <plugin>
+-          <groupId>org.apache.maven.plugins</groupId>
+-          <artifactId>maven-install-plugin</artifactId>
+-          <version>${plugin.install.version}</version>
+-        </plugin>
+-
+-        <plugin>
+-          <groupId>org.apache.maven.plugins</groupId>
+-          <artifactId>maven-checkstyle-plugin</artifactId>
+-          <version>${plugin.checkstyle.version}</version>
+-        </plugin>
+-
+-        <plugin>
+-          <groupId>org.apache.maven.plugins</groupId>
+-          <artifactId>maven-clean-plugin</artifactId>
+-          <version>${plugin.clean.version}</version>
+-        </plugin>
+-
+-        <plugin>
+-          <groupId>net.alchim31.maven</groupId>
+-          <artifactId>scala-maven-plugin</artifactId>
+-          <version>${plugin.scala.alchim31.version}</version>
+-        </plugin>
+-        
+-        <plugin>
+-          <groupId>org.apache.maven.plugins</groupId>
+-          <artifactId>maven-surefire-plugin</artifactId>
+-          <version>${plugin.surefire.version}</version>
+-          <configuration combine.children="append">
+-            <argLine>-Xmx2g -Xms1g -Dfile.encoding=UTF-8</argLine>
+-            <environmentVariables>
+-              <IS_ZEPPELIN_TEST>true</IS_ZEPPELIN_TEST>
+-            </environmentVariables>
+-            <excludes>
+-              <exclude>${tests.to.exclude}</exclude>
+-            </excludes>
+-          </configuration>
+-          <!-- <excludes> <exclude>**/itest/**</exclude> </excludes> <executions>
+-            <execution> <id>surefire-itest</id> <phase>integration-test</phase> <goals>
+-            <goal>test</goal> </goals> <configuration> <excludes> <exclude>none</exclude>
+-            </excludes> <includes> <include>**/itest/**</include> </includes> </configuration>
+-            </execution> </executions> -->
+-        </plugin>
+-
+-        <plugin>
+-          <groupId>org.apache.maven.plugins</groupId>
+-          <artifactId>maven-assembly-plugin</artifactId>
+-          <version>${plugin.assembly.version}</version>
+-        </plugin>
+-
+-        <plugin>
+-          <groupId>org.codehaus.mojo</groupId>
+-          <artifactId>exec-maven-plugin</artifactId>
+-          <version>${plugin.exec.version}</version>
+-        </plugin>
+-
+-        <plugin>
+-          <groupId>org.codehaus.mojo</groupId>
+-          <artifactId>cobertura-maven-plugin</artifactId>
+-          <version>${plugin.cobertura.version}</version>
+-        </plugin>
+-
+-        <plugin>
+-          <groupId>org.codehaus.mojo</groupId>
+-          <artifactId>xml-maven-plugin</artifactId>
+-          <version>${plugin.xml.version}</version>
+-          <executions>
+-            <execution>
+-              <phase>verify</phase>
+-              <goals>
+-                <goal>validate</goal>
+-              </goals>
+-            </execution>
+-          </executions>
+-          <configuration>
+-            <validationSets>
+-              <validationSet>
+-                <dir>${project.basedir}</dir>
+-                <includes>
+-                  <include>
+-                    pom.xml
+-                  </include>
+-                </includes>
+-                <systemId>_tools/maven-4.0.0.xsd</systemId>
+-              </validationSet>
+-            </validationSets>
+-          </configuration>
+-        </plugin>
+-
+-        <plugin>
+-          <groupId>com.googlecode.maven-download-plugin</groupId>
+-          <artifactId>download-maven-plugin</artifactId>
+-          <version>${plugin.download.version}</version>
+-        </plugin>
+-
+-        <plugin>
+-          <groupId>org.apache.maven.plugins</groupId>
+-          <artifactId>maven-antrun-plugin</artifactId>
+-          <version>${plugin.antrun.version}</version>
+-        </plugin>
+-
+-        <!--This plugin's configuration is used to store Eclipse m2e settings
+-          only. It has no influence on the Maven build itself. -->
+-        <plugin>
+-          <groupId>org.eclipse.m2e</groupId>
+-          <artifactId>lifecycle-mapping</artifactId>
+-          <version>${plugin.lifecycle.mapping.version}</version>
+-          <configuration>
+-            <lifecycleMappingMetadata>
+-              <pluginExecutions>
+-                <pluginExecution>
+-                  <pluginExecutionFilter>
+-                    <groupId>
+-                      org.apache.maven.plugins
+-                    </groupId>
+-                    <artifactId>
+-                      maven-dependency-plugin
+-                    </artifactId>
+-                    <versionRange>
+-                      [2.8,)
+-                    </versionRange>
+-                    <goals>
+-                      <goal>copy-dependencies</goal>
+-                    </goals>
+-                  </pluginExecutionFilter>
+-                  <action>
+-                    <ignore/>
+-                  </action>
+-                </pluginExecution>
+-                <pluginExecution>
+-                  <pluginExecutionFilter>
+-                    <groupId>
+-                      org.apache.maven.plugins
+-                    </groupId>
+-                    <artifactId>
+-                      maven-checkstyle-plugin
+-                    </artifactId>
+-                    <versionRange>
+-                      [2.13,)
+-                    </versionRange>
+-                    <goals>
+-                      <goal>checkstyle</goal>
+-                      <goal>check</goal>
+-                    </goals>
+-                  </pluginExecutionFilter>
+-                  <action>
+-                    <ignore></ignore>
+-                  </action>
+-                </pluginExecution>
+-              </pluginExecutions>
+-            </lifecycleMappingMetadata>
+-          </configuration>
+-        </plugin>
+-
+-        <plugin>
+-          <groupId>org.apache.maven.plugins</groupId>
+-          <artifactId>maven-eclipse-plugin</artifactId>
+-          <version>${plugin.eclipse.version}</version>
+-        </plugin>
+-        
+-        <plugin>
+-          <groupId>org.apache.maven.plugins</groupId>
+-          <artifactId>maven-dependency-plugin</artifactId>
+-          <version>${plugin.dependency.version}</version>
+-          <executions>
+-            <execution>
+-              <id>copy-dependencies</id>
+-              <phase>process-test-resources</phase>
+-              <goals>
+-                <goal>copy-dependencies</goal>
+-              </goals>
+-              <configuration>
+-                <outputDirectory>${project.build.directory}/lib</outputDirectory>
+-                <overWriteReleases>false</overWriteReleases>
+-                <overWriteSnapshots>false</overWriteSnapshots>
+-                <overWriteIfNewer>true</overWriteIfNewer>
+-                <includeScope>runtime</includeScope>
+-              </configuration>
+-            </execution>
+-          </executions>
+-        </plugin>
+-
+-        <plugin>
+-          <groupId>org.apache.maven.plugins</groupId>
+-          <artifactId>maven-resources-plugin</artifactId>
+-          <version>${plugin.resource.version}</version>
+-          <executions>
+-            <execution>
+-              <id>copy-resources</id>
+-              <phase>validate</phase>
+-              <goals>
+-                <goal>copy-resources</goal>
+-              </goals>
+-              <configuration>
+-                <outputDirectory>${basedir}/target/site</outputDirectory>
+-                <resources>
+-                  <resource>
+-                    <directory>${basedir}/../_tools/site</directory>
+-                    <filtering>true</filtering>
+-                    <includes>
+-                      <include>**/*</include>
+-                    </includes>
+-                  </resource>
+-                </resources>
+-              </configuration>
+-            </execution>
+-          </executions>
+-        </plugin>
+-
+-      <plugin>
+-        <groupId>org.scalatest</groupId>
+-        <artifactId>scalatest-maven-plugin</artifactId>
+-        <version>${plugin.scalatest.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.codehaus.mojo</groupId>
+-        <artifactId>build-helper-maven-plugin</artifactId>
+-        <version>${plugin.buildhelper.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>com.github.eirslett</groupId>
+-        <artifactId>frontend-maven-plugin</artifactId>
+-        <version>${plugin.frontend.version}</version>
+-      </plugin>
+-      
+-      <plugin>
+-        <groupId>org.apache.maven.plugins</groupId>
+-        <artifactId>maven-failsafe-plugin</artifactId>
+-        <version>${plugin.failsafe.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.xolstice.maven.plugins</groupId>
+-        <artifactId>protobuf-maven-plugin</artifactId>
+-        <version>${plugin.protobuf.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>com.bazaarvoice.maven.plugins</groupId>
+-        <artifactId>s3-upload-maven-plugin</artifactId>
+-        <version>${plugin.s3.upload.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.codehaus.mojo</groupId>
+-        <artifactId>buildnumber-maven-plugin</artifactId>
+-        <version>${plugin.buildnumber.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.vafer</groupId>
+-        <artifactId>jdeb</artifactId>
+-        <version>${plugin.jdeb.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.apache.avro</groupId>
+-        <artifactId>avro-maven-plugin</artifactId>
+-        <version>${plugin.avro.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.scalatra.scalate</groupId>
+-        <artifactId>maven-scalate-plugin_${scala.binary.version}</artifactId>
+-        <version>${plugin.scalate.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.scala-tools</groupId>
+-        <artifactId>maven-scala-plugin</artifactId>
+-        <version>${plugin.scala.tools.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.apache.maven.plugins</groupId>
+-        <artifactId>maven-source-plugin</artifactId>
+-        <version>${plugin.source.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.apache.maven.plugins</groupId>
+-        <artifactId>maven-javadoc-plugin</artifactId>
+-        <version>${plugin.javadoc.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.apache.maven.plugins</groupId>
+-        <artifactId>maven-gpg-plugin</artifactId>
+-        <version>${plugin.gpg.version}</version>
+-      </plugin>
+-
+-      <plugin>
+-        <groupId>org.apache.rat</groupId>
+-        <artifactId>apache-rat-plugin</artifactId>
+-        <version>${plugin.rat.version}</version>
+-      </plugin>
+-      
+-      </plugins>
+-    </pluginManagement>
+-  </build>
+-
+-  <profiles>
+-    <profile>
+-      <id>scala-2.10</id>
+-      <activation>
+-        <activeByDefault>true</activeByDefault>
+-      </activation>
+-      <properties>
+-        <scala.version>${scala.2.10.version}</scala.version>
+-        <scala.binary.version>2.10</scala.binary.version>
+-      </properties>
+-    </profile>
+-
+-    <profile>
+-      <id>scala-2.11</id>
+-      <properties>
+-        <scala.version>${scala.2.11.version}</scala.version>
+-        <scala.binary.version>2.11</scala.binary.version>
+-      </properties>
+-    </profile>
+-
+-    <profile>
+-      <id>web-angular</id>
+-      <modules>
+-        <module>zeppelin-web-angular</module>
+-      </modules>
+-    </profile>
+-
+-    <profile>
+-      <id>vendor-repo</id>
+-      <repositories>
+-        <repository>
+-          <id>cloudera</id>
+-          <url>https://repository.cloudera.com/artifactory/cloudera-repos/</url>
+-        </repository>
+-        <repository>
+-          <id>hortonworks</id>
+-          <url>https://repo.hortonworks.com/content/groups/public/</url>
+-        </repository>
+-      </repositories>
+-    </profile>
+-
+-    <profile>
+-      <id>integration</id>
+-      <modules>
+-        <module>zeppelin-integration</module>
+-        <module>zeppelin-interpreter-integration</module>
+-      </modules>
+-    </profile>
+-
+-    <profile>
+-      <id>examples</id>
+-      <modules>
+-        <module>zeppelin-examples</module>
+-      </modules>
+-    </profile>
+-
+-    <profile>
+-      <id>helium-dev</id>
+-      <modules>
+-        <module>helium-dev</module>
+-      </modules>
+-    </profile>
+-
+-    <profile>
+-      <id>include-hadoop</id>
+-      <properties>
+-        <hadoop.deps.scope>compile</hadoop.deps.scope>
+-      </properties>
+-    </profile>
+-
+-    <profile>
+-      <id>build-distr</id>
+-      <activation>
+-        <activeByDefault>false</activeByDefault>
+-      </activation>
+-      <build>
++    <build>
+         <pluginManagement>
+-          <plugins>
+-            <plugin>
+-              <groupId>org.apache.maven.plugins</groupId>
+-              <artifactId>maven-surefire-plugin</artifactId>
+-              <configuration>
+-                <skipTests>true</skipTests>
+-              </configuration>
+-            </plugin>
+-
+-            <plugin>
+-              <groupId>org.apache.maven.plugins</groupId>
+-              <artifactId>maven-assembly-plugin</artifactId>
+-              <executions>
+-                <execution>
+-                  <id>make-assembly</id>
+-                  <phase>package</phase>
+-                  <goals>
+-                    <goal>single</goal>
+-                  </goals>
+-                </execution>
+-              </executions>
+-            </plugin>
+-
+-          </plugins>
++            <plugins>
++                <plugin>
++                    <artifactId>maven-dependency-plugin</artifactId>
++                    <executions>
++                        <execution>
++                            <id>copy-plugin-dependencies</id>
++                            <phase>package</phase>
++                            <goals>
++                                <goal>copy-dependencies</goal>
++                            </goals>
++                            <configuration>
++                                <outputDirectory>${project.basedir}/../../../plugins/${plugin.name}</outputDirectory>
++                                <overWriteReleases>false</overWriteReleases>
++                                <overWriteSnapshots>false</overWriteSnapshots>
++                                <overWriteIfNewer>true</overWriteIfNewer>
++                                <includeScope>runtime</includeScope>
++                            </configuration>
++                        </execution>
++                        <execution>
++                            <id>copy-plugin-artifact</id>
++                            <phase>package</phase>
++                            <goals>
++                                <goal>copy</goal>
++                            </goals>
++                            <configuration>
++                                <outputDirectory>${project.basedir}/../../../plugins/${plugin.name}</outputDirectory>
++                                <overWriteReleases>false</overWriteReleases>
++                                <overWriteSnapshots>false</overWriteSnapshots>
++                                <overWriteIfNewer>true</overWriteIfNewer>
++                                <artifactItems>
++                                    <artifactItem>
++                                        <groupId>${project.groupId}</groupId>
++                                        <artifactId>${project.artifactId}</artifactId>
++                                        <version>${project.version}</version>
++                                        <type>${project.packaging}</type>
++                                    </artifactItem>
++                                </artifactItems>
++                            </configuration>
++                        </execution>
++                    </executions>
++                </plugin>
++                <plugin>
++                    <artifactId>maven-clean-plugin</artifactId>
++                    <executions>
++                        <execution>
++                            <id>delete-plugin-dir</id>
++                            <goals>
++                                <goal>clean</goal>
++                            </goals>
++                            <phase>clean</phase>
++                            <configuration>
++                                <filesets>
++                                    <fileset>
++                                        <directory>${project.basedir}/../../../plugins/${plugin.name}</directory>
++                                        <followSymlinks>true</followSymlinks>
++                                        <useDefaultExcludes>false</useDefaultExcludes>
++                                    </fileset>
++                                </filesets>
++                            </configuration>
++                        </execution>
++                    </executions>
++                </plugin>
++            </plugins>
+         </pluginManagement>
+-      </build>
+-    </profile>
+-
+-    <profile>
+-      <id>publish-distr</id>
+-      <build>
+-        <plugins>
+-          <plugin>
+-            <groupId>org.apache.maven.plugins</groupId>
+-            <artifactId>maven-surefire-plugin</artifactId>
+-            <configuration>
+-              <skipTests>true</skipTests>
+-            </configuration>
+-          </plugin>
+-
+-          <plugin>
+-            <groupId>org.apache.maven.plugins</groupId>
+-            <artifactId>maven-source-plugin</artifactId>
+-            <executions>
+-              <execution>
+-                <id>attach-sources</id>
+-                <goals>
+-                  <goal>jar</goal>
+-                </goals>
+-              </execution>
+-            </executions>
+-          </plugin>
+-
+-          <plugin>
+-            <groupId>org.apache.maven.plugins</groupId>
+-            <artifactId>maven-javadoc-plugin</artifactId>
+-            <executions>
+-              <execution>
+-                <id>attach-javadocs</id>
+-                <goals>
+-                  <goal>jar</goal>
+-                </goals>
+-              </execution>
+-            </executions>
+-          </plugin>
+-        </plugins>
+-      </build>
+-    </profile>
+-
+-    <profile>
+-      <id>release-sign-artifacts</id>
+-      <activation>
+-        <property>
+-          <name>performRelease</name>
+-          <value>true</value>
+-        </property>
+-      </activation>
+-      <build>
+-        <plugins>
+-          <plugin>
+-            <groupId>org.apache.maven.plugins</groupId>
+-            <artifactId>maven-gpg-plugin</artifactId>
+-            <executions>
+-              <execution>
+-                <id>sign-artifacts</id>
+-                <phase>verify</phase>
+-                <goals>
+-                  <goal>sign</goal>
+-                </goals>
+-              </execution>
+-            </executions>
+-          </plugin>
+-        </plugins>
+-      </build>
+-    </profile>
+-
+-    <profile>
+-      <id>rat</id>
+-      <activation>
+-        <property><name>!skipRat</name></property>
+-      </activation>
+-      <build>
+-        <plugins>
+-        <plugin>
+-          <groupId>org.apache.rat</groupId>
+-          <artifactId>apache-rat-plugin</artifactId>
+-          <configuration>
+-            <excludes>
+-              <exclude>**/*.keywords</exclude>
+-              <exclude>reports/**</exclude>
+-              <exclude>**/.idea/</exclude>
+-              <exclude>**/*.iml</exclude>
+-              <exclude>.git/</exclude>
+-              <exclude>.github/*</exclude>
+-              <exclude>.gitignore</exclude>
+-              <exclude>git.properties</exclude>
+-              <exclude>.repository/</exclude>
+-              <exclude>.rat-excludes/</exclude>
+-              <exclude>.Rhistory</exclude>
+-              <exclude>**/*.diff</exclude>
+-              <exclude>**/*.patch</exclude>
+-              <exclude>**/*.avsc</exclude>
+-              <exclude>**/*.avro</exclude>
+-              <exclude>**/*.log</exclude>
+-              <exclude>**/*.ipynb</exclude>
+-              <exclude>**/test/resources/**</exclude>
+-              <exclude>**/.settings/*</exclude>
+-              <exclude>**/.factorypath</exclude>
+-              <exclude>**/.classpath</exclude>
+-              <exclude>**/.project</exclude>
+-              <exclude>**/target/**</exclude>
+-              <exclude>**/derby.log</exclude>
+-              <exclude>**/metastore_db/</exclude>
+-              <exclude>**/logs/**</exclude>
+-              <exclude>**/run/**</exclude>
+-              <exclude>**/interpreter/**</exclude>
+-              <exclude>**/local-repo/**</exclude>
+-              <exclude>**/null/**</exclude>
+-              <exclude>**/notebook/**</exclude>
+-              <exclude>_tools/site/css/*</exclude>
+-              <exclude>_tools/maven-4.0.0.xsd</exclude>
+-              <exclude>**/README.md</exclude>
+-              <exclude>DEPENDENCIES</exclude>
+-              <exclude>DEPLOY.md</exclude>
+-              <exclude>STYLE.md</exclude>
+-              <exclude>Roadmap.md</exclude>
+-              <exclude>**/licenses/**</exclude>
+-              <exclude>**/zeppelin-distribution/src/bin_license/**</exclude>
+-              <exclude>conf/interpreter.json</exclude>
+-              <exclude>conf/notebook-authorization.json</exclude>
+-              <exclude>conf/credentials.json</exclude>
+-              <exclude>conf/zeppelin-env.sh</exclude>
+-              <exclude>conf/helium.json</exclude>
+-              <exclude>spark-*-bin*/**</exclude>
+-              <exclude>.spark-dist/**</exclude>
+-              <exclude>**/interpreter-setting.json</exclude>
+-              <exclude>**/constants.json</exclude>
+-              <exclude>scripts/**</exclude>
+-              <exclude>**/**/*.log</exclude>
+-              <exclude>**/**/logs/**</exclude>
+-
+-              <!-- bundled from zeppelin-web -->
+-              <exclude>**/test/karma.conf.js</exclude>
+-              <exclude>**/test/spec/**</exclude>
+-              <exclude>**/.babelrc</exclude>
+-              <exclude>**/.bowerrc</exclude>
+-              <exclude>.editorconfig</exclude>
+-              <exclude>.eslintrc</exclude>
+-              <exclude>protractor.conf.js</exclude>
+-              <exclude>**/.tmp/**</exclude>
+-              <exclude>**/target/**</exclude>
+-              <exclude>**/node/**</exclude>
+-              <exclude>**/node_modules/**</exclude>
+-              <exclude>**/bower_components/**</exclude>
+-              <exclude>**/dist/**</exclude>
+-              <exclude>**/.buildignore</exclude>
+-              <exclude>**/.npmignore</exclude>
+-              <exclude>**/.jshintrc</exclude>
+-              <exclude>**/yarn.lock</exclude>
+-              <exclude>**/bower.json</exclude>
+-              <exclude>**/src/fonts/Patua-One*</exclude>
+-              <exclude>**/src/fonts/patua-one*</exclude>
+-              <exclude>**/src/fonts/Roboto*</exclude>
+-              <exclude>**/src/fonts/roboto*</exclude>
+-              <exclude>**/src/fonts/fontawesome*</exclude>
+-              <exclude>**/src/fonts/font-awesome*</exclude>
+-              <exclude>**/src/styles/font-awesome*</exclude>
+-              <exclude>**/src/fonts/Simple-Line*</exclude>
+-              <exclude>**/src/fonts/simple-line*</exclude>
+-              <exclude>**/src/fonts/Source-Code-Pro*</exclude>
+-              <exclude>**/src/fonts/source-code-pro*</exclude>
+-              <exclude>**/src/**/**.test.js</exclude>
+-              <exclude>**/e2e/**/**.spec.js</exclude>
+-              <exclude>package-lock.json</exclude>
+-
+-              <!-- bundled from zeppelin-web-angular -->
+-              <exclude>**/*.json</exclude>
+-              <exclude>**/browserslist</exclude>
+-              <exclude>**/.prettierrc</exclude>
+-              <exclude>**/.prettierignore</exclude>
+-              <exclude>**/.editorconfig</exclude>
+-              <exclude>**/src/**/*.svg</exclude>
+-              <exclude>**/.gitkeep</exclude>
+-
+-
+-              <!-- from SQLLine 1.0.2, see ZEPPELIN-2135 -->
+-              <exclude>**/src/main/java/org/apache/zeppelin/jdbc/SqlCompleter.java</exclude>
+-
+-              <!-- bundled from bootstrap -->
+-              <exclude>docs/assets/themes/zeppelin/bootstrap/**</exclude>
+-              <exclude>docs/assets/themes/zeppelin/css/style.css</exclude>
+-              <exclude>docs/assets/themes/zeppelin/js/docs.js</exclude>
+-              <exclude>docs/assets/themes/zeppelin/js/search.js</exclude>
+-              <exclude>docs/_includes/themes/zeppelin/_jumbotron.html</exclude>
+-              <exclude>docs/_includes/themes/zeppelin/_navigation.html</exclude>
+-
+-              <!-- bundled from jekyll-bootstrap -->
+-              <exclude>docs/404.html</exclude>
+-              <exclude>docs/_config.yml</exclude>
+-              <exclude>docs/_includes/JB/**</exclude>
+-              <exclude>docs/_layouts/**</exclude>
+-              <exclude>docs/_plugins/**</exclude>
+-              <exclude>docs/atom.xml</exclude>
+-              <exclude>docs/_includes/themes/zeppelin/default.html</exclude>
+-              <exclude>docs/_includes/themes/zeppelin/page.html</exclude>
+-              <exclude>docs/_includes/themes/zeppelin/post.html</exclude>
+-              <exclude>docs/_includes/themes/zeppelin/settings.yml</exclude>
+-              <exclude>docs/Rakefile</exclude>
+-              <exclude>docs/rss.xml</exclude>
+-              <exclude>docs/sitemap.txt</exclude>
+-              <exclude>docs/search_data.json</exclude>
+-              <exclude>**/dependency-reduced-pom.xml</exclude>
+-
+-              <!-- bundled from anchor -->
+-              <exclude>docs/assets/themes/zeppelin/js/anchor.min.js</exclude>
+-
+-              <!-- bundled from toc -->
+-              <exclude>docs/assets/themes/zeppelin/js/toc.js</exclude>
+-
+-              <!-- bundled from lunrjs -->
+-              <exclude>docs/assets/themes/zeppelin/js/lunr.min.js</exclude>
+-
+-              <!-- bundled from jekyll -->
+-              <exclude>docs/assets/themes/zeppelin/css/syntax.css</exclude>
+-
+-              <!-- docs (website) build target dir -->
+-              <exclude>docs/_site/**</exclude>
+-              <exclude>docs/Gemfile.lock</exclude>
+-
+-              <!-- package.json -->
+-              <exclude>**/package.json</exclude>
+-
+-              <!-- compiled R packages (binaries) -->
+-              <exclude>**/R/lib/**</exclude>
+-              <exclude>**/lib/rzeppelin/**</exclude>
+-
+-              <!--R-related files with alternative licenses-->
+-
+-              <exclude>**/R/rzeppelin/R/*.R</exclude>
+-              <exclude>**/src/main/scala/scala/Console.scala</exclude>
+-              <exclude>**/src/main/scala/org/apache/zeppelin/rinterpreter/rscala/Package.scala</exclude>
+-              <exclude>**/src/main/scala/org/apache/zeppelin/rinterpreter/rscala/RClient.scala</exclude>
+-
+-               <!--The following files are mechanical-->
+-              <exclude>**/R/rzeppelin/DESCRIPTION</exclude>
+-              <exclude>**/R/rzeppelin/NAMESPACE</exclude>
+-              
+-              <exclude>zeppelin-jupyter-interpreter/src/main/resources/grpc/jupyter/*.py</exclude>
+-            </excludes>
+-          </configuration>
+-
+-          <executions>
+-            <execution>
+-              <id>verify.rat</id>
+-              <phase>verify</phase>
+-              <goals>
+-                <goal>check</goal>
+-              </goals>
+-            </execution>
+-          </executions>
+-        </plugin>
+-        </plugins>
+-      </build>
+-    </profile>
+-
+-    <profile>
+-      <id>hadoop2</id>
+-      <properties>
+-        <hadoop.version>${hadoop2.7.version}</hadoop.version>
+-        <curator.version>2.13.0</curator.version>
+-      </properties>
+-    </profile>
+-
+-    <profile>
+-      <id>hadoop3</id>
+-      <properties>
+-        <hadoop.version>${hadoop3.2.version}</hadoop.version>
+-        <curator.version>2.13.0</curator.version>
+-        <kerberos-client.version>2.0.0-M15</kerberos-client.version>
+-      </properties>
+-    </profile>
+-
+-  </profiles>
+-
++    </build>
+ </project>
+diff --git a/zeppelin-plugins/pom.xml b/zeppelin-plugins/pom.xml
+index cef5f418d..d9b3e806d 100644
+--- a/zeppelin-plugins/pom.xml
++++ b/zeppelin-plugins/pom.xml
+@@ -41,6 +41,7 @@
+ 
+     <modules>
+         <module>notebookrepo/s3</module>
++        <module>notebookrepo/opensearch</module>
+         <module>notebookrepo/github</module>
+         <module>notebookrepo/azure</module>
+         <module>notebookrepo/gcs</module>
+diff --git a/zeppelin-zengine/src/main/java/org/apache/zeppelin/search/LuceneSearch.java b/zeppelin-zengine/src/main/java/org/apache/zeppelin/search/LuceneSearch.java
+index 2b3a24c9b..cb634e3b4 100644
+--- a/zeppelin-zengine/src/main/java/org/apache/zeppelin/search/LuceneSearch.java
++++ b/zeppelin-zengine/src/main/java/org/apache/zeppelin/search/LuceneSearch.java
+@@ -28,7 +28,6 @@ import java.util.Date;
+ import java.util.List;
+ import java.util.Map;
+ import java.util.concurrent.TimeUnit;
+-import java.util.stream.Stream;
+ import javax.inject.Inject;
+ 
+ import org.apache.lucene.analysis.Analyzer;
+@@ -36,7 +35,7 @@ import org.apache.lucene.analysis.TokenStream;
+ import org.apache.lucene.analysis.standard.StandardAnalyzer;
+ import org.apache.lucene.document.Document;
+ import org.apache.lucene.document.Field;
+-import org.apache.lucene.document.LongField;
++import org.apache.lucene.document.LongPoint;
+ import org.apache.lucene.document.StringField;
+ import org.apache.lucene.document.TextField;
+ import org.apache.lucene.index.DirectoryReader;
+@@ -95,7 +94,7 @@ public class LuceneSearch extends SearchService {
+         logger.info("Use {} for storing lucene search index", this.indexPath);
+       } catch (IOException e) {
+         throw new RuntimeException(
+-            "Failed to create index directory for search service. Use memory instead", e);
++                "Failed to create index directory for search service. Use memory instead", e);
+       }
+     } else {
+       this.indexDirectory = new RAMDirectory();
+@@ -116,14 +115,14 @@ public class LuceneSearch extends SearchService {
+   public List<Map<String, String>> query(String queryStr) {
+     if (null == indexDirectory) {
+       throw new IllegalStateException(
+-          "Something went wrong on instance creation time, index dir is null");
++              "Something went wrong on instance creation time, index dir is null");
+     }
+     List<Map<String, String>> result = Collections.emptyList();
+     try (IndexReader indexReader = DirectoryReader.open(indexDirectory)) {
+       IndexSearcher indexSearcher = new IndexSearcher(indexReader);
+       Analyzer analyzer = new StandardAnalyzer();
+       MultiFieldQueryParser parser =
+-          new MultiFieldQueryParser(new String[] {SEARCH_FIELD_TEXT, SEARCH_FIELD_TITLE}, analyzer);
++              new MultiFieldQueryParser(new String[] {SEARCH_FIELD_TEXT, SEARCH_FIELD_TITLE}, analyzer);
+ 
+       Query query = parser.parse(queryStr);
+       logger.debug("Searching for: " + query.toString(SEARCH_FIELD_TEXT));
+@@ -141,7 +140,7 @@ public class LuceneSearch extends SearchService {
+   }
+ 
+   private List<Map<String, String>> doSearch(
+-      IndexSearcher searcher, Query query, Analyzer analyzer, Highlighter highlighter) {
++          IndexSearcher searcher, Query query, Analyzer analyzer, Highlighter highlighter) {
+     List<Map<String, String>> matchingParagraphs = Lists.newArrayList();
+     ScoreDoc[] hits;
+     try {
+@@ -165,8 +164,8 @@ public class LuceneSearch extends SearchService {
+ 
+           if (text != null) {
+             TokenStream tokenStream =
+-                TokenSources.getTokenStream(
+-                    searcher.getIndexReader(), id, SEARCH_FIELD_TEXT, analyzer);
++                    TokenSources.getTokenStream(
++                            searcher.getIndexReader(), id, SEARCH_FIELD_TEXT, analyzer);
+             TextFragment[] frag = highlighter.getBestTextFragments(tokenStream, text, true, 3);
+             logger.debug("    {} fragments found for query '{}'", frag.length, query);
+             for (int j = 0; j < frag.length; j++) {
+@@ -179,17 +178,17 @@ public class LuceneSearch extends SearchService {
+ 
+           if (header != null) {
+             TokenStream tokenTitle =
+-                TokenSources.getTokenStream(
+-                    searcher.getIndexReader(), id, SEARCH_FIELD_TITLE, analyzer);
++                    TokenSources.getTokenStream(
++                            searcher.getIndexReader(), id, SEARCH_FIELD_TITLE, analyzer);
+             TextFragment[] frgTitle = highlighter.getBestTextFragments(tokenTitle, header, true, 3);
+             header = (frgTitle != null && frgTitle.length > 0) ? frgTitle[0].toString() : "";
+           } else {
+             header = "";
+           }
+           matchingParagraphs.add(
+-              ImmutableMap.of(
+-                  "id", path, // <noteId>/paragraph/<paragraphId>
+-                  "name", title, "snippet", fragment, "text", text, "header", header));
++                  ImmutableMap.of(
++                          "id", path, // <noteId>/paragraph/<paragraphId>
++                          "name", title, "snippet", fragment, "text", text, "header", header));
+         } else {
+           logger.info("{}. No {} for this document", i + 1, ID_FIELD);
+         }
+@@ -293,7 +292,7 @@ public class LuceneSearch extends SearchService {
+         doc.add(new TextField(SEARCH_FIELD_TITLE, p.getTitle(), Field.Store.YES));
+       }
+       Date date = p.getDateStarted() != null ? p.getDateStarted() : p.getDateCreated();
+-      doc.add(new LongField("modified", date.getTime(), Field.Store.NO));
++      doc.add(new LongPoint("modified", date.getTime()));
+     } else {
+       doc.add(new TextField(SEARCH_FIELD_TEXT, noteName, Field.Store.YES));
+     }
+@@ -322,9 +321,9 @@ public class LuceneSearch extends SearchService {
+       }
+       long end = System.nanoTime();
+       logger.info(
+-          "Indexing {} notebooks took {}ms",
+-          docsIndexed,
+-          TimeUnit.NANOSECONDS.toMillis(end - start));
++              "Indexing {} notebooks took {}ms",
++              docsIndexed,
++              TimeUnit.NANOSECONDS.toMillis(end - start));
+     }
+   }
+ 
+@@ -377,14 +376,14 @@ public class LuceneSearch extends SearchService {
+ 
+   private void deleteDoc(String noteId, Paragraph p) {
+     String fullNoteOrJustParagraph = formatDeleteId(noteId, p);
+-    logger.debug("Deleting note {}, out of: {}", noteId, indexWriter.numDocs());
++    logger.debug("Deleting note {}, out of: {}", noteId, indexWriter.getDocStats());
+     try {
+       indexWriter.deleteDocuments(new WildcardQuery(new Term(ID_FIELD, fullNoteOrJustParagraph)));
+       indexWriter.commit();
+     } catch (IOException e) {
+       logger.error("Failed to delete {} from index by '{}'", noteId, fullNoteOrJustParagraph, e);
+     }
+-    logger.debug("Done, index contains {} docs now" + indexWriter.numDocs());
++    logger.debug("Done, index contains {} docs now" + indexWriter.getDocStats());
+   }
+ 
+   /* (non-Javadoc)
+@@ -415,28 +414,22 @@ public class LuceneSearch extends SearchService {
+ 
+   /** Indexes a single document: - code of the paragraph (if non-null) - or just a note name */
+   private void indexDoc(IndexWriter w, String noteId, String noteName, Paragraph p)
+-      throws IOException {
++          throws IOException {
+     String id = formatId(noteId, p);
+     Document doc = newDocument(id, noteName, p);
+     w.addDocument(doc);
+   }
+ 
+   @Override
+-  public void startRebuildIndex(Stream<Note> notes) {
++  public void startRebuildIndex(List<Note> notes) {
+     Thread thread = new Thread(() -> {
+       logger.info("Starting rebuild index");
+-      notes.forEach(note -> {
++      for (Note note:  notes) {
+         addIndexDoc(note);
+-        note.unLoad();
+-      });
++      }
+       logger.info("Finish rebuild index");
+     });
+     thread.setName("LuceneSearch-RebuildIndex-Thread");
+     thread.start();
+-    try {
+-      thread.join();
+-    } catch (InterruptedException e) {
+-      e.printStackTrace();
+-    }
+   }
+ }
+
diff --git a/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/pom.xml b/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/pom.xml
new file mode 100644
index 0000000000..f74423050c
--- /dev/null
+++ b/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/pom.xml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+  ~ Copyright OpenSearch Contributors
+  ~ SPDX-License-Identifier: Apache-2.0
+
+  ~ Licensed to the Apache Software Foundation (ASF) under one or more
+  ~ contributor license agreements.  See the NOTICE file distributed with
+  ~ this work for additional information regarding copyright ownership.
+  ~ The ASF licenses this file to You under the Apache License, Version 2.0
+  ~ (the "License"); you may not use this file except in compliance with
+  ~ the License.  You may obtain a copy of the License at
+  ~
+  ~    http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <artifactId>zengine-plugins-parent</artifactId>
+        <groupId>org.apache.zeppelin</groupId>
+        <version>0.9.0-SNAPSHOT</version>
+        <relativePath>../../../zeppelin-plugins</relativePath>
+    </parent>
+
+    <groupId>org.apache.zeppelin</groupId>
+    <artifactId>notebookrepo-opensearch</artifactId>
+    <packaging>jar</packaging>
+    <version>0.9.0-SNAPSHOT</version>
+    <name>Zeppelin: Plugin OpenSearchNotebookRepo</name>
+    <description>NotebookRepo implementation based on OpenSearch</description>
+
+    <properties>
+        <elasticsearch.client.version>7.8.0</elasticsearch.client.version>
+        <plugin.name>NotebookRepo/OpenSearchNotebookRepo</plugin.name>
+        <enforcer.skip>true</enforcer.skip>
+    </properties>
+
+    <dependencies>
+        <dependency>
+            <groupId>org.opensearch.client</groupId>
+            <artifactId>elasticsearch-rest-high-level-client</artifactId>
+            <version>${elasticsearch.client.version}</version>
+        </dependency>
+        <dependency>
+            <groupId>org.apache.logging.log4j</groupId>
+            <artifactId>log4j-to-slf4j</artifactId>
+            <version>2.11.1</version>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <artifactId>maven-dependency-plugin</artifactId>
+            </plugin>
+        </plugins>
+    </build>
+</project>
diff --git a/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java b/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java
new file mode 100644
index 0000000000..4405c3a6f7
--- /dev/null
+++ b/public/components/notebooks/docs/poc/zeppelin/zeppelin-plugins/notebookrepo/opensearch/src/main/java/org/apache/zeppelin/notebook/repo/OpenSearchNotebookRepo.java
@@ -0,0 +1,219 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+package org.apache.zeppelin.notebook.repo;
+
+import com.google.gson.JsonObject;
+import com.google.gson.JsonParser;
+import org.apache.http.HttpHost;
+import org.apache.http.auth.AuthScope;
+import org.apache.http.auth.UsernamePasswordCredentials;
+import org.apache.http.client.CredentialsProvider;
+import org.apache.http.impl.client.BasicCredentialsProvider;
+import org.apache.http.impl.nio.client.HttpAsyncClientBuilder;
+import org.apache.zeppelin.conf.ZeppelinConfiguration;
+import org.apache.zeppelin.notebook.Note;
+import org.apache.zeppelin.notebook.NoteInfo;
+import org.apache.zeppelin.user.AuthenticationInfo;
+import org.opensearch.ElasticsearchStatusException;
+import org.opensearch.action.DocWriteResponse;
+import org.opensearch.action.delete.DeleteRequest;
+import org.opensearch.action.delete.DeleteResponse;
+import org.opensearch.action.get.GetRequest;
+import org.opensearch.action.get.GetResponse;
+import org.opensearch.action.index.IndexRequest;
+import org.opensearch.action.index.IndexResponse;
+import org.opensearch.action.search.SearchRequest;
+import org.opensearch.action.search.SearchResponse;
+import org.opensearch.client.RequestOptions;
+import org.opensearch.client.RestClient;
+import org.opensearch.client.RestClientBuilder;
+import org.opensearch.client.RestHighLevelClient;
+import org.opensearch.client.indices.CreateIndexRequest;
+import org.opensearch.client.indices.CreateIndexResponse;
+import org.opensearch.common.xcontent.XContentType;
+import org.opensearch.index.query.QueryBuilders;
+import org.opensearch.search.SearchHit;
+import org.opensearch.search.SearchHits;
+import org.opensearch.search.builder.SearchSourceBuilder;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import java.io.IOException;
+import java.util.Collections;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+
+/**
+ * Backend for storing Notebooks on OpenSearch
+ */
+public class OpenSearchNotebookRepo implements NotebookRepo {
+    private static final Logger LOGGER = LoggerFactory.getLogger(OpenSearchNotebookRepo.class);
+
+//
+
+    private RestHighLevelClient OpenSearchClient;
+    private String user;
+    private String password;
+    private String host;
+    private Integer port;
+    private String protocol;
+    private String rootIndex = ".notebooks";
+    private ZeppelinConfiguration conf;
+
+    public OpenSearchNotebookRepo() {
+
+    }
+
+    private RestHighLevelClient client() {
+      //  Uncomment to add path for ssl keystore and using https client
+      //  Discussion on generating keystore with certificate: https://github.com/opendistro-for-elasticsearch/community/issues/64#issuecomment-493258442
+      //  System.setProperty("javax.net.ssl.trustStore", "/path/to/keystore/keystore.jks");
+        final CredentialsProvider credentialsProvider = new BasicCredentialsProvider();
+        credentialsProvider.setCredentials(AuthScope.ANY, new UsernamePasswordCredentials(user, password));
+
+        RestHighLevelClient client = new RestHighLevelClient(
+                RestClient.builder(
+                        new HttpHost(host, port, protocol)).setHttpClientConfigCallback(new RestClientBuilder.HttpClientConfigCallback() {
+                    @Override
+                    public HttpAsyncClientBuilder customizeHttpClient(HttpAsyncClientBuilder httpClientBuilder) {
+                        return httpClientBuilder.setDefaultCredentialsProvider(credentialsProvider);
+                    }
+                }));
+        return client;
+    }
+
+    private void CreateNotebooksIndex() throws IOException {
+        CreateIndexRequest request = new CreateIndexRequest(rootIndex);
+        try {
+            CreateIndexResponse createIndexResponse = OpenSearchClient.indices().create(request, RequestOptions.DEFAULT);
+        } catch (ElasticsearchStatusException e) {
+            if (!e.getMessage().contains("resource_already_exists_exception")) {
+                throw e;
+            }
+        }
+    }
+
+    @Override
+    public void init(ZeppelinConfiguration conf) throws IOException {
+        this.conf = conf;
+        // Change Client configuration here
+        user = "admin";
+        password = "admin";
+        host = "localhost";
+        port = 9200;
+        protocol = "http";
+        OpenSearchClient = client();
+        CreateNotebooksIndex();
+    }
+
+
+    @Override
+    public Map<String, NoteInfo> list(AuthenticationInfo subject) throws IOException {
+        Map<String, NoteInfo> notesInfo = new HashMap<>();
+        SearchRequest searchRequest = new SearchRequest(rootIndex);
+        SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();
+        searchSourceBuilder.query(QueryBuilders.matchAllQuery());
+        searchRequest.source(searchSourceBuilder);
+        SearchResponse searchResponse = OpenSearchClient.search(searchRequest, RequestOptions.DEFAULT);
+
+        SearchHits hits = searchResponse.getHits();
+
+        if (hits.getHits().length>0) {
+            SearchHit[] searchHits = hits.getHits();
+            for (SearchHit hit : searchHits) {
+                Map<String, Object> noteJson = hit.getSourceAsMap();
+                NoteInfo noteInfo = new NoteInfo(noteJson.get("id").toString(), noteJson.get("path").toString());
+                notesInfo.put(noteJson.get("id").toString(), noteInfo);
+            }
+        }
+        return notesInfo;
+    }
+
+
+    @Override
+    public Note get(String noteId, String notePath, AuthenticationInfo subject) throws IOException {
+        GetRequest getRequest = new GetRequest(rootIndex, noteId);
+        GetResponse getResponse = OpenSearchClient.get(getRequest, RequestOptions.DEFAULT);
+        if (getResponse.isExists()) {
+            String json = getResponse.getSourceAsString();
+            return Note.fromJson(json);
+        } else {
+            throw new IOException("Note '" + noteId + "' in path '" + notePath + "'not found in OpenSearch");
+        }
+    }
+
+    @Override
+    public void save(Note note, AuthenticationInfo subject) throws IOException {
+        // TODO: Other NotebookRepos deal with File paths as a separate kept entity
+        // They don't store path in the notebook itself
+        // Here, we merge path as a notebook property
+        // In the later release we need to decouple this to support folder structures
+
+        JsonObject json = new JsonParser().parse(note.toJson()).getAsJsonObject();
+        json.addProperty("path",note.getPath());
+        try {
+            IndexRequest request = new IndexRequest(rootIndex);
+            request.id(note.getId());
+            request.source(json.toString(), XContentType.JSON);
+            IndexResponse indexResponse = OpenSearchClient.index(request, RequestOptions.DEFAULT);
+        } catch (IOException e) {
+            throw new IOException("Fail to store note: " + note.getPath() + " in OpenSearch", e);
+        }
+    }
+
+    @Override
+    public void move(String noteId, String notePath, String newNotePath,
+                     AuthenticationInfo subject) throws IOException {
+        LOGGER.warn("Method not implemented");
+    }
+
+    @Override
+    public void move(String folderPath, String newFolderPath, AuthenticationInfo subject) throws IOException {
+        LOGGER.warn("Method not implemented");
+    }
+
+    @Override
+    public void remove(String noteId, String notePath, AuthenticationInfo subject)
+            throws IOException {
+        DeleteRequest request = new DeleteRequest(rootIndex, noteId);
+        DeleteResponse deleteResponse = OpenSearchClient.delete(request, RequestOptions.DEFAULT);
+        if (deleteResponse.getResult() != DocWriteResponse.Result.NOT_FOUND) {
+            System.out.println(deleteResponse.toString());
+        } else {
+            throw new IOException("Note '" + noteId + "' in path '" + notePath + "'cannot be deleted");
+        }
+    }
+
+    @Override
+    public void remove(String folderPath, AuthenticationInfo subject) throws IOException {
+        LOGGER.warn("Method not implemented");
+    }
+
+    @Override
+    public void close() {
+        try {
+            OpenSearchClient.close();
+        } catch (IOException exception) {
+            exception.printStackTrace();
+        }
+
+    }
+
+    @Override
+    public List<NotebookRepoSettingsInfo> getSettings(AuthenticationInfo subject) {
+        LOGGER.warn("Method not implemented");
+        return Collections.emptyList();
+    }
+
+    @Override
+    public void updateSettings(Map<String, String> settings, AuthenticationInfo subject) {
+        LOGGER.warn("Method not implemented");
+    }
+
+}
+
diff --git a/public/components/notebooks/index.scss b/public/components/notebooks/index.scss
new file mode 100644
index 0000000000..d21d4c8668
--- /dev/null
+++ b/public/components/notebooks/index.scss
@@ -0,0 +1,39 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.editorArea {
+  font-family: Dank Mono, Source Code Pro, Consolas, Courier New, Courier, monospace;
+  font-size: 1em;
+  border: none;
+  width: 100%;
+  height: 14em;
+}
+
+#notebookArea {
+  max-width: 88vw;
+}
+
+.panel-header-count {
+  color: #687078;
+  font-weight: normal;
+}
+
+.markdown-output-text {
+  font-family: 'Inter UI', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+.notebooks-paragraph button[aria-label='Expand'] {
+  display: none;
+}
+.notebooks-paragraph-dark .markdown-body {
+  pre.input {
+    background-color: #25262d !important;
+  }
+  code.language-text {
+    color: #e0e5ee !important;
+    background-color: #25262d !important;
+  }
+}
diff --git a/public/components/trace_analytics/components/common/__tests__/__snapshots__/helper_functions.test.tsx.snap b/public/components/trace_analytics/components/common/__tests__/__snapshots__/helper_functions.test.tsx.snap
new file mode 100644
index 0000000000..0d6dad1ca0
--- /dev/null
+++ b/public/components/trace_analytics/components/common/__tests__/__snapshots__/helper_functions.test.tsx.snap
@@ -0,0 +1,146 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Helper functions renders benchmark 1`] = `
+<EuiText
+  size="s"
+  style={
+    Object {
+      "color": "#c23f25",
+    }
+  }
+>
+  <div
+    className="euiText euiText--small"
+    style={
+      Object {
+        "color": "#c23f25",
+      }
+    }
+  >
+    50% ▴
+  </div>
+</EuiText>
+`;
+
+exports[`Helper functions renders benchmark 2`] = `
+<EuiText
+  size="s"
+  style={
+    Object {
+      "color": "#3f7e23",
+    }
+  }
+>
+  <div
+    className="euiText euiText--small"
+    style={
+      Object {
+        "color": "#3f7e23",
+      }
+    }
+  >
+    50% ▾
+  </div>
+</EuiText>
+`;
+
+exports[`Helper functions renders benchmark 3`] = `
+<EuiText
+  size="s"
+  style={
+    Object {
+      "color": "#9ea8a9",
+    }
+  }
+>
+  <div
+    className="euiText euiText--small"
+    style={
+      Object {
+        "color": "#9ea8a9",
+      }
+    }
+  >
+    0% -
+  </div>
+</EuiText>
+`;
+
+exports[`Helper functions renders no match and missing configuration messages 1`] = `
+<Fragment>
+  <EuiSpacer
+    size="s"
+  />
+  <EuiEmptyPrompt
+    body={
+      <EuiText>
+        No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+      </EuiText>
+    }
+    title={
+      <h2>
+        No matches
+      </h2>
+    }
+  />
+  <EuiSpacer
+    size="s"
+  />
+</Fragment>
+`;
+
+exports[`Helper functions renders no match and missing configuration messages 2`] = `
+<Fragment>
+  <EuiEmptyPrompt
+    actions={
+      <EuiButton
+        color="primary"
+        iconSide="right"
+        iconType="popout"
+        onClick={[Function]}
+      >
+        Learn more
+      </EuiButton>
+    }
+    body={
+      <EuiText>
+        The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+      </EuiText>
+    }
+    title={
+      <h2>
+        Trace Analytics not set up
+      </h2>
+    }
+  />
+</Fragment>
+`;
+
+exports[`Helper functions renders panel title 1`] = `
+<EuiText
+  size="m"
+>
+  <span
+    className="panel-title"
+  >
+    test
+  </span>
+  <span
+    className="panel-title-count"
+  >
+     (10)
+  </span>
+</EuiText>
+`;
+
+exports[`Helper functions renders panel title 2`] = `
+<EuiText
+  size="m"
+>
+  <span
+    className="panel-title"
+  >
+    test
+  </span>
+</EuiText>
+`;
diff --git a/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
new file mode 100644
index 0000000000..9c3997a729
--- /dev/null
+++ b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
@@ -0,0 +1,1153 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search bar components renders date picker 1`] = `
+<EuiSuperDatePicker
+  commonlyUsedRanges={
+    Array [
+      Object {
+        "end": "now/d",
+        "label": "Today",
+        "start": "now/d",
+      },
+      Object {
+        "end": "now/w",
+        "label": "This week",
+        "start": "now/w",
+      },
+      Object {
+        "end": "now/M",
+        "label": "This month",
+        "start": "now/M",
+      },
+      Object {
+        "end": "now/y",
+        "label": "This year",
+        "start": "now/y",
+      },
+      Object {
+        "end": "now-1d/d",
+        "label": "Yesterday",
+        "start": "now-1d/d",
+      },
+      Object {
+        "end": "now",
+        "label": "Week to date",
+        "start": "now/w",
+      },
+      Object {
+        "end": "now",
+        "label": "Month to date",
+        "start": "now/M",
+      },
+      Object {
+        "end": "now",
+        "label": "Year to date",
+        "start": "now/y",
+      },
+    ]
+  }
+  dateFormat=""
+  end="now"
+  isAutoRefreshOnly={false}
+  isDisabled={false}
+  isPaused={true}
+  onTimeChange={[Function]}
+  recentlyUsedRanges={Array []}
+  refreshInterval={0}
+  showUpdateButton={false}
+  start="now-5m"
+  timeFormat="HH:mm"
+>
+  <EuiFlexGroup
+    className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+    gutterSize="s"
+    responsive={false}
+  >
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+    >
+      <EuiFlexItem>
+        <div
+          className="euiFlexItem"
+        >
+          <EuiFormControlLayout
+            className="euiSuperDatePicker"
+            isDisabled={false}
+            prepend={
+              <EuiQuickSelectPopover
+                applyTime={[Function]}
+                commonlyUsedRanges={
+                  Array [
+                    Object {
+                      "end": "now/d",
+                      "label": "Today",
+                      "start": "now/d",
+                    },
+                    Object {
+                      "end": "now/w",
+                      "label": "This week",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now/M",
+                      "label": "This month",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now/y",
+                      "label": "This year",
+                      "start": "now/y",
+                    },
+                    Object {
+                      "end": "now-1d/d",
+                      "label": "Yesterday",
+                      "start": "now-1d/d",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Week to date",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Month to date",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Year to date",
+                      "start": "now/y",
+                    },
+                  ]
+                }
+                dateFormat=""
+                end="now"
+                isAutoRefreshOnly={false}
+                isDisabled={false}
+                isPaused={true}
+                recentlyUsedRanges={Array []}
+                refreshInterval={0}
+                start="now-5m"
+              />
+            }
+          >
+            <div
+              className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+            >
+              <EuiQuickSelectPopover
+                applyTime={[Function]}
+                className="euiFormControlLayout__prepend"
+                commonlyUsedRanges={
+                  Array [
+                    Object {
+                      "end": "now/d",
+                      "label": "Today",
+                      "start": "now/d",
+                    },
+                    Object {
+                      "end": "now/w",
+                      "label": "This week",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now/M",
+                      "label": "This month",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now/y",
+                      "label": "This year",
+                      "start": "now/y",
+                    },
+                    Object {
+                      "end": "now-1d/d",
+                      "label": "Yesterday",
+                      "start": "now-1d/d",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Week to date",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Month to date",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Year to date",
+                      "start": "now/y",
+                    },
+                  ]
+                }
+                dateFormat=""
+                end="now"
+                isAutoRefreshOnly={false}
+                isDisabled={false}
+                isPaused={true}
+                key="0/.0"
+                recentlyUsedRanges={Array []}
+                refreshInterval={0}
+                start="now-5m"
+              >
+                <EuiPopover
+                  anchorClassName="euiQuickSelectPopover__anchor"
+                  anchorPosition="downLeft"
+                  button={
+                    <EuiButtonEmpty
+                      aria-label="Date quick select"
+                      className="euiFormControlLayout__prepend"
+                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                      iconSide="right"
+                      iconType="arrowDown"
+                      isDisabled={false}
+                      onClick={[Function]}
+                      size="xs"
+                      textProps={
+                        Object {
+                          "className": "euiQuickSelectPopover__buttonText",
+                        }
+                      }
+                    >
+                      <EuiIcon
+                        type="calendar"
+                      />
+                    </EuiButtonEmpty>
+                  }
+                  closePopover={[Function]}
+                  display="inlineBlock"
+                  hasArrow={true}
+                  isOpen={false}
+                  ownFocus={true}
+                  panelPaddingSize="m"
+                >
+                  <div
+                    className="euiPopover euiPopover--anchorDownLeft"
+                  >
+                    <div
+                      className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                    >
+                      <EuiButtonEmpty
+                        aria-label="Date quick select"
+                        className="euiFormControlLayout__prepend"
+                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                        iconSide="right"
+                        iconType="arrowDown"
+                        isDisabled={false}
+                        onClick={[Function]}
+                        size="xs"
+                        textProps={
+                          Object {
+                            "className": "euiQuickSelectPopover__buttonText",
+                          }
+                        }
+                      >
+                        <button
+                          aria-label="Date quick select"
+                          className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                          data-test-subj="superDatePickerToggleQuickMenuButton"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
+                        >
+                          <EuiButtonContent
+                            className="euiButtonEmpty__content"
+                            iconSide="right"
+                            iconSize="s"
+                            iconType="arrowDown"
+                            textProps={
+                              Object {
+                                "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                            >
+                              <EuiIcon
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                size="s"
+                                type="arrowDown"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                              <span
+                                className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                              >
+                                <EuiIcon
+                                  type="calendar"
+                                >
+                                  <EuiIconEmpty
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                    focusable="false"
+                                    role="img"
+                                    style={null}
+                                  >
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium 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>
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonEmpty>
+                    </div>
+                  </div>
+                </EuiPopover>
+              </EuiQuickSelectPopover>
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <EuiDatePickerRange
+                  className="euiDatePickerRange--inGroup"
+                  endDateControl={<div />}
+                  iconType={false}
+                  isCustom={true}
+                  startDateControl={<div />}
+                >
+                  <div
+                    className="euiDatePickerRange euiDatePickerRange--inGroup"
+                  >
+                    <button
+                      className="euiSuperDatePicker__prettyFormat"
+                      data-test-subj="superDatePickerShowDatesButton"
+                      disabled={false}
+                      onClick={[Function]}
+                    >
+                      Last 5 minutes
+                      <span
+                        className="euiSuperDatePicker__prettyFormatLink"
+                      >
+                        <EuiI18n
+                          default="Show dates"
+                          token="euiSuperDatePicker.showDatesButtonLabel"
+                        >
+                          Show dates
+                        </EuiI18n>
+                      </span>
+                    </button>
+                  </div>
+                </EuiDatePickerRange>
+                <EuiFormControlLayoutIcons />
+              </div>
+            </div>
+          </EuiFormControlLayout>
+        </div>
+      </EuiFlexItem>
+    </div>
+  </EuiFlexGroup>
+</EuiSuperDatePicker>
+`;
+
+exports[`Search bar components renders search bar 1`] = `
+<SearchBar
+  appConfigs={Array []}
+  endTime="now"
+  filters={Array []}
+  page="dashboard"
+  query="test"
+  refresh={[MockFunction]}
+  setEndTime={[MockFunction]}
+  setFilters={[MockFunction]}
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+>
+  <EuiFlexGroup
+    gutterSize="s"
+  >
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <EuiFlexItem>
+        <div
+          className="euiFlexItem"
+        >
+          <EuiFieldSearch
+            compressed={false}
+            data-test-subj="search-bar-input-box"
+            fullWidth={true}
+            incremental={false}
+            isClearable={false}
+            isLoading={false}
+            onChange={[Function]}
+            onSearch={[MockFunction]}
+            placeholder="Trace ID, trace group name, service name"
+            value="test"
+          >
+            <EuiFormControlLayout
+              compressed={false}
+              fullWidth={true}
+              icon="search"
+              isLoading={false}
+            >
+              <div
+                className="euiFormControlLayout euiFormControlLayout--fullWidth"
+              >
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
+                >
+                  <EuiValidatableControl>
+                    <input
+                      className="euiFieldSearch euiFieldSearch--fullWidth"
+                      data-test-subj="search-bar-input-box"
+                      onChange={[Function]}
+                      onKeyUp={[Function]}
+                      placeholder="Trace ID, trace group name, service name"
+                      type="search"
+                      value="test"
+                    />
+                  </EuiValidatableControl>
+                  <EuiFormControlLayoutIcons
+                    compressed={false}
+                    icon="search"
+                    isLoading={false}
+                  >
+                    <div
+                      className="euiFormControlLayoutIcons"
+                    >
+                      <EuiFormControlLayoutCustomIcon
+                        size="m"
+                        type="search"
+                      >
+                        <span
+                          className="euiFormControlLayoutCustomIcon"
+                        >
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiFormControlLayoutCustomIcon__icon"
+                            size="m"
+                            type="search"
+                          >
+                            <EuiIconEmpty
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                              focusable="false"
+                              role="img"
+                              style={null}
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </EuiIconEmpty>
+                          </EuiIcon>
+                        </span>
+                      </EuiFormControlLayoutCustomIcon>
+                    </div>
+                  </EuiFormControlLayoutIcons>
+                </div>
+              </div>
+            </EuiFormControlLayout>
+          </EuiFieldSearch>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+        style={
+          Object {
+            "maxWidth": "40vw",
+          }
+        }
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+          style={
+            Object {
+              "maxWidth": "40vw",
+            }
+          }
+        >
+          <EuiSuperDatePicker
+            commonlyUsedRanges={
+              Array [
+                Object {
+                  "end": "now/d",
+                  "label": "Today",
+                  "start": "now/d",
+                },
+                Object {
+                  "end": "now/w",
+                  "label": "This week",
+                  "start": "now/w",
+                },
+                Object {
+                  "end": "now/M",
+                  "label": "This month",
+                  "start": "now/M",
+                },
+                Object {
+                  "end": "now/y",
+                  "label": "This year",
+                  "start": "now/y",
+                },
+                Object {
+                  "end": "now-1d/d",
+                  "label": "Yesterday",
+                  "start": "now-1d/d",
+                },
+                Object {
+                  "end": "now",
+                  "label": "Week to date",
+                  "start": "now/w",
+                },
+                Object {
+                  "end": "now",
+                  "label": "Month to date",
+                  "start": "now/M",
+                },
+                Object {
+                  "end": "now",
+                  "label": "Year to date",
+                  "start": "now/y",
+                },
+              ]
+            }
+            dateFormat=""
+            end="now"
+            isAutoRefreshOnly={false}
+            isDisabled={false}
+            isPaused={true}
+            onTimeChange={[Function]}
+            recentlyUsedRanges={Array []}
+            refreshInterval={0}
+            showUpdateButton={false}
+            start="now-5m"
+            timeFormat="HH:mm"
+          >
+            <EuiFlexGroup
+              className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+              gutterSize="s"
+              responsive={false}
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+              >
+                <EuiFlexItem>
+                  <div
+                    className="euiFlexItem"
+                  >
+                    <EuiFormControlLayout
+                      className="euiSuperDatePicker"
+                      isDisabled={false}
+                      prepend={
+                        <EuiQuickSelectPopover
+                          applyTime={[Function]}
+                          commonlyUsedRanges={
+                            Array [
+                              Object {
+                                "end": "now/d",
+                                "label": "Today",
+                                "start": "now/d",
+                              },
+                              Object {
+                                "end": "now/w",
+                                "label": "This week",
+                                "start": "now/w",
+                              },
+                              Object {
+                                "end": "now/M",
+                                "label": "This month",
+                                "start": "now/M",
+                              },
+                              Object {
+                                "end": "now/y",
+                                "label": "This year",
+                                "start": "now/y",
+                              },
+                              Object {
+                                "end": "now-1d/d",
+                                "label": "Yesterday",
+                                "start": "now-1d/d",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Week to date",
+                                "start": "now/w",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Month to date",
+                                "start": "now/M",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Year to date",
+                                "start": "now/y",
+                              },
+                            ]
+                          }
+                          dateFormat=""
+                          end="now"
+                          isAutoRefreshOnly={false}
+                          isDisabled={false}
+                          isPaused={true}
+                          recentlyUsedRanges={Array []}
+                          refreshInterval={0}
+                          start="now-5m"
+                        />
+                      }
+                    >
+                      <div
+                        className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                      >
+                        <EuiQuickSelectPopover
+                          applyTime={[Function]}
+                          className="euiFormControlLayout__prepend"
+                          commonlyUsedRanges={
+                            Array [
+                              Object {
+                                "end": "now/d",
+                                "label": "Today",
+                                "start": "now/d",
+                              },
+                              Object {
+                                "end": "now/w",
+                                "label": "This week",
+                                "start": "now/w",
+                              },
+                              Object {
+                                "end": "now/M",
+                                "label": "This month",
+                                "start": "now/M",
+                              },
+                              Object {
+                                "end": "now/y",
+                                "label": "This year",
+                                "start": "now/y",
+                              },
+                              Object {
+                                "end": "now-1d/d",
+                                "label": "Yesterday",
+                                "start": "now-1d/d",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Week to date",
+                                "start": "now/w",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Month to date",
+                                "start": "now/M",
+                              },
+                              Object {
+                                "end": "now",
+                                "label": "Year to date",
+                                "start": "now/y",
+                              },
+                            ]
+                          }
+                          dateFormat=""
+                          end="now"
+                          isAutoRefreshOnly={false}
+                          isDisabled={false}
+                          isPaused={true}
+                          key="0/.0"
+                          recentlyUsedRanges={Array []}
+                          refreshInterval={0}
+                          start="now-5m"
+                        >
+                          <EuiPopover
+                            anchorClassName="euiQuickSelectPopover__anchor"
+                            anchorPosition="downLeft"
+                            button={
+                              <EuiButtonEmpty
+                                aria-label="Date quick select"
+                                className="euiFormControlLayout__prepend"
+                                data-test-subj="superDatePickerToggleQuickMenuButton"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                isDisabled={false}
+                                onClick={[Function]}
+                                size="xs"
+                                textProps={
+                                  Object {
+                                    "className": "euiQuickSelectPopover__buttonText",
+                                  }
+                                }
+                              >
+                                <EuiIcon
+                                  type="calendar"
+                                />
+                              </EuiButtonEmpty>
+                            }
+                            closePopover={[Function]}
+                            display="inlineBlock"
+                            hasArrow={true}
+                            isOpen={false}
+                            ownFocus={true}
+                            panelPaddingSize="m"
+                          >
+                            <div
+                              className="euiPopover euiPopover--anchorDownLeft"
+                            >
+                              <div
+                                className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                              >
+                                <EuiButtonEmpty
+                                  aria-label="Date quick select"
+                                  className="euiFormControlLayout__prepend"
+                                  data-test-subj="superDatePickerToggleQuickMenuButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  isDisabled={false}
+                                  onClick={[Function]}
+                                  size="xs"
+                                  textProps={
+                                    Object {
+                                      "className": "euiQuickSelectPopover__buttonText",
+                                    }
+                                  }
+                                >
+                                  <button
+                                    aria-label="Date quick select"
+                                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiButtonContent
+                                      className="euiButtonEmpty__content"
+                                      iconSide="right"
+                                      iconSize="s"
+                                      iconType="arrowDown"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                      >
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="s"
+                                          type="arrowDown"
+                                        >
+                                          <EuiIconArrowDown
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                            focusable="false"
+                                            role="img"
+                                            style={null}
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            >
+                                              <path
+                                                d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                fillRule="non-zero"
+                                              />
+                                            </svg>
+                                          </EuiIconArrowDown>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                        >
+                                          <EuiIcon
+                                            type="calendar"
+                                          >
+                                            <EuiIconCalendar
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                <path
+                                                  d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                  fillRule="evenodd"
+                                                />
+                                              </svg>
+                                            </EuiIconCalendar>
+                                          </EuiIcon>
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonEmpty>
+                              </div>
+                            </div>
+                          </EuiPopover>
+                        </EuiQuickSelectPopover>
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiDatePickerRange
+                            className="euiDatePickerRange--inGroup"
+                            endDateControl={<div />}
+                            iconType={false}
+                            isCustom={true}
+                            startDateControl={<div />}
+                          >
+                            <div
+                              className="euiDatePickerRange euiDatePickerRange--inGroup"
+                            >
+                              <button
+                                className="euiSuperDatePicker__prettyFormat"
+                                data-test-subj="superDatePickerShowDatesButton"
+                                disabled={false}
+                                onClick={[Function]}
+                              >
+                                Last 5 minutes
+                                <span
+                                  className="euiSuperDatePicker__prettyFormatLink"
+                                >
+                                  <EuiI18n
+                                    default="Show dates"
+                                    token="euiSuperDatePicker.showDatesButtonLabel"
+                                  >
+                                    Show dates
+                                  </EuiI18n>
+                                </span>
+                              </button>
+                            </div>
+                          </EuiDatePickerRange>
+                          <EuiFormControlLayoutIcons />
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </EuiSuperDatePicker>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <EuiButton
+            data-click-metric-element="trace_analytics.refresh_button"
+            data-test-subj="superDatePickerApplyTimeButton"
+            iconType="refresh"
+            onClick={[MockFunction]}
+          >
+            <EuiButtonDisplay
+              baseClassName="euiButton"
+              data-click-metric-element="trace_analytics.refresh_button"
+              data-test-subj="superDatePickerApplyTimeButton"
+              disabled={false}
+              element="button"
+              iconType="refresh"
+              isDisabled={false}
+              onClick={[MockFunction]}
+              type="button"
+            >
+              <button
+                className="euiButton euiButton--primary"
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                disabled={false}
+                onClick={[MockFunction]}
+                style={
+                  Object {
+                    "minWidth": undefined,
+                  }
+                }
+                type="button"
+              >
+                <EuiButtonContent
+                  className="euiButton__content"
+                  iconSide="left"
+                  iconType="refresh"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
+                >
+                  <span
+                    className="euiButtonContent euiButton__content"
+                  >
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="refresh"
+                    >
+                      <EuiIconEmpty
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                        focusable="false"
+                        role="img"
+                        style={null}
+                      >
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </EuiIconEmpty>
+                    </EuiIcon>
+                    <span
+                      className="euiButton__text"
+                    >
+                      Refresh
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonDisplay>
+          </EuiButton>
+        </div>
+      </EuiFlexItem>
+    </div>
+  </EuiFlexGroup>
+  <EuiSpacer
+    size="s"
+  >
+    <div
+      className="euiSpacer euiSpacer--s"
+    />
+  </EuiSpacer>
+  <Filters
+    appConfigs={Array []}
+    filters={Array []}
+    page="dashboard"
+    setFilters={[MockFunction]}
+  >
+    <EuiFlexGroup
+      alignItems="center"
+      gutterSize="xs"
+      responsive={false}
+      style={
+        Object {
+          "minHeight": 32,
+        }
+      }
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+        style={
+          Object {
+            "minHeight": 32,
+          }
+        }
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <GlobalFilterButton>
+              <EuiPopover
+                anchorPosition="rightUp"
+                button={
+                  <EuiButtonIcon
+                    aria-label="Change all filters"
+                    iconType="filter"
+                    onClick={[Function]}
+                    title="Change all filters"
+                  />
+                }
+                closePopover={[Function]}
+                display="inlineBlock"
+                hasArrow={true}
+                isOpen={false}
+                ownFocus={true}
+                panelPaddingSize="none"
+                withTitle={true}
+              >
+                <div
+                  className="euiPopover euiPopover--anchorRightUp"
+                  withTitle={true}
+                >
+                  <div
+                    className="euiPopover__anchor"
+                  >
+                    <EuiButtonIcon
+                      aria-label="Change all filters"
+                      iconType="filter"
+                      onClick={[Function]}
+                      title="Change all filters"
+                    >
+                      <button
+                        aria-label="Change all filters"
+                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                        disabled={false}
+                        onClick={[Function]}
+                        title="Change all filters"
+                        type="button"
+                      >
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          color="inherit"
+                          size="m"
+                          type="filter"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                      </button>
+                    </EuiButtonIcon>
+                  </div>
+                </div>
+              </EuiPopover>
+            </GlobalFilterButton>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <AddFilterButton>
+              <EuiPopover
+                anchorPosition="downLeft"
+                button={
+                  <EuiButtonEmpty
+                    onClick={[Function]}
+                    size="xs"
+                  >
+                    + Add filter
+                  </EuiButtonEmpty>
+                }
+                closePopover={[Function]}
+                display="inlineBlock"
+                hasArrow={true}
+                isOpen={false}
+                ownFocus={true}
+                panelPaddingSize="m"
+                withTitle={true}
+              >
+                <div
+                  className="euiPopover euiPopover--anchorDownLeft"
+                  withTitle={true}
+                >
+                  <div
+                    className="euiPopover__anchor"
+                  >
+                    <EuiButtonEmpty
+                      onClick={[Function]}
+                      size="xs"
+                    >
+                      <button
+                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <EuiButtonContent
+                          className="euiButtonEmpty__content"
+                          iconSide="left"
+                          iconSize="s"
+                          textProps={
+                            Object {
+                              "className": "euiButtonEmpty__text",
+                            }
+                          }
+                        >
+                          <span
+                            className="euiButtonContent euiButtonEmpty__content"
+                          >
+                            <span
+                              className="euiButtonEmpty__text"
+                            >
+                              + Add filter
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonEmpty>
+                  </div>
+                </div>
+              </EuiPopover>
+            </AddFilterButton>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </Filters>
+</SearchBar>
+`;
diff --git a/public/components/trace_analytics/components/common/__tests__/helper_functions.test.tsx b/public/components/trace_analytics/components/common/__tests__/helper_functions.test.tsx
new file mode 100644
index 0000000000..730db77b5a
--- /dev/null
+++ b/public/components/trace_analytics/components/common/__tests__/helper_functions.test.tsx
@@ -0,0 +1,169 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { TEST_SERVICE_MAP, TEST_SERVICE_MAP_GRAPH } from '../../../../../../test/constants';
+import {
+  calculateTicks,
+  filtersToDsl,
+  fixedIntervalToMilli,
+  fixedIntervalToTickFormat,
+  getPercentileFilter,
+  getServiceMapGraph,
+  getServiceMapScaleColor,
+  getServiceMapTargetResources,
+  milliToNanoSec,
+  minFixedInterval,
+  MissingConfigurationMessage,
+  nanoToMilliSec,
+  NoMatchMessage,
+  PanelTitle,
+  renderBenchmark,
+} from '../helper_functions';
+
+describe('Helper functions', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders panel title', () => {
+    const title = shallow(<PanelTitle title="test" totalItems={10} />);
+    const titleZeroCount = shallow(<PanelTitle title="test" />);
+    expect(title).toMatchSnapshot();
+    expect(titleZeroCount).toMatchSnapshot();
+  });
+
+  it('renders no match and missing configuration messages', () => {
+    const noMatchMessage = shallow(<NoMatchMessage size="s" />);
+    const missingConfigurationMessage = shallow(<MissingConfigurationMessage />);
+    expect(noMatchMessage).toMatchSnapshot();
+    expect(missingConfigurationMessage).toMatchSnapshot();
+  });
+
+  it('renders benchmark', () => {
+    // @ts-ignore
+    const benchmarkPositive = mount(renderBenchmark(50));
+    // @ts-ignore
+    const benchmarkNegative = mount(renderBenchmark(-50));
+    // @ts-ignore
+    const benchmarkZero = mount(renderBenchmark(0));
+    expect(benchmarkPositive).toMatchSnapshot();
+    expect(benchmarkNegative).toMatchSnapshot();
+    expect(benchmarkZero).toMatchSnapshot();
+  });
+
+  it('converts nanoseconds and milliseconds', () => {
+    const ms = nanoToMilliSec(123456789);
+    expect(ms).toEqual(123.456789);
+    const ns = milliToNanoSec(123.456789);
+    expect(ns).toEqual(123456789);
+    // @ts-ignore
+    const invalidMs = nanoToMilliSec('abc');
+    expect(invalidMs).toEqual(0);
+    // @ts-ignore
+    const invalidNs = milliToNanoSec('abc');
+    expect(invalidNs).toEqual(0);
+  });
+
+  it('returns service map scale color', () => {
+    const color = getServiceMapScaleColor(0.5, 'latency');
+    expect(color).toEqual('134, 105, 173');
+  });
+
+  it('returns service map graph', () => {
+    const serviceMapGraph = getServiceMapGraph(TEST_SERVICE_MAP, 'latency', [
+      0,
+      50,
+      100,
+      150,
+      200,
+      250,
+    ]);
+    expect(serviceMapGraph).toEqual(TEST_SERVICE_MAP_GRAPH);
+  });
+
+  it('returns target resources by service name', () => {
+    const targetResources = getServiceMapTargetResources(TEST_SERVICE_MAP, 'order');
+    expect(targetResources).toEqual(['clear_order', 'update_order', 'get_order', 'pay_order']);
+  });
+
+  it('calculates ticks', () => {
+    const ticks = calculateTicks(500, 200);
+    const ticks2 = calculateTicks(0, 200, 10);
+    expect(ticks).toEqual([0, 50, 100, 150, 200]);
+    expect(ticks2).toEqual([0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200]);
+  });
+
+  it('calculates fixed_interval for date_histograms', () => {
+    const fixedInterval = minFixedInterval('now-5y', 'now');
+    expect(fixedInterval).toEqual('365d');
+    const ms = fixedIntervalToMilli('1h');
+    expect(ms).toEqual(3600000);
+    const tickFormat = fixedIntervalToTickFormat('1h');
+    expect(tickFormat).toEqual('');
+  });
+
+  it('returns percentile filter DSL', () => {
+    const DSL = getPercentileFilter(
+      [{ traceGroupName: 'order', durationFilter: { gte: 1000 } }],
+      '>= 95th'
+    );
+    expect(DSL).toEqual(
+      JSON.parse(
+        `{"field":"Latency percentile within trace group","operator":"","value":">= 95th","inverted":false,"disabled":false,"custom":{"query":{"bool":{"must":[],"filter":[],"should":[{"bool":{"must":[{"term":{"traceGroup":{"value":"order"}}},{"range":{"traceGroupFields.durationInNanos":{"gte":1000}}}]}}],"must_not":[],"minimum_should_match":1}}}}`
+      )
+    );
+  });
+
+  it('converts filters to DSL', () => {
+    const getTestDslFromFilters = (field = 'traceGroup', operator = 'exists') =>
+      filtersToDsl(
+        [
+          {
+            field,
+            operator,
+            value: { from: '100', to: '\u221E' },
+            inverted: false,
+            disabled: false,
+          },
+        ],
+        'order',
+        'now-5m',
+        'now'
+      );
+    const existsDSL = getTestDslFromFilters();
+    expect(JSON.stringify(existsDSL)).toEqual(
+      '{"query":{"bool":{"must":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}},{"exists":{"field":"traceGroup"}}],"filter":[],"should":[],"must_not":[]}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":[]}}}}}'
+    );
+
+    const isDSL = getTestDslFromFilters('traceGroup', 'is');
+    expect(JSON.stringify(isDSL)).toEqual(
+      '{"query":{"bool":{"must":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}},{"term":{"traceGroup":{"from":"100","to":"∞"}}}],"filter":[],"should":[],"must_not":[]}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":[]}}}}}'
+    );
+    const isBetweenDSL = getTestDslFromFilters('durationInNanos', 'is between');
+    expect(JSON.stringify(isBetweenDSL)).toEqual(
+      `{"query":{"bool":{"must":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}},{"range":{"durationInNanos":{"gte":"100"}}}],"filter":[],"should":[],"must_not":[]}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":[]}}}}}`
+    );
+
+    const customDSL = filtersToDsl(
+      [
+        {
+          field: 'serviceName',
+          operator: 'is',
+          value: 'order',
+          inverted: false,
+          disabled: false,
+          custom: { query: { bool: { should: ['test'], minimum_should_match: 1 } } },
+        },
+      ],
+      'order',
+      'now-5m',
+      'now'
+    );
+    expect(JSON.stringify(customDSL)).toEqual(
+      `{"query":{"bool":{"must":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}},{"query_string":{"query":"order"}}],"filter":[],"should":["test"],"must_not":[],"minimum_should_match":1}},"custom":{"timeFilter":[{"range":{"startTime":{"gte":"now-5m","lte":"now"}}}],"serviceNames":[],"serviceNamesExclude":[],"traceGroup":[],"traceGroupExclude":[],"percentiles":{"query":{"bool":{"should":["test"],"minimum_should_match":1}}}}}`
+    );
+  });
+});
diff --git a/public/components/trace_analytics/components/common/__tests__/search_bar.test.tsx b/public/components/trace_analytics/components/common/__tests__/search_bar.test.tsx
new file mode 100644
index 0000000000..9e0c8ed124
--- /dev/null
+++ b/public/components/trace_analytics/components/common/__tests__/search_bar.test.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import sinon from 'sinon';
+import { renderDatePicker, SearchBar } from '../search_bar';
+
+describe('Search bar components', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders date picker', () => {
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const wrapper = mount(renderDatePicker('now-5m', setStartTime, 'now', setEndTime));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders search bar', () => {
+    const clock = sinon.useFakeTimers();
+
+    const refresh = jest.fn();
+    const setQuery = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const setFilters = jest.fn();
+    const wrapper = mount(
+      <SearchBar
+        refresh={refresh}
+        page="dashboard"
+        query="test"
+        setQuery={setQuery}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        filters={[]}
+        setFilters={setFilters}
+        appConfigs={[]}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper
+      .find('input[data-test-subj="search-bar-input-box"]')
+      .simulate('change', { target: { value: 'queryTest' } });
+
+    clock.tick(100);
+    expect(setQuery).toBeCalledWith('queryTest');
+  });
+});
diff --git a/public/components/trace_analytics/components/common/color_palette.ts b/public/components/trace_analytics/components/common/color_palette.ts
new file mode 100644
index 0000000000..e07be70f9a
--- /dev/null
+++ b/public/components/trace_analytics/components/common/color_palette.ts
@@ -0,0 +1,314 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const serviceMapColorPalette = {
+  latency: [
+    '218, 214, 227',
+    '216, 212, 226',
+    '215, 209, 226',
+    '213, 207, 225',
+    '212, 205, 224',
+    '210, 202, 224',
+    '208, 200, 223',
+    '207, 198, 222',
+    '205, 195, 222',
+    '203, 193, 221',
+    '202, 191, 220',
+    '200, 189, 219',
+    '198, 186, 218',
+    '197, 184, 217',
+    '195, 182, 216',
+    '193, 180, 216',
+    '192, 177, 215',
+    '190, 175, 214',
+    '188, 173, 213',
+    '187, 171, 212',
+    '185, 169, 211',
+    '183, 166, 210',
+    '182, 164, 209',
+    '180, 162, 207',
+    '178, 160, 206',
+    '177, 158, 205',
+    '175, 155, 204',
+    '173, 153, 203',
+    '171, 151, 202',
+    '170, 149, 201',
+    '168, 147, 200',
+    '166, 145, 198',
+    '165, 143, 197',
+    '163, 140, 196',
+    '161, 138, 195',
+    '160, 136, 193',
+    '158, 134, 192',
+    '156, 132, 191',
+    '154, 130, 190',
+    '153, 128, 188',
+    '151, 126, 187',
+    '149, 124, 186',
+    '148, 122, 184',
+    '146, 120, 183',
+    '144, 118, 182',
+    '142, 116, 180',
+    '141, 114, 179',
+    '139, 111, 177',
+    '137, 109, 176',
+    '136, 107, 175',
+    '134, 105, 173',
+    '132, 103, 172',
+    '131, 101, 170',
+    '129, 99, 169',
+    '127, 97, 167',
+    '125, 95, 166',
+    '124, 93, 164',
+    '122, 91, 163',
+    '120, 90, 161',
+    '119, 88, 160',
+    '117, 86, 158',
+    '115, 84, 157',
+    '113, 82, 155',
+    '112, 80, 154',
+    '110, 78, 152',
+    '108, 76, 151',
+    '107, 74, 149',
+    '105, 72, 148',
+    '103, 70, 146',
+    '102, 68, 144',
+    '100, 66, 143',
+    '98, 64, 141',
+    '97, 63, 140',
+    '95, 61, 138',
+    '93, 59, 136',
+    '91, 57, 135',
+    '90, 55, 133',
+    '88, 53, 132',
+    '86, 51, 130',
+    '85, 49, 128',
+    '83, 47, 127',
+    '81, 46, 125',
+    '80, 44, 123',
+    '78, 42, 122',
+    '76, 40, 120',
+    '75, 38, 119',
+    '73, 36, 117',
+    '71, 34, 115',
+    '70, 32, 114',
+    '68, 31, 112',
+    '66, 29, 110',
+    '65, 27, 108',
+    '63, 25, 107',
+    '61, 23, 105',
+    '59, 21, 103',
+    '58, 19, 102',
+    '56, 17, 100',
+    '54, 15, 98',
+    '53, 12, 97',
+    '51, 10, 95',
+  ],
+  error_rate: [
+    '239, 224, 230',
+    '239, 222, 228',
+    '240, 219, 226',
+    '240, 217, 224',
+    '240, 214, 222',
+    '240, 212, 221',
+    '240, 209, 219',
+    '240, 207, 217',
+    '240, 204, 215',
+    '240, 202, 213',
+    '240, 200, 211',
+    '240, 197, 209',
+    '240, 195, 208',
+    '239, 192, 206',
+    '239, 190, 204',
+    '239, 188, 202',
+    '238, 185, 200',
+    '238, 183, 198',
+    '238, 181, 196',
+    '237, 178, 195',
+    '237, 176, 193',
+    '236, 174, 191',
+    '236, 172, 189',
+    '235, 169, 187',
+    '234, 167, 185',
+    '234, 165, 184',
+    '233, 163, 182',
+    '232, 160, 180',
+    '232, 158, 178',
+    '231, 156, 176',
+    '230, 154, 174',
+    '229, 151, 173',
+    '228, 149, 171',
+    '227, 147, 169',
+    '226, 145, 167',
+    '225, 143, 165',
+    '224, 141, 164',
+    '223, 139, 162',
+    '222, 136, 160',
+    '221, 134, 158',
+    '220, 132, 156',
+    '219, 130, 155',
+    '218, 128, 153',
+    '217, 126, 151',
+    '216, 124, 149',
+    '214, 122, 147',
+    '213, 120, 146',
+    '212, 118, 144',
+    '211, 116, 142',
+    '209, 114, 140',
+    '208, 112, 139',
+    '207, 110, 137',
+    '205, 108, 135',
+    '204, 106, 133',
+    '202, 104, 132',
+    '201, 102, 130',
+    '199, 100, 128',
+    '198, 98, 126',
+    '196, 96, 125',
+    '195, 95, 123',
+    '193, 93, 121',
+    '192, 91, 119',
+    '190, 89, 118',
+    '189, 87, 116',
+    '187, 85, 114',
+    '186, 84, 113',
+    '184, 82, 111',
+    '182, 80, 109',
+    '181, 78, 107',
+    '179, 76, 106',
+    '177, 75, 104',
+    '175, 73, 102',
+    '174, 71, 101',
+    '172, 70, 99',
+    '170, 68, 97',
+    '168, 66, 96',
+    '167, 65, 94',
+    '165, 63, 92',
+    '163, 61, 91',
+    '161, 60, 89',
+    '159, 58, 87',
+    '157, 56, 86',
+    '156, 55, 84',
+    '154, 53, 83',
+    '152, 52, 81',
+    '150, 50, 79',
+    '148, 49, 78',
+    '146, 47, 76',
+    '144, 46, 74',
+    '142, 44, 73',
+    '140, 43, 71',
+    '138, 41, 70',
+    '136, 40, 68',
+    '134, 38, 66',
+    '132, 37, 65',
+    '130, 35, 63',
+    '128, 34, 62',
+    '126, 33, 60',
+    '124, 31, 59',
+    '122, 30, 57',
+  ],
+  throughput: [
+    '216, 218, 225',
+    '214, 216, 225',
+    '211, 214, 226',
+    '209, 212, 226',
+    '206, 210, 226',
+    '204, 208, 226',
+    '202, 206, 226',
+    '199, 204, 226',
+    '197, 202, 226',
+    '195, 199, 226',
+    '193, 197, 226',
+    '190, 195, 225',
+    '188, 193, 225',
+    '186, 191, 225',
+    '184, 189, 224',
+    '181, 187, 224',
+    '179, 185, 223',
+    '177, 183, 223',
+    '175, 181, 222',
+    '173, 179, 221',
+    '171, 177, 221',
+    '168, 175, 220',
+    '166, 173, 219',
+    '164, 171, 218',
+    '162, 169, 218',
+    '160, 167, 217',
+    '158, 165, 216',
+    '156, 164, 215',
+    '154, 162, 214',
+    '152, 160, 213',
+    '150, 158, 212',
+    '148, 156, 211',
+    '146, 154, 210',
+    '144, 152, 209',
+    '142, 150, 208',
+    '140, 148, 207',
+    '138, 146, 206',
+    '136, 144, 205',
+    '134, 142, 204',
+    '132, 140, 203',
+    '130, 138, 202',
+    '128, 137, 200',
+    '126, 135, 199',
+    '124, 133, 198',
+    '122, 131, 197',
+    '120, 129, 196',
+    '118, 127, 194',
+    '116, 125, 193',
+    '114, 123, 192',
+    '112, 122, 191',
+    '110, 120, 189',
+    '108, 118, 188',
+    '106, 116, 187',
+    '105, 114, 186',
+    '103, 112, 184',
+    '101, 110, 183',
+    '99, 109, 182',
+    '97, 107, 180',
+    '95, 105, 179',
+    '93, 103, 178',
+    '91, 101, 176',
+    '89, 100, 175',
+    '88, 98, 173',
+    '86, 96, 172',
+    '84, 94, 171',
+    '82, 92, 169',
+    '80, 91, 168',
+    '78, 89, 166',
+    '76, 87, 165',
+    '74, 85, 163',
+    '72, 84, 162',
+    '70, 82, 161',
+    '68, 80, 159',
+    '67, 78, 158',
+    '65, 77, 156',
+    '63, 75, 155',
+    '61, 73, 153',
+    '59, 72, 152',
+    '57, 70, 150',
+    '55, 68, 149',
+    '53, 66, 147',
+    '51, 65, 146',
+    '49, 63, 144',
+    '47, 61, 143',
+    '45, 60, 141',
+    '42, 58, 140',
+    '40, 56, 138',
+    '38, 55, 137',
+    '36, 53, 135',
+    '34, 51, 134',
+    '31, 50, 132',
+    '29, 48, 130',
+    '26, 47, 129',
+    '23, 45, 127',
+    '20, 43, 126',
+    '17, 42, 124',
+    '14, 40, 123',
+    '9, 39, 121',
+    '5, 37, 120',
+    '1, 36, 118',
+    
+    ],
+};
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
new file mode 100644
index 0000000000..62c0880734
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
@@ -0,0 +1,710 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Filter popover component renders filter popover 1`] = `
+<FilterEditPopover
+  closePopover={[MockFunction]}
+  filterFieldOptions={
+    Array [
+      Object {
+        "label": "traceGroup",
+      },
+      Object {
+        "label": "serviceName",
+      },
+      Object {
+        "label": "error",
+      },
+      Object {
+        "label": "status.message",
+      },
+      Object {
+        "label": "latency",
+      },
+    ]
+  }
+  index={0}
+  setFilter={[MockFunction]}
+>
+  <div
+    style={
+      Object {
+        "width": 400,
+      }
+    }
+  >
+    <button
+      style={
+        Object {
+          "bottom": 0,
+          "height": 0,
+          "marginLeft": -1000,
+          "position": "fixed",
+          "width": 0,
+        }
+      }
+    />
+    <EuiFlexGroup
+      gutterSize="s"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem
+          grow={6}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrow6"
+          >
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={false}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              label="Field"
+              labelType="label"
+            >
+              <div
+                className="euiFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  className="euiFormRow__labelWrapper"
+                >
+                  <EuiFormLabel
+                    className="euiFormRow__label"
+                    htmlFor="random_html_id"
+                    isFocused={false}
+                    type="label"
+                  >
+                    <label
+                      className="euiFormLabel euiFormRow__label"
+                      htmlFor="random_html_id"
+                    >
+                      Field
+                    </label>
+                  </EuiFormLabel>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <EuiComboBox
+                    async={false}
+                    compressed={false}
+                    fullWidth={false}
+                    id="random_html_id"
+                    isClearable={false}
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    options={
+                      Array [
+                        Object {
+                          "label": "traceGroup",
+                        },
+                        Object {
+                          "label": "serviceName",
+                        },
+                        Object {
+                          "label": "error",
+                        },
+                        Object {
+                          "label": "status.message",
+                        },
+                        Object {
+                          "label": "latency",
+                        },
+                      ]
+                    }
+                    placeholder="Select a field first"
+                    selectedOptions={Array []}
+                    singleSelection={
+                      Object {
+                        "asPlainText": true,
+                      }
+                    }
+                    sortMatchesBy="none"
+                  >
+                    <div
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      className="euiComboBox"
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      role="combobox"
+                    >
+                      <EuiComboBoxInput
+                        autoSizeInputRef={[Function]}
+                        compressed={false}
+                        fullWidth={false}
+                        hasSelectedOptions={false}
+                        id="random_html_id"
+                        inputRef={[Function]}
+                        isListOpen={false}
+                        noIcon={false}
+                        onChange={[Function]}
+                        onClick={[Function]}
+                        onCloseListClick={[Function]}
+                        onFocus={[Function]}
+                        onOpenListClick={[Function]}
+                        onRemoveOption={[Function]}
+                        placeholder="Select a field first"
+                        rootId={[Function]}
+                        searchValue=""
+                        selectedOptions={Array []}
+                        singleSelection={
+                          Object {
+                            "asPlainText": true,
+                          }
+                        }
+                        toggleButtonRef={[Function]}
+                        updatePosition={[Function]}
+                        value=""
+                      >
+                        <EuiFormControlLayout
+                          compressed={false}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "aria-label": "Open list of options",
+                              "data-test-subj": "comboBoxToggleListButton",
+                              "disabled": undefined,
+                              "onClick": [Function],
+                              "ref": [Function],
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                        >
+                          <div
+                            className="euiFormControlLayout"
+                          >
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <div
+                                className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                data-test-subj="comboBoxInput"
+                                onClick={[Function]}
+                                tabIndex={-1}
+                              >
+                                <p
+                                  className="euiComboBoxPlaceholder"
+                                >
+                                  Select a field first
+                                </p>
+                                <AutosizeInput
+                                  aria-controls=""
+                                  className="euiComboBox__input"
+                                  data-test-subj="comboBoxSearchInput"
+                                  id="random_html_id"
+                                  injectStyles={true}
+                                  inputRef={[Function]}
+                                  minWidth={1}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  role="textbox"
+                                  style={
+                                    Object {
+                                      "fontSize": 14,
+                                    }
+                                  }
+                                  value=""
+                                >
+                                  <div
+                                    className="euiComboBox__input"
+                                    style={
+                                      Object {
+                                        "display": "inline-block",
+                                        "fontSize": 14,
+                                      }
+                                    }
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      id="random_html_id"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "boxSizing": "content-box",
+                                          "width": "2px",
+                                        }
+                                      }
+                                      value=""
+                                    />
+                                    <div
+                                      style={
+                                        Object {
+                                          "height": 0,
+                                          "left": 0,
+                                          "overflow": "scroll",
+                                          "position": "absolute",
+                                          "top": 0,
+                                          "visibility": "hidden",
+                                          "whiteSpace": "pre",
+                                        }
+                                      }
+                                    />
+                                  </div>
+                                </AutosizeInput>
+                              </div>
+                              <EuiFormControlLayoutIcons
+                                compressed={false}
+                                icon={
+                                  Object {
+                                    "aria-label": "Open list of options",
+                                    "data-test-subj": "comboBoxToggleListButton",
+                                    "disabled": undefined,
+                                    "onClick": [Function],
+                                    "ref": [Function],
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
+                                }
+                              >
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <EuiFormControlLayoutCustomIcon
+                                    aria-label="Open list of options"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    iconRef={[Function]}
+                                    onClick={[Function]}
+                                    size="m"
+                                    type="arrowDown"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="m"
+                                        type="arrowDown"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </EuiComboBoxInput>
+                    </div>
+                  </EuiComboBox>
+                </div>
+              </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={5}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrow5"
+          >
+            <EuiFormRow
+              describedByIds={Array []}
+              display="row"
+              fullWidth={false}
+              hasChildLabel={true}
+              hasEmptyLabelSpace={false}
+              label="Operator"
+              labelType="label"
+            >
+              <div
+                className="euiFormRow"
+                id="random_html_id-row"
+              >
+                <div
+                  className="euiFormRow__labelWrapper"
+                >
+                  <EuiFormLabel
+                    className="euiFormRow__label"
+                    htmlFor="random_html_id"
+                    isFocused={false}
+                    type="label"
+                  >
+                    <label
+                      className="euiFormLabel euiFormRow__label"
+                      htmlFor="random_html_id"
+                    >
+                      Operator
+                    </label>
+                  </EuiFormLabel>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <EuiComboBox
+                    async={false}
+                    compressed={false}
+                    fullWidth={false}
+                    id="random_html_id"
+                    isClearable={false}
+                    isDisabled={true}
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    options={Array []}
+                    placeholder="Waiting"
+                    selectedOptions={Array []}
+                    singleSelection={
+                      Object {
+                        "asPlainText": true,
+                      }
+                    }
+                    sortMatchesBy="none"
+                  >
+                    <div
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      className="euiComboBox euiComboBox-isDisabled"
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      role="combobox"
+                    >
+                      <EuiComboBoxInput
+                        autoSizeInputRef={[Function]}
+                        compressed={false}
+                        fullWidth={false}
+                        hasSelectedOptions={false}
+                        id="random_html_id"
+                        inputRef={[Function]}
+                        isDisabled={true}
+                        isListOpen={false}
+                        noIcon={false}
+                        onChange={[Function]}
+                        onClick={[Function]}
+                        onCloseListClick={[Function]}
+                        onFocus={[Function]}
+                        onOpenListClick={[Function]}
+                        onRemoveOption={[Function]}
+                        placeholder="Waiting"
+                        rootId={[Function]}
+                        searchValue=""
+                        selectedOptions={Array []}
+                        singleSelection={
+                          Object {
+                            "asPlainText": true,
+                          }
+                        }
+                        toggleButtonRef={[Function]}
+                        updatePosition={[Function]}
+                        value=""
+                      >
+                        <EuiFormControlLayout
+                          compressed={false}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "aria-label": "Open list of options",
+                              "data-test-subj": "comboBoxToggleListButton",
+                              "disabled": true,
+                              "onClick": [Function],
+                              "ref": [Function],
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                        >
+                          <div
+                            className="euiFormControlLayout"
+                          >
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <div
+                                className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                data-test-subj="comboBoxInput"
+                                onClick={[Function]}
+                                tabIndex={-1}
+                              >
+                                <p
+                                  className="euiComboBoxPlaceholder"
+                                >
+                                  Waiting
+                                </p>
+                                <AutosizeInput
+                                  aria-controls=""
+                                  className="euiComboBox__input"
+                                  data-test-subj="comboBoxSearchInput"
+                                  disabled={true}
+                                  id="random_html_id"
+                                  injectStyles={true}
+                                  inputRef={[Function]}
+                                  minWidth={1}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onFocus={[Function]}
+                                  role="textbox"
+                                  style={
+                                    Object {
+                                      "fontSize": 14,
+                                    }
+                                  }
+                                  value=""
+                                >
+                                  <div
+                                    className="euiComboBox__input"
+                                    style={
+                                      Object {
+                                        "display": "inline-block",
+                                        "fontSize": 14,
+                                      }
+                                    }
+                                  >
+                                    <input
+                                      aria-controls=""
+                                      data-test-subj="comboBoxSearchInput"
+                                      disabled={true}
+                                      id="random_html_id"
+                                      onBlur={[Function]}
+                                      onChange={[Function]}
+                                      onFocus={[Function]}
+                                      role="textbox"
+                                      style={
+                                        Object {
+                                          "boxSizing": "content-box",
+                                          "width": "2px",
+                                        }
+                                      }
+                                      value=""
+                                    />
+                                    <div
+                                      style={
+                                        Object {
+                                          "height": 0,
+                                          "left": 0,
+                                          "overflow": "scroll",
+                                          "position": "absolute",
+                                          "top": 0,
+                                          "visibility": "hidden",
+                                          "whiteSpace": "pre",
+                                        }
+                                      }
+                                    />
+                                  </div>
+                                </AutosizeInput>
+                              </div>
+                              <EuiFormControlLayoutIcons
+                                compressed={false}
+                                icon={
+                                  Object {
+                                    "aria-label": "Open list of options",
+                                    "data-test-subj": "comboBoxToggleListButton",
+                                    "disabled": true,
+                                    "onClick": [Function],
+                                    "ref": [Function],
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
+                                }
+                              >
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                >
+                                  <EuiFormControlLayoutCustomIcon
+                                    aria-label="Open list of options"
+                                    data-test-subj="comboBoxToggleListButton"
+                                    disabled={true}
+                                    iconRef={[Function]}
+                                    onClick={[Function]}
+                                    size="m"
+                                    type="arrowDown"
+                                  >
+                                    <button
+                                      aria-label="Open list of options"
+                                      className="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                                      data-test-subj="comboBoxToggleListButton"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="m"
+                                        type="arrowDown"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </EuiComboBoxInput>
+                    </div>
+                  </EuiComboBox>
+                </div>
+              </div>
+            </EuiFormRow>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <EuiFlexGroup
+      gutterSize="s"
+      justifyContent="flexEnd"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <EuiButtonEmpty
+              data-test-subj="filter-popover-cancel-button"
+              onClick={[MockFunction]}
+            >
+              <button
+                className="euiButtonEmpty euiButtonEmpty--primary"
+                data-test-subj="filter-popover-cancel-button"
+                disabled={false}
+                onClick={[MockFunction]}
+                type="button"
+              >
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="left"
+                  iconSize="m"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
+                >
+                  <span
+                    className="euiButtonContent euiButtonEmpty__content"
+                  >
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Cancel
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <EuiButton
+              disabled={true}
+              fill={true}
+              onClick={[Function]}
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                disabled={true}
+                element="button"
+                fill={true}
+                isDisabled={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  disabled={true}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <span
+                        className="euiButton__text"
+                      >
+                        Save
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </div>
+</FilterEditPopover>
+`;
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap
new file mode 100644
index 0000000000..48b5ff946e
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap
@@ -0,0 +1,209 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Filter helper functions renders range field filter 1`] = `
+Array [
+  <EuiSpacer
+    size="s"
+  >
+    <div
+      className="euiSpacer euiSpacer--s"
+    />
+  </EuiSpacer>,
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    label="Value"
+    labelType="label"
+  >
+    <div
+      className="euiFormRow"
+      id="random_html_id-row"
+    >
+      <div
+        className="euiFormRow__labelWrapper"
+      >
+        <EuiFormLabel
+          className="euiFormRow__label"
+          htmlFor="random_html_id"
+          isFocused={false}
+          type="label"
+        >
+          <label
+            className="euiFormLabel euiFormRow__label"
+            htmlFor="random_html_id"
+          >
+            Value
+          </label>
+        </EuiFormLabel>
+      </div>
+      <div
+        className="euiFormRow__fieldWrapper"
+      >
+        <EuiFormControlLayoutDelimited
+          endControl={
+            <input
+              className="euiFieldText"
+              onChange={[Function]}
+              placeholder="End of range"
+              type="string"
+              value="100"
+            />
+          }
+          id="random_html_id"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          startControl={
+            <input
+              className="euiFieldText"
+              onChange={[Function]}
+              placeholder="Start of range"
+              type="string"
+              value="0"
+            />
+          }
+        >
+          <EuiFormControlLayout
+            className="euiFormControlLayoutDelimited"
+            id="random_html_id"
+            onBlur={[Function]}
+            onFocus={[Function]}
+          >
+            <div
+              className="euiFormControlLayout euiFormControlLayoutDelimited"
+              id="random_html_id"
+              onBlur={[Function]}
+              onFocus={[Function]}
+            >
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  className="euiFieldText euiFormControlLayoutDelimited__input"
+                  onChange={[Function]}
+                  placeholder="Start of range"
+                  type="string"
+                  value="0"
+                />
+                <EuiText
+                  className="euiFormControlLayoutDelimited__delimeter"
+                  color="subdued"
+                  size="s"
+                >
+                  <div
+                    className="euiText euiText--small euiFormControlLayoutDelimited__delimeter"
+                  >
+                    <EuiTextColor
+                      color="subdued"
+                      component="div"
+                    >
+                      <div
+                        className="euiTextColor euiTextColor--subdued"
+                      >
+                        →
+                      </div>
+                    </EuiTextColor>
+                  </div>
+                </EuiText>
+                <input
+                  className="euiFieldText euiFormControlLayoutDelimited__input"
+                  onChange={[Function]}
+                  placeholder="End of range"
+                  type="string"
+                  value="100"
+                />
+                <EuiFormControlLayoutIcons />
+              </div>
+            </div>
+          </EuiFormControlLayout>
+        </EuiFormControlLayoutDelimited>
+      </div>
+    </div>
+  </EuiFormRow>,
+]
+`;
+
+exports[`Filter helper functions renders textfield filter 1`] = `
+Array [
+  <EuiSpacer
+    size="s"
+  >
+    <div
+      className="euiSpacer euiSpacer--s"
+    />
+  </EuiSpacer>,
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    label="Value"
+    labelType="label"
+  >
+    <div
+      className="euiFormRow"
+      id="random_html_id-row"
+    >
+      <div
+        className="euiFormRow__labelWrapper"
+      >
+        <EuiFormLabel
+          className="euiFormRow__label"
+          htmlFor="random_html_id"
+          isFocused={false}
+          type="label"
+        >
+          <label
+            className="euiFormLabel euiFormRow__label"
+            htmlFor="random_html_id"
+          >
+            Value
+          </label>
+        </EuiFormLabel>
+      </div>
+      <div
+        className="euiFormRow__fieldWrapper"
+      >
+        <EuiFieldText
+          id="random_html_id"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          placeholder="Enter a value"
+          value={0}
+        >
+          <EuiFormControlLayout
+            fullWidth={false}
+            inputId="random_html_id"
+          >
+            <div
+              className="euiFormControlLayout"
+            >
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <EuiValidatableControl>
+                  <input
+                    className="euiFieldText"
+                    id="random_html_id"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    placeholder="Enter a value"
+                    type="text"
+                    value={0}
+                  />
+                </EuiValidatableControl>
+                <EuiFormControlLayoutIcons />
+              </div>
+            </div>
+          </EuiFormControlLayout>
+        </EuiFieldText>
+      </div>
+    </div>
+  </EuiFormRow>,
+]
+`;
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap
new file mode 100644
index 0000000000..86019861ce
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap
@@ -0,0 +1,182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Filter component renders filters 1`] = `
+<Filters
+  appConfigs={Array []}
+  filters={Array []}
+  page="dashboard"
+  setFilters={[MockFunction]}
+>
+  <EuiFlexGroup
+    alignItems="center"
+    gutterSize="xs"
+    responsive={false}
+    style={
+      Object {
+        "minHeight": 32,
+      }
+    }
+  >
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+      style={
+        Object {
+          "minHeight": 32,
+        }
+      }
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <GlobalFilterButton>
+            <EuiPopover
+              anchorPosition="rightUp"
+              button={
+                <EuiButtonIcon
+                  aria-label="Change all filters"
+                  iconType="filter"
+                  onClick={[Function]}
+                  title="Change all filters"
+                />
+              }
+              closePopover={[Function]}
+              display="inlineBlock"
+              hasArrow={true}
+              isOpen={false}
+              ownFocus={true}
+              panelPaddingSize="none"
+              withTitle={true}
+            >
+              <div
+                className="euiPopover euiPopover--anchorRightUp"
+                withTitle={true}
+              >
+                <div
+                  className="euiPopover__anchor"
+                >
+                  <EuiButtonIcon
+                    aria-label="Change all filters"
+                    iconType="filter"
+                    onClick={[Function]}
+                    title="Change all filters"
+                  >
+                    <button
+                      aria-label="Change all filters"
+                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                      disabled={false}
+                      onClick={[Function]}
+                      title="Change all filters"
+                      type="button"
+                    >
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="filter"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </div>
+              </div>
+            </EuiPopover>
+          </GlobalFilterButton>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <AddFilterButton>
+            <EuiPopover
+              anchorPosition="downLeft"
+              button={
+                <EuiButtonEmpty
+                  onClick={[Function]}
+                  size="xs"
+                >
+                  + Add filter
+                </EuiButtonEmpty>
+              }
+              closePopover={[Function]}
+              display="inlineBlock"
+              hasArrow={true}
+              isOpen={false}
+              ownFocus={true}
+              panelPaddingSize="m"
+              withTitle={true}
+            >
+              <div
+                className="euiPopover euiPopover--anchorDownLeft"
+                withTitle={true}
+              >
+                <div
+                  className="euiPopover__anchor"
+                >
+                  <EuiButtonEmpty
+                    onClick={[Function]}
+                    size="xs"
+                  >
+                    <button
+                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiButtonContent
+                        className="euiButtonEmpty__content"
+                        iconSide="left"
+                        iconSize="s"
+                        textProps={
+                          Object {
+                            "className": "euiButtonEmpty__text",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButtonEmpty__content"
+                        >
+                          <span
+                            className="euiButtonEmpty__text"
+                          >
+                            + Add filter
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonEmpty>
+                </div>
+              </div>
+            </EuiPopover>
+          </AddFilterButton>
+        </div>
+      </EuiFlexItem>
+    </div>
+  </EuiFlexGroup>
+</Filters>
+`;
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/filter_edit_popover.test.tsx b/public/components/trace_analytics/components/common/filters/__tests__/filter_edit_popover.test.tsx
new file mode 100644
index 0000000000..4d2b0f401c
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/__tests__/filter_edit_popover.test.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { FilterEditPopover } from '../filter_edit_popover';
+import { getFilterFields } from '../filter_helpers';
+
+describe('Filter popover component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders filter popover', () => {
+    const setFilter = jest.fn();
+    const closePopover = jest.fn();
+    const filterFieldOptions = getFilterFields('dashboard').map((field) => ({ label: field }));
+    const wrapper = mount(
+      <FilterEditPopover
+        filterFieldOptions={filterFieldOptions}
+        index={0}
+        setFilter={setFilter}
+        closePopover={closePopover}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper
+      .find('input')
+      .at(0)
+      .simulate('change', [{ label: 'traceGroup' }]);
+    wrapper
+      .find('input')
+      .at(1)
+      .simulate('change', [{ label: 'exists' }]);
+    wrapper.find('button[data-test-subj="filter-popover-cancel-button"]').simulate('click');
+
+    expect(closePopover).toBeCalled();
+
+    wrapper.find('button[data-test-subj="comboBoxToggleListButton"]').at(0).simulate('click');
+  });
+});
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/filter_helpers.test.tsx b/public/components/trace_analytics/components/common/filters/__tests__/filter_helpers.test.tsx
new file mode 100644
index 0000000000..9084e4207c
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/__tests__/filter_helpers.test.tsx
@@ -0,0 +1,111 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import {
+  getFilterFields,
+  getInvertedOperator,
+  getOperatorOptions,
+  getValidFilterFields,
+  getValueComponent,
+} from '../filter_helpers';
+
+describe('Filter helper functions', () => {
+  configure({ adapter: new Adapter() });
+
+  it('returns fields by page', () => {
+    const fields = getFilterFields('dashboard');
+    expect(fields).toEqual([
+      'traceGroup',
+      'serviceName',
+      'error',
+      'status.message',
+      'latency',
+    ]);
+  });
+
+  it('returns valid fields by page', () => {
+    const dashboardFields = getValidFilterFields('dashboard');
+    const servicesFields = getValidFilterFields('services');
+    expect(dashboardFields).toEqual([
+      'traceGroup',
+      'serviceName',
+      'error',
+      'status.message',
+      'latency',
+      'Latency percentile within trace group',
+    ]);
+    expect(servicesFields).toEqual([
+      'traceGroup',
+      'serviceName',
+      'error',
+      'status.message',
+      'latency',
+    ]);
+  });
+
+  it('returns inverted operators', () => {
+    const invertedBetween = getInvertedOperator('is between', true);
+    const invertedExist = getInvertedOperator('exists', true);
+    const invertedIs = getInvertedOperator('is', true);
+    expect(invertedBetween).toEqual('is not between');
+    expect(invertedExist).toEqual('does not exist');
+    expect(invertedIs).toEqual('is not');
+  });
+
+  it('returns operator options by field', () => {
+    const options = getOperatorOptions('durationInNanos');
+    expect(options).toEqual([
+      {
+        label: 'is',
+      },
+      {
+        label: 'is not',
+      },
+      {
+        label: 'is between',
+      },
+      {
+        label: 'is not between',
+      },
+      {
+        label: 'exists',
+      },
+      {
+        label: 'does not exist',
+      },
+    ]);
+  });
+
+  it('renders textfield filter', () => {
+    const setValue = jest.fn((v) => {});
+    const wrapper = mount(getValueComponent('serviceName', 'is', 0, setValue));
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper.find('input').simulate('change', { target: { value: '100' } });
+    expect(setValue).toBeCalledWith('100');
+  });
+
+  it('renders range field filter', () => {
+    const setValue = jest.fn((v) => {});
+    const wrapper = mount(
+      getValueComponent('latency', 'is not between', { from: '0', to: '100' }, setValue)
+    );
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper
+      .find('input')
+      .at(0)
+      .simulate('change', { target: { value: '50' } });
+    expect(setValue).toBeCalledWith({ from: '50', to: '100' });
+
+    wrapper
+      .find('input')
+      .at(1)
+      .simulate('change', { target: { value: '200' } });
+    expect(setValue).toBeCalledWith({ from: '0', to: '200' });
+  });
+});
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/filters.test.tsx b/public/components/trace_analytics/components/common/filters/__tests__/filters.test.tsx
new file mode 100644
index 0000000000..c66a15df59
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/__tests__/filters.test.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { Filters } from '../filters';
+
+describe('Filter component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders filters', () => {
+    const setFilters = jest.fn();
+    const wrapper = mount(
+      <Filters page="dashboard" filters={[]} setFilters={setFilters} appConfigs={[]} />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx b/public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx
new file mode 100644
index 0000000000..7f08827397
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx
@@ -0,0 +1,128 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiComboBox,
+  EuiComboBoxOptionOption,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiSpacer,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+import { FilterType } from './filters';
+import { getInvertedOperator, getOperatorOptions, getValueComponent } from './filter_helpers';
+
+export function FilterEditPopover(props: {
+  filter?: FilterType;
+  index: number;
+  setFilter: (newFilter: FilterType, index: number) => void;
+  closePopover: () => void;
+  filterFieldOptions: Array<{ label: string }>;
+}) {
+  const [selectedFieldOptions, setSelectedFieldOptions] = useState<
+    Array<EuiComboBoxOptionOption<string>>
+  >(props.filter ? [{ label: props.filter.field }] : []);
+  const [selectedOperatorOptions, setSelectedOperatorOptions] = useState<
+    Array<EuiComboBoxOptionOption<string>>
+  >(
+    props.filter
+      ? [{ label: getInvertedOperator(props.filter.operator, props.filter.inverted) }]
+      : []
+  );
+  const [filterValue, setFilterValue] = useState(props.filter?.value || '');
+
+  return (
+    <div style={{ width: 400 }}>
+      {/* invisible button workaround to prevent auto focus on context menu panel switch */}
+      <button style={{ width: 0, height: 0, position: 'fixed', marginLeft: -1000, bottom: 0 }} />
+      <EuiFlexGroup gutterSize="s">
+        <EuiFlexItem grow={6}>
+          <EuiFormRow label={'Field'}>
+            <EuiComboBox
+              placeholder="Select a field first"
+              isClearable={false}
+              options={props.filterFieldOptions}
+              selectedOptions={selectedFieldOptions}
+              onChange={(e) => {
+                setSelectedFieldOptions(e);
+                setSelectedOperatorOptions([]);
+                setFilterValue('');
+              }}
+              singleSelection={{ asPlainText: true }}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+        <EuiFlexItem grow={5}>
+          <EuiFormRow label={'Operator'}>
+            <EuiComboBox
+              placeholder={selectedFieldOptions.length === 0 ? 'Waiting' : 'Select'}
+              isClearable={false}
+              isDisabled={selectedFieldOptions.length === 0}
+              options={
+                selectedFieldOptions.length === 0
+                  ? []
+                  : getOperatorOptions(selectedFieldOptions[0].label)
+              }
+              selectedOptions={selectedOperatorOptions}
+              onChange={(e) => {
+                setSelectedOperatorOptions(e);
+                setFilterValue('');
+              }}
+              singleSelection={{ asPlainText: true }}
+            />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      {selectedOperatorOptions.length > 0 &&
+        getValueComponent(
+          selectedFieldOptions[0].label,
+          selectedOperatorOptions[0].label,
+          filterValue,
+          setFilterValue
+        )}
+      <EuiSpacer size="m" />
+      <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty
+            data-test-subj="filter-popover-cancel-button"
+            onClick={props.closePopover}
+          >
+            Cancel
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            fill
+            disabled={
+              selectedFieldOptions.length === 0 ||
+              selectedOperatorOptions.length === 0 ||
+              (filterValue.length === 0 && !selectedOperatorOptions[0]?.label?.includes('exist'))
+            }
+            onClick={() => {
+              props.closePopover();
+              props.setFilter(
+                {
+                  field: selectedFieldOptions[0].label,
+                  operator: selectedOperatorOptions[0].label,
+                  value: selectedOperatorOptions[0].label.includes('exist')
+                    ? 'exists'
+                    : filterValue,
+                  inverted: selectedOperatorOptions[0].label.includes('not'),
+                  disabled: props.filter ? props.filter.disabled : false,
+                },
+                props.index
+              );
+            }}
+          >
+            Save
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
+}
diff --git a/public/components/trace_analytics/components/common/filters/filter_helpers.tsx b/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
new file mode 100644
index 0000000000..1410bfea00
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
@@ -0,0 +1,221 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiComboBox,
+  EuiFieldText,
+  EuiFormControlLayoutDelimited,
+  EuiFormRow,
+  EuiSpacer,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React from 'react';
+
+const getFields = (page: 'dashboard' | 'traces' | 'services' | 'app') =>
+  ({
+    dashboard: ['traceGroup', 'serviceName', 'error', 'status.message', 'latency'],
+    traces: ['traceId', 'traceGroup', 'serviceName', 'error', 'status.message', 'latency'],
+    services: ['traceGroup', 'serviceName', 'error', 'status.message', 'latency'],
+    app: ['traceId', 'traceGroup', 'serviceName'],
+  }[page]);
+// filters will take effect and can be manually added
+export const getFilterFields = (page: 'dashboard' | 'traces' | 'services' | 'app') => getFields(page);
+// filters will take effect
+export const getValidFilterFields = (page: 'dashboard' | 'traces' | 'services' | 'app') => {
+  const fields = getFields(page);
+  if (page !== 'services') return [...fields, 'Latency percentile within trace group'];
+  return fields;
+};
+
+const getType = (field: string): string | null => {
+  const typeMapping = {
+    attributes: {
+      host: {
+        port: 'long',
+      },
+      http: {
+        response_content_length: 'long',
+        status_code: 'long',
+      },
+      net: {
+        port: 'long',
+      },
+    },
+    attributes_host: {
+      port: 'long',
+    },
+    attributes_http: {
+      response_content_length: 'long',
+      status_code: 'long',
+    },
+    attributes_net: {
+      port: 'long',
+    },
+    durationInNanos: 'long',
+    latency: 'long',
+    endTime: 'date_nanos',
+    startTime: 'date_nanos',
+  };
+  const type = _.get(typeMapping, field, 'keyword');
+  return typeof type === 'string' ? type : null;
+};
+
+export const getInvertedOperator = (operator: string, inverted: boolean) => {
+  if (operator.includes('between')) return inverted ? 'is not between' : 'is between';
+  else if (operator.includes('exist')) return inverted ? 'does not exist' : 'exists';
+  else if (operator === 'is' || operator === 'is not') return inverted ? 'is not' : 'is';
+};
+
+export const getOperatorOptions = (field: string) => {
+  const type = getType(field);
+  const operatorMapping = {
+    long: [
+      {
+        label: 'is between',
+      },
+      {
+        label: 'is not between',
+      },
+    ],
+    date_nanos: [
+      {
+        label: 'is between',
+      },
+      {
+        label: 'is not between',
+      },
+    ],
+    keyword: [],
+    default_first: [
+      {
+        label: 'is',
+      },
+      {
+        label: 'is not',
+      },
+    ],
+    default_last: [
+      {
+        label: 'exists',
+      },
+      {
+        label: 'does not exist',
+      },
+    ],
+  };
+  const operators = [
+    ...operatorMapping.default_first,
+    ..._.get(operatorMapping, type),
+    ...operatorMapping.default_last,
+  ];
+  return operators;
+};
+
+export const getValueComponent = (
+  field: string,
+  operator: string,
+  value: any,
+  setValue: (v: any) => void
+) => {
+  const textField = (
+    <>
+      <EuiSpacer size="s" />
+      <EuiFormRow label={'Value'}>
+        <EuiFieldText
+          placeholder="Enter a value"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </EuiFormRow>
+    </>
+  );
+
+  const getRangeField = () => {
+    const getFromValue = () => {
+      if (value?.from) {
+        return value.from.includes('\u221E') ? '' : value.from;
+      }
+      return '';
+    };
+    const getToValue = () => {
+      if (value?.to) {
+        return value.to.includes('\u221E') ? '' : value.to;
+      }
+      return '';
+    };
+    const setFromValue = (from: string) => {
+      setValue({ from: from || '-\u221E', to: getToValue() || '\u221E' });
+    };
+    const setToValue = (to: string) => {
+      setValue({ from: getFromValue() || '-\u221E', to: to || '\u221E' });
+    };
+    return (
+      <>
+        <EuiSpacer size="s" />
+        <EuiFormRow label={'Value'}>
+          <EuiFormControlLayoutDelimited
+            startControl={
+              <input
+                type="string"
+                placeholder="Start of range"
+                className="euiFieldText"
+                value={getFromValue()}
+                onChange={(e) => setFromValue(e.target.value)}
+              />
+            }
+            endControl={
+              <input
+                type="string"
+                placeholder="End of range"
+                className="euiFieldText"
+                value={getToValue()}
+                onChange={(e) => setToValue(e.target.value)}
+              />
+            }
+          />
+        </EuiFormRow>
+      </>
+    );
+  };
+
+  const getComboBoxField = () => {
+    return (
+      <>
+        <EuiSpacer size="s" />
+        <EuiFormRow label={'Value'}>
+          <EuiComboBox
+            placeholder="Select a value"
+            options={[
+              {
+                label: 'true',
+              },
+              {
+                label: 'false',
+              },
+            ]}
+            onChange={setValue}
+            selectedOptions={value || []}
+            singleSelection={true}
+          />
+        </EuiFormRow>
+      </>
+    );
+  };
+
+  if (field === 'error' && (operator === 'is' || operator === 'is not')) {
+    return getComboBoxField();
+  }
+
+  const valueMapping = {
+    is: textField,
+    'is not': textField,
+    'is between': getRangeField(),
+    'is not between': getRangeField(),
+    exists: null,
+    'does not exist': null,
+  };
+
+  return valueMapping[operator];
+};
diff --git a/public/components/trace_analytics/components/common/filters/filters.tsx b/public/components/trace_analytics/components/common/filters/filters.tsx
new file mode 100644
index 0000000000..d5a296b151
--- /dev/null
+++ b/public/components/trace_analytics/components/common/filters/filters.tsx
@@ -0,0 +1,320 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiBadge,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiContextMenu,
+  EuiContextMenuPanelDescriptor,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPopover,
+  EuiPopoverTitle,
+  EuiTextColor,
+} from '@elastic/eui';
+import React, { useMemo, useState } from 'react';
+import { FilterEditPopover } from './filter_edit_popover';
+import { getFilterFields, getValidFilterFields } from './filter_helpers';
+
+export interface FilterType {
+  field: string;
+  operator: string;
+  value: any;
+  inverted: boolean;
+  disabled: boolean;
+  custom?: any;
+  locked?: boolean;
+}
+
+export interface FiltersProps {
+  filters: FilterType[];
+  appConfigs?: FilterType[];
+  setFilters: (filters: FilterType[]) => void;
+}
+
+interface FiltersOwnProps extends FiltersProps {
+  page: 'dashboard' | 'traces' | 'services' | 'app';
+}
+
+export function Filters(props: FiltersOwnProps) {
+  // set a filter at an index. if newFilter doesn't exist, remove filter at the index
+  // if index doesn't exist, append newFilter to the end
+  const setFilter = (newFilter: FilterType, index: number) => {
+    const newFilters = [...props.filters];
+    if (newFilter) newFilters.splice(index, 1, newFilter);
+    else newFilters.splice(index, 1);
+    props.setFilters(newFilters);
+  };
+
+  const validFilterFields = useMemo(() => getValidFilterFields(props.page), [props.page]);
+  const filterFieldOptions = useMemo(
+    () => getFilterFields(props.page).map((field) => ({ label: field })),
+    [props.page]
+  );
+
+  const globalPopoverPanels = [
+    {
+      id: 0,
+      title: 'Change all filters',
+      items: [
+        {
+          name: 'Enable all',
+          icon: <EuiIcon type="eye" size="m" />,
+          onClick: () => {
+            props.setFilters(
+              props.filters.map((filter) => ({
+                ...filter,
+                disabled: filter.locked ? filter.disabled : false,
+              }))
+            );
+          },
+        },
+        {
+          name: 'Disable all',
+          icon: <EuiIcon type="eyeClosed" size="m" />,
+          onClick: () => {
+            props.setFilters(
+              props.filters.map((filter) => ({
+                ...filter,
+                disabled: filter.locked ? filter.disabled : true,
+              }))
+            );
+          },
+        },
+        {
+          name: 'Invert inclusion',
+          icon: <EuiIcon type="invert" size="m" />,
+          onClick: () => {
+            props.setFilters(
+              // if filter.custom.query exists, it's a customized filter and "inverted" is alwasy false
+              props.filters.map((filter) => ({
+                ...filter,
+                inverted: filter.locked
+                  ? filter.inverted
+                  : filter.custom?.query
+                  ? false
+                  : !filter.inverted,
+              }))
+            );
+          },
+        },
+        {
+          name: 'Invert enabled/disabled',
+          icon: <EuiIcon type="eye" size="m" />,
+          onClick: () => {
+            props.setFilters(
+              props.filters.map((filter) => ({
+                ...filter,
+                disabled: filter.locked ? filter.disabled : !filter.disabled,
+              }))
+            );
+          },
+        },
+        {
+          name: 'Remove all',
+          icon: <EuiIcon type="trash" size="m" />,
+          onClick: () => {
+            props.setFilters([]);
+          },
+        },
+      ],
+    },
+  ];
+
+  const getFilterPopoverPanels = (
+    filter: FilterType,
+    index: number,
+    closePopover: () => void
+  ): EuiContextMenuPanelDescriptor[] => [
+    {
+      id: 0,
+      items: [
+        {
+          name: 'Edit filter',
+          icon: <EuiIcon type="invert" size="m" />,
+          disabled: !!filter.custom?.query || validFilterFields.indexOf(filter.field) === -1,
+          panel: 1,
+        },
+        {
+          name: `${filter.inverted ? 'Include' : 'Exclude'} results`,
+          icon: <EuiIcon type={filter.inverted ? 'plusInCircle' : 'minusInCircle'} size="m" />,
+          disabled: !!filter.custom?.query || validFilterFields.indexOf(filter.field) === -1,
+          onClick: () => {
+            filter.inverted = !filter.inverted;
+            setFilter(filter, index);
+          },
+        },
+        {
+          name: filter.disabled ? 'Re-enable' : 'Temporarily disable',
+          icon: <EuiIcon type={filter.disabled ? 'eye' : 'eyeClosed'} size="m" />,
+          disabled: validFilterFields.indexOf(filter.field) === -1,
+          onClick: () => {
+            filter.disabled = !filter.disabled;
+            setFilter(filter, index);
+          },
+        },
+        {
+          name: 'Delete',
+          icon: <EuiIcon data-test-subj="deleteFilterIcon" type="trash" size="m" />,
+          onClick: () => setFilter(null, index),
+        },
+      ],
+    },
+    {
+      id: 1,
+      width: 430,
+      title: 'Edit filter',
+      content: (
+        <div style={{ margin: 15 }}>
+          <FilterEditPopover
+            filterFieldOptions={filterFieldOptions}
+            filter={filter}
+            index={index}
+            setFilter={setFilter}
+            closePopover={closePopover}
+          />
+        </div>
+      ),
+    },
+  ];
+
+  const GlobalFilterButton = () => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    return (
+      <EuiPopover
+        isOpen={isPopoverOpen}
+        closePopover={() => setIsPopoverOpen(false)}
+        button={
+          <EuiButtonIcon
+            onClick={() => setIsPopoverOpen(true)}
+            iconType="filter"
+            title="Change all filters"
+            aria-label="Change all filters"
+          />
+        }
+        anchorPosition="rightUp"
+        panelPaddingSize="none"
+        withTitle
+      >
+        <EuiContextMenu initialPanelId={0} panels={globalPopoverPanels} />
+      </EuiPopover>
+    );
+  };
+
+  const AddFilterButton = () => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const button = (
+      <EuiButtonEmpty
+        size="xs"
+        onClick={() => {
+          setIsPopoverOpen(true);
+        }}
+      >
+        + Add filter
+      </EuiButtonEmpty>
+    );
+
+    return (
+      <EuiPopover
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={() => setIsPopoverOpen(false)}
+        anchorPosition="downLeft"
+        withTitle
+      >
+        <EuiPopoverTitle>{'Add filter'}</EuiPopoverTitle>
+        <FilterEditPopover
+          filterFieldOptions={filterFieldOptions}
+          index={props.filters.length}
+          setFilter={setFilter}
+          closePopover={() => setIsPopoverOpen(false)}
+        />
+      </EuiPopover>
+    );
+  };
+
+  const renderFilters = () => {
+    const FilterBadge = ({ filter, index }: { filter: FilterType; index: number }) => {
+      const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+      const disabled = filter.locked || filter.disabled;
+      const className =
+        'globalFilterItem' +
+        (disabled ? ' globalFilterItem-isDisabled' : '') +
+        (filter.inverted ? ' globalFilterItem-isExcluded' : '');
+      const value =
+        typeof filter.value === 'string'
+          ? filter.value
+          : Array.isArray(filter.value)  // combo box
+          ? filter.value[0].label
+          : `${filter.value.from} to ${filter.value.to}`;  // range selector
+      const filterLabel = filter.inverted ? (
+        <>
+          <EuiTextColor color={disabled ? 'default' : 'danger'}>{'NOT '}</EuiTextColor>
+          <EuiTextColor color="default">{`${filter.field}: ${value}`}</EuiTextColor>
+        </>
+      ) : (
+        `${filter.field}: ${value}`
+      );
+
+      const badge = (
+        <EuiBadge
+          className={className}
+          onClick={() => setIsPopoverOpen(true)}
+          onClickAriaLabel="Open filter settings"
+          color={disabled ? '#e7e9f0' : 'hollow'}
+          iconType="cross"
+          iconSide="right"
+          iconOnClick={() => {
+            setFilter(null, index);
+          }}
+          iconOnClickAriaLabel="Remove filter"
+          data-test-subj="filterBadge"
+        >
+          {filterLabel}
+        </EuiBadge>
+      );
+      return (
+        <EuiFlexItem grow={false} key={`filter-${index}`}>
+          <EuiPopover
+            data-test-subj={`${filter.value}FilterBadge`}
+            isOpen={isPopoverOpen}
+            closePopover={() => setIsPopoverOpen(false)}
+            panelPaddingSize="none"
+            button={badge}
+          >
+            <EuiContextMenu
+              initialPanelId={0}
+              panels={getFilterPopoverPanels(filter, index, () => setIsPopoverOpen(false))}
+            />
+          </EuiPopover>
+        </EuiFlexItem>
+      );
+    };
+
+    return (
+      <>
+        {props.filters.length > 0
+          ? props.filters.map((filter, i) => <FilterBadge filter={filter} index={i} key={i} />)
+          : null}
+      </>
+    );
+  };
+
+  const filterComponents = useMemo(() => renderFilters(), [props.filters]);
+
+  return (
+    <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false} style={{ minHeight: 32 }}>
+      <EuiFlexItem grow={false}>
+        <GlobalFilterButton />
+      </EuiFlexItem>
+      {filterComponents}
+      <EuiFlexItem grow={false}>
+        <AddFilterButton />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/public/components/trace_analytics/components/common/helper_functions.tsx b/public/components/trace_analytics/components/common/helper_functions.tsx
new file mode 100644
index 0000000000..04e48f6b15
--- /dev/null
+++ b/public/components/trace_analytics/components/common/helper_functions.tsx
@@ -0,0 +1,431 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable radix */
+
+import dateMath from '@elastic/datemath';
+import { EuiButton, EuiEmptyPrompt, EuiSpacer, EuiText } from '@elastic/eui';
+import { SpacerSize } from '@elastic/eui/src/components/spacer/spacer';
+import { isEmpty, round } from 'lodash';
+import React from 'react';
+import {
+  DATA_PREPPER_INDEX_NAME,
+  DATA_PREPPER_SERVICE_INDEX_NAME,
+  TRACE_ANALYTICS_DOCUMENTATION_LINK,
+} from '../../../../../common/constants/trace_analytics';
+import { uiSettingsService } from '../../../../../common/utils';
+import { serviceMapColorPalette } from './color_palette';
+import { FilterType } from './filters/filters';
+import { ServiceObject } from './plots/service_map';
+
+export function PanelTitle({ title, totalItems }: { title: string; totalItems?: number }) {
+  return (
+    <EuiText size="m">
+      <span className="panel-title">{title}</span>
+      {totalItems === 0 || totalItems ? (
+        <span className="panel-title-count">{` (${totalItems})`}</span>
+      ) : null}
+    </EuiText>
+  );
+}
+
+export function NoMatchMessage(props: { size: SpacerSize }) {
+  return (
+    <>
+      <EuiSpacer size={props.size} />
+      <EuiEmptyPrompt
+        title={<h2>No matches</h2>}
+        body={
+          <EuiText>
+            No data matches the selected filter. Clear the filter and/or increase the time range to
+            see more results.
+          </EuiText>
+        }
+      />
+      <EuiSpacer size={props.size} />
+    </>
+  );
+}
+
+export function MissingConfigurationMessage() {
+  return (
+    <>
+      <EuiEmptyPrompt
+        title={<h2>Trace Analytics not set up</h2>}
+        body={
+          <EuiText>
+            {`The indices required for trace analytics (${DATA_PREPPER_INDEX_NAME} and ${DATA_PREPPER_SERVICE_INDEX_NAME}) do not exist or you do not have permission to access them.`}
+          </EuiText>
+        }
+        actions={
+          <EuiButton
+            color="primary"
+            iconSide="right"
+            iconType="popout"
+            onClick={() => window.open(TRACE_ANALYTICS_DOCUMENTATION_LINK, '_blank')}
+          >
+            Learn more
+          </EuiButton>
+        }
+      />
+    </>
+  );
+}
+
+export function renderBenchmark(value: number) {
+  if (typeof value !== 'number') return null;
+  const benchmarkColor = value === 0 ? '#9ea8a9' : value > 0 ? '#c23f25' : '#3f7e23';
+  const benchmarkArrow = value === 0 ? '-' : value > 0 ? '\u25B4' : '\u25BE';
+  return (
+    <EuiText size="s" style={{ color: benchmarkColor }}>
+      {`${Math.abs(value)}% ${benchmarkArrow}`}
+    </EuiText>
+  );
+}
+
+export function nanoToMilliSec(nano: number) {
+  if (typeof nano !== 'number') return 0;
+  return nano / 1000000;
+}
+
+export function milliToNanoSec(ms: number) {
+  if (typeof ms !== 'number') return 0;
+  return ms * 1000000;
+}
+
+export function getServiceMapScaleColor(
+  percent: number,
+  idSelected: 'latency' | 'error_rate' | 'throughput'
+) {
+  return serviceMapColorPalette[idSelected][Math.min(99, Math.max(0, Math.floor(percent * 100)))];
+}
+
+// construct vis-js graph from ServiceObject
+export function getServiceMapGraph(
+  map: ServiceObject,
+  idSelected: 'latency' | 'error_rate' | 'throughput',
+  ticks: number[],
+  currService?: string,
+  relatedServices?: string[]
+) {
+  if (!relatedServices) relatedServices = Object.keys(map);
+
+  const nodes = Object.keys(map).map((service) => {
+    const value = map[service][idSelected];
+    let styleOptions;
+    if (value || value === 0) {
+      const percent = (value - ticks[0]) / (ticks[ticks.length - 1] - ticks[0]);
+      const color = getServiceMapScaleColor(percent, idSelected);
+      styleOptions = {
+        borderWidth: 0,
+        color: relatedServices!.indexOf(service) >= 0 ? `rgba(${color}, 1)` : `rgba(${color}, 0.2)`,
+        font: {
+          color:
+            relatedServices!.indexOf(service) >= 0
+              ? `rgba(72, 122, 180, 1)`
+              : `rgba(72, 122, 180, 0.2)`,
+        },
+      };
+    } else {
+      // service nodes that are not matched under traceGroup filter
+      styleOptions = {
+        borderWidth: 1.5,
+        chosen: false,
+        color: {
+          border: '#DADADC',
+          background: '#FFFFFF',
+        },
+        shapeProperties: {
+          borderDashes: [2, 2],
+        },
+      };
+    }
+
+    let hover = service;
+    hover += `\n\nAverage latency: ${
+      map[service].latency! >= 0 ? map[service].latency + 'ms' : 'N/A'
+    }`;
+    hover += `\nError rate: ${
+      map[service].error_rate! >= 0 ? map[service].error_rate + '%' : 'N/A'
+    }`;
+    hover += `\nThroughput: ${map[service].throughput! >= 0 ? map[service].throughput : 'N/A'}`;
+    if (map[service].throughputPerMinute != null)
+      hover += ` (${map[service].throughputPerMinute} per minute)`;
+
+    return {
+      id: map[service].id,
+      label: service,
+      size: service === currService ? 30 : 15,
+      title: hover,
+      ...styleOptions,
+    };
+  });
+  const edges: Array<{ from: number; to: number; color: string }> = [];
+  const edgeColor = uiSettingsService.get('theme:darkMode') ? '255, 255, 255' : '0, 0, 0';
+  Object.keys(map).map((service) => {
+    map[service].targetServices
+      .filter((target) => map[target])
+      .map((target) => {
+        edges.push({
+          from: map[service].id,
+          to: map[target].id,
+          color:
+            relatedServices!.indexOf(service) >= 0 && relatedServices!.indexOf(target) >= 0
+              ? `rgba(${edgeColor}, 1)`
+              : `rgba(${edgeColor}, 0.2)`,
+        });
+      });
+  });
+  return { graph: { nodes, edges } };
+}
+
+// returns flattened targetResource as an array for all traceGroups
+export function getServiceMapTargetResources(map: ServiceObject, serviceName: string) {
+  return ([] as string[]).concat.apply(
+    [],
+    [...map[serviceName].traceGroups.map((traceGroup) => [...traceGroup.targetResource])]
+  );
+}
+
+export function calculateTicks(min: number, max: number, numTicks = 5): number[] {
+  if (min >= max) return calculateTicks(0, Math.max(1, max), numTicks);
+  min = Math.floor(min);
+  max = Math.ceil(max);
+
+  const range = max - min;
+  const minInterval = range / numTicks;
+  const magnitude = Math.pow(10, Math.floor(Math.log10(minInterval)));
+  const residue = Math.ceil(minInterval / magnitude);
+
+  let tick = magnitude;
+  if (residue > 5) tick *= 10;
+  else if (residue > 2) tick *= 5;
+  else if (residue > 1) tick *= 2;
+
+  let curr = Math.max(0, Math.floor((min - 1) / tick) * tick);
+  const ticks = [curr];
+  while (curr < max) {
+    curr = round(curr + tick, 1);
+    ticks.push(curr);
+  }
+
+  return ticks;
+}
+
+// calculates the minimum fixed_interval for date_histogram from time filter
+export const minFixedInterval = (startTime: string, endTime: string) => {
+  if (startTime?.length === 0 || endTime?.length === 0 || startTime === endTime) return '1d';
+  const momentStart = dateMath.parse(startTime)!;
+  const momentEnd = dateMath.parse(endTime, { roundUp: true })!;
+  const diffSeconds = momentEnd.unix() - momentStart.unix();
+
+  if (diffSeconds <= 1) return '1ms'; // less than 1 second
+  if (diffSeconds <= 60 * 2) return '1s'; // less than 2 minutes
+  if (diffSeconds <= 3600 * 2) return '1m'; // less than 2 hours
+  if (diffSeconds <= 86400 * 2) return '1h'; // less than 2 days
+  if (diffSeconds <= 86400 * 62) return '1d'; // less than 2 months
+  if (diffSeconds <= 86400 * 366) return '30d'; // less than 1 year
+  return '365d';
+};
+
+export const fixedIntervalToMilli = (fixedInterval: string) => {
+  return {
+    '1ms': 1,
+    '1s': 1000,
+    '1m': 60000,
+    '1h': 3600000,
+    '1d': 86400000,
+    '30d': 86400000 * 30,
+    '365d': 86400000 * 365,
+  }[fixedInterval];
+};
+
+export const fixedIntervalToTickFormat = (fixedInterval: string) => {
+  if (fixedInterval === '1d') return '%b %e, %Y';
+  if (fixedInterval === '30d') return '%b %Y';
+  if (fixedInterval === '365d') return '%Y';
+  return '';
+};
+
+export const getPercentileFilter = (
+  percentileMaps: Array<{ traceGroupName: string; durationFilter: { gte?: number; lte?: number } }>,
+  conditionString: string // >= 95th, < 95th
+): FilterType => {
+  const DSL: any = {
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+        minimum_should_match: 1,
+      },
+    },
+  };
+  percentileMaps.forEach((map) => {
+    DSL.query.bool.should.push({
+      bool: {
+        must: [
+          {
+            term: {
+              traceGroup: {
+                value: map.traceGroupName,
+              },
+            },
+          },
+          {
+            range: {
+              'traceGroupFields.durationInNanos': map.durationFilter,
+            },
+          },
+        ],
+      },
+    });
+  });
+  return {
+    field: 'Latency percentile within trace group',
+    operator: '',
+    value: conditionString,
+    inverted: false,
+    disabled: false,
+    custom: DSL,
+  };
+};
+
+export const filtersToDsl = (
+  filters: FilterType[],
+  query: string,
+  startTime: string,
+  endTime: string,
+  page?: string,
+  appConfigs: FilterType[] = []
+) => {
+  const DSL: any = {
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    custom: {
+      timeFilter: [],
+      serviceNames: [],
+      serviceNamesExclude: [],
+      traceGroup: [],
+      traceGroupExclude: [],
+      percentiles: {
+        query: {
+          bool: {
+            should: [],
+          },
+        },
+      },
+    },
+  };
+  const timeFilter = {
+    range: {
+      startTime: {
+        gte: startTime,
+        lte: endTime,
+      },
+    },
+  };
+  DSL.query.bool.must.push(timeFilter);
+  DSL.custom.timeFilter.push(timeFilter);
+  if (query.length > 0) {
+    DSL.query.bool.must.push({
+      query_string: {
+        query,
+      },
+    });
+  }
+
+  filters
+    .filter((filter) => !filter.disabled && !filter.locked)
+    .forEach((filter) => {
+      if (filter.custom?.query) {
+        // add percentile filter
+        DSL.query.bool.should.push(...filter.custom.query.bool.should);
+        DSL.custom.percentiles.query.bool.should.push(...filter.custom.query.bool.should);
+        DSL.query.bool.minimum_should_match = filter.custom.query.bool.minimum_should_match;
+        DSL.custom.percentiles.query.bool.minimum_should_match =
+          filter.custom.query.bool.minimum_should_match;
+        return;
+      }
+
+      let filterQuery = {};
+      let field = filter.field;
+      if (field === 'latency') field = 'traceGroupFields.durationInNanos';
+      else if (field === 'error') field = 'traceGroupFields.statusCode';
+      let value;
+
+      switch (filter.operator) {
+        case 'exists':
+        case 'does not exist':
+          filterQuery = {
+            exists: {
+              field,
+            },
+          };
+          break;
+
+        case 'is':
+        case 'is not':
+          value = filter.value;
+          // latency and error are not actual fields, need to convert first
+          if (field === 'traceGroupFields.durationInNanos') {
+            value = milliToNanoSec(value);
+          } else if (field === 'traceGroupFields.statusCode') {
+            value = value[0].label === 'true' ? '2' : '0';
+          }
+
+          filterQuery = {
+            term: {
+              [field]: value,
+            },
+          };
+          break;
+
+        case 'is between':
+        case 'is not between':
+          const range: { gte?: string; lte?: string } = {};
+          if (!filter.value.from.includes('\u221E')) range.gte = filter.value.from;
+          if (!filter.value.to.includes('\u221E')) range.lte = filter.value.to;
+          if (field === 'traceGroupFields.durationInNanos') {
+            if (range.lte) range.lte = milliToNanoSec(parseInt(range.lte || '')).toString();
+            if (range.gte) range.gte = milliToNanoSec(parseInt(range.gte || '')).toString();
+          }
+          filterQuery = {
+            range: {
+              [field]: range,
+            },
+          };
+          break;
+
+        default:
+          break;
+      }
+      DSL.query.bool[filter.inverted ? 'must_not' : 'must'].push(filterQuery);
+    });
+
+  if (page === 'app' && !isEmpty(appConfigs)) {
+    DSL.query.bool.minimum_should_match = 1;
+    appConfigs.forEach((config) => {
+      let appQuery = {};
+      const appField = config.field;
+      const appValue = config.value;
+      appQuery = {
+        term: {
+          [appField]: appValue,
+        },
+      };
+      DSL.query.bool.minimum_should_match = 1;
+      DSL.query.bool.should.push(appQuery);
+    });
+  }
+
+  return DSL;
+};
diff --git a/public/components/trace_analytics/components/common/legacy_route_helpers.ts b/public/components/trace_analytics/components/common/legacy_route_helpers.ts
new file mode 100644
index 0000000000..139456bf58
--- /dev/null
+++ b/public/components/trace_analytics/components/common/legacy_route_helpers.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { observabilityID } from "../../../../../common/constants/shared";
+
+export const convertLegacyTraceAnalyticsUrl = (location: Location)=> {
+  const pathname = location.pathname.replace('trace-analytics-dashboards', observabilityID);
+  const hash = `#/trace_analytics${location.hash.replace(/^#/, '/home')}${
+    location.hash.includes('?') ? location.search.replace(/^\?/, '&') : location.search
+  }`;
+  return pathname + hash;
+};
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/box_plt.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/box_plt.test.tsx.snap
new file mode 100644
index 0000000000..7d7595e665
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/box_plt.test.tsx.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Box plot component renders box plot 1`] = `
+<Fragment>
+  <EuiToolTip
+    content={
+      <EuiFlexGrid
+        columns={2}
+        gutterSize="s"
+        responsive={false}
+      >
+        <EuiFlexItem>
+          <EuiText
+            size="xs"
+            style={
+              Object {
+                "color": "#c9cbce",
+              }
+            }
+          >
+            <p>
+              Latency &lt;95 percentile
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText
+            size="xs"
+            style={
+              Object {
+                "color": "#c9cbce",
+              }
+            }
+          >
+            <p>
+              20ms - 50ms
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText
+            size="xs"
+            style={
+              Object {
+                "color": "#c9cbce",
+              }
+            }
+          >
+            <p>
+              Latency &gt;=95 percentile
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText
+            size="xs"
+            style={
+              Object {
+                "color": "#c9cbce",
+              }
+            }
+          >
+            <p>
+              50ms - 80ms
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGrid>
+    }
+    delay="regular"
+    onMouseOut={[Function]}
+    position="bottom"
+  >
+    <Plt
+      data={
+        Array [
+          Object {
+            "hoverinfo": "none",
+            "marker": Object {
+              "color": "rgba(0, 0, 0, 0)",
+            },
+            "orientation": "h",
+            "showlegend": false,
+            "type": "bar",
+            "width": 1,
+            "x": Array [
+              20,
+            ],
+            "y": Array [
+              0,
+            ],
+          },
+          Object {
+            "marker": Object {
+              "color": "#ffffff",
+              "line": Object {
+                "color": "#957ac9",
+                "width": 1,
+              },
+            },
+            "orientation": "h",
+            "type": "bar",
+            "width": 1,
+            "x": Array [
+              30,
+            ],
+            "y": Array [
+              0,
+            ],
+          },
+          Object {
+            "marker": Object {
+              "color": "#957ac9",
+              "line": Object {
+                "color": "#957ac9",
+                "width": 1,
+              },
+            },
+            "orientation": "h",
+            "type": "bar",
+            "width": 1,
+            "x": Array [
+              30,
+            ],
+            "y": Array [
+              0,
+            ],
+          },
+        ]
+      }
+      layout={
+        Object {
+          "height": 15,
+          "margin": Object {
+            "b": 0,
+            "l": 0,
+            "pad": 0,
+            "r": 0,
+            "t": 0,
+          },
+          "paper_bgcolor": "rgba(0, 0, 0, 0)",
+          "plot_bgcolor": "rgba(0, 0, 0, 0)",
+          "width": 250,
+          "xaxis": Object {
+            "fixedrange": true,
+            "range": Array [
+              0,
+              100,
+            ],
+            "showgrid": false,
+            "visible": false,
+          },
+          "yaxis": Object {
+            "fixedrange": true,
+            "range": Array [
+              -0.6,
+              0.6,
+            ],
+            "showgrid": false,
+            "visible": false,
+          },
+        }
+      }
+      onClickHandler={[Function]}
+      onHoverHandler={[Function]}
+    />
+  </EuiToolTip>
+</Fragment>
+`;
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/error_rate_plt_.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/error_rate_plt_.test.tsx.snap
new file mode 100644
index 0000000000..a996b25431
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/error_rate_plt_.test.tsx.snap
@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Error rate plot component renders error rate plot 1`] = `
+<Fragment>
+  <EuiPanel
+    style={
+      Object {
+        "minHeight": 308,
+        "minWidth": 433,
+      }
+    }
+  >
+    <PanelTitle
+      title="Trace error rate over time"
+    />
+    <EuiHorizontalRule
+      margin="m"
+    />
+    <Plt
+      data={
+        Array [
+          Object {
+            "hoverlabel": Object {
+              "align": "left",
+            },
+            "hovertemplate": "%{text}<br>Error rate: %{y}<extra></extra>",
+            "marker": Object {
+              "color": "#fad963",
+            },
+            "text": Array [
+              "Dec 19, 2019 16:00:00 - Dec 18, 2020 16:00:00",
+            ],
+            "type": "bar",
+            "x": Array [
+              1576800000000,
+            ],
+            "y": Array [
+              22.22,
+            ],
+          },
+        ]
+      }
+      layout={
+        Object {
+          "annotations": Array [
+            Object {
+              "arrowhead": 0,
+              "arrowwidth": 0.7,
+              "ax": 0,
+              "ay": -160,
+              "borderpad": 10,
+              "showarrow": true,
+              "text": "Now: 22.22%",
+              "x": 1576800000000,
+              "xref": "x",
+              "y": 0,
+              "yref": "y",
+            },
+          ],
+          "height": 217,
+          "margin": Object {
+            "b": 50,
+            "l": 57,
+            "pad": 4,
+            "r": 5,
+            "t": 30,
+          },
+          "showlegend": false,
+          "xaxis": Object {
+            "color": "#899195",
+            "fixedrange": true,
+            "showgrid": false,
+            "tickformat": "%Y",
+            "type": "date",
+            "visible": true,
+          },
+          "yaxis": Object {
+            "color": "#899195",
+            "fixedrange": true,
+            "gridcolor": "#d9d9d9",
+            "range": Array [
+              0,
+              26.663999999999998,
+            ],
+            "showgrid": true,
+            "ticksuffix": "%",
+            "title": Object {
+              "font": Object {
+                "size": 12,
+              },
+              "standoff": 10,
+              "text": "Error rate (%)",
+            },
+            "visible": true,
+          },
+        }
+      }
+      onClickHandler={[Function]}
+    />
+  </EuiPanel>
+</Fragment>
+`;
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/latency_trend_plt.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/latency_trend_plt.test.tsx.snap
new file mode 100644
index 0000000000..0acd3301f8
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/latency_trend_plt.test.tsx.snap
@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Latency trend plot component renders dash 1`] = `
+<div>
+  -
+</div>
+`;
+
+exports[`Latency trend plot component renders latency plot 1`] = `
+<Fragment>
+  <Plt
+    data={
+      Array [
+        Object {
+          "hoverlabel": Object {
+            "bgcolor": "#d7c2ff",
+          },
+          "hovertemplate": "%{x}<br>Average latency: %{y}<extra></extra>",
+          "line": Object {
+            "color": "#987dcb",
+          },
+          "marker": Object {
+            "color": "#987dcb",
+            "size": 8,
+          },
+          "mode": "lines+markers",
+          "type": "scatter",
+          "x": Array [
+            1605027600000,
+          ],
+          "y": Array [
+            284.47,
+          ],
+        },
+      ]
+    }
+    layout={
+      Object {
+        "annotations": Array [
+          Object {
+            "arrowhead": 0,
+            "arrowwidth": 0.7,
+            "ax": 0,
+            "ay": -140,
+            "borderpad": 10,
+            "showarrow": true,
+            "text": "Now: 284.47ms",
+            "x": 1605027600000,
+            "xref": "x",
+            "y": 0,
+            "yref": "y",
+          },
+        ],
+        "height": 200,
+        "margin": Object {
+          "b": 50,
+          "l": 50,
+          "pad": 0,
+          "r": 30,
+          "t": 30,
+        },
+        "width": 400,
+        "xaxis": Object {
+          "color": "#899195",
+          "showgrid": false,
+          "tickmode": "auto",
+          "type": "date",
+        },
+        "yaxis": Object {
+          "color": "#899195",
+          "gridcolor": "#d9d9d9",
+          "title": Object {
+            "font": Object {
+              "size": 12,
+            },
+            "text": "Hourly latency (ms)",
+          },
+        },
+      }
+    }
+  />
+</Fragment>
+`;
+
+exports[`Latency trend plot component renders line plot 1`] = `
+<Plt
+  data={
+    Array [
+      Object {
+        "hoverinfo": "none",
+        "line": Object {
+          "color": "#000000",
+          "width": 1,
+        },
+        "mode": "lines",
+        "type": "scatter",
+        "x": Array [
+          1605027600000,
+          1605027700000,
+        ],
+        "y": Array [
+          78.16,
+          100,
+        ],
+      },
+    ]
+  }
+  layout={
+    Object {
+      "height": 20,
+      "margin": Object {
+        "b": 0,
+        "l": 0,
+        "pad": 0,
+        "r": 0,
+        "t": 0,
+      },
+      "paper_bgcolor": "rgba(0, 0, 0, 0)",
+      "plot_bgcolor": "rgba(0, 0, 0, 0)",
+      "width": 60,
+      "xaxis": Object {
+        "fixedrange": true,
+        "showgrid": false,
+        "visible": false,
+      },
+      "yaxis": Object {
+        "fixedrange": true,
+        "range": Array [
+          0,
+          110.00000000000001,
+        ],
+        "showgrid": false,
+        "visible": false,
+      },
+    }
+  }
+/>
+`;
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
new file mode 100644
index 0000000000..ec80b8296d
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
@@ -0,0 +1,361 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Service map component renders service map 1`] = `
+<Fragment>
+  <EuiPanel>
+    <PanelTitle
+      title="Service map"
+    />
+    <EuiSpacer
+      size="m"
+    />
+    <EuiButtonGroup
+      buttonSize="s"
+      color="text"
+      idSelected="latency"
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "id": "latency",
+            "label": "Latency",
+          },
+          Object {
+            "id": "error_rate",
+            "label": "Error rate",
+          },
+          Object {
+            "id": "throughput",
+            "label": "Throughput",
+          },
+        ]
+      }
+    />
+    <EuiHorizontalRule
+      margin="m"
+    />
+    <EuiFlexGroup
+      alignItems="center"
+      gutterSize="s"
+    >
+      <EuiFlexItem
+        grow={false}
+      >
+        <EuiText>
+          Focus on
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiFieldSearch
+          compressed={false}
+          fullWidth={false}
+          incremental={false}
+          isClearable={true}
+          isInvalid={false}
+          isLoading={false}
+          onChange={[Function]}
+          onSearch={[Function]}
+          placeholder="Service name"
+          value=""
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiSpacer />
+    <EuiFlexGroup
+      gutterSize="none"
+      responsive={false}
+    >
+      <EuiFlexItem />
+      <EuiFlexItem
+        grow={false}
+      >
+        <ServiceMapScale
+          idSelected="latency"
+          serviceMap={
+            Object {
+              "analytics-service": Object {
+                "destServices": Array [
+                  "order",
+                  "inventory",
+                  "authentication",
+                  "payment",
+                  "recommendation",
+                ],
+                "error_rate": 0,
+                "id": 2,
+                "latency": 12.99,
+                "serviceName": "analytics-service",
+                "targetServices": Array [],
+                "throughput": 37,
+                "traceGroups": Array [
+                  Object {
+                    "targetResource": Array [
+                      "/logs",
+                    ],
+                    "traceGroup": "client_cancel_order",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "/logs",
+                    ],
+                    "traceGroup": "client_checkout",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "/logs",
+                    ],
+                    "traceGroup": "client_create_order",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "/logs",
+                    ],
+                    "traceGroup": "client_delivery_status",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "/logs",
+                    ],
+                    "traceGroup": "client_pay_order",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "/logs",
+                    ],
+                    "traceGroup": "load_main_screen",
+                  },
+                ],
+              },
+              "authentication": Object {
+                "destServices": Array [
+                  "frontend-client",
+                ],
+                "error_rate": 8.33,
+                "id": 6,
+                "latency": 139.09,
+                "serviceName": "authentication",
+                "targetServices": Array [
+                  "analytics-service",
+                  "recommendation",
+                ],
+                "throughput": 12,
+                "traceGroups": Array [
+                  Object {
+                    "targetResource": Array [
+                      "server_request_login",
+                    ],
+                    "traceGroup": "load_main_screen",
+                  },
+                ],
+              },
+              "database": Object {
+                "destServices": Array [
+                  "order",
+                  "inventory",
+                ],
+                "error_rate": 3.77,
+                "id": 3,
+                "latency": 49.54,
+                "serviceName": "database",
+                "targetServices": Array [],
+                "throughput": 53,
+                "traceGroups": Array [
+                  Object {
+                    "targetResource": Array [
+                      "cartEmpty",
+                    ],
+                    "traceGroup": "client_cancel_order",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "updateItem",
+                    ],
+                    "traceGroup": "client_checkout",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "addItemToCart",
+                    ],
+                    "traceGroup": "client_create_order",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "getCart",
+                    ],
+                    "traceGroup": "client_delivery_status",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "cartSold",
+                    ],
+                    "traceGroup": "client_pay_order",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "getIntentory",
+                    ],
+                    "traceGroup": "load_main_screen",
+                  },
+                ],
+              },
+              "frontend-client": Object {
+                "destServices": Array [],
+                "error_rate": 7.41,
+                "id": 4,
+                "latency": 207.71,
+                "serviceName": "frontend-client",
+                "targetServices": Array [
+                  "order",
+                  "payment",
+                  "authentication",
+                ],
+                "throughput": 27,
+                "traceGroups": Array [
+                  Object {
+                    "targetResource": Array [],
+                    "traceGroup": "client_cancel_order",
+                  },
+                  Object {
+                    "targetResource": Array [],
+                    "traceGroup": "client_checkout",
+                  },
+                  Object {
+                    "targetResource": Array [],
+                    "traceGroup": "client_create_order",
+                  },
+                  Object {
+                    "targetResource": Array [],
+                    "traceGroup": "client_delivery_status",
+                  },
+                  Object {
+                    "targetResource": Array [],
+                    "traceGroup": "client_pay_order",
+                  },
+                  Object {
+                    "targetResource": Array [],
+                    "traceGroup": "load_main_screen",
+                  },
+                ],
+              },
+              "inventory": Object {
+                "destServices": Array [
+                  "payment",
+                  "recommendation",
+                ],
+                "error_rate": 3.23,
+                "id": 5,
+                "latency": 183.52,
+                "serviceName": "inventory",
+                "targetServices": Array [
+                  "analytics-service",
+                  "database",
+                ],
+                "throughput": 31,
+                "traceGroups": Array [
+                  Object {
+                    "targetResource": Array [
+                      "update_inventory",
+                    ],
+                    "traceGroup": "client_checkout",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "read_inventory",
+                    ],
+                    "traceGroup": "load_main_screen",
+                  },
+                ],
+              },
+              "order": Object {
+                "destServices": Array [
+                  "frontend-client",
+                ],
+                "error_rate": 4.17,
+                "id": 1,
+                "latency": 90.1,
+                "serviceName": "order",
+                "targetServices": Array [
+                  "analytics-service",
+                  "database",
+                ],
+                "throughput": 48,
+                "traceGroups": Array [
+                  Object {
+                    "targetResource": Array [
+                      "clear_order",
+                    ],
+                    "traceGroup": "client_cancel_order",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "update_order",
+                    ],
+                    "traceGroup": "client_create_order",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "get_order",
+                    ],
+                    "traceGroup": "client_delivery_status",
+                  },
+                  Object {
+                    "targetResource": Array [
+                      "pay_order",
+                    ],
+                    "traceGroup": "client_pay_order",
+                  },
+                ],
+              },
+              "payment": Object {
+                "destServices": Array [
+                  "frontend-client",
+                ],
+                "error_rate": 9.09,
+                "id": 7,
+                "latency": 134.36,
+                "serviceName": "payment",
+                "targetServices": Array [
+                  "analytics-service",
+                  "inventory",
+                ],
+                "throughput": 11,
+                "traceGroups": Array [
+                  Object {
+                    "targetResource": Array [
+                      "payment",
+                    ],
+                    "traceGroup": "client_checkout",
+                  },
+                ],
+              },
+              "recommendation": Object {
+                "destServices": Array [
+                  "authentication",
+                ],
+                "error_rate": 6.25,
+                "id": 8,
+                "latency": 176.97,
+                "serviceName": "recommendation",
+                "targetServices": Array [
+                  "analytics-service",
+                  "inventory",
+                ],
+                "throughput": 16,
+                "traceGroups": Array [
+                  Object {
+                    "targetResource": Array [
+                      "recommend",
+                    ],
+                    "traceGroup": "load_main_screen",
+                  },
+                ],
+              },
+            }
+          }
+          ticks={Array []}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiPanel>
+</Fragment>
+`;
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map_scale.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map_scale.test.tsx.snap
new file mode 100644
index 0000000000..f89aac7e88
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map_scale.test.tsx.snap
@@ -0,0 +1,328 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Service map scale component renders service map scale plot 1`] = `
+<ServiceMapScale
+  idSelected="latency"
+  ticks={
+    Array [
+      0,
+      50,
+      100,
+      150,
+      200,
+      250,
+    ]
+  }
+>
+  <div
+    style={
+      Object {
+        "minHeight": 400,
+        "minWidth": 65,
+      }
+    }
+  >
+    <Plt
+      data={
+        Array [
+          Object {
+            "hoverinfo": "none",
+            "marker": Object {
+              "color": Array [
+                "rgb(218, 214, 227)",
+                "rgb(185, 169, 211)",
+                "rgb(151, 126, 187)",
+                "rgb(117, 86, 158)",
+                "rgb(83, 47, 127)",
+              ],
+            },
+            "orientation": "v",
+            "showlegend": false,
+            "type": "bar",
+            "width": 0.4,
+            "x": Array [
+              0,
+              0,
+              0,
+              0,
+              0,
+              0,
+            ],
+            "y": Array [
+              50,
+              50,
+              50,
+              50,
+              50,
+              50,
+            ],
+          },
+        ]
+      }
+      height="270px"
+      layout={
+        Object {
+          "height": 270,
+          "margin": Object {
+            "b": 10,
+            "l": 0,
+            "pad": 0,
+            "r": 60,
+            "t": 10,
+          },
+          "paper_bgcolor": "rgba(0, 0, 0, 0)",
+          "plot_bgcolor": "rgba(0, 0, 0, 0)",
+          "width": 77,
+          "xaxis": Object {
+            "fixedrange": true,
+            "range": Array [
+              -0.35,
+              0.35,
+            ],
+            "showgrid": false,
+            "showline": false,
+            "showticklabels": false,
+            "zeroline": false,
+          },
+          "yaxis": Object {
+            "fixedrange": true,
+            "range": Array [
+              0,
+              250,
+            ],
+            "showgrid": false,
+            "showline": false,
+            "showticklabels": true,
+            "side": "right",
+            "ticksuffix": "",
+            "ticktexts": Array [
+              0,
+              50,
+              100,
+              150,
+              200,
+              250,
+            ],
+            "tickvals": Array [
+              0,
+              50,
+              100,
+              150,
+              200,
+              250,
+            ],
+            "title": Object {
+              "standoff": 15,
+              "text": "Latency (ms)",
+            },
+            "zeroline": false,
+          },
+        }
+      }
+    >
+      <PlotlyComponent
+        config={
+          Object {
+            "displayModeBar": false,
+          }
+        }
+        data={
+          Array [
+            Object {
+              "hoverinfo": "none",
+              "marker": Object {
+                "color": Array [
+                  "rgb(218, 214, 227)",
+                  "rgb(185, 169, 211)",
+                  "rgb(151, 126, 187)",
+                  "rgb(117, 86, 158)",
+                  "rgb(83, 47, 127)",
+                ],
+              },
+              "orientation": "v",
+              "showlegend": false,
+              "type": "bar",
+              "width": 0.4,
+              "x": Array [
+                0,
+                0,
+                0,
+                0,
+                0,
+                0,
+              ],
+              "y": Array [
+                50,
+                50,
+                50,
+                50,
+                50,
+                50,
+              ],
+            },
+          ]
+        }
+        debug={false}
+        divId="explorerPlotComponent"
+        layout={
+          Object {
+            "autosize": true,
+            "barmode": "stack",
+            "height": 270,
+            "hovermode": "closest",
+            "legend": Object {
+              "orientation": "h",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 10,
+              "l": 0,
+              "pad": 0,
+              "r": 60,
+              "t": 10,
+            },
+            "paper_bgcolor": "rgba(0, 0, 0, 0)",
+            "plot_bgcolor": "rgba(0, 0, 0, 0)",
+            "showlegend": false,
+            "width": 77,
+            "xaxis": Object {
+              "fixedrange": true,
+              "range": Array [
+                -0.35,
+                0.35,
+              ],
+              "showgrid": false,
+              "showline": false,
+              "showticklabels": false,
+              "zeroline": false,
+            },
+            "yaxis": Object {
+              "fixedrange": true,
+              "range": Array [
+                0,
+                250,
+              ],
+              "showgrid": false,
+              "showline": false,
+              "showticklabels": true,
+              "side": "right",
+              "ticksuffix": "",
+              "ticktexts": Array [
+                0,
+                50,
+                100,
+                150,
+                200,
+                250,
+              ],
+              "tickvals": Array [
+                0,
+                50,
+                100,
+                150,
+                200,
+                250,
+              ],
+              "title": Object {
+                "standoff": 15,
+                "text": "Latency (ms)",
+              },
+              "zeroline": false,
+            },
+          }
+        }
+        style={
+          Object {
+            "height": "270px",
+            "width": "100%",
+          }
+        }
+        useResizeHandler={true}
+      >
+        <div
+          id="explorerPlotComponent"
+          style={
+            Object {
+              "height": "270px",
+              "width": "100%",
+            }
+          }
+        />
+      </PlotlyComponent>
+    </Plt>
+    <EuiSpacer>
+      <div
+        className="euiSpacer euiSpacer--l"
+      />
+    </EuiSpacer>
+    <EuiFlexGroup
+      gutterSize="none"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem
+          grow={false}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <img
+              alt="unmatched-node-legend"
+              src="file-stub"
+              style={
+                Object {
+                  "height": 40,
+                  "width": 40,
+                }
+              }
+            />
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+          style={
+            Object {
+              "marginLeft": -10,
+              "marginRight": -30,
+            }
+          }
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+            style={
+              Object {
+                "marginLeft": -10,
+                "marginRight": -30,
+              }
+            }
+          >
+            <EuiText
+              style={
+                Object {
+                  "color": "#808080",
+                  "fontSize": "14px",
+                  "transform": "rotate(-90deg)",
+                }
+              }
+            >
+              <div
+                className="euiText euiText--medium"
+                style={
+                  Object {
+                    "color": "#808080",
+                    "fontSize": "14px",
+                    "transform": "rotate(-90deg)",
+                  }
+                }
+              >
+                No match
+              </div>
+            </EuiText>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </div>
+</ServiceMapScale>
+`;
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/throughput_plt.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/throughput_plt.test.tsx.snap
new file mode 100644
index 0000000000..49b00d65e1
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/throughput_plt.test.tsx.snap
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Throughput plot component renders throughput plot 1`] = `
+<Fragment>
+  <EuiPanel
+    style={
+      Object {
+        "minHeight": 308,
+        "minWidth": 433,
+      }
+    }
+  >
+    <PanelTitle
+      title="Traces over time"
+    />
+    <EuiHorizontalRule
+      margin="m"
+    />
+    <Plt
+      data={
+        Array [
+          Object {
+            "hoverlabel": Object {
+              "align": "left",
+            },
+            "hovertemplate": "%{text}<br>Error rate: %{y}<extra></extra>",
+            "marker": Object {
+              "color": "#fad963",
+            },
+            "text": Array [
+              "Dec 19, 2019 16:00:00 - Dec 18, 2020 16:00:00",
+            ],
+            "type": "bar",
+            "x": Array [
+              1576800000000,
+            ],
+            "y": Array [
+              22.22,
+            ],
+          },
+        ]
+      }
+      layout={
+        Object {
+          "annotations": Array [
+            Object {
+              "arrowhead": 0,
+              "arrowwidth": 0.7,
+              "ax": 0,
+              "ay": -160,
+              "borderpad": 10,
+              "showarrow": true,
+              "text": "Now: 22.22",
+              "x": 1576800000000,
+              "xref": "x",
+              "y": 0,
+              "yref": "y",
+            },
+          ],
+          "height": 217,
+          "margin": Object {
+            "b": 50,
+            "l": 50,
+            "pad": 4,
+            "r": 5,
+            "t": 30,
+          },
+          "xaxis": Object {
+            "color": "#899195",
+            "fixedrange": true,
+            "showgrid": false,
+            "tickformat": "%Y",
+            "type": "date",
+            "visible": true,
+          },
+          "yaxis": Object {
+            "color": "#899195",
+            "fixedrange": true,
+            "gridcolor": "#d9d9d9",
+            "showgrid": true,
+            "title": Object {
+              "font": Object {
+                "size": 12,
+              },
+              "text": "Throughput (n)",
+            },
+            "visible": true,
+          },
+        }
+      }
+      onClickHandler={[Function]}
+    />
+  </EuiPanel>
+</Fragment>
+`;
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/box_plt.test.tsx b/public/components/trace_analytics/components/common/plots/__tests__/box_plt.test.tsx
new file mode 100644
index 0000000000..e5598e26a9
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/box_plt.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { BoxPlt } from '../box_plt';
+
+describe('Box plot component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders box plot', () => {
+    const addFilter = jest.fn();
+    const wrapper = shallow(
+      <BoxPlt
+        plotParams={{
+          min: 0,
+          max: 100,
+          left: 20,
+          mid: 50,
+          right: 80,
+          currPercentileFilter:'',
+          addFilter,
+        }}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/error_rate_plt_.test.tsx b/public/components/trace_analytics/components/common/plots/__tests__/error_rate_plt_.test.tsx
new file mode 100644
index 0000000000..3203fbe82d
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/error_rate_plt_.test.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { ErrorRatePlt } from '../error_rate_plt';
+
+describe('Error rate plot component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders error rate plot', () => {
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const items = {
+      items: [
+        {
+          x: [1576800000000],
+          y: [22.22],
+          marker: {
+            color: '#fad963',
+          },
+          type: 'bar',
+          text: ['Dec 19, 2019 16:00:00 - Dec 18, 2020 16:00:00'],
+          hoverlabel: {
+            align: 'left',
+          },
+          hovertemplate: '%{text}<br>Error rate: %{y}<extra></extra>',
+        },
+      ] as Plotly.Data[],
+      fixedInterval: '365d',
+    };
+    const wrapper = shallow(
+      <ErrorRatePlt items={items} setStartTime={setStartTime} setEndTime={setEndTime} />
+    );
+    
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/latency_trend_plt.test.tsx b/public/components/trace_analytics/components/common/plots/__tests__/latency_trend_plt.test.tsx
new file mode 100644
index 0000000000..ee5d786e9e
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/latency_trend_plt.test.tsx
@@ -0,0 +1,78 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { ErrorRatePlt } from '../error_rate_plt';
+import { LatencyPlt, LinePlt } from '../latency_trend_plt';
+
+describe('Latency trend plot component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders line plot', () => {
+    const data = [
+      {
+        x: [1605027600000, 1605027700000],
+        y: [78.16, 100],
+        type: 'scatter',
+        mode: 'lines',
+        hoverinfo: 'none',
+        line: {
+          color: '#000000',
+          width: 1,
+        },
+      },
+    ] as Plotly.Data[];
+    const wrapper = shallow(<LinePlt data={data} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders dash', () => {
+    const data = [
+      {
+        x: [1605027600000],
+        y: [78.16],
+        type: 'scatter',
+        mode: 'lines',
+        hoverinfo: 'none',
+        line: {
+          color: '#000000',
+          width: 1,
+        },
+      },
+    ] as Plotly.Data[];
+    const wrapper = shallow(<LinePlt data={data} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders latency plot', () => {
+    const data = [
+      {
+        x: [1605027600000],
+        y: [284.47],
+        type: 'scatter',
+        mode: 'lines+markers',
+        hovertemplate: '%{x}<br>Average latency: %{y}<extra></extra>',
+        hoverlabel: {
+          bgcolor: '#d7c2ff',
+        },
+        marker: {
+          color: '#987dcb',
+          size: 8,
+        },
+        line: {
+          color: '#987dcb',
+        },
+      },
+    ] as Plotly.Data[];
+    const wrapper = shallow(<LatencyPlt data={data} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/service_map.test.tsx b/public/components/trace_analytics/components/common/plots/__tests__/service_map.test.tsx
new file mode 100644
index 0000000000..b7d505fb8f
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/service_map.test.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { TEST_SERVICE_MAP } from '../../../../../../../test/constants';
+import { ServiceMap } from '../service_map';
+
+describe('Service map component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders service map', async () => {
+    const setServiceMapIdSelected = jest.fn((e) => {});
+    const wrapper = shallow(
+      <ServiceMap
+        serviceMap={TEST_SERVICE_MAP}
+        idSelected="latency"
+        setIdSelected={setServiceMapIdSelected}
+        page="dashboard"
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/service_map_scale.test.tsx b/public/components/trace_analytics/components/common/plots/__tests__/service_map_scale.test.tsx
new file mode 100644
index 0000000000..811cc1920f
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/service_map_scale.test.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { ServiceMapScale } from '../service_map_scale';
+
+describe('Service map scale component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders service map scale plot', () => {
+    const wrapper = mount(
+      <ServiceMapScale
+        idSelected="latency"
+        serviceMap={undefined}
+        ticks={[0, 50, 100, 150, 200, 250]}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/throughput_plt.test.tsx b/public/components/trace_analytics/components/common/plots/__tests__/throughput_plt.test.tsx
new file mode 100644
index 0000000000..c5f8d1b0f6
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/__tests__/throughput_plt.test.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { ThroughputPlt } from '../throughput_plt';
+
+describe('Throughput plot component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders throughput plot', () => {
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const items = {
+      items: [
+        {
+          x: [1576800000000],
+          y: [22.22],
+          marker: {
+            color: '#fad963',
+          },
+          type: 'bar',
+          text: ['Dec 19, 2019 16:00:00 - Dec 18, 2020 16:00:00'],
+          hoverlabel: {
+            align: 'left',
+          },
+          hovertemplate: '%{text}<br>Error rate: %{y}<extra></extra>',
+        },
+      ] as Plotly.Data[],
+      fixedInterval: '365d',
+    };
+    const wrapper = shallow(
+      <ThroughputPlt items={items} setStartTime={setStartTime} setEndTime={setEndTime} />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/common/plots/box_plt.tsx b/public/components/trace_analytics/components/common/plots/box_plt.tsx
new file mode 100644
index 0000000000..b177fc2c5d
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/box_plt.tsx
@@ -0,0 +1,155 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiFlexGrid, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
+import { BarOrientation } from '../../../../../../common/constants/shared';
+import React, { useMemo, useState } from 'react';
+import { Plt } from '../../../../visualizations/plotly/plot';
+
+interface PlotParamsType {
+  min: number;
+  max: number;
+  left: number;
+  mid: number;
+  right: number;
+  currPercentileFilter: string;
+  addFilter: (condition: 'gte' | 'lte') => void;
+}
+
+export function BoxPlt({ plotParams }: { plotParams: PlotParamsType }) {
+  const [hovered, setHovered] = useState('');
+
+  const getLayout = () =>
+    ({
+      plot_bgcolor: 'rgba(0, 0, 0, 0)',
+      paper_bgcolor: 'rgba(0, 0, 0, 0)',
+      xaxis: {
+        range: [plotParams.min, plotParams.max],
+        fixedrange: true,
+        showgrid: false,
+        visible: false,
+      },
+      yaxis: {
+        range: [-0.6, 0.6],
+        fixedrange: true,
+        showgrid: false,
+        visible: false,
+      },
+      margin: {
+        l: 0,
+        r: 0,
+        b: 0,
+        t: 0,
+        pad: 0,
+      },
+      height: 15,
+      width: 250,
+    } as Partial<Plotly.Layout>);
+
+  const getData = () =>
+    [
+      {
+        x: [plotParams.left],
+        y: [0],
+        type: 'bar',
+        orientation: BarOrientation.horizontal,
+        width: 1,
+        marker: { color: 'rgba(0, 0, 0, 0)' },
+        hoverinfo: 'none',
+        showlegend: false,
+      },
+      {
+        x: [plotParams.mid - plotParams.left],
+        y: [0],
+        type: 'bar',
+        orientation: BarOrientation.horizontal,
+        width: 1,
+        marker: {
+          color: plotParams.currPercentileFilter === '< 95th' ? '#fcfcfc' : '#ffffff',
+          line: {
+            color:
+              plotParams.currPercentileFilter === '< 95th'
+                ? '#eceded'
+                : hovered === 'lower'
+                ? '#2e73b5'
+                : '#957ac9',
+            width: hovered === 'lower' ? 3 : 1,
+          },
+        },
+      },
+      {
+        x: [plotParams.right - plotParams.mid],
+        y: [0],
+        type: 'bar',
+        orientation: BarOrientation.horizontal,
+        width: 1,
+        marker: {
+          color: plotParams.currPercentileFilter === '>= 95th' ? '#aea4d1' : '#957ac9',
+          line: {
+            color: hovered === 'upper' ? '#2e73b5' : '#957ac9',
+            width: hovered === 'upper' ? 3 : 1,
+          },
+        },
+      },
+    ] as Plotly.Data[];
+
+  const renderTooltip = () => {
+    return (
+      <EuiFlexGrid columns={2} gutterSize="s" responsive={false}>
+        <EuiFlexItem>
+          <EuiText size="xs" style={{ color: hovered === 'lower' ? '#ffffff' : '#c9cbce' }}>
+            <p>Latency &lt;95 percentile</p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText size="xs" style={{ color: hovered === 'lower' ? '#ffffff' : '#c9cbce' }}>
+            <p>{`${Math.round(plotParams.left)}ms - ${Math.round(plotParams.mid)}ms`}</p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText size="xs" style={{ color: hovered === 'upper' ? '#ffffff' : '#c9cbce' }}>
+            <p>Latency &gt;=95 percentile</p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText size="xs" style={{ color: hovered === 'upper' ? '#ffffff' : '#c9cbce' }}>
+            <p>{`${Math.round(plotParams.mid)}ms - ${Math.round(plotParams.right)}ms`}</p>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGrid>
+    );
+  };
+
+  const layout = useMemo(() => getLayout(), [plotParams]);
+  const data = useMemo(() => getData(), [plotParams, hovered]);
+  const tooltip = useMemo(() => renderTooltip(), [plotParams, hovered]);
+
+  const onHoverHandler = (e) => {
+    if (plotParams.currPercentileFilter) return;
+    const mouseX = e.xvals[0];
+    if (plotParams.left <= mouseX && mouseX <= plotParams.mid) setHovered('lower');
+    else if (plotParams.mid <= mouseX && mouseX <= plotParams.right) setHovered('upper');
+    else setHovered('');
+  };
+
+  const onClickHandler = (e) => {
+    if (plotParams.currPercentileFilter) return;
+    if (e.points[0].fullData.index === 1) plotParams.addFilter('lte');
+    else if (e.points[0].fullData.index === 2) plotParams.addFilter('gte');
+  };
+
+  return (
+    <>
+      <EuiToolTip content={tooltip} position="bottom" onMouseOut={() => setHovered('')}>
+        <Plt
+          data={data}
+          layout={layout}
+          onHoverHandler={onHoverHandler}
+          onClickHandler={onClickHandler}
+        />
+      </EuiToolTip>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/common/plots/error_rate_plt.tsx b/public/components/trace_analytics/components/common/plots/error_rate_plt.tsx
new file mode 100644
index 0000000000..7486245361
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/error_rate_plt.tsx
@@ -0,0 +1,102 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiHorizontalRule, EuiPanel } from '@elastic/eui';
+import moment from 'moment';
+import React, { useMemo } from 'react';
+import { Plt } from '../../../../visualizations/plotly/plot';
+import {
+  fixedIntervalToMilli,
+  fixedIntervalToTickFormat,
+  NoMatchMessage,
+  PanelTitle,
+} from '../helper_functions';
+
+export function ErrorRatePlt(props: {
+  items: { items: Plotly.Data[]; fixedInterval: string };
+  setStartTime: (startTime: string) => void;
+  setEndTime: (endTime: string) => void;
+}) {
+  const getLayout = () =>
+    ({
+      height: 217,
+      margin: {
+        l: 57,
+        r: 5,
+        b: 50,
+        t: 30,
+        pad: 4,
+      },
+      annotations: props.items.items.length > 0 && [
+        {
+          x: props.items.items[0]?.x[props.items.items[0]?.x.length - 1],
+          y: 0,
+          showarrow: true,
+          arrowhead: 0,
+          xref: 'x',
+          yref: 'y',
+          text: `Now: ${props.items.items[0]?.y[props.items.items[0]?.y.length - 1]}%`,
+          ax: 0,
+          ay: -160,
+          borderpad: 10,
+          arrowwidth: 0.7,
+        },
+      ],
+      showlegend: false,
+      xaxis: {
+        fixedrange: true,
+        showgrid: false,
+        visible: true,
+        type: 'date',
+        tickformat: fixedIntervalToTickFormat(props.items.fixedInterval),
+        color: '#899195',
+      },
+      yaxis: {
+        title: {
+          text: 'Error rate (%)',
+          font: {
+            size: 12,
+          },
+          standoff: 10,
+        },
+        range: [
+          0,
+          Math.min(100, Math.max(...(props.items.items[0]?.y.map((y) => y * 1.2) || []), 1)),
+        ],
+        fixedrange: true,
+        ticksuffix: '%',
+        gridcolor: '#d9d9d9',
+        showgrid: true,
+        visible: true,
+        color: '#899195',
+      },
+    } as Partial<Plotly.Layout>);
+
+  const layout = useMemo(() => getLayout(), [props.items]);
+
+  const onClick = (event: any) => {
+    if (!event?.points) return;
+    const point = event.points[0];
+    const start = point.data.x[point.pointNumber];
+    const end = start + fixedIntervalToMilli(props.items.fixedInterval);
+    props.setStartTime(moment(start).toISOString());
+    props.setEndTime(moment(end).toISOString());
+    window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <>
+      <EuiPanel style={{ minWidth: 433, minHeight: 308 }}>
+        <PanelTitle title="Trace error rate over time" />
+        <EuiHorizontalRule margin="m" />
+        {props.items?.items?.length > 0 ? (
+          <Plt data={props.items.items} layout={layout} onClickHandler={onClick} />
+        ) : (
+          <NoMatchMessage size="s" />
+        )}
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/common/plots/latency_trend_plt.tsx b/public/components/trace_analytics/components/common/plots/latency_trend_plt.tsx
new file mode 100644
index 0000000000..6589fe8d68
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/latency_trend_plt.tsx
@@ -0,0 +1,94 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import _ from 'lodash';
+import React, { useMemo } from 'react';
+import { Plt } from '../../../../visualizations/plotly/plot';
+
+export function LinePlt(props: { data: Plotly.Data[] }) {
+  const maxY = props.data[0]?.y ? Math.max(...props.data[0].y) : 0;
+  const layout = useMemo(
+    () => ({
+      plot_bgcolor: 'rgba(0, 0, 0, 0)',
+      paper_bgcolor: 'rgba(0, 0, 0, 0)',
+      xaxis: {
+        fixedrange: true,
+        showgrid: false,
+        visible: false,
+      },
+      yaxis: {
+        fixedrange: true,
+        showgrid: false,
+        visible: false,
+        range: [0, maxY * 1.1],
+      },
+      margin: {
+        l: 0,
+        r: 0,
+        b: 0,
+        t: 0,
+        pad: 0,
+      },
+      height: 20,
+      width: 60,
+    }),
+    [props.data]
+  );
+  return props.data[0].x.length > 1 ? <Plt data={props.data} layout={layout} /> : <div>-</div>;
+}
+
+export function LatencyPlt(props: { data: Plotly.Data[] }) {
+  const layout = useMemo(
+    () =>
+      ({
+        xaxis: {
+          showgrid: false,
+          type: 'date',
+          tickmode: 'auto',
+          color: '#899195',
+        },
+        yaxis: {
+          title: {
+            text: 'Hourly latency (ms)',
+            font: {
+              size: 12,
+            },
+          },
+          gridcolor: '#d9d9d9',
+          color: '#899195',
+        },
+        annotations: [
+          {
+            x: props.data[0].x[props.data[0].x.length - 1],
+            y: 0,
+            showarrow: true,
+            arrowhead: 0,
+            xref: 'x',
+            yref: 'y',
+            text: `Now: ${_.round(props.data[0].y[props.data[0].y.length - 1] as number, 2)}ms`,
+            ax: 0,
+            ay: -140,
+            borderpad: 10,
+            arrowwidth: 0.7,
+          },
+        ],
+        margin: {
+          l: 50,
+          r: 30,
+          b: 50,
+          t: 30,
+          pad: 0,
+        },
+        height: 200,
+        width: 400,
+      } as Partial<Plotly.Layout>),
+    [props.data]
+  );
+  return (
+    <>
+      <Plt data={props.data} layout={layout} />
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/common/plots/service_map.tsx b/public/components/trace_analytics/components/common/plots/service_map.tsx
new file mode 100644
index 0000000000..a636049682
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/service_map.tsx
@@ -0,0 +1,233 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButtonGroup,
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+// @ts-ignore
+import Graph from 'react-graph-vis';
+import { FilterType } from '../filters/filters';
+import {
+  calculateTicks,
+  getServiceMapGraph,
+  NoMatchMessage,
+  PanelTitle,
+} from '../helper_functions';
+import { ServiceMapScale } from './service_map_scale';
+
+export interface ServiceObject {
+  [key: string]: {
+    serviceName: string;
+    id: number;
+    traceGroups: Array<{ traceGroup: string; targetResource: string[] }>;
+    targetServices: string[];
+    destServices: string[];
+    latency?: number;
+    error_rate?: number;
+    throughput?: number;
+    throughputPerMinute?: number;
+    relatedServices?: string[]; // services appear in the same traces this service appears
+  };
+}
+
+export function ServiceMap({
+  serviceMap,
+  idSelected,
+  setIdSelected,
+  addFilter,
+  currService,
+  page,
+}: {
+  serviceMap: ServiceObject;
+  idSelected: 'latency' | 'error_rate' | 'throughput';
+  setIdSelected: (newId: 'latency' | 'error_rate' | 'throughput') => void;
+  addFilter?: (filter: FilterType) => void;
+  currService?: string;
+  page:
+    | 'app'
+    | 'appCreate'
+    | 'dashboard'
+    | 'traces'
+    | 'services'
+    | 'serviceView'
+    | 'detailFlyout'
+    | 'traceView';
+}) {
+  const [invalid, setInvalid] = useState(false);
+  const [network, setNetwork] = useState(null);
+  const [ticks, setTicks] = useState<number[]>([]);
+  const [items, setItems] = useState<any>({});
+  const [query, setQuery] = useState('');
+  const toggleButtons = [
+    {
+      id: 'latency',
+      label: 'Latency',
+    },
+    {
+      id: 'error_rate',
+      label: 'Error rate',
+    },
+    {
+      id: 'throughput',
+      label: 'Throughput',
+    },
+  ];
+
+  const options = {
+    layout: {
+      hierarchical: false,
+    },
+    edges: {
+      arrows: {
+        to: {
+          enabled: false,
+        },
+      },
+      physics: false,
+    },
+    nodes: {
+      shape: 'dot',
+      color: '#adadad',
+      borderWidth: 0,
+      font: {
+        size: 17,
+        color: '#387ab9',
+      },
+    },
+    interaction: {
+      hover: true,
+      tooltipDelay: 30,
+      selectable: true,
+    },
+    manipulation: {
+      enabled: false,
+    },
+    height: '434px',
+    width: '100%',
+    autoResize: true,
+  };
+
+  const events = {
+    select: (event: any) => {
+      const { nodes, edges } = event;
+      if (!addFilter || !nodes) return;
+      const serviceName = items?.graph.nodes.find((node: any) => node.id === nodes[0])?.label;
+      if (serviceName) {
+        addFilter({
+          field: 'serviceName',
+          operator: 'is',
+          value: serviceName,
+          inverted: false,
+          disabled: false,
+        });
+        if (!['appCreate', 'detailFlyout'].includes(page)) {
+          window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+        }
+      }
+    },
+    hoverNode: (event: any) => {},
+  };
+
+  const onFocus = (service: string, networkInstance?: any) => {
+    if (service.length === 0) {
+      setInvalid(false);
+    } else if (serviceMap[service]) {
+      if (!networkInstance) networkInstance = network;
+      networkInstance.focus(serviceMap[service].id, { animation: true });
+      setInvalid(false);
+    } else {
+      setInvalid(true);
+    }
+  };
+
+  useEffect(() => {
+    if (Object.keys(serviceMap).length === 0) return;
+    const values = Object.keys(serviceMap)
+      .filter((service) => serviceMap[service][idSelected])
+      .map((service) => serviceMap[service][idSelected]!);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const calculatedTicks = calculateTicks(min, max);
+    setTicks(calculatedTicks);
+    setItems(
+      getServiceMapGraph(
+        serviceMap,
+        idSelected,
+        calculatedTicks,
+        currService,
+        serviceMap[currService!]?.relatedServices
+      )
+    );
+  }, [serviceMap, idSelected]);
+
+  return (
+    <>
+      <EuiPanel>
+        {page === 'app' ? (
+          <PanelTitle title="Application Composition Map" />
+        ) : (
+          <PanelTitle title="Service map" />
+        )}
+        <EuiSpacer size="m" />
+        <EuiButtonGroup
+          options={toggleButtons}
+          idSelected={idSelected}
+          onChange={(id) => setIdSelected(id as 'latency' | 'error_rate' | 'throughput')}
+          buttonSize="s"
+          color="text"
+        />
+        <EuiHorizontalRule margin="m" />
+        <EuiFlexGroup alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiText>Focus on</EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFieldSearch
+              placeholder="Service name"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onSearch={(service) => onFocus(service)}
+              isInvalid={query.length > 0 && invalid}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer />
+
+        {Object.keys(serviceMap).length > 0 ? (
+          <EuiFlexGroup gutterSize="none" responsive={false}>
+            <EuiFlexItem>
+              {items?.graph && (
+                <Graph
+                  graph={items.graph}
+                  options={options}
+                  events={events}
+                  getNetwork={(networkInstance: any) => {
+                    setNetwork(networkInstance);
+                    if (currService) onFocus(currService, networkInstance);
+                  }}
+                />
+              )}
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <ServiceMapScale idSelected={idSelected} serviceMap={serviceMap} ticks={ticks} />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          <div style={{ minHeight: 434 }}>
+            <NoMatchMessage size="s" />
+          </div>
+        )}
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/common/plots/service_map_scale.tsx b/public/components/trace_analytics/components/common/plots/service_map_scale.tsx
new file mode 100644
index 0000000000..e9c900bcc2
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/service_map_scale.tsx
@@ -0,0 +1,133 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { BarOrientation } from '../../../../../../common/constants/shared';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { Plt } from '../../../../visualizations/plotly/plot';
+import unmatchedNode from '../../../images/unmatched_node.png';
+import { getServiceMapScaleColor } from '../helper_functions';
+import { ServiceObject } from './service_map';
+
+export function ServiceMapScale(props: {
+  idSelected: 'latency' | 'error_rate' | 'throughput';
+  serviceMap: ServiceObject;
+  ticks: number[];
+}) {
+  const [scaleProps, setScaleProps] = useState({});
+  const getScaleData = () => {
+    const ticks = props.ticks;
+    const delta = ticks[1] - ticks[0];
+    const title = { latency: 'Latency (ms)', error_rate: 'Error rate', throughput: 'Throughput' }[
+      props.idSelected
+    ];
+    const percentInterval = 1 / Math.max(ticks.length - 1, 1);
+    const percents = Array.from({ length: ticks.length - 1 }, (v, i) => percentInterval * i);
+    const color = percents
+      .map((percent) => getServiceMapScaleColor(percent, props.idSelected))
+      .map((rgb) => `rgb(${rgb})`);
+
+    const result = {
+      data: {
+        y: [delta + ticks[0], ...Array.from({ length: ticks.length - 1 }, () => delta)],
+        marker: {
+          color,
+        },
+      },
+      layout: {
+        yaxis: {
+          range: [ticks[0], ticks[ticks.length - 1]],
+          ticksuffix: props.idSelected === 'error_rate' ? '%' : '',
+          title: {
+            text: title,
+            standoff: 15,
+          },
+        },
+      },
+    };
+    return result;
+  };
+
+  const getScaleProps = () => {
+    const result = getScaleData();
+    const data = [
+      {
+        x: Array.from({ length: result.data.y.length }, () => 0),
+        type: 'bar',
+        orientation: BarOrientation.vertical,
+        width: 0.4,
+        hoverinfo: 'none',
+        showlegend: false,
+        ...result.data,
+      },
+    ] as Plotly.Data;
+
+    const layout = _.merge(
+      {
+        plot_bgcolor: 'rgba(0, 0, 0, 0)',
+        paper_bgcolor: 'rgba(0, 0, 0, 0)',
+        xaxis: {
+          range: [-0.35, 0.35],
+          fixedrange: true,
+          showgrid: false,
+          showline: false,
+          zeroline: false,
+          showticklabels: false,
+        },
+        yaxis: {
+          side: 'right',
+          fixedrange: true,
+          showgrid: false,
+          showline: false,
+          zeroline: false,
+          showticklabels: true,
+          tickvals: props.ticks,
+          ticktexts: props.ticks,
+        },
+        margin: {
+          l: 0,
+          r: 60,
+          b: 10,
+          t: 10,
+          pad: 0,
+        },
+        height: 270,
+        width: 77,
+      },
+      result.layout
+    ) as Partial<Plotly.Layout>;
+    return { data, layout };
+  };
+
+  useEffect(() => {
+    if (Object.keys(props.ticks).length > 0) setScaleProps(getScaleProps());
+  }, [props.idSelected, props.serviceMap, props.ticks]);
+
+  return (
+    <div style={{ minHeight: 400, minWidth: 65 }}>
+      {Object.keys(props.ticks).length > 0 && (
+        <>
+          <Plt {...scaleProps} height="270px" />
+          <EuiSpacer />
+          <EuiFlexGroup gutterSize="none">
+            <EuiFlexItem grow={false}>
+              <img
+                src={unmatchedNode}
+                alt="unmatched-node-legend"
+                style={{ width: 40, height: 40 }}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false} style={{ marginRight: -30, marginLeft: -10 }}>
+              <EuiText style={{ transform: 'rotate(-90deg)', fontSize: '14px', color: '#808080' }}>
+                No match
+              </EuiText>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/public/components/trace_analytics/components/common/plots/throughput_plt.tsx b/public/components/trace_analytics/components/common/plots/throughput_plt.tsx
new file mode 100644
index 0000000000..aba6bb2833
--- /dev/null
+++ b/public/components/trace_analytics/components/common/plots/throughput_plt.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiHorizontalRule, EuiPanel } from '@elastic/eui';
+import moment from 'moment';
+import React, { useMemo } from 'react';
+import { Plt } from '../../../../visualizations/plotly/plot';
+import {
+  fixedIntervalToMilli,
+  fixedIntervalToTickFormat,
+  NoMatchMessage,
+  PanelTitle,
+} from '../helper_functions';
+
+export function ThroughputPlt(props: {
+  items: { items: Plotly.Data[]; fixedInterval: string };
+  setStartTime: (startTime: string) => void;
+  setEndTime: (endTime: string) => void;
+}) {
+  const layout = useMemo(
+    () =>
+      ({
+        height: 217,
+        margin: {
+          l: 50,
+          r: 5,
+          b: 50,
+          t: 30,
+          pad: 4,
+        },
+        annotations: props.items.items.length > 0 && [
+          {
+            x: props.items.items[0].x[props.items.items[0].x.length - 1],
+            y: 0,
+            showarrow: true,
+            arrowhead: 0,
+            xref: 'x',
+            yref: 'y',
+            text: `Now: ${props.items.items[0].y[props.items.items[0].y.length - 1]?.toLocaleString(
+              undefined
+            )}`,
+            ax: 0,
+            ay: -160,
+            borderpad: 10,
+            arrowwidth: 0.7,
+          },
+        ],
+        xaxis: {
+          fixedrange: true,
+          showgrid: false,
+          visible: true,
+          type: 'date',
+          tickformat: fixedIntervalToTickFormat(props.items.fixedInterval),
+          color: '#899195',
+        },
+        yaxis: {
+          title: {
+            text: 'Throughput (n)',
+            font: {
+              size: 12,
+            },
+          },
+          fixedrange: true,
+          gridcolor: '#d9d9d9',
+          showgrid: true,
+          visible: true,
+          color: '#899195',
+        },
+      } as Partial<Plotly.Layout>),
+    [props.items]
+  );
+
+  const onClick = (event) => {
+    if (!event?.points) return;
+    const point = event.points[0];
+    const start = point.data.x[point.pointNumber];
+    const end = start + fixedIntervalToMilli(props.items.fixedInterval);
+    props.setStartTime(moment(start).toISOString());
+    props.setEndTime(moment(end).toISOString());
+    window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <>
+      <EuiPanel style={{ minWidth: 433, minHeight: 308 }}>
+        <PanelTitle title="Traces over time" />
+        <EuiHorizontalRule margin="m" />
+        {props.items?.items?.length > 0 ? (
+          <Plt data={props.items.items} layout={layout} onClickHandler={onClick} />
+        ) : (
+          <NoMatchMessage size="s" />
+        )}
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/common/search_bar.tsx b/public/components/trace_analytics/components/common/search_bar.tsx
new file mode 100644
index 0000000000..0b0721981f
--- /dev/null
+++ b/public/components/trace_analytics/components/common/search_bar.tsx
@@ -0,0 +1,106 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButton,
+  EuiFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiSuperDatePicker,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useState } from 'react';
+import { uiSettingsService } from '../../../../../common/utils';
+import { Filters, FiltersProps } from './filters/filters';
+
+export const renderDatePicker = (
+  startTime: string,
+  setStartTime: (startTime: string) => void,
+  endTime: string,
+  setEndTime: (endTime: string) => void
+) => {
+  return (
+    <EuiSuperDatePicker
+      start={startTime}
+      end={endTime}
+      dateFormat={uiSettingsService.get('dateFormat')}
+      showUpdateButton={false}
+      onTimeChange={(e) => {
+        setStartTime(e.start);
+        setEndTime(e.end);
+      }}
+    />
+  );
+};
+
+export interface SearchBarProps extends FiltersProps {
+  query: string;
+  setQuery: (query: string) => void;
+  startTime: string;
+  setStartTime: (startTime: string) => void;
+  endTime: string;
+  setEndTime: (endTime: string) => void;
+}
+
+interface SearchBarOwnProps extends SearchBarProps {
+  refresh: () => void;
+  page: 'dashboard' | 'traces' | 'services' | 'app';
+  datepickerOnly?: boolean;
+}
+
+export function SearchBar(props: SearchBarOwnProps) {
+  // use another query state to avoid typing delay
+  const [query, setQuery] = useState(props.query);
+  const setGlobalQuery = _.debounce((q) => props.setQuery(q), 50);
+
+  return (
+    <>
+      <EuiFlexGroup gutterSize="s">
+        {!props.datepickerOnly && (
+          <EuiFlexItem>
+            <EuiFieldSearch
+              fullWidth
+              isClearable={false}
+              placeholder="Trace ID, trace group name, service name"
+              data-test-subj="search-bar-input-box"
+              value={query}
+              onChange={(e) => {
+                setQuery(e.target.value);
+                setGlobalQuery(e.target.value);
+              }}
+              onSearch={props.refresh}
+            />
+          </EuiFlexItem>
+        )}
+        <EuiFlexItem grow={false} style={{ maxWidth: '40vw' }}>
+          {renderDatePicker(props.startTime, props.setStartTime, props.endTime, props.setEndTime)}
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            data-test-subj="superDatePickerApplyTimeButton"
+            data-click-metric-element="trace_analytics.refresh_button"
+            iconType="refresh"
+            onClick={props.refresh}
+          >
+            Refresh
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      {!props.datepickerOnly && (
+        <>
+          <EuiSpacer size="s" />
+          <Filters
+            page={props.page}
+            filters={props.filters}
+            setFilters={props.setFilters}
+            appConfigs={props.appConfigs}
+          />
+        </>
+      )}
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
new file mode 100644
index 0000000000..ab6226b0ff
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
@@ -0,0 +1,3196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dashboard component renders dashboard 1`] = `
+<Dashboard
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Dashboard",
+      },
+    ]
+  }
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "href": "test#/",
+                "text": "test",
+              },
+              Object {
+                "href": "#/trace_analytics/home",
+                "text": "Trace analytics",
+              },
+              Object {
+                "href": "#/trace_analytics/home",
+                "text": "Dashboard",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  indicesExist={true}
+  page="dashboard"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Dashboard
+    </h2>
+  </EuiTitle>
+  <DashboardContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Dashboard",
+        },
+      ]
+    }
+    chrome={
+      Object {
+        "getIsNavDrawerLocked$": [MockFunction],
+        "setBreadcrumbs": [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [
+                Object {
+                  "href": "test#/",
+                  "text": "test",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Trace analytics",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Dashboard",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    indicesExist={true}
+    page="dashboard"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      page="dashboard"
+      query=""
+      refresh={[Function]}
+      setEndTime={[MockFunction]}
+      setFilters={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      setQuery={[MockFunction]}
+      setStartTime={[MockFunction]}
+      startTime="now-5m"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <EuiFieldSearch
+                compressed={false}
+                data-test-subj="search-bar-input-box"
+                fullWidth={true}
+                incremental={false}
+                isClearable={false}
+                isLoading={false}
+                onChange={[Function]}
+                onSearch={[Function]}
+                placeholder="Trace ID, trace group name, service name"
+                value=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <EuiValidatableControl>
+                        <input
+                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          data-test-subj="search-bar-input-box"
+                          onChange={[Function]}
+                          onKeyUp={[Function]}
+                          placeholder="Trace ID, trace group name, service name"
+                          type="search"
+                          value=""
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconSearch
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                    />
+                                  </svg>
+                                </EuiIconSearch>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "maxWidth": "40vw",
+                }
+              }
+            >
+              <EuiSuperDatePicker
+                commonlyUsedRanges={
+                  Array [
+                    Object {
+                      "end": "now/d",
+                      "label": "Today",
+                      "start": "now/d",
+                    },
+                    Object {
+                      "end": "now/w",
+                      "label": "This week",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now/M",
+                      "label": "This month",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now/y",
+                      "label": "This year",
+                      "start": "now/y",
+                    },
+                    Object {
+                      "end": "now-1d/d",
+                      "label": "Yesterday",
+                      "start": "now-1d/d",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Week to date",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Month to date",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Year to date",
+                      "start": "now/y",
+                    },
+                  ]
+                }
+                dateFormat=""
+                end="now"
+                isAutoRefreshOnly={false}
+                isDisabled={false}
+                isPaused={true}
+                onTimeChange={[Function]}
+                recentlyUsedRanges={Array []}
+                refreshInterval={0}
+                showUpdateButton={false}
+                start="now-5m"
+                timeFormat="HH:mm"
+              >
+                <EuiFlexGroup
+                  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  gutterSize="s"
+                  responsive={false}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiFormControlLayout
+                          className="euiSuperDatePicker"
+                          isDisabled={false}
+                          prepend={
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            />
+                          }
+                        >
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconCalendar
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                      fillRule="evenodd"
+                                                    />
+                                                  </svg>
+                                                </EuiIconCalendar>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconRefresh
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                              />
+                            </svg>
+                          </EuiIconRefresh>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        page="dashboard"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          }
+        }
+      >
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          responsive={false}
+          style={
+            Object {
+              "minHeight": 32,
+            }
+          }
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <GlobalFilterButton>
+                  <EuiPopover
+                    anchorPosition="rightUp"
+                    button={
+                      <EuiButtonIcon
+                        aria-label="Change all filters"
+                        iconType="filter"
+                        onClick={[Function]}
+                        title="Change all filters"
+                      />
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconFilter
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M7.999 15.999a8 8 0 110-16 8 8 0 010 16zM8 15A7 7 0 108 1a7 7 0 000 14zM3.5 5h9a.5.5 0 110 1h-9a.5.5 0 010-1zm2 3h5a.5.5 0 110 1h-5a.5.5 0 010-1zm2 3h1a.5.5 0 110 1h-1a.5.5 0 110-1z"
+                                    fillRule="evenodd"
+                                  />
+                                </svg>
+                              </EuiIconFilter>
+                            </EuiIcon>
+                          </button>
+                        </EuiButtonIcon>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <DashboardTable
+      addFilter={[Function]}
+      addPercentileFilter={[Function]}
+      filters={Array []}
+      items={Array []}
+      loading={false}
+      page="dashboard"
+      setRedirect={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={10}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
+                >
+                  <PanelTitle
+                    title="Latency by trace group"
+                    totalItems={0}
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Latency by trace group
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <EuiLink
+                    data-test-subj="dashboard-table-percentile-button-1"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="euiLink euiLink--primary"
+                      data-test-subj="dashboard-table-percentile-button-1"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiText
+                        size="xs"
+                      >
+                        <div
+                          className="euiText euiText--extraSmall"
+                        >
+                          <span
+                            style={
+                              Object {
+                                "color": "#957ac9",
+                              }
+                            }
+                          >
+                            □
+                          </span>
+                           &lt; 95 percentile
+                        </div>
+                      </EuiText>
+                    </button>
+                  </EuiLink>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={1}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow1"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <EuiLink
+                    data-test-subj="dashboard-table-percentile-button-2"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="euiLink euiLink--primary"
+                      data-test-subj="dashboard-table-percentile-button-2"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <EuiText
+                        size="xs"
+                      >
+                        <div
+                          className="euiText euiText--extraSmall"
+                        >
+                          <span
+                            style={
+                              Object {
+                                "color": "#957ac9",
+                              }
+                            }
+                          >
+                            ■
+                          </span>
+                           &gt;= 95 percentile
+                        </div>
+                      </EuiText>
+                    </button>
+                  </EuiLink>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={1}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow1"
+                />
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
+          <EuiHorizontalRule
+            margin="none"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full"
+            />
+          </EuiHorizontalRule>
+          <NoMatchMessage
+            size="xl"
+          >
+            <EuiSpacer
+              size="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+            <EuiEmptyPrompt
+              body={
+                <EuiText>
+                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                </EuiText>
+              }
+              title={
+                <h2>
+                  No matches
+                </h2>
+              }
+            >
+              <div
+                className="euiEmptyPrompt"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    No matches
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <EuiText>
+                          <div
+                            className="euiText euiText--medium"
+                          >
+                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                          </div>
+                        </EuiText>
+                      </div>
+                    </EuiText>
+                  </span>
+                </EuiTextColor>
+              </div>
+            </EuiEmptyPrompt>
+            <EuiSpacer
+              size="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+          </NoMatchMessage>
+        </div>
+      </EuiPanel>
+    </DashboardTable>
+    <EuiSpacer>
+      <div
+        className="euiSpacer euiSpacer--l"
+      />
+    </EuiSpacer>
+    <EuiFlexGroup
+      alignItems="baseline"
+    >
+      <div
+        className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <EuiFlexItem
+          grow={4}
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrow4"
+          >
+            <ServiceMap
+              addFilter={[Function]}
+              currService=""
+              idSelected="latency"
+              page="dashboard"
+              serviceMap={Object {}}
+              setIdSelected={[Function]}
+            >
+              <EuiPanel>
+                <div
+                  className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                >
+                  <PanelTitle
+                    title="Service map"
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Service map
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                  <EuiSpacer
+                    size="m"
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--m"
+                    />
+                  </EuiSpacer>
+                  <EuiButtonGroup
+                    buttonSize="s"
+                    color="text"
+                    idSelected="latency"
+                    onChange={[Function]}
+                    options={
+                      Array [
+                        Object {
+                          "id": "latency",
+                          "label": "Latency",
+                        },
+                        Object {
+                          "id": "error_rate",
+                          "label": "Error rate",
+                        },
+                        Object {
+                          "id": "throughput",
+                          "label": "Throughput",
+                        },
+                      ]
+                    }
+                  >
+                    <fieldset
+                      className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                      disabled={false}
+                    >
+                      <EuiScreenReaderOnly>
+                        <legend
+                          className="euiScreenReaderOnly"
+                        />
+                      </EuiScreenReaderOnly>
+                      <div
+                        className="euiButtonGroup__buttons"
+                      >
+                        <EuiButtonGroupButton
+                          color="text"
+                          element="label"
+                          id="latency"
+                          isDisabled={false}
+                          isIconOnly={false}
+                          isSelected={true}
+                          key="0"
+                          label="Latency"
+                          name="random_html_id"
+                          onChange={[Function]}
+                          size="s"
+                        >
+                          <EuiButtonDisplay
+                            baseClassName="euiButtonGroupButton"
+                            className="euiButtonGroupButton-isSelected"
+                            color="text"
+                            element="label"
+                            fill={true}
+                            htmlFor="random_html_id"
+                            isDisabled={false}
+                            onClick={[Function]}
+                            size="s"
+                            textProps={
+                              Object {
+                                "className": "euiButtonGroupButton__textShift",
+                                "data-text": "Latency",
+                                "ref": [Function],
+                                "title": "Latency",
+                              }
+                            }
+                          >
+                            <label
+                              className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                              disabled={false}
+                              htmlFor="random_html_id"
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "minWidth": undefined,
+                                }
+                              }
+                            >
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text euiButtonGroupButton__textShift",
+                                    "data-text": "Latency",
+                                    "ref": [Function],
+                                    "title": "Latency",
+                                  }
+                                }
+                              >
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    className="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Latency"
+                                    title="Latency"
+                                  >
+                                    <input
+                                      checked={true}
+                                      className="euiScreenReaderOnly"
+                                      data-test-subj="latency"
+                                      disabled={false}
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      onChange={[Function]}
+                                      type="radio"
+                                    />
+                                    Latency
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </label>
+                          </EuiButtonDisplay>
+                        </EuiButtonGroupButton>
+                        <EuiButtonGroupButton
+                          color="text"
+                          element="label"
+                          id="error_rate"
+                          isDisabled={false}
+                          isIconOnly={false}
+                          isSelected={false}
+                          key="1"
+                          label="Error rate"
+                          name="random_html_id"
+                          onChange={[Function]}
+                          size="s"
+                        >
+                          <EuiButtonDisplay
+                            baseClassName="euiButtonGroupButton"
+                            className=""
+                            color="text"
+                            element="label"
+                            fill={false}
+                            htmlFor="random_html_id"
+                            isDisabled={false}
+                            onClick={[Function]}
+                            size="s"
+                            textProps={
+                              Object {
+                                "className": "euiButtonGroupButton__textShift",
+                                "data-text": "Error rate",
+                                "ref": [Function],
+                                "title": "Error rate",
+                              }
+                            }
+                          >
+                            <label
+                              className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              disabled={false}
+                              htmlFor="random_html_id"
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "minWidth": undefined,
+                                }
+                              }
+                            >
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text euiButtonGroupButton__textShift",
+                                    "data-text": "Error rate",
+                                    "ref": [Function],
+                                    "title": "Error rate",
+                                  }
+                                }
+                              >
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    className="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Error rate"
+                                    title="Error rate"
+                                  >
+                                    <input
+                                      checked={false}
+                                      className="euiScreenReaderOnly"
+                                      data-test-subj="error_rate"
+                                      disabled={false}
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      onChange={[Function]}
+                                      type="radio"
+                                    />
+                                    Error rate
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </label>
+                          </EuiButtonDisplay>
+                        </EuiButtonGroupButton>
+                        <EuiButtonGroupButton
+                          color="text"
+                          element="label"
+                          id="throughput"
+                          isDisabled={false}
+                          isIconOnly={false}
+                          isSelected={false}
+                          key="2"
+                          label="Throughput"
+                          name="random_html_id"
+                          onChange={[Function]}
+                          size="s"
+                        >
+                          <EuiButtonDisplay
+                            baseClassName="euiButtonGroupButton"
+                            className=""
+                            color="text"
+                            element="label"
+                            fill={false}
+                            htmlFor="random_html_id"
+                            isDisabled={false}
+                            onClick={[Function]}
+                            size="s"
+                            textProps={
+                              Object {
+                                "className": "euiButtonGroupButton__textShift",
+                                "data-text": "Throughput",
+                                "ref": [Function],
+                                "title": "Throughput",
+                              }
+                            }
+                          >
+                            <label
+                              className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                              disabled={false}
+                              htmlFor="random_html_id"
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "minWidth": undefined,
+                                }
+                              }
+                            >
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text euiButtonGroupButton__textShift",
+                                    "data-text": "Throughput",
+                                    "ref": [Function],
+                                    "title": "Throughput",
+                                  }
+                                }
+                              >
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    className="euiButton__text euiButtonGroupButton__textShift"
+                                    data-text="Throughput"
+                                    title="Throughput"
+                                  >
+                                    <input
+                                      checked={false}
+                                      className="euiScreenReaderOnly"
+                                      data-test-subj="throughput"
+                                      disabled={false}
+                                      id="random_html_id"
+                                      name="random_html_id"
+                                      onChange={[Function]}
+                                      type="radio"
+                                    />
+                                    Throughput
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </label>
+                          </EuiButtonDisplay>
+                        </EuiButtonGroupButton>
+                      </div>
+                    </fieldset>
+                  </EuiButtonGroup>
+                  <EuiHorizontalRule
+                    margin="m"
+                  >
+                    <hr
+                      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                    />
+                  </EuiHorizontalRule>
+                  <EuiFlexGroup
+                    alignItems="center"
+                    gutterSize="s"
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiText>
+                            <div
+                              className="euiText euiText--medium"
+                            >
+                              Focus on
+                            </div>
+                          </EuiText>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem>
+                        <div
+                          className="euiFlexItem"
+                        >
+                          <EuiFieldSearch
+                            compressed={false}
+                            fullWidth={false}
+                            incremental={false}
+                            isClearable={true}
+                            isInvalid={false}
+                            isLoading={false}
+                            onChange={[Function]}
+                            onSearch={[Function]}
+                            placeholder="Service name"
+                            value=""
+                          >
+                            <EuiFormControlLayout
+                              compressed={false}
+                              fullWidth={false}
+                              icon="search"
+                              isLoading={false}
+                            >
+                              <div
+                                className="euiFormControlLayout"
+                              >
+                                <div
+                                  className="euiFormControlLayout__childrenWrapper"
+                                >
+                                  <EuiValidatableControl
+                                    isInvalid={false}
+                                  >
+                                    <input
+                                      className="euiFieldSearch"
+                                      onChange={[Function]}
+                                      onKeyUp={[Function]}
+                                      placeholder="Service name"
+                                      type="search"
+                                      value=""
+                                    />
+                                  </EuiValidatableControl>
+                                  <EuiFormControlLayoutIcons
+                                    compressed={false}
+                                    icon="search"
+                                    isLoading={false}
+                                  >
+                                    <div
+                                      className="euiFormControlLayoutIcons"
+                                    >
+                                      <EuiFormControlLayoutCustomIcon
+                                        size="m"
+                                        type="search"
+                                      >
+                                        <span
+                                          className="euiFormControlLayoutCustomIcon"
+                                        >
+                                          <EuiIcon
+                                            aria-hidden="true"
+                                            className="euiFormControlLayoutCustomIcon__icon"
+                                            size="m"
+                                            type="search"
+                                          >
+                                            <EuiIconSearch
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                              focusable="false"
+                                              role="img"
+                                              style={null}
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                <path
+                                                  d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                                />
+                                              </svg>
+                                            </EuiIconSearch>
+                                          </EuiIcon>
+                                        </span>
+                                      </EuiFormControlLayoutCustomIcon>
+                                    </div>
+                                  </EuiFormControlLayoutIcons>
+                                </div>
+                              </div>
+                            </EuiFormControlLayout>
+                          </EuiFieldSearch>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                  <EuiSpacer>
+                    <div
+                      className="euiSpacer euiSpacer--l"
+                    />
+                  </EuiSpacer>
+                  <div
+                    style={
+                      Object {
+                        "minHeight": 434,
+                      }
+                    }
+                  >
+                    <NoMatchMessage
+                      size="s"
+                    >
+                      <EuiSpacer
+                        size="s"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--s"
+                        />
+                      </EuiSpacer>
+                      <EuiEmptyPrompt
+                        body={
+                          <EuiText>
+                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                          </EuiText>
+                        }
+                        title={
+                          <h2>
+                            No matches
+                          </h2>
+                        }
+                      >
+                        <div
+                          className="euiEmptyPrompt"
+                        >
+                          <EuiTitle
+                            size="m"
+                          >
+                            <h2
+                              className="euiTitle euiTitle--medium"
+                            >
+                              No matches
+                            </h2>
+                          </EuiTitle>
+                          <EuiTextColor
+                            color="subdued"
+                          >
+                            <span
+                              className="euiTextColor euiTextColor--subdued"
+                            >
+                              <EuiSpacer
+                                size="m"
+                              >
+                                <div
+                                  className="euiSpacer euiSpacer--m"
+                                />
+                              </EuiSpacer>
+                              <EuiText>
+                                <div
+                                  className="euiText euiText--medium"
+                                >
+                                  <EuiText>
+                                    <div
+                                      className="euiText euiText--medium"
+                                    >
+                                      No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                    </div>
+                                  </EuiText>
+                                </div>
+                              </EuiText>
+                            </span>
+                          </EuiTextColor>
+                        </div>
+                      </EuiEmptyPrompt>
+                      <EuiSpacer
+                        size="s"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--s"
+                        />
+                      </EuiSpacer>
+                    </NoMatchMessage>
+                  </div>
+                </div>
+              </EuiPanel>
+            </ServiceMap>
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <div
+            className="euiFlexItem"
+          >
+            <EuiFlexGroup
+              direction="column"
+            >
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionColumn euiFlexGroup--responsive"
+              >
+                <EuiFlexItem>
+                  <div
+                    className="euiFlexItem"
+                  >
+                    <ErrorRatePlt
+                      items={
+                        Object {
+                          "fixedInterval": "1h",
+                          "items": Array [],
+                        }
+                      }
+                      setEndTime={[MockFunction]}
+                      setStartTime={[MockFunction]}
+                    >
+                      <EuiPanel
+                        style={
+                          Object {
+                            "minHeight": 308,
+                            "minWidth": 433,
+                          }
+                        }
+                      >
+                        <div
+                          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                          style={
+                            Object {
+                              "minHeight": 308,
+                              "minWidth": 433,
+                            }
+                          }
+                        >
+                          <PanelTitle
+                            title="Trace error rate over time"
+                          >
+                            <EuiText
+                              size="m"
+                            >
+                              <div
+                                className="euiText euiText--medium"
+                              >
+                                <span
+                                  className="panel-title"
+                                >
+                                  Trace error rate over time
+                                </span>
+                              </div>
+                            </EuiText>
+                          </PanelTitle>
+                          <EuiHorizontalRule
+                            margin="m"
+                          >
+                            <hr
+                              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                            />
+                          </EuiHorizontalRule>
+                          <NoMatchMessage
+                            size="s"
+                          >
+                            <EuiSpacer
+                              size="s"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--s"
+                              />
+                            </EuiSpacer>
+                            <EuiEmptyPrompt
+                              body={
+                                <EuiText>
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </EuiText>
+                              }
+                              title={
+                                <h2>
+                                  No matches
+                                </h2>
+                              }
+                            >
+                              <div
+                                className="euiEmptyPrompt"
+                              >
+                                <EuiTitle
+                                  size="m"
+                                >
+                                  <h2
+                                    className="euiTitle euiTitle--medium"
+                                  >
+                                    No matches
+                                  </h2>
+                                </EuiTitle>
+                                <EuiTextColor
+                                  color="subdued"
+                                >
+                                  <span
+                                    className="euiTextColor euiTextColor--subdued"
+                                  >
+                                    <EuiSpacer
+                                      size="m"
+                                    >
+                                      <div
+                                        className="euiSpacer euiSpacer--m"
+                                      />
+                                    </EuiSpacer>
+                                    <EuiText>
+                                      <div
+                                        className="euiText euiText--medium"
+                                      >
+                                        <EuiText>
+                                          <div
+                                            className="euiText euiText--medium"
+                                          >
+                                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                          </div>
+                                        </EuiText>
+                                      </div>
+                                    </EuiText>
+                                  </span>
+                                </EuiTextColor>
+                              </div>
+                            </EuiEmptyPrompt>
+                            <EuiSpacer
+                              size="s"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--s"
+                              />
+                            </EuiSpacer>
+                          </NoMatchMessage>
+                        </div>
+                      </EuiPanel>
+                    </ErrorRatePlt>
+                  </div>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <div
+                    className="euiFlexItem"
+                  >
+                    <ThroughputPlt
+                      items={
+                        Object {
+                          "fixedInterval": "1h",
+                          "items": Array [],
+                        }
+                      }
+                      setEndTime={[MockFunction]}
+                      setStartTime={[MockFunction]}
+                    >
+                      <EuiPanel
+                        style={
+                          Object {
+                            "minHeight": 308,
+                            "minWidth": 433,
+                          }
+                        }
+                      >
+                        <div
+                          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+                          style={
+                            Object {
+                              "minHeight": 308,
+                              "minWidth": 433,
+                            }
+                          }
+                        >
+                          <PanelTitle
+                            title="Traces over time"
+                          >
+                            <EuiText
+                              size="m"
+                            >
+                              <div
+                                className="euiText euiText--medium"
+                              >
+                                <span
+                                  className="panel-title"
+                                >
+                                  Traces over time
+                                </span>
+                              </div>
+                            </EuiText>
+                          </PanelTitle>
+                          <EuiHorizontalRule
+                            margin="m"
+                          >
+                            <hr
+                              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                            />
+                          </EuiHorizontalRule>
+                          <NoMatchMessage
+                            size="s"
+                          >
+                            <EuiSpacer
+                              size="s"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--s"
+                              />
+                            </EuiSpacer>
+                            <EuiEmptyPrompt
+                              body={
+                                <EuiText>
+                                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                </EuiText>
+                              }
+                              title={
+                                <h2>
+                                  No matches
+                                </h2>
+                              }
+                            >
+                              <div
+                                className="euiEmptyPrompt"
+                              >
+                                <EuiTitle
+                                  size="m"
+                                >
+                                  <h2
+                                    className="euiTitle euiTitle--medium"
+                                  >
+                                    No matches
+                                  </h2>
+                                </EuiTitle>
+                                <EuiTextColor
+                                  color="subdued"
+                                >
+                                  <span
+                                    className="euiTextColor euiTextColor--subdued"
+                                  >
+                                    <EuiSpacer
+                                      size="m"
+                                    >
+                                      <div
+                                        className="euiSpacer euiSpacer--m"
+                                      />
+                                    </EuiSpacer>
+                                    <EuiText>
+                                      <div
+                                        className="euiText euiText--medium"
+                                      >
+                                        <EuiText>
+                                          <div
+                                            className="euiText euiText--medium"
+                                          >
+                                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                                          </div>
+                                        </EuiText>
+                                      </div>
+                                    </EuiText>
+                                  </span>
+                                </EuiTextColor>
+                              </div>
+                            </EuiEmptyPrompt>
+                            <EuiSpacer
+                              size="s"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--s"
+                              />
+                            </EuiSpacer>
+                          </NoMatchMessage>
+                        </div>
+                      </EuiPanel>
+                    </ThroughputPlt>
+                  </div>
+                </EuiFlexItem>
+              </div>
+            </EuiFlexGroup>
+          </div>
+        </EuiFlexItem>
+      </div>
+    </EuiFlexGroup>
+  </DashboardContent>
+</Dashboard>
+`;
+
+exports[`Dashboard component renders empty dashboard 1`] = `
+<Dashboard
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Dashboard",
+      },
+    ]
+  }
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "href": "test#/",
+                "text": "test",
+              },
+              Object {
+                "href": "#/trace_analytics/home",
+                "text": "Trace analytics",
+              },
+              Object {
+                "href": "#/trace_analytics/home",
+                "text": "Dashboard",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  indicesExist={false}
+  page="dashboard"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Dashboard
+    </h2>
+  </EuiTitle>
+  <DashboardContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Dashboard",
+        },
+      ]
+    }
+    chrome={
+      Object {
+        "getIsNavDrawerLocked$": [MockFunction],
+        "setBreadcrumbs": [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [
+                Object {
+                  "href": "test#/",
+                  "text": "test",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Trace analytics",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Dashboard",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    indicesExist={false}
+    page="dashboard"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      page="dashboard"
+      query=""
+      refresh={[Function]}
+      setEndTime={[MockFunction]}
+      setFilters={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      setQuery={[MockFunction]}
+      setStartTime={[MockFunction]}
+      startTime="now-5m"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <EuiFieldSearch
+                compressed={false}
+                data-test-subj="search-bar-input-box"
+                fullWidth={true}
+                incremental={false}
+                isClearable={false}
+                isLoading={false}
+                onChange={[Function]}
+                onSearch={[Function]}
+                placeholder="Trace ID, trace group name, service name"
+                value=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <EuiValidatableControl>
+                        <input
+                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          data-test-subj="search-bar-input-box"
+                          onChange={[Function]}
+                          onKeyUp={[Function]}
+                          placeholder="Trace ID, trace group name, service name"
+                          type="search"
+                          value=""
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "maxWidth": "40vw",
+                }
+              }
+            >
+              <EuiSuperDatePicker
+                commonlyUsedRanges={
+                  Array [
+                    Object {
+                      "end": "now/d",
+                      "label": "Today",
+                      "start": "now/d",
+                    },
+                    Object {
+                      "end": "now/w",
+                      "label": "This week",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now/M",
+                      "label": "This month",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now/y",
+                      "label": "This year",
+                      "start": "now/y",
+                    },
+                    Object {
+                      "end": "now-1d/d",
+                      "label": "Yesterday",
+                      "start": "now-1d/d",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Week to date",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Month to date",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Year to date",
+                      "start": "now/y",
+                    },
+                  ]
+                }
+                dateFormat=""
+                end="now"
+                isAutoRefreshOnly={false}
+                isDisabled={false}
+                isPaused={true}
+                onTimeChange={[Function]}
+                recentlyUsedRanges={Array []}
+                refreshInterval={0}
+                showUpdateButton={false}
+                start="now-5m"
+                timeFormat="HH:mm"
+              >
+                <EuiFlexGroup
+                  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  gutterSize="s"
+                  responsive={false}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiFormControlLayout
+                          className="euiSuperDatePicker"
+                          isDisabled={false}
+                          prepend={
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            />
+                          }
+                        >
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium 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>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        page="dashboard"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          }
+        }
+      >
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          responsive={false}
+          style={
+            Object {
+              "minHeight": 32,
+            }
+          }
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <GlobalFilterButton>
+                  <EuiPopover
+                    anchorPosition="rightUp"
+                    button={
+                      <EuiButtonIcon
+                        aria-label="Change all filters"
+                        iconType="filter"
+                        onClick={[Function]}
+                        title="Change all filters"
+                      />
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconEmpty
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                />
+                              </EuiIconEmpty>
+                            </EuiIcon>
+                          </button>
+                        </EuiButtonIcon>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <MissingConfigurationMessage>
+      <EuiEmptyPrompt
+        actions={
+          <EuiButton
+            color="primary"
+            iconSide="right"
+            iconType="popout"
+            onClick={[Function]}
+          >
+            Learn more
+          </EuiButton>
+        }
+        body={
+          <EuiText>
+            The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+          </EuiText>
+        }
+        title={
+          <h2>
+            Trace Analytics not set up
+          </h2>
+        }
+      >
+        <div
+          className="euiEmptyPrompt"
+        >
+          <EuiTitle
+            size="m"
+          >
+            <h2
+              className="euiTitle euiTitle--medium"
+            >
+              Trace Analytics not set up
+            </h2>
+          </EuiTitle>
+          <EuiTextColor
+            color="subdued"
+          >
+            <span
+              className="euiTextColor euiTextColor--subdued"
+            >
+              <EuiSpacer
+                size="m"
+              >
+                <div
+                  className="euiSpacer euiSpacer--m"
+                />
+              </EuiSpacer>
+              <EuiText>
+                <div
+                  className="euiText euiText--medium"
+                >
+                  <EuiText>
+                    <div
+                      className="euiText euiText--medium"
+                    >
+                      The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+                    </div>
+                  </EuiText>
+                </div>
+              </EuiText>
+            </span>
+          </EuiTextColor>
+          <EuiSpacer
+            size="l"
+          >
+            <div
+              className="euiSpacer euiSpacer--l"
+            />
+          </EuiSpacer>
+          <EuiButton
+            color="primary"
+            iconSide="right"
+            iconType="popout"
+            onClick={[Function]}
+          >
+            <EuiButtonDisplay
+              baseClassName="euiButton"
+              color="primary"
+              disabled={false}
+              element="button"
+              iconSide="right"
+              iconType="popout"
+              isDisabled={false}
+              onClick={[Function]}
+              type="button"
+            >
+              <button
+                className="euiButton euiButton--primary"
+                disabled={false}
+                onClick={[Function]}
+                style={
+                  Object {
+                    "minWidth": undefined,
+                  }
+                }
+                type="button"
+              >
+                <EuiButtonContent
+                  className="euiButton__content"
+                  iconSide="right"
+                  iconType="popout"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
+                >
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                  >
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="popout"
+                    >
+                      <EuiIconEmpty
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                        focusable="false"
+                        role="img"
+                        style={null}
+                      >
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </EuiIconEmpty>
+                    </EuiIcon>
+                    <span
+                      className="euiButton__text"
+                    >
+                      Learn more
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonDisplay>
+          </EuiButton>
+        </div>
+      </EuiEmptyPrompt>
+    </MissingConfigurationMessage>
+  </DashboardContent>
+</Dashboard>
+`;
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard_table.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard_table.test.tsx.snap
new file mode 100644
index 0000000000..e5a546bb0a
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard_table.test.tsx.snap
@@ -0,0 +1,3434 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dashboard table component renders dashboard table 1`] = `
+<DashboardTable
+  addFilter={[MockFunction]}
+  addPercentileFilter={[MockFunction]}
+  filters={
+    Array [
+      Object {
+        "disabled": false,
+        "field": "traceGroup",
+        "inverted": false,
+        "operator": "exists",
+        "value": "exists",
+      },
+    ]
+  }
+  items={
+    Array [
+      Object {
+        "24_hour_latency_trend": null,
+        "dashboard_average_latency": 187.27,
+        "dashboard_error_rate": 14.285714285714285,
+        "dashboard_latency_variance": Array [
+          26.43,
+          325.4,
+          325.4,
+        ],
+        "dashboard_trace_group_name": "client_create_order",
+        "dashboard_traces": 7,
+      },
+    ]
+  }
+  loading={false}
+  page="dashboard"
+  setRedirect={[MockFunction]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Latency by trace group"
+                totalItems={1}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Latency by trace group
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (1)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiLink
+                data-test-subj="dashboard-table-percentile-button-1"
+                onClick={[Function]}
+              >
+                <button
+                  className="euiLink euiLink--primary"
+                  data-test-subj="dashboard-table-percentile-button-1"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <EuiText
+                    size="xs"
+                  >
+                    <div
+                      className="euiText euiText--extraSmall"
+                    >
+                      <span
+                        style={
+                          Object {
+                            "color": "#957ac9",
+                          }
+                        }
+                      >
+                        □
+                      </span>
+                       &lt; 95 percentile
+                    </div>
+                  </EuiText>
+                </button>
+              </EuiLink>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={1}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow1"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiLink
+                data-test-subj="dashboard-table-percentile-button-2"
+                onClick={[Function]}
+              >
+                <button
+                  className="euiLink euiLink--primary"
+                  data-test-subj="dashboard-table-percentile-button-2"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <EuiText
+                    size="xs"
+                  >
+                    <div
+                      className="euiText euiText--extraSmall"
+                    >
+                      <span
+                        style={
+                          Object {
+                            "color": "#957ac9",
+                          }
+                        }
+                      >
+                        ■
+                      </span>
+                       &gt;= 95 percentile
+                    </div>
+                  </EuiText>
+                </button>
+              </EuiLink>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={1}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow1"
+            />
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <EuiInMemoryTable
+        columns={
+          Array [
+            Object {
+              "align": "left",
+              "field": "dashboard_trace_group_name",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Trace group name
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "center",
+              "field": "dashboard_latency_variance",
+              "name": <React.Fragment>
+                <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Range of latencies for traces within a trace group in the selected time range.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <span>
+                    Latency variance (ms)
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </span>
+                </EuiToolTip>
+                <EuiText
+                  color="subdued"
+                  size="xs"
+                >
+                  0                100            200            300            400
+                </EuiText>
+              </React.Fragment>,
+              "render": [Function],
+              "sortable": [Function],
+              "width": "300px",
+            },
+            Object {
+              "align": "right",
+              "dataType": "number",
+              "field": "dashboard_average_latency",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Average latency of traces within a trace group in the selected time range.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Average latency (ms)
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "24_hour_latency_trend",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    24 hour time series view of hourly average, hourly percentile, and hourly range of latency for traces within a trace group.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    24-hour latency trend
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": false,
+            },
+            Object {
+              "align": "right",
+              "field": "dashboard_error_rate",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Error rate based on count of trace errors within a trace group in the selected time range.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Error rate
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "dashboard_traces",
+              "name": <EuiToolTip
+                content={
+                  <EuiText
+                    size="xs"
+                  >
+                    Count of traces with unique trace identifiers in the selected time range.
+                  </EuiText>
+                }
+                delay="regular"
+                position="top"
+              >
+                <React.Fragment>
+                  <div>
+                    Traces
+                     
+                    <EuiIcon
+                      className="eui-alignTop"
+                      color="subdued"
+                      size="s"
+                      type="questionInCircle"
+                    />
+                  </div>
+                  <div>
+                     
+                  </div>
+                </React.Fragment>
+              </EuiToolTip>,
+              "render": [Function],
+              "sortable": true,
+            },
+          ]
+        }
+        data-test-subj="dashboardTable"
+        items={
+          Array [
+            Object {
+              "24_hour_latency_trend": null,
+              "dashboard_average_latency": 187.27,
+              "dashboard_error_rate": 14.285714285714285,
+              "dashboard_latency_variance": Array [
+                26.43,
+                325.4,
+                325.4,
+              ],
+              "dashboard_trace_group_name": "client_create_order",
+              "dashboard_traces": 7,
+            },
+          ]
+        }
+        loading={false}
+        onTableChange={[Function]}
+        pagination={
+          Object {
+            "initialPageSize": 10,
+            "pageSizeOptions": Array [
+              5,
+              10,
+              15,
+            ],
+          }
+        }
+        responsive={true}
+        sorting={
+          Object {
+            "sort": Object {
+              "direction": "desc",
+              "field": "dashboard_latency_variance",
+            },
+          }
+        }
+        tableLayout="auto"
+      >
+        <EuiBasicTable
+          columns={
+            Array [
+              Object {
+                "align": "left",
+                "field": "dashboard_trace_group_name",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Trace group name
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "center",
+                "field": "dashboard_latency_variance",
+                "name": <React.Fragment>
+                  <EuiToolTip
+                    content={
+                      <EuiText
+                        size="xs"
+                      >
+                        Range of latencies for traces within a trace group in the selected time range.
+                      </EuiText>
+                    }
+                    delay="regular"
+                    position="top"
+                  >
+                    <span>
+                      Latency variance (ms)
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </span>
+                  </EuiToolTip>
+                  <EuiText
+                    color="subdued"
+                    size="xs"
+                  >
+                    0                100            200            300            400
+                  </EuiText>
+                </React.Fragment>,
+                "render": [Function],
+                "sortable": [Function],
+                "width": "300px",
+              },
+              Object {
+                "align": "right",
+                "dataType": "number",
+                "field": "dashboard_average_latency",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Average latency of traces within a trace group in the selected time range.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Average latency (ms)
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "24_hour_latency_trend",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      24 hour time series view of hourly average, hourly percentile, and hourly range of latency for traces within a trace group.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      24-hour latency trend
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": false,
+              },
+              Object {
+                "align": "right",
+                "field": "dashboard_error_rate",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Error rate based on count of trace errors within a trace group in the selected time range.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Error rate
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "dashboard_traces",
+                "name": <EuiToolTip
+                  content={
+                    <EuiText
+                      size="xs"
+                    >
+                      Count of traces with unique trace identifiers in the selected time range.
+                    </EuiText>
+                  }
+                  delay="regular"
+                  position="top"
+                >
+                  <React.Fragment>
+                    <div>
+                      Traces
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </div>
+                    <div>
+                       
+                    </div>
+                  </React.Fragment>
+                </EuiToolTip>,
+                "render": [Function],
+                "sortable": true,
+              },
+            ]
+          }
+          data-test-subj="dashboardTable"
+          items={
+            Array [
+              Object {
+                "24_hour_latency_trend": null,
+                "dashboard_average_latency": 187.27,
+                "dashboard_error_rate": 14.285714285714285,
+                "dashboard_latency_variance": Array [
+                  26.43,
+                  325.4,
+                  325.4,
+                ],
+                "dashboard_trace_group_name": "client_create_order",
+                "dashboard_traces": 7,
+              },
+            ]
+          }
+          loading={false}
+          noItemsMessage="No items found"
+          onChange={[Function]}
+          pagination={
+            Object {
+              "hidePerPageOptions": undefined,
+              "pageIndex": 0,
+              "pageSize": 10,
+              "pageSizeOptions": Array [
+                5,
+                10,
+                15,
+              ],
+              "totalItemCount": 1,
+            }
+          }
+          responsive={true}
+          sorting={
+            Object {
+              "allowNeutralSort": true,
+              "sort": Object {
+                "direction": "desc",
+                "field": <React.Fragment>
+                  <EuiToolTip
+                    content={
+                      <EuiText
+                        size="xs"
+                      >
+                        Range of latencies for traces within a trace group in the selected time range.
+                      </EuiText>
+                    }
+                    delay="regular"
+                    position="top"
+                  >
+                    <span>
+                      Latency variance (ms)
+                       
+                      <EuiIcon
+                        className="eui-alignTop"
+                        color="subdued"
+                        size="s"
+                        type="questionInCircle"
+                      />
+                    </span>
+                  </EuiToolTip>
+                  <EuiText
+                    color="subdued"
+                    size="xs"
+                  >
+                    0                100            200            300            400
+                  </EuiText>
+                </React.Fragment>,
+              },
+            }
+          }
+          tableLayout="auto"
+        >
+          <div
+            className="euiBasicTable"
+            data-test-subj="dashboardTable"
+          >
+            <div>
+              <EuiTableHeaderMobile>
+                <div
+                  className="euiTableHeaderMobile"
+                >
+                  <EuiFlexGroup
+                    alignItems="baseline"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiTableSortMobile
+                            items={
+                              Array [
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_dashboard_trace_group_name_0",
+                                  "name": <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <React.Fragment>
+                                      <div>
+                                        Trace group name
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </div>
+                                      <div>
+                                         
+                                      </div>
+                                    </React.Fragment>
+                                  </EuiToolTip>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": false,
+                                  "isSorted": true,
+                                  "key": "_data_s_dashboard_latency_variance_1",
+                                  "name": <React.Fragment>
+                                    <EuiToolTip
+                                      content={
+                                        <EuiText
+                                          size="xs"
+                                        >
+                                          Range of latencies for traces within a trace group in the selected time range.
+                                        </EuiText>
+                                      }
+                                      delay="regular"
+                                      position="top"
+                                    >
+                                      <span>
+                                        Latency variance (ms)
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </span>
+                                    </EuiToolTip>
+                                    <EuiText
+                                      color="subdued"
+                                      size="xs"
+                                    >
+                                      0                100            200            300            400
+                                    </EuiText>
+                                  </React.Fragment>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_dashboard_average_latency_2",
+                                  "name": <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Average latency of traces within a trace group in the selected time range.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <React.Fragment>
+                                      <div>
+                                        Average latency (ms)
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </div>
+                                      <div>
+                                         
+                                      </div>
+                                    </React.Fragment>
+                                  </EuiToolTip>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_dashboard_error_rate_4",
+                                  "name": <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Error rate based on count of trace errors within a trace group in the selected time range.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <React.Fragment>
+                                      <div>
+                                        Error rate
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </div>
+                                      <div>
+                                         
+                                      </div>
+                                    </React.Fragment>
+                                  </EuiToolTip>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_dashboard_traces_5",
+                                  "name": <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Count of traces with unique trace identifiers in the selected time range.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <React.Fragment>
+                                      <div>
+                                        Traces
+                                         
+                                        <EuiIcon
+                                          className="eui-alignTop"
+                                          color="subdued"
+                                          size="s"
+                                          type="questionInCircle"
+                                        />
+                                      </div>
+                                      <div>
+                                         
+                                      </div>
+                                    </React.Fragment>
+                                  </EuiToolTip>,
+                                  "onSort": [Function],
+                                },
+                              ]
+                            }
+                          >
+                            <div
+                              className="euiTableSortMobile"
+                            >
+                              <EuiPopover
+                                anchorPosition="downRight"
+                                button={
+                                  <EuiButtonEmpty
+                                    flush="right"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                    size="xs"
+                                  >
+                                    <EuiI18n
+                                      default="Sorting"
+                                      token="euiTableSortMobile.sorting"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownRight"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      flush="right"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                      size="xs"
+                                    >
+                                      <button
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              <EuiI18n
+                                                default="Sorting"
+                                                token="euiTableSortMobile.sorting"
+                                              >
+                                                Sorting
+                                              </EuiI18n>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </div>
+                          </EuiTableSortMobile>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </div>
+              </EuiTableHeaderMobile>
+              <EuiTable
+                id="random_html_id"
+                responsive={true}
+                tableLayout="auto"
+              >
+                <table
+                  className="euiTable euiTable--responsive euiTable--auto"
+                  id="random_html_id"
+                  tabIndex={-1}
+                >
+                  <EuiScreenReaderOnly>
+                    <caption
+                      className="euiScreenReaderOnly euiTableCaption"
+                    >
+                      <EuiDelayRender
+                        delay={500}
+                      />
+                    </caption>
+                  </EuiScreenReaderOnly>
+                  <EuiTableHeader>
+                    <thead>
+                      <tr>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_dashboard_trace_group_name_0"
+                          isSorted={false}
+                          key="_data_h_dashboard_trace_group_name_0"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_trace_group_name_0"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Trace group name  ",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Trace group name  "
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <div>
+                                              Trace group name
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </div>
+                                            <div>
+                                               
+                                            </div>
+                                          </span>
+                                        </EuiToolTip>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="center"
+                          data-test-subj="tableHeaderCell_dashboard_latency_variance_1"
+                          isSortAscending={false}
+                          isSorted={true}
+                          key="_data_h_dashboard_latency_variance_1"
+                          onSort={[Function]}
+                          width="300px"
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="descending"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_latency_variance_1"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": "300px",
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignCenter"
+                                isSortAscending={false}
+                                isSorted={true}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignCenter"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Latency variance (ms) 0                100            200            300            400",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Latency variance (ms) 0                100            200            300            400"
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Range of latencies for traces within a trace group in the selected time range.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <span
+                                              onBlur={[Function]}
+                                              onFocus={[Function]}
+                                            >
+                                              Latency variance (ms)
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiToolTip>
+                                        <EuiText
+                                          color="subdued"
+                                          size="xs"
+                                        >
+                                          <div
+                                            className="euiText euiText--extraSmall"
+                                          >
+                                            <EuiTextColor
+                                              color="subdued"
+                                              component="div"
+                                            >
+                                              <div
+                                                className="euiTextColor euiTextColor--subdued"
+                                              >
+                                                0                100            200            300            400
+                                              </div>
+                                            </EuiTextColor>
+                                          </div>
+                                        </EuiText>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                  <EuiIcon
+                                    className="euiTableSortIcon"
+                                    size="m"
+                                    type="sortDown"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_dashboard_average_latency_2"
+                          isSorted={false}
+                          key="_data_h_dashboard_average_latency_2"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_average_latency_2"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Average latency (ms)  ",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Average latency (ms)  "
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Average latency of traces within a trace group in the selected time range.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <div>
+                                              Average latency (ms)
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </div>
+                                            <div>
+                                               
+                                            </div>
+                                          </span>
+                                        </EuiToolTip>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_24_hour_latency_trend_3"
+                          key="_data_h_24_hour_latency_trend_3"
+                        >
+                          <th
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_24_hour_latency_trend_3"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <CellContents
+                              className="euiTableCellContent euiTableCellContent--alignRight"
+                              showSortMsg={false}
+                            >
+                              <span
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                              >
+                                <EuiInnerText>
+                                  <EuiI18n
+                                    default="{innerText}; {description}"
+                                    token="euiTableHeaderCell.titleTextWithDesc"
+                                    values={
+                                      Object {
+                                        "description": undefined,
+                                        "innerText": "24-hour latency trend  ",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiTableCellContent__text"
+                                      title="24-hour latency trend  "
+                                    >
+                                      <EuiToolTip
+                                        content={
+                                          <EuiText
+                                            size="xs"
+                                          >
+                                            24 hour time series view of hourly average, hourly percentile, and hourly range of latency for traces within a trace group.
+                                          </EuiText>
+                                        }
+                                        delay="regular"
+                                        position="top"
+                                      >
+                                        <span
+                                          className="euiToolTipAnchor"
+                                          onKeyUp={[Function]}
+                                          onMouseOut={[Function]}
+                                          onMouseOver={[Function]}
+                                        >
+                                          <div>
+                                            24-hour latency trend
+                                             
+                                            <EuiIcon
+                                              className="eui-alignTop"
+                                              color="subdued"
+                                              size="s"
+                                              type="questionInCircle"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                          </div>
+                                          <div>
+                                             
+                                          </div>
+                                        </span>
+                                      </EuiToolTip>
+                                    </span>
+                                  </EuiI18n>
+                                </EuiInnerText>
+                              </span>
+                            </CellContents>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_dashboard_error_rate_4"
+                          isSorted={false}
+                          key="_data_h_dashboard_error_rate_4"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_error_rate_4"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Error rate  ",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Error rate  "
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Error rate based on count of trace errors within a trace group in the selected time range.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <div>
+                                              Error rate
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </div>
+                                            <div>
+                                               
+                                            </div>
+                                          </span>
+                                        </EuiToolTip>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_dashboard_traces_5"
+                          isSorted={false}
+                          key="_data_h_dashboard_traces_5"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_dashboard_traces_5"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Traces  ",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Traces  "
+                                      >
+                                        <EuiToolTip
+                                          content={
+                                            <EuiText
+                                              size="xs"
+                                            >
+                                              Count of traces with unique trace identifiers in the selected time range.
+                                            </EuiText>
+                                          }
+                                          delay="regular"
+                                          position="top"
+                                        >
+                                          <span
+                                            className="euiToolTipAnchor"
+                                            onKeyUp={[Function]}
+                                            onMouseOut={[Function]}
+                                            onMouseOver={[Function]}
+                                          >
+                                            <div>
+                                              Traces
+                                               
+                                              <EuiIcon
+                                                className="eui-alignTop"
+                                                color="subdued"
+                                                size="s"
+                                                type="questionInCircle"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  />
+                                                </EuiIconEmpty>
+                                              </EuiIcon>
+                                            </div>
+                                            <div>
+                                               
+                                            </div>
+                                          </span>
+                                        </EuiToolTip>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                      </tr>
+                    </thead>
+                  </EuiTableHeader>
+                  <EuiTableBody
+                    bodyRef={[Function]}
+                  >
+                    <tbody>
+                      <EuiTableRow
+                        isSelected={false}
+                      >
+                        <tr
+                          className="euiTableRow"
+                        >
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_dashboard_trace_group_name_0_0"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Trace group name
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Traces of all requests that share a common API and operation at the start of distributed tracing instrumentation.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Trace group name
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  className=""
+                                  data-test-subj="dashboard-table-trace-group-name-button"
+                                  key=".0"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    data-test-subj="dashboard-table-trace-group-name-button"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    client_create_order
+                                  </button>
+                                </EuiLink>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="center"
+                            key="_data_column_dashboard_latency_variance_0_1"
+                            mobileOptions={
+                              Object {
+                                "header": <React.Fragment>
+                                  <EuiToolTip
+                                    content={
+                                      <EuiText
+                                        size="xs"
+                                      >
+                                        Range of latencies for traces within a trace group in the selected time range.
+                                      </EuiText>
+                                    }
+                                    delay="regular"
+                                    position="top"
+                                  >
+                                    <span>
+                                      Latency variance (ms)
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </span>
+                                  </EuiToolTip>
+                                  <EuiText
+                                    color="subdued"
+                                    size="xs"
+                                  >
+                                    0                100            200            300            400
+                                  </EuiText>
+                                </React.Fragment>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            width="300px"
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": "300px",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Range of latencies for traces within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <span
+                                      onBlur={[Function]}
+                                      onFocus={[Function]}
+                                    >
+                                      Latency variance (ms)
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </span>
+                                  </span>
+                                </EuiToolTip>
+                                <EuiText
+                                  color="subdued"
+                                  size="xs"
+                                >
+                                  <div
+                                    className="euiText euiText--extraSmall"
+                                  >
+                                    <EuiTextColor
+                                      color="subdued"
+                                      component="div"
+                                    >
+                                      <div
+                                        className="euiTextColor euiTextColor--subdued"
+                                      >
+                                        0                100            200            300            400
+                                      </div>
+                                    </EuiTextColor>
+                                  </div>
+                                </EuiText>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignCenter euiTableCellContent--overflowingContent"
+                              >
+                                <BoxPlt
+                                  className=""
+                                  key=".0"
+                                  plotParams={
+                                    Object {
+                                      "addFilter": [Function],
+                                      "currPercentileFilter": "",
+                                      "left": 26.43,
+                                      "max": 412,
+                                      "mid": 325.4,
+                                      "min": 0,
+                                      "right": 325.4,
+                                    }
+                                  }
+                                >
+                                  <EuiToolTip
+                                    content={
+                                      <EuiFlexGrid
+                                        columns={2}
+                                        gutterSize="s"
+                                        responsive={false}
+                                      >
+                                        <EuiFlexItem>
+                                          <EuiText
+                                            size="xs"
+                                            style={
+                                              Object {
+                                                "color": "#c9cbce",
+                                              }
+                                            }
+                                          >
+                                            <p>
+                                              Latency &lt;95 percentile
+                                            </p>
+                                          </EuiText>
+                                        </EuiFlexItem>
+                                        <EuiFlexItem>
+                                          <EuiText
+                                            size="xs"
+                                            style={
+                                              Object {
+                                                "color": "#c9cbce",
+                                              }
+                                            }
+                                          >
+                                            <p>
+                                              26ms - 325ms
+                                            </p>
+                                          </EuiText>
+                                        </EuiFlexItem>
+                                        <EuiFlexItem>
+                                          <EuiText
+                                            size="xs"
+                                            style={
+                                              Object {
+                                                "color": "#c9cbce",
+                                              }
+                                            }
+                                          >
+                                            <p>
+                                              Latency &gt;=95 percentile
+                                            </p>
+                                          </EuiText>
+                                        </EuiFlexItem>
+                                        <EuiFlexItem>
+                                          <EuiText
+                                            size="xs"
+                                            style={
+                                              Object {
+                                                "color": "#c9cbce",
+                                              }
+                                            }
+                                          >
+                                            <p>
+                                              325ms - 325ms
+                                            </p>
+                                          </EuiText>
+                                        </EuiFlexItem>
+                                      </EuiFlexGrid>
+                                    }
+                                    delay="regular"
+                                    onMouseOut={[Function]}
+                                    position="bottom"
+                                  >
+                                    <span
+                                      className="euiToolTipAnchor"
+                                      onKeyUp={[Function]}
+                                      onMouseOut={[Function]}
+                                      onMouseOver={[Function]}
+                                    >
+                                      <Plt
+                                        data={
+                                          Array [
+                                            Object {
+                                              "hoverinfo": "none",
+                                              "marker": Object {
+                                                "color": "rgba(0, 0, 0, 0)",
+                                              },
+                                              "orientation": "h",
+                                              "showlegend": false,
+                                              "type": "bar",
+                                              "width": 1,
+                                              "x": Array [
+                                                26.43,
+                                              ],
+                                              "y": Array [
+                                                0,
+                                              ],
+                                            },
+                                            Object {
+                                              "marker": Object {
+                                                "color": "#ffffff",
+                                                "line": Object {
+                                                  "color": "#957ac9",
+                                                  "width": 1,
+                                                },
+                                              },
+                                              "orientation": "h",
+                                              "type": "bar",
+                                              "width": 1,
+                                              "x": Array [
+                                                298.96999999999997,
+                                              ],
+                                              "y": Array [
+                                                0,
+                                              ],
+                                            },
+                                            Object {
+                                              "marker": Object {
+                                                "color": "#957ac9",
+                                                "line": Object {
+                                                  "color": "#957ac9",
+                                                  "width": 1,
+                                                },
+                                              },
+                                              "orientation": "h",
+                                              "type": "bar",
+                                              "width": 1,
+                                              "x": Array [
+                                                0,
+                                              ],
+                                              "y": Array [
+                                                0,
+                                              ],
+                                            },
+                                          ]
+                                        }
+                                        layout={
+                                          Object {
+                                            "height": 15,
+                                            "margin": Object {
+                                              "b": 0,
+                                              "l": 0,
+                                              "pad": 0,
+                                              "r": 0,
+                                              "t": 0,
+                                            },
+                                            "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                                            "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                                            "width": 250,
+                                            "xaxis": Object {
+                                              "fixedrange": true,
+                                              "range": Array [
+                                                0,
+                                                412,
+                                              ],
+                                              "showgrid": false,
+                                              "visible": false,
+                                            },
+                                            "yaxis": Object {
+                                              "fixedrange": true,
+                                              "range": Array [
+                                                -0.6,
+                                                0.6,
+                                              ],
+                                              "showgrid": false,
+                                              "visible": false,
+                                            },
+                                          }
+                                        }
+                                        onBlur={[Function]}
+                                        onClickHandler={[Function]}
+                                        onFocus={[Function]}
+                                        onHoverHandler={[Function]}
+                                      >
+                                        <PlotlyComponent
+                                          config={
+                                            Object {
+                                              "displayModeBar": false,
+                                            }
+                                          }
+                                          data={
+                                            Array [
+                                              Object {
+                                                "hoverinfo": "none",
+                                                "marker": Object {
+                                                  "color": "rgba(0, 0, 0, 0)",
+                                                },
+                                                "orientation": "h",
+                                                "showlegend": false,
+                                                "type": "bar",
+                                                "width": 1,
+                                                "x": Array [
+                                                  26.43,
+                                                ],
+                                                "y": Array [
+                                                  0,
+                                                ],
+                                              },
+                                              Object {
+                                                "marker": Object {
+                                                  "color": "#ffffff",
+                                                  "line": Object {
+                                                    "color": "#957ac9",
+                                                    "width": 1,
+                                                  },
+                                                },
+                                                "orientation": "h",
+                                                "type": "bar",
+                                                "width": 1,
+                                                "x": Array [
+                                                  298.96999999999997,
+                                                ],
+                                                "y": Array [
+                                                  0,
+                                                ],
+                                              },
+                                              Object {
+                                                "marker": Object {
+                                                  "color": "#957ac9",
+                                                  "line": Object {
+                                                    "color": "#957ac9",
+                                                    "width": 1,
+                                                  },
+                                                },
+                                                "orientation": "h",
+                                                "type": "bar",
+                                                "width": 1,
+                                                "x": Array [
+                                                  0,
+                                                ],
+                                                "y": Array [
+                                                  0,
+                                                ],
+                                              },
+                                            ]
+                                          }
+                                          debug={false}
+                                          divId="explorerPlotComponent"
+                                          layout={
+                                            Object {
+                                              "autosize": true,
+                                              "barmode": "stack",
+                                              "height": 15,
+                                              "hovermode": "closest",
+                                              "legend": Object {
+                                                "orientation": "h",
+                                                "traceorder": "normal",
+                                              },
+                                              "margin": Object {
+                                                "b": 0,
+                                                "l": 0,
+                                                "pad": 0,
+                                                "r": 0,
+                                                "t": 0,
+                                              },
+                                              "paper_bgcolor": "rgba(0, 0, 0, 0)",
+                                              "plot_bgcolor": "rgba(0, 0, 0, 0)",
+                                              "showlegend": false,
+                                              "width": 250,
+                                              "xaxis": Object {
+                                                "fixedrange": true,
+                                                "range": Array [
+                                                  0,
+                                                  412,
+                                                ],
+                                                "showgrid": false,
+                                                "visible": false,
+                                              },
+                                              "yaxis": Object {
+                                                "fixedrange": true,
+                                                "range": Array [
+                                                  -0.6,
+                                                  0.6,
+                                                ],
+                                                "showgrid": false,
+                                                "visible": false,
+                                              },
+                                            }
+                                          }
+                                          onClick={[Function]}
+                                          onHover={[Function]}
+                                          style={
+                                            Object {
+                                              "height": "100%",
+                                              "width": "100%",
+                                            }
+                                          }
+                                          useResizeHandler={true}
+                                        >
+                                          <div
+                                            id="explorerPlotComponent"
+                                            style={
+                                              Object {
+                                                "height": "100%",
+                                                "width": "100%",
+                                              }
+                                            }
+                                          />
+                                        </PlotlyComponent>
+                                      </Plt>
+                                    </span>
+                                  </EuiToolTip>
+                                </BoxPlt>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_dashboard_average_latency_0_2"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Average latency of traces within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Average latency (ms)
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Average latency of traces within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Average latency (ms)
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                187.27
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_24_hour_latency_trend_0_3"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      24 hour time series view of hourly average, hourly percentile, and hourly range of latency for traces within a trace group.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      24-hour latency trend
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      24 hour time series view of hourly average, hourly percentile, and hourly range of latency for traces within a trace group.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      24-hour latency trend
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                -
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_dashboard_error_rate_0_4"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Error rate based on count of trace errors within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Error rate
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Error rate based on count of trace errors within a trace group in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Error rate
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    14.29%
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_dashboard_traces_0_5"
+                            mobileOptions={
+                              Object {
+                                "header": <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Count of traces with unique trace identifiers in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <React.Fragment>
+                                    <div>
+                                      Traces
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      />
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </React.Fragment>
+                                </EuiToolTip>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <EuiToolTip
+                                  content={
+                                    <EuiText
+                                      size="xs"
+                                    >
+                                      Count of traces with unique trace identifiers in the selected time range.
+                                    </EuiText>
+                                  }
+                                  delay="regular"
+                                  position="top"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onKeyUp={[Function]}
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <div>
+                                      Traces
+                                       
+                                      <EuiIcon
+                                        className="eui-alignTop"
+                                        color="subdued"
+                                        size="s"
+                                        type="questionInCircle"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--subdued euiIcon-isLoading eui-alignTop"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </div>
+                                    <div>
+                                       
+                                    </div>
+                                  </span>
+                                </EuiToolTip>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  className=""
+                                  data-test-subj="dashboard-table-traces-button"
+                                  key=".0"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    data-test-subj="dashboard-table-traces-button"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiI18nNumber
+                                      value={7}
+                                    >
+                                      7
+                                    </EuiI18nNumber>
+                                  </button>
+                                </EuiLink>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                        </tr>
+                      </EuiTableRow>
+                    </tbody>
+                  </EuiTableBody>
+                </table>
+              </EuiTable>
+            </div>
+            <PaginationBar
+              aria-controls="random_html_id"
+              onPageChange={[Function]}
+              onPageSizeChange={[Function]}
+              pagination={
+                Object {
+                  "hidePerPageOptions": undefined,
+                  "pageIndex": 0,
+                  "pageSize": 10,
+                  "pageSizeOptions": Array [
+                    5,
+                    10,
+                    15,
+                  ],
+                  "totalItemCount": 1,
+                }
+              }
+            >
+              <div>
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiTablePagination
+                  activePage={0}
+                  aria-controls="random_html_id"
+                  itemsPerPage={10}
+                  itemsPerPageOptions={
+                    Array [
+                      5,
+                      10,
+                      15,
+                    ]
+                  }
+                  onChangeItemsPerPage={[Function]}
+                  onChangePage={[Function]}
+                  pageCount={1}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPopover
+                            anchorPosition="upRight"
+                            button={
+                              <EuiButtonEmpty
+                                color="text"
+                                data-test-subj="tablePaginationPopoverButton"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                onClick={[Function]}
+                                size="xs"
+                              >
+                                <EuiI18n
+                                  default="Rows per page"
+                                  token="euiTablePagination.rowsPerPage"
+                                />
+                                : 
+                                10
+                              </EuiButtonEmpty>
+                            }
+                            closePopover={[Function]}
+                            display="inlineBlock"
+                            hasArrow={true}
+                            isOpen={false}
+                            ownFocus={true}
+                            panelPaddingSize="none"
+                          >
+                            <div
+                              className="euiPopover euiPopover--anchorUpRight"
+                            >
+                              <div
+                                className="euiPopover__anchor"
+                              >
+                                <EuiButtonEmpty
+                                  color="text"
+                                  data-test-subj="tablePaginationPopoverButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  onClick={[Function]}
+                                  size="xs"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                                    data-test-subj="tablePaginationPopoverButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiButtonContent
+                                      className="euiButtonEmpty__content"
+                                      iconSide="right"
+                                      iconSize="s"
+                                      iconType="arrowDown"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButtonEmpty__text",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                      >
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="s"
+                                          type="arrowDown"
+                                        >
+                                          <EuiIconEmpty
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                            focusable="false"
+                                            role="img"
+                                            style={null}
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            />
+                                          </EuiIconEmpty>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButtonEmpty__text"
+                                        >
+                                          <EuiI18n
+                                            default="Rows per page"
+                                            token="euiTablePagination.rowsPerPage"
+                                          >
+                                            Rows per page
+                                          </EuiI18n>
+                                          : 
+                                          10
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonEmpty>
+                              </div>
+                            </div>
+                          </EuiPopover>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPagination
+                            activePage={0}
+                            aria-controls="random_html_id"
+                            onPageClick={[Function]}
+                            pageCount={1}
+                          >
+                            <nav
+                              className="euiPagination"
+                            >
+                              <EuiI18n
+                                default="Previous page, {page}"
+                                token="euiPagination.previousPage"
+                                values={
+                                  Object {
+                                    "page": 0,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Previous page"
+                                  token="euiPagination.disabledPreviousPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Previous page"
+                                    color="text"
+                                    data-test-subj="pagination-button-previous"
+                                    disabled={true}
+                                    iconType="arrowLeft"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Previous page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-previous"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowLeft"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                              <ul
+                                className="euiPagination__list"
+                              >
+                                <PaginationButton
+                                  key="0"
+                                  pageIndex={0}
+                                >
+                                  <li
+                                    className="euiPagination__item"
+                                  >
+                                    <EuiPaginationButton
+                                      aria-controls="random_html_id"
+                                      hideOnMobile={true}
+                                      isActive={true}
+                                      onClick={[Function]}
+                                      pageIndex={0}
+                                      totalPages={1}
+                                    >
+                                      <EuiI18n
+                                        default="Page {page} of {totalPages}"
+                                        token="euiPaginationButton.longPageString"
+                                        values={
+                                          Object {
+                                            "page": 1,
+                                            "totalPages": 1,
+                                          }
+                                        }
+                                      >
+                                        <EuiI18n
+                                          default="Page {page}"
+                                          token="euiPaginationButton.shortPageString"
+                                          values={
+                                            Object {
+                                              "page": 1,
+                                            }
+                                          }
+                                        >
+                                          <EuiButtonEmpty
+                                            aria-controls="random_html_id"
+                                            aria-current={true}
+                                            aria-label="Page 1 of 1"
+                                            className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                            color="text"
+                                            data-test-subj="pagination-button-0"
+                                            href="#random_html_id"
+                                            isDisabled={true}
+                                            onClick={[Function]}
+                                            size="s"
+                                          >
+                                            <button
+                                              aria-controls="random_html_id"
+                                              aria-current={true}
+                                              aria-label="Page 1 of 1"
+                                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                              data-test-subj="pagination-button-0"
+                                              disabled={true}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButtonEmpty__content"
+                                                iconSide="left"
+                                                iconSize="m"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButtonEmpty__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonEmpty__content"
+                                                >
+                                                  <span
+                                                    className="euiButtonEmpty__text"
+                                                  >
+                                                    1
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonEmpty>
+                                        </EuiI18n>
+                                      </EuiI18n>
+                                    </EuiPaginationButton>
+                                  </li>
+                                </PaginationButton>
+                              </ul>
+                              <EuiI18n
+                                default="Next page, {page}"
+                                token="euiPagination.nextPage"
+                                values={
+                                  Object {
+                                    "page": 2,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Next page"
+                                  token="euiPagination.disabledNextPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Next page"
+                                    color="text"
+                                    data-test-subj="pagination-button-next"
+                                    disabled={true}
+                                    iconType="arrowRight"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Next page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-next"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                            </nav>
+                          </EuiPagination>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </EuiTablePagination>
+              </div>
+            </PaginationBar>
+          </div>
+        </EuiBasicTable>
+      </EuiInMemoryTable>
+    </div>
+  </EuiPanel>
+</DashboardTable>
+`;
+
+exports[`Dashboard table component renders empty dashboard table message 1`] = `
+<DashboardTable
+  addFilter={[MockFunction]}
+  addPercentileFilter={[MockFunction]}
+  filters={Array []}
+  items={Array []}
+  loading={false}
+  page="dashboard"
+  setRedirect={[MockFunction]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Latency by trace group"
+                totalItems={0}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Latency by trace group
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (0)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiLink
+                data-test-subj="dashboard-table-percentile-button-1"
+                onClick={[Function]}
+              >
+                <button
+                  className="euiLink euiLink--primary"
+                  data-test-subj="dashboard-table-percentile-button-1"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <EuiText
+                    size="xs"
+                  >
+                    <div
+                      className="euiText euiText--extraSmall"
+                    >
+                      <span
+                        style={
+                          Object {
+                            "color": "#957ac9",
+                          }
+                        }
+                      >
+                        □
+                      </span>
+                       &lt; 95 percentile
+                    </div>
+                  </EuiText>
+                </button>
+              </EuiLink>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={1}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow1"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiLink
+                data-test-subj="dashboard-table-percentile-button-2"
+                onClick={[Function]}
+              >
+                <button
+                  className="euiLink euiLink--primary"
+                  data-test-subj="dashboard-table-percentile-button-2"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <EuiText
+                    size="xs"
+                  >
+                    <div
+                      className="euiText euiText--extraSmall"
+                    >
+                      <span
+                        style={
+                          Object {
+                            "color": "#957ac9",
+                          }
+                        }
+                      >
+                        ■
+                      </span>
+                       &gt;= 95 percentile
+                    </div>
+                  </EuiText>
+                </button>
+              </EuiLink>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={1}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow1"
+            />
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <NoMatchMessage
+        size="xl"
+      >
+        <EuiSpacer
+          size="xl"
+        >
+          <div
+            className="euiSpacer euiSpacer--xl"
+          />
+        </EuiSpacer>
+        <EuiEmptyPrompt
+          body={
+            <EuiText>
+              No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+            </EuiText>
+          }
+          title={
+            <h2>
+              No matches
+            </h2>
+          }
+        >
+          <div
+            className="euiEmptyPrompt"
+          >
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
+              >
+                No matches
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
+            >
+              <span
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                      </div>
+                    </EuiText>
+                  </div>
+                </EuiText>
+              </span>
+            </EuiTextColor>
+          </div>
+        </EuiEmptyPrompt>
+        <EuiSpacer
+          size="xl"
+        >
+          <div
+            className="euiSpacer euiSpacer--xl"
+          />
+        </EuiSpacer>
+      </NoMatchMessage>
+    </div>
+  </EuiPanel>
+</DashboardTable>
+`;
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/latency_trend_cell.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/latency_trend_cell.test.tsx.snap
new file mode 100644
index 0000000000..4b415df6f9
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/latency_trend_cell.test.tsx.snap
@@ -0,0 +1,175 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Latency trend cell component renders latency trend cell 1`] = `
+<LatencyTrendCell
+  item={
+    Object {
+      "popoverData": Array [
+        Object {
+          "hoverlabel": Object {
+            "bgcolor": "#d7c2ff",
+          },
+          "hovertemplate": "%{x}<br>Average latency: %{y}<extra></extra>",
+          "line": Object {
+            "color": "#987dcb",
+            "size": 2,
+          },
+          "marker": Object {
+            "color": "#987dcb",
+            "size": 8,
+          },
+          "mode": "lines+markers",
+          "type": "scatter",
+          "x": Array [
+            1605027600000,
+          ],
+          "y": Array [
+            154.71,
+          ],
+        },
+      ],
+      "trendData": Array [
+        Object {
+          "hoverinfo": "none",
+          "line": Object {
+            "color": "#000000",
+            "width": 1,
+          },
+          "mode": "lines",
+          "type": "scatter",
+          "x": Array [
+            1605027600000,
+          ],
+          "y": Array [
+            154.71,
+          ],
+        },
+      ],
+    }
+  }
+  traceGroupName="order"
+>
+  <EuiFlexGroup
+    gutterSize="s"
+  >
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <EuiFlexItem>
+        <div
+          className="euiFlexItem"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <LinePlt
+            data={
+              Array [
+                Object {
+                  "hoverinfo": "none",
+                  "line": Object {
+                    "color": "#000000",
+                    "width": 1,
+                  },
+                  "mode": "lines",
+                  "type": "scatter",
+                  "x": Array [
+                    1605027600000,
+                  ],
+                  "y": Array [
+                    154.71,
+                  ],
+                },
+              ]
+            }
+          >
+            <div>
+              -
+            </div>
+          </LinePlt>
+        </div>
+      </EuiFlexItem>
+      <EuiFlexItem
+        grow={false}
+      >
+        <div
+          className="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <EuiPopover
+            anchorPosition="downCenter"
+            button={
+              <EuiButtonIcon
+                aria-label="Open popover"
+                iconType="magnifyWithPlus"
+                onClick={[Function]}
+                size="s"
+              />
+            }
+            closePopover={[Function]}
+            display="inlineBlock"
+            hasArrow={true}
+            isOpen={false}
+            ownFocus={true}
+            panelPaddingSize="m"
+          >
+            <div
+              className="euiPopover euiPopover--anchorDownCenter"
+            >
+              <div
+                className="euiPopover__anchor"
+              >
+                <EuiButtonIcon
+                  aria-label="Open popover"
+                  iconType="magnifyWithPlus"
+                  onClick={[Function]}
+                  size="s"
+                >
+                  <button
+                    aria-label="Open popover"
+                    className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                    disabled={false}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <EuiIcon
+                      aria-hidden="true"
+                      className="euiButtonIcon__icon"
+                      color="inherit"
+                      size="m"
+                      type="magnifyWithPlus"
+                    >
+                      <EuiIconEmpty
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                        focusable="false"
+                        role="img"
+                        style={null}
+                      >
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </EuiIconEmpty>
+                    </EuiIcon>
+                  </button>
+                </EuiButtonIcon>
+              </div>
+            </div>
+          </EuiPopover>
+        </div>
+      </EuiFlexItem>
+    </div>
+  </EuiFlexGroup>
+</LatencyTrendCell>
+`;
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx b/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx
new file mode 100644
index 0000000000..0f5c169188
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/dashboard.test.tsx
@@ -0,0 +1,104 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { Dashboard } from '..';
+import { CoreStart } from '../../../../../../../../src/core/public';
+import { coreStartMock } from '../../../../../../test/__mocks__/coreMocks';
+
+describe('Dashboard component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty dashboard', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const wrapper = mount(
+      <Dashboard
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[
+          {
+            text: 'test',
+            href: 'test#/',
+          },
+        ]}
+        childBreadcrumbs={[
+          {
+            text: 'Trace analytics',
+            href: '#/trace_analytics/home',
+          },
+          {
+            text: 'Dashboard',
+            href: '#/trace_analytics/home',
+          },
+        ]}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        appConfigs={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={false}
+        page="dashboard"
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders dashboard', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const wrapper = mount(
+      <Dashboard
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[
+          {
+            text: 'test',
+            href: 'test#/',
+          },
+        ]}
+        childBreadcrumbs={[
+          {
+            text: 'Trace analytics',
+            href: '#/trace_analytics/home',
+          },
+          {
+            text: 'Dashboard',
+            href: '#/trace_analytics/home',
+          },
+        ]}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        appConfigs={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        page="dashboard"
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper.find('button[data-test-subj="dashboard-table-percentile-button-1"]').simulate('click');
+    wrapper.find('button[data-test-subj="dashboard-table-percentile-button-2"]').simulate('click');
+  });
+});
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/dashboard_table.test.tsx b/public/components/trace_analytics/components/dashboard/__tests__/dashboard_table.test.tsx
new file mode 100644
index 0000000000..58c569d45f
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/dashboard_table.test.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { DashboardTable } from '../dashboard_table';
+
+describe('Dashboard table component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty dashboard table message', () => {
+    const addFilter = jest.fn();
+    const addPercentileFilter = jest.fn();
+    const setRedirect = jest.fn();
+    const wrapper = mount(
+      <DashboardTable
+        items={[]}
+        filters={[]}
+        addFilter={addFilter}
+        addPercentileFilter={addPercentileFilter}
+        setRedirect={setRedirect}
+        loading={false}
+        page="dashboard"
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders dashboard table', () => {
+    const tableItems = [
+      {
+        dashboard_trace_group_name: 'client_create_order',
+        dashboard_average_latency: 187.27,
+        dashboard_traces: 7,
+        dashboard_latency_variance: [26.43, 325.4, 325.4],
+        dashboard_error_rate: 14.285714285714285,
+        '24_hour_latency_trend': null,
+      },
+    ];
+    const addFilter = jest.fn();
+    const addPercentileFilter = jest.fn();
+    const setRedirect = jest.fn();
+    const wrapper = mount(
+      <DashboardTable
+        items={tableItems}
+        filters={[
+          {
+            field: 'traceGroup',
+            operator: 'exists',
+            value: 'exists',
+            inverted: false,
+            disabled: false,
+          },
+        ]}
+        addFilter={addFilter}
+        addPercentileFilter={addPercentileFilter}
+        setRedirect={setRedirect}
+        loading={false}
+        page="dashboard"
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper.find('button[data-test-subj="dashboard-table-percentile-button-1"]').simulate('click');
+    wrapper.find('button[data-test-subj="dashboard-table-percentile-button-2"]').simulate('click');
+    expect(addPercentileFilter).toBeCalledTimes(2);
+    wrapper
+      .find('button[data-test-subj="dashboard-table-trace-group-name-button"]')
+      .simulate('click');
+    expect(addFilter).toBeCalled();
+    wrapper.find('button[data-test-subj="dashboard-table-traces-button"]').simulate('click');
+    expect(setRedirect).toBeCalledWith(true);
+  });
+});
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/latency_trend_cell.test.tsx b/public/components/trace_analytics/components/dashboard/__tests__/latency_trend_cell.test.tsx
new file mode 100644
index 0000000000..6b924d9317
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/__tests__/latency_trend_cell.test.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { LatencyTrendCell } from '../latency_trend_cell';
+
+describe('Latency trend cell component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders latency trend cell', () => {
+    const item = JSON.parse(
+      `{"trendData":[{"x":[1605027600000],"y":[154.71],"type":"scatter","mode":"lines","hoverinfo":"none","line":{"color":"#000000","width":1}}],"popoverData":[{"x":[1605027600000],"y":[154.71],"type":"scatter","mode":"lines+markers","hovertemplate":"%{x}<br>Average latency: %{y}<extra></extra>","hoverlabel":{"bgcolor":"#d7c2ff"},"marker":{"color":"#987dcb","size":8},"line":{"color":"#987dcb","size":2}}]}`
+    );
+    const wrapper = mount(<LatencyTrendCell item={item} traceGroupName="order" />);
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper.find('button[aria-label="Open popover"]').simulate('click');
+    wrapper.find('button[aria-label="Close popover"]').simulate('click');
+  });
+});
diff --git a/public/components/trace_analytics/components/dashboard/dashboard.tsx b/public/components/trace_analytics/components/dashboard/dashboard.tsx
new file mode 100644
index 0000000000..c5bf0a501f
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/dashboard.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiBreadcrumb, EuiTitle } from '@elastic/eui';
+import React from 'react';
+import { TraceAnalyticsComponentDeps } from '../../home';
+import { DashboardContent } from './dashboard_content';
+
+export interface DashboardProps extends TraceAnalyticsComponentDeps {
+  childBreadcrumbs: EuiBreadcrumb[];
+  page: 'dashboard' | 'app';
+}
+
+export function Dashboard(props: DashboardProps) {
+  return (
+    <>
+      <EuiTitle size="l">
+        <h2 style={{ fontWeight: 430 }}>Dashboard</h2>
+      </EuiTitle>
+      <DashboardContent {...props} />
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_content.tsx b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
new file mode 100644
index 0000000000..4faa2a1ede
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/dashboard_content.tsx
@@ -0,0 +1,250 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import dateMath from '@elastic/datemath';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import {
+  handleDashboardErrorRatePltRequest,
+  handleDashboardRequest,
+  handleDashboardThroughputPltRequest,
+} from '../../requests/dashboard_request_handler';
+import { handleServiceMapRequest } from '../../requests/services_request_handler';
+import { FilterType } from '../common/filters/filters';
+import { getValidFilterFields } from '../common/filters/filter_helpers';
+import {
+  filtersToDsl,
+  getPercentileFilter,
+  milliToNanoSec,
+  minFixedInterval,
+  MissingConfigurationMessage,
+} from '../common/helper_functions';
+import { ErrorRatePlt } from '../common/plots/error_rate_plt';
+import { ServiceMap, ServiceObject } from '../common/plots/service_map';
+import { ThroughputPlt } from '../common/plots/throughput_plt';
+import { SearchBar } from '../common/search_bar';
+import { DashboardProps } from './dashboard';
+import { DashboardTable } from './dashboard_table';
+
+export function DashboardContent(props: DashboardProps) {
+  const {
+    http,
+    chrome,
+    page,
+    query,
+    appConfigs,
+    startTime,
+    endTime,
+    childBreadcrumbs,
+    parentBreadcrumbs,
+    filters,
+    indicesExist,
+    setStartTime,
+    setEndTime,
+    setQuery,
+    setFilters,
+  } = props;
+  const [tableItems, setTableItems] = useState([]);
+  const [throughputPltItems, setThroughputPltItems] = useState({ items: [], fixedInterval: '1h' });
+  const [errorRatePltItems, setErrorRatePltItems] = useState({ items: [], fixedInterval: '1h' });
+  const [serviceMap, setServiceMap] = useState<ServiceObject>({});
+  const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
+    'latency' | 'error_rate' | 'throughput'
+  >('latency');
+  const [percentileMap, setPercentileMap] = useState<{ [traceGroup: string]: number[] }>({});
+  const [filteredService, setFilteredService] = useState('');
+  const [redirect, setRedirect] = useState(true);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
+    const validFilters = getValidFilterFields(page);
+    setFilters([
+      ...filters.map((filter) => ({
+        ...filter,
+        locked: validFilters.indexOf(filter.field) === -1,
+      })),
+    ]);
+    setRedirect(false);
+  }, []);
+
+  useEffect(() => {
+    let newFilteredService = '';
+    for (const filter of filters) {
+      if (filter.field === 'serviceName') {
+        newFilteredService = filter.value;
+        break;
+      }
+    }
+    setFilteredService(newFilteredService);
+    if (!redirect && indicesExist) refresh(newFilteredService);
+  }, [filters, startTime, endTime, appConfigs]);
+
+  const refresh = async (currService?: string) => {
+    setLoading(true);
+    const DSL = filtersToDsl(filters, query, startTime, endTime, page, appConfigs);
+    const timeFilterDSL = filtersToDsl([], '', startTime, endTime, page, appConfigs);
+    const latencyTrendStartTime = dateMath.parse(endTime, { roundUp: true })?.subtract(24, 'hours').toISOString()!;
+    const latencyTrendDSL = filtersToDsl(
+      filters,
+      query,
+      latencyTrendStartTime,
+      endTime,
+      page,
+      appConfigs
+    );
+    const fixedInterval = minFixedInterval(startTime, endTime);
+
+    handleDashboardRequest(
+      http,
+      DSL,
+      timeFilterDSL,
+      latencyTrendDSL,
+      tableItems,
+      setTableItems,
+      setPercentileMap
+    ).then(() => setLoading(false));
+    handleDashboardThroughputPltRequest(
+      http,
+      DSL,
+      fixedInterval,
+      throughputPltItems,
+      setThroughputPltItems
+    );
+    handleDashboardErrorRatePltRequest(
+      http,
+      DSL,
+      fixedInterval,
+      errorRatePltItems,
+      setErrorRatePltItems
+    );
+    // service map should not be filtered by service name (https://github.com/opensearch-project/observability/issues/442)
+    const serviceMapDSL = _.cloneDeep(DSL);
+    serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
+      (must: any) => must?.term?.serviceName == null
+    );
+    handleServiceMapRequest(http, serviceMapDSL, setServiceMap, currService || filteredService);
+  };
+
+  const addFilter = (filter: FilterType) => {
+    for (let i = 0; i < filters.length; i++) {
+      const addedFilter = filters[i];
+      if (addedFilter.field === filter.field) {
+        if (addedFilter.operator === filter.operator && addedFilter.value === filter.value) return;
+        const newFilters = [...filters];
+        newFilters.splice(i, 1, filter);
+        setFilters(newFilters);
+        return;
+      }
+    }
+    const newFilters = [...filters, filter];
+    setFilters(newFilters);
+  };
+
+  const addPercentileFilter = (condition = 'gte', additionalFilters = [] as FilterType[]) => {
+    if (tableItems.length === 0 || Object.keys(percentileMap).length === 0) return;
+    for (let i = 0; i < filters.length; i++) {
+      if (filters[i].custom) {
+        const newFilter = JSON.parse(JSON.stringify(filters[i]));
+        newFilter.custom.query.bool.should.forEach((should: any) =>
+          should.bool.must.forEach((must: any) => {
+            const range = must?.range?.['traceGroupFields.durationInNanos'];
+            if (range) {
+              const duration = range.lt || range.lte || range.gt || range.gte;
+              if (duration || duration === 0) {
+                must.range['traceGroupFields.durationInNanos'] = {
+                  [condition]: duration,
+                };
+              }
+            }
+          })
+        );
+        newFilter.value = condition === 'gte' ? '>= 95th' : '< 95th';
+        const newFilters = [...filters, ...additionalFilters];
+        newFilters.splice(i, 1, newFilter);
+        setFilters(newFilters);
+        return;
+      }
+    }
+
+    const percentileMaps = Object.keys(percentileMap).map((traceGroup) => ({
+      traceGroupName: traceGroup,
+      durationFilter: { [condition]: milliToNanoSec(percentileMap[traceGroup][1]) },
+    }));
+    const percentileFilter = getPercentileFilter(
+      percentileMaps,
+      condition === 'gte' ? '>= 95th' : '< 95th'
+    );
+    const newFilters = [...filters, percentileFilter, ...additionalFilters];
+    setFilters(newFilters);
+  };
+
+  return (
+    <>
+      <SearchBar
+        query={query}
+        filters={filters}
+        appConfigs={appConfigs}
+        setFilters={setFilters}
+        setQuery={setQuery}
+        startTime={startTime}
+        setStartTime={setStartTime}
+        endTime={endTime}
+        setEndTime={setEndTime}
+        refresh={refresh}
+        page={page}
+      />
+      <EuiSpacer size="m" />
+      {indicesExist ? (
+        <>
+          <DashboardTable
+            items={tableItems}
+            filters={filters}
+            addFilter={addFilter}
+            addPercentileFilter={addPercentileFilter}
+            setRedirect={setRedirect}
+            loading={loading}
+            page={page}
+          />
+          <EuiSpacer />
+          <EuiFlexGroup alignItems="baseline">
+            <EuiFlexItem grow={4}>
+              <ServiceMap
+                addFilter={addFilter}
+                serviceMap={serviceMap}
+                idSelected={serviceMapIdSelected}
+                setIdSelected={setServiceMapIdSelected}
+                currService={filteredService}
+                page={page}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <EuiFlexGroup direction="column">
+                <EuiFlexItem>
+                  <ErrorRatePlt
+                    items={errorRatePltItems}
+                    setStartTime={setStartTime}
+                    setEndTime={setEndTime}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <ThroughputPlt
+                    items={throughputPltItems}
+                    setStartTime={setStartTime}
+                    setEndTime={setEndTime}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      ) : (
+        <MissingConfigurationMessage />
+      )}
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/dashboard/dashboard_table.tsx b/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
new file mode 100644
index 0000000000..cba1740883
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/dashboard_table.tsx
@@ -0,0 +1,422 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiI18nNumber,
+  EuiIcon,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiTableFieldDataColumnType,
+  EuiText,
+  EuiToolTip,
+  PropertySort,
+} from '@elastic/eui';
+import { CriteriaWithPagination } from '@elastic/eui/src/components/basic_table/basic_table';
+import _ from 'lodash';
+import React, { useMemo, useState } from 'react';
+import { FilterType } from '../common/filters/filters';
+import { calculateTicks, NoMatchMessage, PanelTitle } from '../common/helper_functions';
+import { BoxPlt } from '../common/plots/box_plt';
+import { LatencyTrendCell } from './latency_trend_cell';
+
+export function DashboardTable(props: {
+  items: any[];
+  filters: FilterType[];
+  addFilter: (filter: FilterType) => void;
+  addPercentileFilter: (condition?: 'gte' | 'lte', additionalFilters?: FilterType[]) => void;
+  setRedirect: (redirect: boolean) => void;
+  loading: boolean;
+  page: 'dashboard' | 'traces' | 'services' | 'app';
+}) {
+  const getVarianceProps = (items: any[]) => {
+    if (items.length === 0) {
+      return { minRange: 0, maxRange: 0, ticks: [0, 0], scale: '' };
+    }
+    const variances = [].concat(
+      ...items
+        .filter((item) => item.dashboard_latency_variance)
+        .map((item) => item.dashboard_latency_variance)
+    );
+    const minRange = Math.min(...variances);
+    const maxRange = Math.max(...variances);
+    const ticks = calculateTicks(minRange, maxRange);
+
+    const maxDigits = ticks[ticks.length - 1].toString().length;
+
+    // pads spaces (\u00A0) in between ticks to construct a scale
+    // width of a character equals the width of two spaces, maximum 39 characters in a scale
+    const scale = ticks
+      .map((tick) => {
+        const tickStr = tick.toString();
+        return tickStr.padEnd(tickStr.length + 2 * (maxDigits - tickStr.length), '\u00A0');
+      })
+      .join(
+        '\u00A0'.repeat(
+          Math.max(
+            1,
+            Math.floor((2 * (39 - ticks.length * maxDigits)) / Math.max(1, ticks.length - 1))
+          )
+        )
+      );
+
+    return { minRange, maxRange, ticks, scale };
+  };
+
+  const getColumns = () =>
+    [
+      {
+        field: 'dashboard_trace_group_name',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Traces of all requests that share a common API and operation at the start of
+                distributed tracing instrumentation.
+              </EuiText>
+            }
+          >
+            <>
+              <div>
+                Trace group name{' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'left',
+        sortable: true,
+        render: (item) =>
+          item ? (
+            <EuiLink
+              data-test-subj="dashboard-table-trace-group-name-button"
+              onClick={() =>
+                props.addFilter({
+                  field: 'traceGroup',
+                  operator: 'is',
+                  value: item,
+                  inverted: false,
+                  disabled: false,
+                })
+              }
+            >
+              {item.length < 48 ? (
+                decodeURI(item)
+              ) : (
+                <div title={item}>{_.truncate(decodeURI(item), { length: 48 })}</div>
+              )}
+            </EuiLink>
+          ) : (
+            '-'
+          ),
+      },
+      {
+        field: 'dashboard_latency_variance',
+        name: (
+          <>
+            <EuiToolTip
+              content={
+                <EuiText size="xs">
+                  Range of latencies for traces within a trace group in the selected time range.
+                </EuiText>
+              }
+            >
+              <span>
+                Latency variance (ms){' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </span>
+            </EuiToolTip>
+            {varianceProps && (
+              <EuiText size="xs" color="subdued">
+                {varianceProps.scale}
+              </EuiText>
+            )}
+          </>
+        ),
+        align: 'center',
+        sortable: ({ dashboard_latency_variance }) =>
+          dashboard_latency_variance?.length > 0
+            ? dashboard_latency_variance[2] - dashboard_latency_variance[0]
+            : 0,
+        width: '300px',
+        render: (item, row) => {
+          const filter = props.filters.find(
+            (f) => f.field === 'Latency percentile within trace group'
+          );
+          const currPercentileFilter = filter ? filter.value : '';
+          return item ? (
+            // expand plot ranges to accommodate scale
+            <BoxPlt
+              plotParams={{
+                min:
+                  varianceProps.ticks.length > 1
+                    ? varianceProps.ticks[0]
+                    : varianceProps.ticks[0] / 1.03,
+                max: varianceProps.ticks[varianceProps.ticks.length - 1] * 1.03,
+                left: item[0],
+                mid: item[1],
+                right: item[2],
+                currPercentileFilter,
+                addFilter: (condition?: 'lte' | 'gte') => {
+                  const traceGroupFilter = {
+                    field: 'traceGroup',
+                    operator: 'is',
+                    value: row.dashboard_trace_group_name,
+                    inverted: false,
+                    disabled: false,
+                  };
+                  const additionalFilters = [traceGroupFilter];
+                  for (const addedFilter of props.filters) {
+                    if (
+                      addedFilter.field === traceGroupFilter.field &&
+                      addedFilter.operator === traceGroupFilter.operator &&
+                      addedFilter.value === traceGroupFilter.value
+                    ) {
+                      additionalFilters.pop();
+                    }
+                  }
+                  props.addPercentileFilter(condition, additionalFilters);
+                },
+              }}
+            />
+          ) : (
+            '-'
+          );
+        },
+      },
+      {
+        field: 'dashboard_average_latency',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Average latency of traces within a trace group in the selected time range.
+              </EuiText>
+            }
+          >
+            <>
+              {/* <div style={{ marginRight: 40 }}>Average</div> */}
+              <div>
+                Average latency (ms){' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'right',
+        sortable: true,
+        dataType: 'number',
+        render: (item) => (item === 0 || item ? _.round(item, 2) : '-'),
+      },
+      {
+        field: '24_hour_latency_trend',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                24 hour time series view of hourly average, hourly percentile, and hourly range of
+                latency for traces within a trace group.
+              </EuiText>
+            }
+          >
+            <>
+              {/* <div style={{ marginRight: 44 }}>24-hour</div> */}
+              <div>
+                24-hour latency trend{' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'right',
+        sortable: false,
+        render: (item, row) =>
+          item ? (
+            <LatencyTrendCell item={item} traceGroupName={row.dashboard_trace_group_name} />
+          ) : (
+            '-'
+          ),
+      },
+      {
+        field: 'dashboard_error_rate',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Error rate based on count of trace errors within a trace group in the selected time
+                range.
+              </EuiText>
+            }
+          >
+            <>
+              <div>
+                Error rate{' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'right',
+        sortable: true,
+        render: (item) =>
+          item === 0 || item ? <EuiText size="s">{`${_.round(item, 2)}%`}</EuiText> : '-',
+      },
+      {
+        field: 'dashboard_traces',
+        name: (
+          <EuiToolTip
+            content={
+              <EuiText size="xs">
+                Count of traces with unique trace identifiers in the selected time range.
+              </EuiText>
+            }
+          >
+            <>
+              <div>
+                Traces{' '}
+                <EuiIcon
+                  size="s"
+                  color="subdued"
+                  type="questionInCircle"
+                  className="eui-alignTop"
+                />
+              </div>
+              <div>&nbsp;</div>
+            </>
+          </EuiToolTip>
+        ),
+        align: 'right',
+        sortable: true,
+        render: (item, row) => (
+          <EuiLink
+            data-test-subj="dashboard-table-traces-button"
+            onClick={() => {
+              props.addFilter({
+                field: 'traceGroup',
+                operator: 'is',
+                value: row.dashboard_trace_group_name,
+                inverted: false,
+                disabled: false,
+              });
+              if (props.page !== 'app') {
+                props.setRedirect(true);
+                location.assign('#/trace_analytics/traces');
+              }
+            }}
+          >
+            <EuiI18nNumber value={item} />
+          </EuiLink>
+        ),
+      },
+    ] as Array<EuiTableFieldDataColumnType<any>>;
+
+  const renderTitleBar = (totalItems: number) => {
+    return (
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem grow={10}>
+          <PanelTitle title="Latency by trace group" totalItems={totalItems} />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiLink
+            data-test-subj="dashboard-table-percentile-button-1"
+            onClick={() => props.addPercentileFilter('lte')}
+          >
+            <EuiText size="xs">
+              <span style={{ color: '#957ac9' }}>&#x25a1;</span> &lt; 95 percentile
+            </EuiText>
+          </EuiLink>
+        </EuiFlexItem>
+        <EuiFlexItem grow={1} />
+        <EuiFlexItem grow={false}>
+          <EuiLink
+            data-test-subj="dashboard-table-percentile-button-2"
+            onClick={() => props.addPercentileFilter('gte')}
+          >
+            <EuiText size="xs">
+              <span style={{ color: '#957ac9' }}>&#x25a0;</span> &gt;= 95 percentile
+            </EuiText>
+          </EuiLink>
+        </EuiFlexItem>
+        <EuiFlexItem grow={1} />
+      </EuiFlexGroup>
+    );
+  };
+
+  const varianceProps = useMemo(() => getVarianceProps(props.items), [props.items]);
+  const columns = useMemo(() => getColumns(), [props.items, props.filters]);
+  const titleBar = useMemo(() => renderTitleBar(props.items?.length), [props.items]);
+
+  const [sorting, setSorting] = useState<{ sort: PropertySort }>({
+    sort: {
+      field: 'dashboard_latency_variance',
+      direction: 'desc',
+    },
+  });
+
+  const onTableChange = async ({ page, sort }: CriteriaWithPagination<any>) => {
+    if (typeof sort?.field !== 'string') return;
+    setSorting({ sort } as { sort: PropertySort });
+  };
+
+  return (
+    <>
+      <EuiPanel>
+        {titleBar}
+        <EuiSpacer size="m" />
+        <EuiHorizontalRule margin="none" />
+        {props.items?.length > 0 ? (
+          <EuiInMemoryTable
+            data-test-subj="dashboardTable"
+            tableLayout="auto"
+            items={props.items}
+            columns={columns}
+            pagination={{
+              initialPageSize: 10,
+              pageSizeOptions: [5, 10, 15],
+            }}
+            sorting={sorting}
+            onTableChange={onTableChange}
+            loading={props.loading}
+          />
+        ) : (
+          <NoMatchMessage size="xl" />
+        )}
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/dashboard/index.ts b/public/components/trace_analytics/components/dashboard/index.ts
new file mode 100644
index 0000000000..346331a326
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Dashboard } from './dashboard';
diff --git a/public/components/trace_analytics/components/dashboard/latency_trend_cell.tsx b/public/components/trace_analytics/components/dashboard/latency_trend_cell.tsx
new file mode 100644
index 0000000000..2422c4d18d
--- /dev/null
+++ b/public/components/trace_analytics/components/dashboard/latency_trend_cell.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPopover, EuiText } from '@elastic/eui';
+import _ from 'lodash';
+import React, { useState } from 'react';
+import { LatencyPlt, LinePlt } from '../common/plots/latency_trend_plt';
+
+export function LatencyTrendCell({
+  item,
+  traceGroupName,
+}: {
+  item: {
+    popoverData: Plotly.Data[];
+    trendData: Plotly.Data[];
+  };
+  traceGroupName: string;
+}) {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  return (
+    <EuiFlexGroup gutterSize="s">
+      <EuiFlexItem />
+      <EuiFlexItem grow={false}>
+        <LinePlt data={item.trendData} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiPopover
+          ownFocus
+          anchorPosition="downCenter"
+          button={
+            <EuiButtonIcon
+              aria-label="Open popover"
+              onClick={() => setIsPopoverOpen(true)}
+              iconType="magnifyWithPlus"
+              size="s"
+            />
+          }
+          isOpen={isPopoverOpen}
+          closePopover={() => setIsPopoverOpen(false)}
+        >
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              <EuiText size="s">24-hour latency trend</EuiText>
+              <EuiText size="s">{traceGroupName}</EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                aria-label="Close popover"
+                iconType="cross"
+                color="text"
+                onClick={() => setIsPopoverOpen(false)}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <LatencyPlt data={item.popoverData} />
+        </EuiPopover>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap
new file mode 100644
index 0000000000..40b856fb8f
--- /dev/null
+++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/service_view.test.tsx.snap
@@ -0,0 +1,252 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Service view component renders service view 1`] = `
+<Fragment>
+  <EuiPage>
+    <EuiPageBody>
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <EuiFlexItem>
+          <EuiTitle
+            size="l"
+          >
+            <h2
+              className="overview-content"
+            >
+              order
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiSuperDatePicker
+            commonlyUsedRanges={
+              Array [
+                Object {
+                  "end": "now/d",
+                  "label": "Today",
+                  "start": "now/d",
+                },
+                Object {
+                  "end": "now/w",
+                  "label": "This week",
+                  "start": "now/w",
+                },
+                Object {
+                  "end": "now/M",
+                  "label": "This month",
+                  "start": "now/M",
+                },
+                Object {
+                  "end": "now/y",
+                  "label": "This year",
+                  "start": "now/y",
+                },
+                Object {
+                  "end": "now-1d/d",
+                  "label": "Yesterday",
+                  "start": "now-1d/d",
+                },
+                Object {
+                  "end": "now",
+                  "label": "Week to date",
+                  "start": "now/w",
+                },
+                Object {
+                  "end": "now",
+                  "label": "Month to date",
+                  "start": "now/M",
+                },
+                Object {
+                  "end": "now",
+                  "label": "Year to date",
+                  "start": "now/y",
+                },
+              ]
+            }
+            dateFormat=""
+            end="now"
+            isAutoRefreshOnly={false}
+            isDisabled={false}
+            isPaused={true}
+            onTimeChange={[Function]}
+            recentlyUsedRanges={Array []}
+            refreshInterval={0}
+            showUpdateButton={false}
+            start="now-5m"
+            timeFormat="HH:mm"
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        />
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="xl"
+      />
+      <EuiPanel>
+        <PanelTitle
+          title="Overview"
+        />
+        <EuiHorizontalRule
+          margin="m"
+        />
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFlexGroup
+              direction="column"
+            >
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Name
+                </EuiText>
+                <EuiText
+                  className="overview-content"
+                  size="s"
+                >
+                  order
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Number of connected services
+                </EuiText>
+                <EuiText
+                  className="overview-content"
+                  size="s"
+                >
+                  0
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Connected services
+                </EuiText>
+                <EuiText
+                  className="overview-content"
+                  size="s"
+                >
+                  -
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFlexGroup
+              direction="column"
+            >
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Average latency (ms)
+                </EuiText>
+                <EuiText
+                  className="overview-content"
+                  size="s"
+                >
+                  -
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Error rate
+                </EuiText>
+                <EuiText
+                  className="overview-content"
+                  size="s"
+                >
+                  -
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Throughput
+                </EuiText>
+                <EuiText
+                  className="overview-content"
+                  size="s"
+                >
+                  -
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Traces
+                </EuiText>
+                <EuiText
+                  className="overview-content"
+                  size="s"
+                >
+                  -
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer />
+      </EuiPanel>
+      <EuiSpacer />
+      <ServiceMap
+        currService="order"
+        idSelected="latency"
+        page="serviceView"
+        serviceMap={Object {}}
+        setIdSelected={[Function]}
+      />
+      <EuiSpacer />
+      <EuiPanel>
+        <PanelTitle
+          title="Spans"
+          totalItems={0}
+        />
+        <EuiHorizontalRule
+          margin="m"
+        />
+        <div>
+          <SpanDetailTable
+            DSL={Object {}}
+            hiddenColumns={
+              Array [
+                "serviceName",
+              ]
+            }
+            http={[MockFunction]}
+            openFlyout={[Function]}
+            setTotal={[Function]}
+          />
+        </div>
+      </EuiPanel>
+    </EuiPageBody>
+  </EuiPage>
+</Fragment>
+`;
diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
new file mode 100644
index 0000000000..edb5cad8cd
--- /dev/null
+++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
@@ -0,0 +1,3420 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Services component renders empty services page 1`] = `
+<Services
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/services",
+        "text": "Services",
+      },
+    ]
+  }
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "href": "test#/",
+                "text": "test",
+              },
+              Object {
+                "href": "#/trace_analytics/home",
+                "text": "Trace analytics",
+              },
+              Object {
+                "href": "#/trace_analytics/services",
+                "text": "Services",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  indicesExist={false}
+  nameColumnAction={[Function]}
+  page="services"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+  traceColumnAction={[Function]}
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Services
+    </h2>
+  </EuiTitle>
+  <ServicesContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/services",
+          "text": "Services",
+        },
+      ]
+    }
+    chrome={
+      Object {
+        "getIsNavDrawerLocked$": [MockFunction],
+        "setBreadcrumbs": [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [
+                Object {
+                  "href": "test#/",
+                  "text": "test",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Trace analytics",
+                },
+                Object {
+                  "href": "#/trace_analytics/services",
+                  "text": "Services",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    indicesExist={false}
+    nameColumnAction={[Function]}
+    page="services"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+    traceColumnAction={[Function]}
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      page="services"
+      query=""
+      refresh={[Function]}
+      setEndTime={[MockFunction]}
+      setFilters={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      setQuery={[MockFunction]}
+      setStartTime={[MockFunction]}
+      startTime="now-5m"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <EuiFieldSearch
+                compressed={false}
+                data-test-subj="search-bar-input-box"
+                fullWidth={true}
+                incremental={false}
+                isClearable={false}
+                isLoading={false}
+                onChange={[Function]}
+                onSearch={[Function]}
+                placeholder="Trace ID, trace group name, service name"
+                value=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <EuiValidatableControl>
+                        <input
+                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          data-test-subj="search-bar-input-box"
+                          onChange={[Function]}
+                          onKeyUp={[Function]}
+                          placeholder="Trace ID, trace group name, service name"
+                          type="search"
+                          value=""
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "maxWidth": "40vw",
+                }
+              }
+            >
+              <EuiSuperDatePicker
+                commonlyUsedRanges={
+                  Array [
+                    Object {
+                      "end": "now/d",
+                      "label": "Today",
+                      "start": "now/d",
+                    },
+                    Object {
+                      "end": "now/w",
+                      "label": "This week",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now/M",
+                      "label": "This month",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now/y",
+                      "label": "This year",
+                      "start": "now/y",
+                    },
+                    Object {
+                      "end": "now-1d/d",
+                      "label": "Yesterday",
+                      "start": "now-1d/d",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Week to date",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Month to date",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Year to date",
+                      "start": "now/y",
+                    },
+                  ]
+                }
+                dateFormat=""
+                end="now"
+                isAutoRefreshOnly={false}
+                isDisabled={false}
+                isPaused={true}
+                onTimeChange={[Function]}
+                recentlyUsedRanges={Array []}
+                refreshInterval={0}
+                showUpdateButton={false}
+                start="now-5m"
+                timeFormat="HH:mm"
+              >
+                <EuiFlexGroup
+                  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  gutterSize="s"
+                  responsive={false}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiFormControlLayout
+                          className="euiSuperDatePicker"
+                          isDisabled={false}
+                          prepend={
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            />
+                          }
+                        >
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium 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>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        page="services"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          }
+        }
+      >
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          responsive={false}
+          style={
+            Object {
+              "minHeight": 32,
+            }
+          }
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <GlobalFilterButton>
+                  <EuiPopover
+                    anchorPosition="rightUp"
+                    button={
+                      <EuiButtonIcon
+                        aria-label="Change all filters"
+                        iconType="filter"
+                        onClick={[Function]}
+                        title="Change all filters"
+                      />
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconEmpty
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                />
+                              </EuiIconEmpty>
+                            </EuiIcon>
+                          </button>
+                        </EuiButtonIcon>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <ServicesTable
+      addFilter={[Function]}
+      indicesExist={false}
+      items={Array []}
+      loading={false}
+      nameColumnAction={[Function]}
+      setRedirect={[Function]}
+      traceColumnAction={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={10}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
+                >
+                  <PanelTitle
+                    title="Services"
+                    totalItems={0}
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Services
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
+          <EuiHorizontalRule
+            margin="none"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full"
+            />
+          </EuiHorizontalRule>
+          <MissingConfigurationMessage>
+            <EuiEmptyPrompt
+              actions={
+                <EuiButton
+                  color="primary"
+                  iconSide="right"
+                  iconType="popout"
+                  onClick={[Function]}
+                >
+                  Learn more
+                </EuiButton>
+              }
+              body={
+                <EuiText>
+                  The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+                </EuiText>
+              }
+              title={
+                <h2>
+                  Trace Analytics not set up
+                </h2>
+              }
+            >
+              <div
+                className="euiEmptyPrompt"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    Trace Analytics not set up
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <EuiText>
+                          <div
+                            className="euiText euiText--medium"
+                          >
+                            The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+                          </div>
+                        </EuiText>
+                      </div>
+                    </EuiText>
+                  </span>
+                </EuiTextColor>
+                <EuiSpacer
+                  size="l"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <EuiButton
+                  color="primary"
+                  iconSide="right"
+                  iconType="popout"
+                  onClick={[Function]}
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButton"
+                    color="primary"
+                    disabled={false}
+                    element="button"
+                    iconSide="right"
+                    iconType="popout"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <button
+                      className="euiButton euiButton--primary"
+                      disabled={false}
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                      type="button"
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="right"
+                        iconType="popout"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                        >
+                          <EuiIcon
+                            className="euiButtonContent__icon"
+                            color="inherit"
+                            size="m"
+                            type="popout"
+                          >
+                            <EuiIconEmpty
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              role="img"
+                              style={null}
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </EuiIconEmpty>
+                          </EuiIcon>
+                          <span
+                            className="euiButton__text"
+                          >
+                            Learn more
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonDisplay>
+                </EuiButton>
+              </div>
+            </EuiEmptyPrompt>
+          </MissingConfigurationMessage>
+        </div>
+      </EuiPanel>
+    </ServicesTable>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <ServiceMap
+      addFilter={[Function]}
+      currService=""
+      idSelected="latency"
+      page="services"
+      serviceMap={Object {}}
+      setIdSelected={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <PanelTitle
+            title="Service map"
+          >
+            <EuiText
+              size="m"
+            >
+              <div
+                className="euiText euiText--medium"
+              >
+                <span
+                  className="panel-title"
+                >
+                  Service map
+                </span>
+              </div>
+            </EuiText>
+          </PanelTitle>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
+          <EuiButtonGroup
+            buttonSize="s"
+            color="text"
+            idSelected="latency"
+            onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "id": "latency",
+                  "label": "Latency",
+                },
+                Object {
+                  "id": "error_rate",
+                  "label": "Error rate",
+                },
+                Object {
+                  "id": "throughput",
+                  "label": "Throughput",
+                },
+              ]
+            }
+          >
+            <fieldset
+              className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+              disabled={false}
+            >
+              <EuiScreenReaderOnly>
+                <legend
+                  className="euiScreenReaderOnly"
+                />
+              </EuiScreenReaderOnly>
+              <div
+                className="euiButtonGroup__buttons"
+              >
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="latency"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={true}
+                  key="0"
+                  label="Latency"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className="euiButtonGroupButton-isSelected"
+                    color="text"
+                    element="label"
+                    fill={true}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Latency",
+                        "ref": [Function],
+                        "title": "Latency",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Latency",
+                            "ref": [Function],
+                            "title": "Latency",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Latency"
+                            title="Latency"
+                          >
+                            <input
+                              checked={true}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="latency"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Latency
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="error_rate"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={false}
+                  key="1"
+                  label="Error rate"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className=""
+                    color="text"
+                    element="label"
+                    fill={false}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Error rate",
+                        "ref": [Function],
+                        "title": "Error rate",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Error rate",
+                            "ref": [Function],
+                            "title": "Error rate",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Error rate"
+                            title="Error rate"
+                          >
+                            <input
+                              checked={false}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="error_rate"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Error rate
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="throughput"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={false}
+                  key="2"
+                  label="Throughput"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className=""
+                    color="text"
+                    element="label"
+                    fill={false}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Throughput",
+                        "ref": [Function],
+                        "title": "Throughput",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Throughput",
+                            "ref": [Function],
+                            "title": "Throughput",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Throughput"
+                            title="Throughput"
+                          >
+                            <input
+                              checked={false}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="throughput"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Throughput
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+              </div>
+            </fieldset>
+          </EuiButtonGroup>
+          <EuiHorizontalRule
+            margin="m"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+            />
+          </EuiHorizontalRule>
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={false}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <EuiText>
+                    <div
+                      className="euiText euiText--medium"
+                    >
+                      Focus on
+                    </div>
+                  </EuiText>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <div
+                  className="euiFlexItem"
+                >
+                  <EuiFieldSearch
+                    compressed={false}
+                    fullWidth={false}
+                    incremental={false}
+                    isClearable={true}
+                    isInvalid={false}
+                    isLoading={false}
+                    onChange={[Function]}
+                    onSearch={[Function]}
+                    placeholder="Service name"
+                    value=""
+                  >
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={false}
+                      icon="search"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayout"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiValidatableControl
+                            isInvalid={false}
+                          >
+                            <input
+                              className="euiFieldSearch"
+                              onChange={[Function]}
+                              onKeyUp={[Function]}
+                              placeholder="Service name"
+                              type="search"
+                              value=""
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
+                            >
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
+                              >
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiSpacer>
+            <div
+              className="euiSpacer euiSpacer--l"
+            />
+          </EuiSpacer>
+          <div
+            style={
+              Object {
+                "minHeight": 434,
+              }
+            }
+          >
+            <NoMatchMessage
+              size="s"
+            >
+              <EuiSpacer
+                size="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <EuiEmptyPrompt
+                body={
+                  <EuiText>
+                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                  </EuiText>
+                }
+                title={
+                  <h2>
+                    No matches
+                  </h2>
+                }
+              >
+                <div
+                  className="euiEmptyPrompt"
+                >
+                  <EuiTitle
+                    size="m"
+                  >
+                    <h2
+                      className="euiTitle euiTitle--medium"
+                    >
+                      No matches
+                    </h2>
+                  </EuiTitle>
+                  <EuiTextColor
+                    color="subdued"
+                  >
+                    <span
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      <EuiSpacer
+                        size="m"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--m"
+                        />
+                      </EuiSpacer>
+                      <EuiText>
+                        <div
+                          className="euiText euiText--medium"
+                        >
+                          <EuiText>
+                            <div
+                              className="euiText euiText--medium"
+                            >
+                              No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                            </div>
+                          </EuiText>
+                        </div>
+                      </EuiText>
+                    </span>
+                  </EuiTextColor>
+                </div>
+              </EuiEmptyPrompt>
+              <EuiSpacer
+                size="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+            </NoMatchMessage>
+          </div>
+        </div>
+      </EuiPanel>
+    </ServiceMap>
+  </ServicesContent>
+</Services>
+`;
+
+exports[`Services component renders services page 1`] = `
+<Services
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/services",
+        "text": "Services",
+      },
+    ]
+  }
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "href": "test#/",
+                "text": "test",
+              },
+              Object {
+                "href": "#/trace_analytics/home",
+                "text": "Trace analytics",
+              },
+              Object {
+                "href": "#/trace_analytics/services",
+                "text": "Services",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  indicesExist={true}
+  nameColumnAction={[Function]}
+  page="services"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+  traceColumnAction={[Function]}
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Services
+    </h2>
+  </EuiTitle>
+  <ServicesContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/services",
+          "text": "Services",
+        },
+      ]
+    }
+    chrome={
+      Object {
+        "getIsNavDrawerLocked$": [MockFunction],
+        "setBreadcrumbs": [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [
+                Object {
+                  "href": "test#/",
+                  "text": "test",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Trace analytics",
+                },
+                Object {
+                  "href": "#/trace_analytics/services",
+                  "text": "Services",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    indicesExist={true}
+    nameColumnAction={[Function]}
+    page="services"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+    traceColumnAction={[Function]}
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      page="services"
+      query=""
+      refresh={[Function]}
+      setEndTime={[MockFunction]}
+      setFilters={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      setQuery={[MockFunction]}
+      setStartTime={[MockFunction]}
+      startTime="now-5m"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <EuiFieldSearch
+                compressed={false}
+                data-test-subj="search-bar-input-box"
+                fullWidth={true}
+                incremental={false}
+                isClearable={false}
+                isLoading={false}
+                onChange={[Function]}
+                onSearch={[Function]}
+                placeholder="Trace ID, trace group name, service name"
+                value=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <EuiValidatableControl>
+                        <input
+                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          data-test-subj="search-bar-input-box"
+                          onChange={[Function]}
+                          onKeyUp={[Function]}
+                          placeholder="Trace ID, trace group name, service name"
+                          type="search"
+                          value=""
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconSearch
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                    />
+                                  </svg>
+                                </EuiIconSearch>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "maxWidth": "40vw",
+                }
+              }
+            >
+              <EuiSuperDatePicker
+                commonlyUsedRanges={
+                  Array [
+                    Object {
+                      "end": "now/d",
+                      "label": "Today",
+                      "start": "now/d",
+                    },
+                    Object {
+                      "end": "now/w",
+                      "label": "This week",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now/M",
+                      "label": "This month",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now/y",
+                      "label": "This year",
+                      "start": "now/y",
+                    },
+                    Object {
+                      "end": "now-1d/d",
+                      "label": "Yesterday",
+                      "start": "now-1d/d",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Week to date",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Month to date",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Year to date",
+                      "start": "now/y",
+                    },
+                  ]
+                }
+                dateFormat=""
+                end="now"
+                isAutoRefreshOnly={false}
+                isDisabled={false}
+                isPaused={true}
+                onTimeChange={[Function]}
+                recentlyUsedRanges={Array []}
+                refreshInterval={0}
+                showUpdateButton={false}
+                start="now-5m"
+                timeFormat="HH:mm"
+              >
+                <EuiFlexGroup
+                  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  gutterSize="s"
+                  responsive={false}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiFormControlLayout
+                          className="euiSuperDatePicker"
+                          isDisabled={false}
+                          prepend={
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            />
+                          }
+                        >
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconCalendar
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                      fillRule="evenodd"
+                                                    />
+                                                  </svg>
+                                                </EuiIconCalendar>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconRefresh
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                              />
+                            </svg>
+                          </EuiIconRefresh>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        page="services"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          }
+        }
+      >
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          responsive={false}
+          style={
+            Object {
+              "minHeight": 32,
+            }
+          }
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <GlobalFilterButton>
+                  <EuiPopover
+                    anchorPosition="rightUp"
+                    button={
+                      <EuiButtonIcon
+                        aria-label="Change all filters"
+                        iconType="filter"
+                        onClick={[Function]}
+                        title="Change all filters"
+                      />
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconFilter
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M7.999 15.999a8 8 0 110-16 8 8 0 010 16zM8 15A7 7 0 108 1a7 7 0 000 14zM3.5 5h9a.5.5 0 110 1h-9a.5.5 0 010-1zm2 3h5a.5.5 0 110 1h-5a.5.5 0 010-1zm2 3h1a.5.5 0 110 1h-1a.5.5 0 110-1z"
+                                    fillRule="evenodd"
+                                  />
+                                </svg>
+                              </EuiIconFilter>
+                            </EuiIcon>
+                          </button>
+                        </EuiButtonIcon>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <ServicesTable
+      addFilter={[Function]}
+      indicesExist={true}
+      items={Array []}
+      loading={false}
+      nameColumnAction={[Function]}
+      setRedirect={[Function]}
+      traceColumnAction={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={10}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
+                >
+                  <PanelTitle
+                    title="Services"
+                    totalItems={0}
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Services
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
+          <EuiHorizontalRule
+            margin="none"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full"
+            />
+          </EuiHorizontalRule>
+          <NoMatchMessage
+            size="xl"
+          >
+            <EuiSpacer
+              size="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+            <EuiEmptyPrompt
+              body={
+                <EuiText>
+                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                </EuiText>
+              }
+              title={
+                <h2>
+                  No matches
+                </h2>
+              }
+            >
+              <div
+                className="euiEmptyPrompt"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    No matches
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <EuiText>
+                          <div
+                            className="euiText euiText--medium"
+                          >
+                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                          </div>
+                        </EuiText>
+                      </div>
+                    </EuiText>
+                  </span>
+                </EuiTextColor>
+              </div>
+            </EuiEmptyPrompt>
+            <EuiSpacer
+              size="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+          </NoMatchMessage>
+        </div>
+      </EuiPanel>
+    </ServicesTable>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <ServiceMap
+      addFilter={[Function]}
+      currService=""
+      idSelected="latency"
+      page="services"
+      serviceMap={Object {}}
+      setIdSelected={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <PanelTitle
+            title="Service map"
+          >
+            <EuiText
+              size="m"
+            >
+              <div
+                className="euiText euiText--medium"
+              >
+                <span
+                  className="panel-title"
+                >
+                  Service map
+                </span>
+              </div>
+            </EuiText>
+          </PanelTitle>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
+          <EuiButtonGroup
+            buttonSize="s"
+            color="text"
+            idSelected="latency"
+            onChange={[Function]}
+            options={
+              Array [
+                Object {
+                  "id": "latency",
+                  "label": "Latency",
+                },
+                Object {
+                  "id": "error_rate",
+                  "label": "Error rate",
+                },
+                Object {
+                  "id": "throughput",
+                  "label": "Throughput",
+                },
+              ]
+            }
+          >
+            <fieldset
+              className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+              disabled={false}
+            >
+              <EuiScreenReaderOnly>
+                <legend
+                  className="euiScreenReaderOnly"
+                />
+              </EuiScreenReaderOnly>
+              <div
+                className="euiButtonGroup__buttons"
+              >
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="latency"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={true}
+                  key="0"
+                  label="Latency"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className="euiButtonGroupButton-isSelected"
+                    color="text"
+                    element="label"
+                    fill={true}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Latency",
+                        "ref": [Function],
+                        "title": "Latency",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Latency",
+                            "ref": [Function],
+                            "title": "Latency",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Latency"
+                            title="Latency"
+                          >
+                            <input
+                              checked={true}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="latency"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Latency
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="error_rate"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={false}
+                  key="1"
+                  label="Error rate"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className=""
+                    color="text"
+                    element="label"
+                    fill={false}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Error rate",
+                        "ref": [Function],
+                        "title": "Error rate",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Error rate",
+                            "ref": [Function],
+                            "title": "Error rate",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Error rate"
+                            title="Error rate"
+                          >
+                            <input
+                              checked={false}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="error_rate"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Error rate
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+                <EuiButtonGroupButton
+                  color="text"
+                  element="label"
+                  id="throughput"
+                  isDisabled={false}
+                  isIconOnly={false}
+                  isSelected={false}
+                  key="2"
+                  label="Throughput"
+                  name="random_html_id"
+                  onChange={[Function]}
+                  size="s"
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButtonGroupButton"
+                    className=""
+                    color="text"
+                    element="label"
+                    fill={false}
+                    htmlFor="random_html_id"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    size="s"
+                    textProps={
+                      Object {
+                        "className": "euiButtonGroupButton__textShift",
+                        "data-text": "Throughput",
+                        "ref": [Function],
+                        "title": "Throughput",
+                      }
+                    }
+                  >
+                    <label
+                      className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                      disabled={false}
+                      htmlFor="random_html_id"
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text euiButtonGroupButton__textShift",
+                            "data-text": "Throughput",
+                            "ref": [Function],
+                            "title": "Throughput",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButton__content"
+                        >
+                          <span
+                            className="euiButton__text euiButtonGroupButton__textShift"
+                            data-text="Throughput"
+                            title="Throughput"
+                          >
+                            <input
+                              checked={false}
+                              className="euiScreenReaderOnly"
+                              data-test-subj="throughput"
+                              disabled={false}
+                              id="random_html_id"
+                              name="random_html_id"
+                              onChange={[Function]}
+                              type="radio"
+                            />
+                            Throughput
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </label>
+                  </EuiButtonDisplay>
+                </EuiButtonGroupButton>
+              </div>
+            </fieldset>
+          </EuiButtonGroup>
+          <EuiHorizontalRule
+            margin="m"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+            />
+          </EuiHorizontalRule>
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={false}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <EuiText>
+                    <div
+                      className="euiText euiText--medium"
+                    >
+                      Focus on
+                    </div>
+                  </EuiText>
+                </div>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <div
+                  className="euiFlexItem"
+                >
+                  <EuiFieldSearch
+                    compressed={false}
+                    fullWidth={false}
+                    incremental={false}
+                    isClearable={true}
+                    isInvalid={false}
+                    isLoading={false}
+                    onChange={[Function]}
+                    onSearch={[Function]}
+                    placeholder="Service name"
+                    value=""
+                  >
+                    <EuiFormControlLayout
+                      compressed={false}
+                      fullWidth={false}
+                      icon="search"
+                      isLoading={false}
+                    >
+                      <div
+                        className="euiFormControlLayout"
+                      >
+                        <div
+                          className="euiFormControlLayout__childrenWrapper"
+                        >
+                          <EuiValidatableControl
+                            isInvalid={false}
+                          >
+                            <input
+                              className="euiFieldSearch"
+                              onChange={[Function]}
+                              onKeyUp={[Function]}
+                              placeholder="Service name"
+                              type="search"
+                              value=""
+                            />
+                          </EuiValidatableControl>
+                          <EuiFormControlLayoutIcons
+                            compressed={false}
+                            icon="search"
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayoutIcons"
+                            >
+                              <EuiFormControlLayoutCustomIcon
+                                size="m"
+                                type="search"
+                              >
+                                <span
+                                  className="euiFormControlLayoutCustomIcon"
+                                >
+                                  <EuiIcon
+                                    aria-hidden="true"
+                                    className="euiFormControlLayoutCustomIcon__icon"
+                                    size="m"
+                                    type="search"
+                                  >
+                                    <EuiIconSearch
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                        />
+                                      </svg>
+                                    </EuiIconSearch>
+                                  </EuiIcon>
+                                </span>
+                              </EuiFormControlLayoutCustomIcon>
+                            </div>
+                          </EuiFormControlLayoutIcons>
+                        </div>
+                      </div>
+                    </EuiFormControlLayout>
+                  </EuiFieldSearch>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiSpacer>
+            <div
+              className="euiSpacer euiSpacer--l"
+            />
+          </EuiSpacer>
+          <div
+            style={
+              Object {
+                "minHeight": 434,
+              }
+            }
+          >
+            <NoMatchMessage
+              size="s"
+            >
+              <EuiSpacer
+                size="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+              <EuiEmptyPrompt
+                body={
+                  <EuiText>
+                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                  </EuiText>
+                }
+                title={
+                  <h2>
+                    No matches
+                  </h2>
+                }
+              >
+                <div
+                  className="euiEmptyPrompt"
+                >
+                  <EuiTitle
+                    size="m"
+                  >
+                    <h2
+                      className="euiTitle euiTitle--medium"
+                    >
+                      No matches
+                    </h2>
+                  </EuiTitle>
+                  <EuiTextColor
+                    color="subdued"
+                  >
+                    <span
+                      className="euiTextColor euiTextColor--subdued"
+                    >
+                      <EuiSpacer
+                        size="m"
+                      >
+                        <div
+                          className="euiSpacer euiSpacer--m"
+                        />
+                      </EuiSpacer>
+                      <EuiText>
+                        <div
+                          className="euiText euiText--medium"
+                        >
+                          <EuiText>
+                            <div
+                              className="euiText euiText--medium"
+                            >
+                              No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                            </div>
+                          </EuiText>
+                        </div>
+                      </EuiText>
+                    </span>
+                  </EuiTextColor>
+                </div>
+              </EuiEmptyPrompt>
+              <EuiSpacer
+                size="s"
+              >
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+              </EuiSpacer>
+            </NoMatchMessage>
+          </div>
+        </div>
+      </EuiPanel>
+    </ServiceMap>
+  </ServicesContent>
+</Services>
+`;
diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap
new file mode 100644
index 0000000000..735eaa0445
--- /dev/null
+++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services_table.test.tsx.snap
@@ -0,0 +1,1784 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Services table component renders empty services table message 1`] = `
+<ServicesTable
+  addFilter={[MockFunction]}
+  indicesExist={true}
+  items={Array []}
+  loading={false}
+  nameColumnAction={[Function]}
+  setRedirect={[MockFunction]}
+  traceColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Services"
+                totalItems={0}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Services
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (0)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <NoMatchMessage
+        size="xl"
+      >
+        <EuiSpacer
+          size="xl"
+        >
+          <div
+            className="euiSpacer euiSpacer--xl"
+          />
+        </EuiSpacer>
+        <EuiEmptyPrompt
+          body={
+            <EuiText>
+              No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+            </EuiText>
+          }
+          title={
+            <h2>
+              No matches
+            </h2>
+          }
+        >
+          <div
+            className="euiEmptyPrompt"
+          >
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
+              >
+                No matches
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
+            >
+              <span
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                      </div>
+                    </EuiText>
+                  </div>
+                </EuiText>
+              </span>
+            </EuiTextColor>
+          </div>
+        </EuiEmptyPrompt>
+        <EuiSpacer
+          size="xl"
+        >
+          <div
+            className="euiSpacer euiSpacer--xl"
+          />
+        </EuiSpacer>
+      </NoMatchMessage>
+    </div>
+  </EuiPanel>
+</ServicesTable>
+`;
+
+exports[`Services table component renders services table 1`] = `
+<ServicesTable
+  addFilter={[MockFunction]}
+  indicesExist={true}
+  items={
+    Array [
+      Object {
+        "average_latency": 49.54,
+        "connected_services": Array [
+          "order",
+          "inventory",
+        ],
+        "error_rate": 3.77,
+        "name": "database",
+        "number_of_connected_services": 2,
+        "throughput": 53,
+        "traces": 31,
+      },
+    ]
+  }
+  loading={false}
+  nameColumnAction={[Function]}
+  setRedirect={[MockFunction]}
+  traceColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Services"
+                totalItems={1}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Services
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (1)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <EuiInMemoryTable
+        columns={
+          Array [
+            Object {
+              "align": "left",
+              "field": "name",
+              "name": "Name",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "average_latency",
+              "name": "Average latency (ms)",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "error_rate",
+              "name": "Error rate",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "throughput",
+              "name": "Throughput",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "right",
+              "field": "number_of_connected_services",
+              "name": "No. of connected services",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+              "width": "80px",
+            },
+            Object {
+              "align": "left",
+              "field": "connected_services",
+              "name": "Connected services",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "right",
+              "field": "traces",
+              "name": "Traces",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+          ]
+        }
+        items={
+          Array [
+            Object {
+              "average_latency": 49.54,
+              "connected_services": Array [
+                "order",
+                "inventory",
+              ],
+              "error_rate": 3.77,
+              "name": "database",
+              "number_of_connected_services": 2,
+              "throughput": 53,
+              "traces": 31,
+            },
+          ]
+        }
+        loading={false}
+        pagination={
+          Object {
+            "initialPageSize": 10,
+            "pageSizeOptions": Array [
+              5,
+              10,
+              15,
+            ],
+          }
+        }
+        responsive={true}
+        sorting={
+          Object {
+            "sort": Object {
+              "direction": "asc",
+              "field": "name",
+            },
+          }
+        }
+        tableLayout="auto"
+      >
+        <EuiBasicTable
+          columns={
+            Array [
+              Object {
+                "align": "left",
+                "field": "name",
+                "name": "Name",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "average_latency",
+                "name": "Average latency (ms)",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "error_rate",
+                "name": "Error rate",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "throughput",
+                "name": "Throughput",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "right",
+                "field": "number_of_connected_services",
+                "name": "No. of connected services",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+                "width": "80px",
+              },
+              Object {
+                "align": "left",
+                "field": "connected_services",
+                "name": "Connected services",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "right",
+                "field": "traces",
+                "name": "Traces",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+            ]
+          }
+          items={
+            Array [
+              Object {
+                "average_latency": 49.54,
+                "connected_services": Array [
+                  "order",
+                  "inventory",
+                ],
+                "error_rate": 3.77,
+                "name": "database",
+                "number_of_connected_services": 2,
+                "throughput": 53,
+                "traces": 31,
+              },
+            ]
+          }
+          loading={false}
+          noItemsMessage="No items found"
+          onChange={[Function]}
+          pagination={
+            Object {
+              "hidePerPageOptions": undefined,
+              "pageIndex": 0,
+              "pageSize": 10,
+              "pageSizeOptions": Array [
+                5,
+                10,
+                15,
+              ],
+              "totalItemCount": 1,
+            }
+          }
+          responsive={true}
+          sorting={
+            Object {
+              "allowNeutralSort": true,
+              "sort": Object {
+                "direction": "asc",
+                "field": "Name",
+              },
+            }
+          }
+          tableLayout="auto"
+        >
+          <div
+            className="euiBasicTable"
+          >
+            <div>
+              <EuiTableHeaderMobile>
+                <div
+                  className="euiTableHeaderMobile"
+                >
+                  <EuiFlexGroup
+                    alignItems="baseline"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiTableSortMobile
+                            items={
+                              Array [
+                                Object {
+                                  "isSortAscending": true,
+                                  "isSorted": true,
+                                  "key": "_data_s_name_0",
+                                  "name": "Name",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_average_latency_1",
+                                  "name": "Average latency (ms)",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_error_rate_2",
+                                  "name": "Error rate",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_throughput_3",
+                                  "name": "Throughput",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_number_of_connected_services_4",
+                                  "name": "No. of connected services",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_connected_services_5",
+                                  "name": "Connected services",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_traces_6",
+                                  "name": "Traces",
+                                  "onSort": [Function],
+                                },
+                              ]
+                            }
+                          >
+                            <div
+                              className="euiTableSortMobile"
+                            >
+                              <EuiPopover
+                                anchorPosition="downRight"
+                                button={
+                                  <EuiButtonEmpty
+                                    flush="right"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                    size="xs"
+                                  >
+                                    <EuiI18n
+                                      default="Sorting"
+                                      token="euiTableSortMobile.sorting"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownRight"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      flush="right"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                      size="xs"
+                                    >
+                                      <button
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              <EuiI18n
+                                                default="Sorting"
+                                                token="euiTableSortMobile.sorting"
+                                              >
+                                                Sorting
+                                              </EuiI18n>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </div>
+                          </EuiTableSortMobile>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </div>
+              </EuiTableHeaderMobile>
+              <EuiTable
+                id="random_html_id"
+                responsive={true}
+                tableLayout="auto"
+              >
+                <table
+                  className="euiTable euiTable--responsive euiTable--auto"
+                  id="random_html_id"
+                  tabIndex={-1}
+                >
+                  <EuiScreenReaderOnly>
+                    <caption
+                      className="euiScreenReaderOnly euiTableCaption"
+                    >
+                      <EuiDelayRender
+                        delay={500}
+                      />
+                    </caption>
+                  </EuiScreenReaderOnly>
+                  <EuiTableHeader>
+                    <thead>
+                      <tr>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_name_0"
+                          isSortAscending={true}
+                          isSorted={true}
+                          key="_data_h_name_0"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="ascending"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_name_0"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSortAscending={true}
+                                isSorted={true}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Name",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Name"
+                                      >
+                                        Name
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                  <EuiIcon
+                                    className="euiTableSortIcon"
+                                    size="m"
+                                    type="sortUp"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_average_latency_1"
+                          isSorted={false}
+                          key="_data_h_average_latency_1"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_average_latency_1"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Average latency (ms)",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Average latency (ms)"
+                                      >
+                                        Average latency (ms)
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_error_rate_2"
+                          isSorted={false}
+                          key="_data_h_error_rate_2"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_error_rate_2"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Error rate",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Error rate"
+                                      >
+                                        Error rate
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_throughput_3"
+                          isSorted={false}
+                          key="_data_h_throughput_3"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_throughput_3"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Throughput",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Throughput"
+                                      >
+                                        Throughput
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_number_of_connected_services_4"
+                          isSorted={false}
+                          key="_data_h_number_of_connected_services_4"
+                          onSort={[Function]}
+                          width="80px"
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_number_of_connected_services_4"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": "80px",
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "No. of connected services",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="No. of connected services"
+                                      >
+                                        No. of connected services
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_connected_services_5"
+                          isSorted={false}
+                          key="_data_h_connected_services_5"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_connected_services_5"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Connected services",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Connected services"
+                                      >
+                                        Connected services
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_traces_6"
+                          isSorted={false}
+                          key="_data_h_traces_6"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_traces_6"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Traces",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Traces"
+                                      >
+                                        Traces
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                      </tr>
+                    </thead>
+                  </EuiTableHeader>
+                  <EuiTableBody
+                    bodyRef={[Function]}
+                  >
+                    <tbody>
+                      <EuiTableRow
+                        isSelected={false}
+                      >
+                        <tr
+                          className="euiTableRow"
+                        >
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_name_0_0"
+                            mobileOptions={
+                              Object {
+                                "header": "Name",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Name
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  className=""
+                                  key=".0"
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    database
+                                  </button>
+                                </EuiLink>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_average_latency_0_1"
+                            mobileOptions={
+                              Object {
+                                "header": "Average latency (ms)",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Average latency (ms)
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                49.54
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_error_rate_0_2"
+                            mobileOptions={
+                              Object {
+                                "header": "Error rate",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Error rate
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    3.77%
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_throughput_0_3"
+                            mobileOptions={
+                              Object {
+                                "header": "Throughput",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Throughput
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiI18nNumber
+                                  className=""
+                                  key=".0"
+                                  value={53}
+                                >
+                                  53
+                                </EuiI18nNumber>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_number_of_connected_services_0_4"
+                            mobileOptions={
+                              Object {
+                                "header": "No. of connected services",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                            width="80px"
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": "80px",
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                No. of connected services
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                2
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_connected_services_0_5"
+                            mobileOptions={
+                              Object {
+                                "header": "Connected services",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Connected services
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    order, inventory
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_traces_0_6"
+                            mobileOptions={
+                              Object {
+                                "header": "Traces",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Traces
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiLink
+                                  onClick={[Function]}
+                                >
+                                  <button
+                                    className="euiLink euiLink--primary"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiI18nNumber
+                                      value={31}
+                                    >
+                                      31
+                                    </EuiI18nNumber>
+                                  </button>
+                                </EuiLink>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                        </tr>
+                      </EuiTableRow>
+                    </tbody>
+                  </EuiTableBody>
+                </table>
+              </EuiTable>
+            </div>
+            <PaginationBar
+              aria-controls="random_html_id"
+              onPageChange={[Function]}
+              onPageSizeChange={[Function]}
+              pagination={
+                Object {
+                  "hidePerPageOptions": undefined,
+                  "pageIndex": 0,
+                  "pageSize": 10,
+                  "pageSizeOptions": Array [
+                    5,
+                    10,
+                    15,
+                  ],
+                  "totalItemCount": 1,
+                }
+              }
+            >
+              <div>
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiTablePagination
+                  activePage={0}
+                  aria-controls="random_html_id"
+                  itemsPerPage={10}
+                  itemsPerPageOptions={
+                    Array [
+                      5,
+                      10,
+                      15,
+                    ]
+                  }
+                  onChangeItemsPerPage={[Function]}
+                  onChangePage={[Function]}
+                  pageCount={1}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPopover
+                            anchorPosition="upRight"
+                            button={
+                              <EuiButtonEmpty
+                                color="text"
+                                data-test-subj="tablePaginationPopoverButton"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                onClick={[Function]}
+                                size="xs"
+                              >
+                                <EuiI18n
+                                  default="Rows per page"
+                                  token="euiTablePagination.rowsPerPage"
+                                />
+                                : 
+                                10
+                              </EuiButtonEmpty>
+                            }
+                            closePopover={[Function]}
+                            display="inlineBlock"
+                            hasArrow={true}
+                            isOpen={false}
+                            ownFocus={true}
+                            panelPaddingSize="none"
+                          >
+                            <div
+                              className="euiPopover euiPopover--anchorUpRight"
+                            >
+                              <div
+                                className="euiPopover__anchor"
+                              >
+                                <EuiButtonEmpty
+                                  color="text"
+                                  data-test-subj="tablePaginationPopoverButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  onClick={[Function]}
+                                  size="xs"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                                    data-test-subj="tablePaginationPopoverButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiButtonContent
+                                      className="euiButtonEmpty__content"
+                                      iconSide="right"
+                                      iconSize="s"
+                                      iconType="arrowDown"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButtonEmpty__text",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                      >
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="s"
+                                          type="arrowDown"
+                                        >
+                                          <EuiIconEmpty
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                            focusable="false"
+                                            role="img"
+                                            style={null}
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            />
+                                          </EuiIconEmpty>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButtonEmpty__text"
+                                        >
+                                          <EuiI18n
+                                            default="Rows per page"
+                                            token="euiTablePagination.rowsPerPage"
+                                          >
+                                            Rows per page
+                                          </EuiI18n>
+                                          : 
+                                          10
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonEmpty>
+                              </div>
+                            </div>
+                          </EuiPopover>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPagination
+                            activePage={0}
+                            aria-controls="random_html_id"
+                            onPageClick={[Function]}
+                            pageCount={1}
+                          >
+                            <nav
+                              className="euiPagination"
+                            >
+                              <EuiI18n
+                                default="Previous page, {page}"
+                                token="euiPagination.previousPage"
+                                values={
+                                  Object {
+                                    "page": 0,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Previous page"
+                                  token="euiPagination.disabledPreviousPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Previous page"
+                                    color="text"
+                                    data-test-subj="pagination-button-previous"
+                                    disabled={true}
+                                    iconType="arrowLeft"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Previous page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-previous"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowLeft"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                              <ul
+                                className="euiPagination__list"
+                              >
+                                <PaginationButton
+                                  key="0"
+                                  pageIndex={0}
+                                >
+                                  <li
+                                    className="euiPagination__item"
+                                  >
+                                    <EuiPaginationButton
+                                      aria-controls="random_html_id"
+                                      hideOnMobile={true}
+                                      isActive={true}
+                                      onClick={[Function]}
+                                      pageIndex={0}
+                                      totalPages={1}
+                                    >
+                                      <EuiI18n
+                                        default="Page {page} of {totalPages}"
+                                        token="euiPaginationButton.longPageString"
+                                        values={
+                                          Object {
+                                            "page": 1,
+                                            "totalPages": 1,
+                                          }
+                                        }
+                                      >
+                                        <EuiI18n
+                                          default="Page {page}"
+                                          token="euiPaginationButton.shortPageString"
+                                          values={
+                                            Object {
+                                              "page": 1,
+                                            }
+                                          }
+                                        >
+                                          <EuiButtonEmpty
+                                            aria-controls="random_html_id"
+                                            aria-current={true}
+                                            aria-label="Page 1 of 1"
+                                            className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                            color="text"
+                                            data-test-subj="pagination-button-0"
+                                            href="#random_html_id"
+                                            isDisabled={true}
+                                            onClick={[Function]}
+                                            size="s"
+                                          >
+                                            <button
+                                              aria-controls="random_html_id"
+                                              aria-current={true}
+                                              aria-label="Page 1 of 1"
+                                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                              data-test-subj="pagination-button-0"
+                                              disabled={true}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButtonEmpty__content"
+                                                iconSide="left"
+                                                iconSize="m"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButtonEmpty__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonEmpty__content"
+                                                >
+                                                  <span
+                                                    className="euiButtonEmpty__text"
+                                                  >
+                                                    1
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonEmpty>
+                                        </EuiI18n>
+                                      </EuiI18n>
+                                    </EuiPaginationButton>
+                                  </li>
+                                </PaginationButton>
+                              </ul>
+                              <EuiI18n
+                                default="Next page, {page}"
+                                token="euiPagination.nextPage"
+                                values={
+                                  Object {
+                                    "page": 2,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Next page"
+                                  token="euiPagination.disabledNextPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Next page"
+                                    color="text"
+                                    data-test-subj="pagination-button-next"
+                                    disabled={true}
+                                    iconType="arrowRight"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Next page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-next"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                            </nav>
+                          </EuiPagination>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </EuiTablePagination>
+              </div>
+            </PaginationBar>
+          </div>
+        </EuiBasicTable>
+      </EuiInMemoryTable>
+    </div>
+  </EuiPanel>
+</ServicesTable>
+`;
diff --git a/public/components/trace_analytics/components/services/__tests__/service_view.test.tsx b/public/components/trace_analytics/components/services/__tests__/service_view.test.tsx
new file mode 100644
index 0000000000..b480555482
--- /dev/null
+++ b/public/components/trace_analytics/components/services/__tests__/service_view.test.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { ServiceView } from '..';
+import { coreStartMock } from '../../../../../../test/__mocks__/coreMocks';
+
+describe('Service view component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders service view', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const addFilter = jest.fn();
+    const wrapper = shallow(
+      <ServiceView
+        serviceName="order"
+        chrome={core.chrome}
+        appConfigs={[]}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        http={core.http}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={false}
+        addFilter={addFilter}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/services/__tests__/services.test.tsx b/public/components/trace_analytics/components/services/__tests__/services.test.tsx
new file mode 100644
index 0000000000..fca7a6c44b
--- /dev/null
+++ b/public/components/trace_analytics/components/services/__tests__/services.test.tsx
@@ -0,0 +1,102 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { Services } from '..';
+import { coreStartMock } from '../../../../../../test/__mocks__/coreMocks';
+
+describe('Services component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty services page', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const serviceBreadcrumbs = [
+      {
+        text: 'Trace analytics',
+        href: '#/trace_analytics/home',
+      },
+      {
+        text: 'Services',
+        href: '#/trace_analytics/services',
+      },
+    ];
+    const nameColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/services/${encodeURIComponent(item)}`);
+    const traceColumnAction = () => location.assign('#/trace_analytics/traces');
+    const wrapper = mount(
+      <Services
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        childBreadcrumbs={serviceBreadcrumbs}
+        nameColumnAction={nameColumnAction}
+        traceColumnAction={traceColumnAction}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        appConfigs={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={false}
+        page="services"
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders services page', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const serviceBreadcrumbs = [
+      {
+        text: 'Trace analytics',
+        href: '#/trace_analytics/home',
+      },
+      {
+        text: 'Services',
+        href: '#/trace_analytics/services',
+      },
+    ];
+    const nameColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/services/${encodeURIComponent(item)}`);
+    const traceColumnAction = () => location.assign('#/trace_analytics/traces');
+    const wrapper = mount(
+      <Services
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        childBreadcrumbs={serviceBreadcrumbs}
+        nameColumnAction={nameColumnAction}
+        traceColumnAction={traceColumnAction}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        appConfigs={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        page="services"
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/services/__tests__/services_table.test.tsx b/public/components/trace_analytics/components/services/__tests__/services_table.test.tsx
new file mode 100644
index 0000000000..a4eb24e3c2
--- /dev/null
+++ b/public/components/trace_analytics/components/services/__tests__/services_table.test.tsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { ServicesTable } from '../services_table';
+
+describe('Services table component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty services table message', () => {
+    const addFilter = jest.fn();
+    const setRedirect = jest.fn();
+    const nameColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/services/${encodeURIComponent(item)}`);
+    const traceColumnAction = () => location.assign('#/trace_analytics/traces');
+    const wrapper = mount(
+      <ServicesTable
+        items={[]}
+        nameColumnAction={nameColumnAction}
+        traceColumnAction={traceColumnAction}
+        addFilter={addFilter}
+        setRedirect={setRedirect}
+        indicesExist={true}
+        loading={false}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders services table', () => {
+    const tableItems = [
+      {
+        name: 'database',
+        average_latency: 49.54,
+        error_rate: 3.77,
+        throughput: 53,
+        traces: 31,
+        connected_services: ['order', 'inventory'],
+        number_of_connected_services: 2,
+      },
+    ];
+    const addFilter = jest.fn();
+    const setRedirect = jest.fn();
+    const nameColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/services/${encodeURIComponent(item)}`);
+    const traceColumnAction = () => location.assign('#/trace_analytics/traces');
+    const wrapper = mount(
+      <ServicesTable
+        items={tableItems}
+        nameColumnAction={nameColumnAction}
+        traceColumnAction={traceColumnAction}
+        addFilter={addFilter}
+        setRedirect={setRedirect}
+        indicesExist={true}
+        loading={false}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/services/index.ts b/public/components/trace_analytics/components/services/index.ts
new file mode 100644
index 0000000000..d38e5a4a3d
--- /dev/null
+++ b/public/components/trace_analytics/components/services/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Services } from './services';
+export { ServiceView } from './service_view';
+export { ServiceMap } from '../common/plots/service_map';
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
new file mode 100644
index 0000000000..555446ac27
--- /dev/null
+++ b/public/components/trace_analytics/components/services/service_view.tsx
@@ -0,0 +1,346 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiI18nNumber,
+  EuiLink,
+  EuiPage,
+  EuiPageBody,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+import { TraceAnalyticsComponentDeps } from '../../home';
+import {
+  handleServiceMapRequest,
+  handleServiceViewRequest,
+} from '../../requests/services_request_handler';
+import { FilterType } from '../common/filters/filters';
+import { filtersToDsl, PanelTitle } from '../common/helper_functions';
+import { ServiceMap, ServiceObject } from '../common/plots/service_map';
+import { renderDatePicker, SearchBarProps } from '../common/search_bar';
+import { SpanDetailFlyout } from '../traces/span_detail_flyout';
+import { SpanDetailTable } from '../traces/span_detail_table';
+
+interface ServiceViewProps extends TraceAnalyticsComponentDeps {
+  serviceName: string;
+  addFilter: (filter: FilterType) => void;
+}
+
+export function ServiceView(props: ServiceViewProps) {
+  const [fields, setFields] = useState<any>({});
+  const [serviceMap, setServiceMap] = useState<ServiceObject>({});
+  const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
+    'latency' | 'error_rate' | 'throughput'
+  >('latency');
+  const [redirect, setRedirect] = useState(false);
+
+  const refresh = () => {
+    const DSL = filtersToDsl(props.filters, props.query, props.startTime, props.endTime);
+    handleServiceViewRequest(props.serviceName, props.http, DSL, setFields);
+    handleServiceMapRequest(props.http, DSL, setServiceMap, props.serviceName);
+  };
+
+  useEffect(() => {
+    props.chrome.setBreadcrumbs([
+      ...props.parentBreadcrumbs,
+      {
+        text: 'Trace analytics',
+        href: '#/trace_analytics/home',
+      },
+      {
+        text: 'Services',
+        href: '#/trace_analytics/services',
+      },
+      {
+        text: props.serviceName,
+        href: `#/trace_analytics/services/${encodeURIComponent(props.serviceName)}`,
+      },
+    ]);
+  }, [props.serviceName]);
+
+  useEffect(() => {
+    if (!redirect) refresh();
+  }, [props.startTime, props.endTime, props.serviceName]);
+
+  const renderTitle = (
+    serviceName: string,
+    startTime: SearchBarProps['startTime'],
+    setStartTime: SearchBarProps['setStartTime'],
+    endTime: SearchBarProps['endTime'],
+    setEndTime: SearchBarProps['setEndTime'],
+    addFilter: (filter: FilterType) => void
+  ) => {
+    return (
+      <>
+        <EuiFlexItem>
+          <EuiTitle size="l">
+            <h2 className="overview-content">{serviceName}</h2>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {renderDatePicker(startTime, setStartTime, endTime, setEndTime)}
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} />
+      </>
+    );
+  };
+
+  const renderOverview = () => {
+    return (
+      <EuiPanel>
+        <PanelTitle title="Overview" />
+        <EuiHorizontalRule margin="m" />
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFlexGroup direction="column">
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Name</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {props.serviceName || '-'}
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Number of connected services</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {fields.number_of_connected_services !== undefined
+                    ? fields.number_of_connected_services
+                    : 0}
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Connected services</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {fields.connected_services
+                    ? fields.connected_services
+                        .map((service: string) => (
+                          <EuiLink href={`#/trace_analytics/services/${service}`} key={service}>
+                            {service}
+                          </EuiLink>
+                        ))
+                        .reduce((prev: React.ReactNode, curr: React.ReactNode) => {
+                          return [prev, ', ', curr];
+                        })
+                    : '-'}
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFlexGroup direction="column">
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Average latency (ms)</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {fields.average_latency !== undefined ? fields.average_latency : '-'}
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Error rate</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {fields.error_rate !== undefined
+                    ? _.round(fields.error_rate, 2).toString() + '%'
+                    : '-'}
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Throughput</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {fields.throughput !== undefined ? (
+                    <EuiI18nNumber value={fields.throughput} />
+                  ) : (
+                    '-'
+                  )}
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Traces</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {fields.traces === 0 || fields.traces ? (
+                    <EuiLink
+                      onClick={() => {
+                        setRedirect(true);
+                        props.addFilter({
+                          field: 'serviceName',
+                          operator: 'is',
+                          value: props.serviceName,
+                          inverted: false,
+                          disabled: false,
+                        });
+                        location.assign('#/trace_analytics/traces');
+                      }}
+                    >
+                      <EuiI18nNumber value={fields.traces} />
+                    </EuiLink>
+                  ) : (
+                    '-'
+                  )}
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer />
+      </EuiPanel>
+    );
+  };
+
+  const overview = useMemo(() => renderOverview(), [fields, props.serviceName]);
+
+  const title = useMemo(
+    () =>
+      renderTitle(
+        props.serviceName,
+        props.startTime,
+        props.setStartTime,
+        props.endTime,
+        props.setEndTime,
+        props.addFilter
+      ),
+    [props.serviceName, props.startTime, props.endTime]
+  );
+
+  const activeFilters = useMemo(
+    () => props.filters.filter((filter) => !filter.locked && !filter.disabled),
+    [props.filters]
+  );
+
+  const [currentSpan, setCurrentSpan] = useState('');
+  const storedFilters = sessionStorage.getItem('TraceAnalyticsSpanFilters');
+  const [spanFilters, setSpanFilters] = useState<Array<{ field: string; value: any }>>(
+    storedFilters ? JSON.parse(storedFilters) : []
+  );
+  const [DSL, setDSL] = useState<any>({});
+
+  const setSpanFiltersWithStorage = (newFilters: Array<{ field: string; value: any }>) => {
+    setSpanFilters(newFilters);
+    sessionStorage.setItem('TraceAnalyticsSpanFilters', JSON.stringify(newFilters));
+  };
+
+  useEffect(() => {
+    const spanDSL = filtersToDsl(props.filters, props.query, props.startTime, props.endTime);
+    spanDSL.query.bool.must.push({
+      term: {
+        serviceName: props.serviceName,
+      },
+    });
+    spanFilters.map(({ field, value }) => {
+      if (value != null) {
+        spanDSL.query.bool.must.push({
+          term: {
+            [field]: value,
+          },
+        });
+      }
+    });
+    setDSL(spanDSL);
+  }, [props.startTime, props.endTime, props.serviceName, spanFilters]);
+
+  const addSpanFilter = (field: string, value: any) => {
+    const newFilters = [...spanFilters];
+    const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
+    if (index === -1) {
+      newFilters.push({ field, value });
+    } else {
+      newFilters.splice(index, 1, { field, value });
+    }
+    setSpanFiltersWithStorage(newFilters);
+  };
+
+  const removeSpanFilter = (field: string) => {
+    const newFilters = [...spanFilters];
+    const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
+    if (index !== -1) {
+      newFilters.splice(index, 1);
+      setSpanFiltersWithStorage(newFilters);
+    }
+  };
+
+  const renderFilters = useMemo(() => {
+    return spanFilters.map(({ field, value }) => (
+      <EuiFlexItem grow={false} key={`span-filter-badge-${field}`}>
+        <EuiBadge
+          iconType="cross"
+          iconSide="right"
+          iconOnClick={() => removeSpanFilter(field)}
+          iconOnClickAriaLabel="remove current filter"
+        >
+          {`${field}: ${value}`}
+        </EuiBadge>
+      </EuiFlexItem>
+    ));
+  }, [spanFilters]);
+
+  const [total, setTotal] = useState(0);
+  const spanDetailTable = useMemo(
+    () => (
+      <SpanDetailTable
+        http={props.http}
+        hiddenColumns={['serviceName']}
+        DSL={DSL}
+        openFlyout={(spanId: string) => setCurrentSpan(spanId)}
+        setTotal={setTotal}
+      />
+    ),
+    [DSL, setCurrentSpan]
+  );
+
+  return (
+    <>
+      <EuiPage>
+        <EuiPageBody>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            {title}
+          </EuiFlexGroup>
+          {activeFilters.length > 0 && (
+            <EuiText textAlign="right" style={{ marginRight: 20 }} color="subdued">
+              results are filtered by {activeFilters.map((filter) => filter.field).join(', ')}
+            </EuiText>
+          )}
+          <EuiSpacer size="xl" />
+          {overview}
+          <EuiSpacer />
+          <ServiceMap
+            serviceMap={serviceMap}
+            idSelected={serviceMapIdSelected}
+            setIdSelected={setServiceMapIdSelected}
+            currService={props.serviceName}
+            page="serviceView"
+          />
+          <EuiSpacer />
+          <EuiPanel>
+            <PanelTitle title="Spans" totalItems={total} />
+            {spanFilters.length > 0 && (
+              <>
+                <EuiSpacer size="s" />
+                <EuiFlexGroup gutterSize="s" wrap>
+                  {renderFilters}
+                </EuiFlexGroup>
+              </>
+            )}
+            <EuiHorizontalRule margin="m" />
+            <div>{spanDetailTable}</div>
+          </EuiPanel>
+          {!!currentSpan && (
+            <SpanDetailFlyout
+              http={props.http}
+              spanId={currentSpan}
+              isFlyoutVisible={!!currentSpan}
+              closeFlyout={() => setCurrentSpan('')}
+              addSpanFilter={addSpanFilter}
+            />
+          )}
+        </EuiPageBody>
+      </EuiPage>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/services/services.tsx b/public/components/trace_analytics/components/services/services.tsx
new file mode 100644
index 0000000000..04c6bad2f9
--- /dev/null
+++ b/public/components/trace_analytics/components/services/services.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiBreadcrumb, EuiTitle } from '@elastic/eui';
+import _ from 'lodash';
+import React from 'react';
+import { TraceAnalyticsComponentDeps } from '../../home';
+import { ServicesContent } from './services_content';
+
+export interface ServicesProps extends TraceAnalyticsComponentDeps {
+  childBreadcrumbs: EuiBreadcrumb[];
+  nameColumnAction: any;
+  traceColumnAction: any;
+  page: 'services' | 'app';
+}
+
+export function Services(props: ServicesProps) {
+  return (
+    <>
+      <EuiTitle size="l">
+        <h2 style={{ fontWeight: 430 }}>Services</h2>
+      </EuiTitle>
+      <ServicesContent {...props} />
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/services/services_content.tsx b/public/components/trace_analytics/components/services/services_content.tsx
new file mode 100644
index 0000000000..e4fa97e25d
--- /dev/null
+++ b/public/components/trace_analytics/components/services/services_content.tsx
@@ -0,0 +1,141 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import { EuiSpacer } from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import {
+  handleServiceMapRequest,
+  handleServicesRequest,
+} from '../../requests/services_request_handler';
+import { FilterType } from '../common/filters/filters';
+import { getValidFilterFields } from '../common/filters/filter_helpers';
+import { filtersToDsl } from '../common/helper_functions';
+import { ServiceMap, ServiceObject } from '../common/plots/service_map';
+import { SearchBar } from '../common/search_bar';
+import { ServicesProps } from './services';
+import { ServicesTable } from './services_table';
+
+export function ServicesContent(props: ServicesProps) {
+  const {
+    page,
+    http,
+    chrome,
+    filters,
+    query,
+    startTime,
+    endTime,
+    indicesExist,
+    appConfigs = [],
+    childBreadcrumbs,
+    parentBreadcrumbs,
+    nameColumnAction,
+    traceColumnAction,
+    setFilters,
+    setQuery,
+    setStartTime,
+    setEndTime,
+  } = props;
+  const [tableItems, setTableItems] = useState([]);
+  const [serviceMap, setServiceMap] = useState<ServiceObject>({});
+  const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
+    'latency' | 'error_rate' | 'throughput'
+  >('latency');
+  const [redirect, setRedirect] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [filteredService, setFilteredService] = useState('');
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
+    const validFilters = getValidFilterFields('services');
+    setFilters([
+      ...filters.map((filter) => ({
+        ...filter,
+        locked: validFilters.indexOf(filter.field) === -1,
+      })),
+    ]);
+    setRedirect(false);
+  }, []);
+
+  useEffect(() => {
+    let newFilteredService = '';
+    for (const filter of filters) {
+      if (filter.field === 'serviceName') {
+        newFilteredService = filter.value;
+        break;
+      }
+    }
+    setFilteredService(newFilteredService);
+    if (!redirect && indicesExist) refresh(newFilteredService);
+  }, [filters, appConfigs]);
+
+  const refresh = async (currService?: string) => {
+    setLoading(true);
+    const DSL = filtersToDsl(filters, query, startTime, endTime, page, appConfigs);
+    // service map should not be filtered by service name
+    const serviceMapDSL = _.cloneDeep(DSL);
+    serviceMapDSL.query.bool.must = serviceMapDSL.query.bool.must.filter(
+      (must: any) => must?.term?.serviceName == null
+    );
+    await Promise.all([
+      handleServicesRequest(http, DSL, setTableItems),
+      handleServiceMapRequest(http, serviceMapDSL, setServiceMap, currService || filteredService),
+    ]);
+    setLoading(false);
+  };
+
+  const addFilter = (filter: FilterType) => {
+    for (let i = 0; i < filters.length; i++) {
+      const addedFilter = filters[i];
+      if (addedFilter.field === filter.field) {
+        if (addedFilter.operator === filter.operator && addedFilter.value === filter.value) return;
+        const newFilters = [...filters];
+        newFilters.splice(i, 1, filter);
+        setFilters(newFilters);
+        return;
+      }
+    }
+    const newFilters = [...filters, filter];
+    setFilters(newFilters);
+  };
+
+  return (
+    <>
+      <SearchBar
+        query={query}
+        filters={filters}
+        appConfigs={appConfigs}
+        setFilters={setFilters}
+        setQuery={setQuery}
+        startTime={startTime}
+        setStartTime={setStartTime}
+        endTime={endTime}
+        setEndTime={setEndTime}
+        refresh={refresh}
+        page={page}
+      />
+      <EuiSpacer size="m" />
+      <ServicesTable
+        items={tableItems}
+        addFilter={addFilter}
+        setRedirect={setRedirect}
+        indicesExist={indicesExist}
+        loading={loading}
+        nameColumnAction={nameColumnAction}
+        traceColumnAction={traceColumnAction}
+      />
+      <EuiSpacer size="m" />
+      <ServiceMap
+        addFilter={addFilter}
+        serviceMap={serviceMap}
+        idSelected={serviceMapIdSelected}
+        setIdSelected={setServiceMapIdSelected}
+        currService={filteredService}
+        page={page}
+      />
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/services/services_table.tsx b/public/components/trace_analytics/components/services/services_table.tsx
new file mode 100644
index 0000000000..d294f13ef4
--- /dev/null
+++ b/public/components/trace_analytics/components/services/services_table.tsx
@@ -0,0 +1,180 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiI18nNumber,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiTableFieldDataColumnType,
+  EuiText,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useMemo } from 'react';
+import { FilterType } from '../common/filters/filters';
+import {
+  MissingConfigurationMessage,
+  NoMatchMessage,
+  PanelTitle,
+} from '../common/helper_functions';
+
+interface ServicesTableProps {
+  items: any[];
+  indicesExist: boolean;
+  loading: boolean;
+  nameColumnAction: (item: any) => any;
+  traceColumnAction: any;
+  addFilter: (filter: FilterType) => void;
+  setRedirect: (redirect: boolean) => void;
+}
+
+export function ServicesTable(props: ServicesTableProps) {
+  const {
+    items,
+    indicesExist,
+    loading,
+    nameColumnAction,
+    traceColumnAction,
+    addFilter,
+    setRedirect,
+  } = props;
+  const renderTitleBar = (totalItems?: number) => {
+    return (
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem grow={10}>
+          <PanelTitle title="Services" totalItems={totalItems} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  const columns = useMemo(
+    () =>
+      [
+        {
+          field: 'name',
+          name: 'Name',
+          align: 'left',
+          sortable: true,
+          render: (item: any) => (
+            <EuiLink onClick={() => nameColumnAction(item)}>
+              {item.length < 24 ? item : <div title={item}>{_.truncate(item, { length: 24 })}</div>}
+            </EuiLink>
+          ),
+        },
+        {
+          field: 'average_latency',
+          name: 'Average latency (ms)',
+          align: 'right',
+          sortable: true,
+          render: (item: any) => (item === 0 || item ? _.round(item, 2) : '-'),
+        },
+        {
+          field: 'error_rate',
+          name: 'Error rate',
+          align: 'right',
+          sortable: true,
+          render: (item) =>
+            item === 0 || item ? <EuiText size="s">{`${_.round(item, 2)}%`}</EuiText> : '-',
+        },
+        {
+          field: 'throughput',
+          name: 'Throughput',
+          align: 'right',
+          sortable: true,
+          truncateText: true,
+          render: (item: any) => (item === 0 || item ? <EuiI18nNumber value={item} /> : '-'),
+        },
+        {
+          field: 'number_of_connected_services',
+          name: 'No. of connected services',
+          align: 'right',
+          sortable: true,
+          truncateText: true,
+          width: '80px',
+          render: (item: any) => (item === 0 || item ? item : '-'),
+        },
+        {
+          field: 'connected_services',
+          name: 'Connected services',
+          align: 'left',
+          sortable: true,
+          truncateText: true,
+          render: (item: any) =>
+            item ? <EuiText size="s">{_.truncate(item.join(', '), { length: 50 })}</EuiText> : '-',
+        },
+        {
+          field: 'traces',
+          name: 'Traces',
+          align: 'right',
+          sortable: true,
+          truncateText: true,
+          render: (item: any, row: any) => (
+            <>
+              {item === 0 || item ? (
+                <EuiLink
+                  onClick={() => {
+                    setRedirect(true);
+                    addFilter({
+                      field: 'serviceName',
+                      operator: 'is',
+                      value: row.name,
+                      inverted: false,
+                      disabled: false,
+                    });
+                    traceColumnAction();
+                  }}
+                >
+                  <EuiI18nNumber value={item} />
+                </EuiLink>
+              ) : (
+                '-'
+              )}
+            </>
+          ),
+        },
+      ] as Array<EuiTableFieldDataColumnType<any>>,
+    [items]
+  );
+
+  const titleBar = useMemo(() => renderTitleBar(items?.length), [items]);
+
+  return (
+    <>
+      <EuiPanel>
+        {titleBar}
+        <EuiSpacer size="m" />
+        <EuiHorizontalRule margin="none" />
+        {items?.length > 0 ? (
+          <EuiInMemoryTable
+            tableLayout="auto"
+            items={items}
+            columns={columns}
+            pagination={{
+              initialPageSize: 10,
+              pageSizeOptions: [5, 10, 15],
+            }}
+            sorting={{
+              sort: {
+                field: 'name',
+                direction: 'asc',
+              },
+            }}
+            loading={loading}
+          />
+        ) : indicesExist ? (
+          <NoMatchMessage size="xl" />
+        ) : (
+          <MissingConfigurationMessage />
+        )}
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/flyout_list_item.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/flyout_list_item.test.tsx.snap
new file mode 100644
index 0000000000..00b1ddc113
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/flyout_list_item.test.tsx.snap
@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<FlyoutListItem /> spec renders the component 1`] = `
+<div>
+  <dl
+    class="euiDescriptionList euiDescriptionList--column euiDescriptionList--center euiDescriptionList--compressed"
+    data-test-subj="Span IDDescriptionList"
+  >
+    <dt
+      class="euiDescriptionList__title"
+    >
+      <div
+        class="euiText euiText--small"
+        style="word-break: break-all; word-wrap: break-word;"
+      >
+        <div
+          class="euiTextColor euiTextColor--subdued"
+        >
+          Span ID
+        </div>
+      </div>
+    </dt>
+    <dd
+      class="euiDescriptionList__description"
+    >
+      <div
+        class="euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive"
+      >
+        <div
+          class="euiFlexItem"
+        >
+          <div
+            class="euiText euiText--small"
+            style="word-break: break-all; word-wrap: break-word; white-space: pre-line;"
+          >
+            <b>
+              test-span-id
+            </b>
+          </div>
+        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        />
+      </div>
+    </dd>
+  </dl>
+</div>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap
new file mode 100644
index 0000000000..420393e592
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/service_breakdown_panel.test.tsx.snap
@@ -0,0 +1,432 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Service breakdown panel component renders empty service breakdown panel 1`] = `
+<ServiceBreakdownPanel
+  data={Array []}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <PanelTitle
+        title="Time spent by service"
+      >
+        <EuiText
+          size="m"
+        >
+          <div
+            className="euiText euiText--medium"
+          >
+            <span
+              className="panel-title"
+            >
+              Time spent by service
+            </span>
+          </div>
+        </EuiText>
+      </PanelTitle>
+      <EuiHorizontalRule
+        margin="m"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+        />
+      </EuiHorizontalRule>
+      <EuiFlexGroup
+        alignItems="center"
+        direction="column"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            />
+          </EuiFlexItem>
+          <EuiSpacer>
+            <div
+              className="euiSpacer euiSpacer--l"
+            />
+          </EuiSpacer>
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            />
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer>
+        <div
+          className="euiSpacer euiSpacer--l"
+        />
+      </EuiSpacer>
+    </div>
+  </EuiPanel>
+</ServiceBreakdownPanel>
+`;
+
+exports[`Service breakdown panel component renders service breakdown panel 1`] = `
+<ServiceBreakdownPanel
+  data={
+    Array [
+      Object {
+        "hovertemplate": "%{label}<br>%{value:.2f}%<extra></extra>",
+        "labels": Array [
+          "inventory",
+        ],
+        "marker": Object {
+          "colors": Array [
+            "#7492e7",
+          ],
+        },
+        "textinfo": "none",
+        "type": "pie",
+        "values": Array [
+          100,
+        ],
+      },
+    ]
+  }
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <PanelTitle
+        title="Time spent by service"
+      >
+        <EuiText
+          size="m"
+        >
+          <div
+            className="euiText euiText--medium"
+          >
+            <span
+              className="panel-title"
+            >
+              Time spent by service
+            </span>
+          </div>
+        </EuiText>
+      </PanelTitle>
+      <EuiHorizontalRule
+        margin="m"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+        />
+      </EuiHorizontalRule>
+      <EuiFlexGroup
+        alignItems="center"
+        direction="column"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <Plt
+                data={
+                  Array [
+                    Object {
+                      "hovertemplate": "%{label}<br>%{value:.2f}%<extra></extra>",
+                      "labels": Array [
+                        "inventory",
+                      ],
+                      "marker": Object {
+                        "colors": Array [
+                          "#7492e7",
+                        ],
+                      },
+                      "textinfo": "none",
+                      "type": "pie",
+                      "values": Array [
+                        100,
+                      ],
+                    },
+                  ]
+                }
+                layout={
+                  Object {
+                    "height": 200,
+                    "margin": Object {
+                      "b": 5,
+                      "l": 5,
+                      "r": 5,
+                      "t": 5,
+                    },
+                    "showlegend": false,
+                    "width": 200,
+                  }
+                }
+              >
+                <PlotlyComponent
+                  config={
+                    Object {
+                      "displayModeBar": false,
+                    }
+                  }
+                  data={
+                    Array [
+                      Object {
+                        "hovertemplate": "%{label}<br>%{value:.2f}%<extra></extra>",
+                        "labels": Array [
+                          "inventory",
+                        ],
+                        "marker": Object {
+                          "colors": Array [
+                            "#7492e7",
+                          ],
+                        },
+                        "textinfo": "none",
+                        "type": "pie",
+                        "values": Array [
+                          100,
+                        ],
+                      },
+                    ]
+                  }
+                  debug={false}
+                  divId="explorerPlotComponent"
+                  layout={
+                    Object {
+                      "autosize": true,
+                      "barmode": "stack",
+                      "height": 200,
+                      "hovermode": "closest",
+                      "legend": Object {
+                        "orientation": "h",
+                        "traceorder": "normal",
+                      },
+                      "margin": Object {
+                        "b": 5,
+                        "l": 5,
+                        "r": 5,
+                        "t": 5,
+                      },
+                      "showlegend": false,
+                      "width": 200,
+                      "xaxis": Object {
+                        "automargin": true,
+                        "rangemode": "normal",
+                        "showgrid": true,
+                        "zeroline": false,
+                      },
+                      "yaxis": Object {
+                        "rangemode": "normal",
+                        "showgrid": true,
+                        "zeroline": false,
+                      },
+                    }
+                  }
+                  style={
+                    Object {
+                      "height": "100%",
+                      "width": "100%",
+                    }
+                  }
+                  useResizeHandler={true}
+                >
+                  <div
+                    id="explorerPlotComponent"
+                    style={
+                      Object {
+                        "height": "100%",
+                        "width": "100%",
+                      }
+                    }
+                  />
+                </PlotlyComponent>
+              </Plt>
+            </div>
+          </EuiFlexItem>
+          <EuiSpacer>
+            <div
+              className="euiSpacer euiSpacer--l"
+            />
+          </EuiSpacer>
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <EuiFlexGroup
+                responsive={false}
+                style={
+                  Object {
+                    "maxHeight": 260,
+                    "overflowY": "auto",
+                  }
+                }
+              >
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow"
+                  style={
+                    Object {
+                      "maxHeight": 260,
+                      "overflowY": "auto",
+                    }
+                  }
+                >
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    >
+                      <EuiFlexGroup
+                        alignItems="flexStart"
+                        direction="column"
+                        gutterSize="m"
+                        responsive={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionColumn"
+                        >
+                          <EuiFlexItem
+                            key="label-0"
+                          >
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiHealth
+                                color="#7492e7"
+                              >
+                                <div
+                                  className="euiHealth euiHealth--textSizeS"
+                                >
+                                  <EuiFlexGroup
+                                    alignItems="center"
+                                    gutterSize="xs"
+                                    responsive={false}
+                                  >
+                                    <div
+                                      className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                    >
+                                      <EuiFlexItem
+                                        grow={false}
+                                      >
+                                        <div
+                                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                                        >
+                                          <EuiIcon
+                                            color="#7492e7"
+                                            type="dot"
+                                          >
+                                            <EuiIconEmpty
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoading"
+                                              focusable="false"
+                                              role="img"
+                                              style={
+                                                Object {
+                                                  "color": "#7492e7",
+                                                }
+                                              }
+                                            >
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--customColor euiIcon-isLoading"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={
+                                                  Object {
+                                                    "color": "#7492e7",
+                                                  }
+                                                }
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              />
+                                            </EuiIconEmpty>
+                                          </EuiIcon>
+                                        </div>
+                                      </EuiFlexItem>
+                                      <EuiFlexItem
+                                        grow={false}
+                                      >
+                                        <div
+                                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                                        >
+                                          <div
+                                            style={
+                                              Object {
+                                                "whiteSpace": "nowrap",
+                                              }
+                                            }
+                                          >
+                                            inventory
+                                          </div>
+                                        </div>
+                                      </EuiFlexItem>
+                                    </div>
+                                  </EuiFlexGroup>
+                                </div>
+                              </EuiHealth>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </div>
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem>
+                    <div
+                      className="euiFlexItem"
+                    >
+                      <EuiFlexGroup
+                        alignItems="flexEnd"
+                        direction="column"
+                        gutterSize="m"
+                        responsive={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionColumn"
+                        >
+                          <EuiFlexItem
+                            key="value-0"
+                          >
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiText
+                                size="s"
+                              >
+                                <div
+                                  className="euiText euiText--small"
+                                >
+                                  100
+                                  %
+                                </div>
+                              </EuiText>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </div>
+                  </EuiFlexItem>
+                </div>
+              </EuiFlexGroup>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer>
+        <div
+          className="euiSpacer euiSpacer--l"
+        />
+      </EuiSpacer>
+    </div>
+  </EuiPanel>
+</ServiceBreakdownPanel>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap
new file mode 100644
index 0000000000..cb4564c2e1
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_flyout.test.tsx.snap
@@ -0,0 +1,654 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SpanDetailFlyout /> spec renders the component with data 1`] = `<div />`;
+
+exports[`<SpanDetailFlyout /> spec renders the empty component 1`] = `
+<SpanDetailFlyout
+  addSpanFilter={[MockFunction]}
+  closeFlyout={[MockFunction]}
+  http={[MockFunction]}
+  isFlyoutVisible={true}
+  spanId="test"
+>
+  <EuiFlyout
+    data-test-subj="spanDetailFlyout"
+    onClose={[MockFunction]}
+    size="s"
+  >
+    <OuiWindowEvent
+      event="keydown"
+      handler={[Function]}
+    />
+    <EuiOverlayMask
+      headerZindexLocation="below"
+      onClick={[MockFunction]}
+    >
+      <Portal
+        containerInfo={
+          <div
+            class="euiOverlayMask euiOverlayMask--belowHeader"
+          >
+            <div
+              aria-hidden="true"
+              data-aria-hidden="true"
+              data-focus-guard="true"
+              style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+              tabindex="0"
+            />
+            <div
+              data-focus-lock-disabled="false"
+            >
+              <div
+                class="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
+                data-test-subj="spanDetailFlyout"
+                role="dialog"
+                tabindex="-1"
+              >
+                <button
+                  aria-label="Close this dialog"
+                  class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                  data-test-subj="euiFlyoutCloseButton"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </button>
+                <div
+                  class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                >
+                  <h2
+                    class="euiTitle euiTitle--medium"
+                  >
+                    Span detail
+                  </h2>
+                </div>
+                <div
+                  class="euiFlyoutBody"
+                >
+                  <div
+                    class="euiFlyoutBody__overflow"
+                    tabindex="0"
+                  >
+                    <div
+                      class="euiFlyoutBody__overflowContent"
+                    >
+                      -
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              aria-hidden="true"
+              data-aria-hidden="true"
+              data-focus-guard="true"
+              style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+              tabindex="0"
+            />
+          </div>
+        }
+      >
+        <EuiFocusTrap
+          clickOutsideDisables={false}
+          disabled={false}
+          noIsolation={true}
+          returnFocus={true}
+          scrollLock={false}
+        >
+          <ForwardRef
+            enabled={true}
+            noIsolation={true}
+            onClickOutside={[Function]}
+            returnFocus={true}
+            scrollLock={false}
+          >
+            <ForwardRef
+              enabled={true}
+              noIsolation={true}
+              onClickOutside={[Function]}
+              returnFocus={true}
+              scrollLock={false}
+              sideCar={[Function]}
+            >
+              <ForwardRef(FocusLockUI)
+                as={
+                  Object {
+                    "$$typeof": Symbol(react.forward_ref),
+                    "classNames": Object {
+                      "fullWidth": "width-before-scroll-bar",
+                      "zeroRight": "right-scroll-bar-position",
+                    },
+                    "defaultProps": Object {
+                      "enabled": true,
+                      "inert": false,
+                      "removeScrollBar": true,
+                    },
+                    "render": [Function],
+                  }
+                }
+                autoFocus={true}
+                crossFrame={true}
+                disabled={false}
+                lockProps={
+                  Object {
+                    "allowPinchZoom": undefined,
+                    "as": undefined,
+                    "enabled": false,
+                    "inert": undefined,
+                    "onMouseDown": [Function],
+                    "onTouchStart": [Function],
+                    "shards": undefined,
+                    "sideCar": [Function],
+                    "style": undefined,
+                  }
+                }
+                noFocusGuards={false}
+                onActivation={[Function]}
+                onDeactivation={[Function]}
+                persistentFocus={false}
+                returnFocus={true}
+                sideCar={[Function]}
+              >
+                <div
+                  data-focus-guard={true}
+                  key="guard-first"
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={0}
+                />
+                <RequireSideCar
+                  autoFocus={true}
+                  crossFrame={true}
+                  disabled={false}
+                  id={Object {}}
+                  observed={
+                    <div
+                      data-focus-lock-disabled="false"
+                    >
+                      <div
+                        class="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
+                        data-test-subj="spanDetailFlyout"
+                        role="dialog"
+                        tabindex="-1"
+                      >
+                        <button
+                          aria-label="Close this dialog"
+                          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                          data-test-subj="euiFlyoutCloseButton"
+                          type="button"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height="16"
+                            role="img"
+                            viewBox="0 0 16 16"
+                            width="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </button>
+                        <div
+                          class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                        >
+                          <h2
+                            class="euiTitle euiTitle--medium"
+                          >
+                            Span detail
+                          </h2>
+                        </div>
+                        <div
+                          class="euiFlyoutBody"
+                        >
+                          <div
+                            class="euiFlyoutBody__overflow"
+                            tabindex="0"
+                          >
+                            <div
+                              class="euiFlyoutBody__overflowContent"
+                            >
+                              -
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                  onActivation={[Function]}
+                  onDeactivation={[Function]}
+                  persistentFocus={false}
+                  returnFocus={[Function]}
+                  shards={Array []}
+                  sideCar={
+                    Object {
+                      "assignMedium": [Function],
+                      "assignSyncMedium": [Function],
+                      "options": Object {
+                        "async": true,
+                        "ssr": false,
+                      },
+                      "read": [Function],
+                      "useMedium": [Function],
+                    }
+                  }
+                >
+                  <SideCar
+                    autoFocus={true}
+                    crossFrame={true}
+                    disabled={false}
+                    id={Object {}}
+                    observed={
+                      <div
+                        data-focus-lock-disabled="false"
+                      >
+                        <div
+                          class="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
+                          data-test-subj="spanDetailFlyout"
+                          role="dialog"
+                          tabindex="-1"
+                        >
+                          <button
+                            aria-label="Close this dialog"
+                            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                            data-test-subj="euiFlyoutCloseButton"
+                            type="button"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              focusable="false"
+                              height="16"
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </button>
+                          <div
+                            class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                          >
+                            <h2
+                              class="euiTitle euiTitle--medium"
+                            >
+                              Span detail
+                            </h2>
+                          </div>
+                          <div
+                            class="euiFlyoutBody"
+                          >
+                            <div
+                              class="euiFlyoutBody__overflow"
+                              tabindex="0"
+                            >
+                              <div
+                                class="euiFlyoutBody__overflowContent"
+                              >
+                                -
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    }
+                    onActivation={[Function]}
+                    onDeactivation={[Function]}
+                    persistentFocus={false}
+                    returnFocus={[Function]}
+                    shards={Array []}
+                    sideCar={
+                      Object {
+                        "assignMedium": [Function],
+                        "assignSyncMedium": [Function],
+                        "options": Object {
+                          "async": true,
+                          "ssr": false,
+                        },
+                        "read": [Function],
+                        "useMedium": [Function],
+                      }
+                    }
+                  >
+                    <SideEffect(FocusWatcher)
+                      autoFocus={true}
+                      crossFrame={true}
+                      disabled={false}
+                      id={Object {}}
+                      observed={
+                        <div
+                          data-focus-lock-disabled="false"
+                        >
+                          <div
+                            class="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
+                            data-test-subj="spanDetailFlyout"
+                            role="dialog"
+                            tabindex="-1"
+                          >
+                            <button
+                              aria-label="Close this dialog"
+                              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                              data-test-subj="euiFlyoutCloseButton"
+                              type="button"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </button>
+                            <div
+                              class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                            >
+                              <h2
+                                class="euiTitle euiTitle--medium"
+                              >
+                                Span detail
+                              </h2>
+                            </div>
+                            <div
+                              class="euiFlyoutBody"
+                            >
+                              <div
+                                class="euiFlyoutBody__overflow"
+                                tabindex="0"
+                              >
+                                <div
+                                  class="euiFlyoutBody__overflowContent"
+                                >
+                                  -
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      onActivation={[Function]}
+                      onDeactivation={[Function]}
+                      persistentFocus={false}
+                      returnFocus={[Function]}
+                      shards={Array []}
+                    >
+                      <FocusWatcher
+                        autoFocus={true}
+                        crossFrame={true}
+                        disabled={false}
+                        id={Object {}}
+                        observed={
+                          <div
+                            data-focus-lock-disabled="false"
+                          >
+                            <div
+                              class="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
+                              data-test-subj="spanDetailFlyout"
+                              role="dialog"
+                              tabindex="-1"
+                            >
+                              <button
+                                aria-label="Close this dialog"
+                                class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                                data-test-subj="euiFlyoutCloseButton"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                  focusable="false"
+                                  height="16"
+                                  role="img"
+                                  viewBox="0 0 16 16"
+                                  width="16"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                />
+                              </button>
+                              <div
+                                class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                              >
+                                <h2
+                                  class="euiTitle euiTitle--medium"
+                                >
+                                  Span detail
+                                </h2>
+                              </div>
+                              <div
+                                class="euiFlyoutBody"
+                              >
+                                <div
+                                  class="euiFlyoutBody__overflow"
+                                  tabindex="0"
+                                >
+                                  <div
+                                    class="euiFlyoutBody__overflowContent"
+                                  >
+                                    -
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        }
+                        onActivation={[Function]}
+                        onDeactivation={[Function]}
+                        persistentFocus={false}
+                        returnFocus={[Function]}
+                        shards={Array []}
+                      />
+                    </SideEffect(FocusWatcher)>
+                  </SideCar>
+                </RequireSideCar>
+                <ForwardRef
+                  data-focus-lock-disabled={false}
+                  enabled={false}
+                  inert={false}
+                  onBlur={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onTouchStart={[Function]}
+                  removeScrollBar={true}
+                  sideCar={[Function]}
+                >
+                  <div
+                    data-focus-lock-disabled={false}
+                    onBlur={[Function]}
+                    onFocus={[Function]}
+                    onMouseDown={[Function]}
+                    onScrollCapture={[Function]}
+                    onTouchMoveCapture={[Function]}
+                    onTouchStart={[Function]}
+                    onWheelCapture={[Function]}
+                  >
+                    <EuiOutsideClickDetector
+                      isDisabled={true}
+                      onOutsideClick={[Function]}
+                    >
+                      <div
+                        className="euiFlyout euiFlyout--small euiFlyout--paddingLarge"
+                        data-test-subj="spanDetailFlyout"
+                        onMouseDown={[Function]}
+                        onMouseUp={[Function]}
+                        onTouchEnd={[Function]}
+                        onTouchStart={[Function]}
+                        role="dialog"
+                        tabIndex={-1}
+                      >
+                        <EuiI18n
+                          default="Close this dialog"
+                          token="euiFlyout.closeAriaLabel"
+                        >
+                          <EuiButtonIcon
+                            aria-label="Close this dialog"
+                            className="euiFlyout__closeButton euiFlyout__closeButton--inside"
+                            color="text"
+                            data-test-subj="euiFlyoutCloseButton"
+                            display="empty"
+                            iconType="cross"
+                            onClick={[Function]}
+                          >
+                            <button
+                              aria-label="Close this dialog"
+                              className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton euiFlyout__closeButton--inside"
+                              data-test-subj="euiFlyoutCloseButton"
+                              disabled={false}
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                color="inherit"
+                                size="m"
+                                type="cross"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </button>
+                          </EuiButtonIcon>
+                        </EuiI18n>
+                        <EuiFlyoutHeader
+                          hasBorder={true}
+                        >
+                          <div
+                            className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+                          >
+                            <EuiTitle>
+                              <h2
+                                className="euiTitle euiTitle--medium"
+                              >
+                                Span detail
+                              </h2>
+                            </EuiTitle>
+                          </div>
+                        </EuiFlyoutHeader>
+                        <EuiFlyoutBody>
+                          <div
+                            className="euiFlyoutBody"
+                          >
+                            <div
+                              className="euiFlyoutBody__overflow"
+                              tabIndex={0}
+                            >
+                              <div
+                                className="euiFlyoutBody__overflowContent"
+                              >
+                                -
+                              </div>
+                            </div>
+                          </div>
+                        </EuiFlyoutBody>
+                      </div>
+                    </EuiOutsideClickDetector>
+                  </div>
+                </ForwardRef>
+                <div
+                  data-focus-guard={true}
+                  style={
+                    Object {
+                      "height": "0px",
+                      "left": "1px",
+                      "overflow": "hidden",
+                      "padding": 0,
+                      "position": "fixed",
+                      "top": "1px",
+                      "width": "1px",
+                    }
+                  }
+                  tabIndex={0}
+                />
+              </ForwardRef(FocusLockUI)>
+              <RequireSideCar
+                noIsolation={true}
+                onClickOutside={[Function]}
+                setLockProps={[Function]}
+                sideCar={
+                  Object {
+                    "assignMedium": [Function],
+                    "assignSyncMedium": [Function],
+                    "options": Object {
+                      "async": true,
+                      "ssr": false,
+                    },
+                    "read": [Function],
+                    "useMedium": [Function],
+                  }
+                }
+              >
+                <SideCar
+                  noIsolation={true}
+                  onClickOutside={[Function]}
+                  setLockProps={[Function]}
+                  sideCar={
+                    Object {
+                      "assignMedium": [Function],
+                      "assignSyncMedium": [Function],
+                      "options": Object {
+                        "async": true,
+                        "ssr": false,
+                      },
+                      "read": [Function],
+                      "useMedium": [Function],
+                    }
+                  }
+                >
+                  <Effect
+                    noIsolation={true}
+                    onClickOutside={[Function]}
+                    setLockProps={[Function]}
+                  >
+                    <Component>
+                      <Sheet
+                        styles="
+ [data-focus-on-hidden] {
+   pointer-events: none !important;
+ }
+"
+                      />
+                    </Component>
+                  </Effect>
+                </SideCar>
+              </RequireSideCar>
+            </ForwardRef>
+          </ForwardRef>
+        </EuiFocusTrap>
+      </Portal>
+    </EuiOverlayMask>
+  </EuiFlyout>
+</SpanDetailFlyout>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_panel.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_panel.test.tsx.snap
new file mode 100644
index 0000000000..1d8b3988aa
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_panel.test.tsx.snap
@@ -0,0 +1,518 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Service breakdown panel component renders service breakdown panel 1`] = `
+<SpanDetailPanel
+  data={
+    Object {
+      "gantt": Array [
+        Object {
+          "hoverinfo": "none",
+          "marker": Object {
+            "color": "rgba(0, 0, 0, 0)",
+          },
+          "orientation": "h",
+          "showlegend": false,
+          "type": "bar",
+          "width": 0.4,
+          "x": Array [
+            0,
+          ],
+          "y": Array [
+            "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+          ],
+        },
+        Object {
+          "hovertemplate": "%{x}<extra></extra>",
+          "marker": Object {
+            "color": "#7492e7",
+          },
+          "orientation": "h",
+          "text": Array [
+            "Error",
+          ],
+          "textfont": Object {
+            "color": Array [
+              "#c14125",
+            ],
+          },
+          "textposition": "outside",
+          "type": "bar",
+          "width": 0.4,
+          "x": Array [
+            19.91,
+          ],
+          "y": Array [
+            "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+          ],
+        },
+      ],
+      "ganttMaxX": 19.91,
+      "table": Array [
+        Object {
+          "end_time": "2020-11-10T17:55:45.239564396Z",
+          "error": "Error",
+          "latency": 19.91,
+          "service_name": "inventory",
+          "span_id": "32c641131b569afa",
+          "start_time": "2020-11-10T17:55:45.219652629Z",
+          "vs_benchmark": 0,
+        },
+      ],
+    }
+  }
+  setData={[MockFunction]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup>
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <PanelTitle
+                title="Spans"
+                totalItems={1}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Spans
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (1)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButtonGroup
+                idSelected="timeline"
+                legend="Select view of spans"
+                onChange={[Function]}
+                options={
+                  Array [
+                    Object {
+                      "id": "timeline",
+                      "label": "Timeline",
+                    },
+                    Object {
+                      "id": "span_list",
+                      "label": "Span list",
+                    },
+                  ]
+                }
+              >
+                <fieldset
+                  className="euiButtonGroup euiButtonGroup--small euiButtonGroup--text"
+                  disabled={false}
+                >
+                  <EuiScreenReaderOnly>
+                    <legend
+                      className="euiScreenReaderOnly"
+                    >
+                      Select view of spans
+                    </legend>
+                  </EuiScreenReaderOnly>
+                  <div
+                    className="euiButtonGroup__buttons"
+                  >
+                    <EuiButtonGroupButton
+                      color="text"
+                      element="label"
+                      id="timeline"
+                      isDisabled={false}
+                      isIconOnly={false}
+                      isSelected={true}
+                      key="0"
+                      label="Timeline"
+                      name="random_html_id"
+                      onChange={[Function]}
+                      size="s"
+                    >
+                      <EuiButtonDisplay
+                        baseClassName="euiButtonGroupButton"
+                        className="euiButtonGroupButton-isSelected"
+                        color="text"
+                        element="label"
+                        fill={true}
+                        htmlFor="random_html_id"
+                        isDisabled={false}
+                        onClick={[Function]}
+                        size="s"
+                        textProps={
+                          Object {
+                            "className": "euiButtonGroupButton__textShift",
+                            "data-text": "Timeline",
+                            "ref": [Function],
+                            "title": "Timeline",
+                          }
+                        }
+                      >
+                        <label
+                          className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton--fill euiButtonGroupButton-isSelected"
+                          disabled={false}
+                          htmlFor="random_html_id"
+                          onClick={[Function]}
+                          style={
+                            Object {
+                              "minWidth": undefined,
+                            }
+                          }
+                        >
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text euiButtonGroupButton__textShift",
+                                "data-text": "Timeline",
+                                "ref": [Function],
+                                "title": "Timeline",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                className="euiButton__text euiButtonGroupButton__textShift"
+                                data-text="Timeline"
+                                title="Timeline"
+                              >
+                                <input
+                                  checked={true}
+                                  className="euiScreenReaderOnly"
+                                  data-test-subj="timeline"
+                                  disabled={false}
+                                  id="random_html_id"
+                                  name="random_html_id"
+                                  onChange={[Function]}
+                                  type="radio"
+                                />
+                                Timeline
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </label>
+                      </EuiButtonDisplay>
+                    </EuiButtonGroupButton>
+                    <EuiButtonGroupButton
+                      color="text"
+                      element="label"
+                      id="span_list"
+                      isDisabled={false}
+                      isIconOnly={false}
+                      isSelected={false}
+                      key="1"
+                      label="Span list"
+                      name="random_html_id"
+                      onChange={[Function]}
+                      size="s"
+                    >
+                      <EuiButtonDisplay
+                        baseClassName="euiButtonGroupButton"
+                        className=""
+                        color="text"
+                        element="label"
+                        fill={false}
+                        htmlFor="random_html_id"
+                        isDisabled={false}
+                        onClick={[Function]}
+                        size="s"
+                        textProps={
+                          Object {
+                            "className": "euiButtonGroupButton__textShift",
+                            "data-text": "Span list",
+                            "ref": [Function],
+                            "title": "Span list",
+                          }
+                        }
+                      >
+                        <label
+                          className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
+                          disabled={false}
+                          htmlFor="random_html_id"
+                          onClick={[Function]}
+                          style={
+                            Object {
+                              "minWidth": undefined,
+                            }
+                          }
+                        >
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text euiButtonGroupButton__textShift",
+                                "data-text": "Span list",
+                                "ref": [Function],
+                                "title": "Span list",
+                              }
+                            }
+                          >
+                            <span
+                              className="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                className="euiButton__text euiButtonGroupButton__textShift"
+                                data-text="Span list"
+                                title="Span list"
+                              >
+                                <input
+                                  checked={false}
+                                  className="euiScreenReaderOnly"
+                                  data-test-subj="span_list"
+                                  disabled={false}
+                                  id="random_html_id"
+                                  name="random_html_id"
+                                  onChange={[Function]}
+                                  type="radio"
+                                />
+                                Span list
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </label>
+                      </EuiButtonDisplay>
+                    </EuiButtonGroupButton>
+                  </div>
+                </fieldset>
+              </EuiButtonGroup>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiHorizontalRule
+        margin="m"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+        />
+      </EuiHorizontalRule>
+      <div
+        style={
+          Object {
+            "maxHeight": 500,
+            "overflowY": "auto",
+          }
+        }
+      >
+        <Plt
+          data={
+            Array [
+              Object {
+                "hoverinfo": "none",
+                "marker": Object {
+                  "color": "rgba(0, 0, 0, 0)",
+                },
+                "orientation": "h",
+                "showlegend": false,
+                "type": "bar",
+                "width": 0.4,
+                "x": Array [
+                  0,
+                ],
+                "y": Array [
+                  "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                ],
+              },
+              Object {
+                "hovertemplate": "%{x}<extra></extra>",
+                "marker": Object {
+                  "color": "#7492e7",
+                },
+                "orientation": "h",
+                "text": Array [
+                  "Error",
+                ],
+                "textfont": Object {
+                  "color": Array [
+                    "#c14125",
+                  ],
+                },
+                "textposition": "outside",
+                "type": "bar",
+                "width": 0.4,
+                "x": Array [
+                  19.91,
+                ],
+                "y": Array [
+                  "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                ],
+              },
+            ]
+          }
+          layout={
+            Object {
+              "height": 110,
+              "margin": Object {
+                "b": 30,
+                "l": 260,
+                "r": 5,
+                "t": 30,
+              },
+              "width": 800,
+              "xaxis": Object {
+                "color": "#91989c",
+                "range": Array [
+                  0,
+                  23.892,
+                ],
+                "showline": true,
+                "side": "top",
+                "ticksuffix": " ms",
+              },
+              "yaxis": Object {
+                "showgrid": false,
+                "ticktext": Array [
+                  "inventory <br>HTTP GET ",
+                ],
+                "tickvals": Array [
+                  "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                ],
+              },
+            }
+          }
+          onClickHandler={[Function]}
+          onHoverHandler={[Function]}
+          onUnhoverHandler={[Function]}
+        >
+          <PlotlyComponent
+            config={
+              Object {
+                "displayModeBar": false,
+              }
+            }
+            data={
+              Array [
+                Object {
+                  "hoverinfo": "none",
+                  "marker": Object {
+                    "color": "rgba(0, 0, 0, 0)",
+                  },
+                  "orientation": "h",
+                  "showlegend": false,
+                  "type": "bar",
+                  "width": 0.4,
+                  "x": Array [
+                    0,
+                  ],
+                  "y": Array [
+                    "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                  ],
+                },
+                Object {
+                  "hovertemplate": "%{x}<extra></extra>",
+                  "marker": Object {
+                    "color": "#7492e7",
+                  },
+                  "orientation": "h",
+                  "text": Array [
+                    "Error",
+                  ],
+                  "textfont": Object {
+                    "color": Array [
+                      "#c14125",
+                    ],
+                  },
+                  "textposition": "outside",
+                  "type": "bar",
+                  "width": 0.4,
+                  "x": Array [
+                    19.91,
+                  ],
+                  "y": Array [
+                    "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                  ],
+                },
+              ]
+            }
+            debug={false}
+            divId="explorerPlotComponent"
+            layout={
+              Object {
+                "autosize": true,
+                "barmode": "stack",
+                "height": 110,
+                "hovermode": "closest",
+                "legend": Object {
+                  "orientation": "h",
+                  "traceorder": "normal",
+                },
+                "margin": Object {
+                  "b": 30,
+                  "l": 260,
+                  "r": 5,
+                  "t": 30,
+                },
+                "showlegend": false,
+                "width": 800,
+                "xaxis": Object {
+                  "color": "#91989c",
+                  "range": Array [
+                    0,
+                    23.892,
+                  ],
+                  "showline": true,
+                  "side": "top",
+                  "ticksuffix": " ms",
+                },
+                "yaxis": Object {
+                  "showgrid": false,
+                  "ticktext": Array [
+                    "inventory <br>HTTP GET ",
+                  ],
+                  "tickvals": Array [
+                    "inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2",
+                  ],
+                },
+              }
+            }
+            onClick={[Function]}
+            onHover={[Function]}
+            onUnhover={[Function]}
+            style={
+              Object {
+                "height": "100%",
+                "width": "100%",
+              }
+            }
+            useResizeHandler={true}
+          >
+            <div
+              id="explorerPlotComponent"
+              style={
+                Object {
+                  "height": "100%",
+                  "width": "100%",
+                }
+              }
+            />
+          </PlotlyComponent>
+        </Plt>
+      </div>
+    </div>
+  </EuiPanel>
+</SpanDetailPanel>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap
new file mode 100644
index 0000000000..3ebc21f9b9
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/span_detail_table.test.tsx.snap
@@ -0,0 +1,322 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SpanDetailTable /> spec renders the component with data 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+  <div
+    class="euiDataGrid__focusWrap"
+    data-focus-lock-disabled="disabled"
+  >
+    <div
+      class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
+    />
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+</div>
+`;
+
+exports[`<SpanDetailTable /> spec renders the empty component 1`] = `
+<SpanDetailTable
+  DSL={Object {}}
+  hiddenColumns={
+    Array [
+      "traceId",
+      "traceGroup",
+    ]
+  }
+  http={[MockFunction]}
+  openFlyout={[Function]}
+>
+  <EuiDataGrid
+    aria-labelledby="span-detail-data-grid"
+    columnVisibility={
+      Object {
+        "setVisibleColumns": [Function],
+        "visibleColumns": Array [
+          "spanId",
+          "parentSpanId",
+          "serviceName",
+          "name",
+          "durationInNanos",
+          "startTime",
+          "endTime",
+          "status.code",
+        ],
+      }
+    }
+    columns={
+      Array [
+        Object {
+          "display": "Span ID",
+          "id": "spanId",
+        },
+        Object {
+          "display": "Parent span ID",
+          "id": "parentSpanId",
+        },
+        Object {
+          "display": "Trace ID",
+          "id": "traceId",
+        },
+        Object {
+          "display": "Trace group",
+          "id": "traceGroup",
+        },
+        Object {
+          "display": "Service",
+          "id": "serviceName",
+        },
+        Object {
+          "display": "Operation",
+          "id": "name",
+        },
+        Object {
+          "display": "Duration",
+          "id": "durationInNanos",
+        },
+        Object {
+          "display": "Start time",
+          "id": "startTime",
+        },
+        Object {
+          "display": "End time",
+          "id": "endTime",
+        },
+        Object {
+          "display": "Errors",
+          "id": "status.code",
+        },
+      ]
+    }
+    pagination={
+      Object {
+        "onChangeItemsPerPage": [Function],
+        "onChangePage": [Function],
+        "pageIndex": 0,
+        "pageSize": 10,
+        "pageSizeOptions": Array [
+          10,
+          50,
+          100,
+        ],
+      }
+    }
+    renderCellValue={[Function]}
+    rowCount={0}
+    sorting={
+      Object {
+        "columns": Array [],
+        "onSort": [Function],
+      }
+    }
+  >
+    <EuiFocusTrap
+      className="euiDataGrid__focusWrap"
+      clickOutsideDisables={false}
+      disabled={true}
+      noIsolation={true}
+      returnFocus={true}
+      scrollLock={false}
+    >
+      <ForwardRef
+        className="euiDataGrid__focusWrap"
+        enabled={false}
+        noIsolation={true}
+        onClickOutside={[Function]}
+        returnFocus={true}
+        scrollLock={false}
+      >
+        <ForwardRef
+          className="euiDataGrid__focusWrap"
+          enabled={false}
+          noIsolation={true}
+          onClickOutside={[Function]}
+          returnFocus={true}
+          scrollLock={false}
+          sideCar={[Function]}
+        >
+          <ForwardRef(FocusLockUI)
+            as={
+              Object {
+                "$$typeof": Symbol(react.forward_ref),
+                "classNames": Object {
+                  "fullWidth": "width-before-scroll-bar",
+                  "zeroRight": "right-scroll-bar-position",
+                },
+                "defaultProps": Object {
+                  "enabled": true,
+                  "inert": false,
+                  "removeScrollBar": true,
+                },
+                "render": [Function],
+              }
+            }
+            autoFocus={true}
+            className="euiDataGrid__focusWrap"
+            crossFrame={true}
+            disabled={true}
+            lockProps={
+              Object {
+                "allowPinchZoom": undefined,
+                "as": undefined,
+                "enabled": false,
+                "inert": undefined,
+                "shards": undefined,
+                "sideCar": [Function],
+                "style": undefined,
+              }
+            }
+            noFocusGuards={false}
+            persistentFocus={false}
+            returnFocus={true}
+            sideCar={[Function]}
+          >
+            <div
+              data-focus-guard={true}
+              key="guard-first"
+              style={
+                Object {
+                  "height": "0px",
+                  "left": "1px",
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "fixed",
+                  "top": "1px",
+                  "width": "1px",
+                }
+              }
+              tabIndex={-1}
+            />
+            <ForwardRef
+              className="euiDataGrid__focusWrap"
+              data-focus-lock-disabled="disabled"
+              enabled={false}
+              inert={false}
+              onBlur={[Function]}
+              onFocus={[Function]}
+              removeScrollBar={true}
+              sideCar={[Function]}
+            >
+              <div
+                className="euiDataGrid__focusWrap"
+                data-focus-lock-disabled="disabled"
+                onBlur={[Function]}
+                onFocus={[Function]}
+                onScrollCapture={[Function]}
+                onTouchMoveCapture={[Function]}
+                onWheelCapture={[Function]}
+              >
+                <div
+                  className="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter"
+                  onKeyDown={[Function]}
+                  style={
+                    Object {
+                      "height": undefined,
+                      "width": undefined,
+                    }
+                  }
+                />
+              </div>
+            </ForwardRef>
+            <div
+              data-focus-guard={true}
+              style={
+                Object {
+                  "height": "0px",
+                  "left": "1px",
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "fixed",
+                  "top": "1px",
+                  "width": "1px",
+                }
+              }
+              tabIndex={-1}
+            />
+          </ForwardRef(FocusLockUI)>
+        </ForwardRef>
+      </ForwardRef>
+    </EuiFocusTrap>
+  </EuiDataGrid>
+  <NoMatchMessage
+    size="xl"
+  >
+    <EuiSpacer
+      size="xl"
+    >
+      <div
+        className="euiSpacer euiSpacer--xl"
+      />
+    </EuiSpacer>
+    <EuiEmptyPrompt
+      body={
+        <EuiText>
+          No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+        </EuiText>
+      }
+      title={
+        <h2>
+          No matches
+        </h2>
+      }
+    >
+      <div
+        className="euiEmptyPrompt"
+      >
+        <EuiTitle
+          size="m"
+        >
+          <h2
+            className="euiTitle euiTitle--medium"
+          >
+            No matches
+          </h2>
+        </EuiTitle>
+        <EuiTextColor
+          color="subdued"
+        >
+          <span
+            className="euiTextColor euiTextColor--subdued"
+          >
+            <EuiSpacer
+              size="m"
+            >
+              <div
+                className="euiSpacer euiSpacer--m"
+              />
+            </EuiSpacer>
+            <EuiText>
+              <div
+                className="euiText euiText--medium"
+              >
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                  </div>
+                </EuiText>
+              </div>
+            </EuiText>
+          </span>
+        </EuiTextColor>
+      </div>
+    </EuiEmptyPrompt>
+    <EuiSpacer
+      size="xl"
+    >
+      <div
+        className="euiSpacer euiSpacer--xl"
+      />
+    </EuiSpacer>
+  </NoMatchMessage>
+</SpanDetailTable>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/trace_view.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/trace_view.test.tsx.snap
new file mode 100644
index 0000000000..bc35bb4ef9
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/trace_view.test.tsx.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Trace view component renders trace view 1`] = `
+<Fragment>
+  <EuiPage>
+    <EuiPageBody>
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <EuiFlexItem>
+          <EuiTitle
+            size="l"
+          >
+            <h2
+              className="overview-content"
+            >
+              test
+            </h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="xl"
+      />
+      <EuiPanel>
+        <PanelTitle
+          title="Overview"
+        />
+        <EuiHorizontalRule
+          margin="m"
+        />
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFlexGroup
+              direction="column"
+            >
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Trace ID
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Trace group name
+                </EuiText>
+                <EuiText
+                  className="overview-content"
+                  size="s"
+                >
+                  -
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFlexGroup
+              direction="column"
+            >
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Latency
+                </EuiText>
+                <EuiText
+                  className="overview-content"
+                  size="s"
+                />
+              </EuiFlexItem>
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Last updated
+                </EuiText>
+                <EuiText
+                  className="overview-content"
+                  size="s"
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFlexGroup
+              direction="column"
+            >
+              <EuiFlexItem
+                grow={false}
+              >
+                <EuiText
+                  className="overview-title"
+                >
+                  Errors
+                </EuiText>
+                <EuiText
+                  className="overview-content"
+                  size="s"
+                >
+                  -
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+      <EuiSpacer />
+      <EuiFlexGroup>
+        <EuiFlexItem
+          grow={3}
+        >
+          <ServiceBreakdownPanel
+            data={Array []}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={7}
+        >
+          <SpanDetailPanel
+            colorMap={Object {}}
+            data={
+              Object {
+                "gantt": Array [],
+                "ganttMaxX": 0,
+                "table": Array [],
+              }
+            }
+            http={[MockFunction]}
+            setData={[Function]}
+            traceId="test"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiSpacer />
+      <EuiPanel>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <PanelTitle
+              title="Payload"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiHorizontalRule
+          margin="m"
+        />
+      </EuiPanel>
+      <EuiSpacer />
+      <ServiceMap
+        idSelected="latency"
+        page="traceView"
+        serviceMap={Object {}}
+        setIdSelected={[Function]}
+      />
+    </EuiPageBody>
+  </EuiPage>
+</Fragment>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
new file mode 100644
index 0000000000..cf9cb8e456
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
@@ -0,0 +1,2348 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Traces component renders empty traces page 1`] = `
+<Traces
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/traces",
+        "text": "Traces",
+      },
+    ]
+  }
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "href": "test#/",
+                "text": "test",
+              },
+              Object {
+                "href": "#/trace_analytics/home",
+                "text": "Trace analytics",
+              },
+              Object {
+                "href": "#/trace_analytics/traces",
+                "text": "Traces",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  indicesExist={false}
+  page="traces"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+  traceIdColumnAction={[Function]}
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Traces
+    </h2>
+  </EuiTitle>
+  <TracesContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/traces",
+          "text": "Traces",
+        },
+      ]
+    }
+    chrome={
+      Object {
+        "getIsNavDrawerLocked$": [MockFunction],
+        "setBreadcrumbs": [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [
+                Object {
+                  "href": "test#/",
+                  "text": "test",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Trace analytics",
+                },
+                Object {
+                  "href": "#/trace_analytics/traces",
+                  "text": "Traces",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    indicesExist={false}
+    page="traces"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+    traceIdColumnAction={[Function]}
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      page="traces"
+      query=""
+      refresh={[Function]}
+      setEndTime={[MockFunction]}
+      setFilters={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      setQuery={[MockFunction]}
+      setStartTime={[MockFunction]}
+      startTime="now-5m"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <EuiFieldSearch
+                compressed={false}
+                data-test-subj="search-bar-input-box"
+                fullWidth={true}
+                incremental={false}
+                isClearable={false}
+                isLoading={false}
+                onChange={[Function]}
+                onSearch={[Function]}
+                placeholder="Trace ID, trace group name, service name"
+                value=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <EuiValidatableControl>
+                        <input
+                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          data-test-subj="search-bar-input-box"
+                          onChange={[Function]}
+                          onKeyUp={[Function]}
+                          placeholder="Trace ID, trace group name, service name"
+                          type="search"
+                          value=""
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconEmpty
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  />
+                                </EuiIconEmpty>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "maxWidth": "40vw",
+                }
+              }
+            >
+              <EuiSuperDatePicker
+                commonlyUsedRanges={
+                  Array [
+                    Object {
+                      "end": "now/d",
+                      "label": "Today",
+                      "start": "now/d",
+                    },
+                    Object {
+                      "end": "now/w",
+                      "label": "This week",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now/M",
+                      "label": "This month",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now/y",
+                      "label": "This year",
+                      "start": "now/y",
+                    },
+                    Object {
+                      "end": "now-1d/d",
+                      "label": "Yesterday",
+                      "start": "now-1d/d",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Week to date",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Month to date",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Year to date",
+                      "start": "now/y",
+                    },
+                  ]
+                }
+                dateFormat=""
+                end="now"
+                isAutoRefreshOnly={false}
+                isDisabled={false}
+                isPaused={true}
+                onTimeChange={[Function]}
+                recentlyUsedRanges={Array []}
+                refreshInterval={0}
+                showUpdateButton={false}
+                start="now-5m"
+                timeFormat="HH:mm"
+              >
+                <EuiFlexGroup
+                  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  gutterSize="s"
+                  responsive={false}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiFormControlLayout
+                          className="euiSuperDatePicker"
+                          isDisabled={false}
+                          prepend={
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            />
+                          }
+                        >
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconEmpty
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon-isLoading"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium 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>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconEmpty
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            />
+                          </EuiIconEmpty>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        page="traces"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          }
+        }
+      >
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          responsive={false}
+          style={
+            Object {
+              "minHeight": 32,
+            }
+          }
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <GlobalFilterButton>
+                  <EuiPopover
+                    anchorPosition="rightUp"
+                    button={
+                      <EuiButtonIcon
+                        aria-label="Change all filters"
+                        iconType="filter"
+                        onClick={[Function]}
+                        title="Change all filters"
+                      />
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconEmpty
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                />
+                              </EuiIconEmpty>
+                            </EuiIcon>
+                          </button>
+                        </EuiButtonIcon>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <TracesTable
+      indicesExist={false}
+      items={Array []}
+      loading={false}
+      refresh={[Function]}
+      traceIdColumnAction={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={10}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
+                >
+                  <PanelTitle
+                    title="Traces"
+                    totalItems={0}
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Traces
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
+          <EuiHorizontalRule
+            margin="none"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full"
+            />
+          </EuiHorizontalRule>
+          <MissingConfigurationMessage>
+            <EuiEmptyPrompt
+              actions={
+                <EuiButton
+                  color="primary"
+                  iconSide="right"
+                  iconType="popout"
+                  onClick={[Function]}
+                >
+                  Learn more
+                </EuiButton>
+              }
+              body={
+                <EuiText>
+                  The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+                </EuiText>
+              }
+              title={
+                <h2>
+                  Trace Analytics not set up
+                </h2>
+              }
+            >
+              <div
+                className="euiEmptyPrompt"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    Trace Analytics not set up
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <EuiText>
+                          <div
+                            className="euiText euiText--medium"
+                          >
+                            The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+                          </div>
+                        </EuiText>
+                      </div>
+                    </EuiText>
+                  </span>
+                </EuiTextColor>
+                <EuiSpacer
+                  size="l"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--l"
+                  />
+                </EuiSpacer>
+                <EuiButton
+                  color="primary"
+                  iconSide="right"
+                  iconType="popout"
+                  onClick={[Function]}
+                >
+                  <EuiButtonDisplay
+                    baseClassName="euiButton"
+                    color="primary"
+                    disabled={false}
+                    element="button"
+                    iconSide="right"
+                    iconType="popout"
+                    isDisabled={false}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <button
+                      className="euiButton euiButton--primary"
+                      disabled={false}
+                      onClick={[Function]}
+                      style={
+                        Object {
+                          "minWidth": undefined,
+                        }
+                      }
+                      type="button"
+                    >
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="right"
+                        iconType="popout"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text",
+                          }
+                        }
+                      >
+                        <span
+                          className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                        >
+                          <EuiIcon
+                            className="euiButtonContent__icon"
+                            color="inherit"
+                            size="m"
+                            type="popout"
+                          >
+                            <EuiIconEmpty
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              role="img"
+                              style={null}
+                            >
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              />
+                            </EuiIconEmpty>
+                          </EuiIcon>
+                          <span
+                            className="euiButton__text"
+                          >
+                            Learn more
+                          </span>
+                        </span>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonDisplay>
+                </EuiButton>
+              </div>
+            </EuiEmptyPrompt>
+          </MissingConfigurationMessage>
+        </div>
+      </EuiPanel>
+    </TracesTable>
+  </TracesContent>
+</Traces>
+`;
+
+exports[`Traces component renders traces page 1`] = `
+<Traces
+  appConfigs={Array []}
+  childBreadcrumbs={
+    Array [
+      Object {
+        "href": "#/trace_analytics/home",
+        "text": "Trace analytics",
+      },
+      Object {
+        "href": "#/trace_analytics/traces",
+        "text": "Traces",
+      },
+    ]
+  }
+  chrome={
+    Object {
+      "getIsNavDrawerLocked$": [MockFunction],
+      "setBreadcrumbs": [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [
+              Object {
+                "href": "test#/",
+                "text": "test",
+              },
+              Object {
+                "href": "#/trace_analytics/home",
+                "text": "Trace analytics",
+              },
+              Object {
+                "href": "#/trace_analytics/traces",
+                "text": "Traces",
+              },
+            ],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  endTime="now"
+  filters={Array []}
+  http={[MockFunction]}
+  indicesExist={true}
+  page="traces"
+  parentBreadcrumbs={
+    Array [
+      Object {
+        "href": "test#/",
+        "text": "test",
+      },
+    ]
+  }
+  query=""
+  setEndTime={[MockFunction]}
+  setFilters={
+    [MockFunction] {
+      "calls": Array [
+        Array [
+          Array [],
+        ],
+      ],
+      "results": Array [
+        Object {
+          "type": "return",
+          "value": undefined,
+        },
+      ],
+    }
+  }
+  setQuery={[MockFunction]}
+  setStartTime={[MockFunction]}
+  startTime="now-5m"
+  traceIdColumnAction={[Function]}
+>
+  <EuiTitle
+    size="l"
+  >
+    <h2
+      className="euiTitle euiTitle--large"
+      style={
+        Object {
+          "fontWeight": 430,
+        }
+      }
+    >
+      Traces
+    </h2>
+  </EuiTitle>
+  <TracesContent
+    appConfigs={Array []}
+    childBreadcrumbs={
+      Array [
+        Object {
+          "href": "#/trace_analytics/home",
+          "text": "Trace analytics",
+        },
+        Object {
+          "href": "#/trace_analytics/traces",
+          "text": "Traces",
+        },
+      ]
+    }
+    chrome={
+      Object {
+        "getIsNavDrawerLocked$": [MockFunction],
+        "setBreadcrumbs": [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [
+                Object {
+                  "href": "test#/",
+                  "text": "test",
+                },
+                Object {
+                  "href": "#/trace_analytics/home",
+                  "text": "Trace analytics",
+                },
+                Object {
+                  "href": "#/trace_analytics/traces",
+                  "text": "Traces",
+                },
+              ],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        },
+      }
+    }
+    endTime="now"
+    filters={Array []}
+    http={[MockFunction]}
+    indicesExist={true}
+    page="traces"
+    parentBreadcrumbs={
+      Array [
+        Object {
+          "href": "test#/",
+          "text": "test",
+        },
+      ]
+    }
+    query=""
+    setEndTime={[MockFunction]}
+    setFilters={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Array [],
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    setQuery={[MockFunction]}
+    setStartTime={[MockFunction]}
+    startTime="now-5m"
+    traceIdColumnAction={[Function]}
+  >
+    <SearchBar
+      appConfigs={Array []}
+      endTime="now"
+      filters={Array []}
+      page="traces"
+      query=""
+      refresh={[Function]}
+      setEndTime={[MockFunction]}
+      setFilters={
+        [MockFunction] {
+          "calls": Array [
+            Array [
+              Array [],
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": undefined,
+            },
+          ],
+        }
+      }
+      setQuery={[MockFunction]}
+      setStartTime={[MockFunction]}
+      startTime="now-5m"
+    >
+      <EuiFlexGroup
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem>
+            <div
+              className="euiFlexItem"
+            >
+              <EuiFieldSearch
+                compressed={false}
+                data-test-subj="search-bar-input-box"
+                fullWidth={true}
+                incremental={false}
+                isClearable={false}
+                isLoading={false}
+                onChange={[Function]}
+                onSearch={[Function]}
+                placeholder="Trace ID, trace group name, service name"
+                value=""
+              >
+                <EuiFormControlLayout
+                  compressed={false}
+                  fullWidth={true}
+                  icon="search"
+                  isLoading={false}
+                >
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <EuiValidatableControl>
+                        <input
+                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          data-test-subj="search-bar-input-box"
+                          onChange={[Function]}
+                          onKeyUp={[Function]}
+                          placeholder="Trace ID, trace group name, service name"
+                          type="search"
+                          value=""
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons
+                        compressed={false}
+                        icon="search"
+                        isLoading={false}
+                      >
+                        <div
+                          className="euiFormControlLayoutIcons"
+                        >
+                          <EuiFormControlLayoutCustomIcon
+                            size="m"
+                            type="search"
+                          >
+                            <span
+                              className="euiFormControlLayoutCustomIcon"
+                            >
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiFormControlLayoutCustomIcon__icon"
+                                size="m"
+                                type="search"
+                              >
+                                <EuiIconSearch
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  focusable="false"
+                                  role="img"
+                                  style={null}
+                                >
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M11.271 11.978l3.872 3.873a.502.502 0 00.708 0 .502.502 0 000-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 004.949 2.05.5.5 0 000-1 5.96 5.96 0 01-4.242-1.757 6.01 6.01 0 010-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 010 8.486.5.5 0 00.034.738z"
+                                    />
+                                  </svg>
+                                </EuiIconSearch>
+                              </EuiIcon>
+                            </span>
+                          </EuiFormControlLayoutCustomIcon>
+                        </div>
+                      </EuiFormControlLayoutIcons>
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldSearch>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "maxWidth": "40vw",
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "maxWidth": "40vw",
+                }
+              }
+            >
+              <EuiSuperDatePicker
+                commonlyUsedRanges={
+                  Array [
+                    Object {
+                      "end": "now/d",
+                      "label": "Today",
+                      "start": "now/d",
+                    },
+                    Object {
+                      "end": "now/w",
+                      "label": "This week",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now/M",
+                      "label": "This month",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now/y",
+                      "label": "This year",
+                      "start": "now/y",
+                    },
+                    Object {
+                      "end": "now-1d/d",
+                      "label": "Yesterday",
+                      "start": "now-1d/d",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Week to date",
+                      "start": "now/w",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Month to date",
+                      "start": "now/M",
+                    },
+                    Object {
+                      "end": "now",
+                      "label": "Year to date",
+                      "start": "now/y",
+                    },
+                  ]
+                }
+                dateFormat=""
+                end="now"
+                isAutoRefreshOnly={false}
+                isDisabled={false}
+                isPaused={true}
+                onTimeChange={[Function]}
+                recentlyUsedRanges={Array []}
+                refreshInterval={0}
+                showUpdateButton={false}
+                start="now-5m"
+                timeFormat="HH:mm"
+              >
+                <EuiFlexGroup
+                  className="euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  gutterSize="s"
+                  responsive={false}
+                >
+                  <div
+                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiSuperDatePicker__flexWrapper euiSuperDatePicker__flexWrapper--noUpdateButton"
+                  >
+                    <EuiFlexItem>
+                      <div
+                        className="euiFlexItem"
+                      >
+                        <EuiFormControlLayout
+                          className="euiSuperDatePicker"
+                          isDisabled={false}
+                          prepend={
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            />
+                          }
+                        >
+                          <div
+                            className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                          >
+                            <EuiQuickSelectPopover
+                              applyTime={[Function]}
+                              className="euiFormControlLayout__prepend"
+                              commonlyUsedRanges={
+                                Array [
+                                  Object {
+                                    "end": "now/d",
+                                    "label": "Today",
+                                    "start": "now/d",
+                                  },
+                                  Object {
+                                    "end": "now/w",
+                                    "label": "This week",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now/M",
+                                    "label": "This month",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now/y",
+                                    "label": "This year",
+                                    "start": "now/y",
+                                  },
+                                  Object {
+                                    "end": "now-1d/d",
+                                    "label": "Yesterday",
+                                    "start": "now-1d/d",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Week to date",
+                                    "start": "now/w",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Month to date",
+                                    "start": "now/M",
+                                  },
+                                  Object {
+                                    "end": "now",
+                                    "label": "Year to date",
+                                    "start": "now/y",
+                                  },
+                                ]
+                              }
+                              dateFormat=""
+                              end="now"
+                              isAutoRefreshOnly={false}
+                              isDisabled={false}
+                              isPaused={true}
+                              key="0/.0"
+                              recentlyUsedRanges={Array []}
+                              refreshInterval={0}
+                              start="now-5m"
+                            >
+                              <EuiPopover
+                                anchorClassName="euiQuickSelectPopover__anchor"
+                                anchorPosition="downLeft"
+                                button={
+                                  <EuiButtonEmpty
+                                    aria-label="Date quick select"
+                                    className="euiFormControlLayout__prepend"
+                                    data-test-subj="superDatePickerToggleQuickMenuButton"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    isDisabled={false}
+                                    onClick={[Function]}
+                                    size="xs"
+                                    textProps={
+                                      Object {
+                                        "className": "euiQuickSelectPopover__buttonText",
+                                      }
+                                    }
+                                  >
+                                    <EuiIcon
+                                      type="calendar"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="m"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownLeft"
+                                >
+                                  <div
+                                    className="euiPopover__anchor euiQuickSelectPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      aria-label="Date quick select"
+                                      className="euiFormControlLayout__prepend"
+                                      data-test-subj="superDatePickerToggleQuickMenuButton"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      isDisabled={false}
+                                      onClick={[Function]}
+                                      size="xs"
+                                      textProps={
+                                        Object {
+                                          "className": "euiQuickSelectPopover__buttonText",
+                                        }
+                                      }
+                                    >
+                                      <button
+                                        aria-label="Date quick select"
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
+                                        data-test-subj="superDatePickerToggleQuickMenuButton"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text euiQuickSelectPopover__buttonText",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconArrowDown
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M13.069 5.157L8.384 9.768a.546.546 0 01-.768 0L2.93 5.158a.552.552 0 00-.771 0 .53.53 0 000 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 000-.76.552.552 0 00-.771 0z"
+                                                    fillRule="non-zero"
+                                                  />
+                                                </svg>
+                                              </EuiIconArrowDown>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                                            >
+                                              <EuiIcon
+                                                type="calendar"
+                                              >
+                                                <EuiIconCalendar
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium"
+                                                  focusable="false"
+                                                  role="img"
+                                                  style={null}
+                                                >
+                                                  <svg
+                                                    aria-hidden={true}
+                                                    className="euiIcon euiIcon--medium"
+                                                    focusable="false"
+                                                    height={16}
+                                                    role="img"
+                                                    style={null}
+                                                    viewBox="0 0 16 16"
+                                                    width={16}
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                  >
+                                                    <path
+                                                      d="M14 4v-.994C14 2.45 13.55 2 12.994 2H11v1h-1V2H6v1H5V2H3.006C2.45 2 2 2.45 2 3.006v9.988C2 13.55 2.45 14 3.006 14h9.988C13.55 14 14 13.55 14 12.994V5H2V4h12zm-3-3h1.994C14.102 1 15 1.897 15 3.006v9.988A2.005 2.005 0 0112.994 15H3.006A2.005 2.005 0 011 12.994V3.006C1 1.898 1.897 1 3.006 1H5V0h1v1h4V0h1v1zM4 7h2v1H4V7zm3 0h2v1H7V7zm3 0h2v1h-2V7zM4 9h2v1H4V9zm3 0h2v1H7V9zm3 0h2v1h-2V9zm-6 2h2v1H4v-1zm3 0h2v1H7v-1zm3 0h2v1h-2v-1z"
+                                                      fillRule="evenodd"
+                                                    />
+                                                  </svg>
+                                                </EuiIconCalendar>
+                                              </EuiIcon>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </EuiQuickSelectPopover>
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiDatePickerRange
+                                className="euiDatePickerRange--inGroup"
+                                endDateControl={<div />}
+                                iconType={false}
+                                isCustom={true}
+                                startDateControl={<div />}
+                              >
+                                <div
+                                  className="euiDatePickerRange euiDatePickerRange--inGroup"
+                                >
+                                  <button
+                                    className="euiSuperDatePicker__prettyFormat"
+                                    data-test-subj="superDatePickerShowDatesButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                  >
+                                    Last 5 minutes
+                                    <span
+                                      className="euiSuperDatePicker__prettyFormatLink"
+                                    >
+                                      <EuiI18n
+                                        default="Show dates"
+                                        token="euiSuperDatePicker.showDatesButtonLabel"
+                                      >
+                                        Show dates
+                                      </EuiI18n>
+                                    </span>
+                                  </button>
+                                </div>
+                              </EuiDatePickerRange>
+                              <EuiFormControlLayoutIcons />
+                            </div>
+                          </div>
+                        </EuiFormControlLayout>
+                      </div>
+                    </EuiFlexItem>
+                  </div>
+                </EuiFlexGroup>
+              </EuiSuperDatePicker>
+            </div>
+          </EuiFlexItem>
+          <EuiFlexItem
+            grow={false}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <EuiButton
+                data-click-metric-element="trace_analytics.refresh_button"
+                data-test-subj="superDatePickerApplyTimeButton"
+                iconType="refresh"
+                onClick={[Function]}
+              >
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <button
+                    className="euiButton euiButton--primary"
+                    data-click-metric-element="trace_analytics.refresh_button"
+                    data-test-subj="superDatePickerApplyTimeButton"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "minWidth": undefined,
+                      }
+                    }
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButton__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
+                        >
+                          <EuiIconRefresh
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                            focusable="false"
+                            role="img"
+                            style={null}
+                          >
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M11.228 2.942a.5.5 0 11-.538.842A5 5 0 1013 8a.5.5 0 111 0 6 6 0 11-2.772-5.058zM14 1.5v3A1.5 1.5 0 0112.5 6h-3a.5.5 0 010-1h3a.5.5 0 00.5-.5v-3a.5.5 0 111 0z"
+                              />
+                            </svg>
+                          </EuiIconRefresh>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="s"
+      >
+        <div
+          className="euiSpacer euiSpacer--s"
+        />
+      </EuiSpacer>
+      <Filters
+        appConfigs={Array []}
+        filters={Array []}
+        page="traces"
+        setFilters={
+          [MockFunction] {
+            "calls": Array [
+              Array [
+                Array [],
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          }
+        }
+      >
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          responsive={false}
+          style={
+            Object {
+              "minHeight": 32,
+            }
+          }
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+            style={
+              Object {
+                "minHeight": 32,
+              }
+            }
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <GlobalFilterButton>
+                  <EuiPopover
+                    anchorPosition="rightUp"
+                    button={
+                      <EuiButtonIcon
+                        aria-label="Change all filters"
+                        iconType="filter"
+                        onClick={[Function]}
+                        title="Change all filters"
+                      />
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="none"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorRightUp"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonIcon
+                          aria-label="Change all filters"
+                          iconType="filter"
+                          onClick={[Function]}
+                          title="Change all filters"
+                        >
+                          <button
+                            aria-label="Change all filters"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            title="Change all filters"
+                            type="button"
+                          >
+                            <EuiIcon
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              size="m"
+                              type="filter"
+                            >
+                              <EuiIconFilter
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                focusable="false"
+                                role="img"
+                                style={null}
+                              >
+                                <svg
+                                  aria-hidden={true}
+                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                  focusable="false"
+                                  height={16}
+                                  role="img"
+                                  style={null}
+                                  viewBox="0 0 16 16"
+                                  width={16}
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M7.999 15.999a8 8 0 110-16 8 8 0 010 16zM8 15A7 7 0 108 1a7 7 0 000 14zM3.5 5h9a.5.5 0 110 1h-9a.5.5 0 010-1zm2 3h5a.5.5 0 110 1h-5a.5.5 0 010-1zm2 3h1a.5.5 0 110 1h-1a.5.5 0 110-1z"
+                                    fillRule="evenodd"
+                                  />
+                                </svg>
+                              </EuiIconFilter>
+                            </EuiIcon>
+                          </button>
+                        </EuiButtonIcon>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </GlobalFilterButton>
+              </div>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <AddFilterButton>
+                  <EuiPopover
+                    anchorPosition="downLeft"
+                    button={
+                      <EuiButtonEmpty
+                        onClick={[Function]}
+                        size="xs"
+                      >
+                        + Add filter
+                      </EuiButtonEmpty>
+                    }
+                    closePopover={[Function]}
+                    display="inlineBlock"
+                    hasArrow={true}
+                    isOpen={false}
+                    ownFocus={true}
+                    panelPaddingSize="m"
+                    withTitle={true}
+                  >
+                    <div
+                      className="euiPopover euiPopover--anchorDownLeft"
+                      withTitle={true}
+                    >
+                      <div
+                        className="euiPopover__anchor"
+                      >
+                        <EuiButtonEmpty
+                          onClick={[Function]}
+                          size="xs"
+                        >
+                          <button
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                            disabled={false}
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <EuiButtonContent
+                              className="euiButtonEmpty__content"
+                              iconSide="left"
+                              iconSize="s"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
+                            >
+                              <span
+                                className="euiButtonContent euiButtonEmpty__content"
+                              >
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  + Add filter
+                                </span>
+                              </span>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonEmpty>
+                      </div>
+                    </div>
+                  </EuiPopover>
+                </AddFilterButton>
+              </div>
+            </EuiFlexItem>
+          </div>
+        </EuiFlexGroup>
+      </Filters>
+    </SearchBar>
+    <EuiSpacer
+      size="m"
+    >
+      <div
+        className="euiSpacer euiSpacer--m"
+      />
+    </EuiSpacer>
+    <TracesTable
+      indicesExist={true}
+      items={Array []}
+      loading={false}
+      refresh={[Function]}
+      traceIdColumnAction={[Function]}
+    >
+      <EuiPanel>
+        <div
+          className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+        >
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+            >
+              <EuiFlexItem
+                grow={10}
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrow10"
+                >
+                  <PanelTitle
+                    title="Traces"
+                    totalItems={0}
+                  >
+                    <EuiText
+                      size="m"
+                    >
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <span
+                          className="panel-title"
+                        >
+                          Traces
+                        </span>
+                        <span
+                          className="panel-title-count"
+                        >
+                           (0)
+                        </span>
+                      </div>
+                    </EuiText>
+                  </PanelTitle>
+                </div>
+              </EuiFlexItem>
+            </div>
+          </EuiFlexGroup>
+          <EuiSpacer
+            size="m"
+          >
+            <div
+              className="euiSpacer euiSpacer--m"
+            />
+          </EuiSpacer>
+          <EuiHorizontalRule
+            margin="none"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full"
+            />
+          </EuiHorizontalRule>
+          <NoMatchMessage
+            size="xl"
+          >
+            <EuiSpacer
+              size="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+            <EuiEmptyPrompt
+              body={
+                <EuiText>
+                  No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                </EuiText>
+              }
+              title={
+                <h2>
+                  No matches
+                </h2>
+              }
+            >
+              <div
+                className="euiEmptyPrompt"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    No matches
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <EuiText>
+                          <div
+                            className="euiText euiText--medium"
+                          >
+                            No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                          </div>
+                        </EuiText>
+                      </div>
+                    </EuiText>
+                  </span>
+                </EuiTextColor>
+              </div>
+            </EuiEmptyPrompt>
+            <EuiSpacer
+              size="xl"
+            >
+              <div
+                className="euiSpacer euiSpacer--xl"
+              />
+            </EuiSpacer>
+          </NoMatchMessage>
+        </div>
+      </EuiPanel>
+    </TracesTable>
+  </TracesContent>
+</Traces>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap
new file mode 100644
index 0000000000..5e48443537
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap
@@ -0,0 +1,1975 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Traces table component renders empty traces table message 1`] = `
+<TracesTable
+  indicesExist={false}
+  items={Array []}
+  loading={false}
+  refresh={[MockFunction]}
+  traceIdColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Traces"
+                totalItems={0}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Traces
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (0)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <MissingConfigurationMessage>
+        <EuiEmptyPrompt
+          actions={
+            <EuiButton
+              color="primary"
+              iconSide="right"
+              iconType="popout"
+              onClick={[Function]}
+            >
+              Learn more
+            </EuiButton>
+          }
+          body={
+            <EuiText>
+              The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+            </EuiText>
+          }
+          title={
+            <h2>
+              Trace Analytics not set up
+            </h2>
+          }
+        >
+          <div
+            className="euiEmptyPrompt"
+          >
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
+              >
+                Trace Analytics not set up
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
+            >
+              <span
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        The indices required for trace analytics (otel-v1-apm-span-* and otel-v1-apm-service-map*) do not exist or you do not have permission to access them.
+                      </div>
+                    </EuiText>
+                  </div>
+                </EuiText>
+              </span>
+            </EuiTextColor>
+            <EuiSpacer
+              size="l"
+            >
+              <div
+                className="euiSpacer euiSpacer--l"
+              />
+            </EuiSpacer>
+            <EuiButton
+              color="primary"
+              iconSide="right"
+              iconType="popout"
+              onClick={[Function]}
+            >
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                color="primary"
+                disabled={false}
+                element="button"
+                iconSide="right"
+                iconType="popout"
+                isDisabled={false}
+                onClick={[Function]}
+                type="button"
+              >
+                <button
+                  className="euiButton euiButton--primary"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="right"
+                    iconType="popout"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
+                  >
+                    <span
+                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                    >
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="popout"
+                      >
+                        <EuiIconEmpty
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          role="img"
+                          style={null}
+                        >
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                        </EuiIconEmpty>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        Learn more
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </div>
+        </EuiEmptyPrompt>
+      </MissingConfigurationMessage>
+    </div>
+  </EuiPanel>
+</TracesTable>
+`;
+
+exports[`Traces table component renders empty traces table message 2`] = `
+<TracesTable
+  indicesExist={true}
+  items={Array []}
+  loading={false}
+  refresh={[MockFunction]}
+  traceIdColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Traces"
+                totalItems={0}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Traces
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (0)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <NoMatchMessage
+        size="xl"
+      >
+        <EuiSpacer
+          size="xl"
+        >
+          <div
+            className="euiSpacer euiSpacer--xl"
+          />
+        </EuiSpacer>
+        <EuiEmptyPrompt
+          body={
+            <EuiText>
+              No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+            </EuiText>
+          }
+          title={
+            <h2>
+              No matches
+            </h2>
+          }
+        >
+          <div
+            className="euiEmptyPrompt"
+          >
+            <EuiTitle
+              size="m"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
+              >
+                No matches
+              </h2>
+            </EuiTitle>
+            <EuiTextColor
+              color="subdued"
+            >
+              <span
+                className="euiTextColor euiTextColor--subdued"
+              >
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiText>
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        No data matches the selected filter. Clear the filter and/or increase the time range to see more results.
+                      </div>
+                    </EuiText>
+                  </div>
+                </EuiText>
+              </span>
+            </EuiTextColor>
+          </div>
+        </EuiEmptyPrompt>
+        <EuiSpacer
+          size="xl"
+        >
+          <div
+            className="euiSpacer euiSpacer--xl"
+          />
+        </EuiSpacer>
+      </NoMatchMessage>
+    </div>
+  </EuiPanel>
+</TracesTable>
+`;
+
+exports[`Traces table component renders traces table 1`] = `
+<TracesTable
+  indicesExist={true}
+  items={
+    Array [
+      Object {
+        "actions": "#",
+        "error_count": "Yes",
+        "last_updated": "11/10/2020 09:55:45",
+        "latency": 19.91,
+        "percentile_in_trace_group": 30,
+        "trace_group": "HTTP GET",
+        "trace_id": "00079a615e31e61766fcb20b557051c1",
+      },
+    ]
+  }
+  loading={false}
+  refresh={[MockFunction]}
+  traceIdColumnAction={[Function]}
+>
+  <EuiPanel>
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+    >
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+        >
+          <EuiFlexItem
+            grow={10}
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow10"
+            >
+              <PanelTitle
+                title="Traces"
+                totalItems={1}
+              >
+                <EuiText
+                  size="m"
+                >
+                  <div
+                    className="euiText euiText--medium"
+                  >
+                    <span
+                      className="panel-title"
+                    >
+                      Traces
+                    </span>
+                    <span
+                      className="panel-title-count"
+                    >
+                       (1)
+                    </span>
+                  </div>
+                </EuiText>
+              </PanelTitle>
+            </div>
+          </EuiFlexItem>
+        </div>
+      </EuiFlexGroup>
+      <EuiSpacer
+        size="m"
+      >
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+      </EuiSpacer>
+      <EuiHorizontalRule
+        margin="none"
+      >
+        <hr
+          className="euiHorizontalRule euiHorizontalRule--full"
+        />
+      </EuiHorizontalRule>
+      <EuiInMemoryTable
+        columns={
+          Array [
+            Object {
+              "align": "left",
+              "field": "trace_id",
+              "name": "Trace ID",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "left",
+              "field": "trace_group",
+              "name": "Trace group",
+              "render": [Function],
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "right",
+              "field": "latency",
+              "name": "Latency (ms)",
+              "sortable": true,
+              "truncateText": true,
+            },
+            Object {
+              "align": "right",
+              "field": "percentile_in_trace_group",
+              "name": <React.Fragment>
+                <div>
+                  Percentile in trace group
+                </div>
+              </React.Fragment>,
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "right",
+              "field": "error_count",
+              "name": "Errors",
+              "render": [Function],
+              "sortable": true,
+            },
+            Object {
+              "align": "left",
+              "field": "last_updated",
+              "name": "Last updated",
+              "render": [Function],
+              "sortable": true,
+            },
+          ]
+        }
+        items={
+          Array [
+            Object {
+              "actions": "#",
+              "error_count": "Yes",
+              "last_updated": "11/10/2020 09:55:45",
+              "latency": 19.91,
+              "percentile_in_trace_group": 30,
+              "trace_group": "HTTP GET",
+              "trace_id": "00079a615e31e61766fcb20b557051c1",
+            },
+          ]
+        }
+        loading={false}
+        onTableChange={[Function]}
+        pagination={
+          Object {
+            "initialPageSize": 10,
+            "pageSizeOptions": Array [
+              5,
+              10,
+              15,
+            ],
+          }
+        }
+        responsive={true}
+        sorting={
+          Object {
+            "sort": Object {
+              "direction": "asc",
+              "field": "trace_id",
+            },
+          }
+        }
+        tableLayout="auto"
+      >
+        <EuiBasicTable
+          columns={
+            Array [
+              Object {
+                "align": "left",
+                "field": "trace_id",
+                "name": "Trace ID",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "left",
+                "field": "trace_group",
+                "name": "Trace group",
+                "render": [Function],
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "right",
+                "field": "latency",
+                "name": "Latency (ms)",
+                "sortable": true,
+                "truncateText": true,
+              },
+              Object {
+                "align": "right",
+                "field": "percentile_in_trace_group",
+                "name": <React.Fragment>
+                  <div>
+                    Percentile in trace group
+                  </div>
+                </React.Fragment>,
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "right",
+                "field": "error_count",
+                "name": "Errors",
+                "render": [Function],
+                "sortable": true,
+              },
+              Object {
+                "align": "left",
+                "field": "last_updated",
+                "name": "Last updated",
+                "render": [Function],
+                "sortable": true,
+              },
+            ]
+          }
+          items={
+            Array [
+              Object {
+                "actions": "#",
+                "error_count": "Yes",
+                "last_updated": "11/10/2020 09:55:45",
+                "latency": 19.91,
+                "percentile_in_trace_group": 30,
+                "trace_group": "HTTP GET",
+                "trace_id": "00079a615e31e61766fcb20b557051c1",
+              },
+            ]
+          }
+          loading={false}
+          noItemsMessage="No items found"
+          onChange={[Function]}
+          pagination={
+            Object {
+              "hidePerPageOptions": undefined,
+              "pageIndex": 0,
+              "pageSize": 10,
+              "pageSizeOptions": Array [
+                5,
+                10,
+                15,
+              ],
+              "totalItemCount": 1,
+            }
+          }
+          responsive={true}
+          sorting={
+            Object {
+              "allowNeutralSort": true,
+              "sort": Object {
+                "direction": "asc",
+                "field": "Trace ID",
+              },
+            }
+          }
+          tableLayout="auto"
+        >
+          <div
+            className="euiBasicTable"
+          >
+            <div>
+              <EuiTableHeaderMobile>
+                <div
+                  className="euiTableHeaderMobile"
+                >
+                  <EuiFlexGroup
+                    alignItems="baseline"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiTableSortMobile
+                            items={
+                              Array [
+                                Object {
+                                  "isSortAscending": true,
+                                  "isSorted": true,
+                                  "key": "_data_s_trace_id_0",
+                                  "name": "Trace ID",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_trace_group_1",
+                                  "name": "Trace group",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_latency_2",
+                                  "name": "Latency (ms)",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_percentile_in_trace_group_3",
+                                  "name": <React.Fragment>
+                                    <div>
+                                      Percentile in trace group
+                                    </div>
+                                  </React.Fragment>,
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_error_count_4",
+                                  "name": "Errors",
+                                  "onSort": [Function],
+                                },
+                                Object {
+                                  "isSortAscending": undefined,
+                                  "isSorted": false,
+                                  "key": "_data_s_last_updated_5",
+                                  "name": "Last updated",
+                                  "onSort": [Function],
+                                },
+                              ]
+                            }
+                          >
+                            <div
+                              className="euiTableSortMobile"
+                            >
+                              <EuiPopover
+                                anchorPosition="downRight"
+                                button={
+                                  <EuiButtonEmpty
+                                    flush="right"
+                                    iconSide="right"
+                                    iconType="arrowDown"
+                                    onClick={[Function]}
+                                    size="xs"
+                                  >
+                                    <EuiI18n
+                                      default="Sorting"
+                                      token="euiTableSortMobile.sorting"
+                                    />
+                                  </EuiButtonEmpty>
+                                }
+                                closePopover={[Function]}
+                                display="inlineBlock"
+                                hasArrow={true}
+                                isOpen={false}
+                                ownFocus={true}
+                                panelPaddingSize="none"
+                              >
+                                <div
+                                  className="euiPopover euiPopover--anchorDownRight"
+                                >
+                                  <div
+                                    className="euiPopover__anchor"
+                                  >
+                                    <EuiButtonEmpty
+                                      flush="right"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      onClick={[Function]}
+                                      size="xs"
+                                    >
+                                      <button
+                                        className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                        disabled={false}
+                                        onClick={[Function]}
+                                        type="button"
+                                      >
+                                        <EuiButtonContent
+                                          className="euiButtonEmpty__content"
+                                          iconSide="right"
+                                          iconSize="s"
+                                          iconType="arrowDown"
+                                          textProps={
+                                            Object {
+                                              "className": "euiButtonEmpty__text",
+                                            }
+                                          }
+                                        >
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                          >
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="s"
+                                              type="arrowDown"
+                                            >
+                                              <EuiIconEmpty
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                role="img"
+                                                style={null}
+                                              >
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                />
+                                              </EuiIconEmpty>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButtonEmpty__text"
+                                            >
+                                              <EuiI18n
+                                                default="Sorting"
+                                                token="euiTableSortMobile.sorting"
+                                              >
+                                                Sorting
+                                              </EuiI18n>
+                                            </span>
+                                          </span>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonEmpty>
+                                  </div>
+                                </div>
+                              </EuiPopover>
+                            </div>
+                          </EuiTableSortMobile>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </div>
+              </EuiTableHeaderMobile>
+              <EuiTable
+                id="random_html_id"
+                responsive={true}
+                tableLayout="auto"
+              >
+                <table
+                  className="euiTable euiTable--responsive euiTable--auto"
+                  id="random_html_id"
+                  tabIndex={-1}
+                >
+                  <EuiScreenReaderOnly>
+                    <caption
+                      className="euiScreenReaderOnly euiTableCaption"
+                    >
+                      <EuiDelayRender
+                        delay={500}
+                      />
+                    </caption>
+                  </EuiScreenReaderOnly>
+                  <EuiTableHeader>
+                    <thead>
+                      <tr>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_trace_id_0"
+                          isSortAscending={true}
+                          isSorted={true}
+                          key="_data_h_trace_id_0"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="ascending"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_trace_id_0"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSortAscending={true}
+                                isSorted={true}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Trace ID",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Trace ID"
+                                      >
+                                        Trace ID
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                  <EuiIcon
+                                    className="euiTableSortIcon"
+                                    size="m"
+                                    type="sortUp"
+                                  >
+                                    <EuiIconEmpty
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                      focusable="false"
+                                      role="img"
+                                      style={null}
+                                    >
+                                      <svg
+                                        aria-hidden={true}
+                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiTableSortIcon"
+                                        focusable="false"
+                                        height={16}
+                                        role="img"
+                                        style={null}
+                                        viewBox="0 0 16 16"
+                                        width={16}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      />
+                                    </EuiIconEmpty>
+                                  </EuiIcon>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_trace_group_1"
+                          isSorted={false}
+                          key="_data_h_trace_group_1"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_trace_group_1"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Trace group",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Trace group"
+                                      >
+                                        Trace group
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_latency_2"
+                          isSorted={false}
+                          key="_data_h_latency_2"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_latency_2"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Latency (ms)",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Latency (ms)"
+                                      >
+                                        Latency (ms)
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_percentile_in_trace_group_3"
+                          isSorted={false}
+                          key="_data_h_percentile_in_trace_group_3"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_percentile_in_trace_group_3"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Percentile in trace group",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Percentile in trace group"
+                                      >
+                                        <div>
+                                          Percentile in trace group
+                                        </div>
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="right"
+                          data-test-subj="tableHeaderCell_error_count_4"
+                          isSorted={false}
+                          key="_data_h_error_count_4"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_error_count_4"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent euiTableCellContent--alignRight"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent euiTableCellContent--alignRight"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Errors",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Errors"
+                                      >
+                                        Errors
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                        <EuiTableHeaderCell
+                          align="left"
+                          data-test-subj="tableHeaderCell_last_updated_5"
+                          isSorted={false}
+                          key="_data_h_last_updated_5"
+                          onSort={[Function]}
+                        >
+                          <th
+                            aria-live="polite"
+                            aria-sort="none"
+                            className="euiTableHeaderCell"
+                            data-test-subj="tableHeaderCell_last_updated_5"
+                            role="columnheader"
+                            scope="col"
+                            style={
+                              Object {
+                                "width": undefined,
+                              }
+                            }
+                          >
+                            <button
+                              className="euiTableHeaderButton"
+                              data-test-subj="tableHeaderSortButton"
+                              onClick={[Function]}
+                              type="button"
+                            >
+                              <CellContents
+                                className="euiTableCellContent"
+                                isSorted={false}
+                                showSortMsg={true}
+                              >
+                                <span
+                                  className="euiTableCellContent"
+                                >
+                                  <EuiInnerText>
+                                    <EuiI18n
+                                      default="{innerText}; {description}"
+                                      token="euiTableHeaderCell.titleTextWithDesc"
+                                      values={
+                                        Object {
+                                          "description": undefined,
+                                          "innerText": "Last updated",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiTableCellContent__text"
+                                        title="Last updated"
+                                      >
+                                        Last updated
+                                      </span>
+                                    </EuiI18n>
+                                  </EuiInnerText>
+                                </span>
+                              </CellContents>
+                            </button>
+                          </th>
+                        </EuiTableHeaderCell>
+                      </tr>
+                    </thead>
+                  </EuiTableHeader>
+                  <EuiTableBody
+                    bodyRef={[Function]}
+                  >
+                    <tbody>
+                      <EuiTableRow
+                        isSelected={false}
+                      >
+                        <tr
+                          className="euiTableRow"
+                        >
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_trace_id_0_0"
+                            mobileOptions={
+                              Object {
+                                "header": "Trace ID",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Trace ID
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiFlexGroup
+                                  alignItems="center"
+                                  className=""
+                                  gutterSize="s"
+                                  key=".0"
+                                >
+                                  <div
+                                    className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                  >
+                                    <EuiFlexItem
+                                      grow={10}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrow10"
+                                      >
+                                        <EuiLink
+                                          onClick={[Function]}
+                                        >
+                                          <button
+                                            className="euiLink euiLink--primary"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <div
+                                              title="00079a615e31e61766fcb20b557051c1"
+                                            >
+                                              00079a615e31e61766fcb...
+                                            </div>
+                                          </button>
+                                        </EuiLink>
+                                      </div>
+                                    </EuiFlexItem>
+                                    <EuiFlexItem
+                                      grow={false}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                                      >
+                                        <EuiCopy
+                                          afterMessage="Copied"
+                                          textToCopy="00079a615e31e61766fcb20b557051c1"
+                                        >
+                                          <EuiToolTip
+                                            delay="regular"
+                                            onMouseOut={[Function]}
+                                            position="top"
+                                          >
+                                            <span
+                                              className="euiToolTipAnchor"
+                                              onKeyUp={[Function]}
+                                              onMouseOut={[Function]}
+                                              onMouseOver={[Function]}
+                                            >
+                                              <EuiButtonIcon
+                                                aria-label="Copy trace id"
+                                                iconType="copyClipboard"
+                                                onBlur={[Function]}
+                                                onClick={[Function]}
+                                                onFocus={[Function]}
+                                              >
+                                                <button
+                                                  aria-label="Copy trace id"
+                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                                  disabled={false}
+                                                  onBlur={[Function]}
+                                                  onClick={[Function]}
+                                                  onFocus={[Function]}
+                                                  type="button"
+                                                >
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiButtonIcon__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="copyClipboard"
+                                                  >
+                                                    <EuiIconEmpty
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                      focusable="false"
+                                                      role="img"
+                                                      style={null}
+                                                    >
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      />
+                                                    </EuiIconEmpty>
+                                                  </EuiIcon>
+                                                </button>
+                                              </EuiButtonIcon>
+                                            </span>
+                                          </EuiToolTip>
+                                        </EuiCopy>
+                                      </div>
+                                    </EuiFlexItem>
+                                    <EuiFlexItem
+                                      grow={3}
+                                    >
+                                      <div
+                                        className="euiFlexItem euiFlexItem--flexGrow3"
+                                      />
+                                    </EuiFlexItem>
+                                  </div>
+                                </EuiFlexGroup>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_trace_group_0_1"
+                            mobileOptions={
+                              Object {
+                                "header": "Trace group",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Trace group
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    HTTP GET
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_latency_0_2"
+                            mobileOptions={
+                              Object {
+                                "header": "Latency (ms)",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={true}
+                            truncateText={true}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Latency (ms)
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--truncateText"
+                              >
+                                <span
+                                  className="euiTableCellContent__text"
+                                >
+                                  19.91
+                                </span>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_percentile_in_trace_group_0_3"
+                            mobileOptions={
+                              Object {
+                                "header": <React.Fragment>
+                                  <div>
+                                    Percentile in trace group
+                                  </div>
+                                </React.Fragment>,
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                <div>
+                                  Percentile in trace group
+                                </div>
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                <EuiText
+                                  className=""
+                                  key=".0"
+                                  size="s"
+                                >
+                                  <div
+                                    className="euiText euiText--small"
+                                  >
+                                    30th
+                                  </div>
+                                </EuiText>
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="right"
+                            key="_data_column_error_count_0_4"
+                            mobileOptions={
+                              Object {
+                                "header": "Errors",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Errors
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--overflowingContent"
+                              >
+                                No
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                          <EuiTableRowCell
+                            align="left"
+                            key="_data_column_last_updated_0_5"
+                            mobileOptions={
+                              Object {
+                                "header": "Last updated",
+                                "render": undefined,
+                              }
+                            }
+                            setScopeRow={false}
+                            textOnly={false}
+                          >
+                            <td
+                              className="euiTableRowCell"
+                              style={
+                                Object {
+                                  "width": undefined,
+                                }
+                              }
+                            >
+                              <div
+                                className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                              >
+                                Last updated
+                              </div>
+                              <div
+                                className="euiTableCellContent euiTableCellContent--overflowingContent"
+                              >
+                                11/10/2020 09:55:45
+                              </div>
+                            </td>
+                          </EuiTableRowCell>
+                        </tr>
+                      </EuiTableRow>
+                    </tbody>
+                  </EuiTableBody>
+                </table>
+              </EuiTable>
+            </div>
+            <PaginationBar
+              aria-controls="random_html_id"
+              onPageChange={[Function]}
+              onPageSizeChange={[Function]}
+              pagination={
+                Object {
+                  "hidePerPageOptions": undefined,
+                  "pageIndex": 0,
+                  "pageSize": 10,
+                  "pageSizeOptions": Array [
+                    5,
+                    10,
+                    15,
+                  ],
+                  "totalItemCount": 1,
+                }
+              }
+            >
+              <div>
+                <EuiSpacer
+                  size="m"
+                >
+                  <div
+                    className="euiSpacer euiSpacer--m"
+                  />
+                </EuiSpacer>
+                <EuiTablePagination
+                  activePage={0}
+                  aria-controls="random_html_id"
+                  itemsPerPage={10}
+                  itemsPerPageOptions={
+                    Array [
+                      5,
+                      10,
+                      15,
+                    ]
+                  }
+                  onChangeItemsPerPage={[Function]}
+                  onChangePage={[Function]}
+                  pageCount={1}
+                >
+                  <EuiFlexGroup
+                    alignItems="center"
+                    justifyContent="spaceBetween"
+                    responsive={false}
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPopover
+                            anchorPosition="upRight"
+                            button={
+                              <EuiButtonEmpty
+                                color="text"
+                                data-test-subj="tablePaginationPopoverButton"
+                                iconSide="right"
+                                iconType="arrowDown"
+                                onClick={[Function]}
+                                size="xs"
+                              >
+                                <EuiI18n
+                                  default="Rows per page"
+                                  token="euiTablePagination.rowsPerPage"
+                                />
+                                : 
+                                10
+                              </EuiButtonEmpty>
+                            }
+                            closePopover={[Function]}
+                            display="inlineBlock"
+                            hasArrow={true}
+                            isOpen={false}
+                            ownFocus={true}
+                            panelPaddingSize="none"
+                          >
+                            <div
+                              className="euiPopover euiPopover--anchorUpRight"
+                            >
+                              <div
+                                className="euiPopover__anchor"
+                              >
+                                <EuiButtonEmpty
+                                  color="text"
+                                  data-test-subj="tablePaginationPopoverButton"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  onClick={[Function]}
+                                  size="xs"
+                                >
+                                  <button
+                                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                                    data-test-subj="tablePaginationPopoverButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
+                                  >
+                                    <EuiButtonContent
+                                      className="euiButtonEmpty__content"
+                                      iconSide="right"
+                                      iconSize="s"
+                                      iconType="arrowDown"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButtonEmpty__text",
+                                        }
+                                      }
+                                    >
+                                      <span
+                                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                      >
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="s"
+                                          type="arrowDown"
+                                        >
+                                          <EuiIconEmpty
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                            focusable="false"
+                                            role="img"
+                                            style={null}
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            />
+                                          </EuiIconEmpty>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButtonEmpty__text"
+                                        >
+                                          <EuiI18n
+                                            default="Rows per page"
+                                            token="euiTablePagination.rowsPerPage"
+                                          >
+                                            Rows per page
+                                          </EuiI18n>
+                                          : 
+                                          10
+                                        </span>
+                                      </span>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonEmpty>
+                              </div>
+                            </div>
+                          </EuiPopover>
+                        </div>
+                      </EuiFlexItem>
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <div
+                          className="euiFlexItem euiFlexItem--flexGrowZero"
+                        >
+                          <EuiPagination
+                            activePage={0}
+                            aria-controls="random_html_id"
+                            onPageClick={[Function]}
+                            pageCount={1}
+                          >
+                            <nav
+                              className="euiPagination"
+                            >
+                              <EuiI18n
+                                default="Previous page, {page}"
+                                token="euiPagination.previousPage"
+                                values={
+                                  Object {
+                                    "page": 0,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Previous page"
+                                  token="euiPagination.disabledPreviousPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Previous page"
+                                    color="text"
+                                    data-test-subj="pagination-button-previous"
+                                    disabled={true}
+                                    iconType="arrowLeft"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Previous page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-previous"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowLeft"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                              <ul
+                                className="euiPagination__list"
+                              >
+                                <PaginationButton
+                                  key="0"
+                                  pageIndex={0}
+                                >
+                                  <li
+                                    className="euiPagination__item"
+                                  >
+                                    <EuiPaginationButton
+                                      aria-controls="random_html_id"
+                                      hideOnMobile={true}
+                                      isActive={true}
+                                      onClick={[Function]}
+                                      pageIndex={0}
+                                      totalPages={1}
+                                    >
+                                      <EuiI18n
+                                        default="Page {page} of {totalPages}"
+                                        token="euiPaginationButton.longPageString"
+                                        values={
+                                          Object {
+                                            "page": 1,
+                                            "totalPages": 1,
+                                          }
+                                        }
+                                      >
+                                        <EuiI18n
+                                          default="Page {page}"
+                                          token="euiPaginationButton.shortPageString"
+                                          values={
+                                            Object {
+                                              "page": 1,
+                                            }
+                                          }
+                                        >
+                                          <EuiButtonEmpty
+                                            aria-controls="random_html_id"
+                                            aria-current={true}
+                                            aria-label="Page 1 of 1"
+                                            className="euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                            color="text"
+                                            data-test-subj="pagination-button-0"
+                                            href="#random_html_id"
+                                            isDisabled={true}
+                                            onClick={[Function]}
+                                            size="s"
+                                          >
+                                            <button
+                                              aria-controls="random_html_id"
+                                              aria-current={true}
+                                              aria-label="Page 1 of 1"
+                                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                              data-test-subj="pagination-button-0"
+                                              disabled={true}
+                                              onClick={[Function]}
+                                              type="button"
+                                            >
+                                              <EuiButtonContent
+                                                className="euiButtonEmpty__content"
+                                                iconSide="left"
+                                                iconSize="m"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButtonEmpty__text",
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  className="euiButtonContent euiButtonEmpty__content"
+                                                >
+                                                  <span
+                                                    className="euiButtonEmpty__text"
+                                                  >
+                                                    1
+                                                  </span>
+                                                </span>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonEmpty>
+                                        </EuiI18n>
+                                      </EuiI18n>
+                                    </EuiPaginationButton>
+                                  </li>
+                                </PaginationButton>
+                              </ul>
+                              <EuiI18n
+                                default="Next page, {page}"
+                                token="euiPagination.nextPage"
+                                values={
+                                  Object {
+                                    "page": 2,
+                                  }
+                                }
+                              >
+                                <EuiI18n
+                                  default="Next page"
+                                  token="euiPagination.disabledNextPage"
+                                >
+                                  <EuiButtonIcon
+                                    aria-label="Next page"
+                                    color="text"
+                                    data-test-subj="pagination-button-next"
+                                    disabled={true}
+                                    iconType="arrowRight"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Next page"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="pagination-button-next"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="arrowRight"
+                                      >
+                                        <EuiIconEmpty
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          role="img"
+                                          style={null}
+                                        >
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          />
+                                        </EuiIconEmpty>
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                              </EuiI18n>
+                            </nav>
+                          </EuiPagination>
+                        </div>
+                      </EuiFlexItem>
+                    </div>
+                  </EuiFlexGroup>
+                </EuiTablePagination>
+              </div>
+            </PaginationBar>
+          </div>
+        </EuiBasicTable>
+      </EuiInMemoryTable>
+    </div>
+  </EuiPanel>
+</TracesTable>
+`;
diff --git a/public/components/trace_analytics/components/traces/__tests__/flyout_list_item.test.tsx b/public/components/trace_analytics/components/traces/__tests__/flyout_list_item.test.tsx
new file mode 100644
index 0000000000..130d694583
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/flyout_list_item.test.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '@testing-library/react';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { FlyoutListItem } from '../flyout_list_item';
+
+describe('<FlyoutListItem /> spec', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders the component', () => {
+    const addSpanFilter = jest.fn();
+    const utils = render(
+      <FlyoutListItem title="Span ID" description="test-span-id" addSpanFilter={addSpanFilter} />
+    );
+    expect(utils.container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders the component', () => {
+    const addSpanFilter = jest.fn();
+    const utils = render(
+      <FlyoutListItem title="Span ID" description="test-span-id" addSpanFilter={addSpanFilter} />
+    );
+  });
+});
diff --git a/public/components/trace_analytics/components/traces/__tests__/service_breakdown_panel.test.tsx b/public/components/trace_analytics/components/traces/__tests__/service_breakdown_panel.test.tsx
new file mode 100644
index 0000000000..82fb9257ab
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/service_breakdown_panel.test.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { ServiceBreakdownPanel } from '../service_breakdown_panel';
+
+describe('Service breakdown panel component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty service breakdown panel', () => {
+    const wrapper = mount(<ServiceBreakdownPanel data={[]} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders service breakdown panel', () => {
+    const data = [
+      {
+        values: [100],
+        labels: ['inventory'],
+        marker: { colors: ['#7492e7'] },
+        type: 'pie',
+        textinfo: 'none',
+        hovertemplate: '%{label}<br>%{value:.2f}%<extra></extra>',
+      },
+    ] as Plotly.Data[];
+    const wrapper = mount(<ServiceBreakdownPanel data={data} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/traces/__tests__/span_detail_flyout.test.tsx b/public/components/trace_analytics/components/traces/__tests__/span_detail_flyout.test.tsx
new file mode 100644
index 0000000000..58935b22f5
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/span_detail_flyout.test.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { HttpResponse } from '../../../../../../../../src/core/public';
+import { TEST_SPAN_RESPONSE } from '../../../../../../test/constants';
+import httpClientMock from '../../../../../../test/__mocks__/httpClientMock';
+import { SpanDetailFlyout } from '../span_detail_flyout';
+
+describe('<SpanDetailFlyout /> spec', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders the empty component', async () => {
+    httpClientMock.post = jest.fn(() =>
+      Promise.resolve(({ hits: { hits: [], total: { value: 0 } } } as unknown) as HttpResponse)
+    );
+    const closeFlyout = jest.fn();
+    const addSpanFilter = jest.fn();
+    const utils = await mount(
+      <SpanDetailFlyout
+        http={httpClientMock}
+        spanId="test"
+        isFlyoutVisible={true}
+        closeFlyout={closeFlyout}
+        addSpanFilter={addSpanFilter}
+      />
+    );
+    utils.update();
+    await waitFor(() => {
+      expect(utils).toMatchSnapshot();
+    });
+  });
+
+  it('renders the component with data', async () => {
+    httpClientMock.post = jest.fn(() =>
+      Promise.resolve((TEST_SPAN_RESPONSE as unknown) as HttpResponse)
+    );
+    let container = document.createElement('div');
+    const closeFlyout = jest.fn();
+    const addSpanFilter = jest.fn();
+    await act(() => {
+      ReactDOM.render(
+        <SpanDetailFlyout
+          http={httpClientMock}
+          spanId="test"
+          isFlyoutVisible={true}
+          closeFlyout={closeFlyout}
+          addSpanFilter={addSpanFilter}
+        />,
+        container
+      );
+    });
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx b/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx
new file mode 100644
index 0000000000..c652224bb7
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/span_detail_panel.test.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { SpanDetailPanel } from '../span_detail_panel';
+import { BarOrientation } from '../../../../../../common/constants/shared';
+
+describe('Service breakdown panel component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders service breakdown panel', () => {
+    const data = {
+      gantt: [
+        {
+          x: [0],
+          y: ['inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2'],
+          marker: { color: 'rgba(0, 0, 0, 0)' },
+          width: 0.4,
+          type: 'bar',
+          orientation: BarOrientation.horizontal,
+          hoverinfo: 'none',
+          showlegend: false,
+        },
+        {
+          x: [19.91],
+          y: ['inventory <br>HTTP GET 4dec6080-61af-11eb-aee3-ef2f84ffa4a2'],
+          text: ['Error'],
+          textfont: { color: ['#c14125'] },
+          textposition: 'outside',
+          marker: { color: '#7492e7' },
+          width: 0.4,
+          type: 'bar',
+          orientation: BarOrientation.horizontal,
+          hovertemplate: '%{x}<extra></extra>',
+        },
+      ] as Plotly.Data[],
+      table: [
+        {
+          service_name: 'inventory',
+          span_id: '32c641131b569afa',
+          latency: 19.91,
+          vs_benchmark: 0,
+          error: 'Error',
+          start_time: '2020-11-10T17:55:45.219652629Z',
+          end_time: '2020-11-10T17:55:45.239564396Z',
+        },
+      ],
+      ganttMaxX: 19.91,
+    };
+    const wrapper = mount(<SpanDetailPanel data={data} setData={jest.fn()} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/traces/__tests__/span_detail_table.test.tsx b/public/components/trace_analytics/components/traces/__tests__/span_detail_table.test.tsx
new file mode 100644
index 0000000000..59837df0ee
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/span_detail_table.test.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { waitFor } from '@testing-library/react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { HttpResponse } from '../../../../../../../../src/core/public';
+import { TEST_SPAN_RESPONSE } from '../../../../../../test/constants';
+import httpClientMock from '../../../../../../test/__mocks__/httpClientMock';
+import { SpanDetailTable } from '../span_detail_table';
+
+describe('<SpanDetailTable /> spec', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders the empty component', async () => {
+    httpClientMock.post = jest.fn(() =>
+      Promise.resolve(({ hits: { hits: [], total: { value: 0 } } } as unknown) as HttpResponse)
+    );
+    const utils = await mount(
+      <SpanDetailTable
+        http={httpClientMock}
+        hiddenColumns={['traceId', 'traceGroup']}
+        DSL={{}}
+        openFlyout={() => {}}
+      />
+    );
+    utils.update();
+    await waitFor(() => {
+      expect(utils).toMatchSnapshot();
+    });
+  });
+
+  it('renders the component with data', async () => {
+    const setCurrentSpan = jest.fn();
+    httpClientMock.post = jest.fn(() =>
+      Promise.resolve((TEST_SPAN_RESPONSE as unknown) as HttpResponse)
+    );
+    let container = document.createElement('div');
+    await act(() => {
+      ReactDOM.render(
+        <SpanDetailTable
+          http={httpClientMock}
+          hiddenColumns={['traceId', 'traceGroup']}
+          DSL={{}}
+          openFlyout={(spanId: string) => setCurrentSpan(spanId)}
+        />,
+        container
+      );
+    });
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/traces/__tests__/trace_view.test.tsx b/public/components/trace_analytics/components/traces/__tests__/trace_view.test.tsx
new file mode 100644
index 0000000000..3d334e25c6
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/trace_view.test.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { TraceView } from '..';
+import { coreStartMock } from '../../../../../../test/__mocks__/coreMocks';
+
+describe('Trace view component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders trace view', () => {
+    const core = coreStartMock;
+    const wrapper = shallow(
+      <TraceView
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        traceId="test"
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx b/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx
new file mode 100644
index 0000000000..a48f54f0c9
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/traces.test.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { Traces } from '..';
+import { coreStartMock } from '../../../../../../test/__mocks__/coreMocks';
+
+describe('Traces component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty traces page', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const traceIdColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/traces/${encodeURIComponent(item)}`);
+    const childBreadcrumbs = [
+      {
+        text: 'Trace analytics',
+        href: '#/trace_analytics/home',
+      },
+      {
+        text: 'Traces',
+        href: '#/trace_analytics/traces',
+      },
+    ];
+    const wrapper = mount(
+      <Traces
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        childBreadcrumbs={childBreadcrumbs}
+        traceIdColumnAction={traceIdColumnAction}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        appConfigs={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={false}
+        page="traces"
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('renders traces page', () => {
+    const core = coreStartMock;
+    const setQuery = jest.fn();
+    const setFilters = jest.fn();
+    const setStartTime = jest.fn();
+    const setEndTime = jest.fn();
+    const traceIdColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/traces/${encodeURIComponent(item)}`);
+    const childBreadcrumbs = [
+      {
+        text: 'Trace analytics',
+        href: '#/trace_analytics/home',
+      },
+      {
+        text: 'Traces',
+        href: '#/trace_analytics/traces',
+      },
+    ];
+    const wrapper = mount(
+      <Traces
+        http={core.http}
+        chrome={core.chrome}
+        parentBreadcrumbs={[{ text: 'test', href: 'test#/' }]}
+        childBreadcrumbs={childBreadcrumbs}
+        traceIdColumnAction={traceIdColumnAction}
+        query=""
+        setQuery={setQuery}
+        filters={[]}
+        appConfigs={[]}
+        setFilters={setFilters}
+        startTime="now-5m"
+        setStartTime={setStartTime}
+        endTime="now"
+        setEndTime={setEndTime}
+        indicesExist={true}
+        page="traces"
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/public/components/trace_analytics/components/traces/__tests__/traces_table.test.tsx b/public/components/trace_analytics/components/traces/__tests__/traces_table.test.tsx
new file mode 100644
index 0000000000..c57fd4f78f
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/__tests__/traces_table.test.tsx
@@ -0,0 +1,70 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { TracesTable } from '../traces_table';
+
+describe('Traces table component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('renders empty traces table message', () => {
+    const refresh = jest.fn();
+    const traceIdColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/traces/${encodeURIComponent(item)}`);
+    const noIndicesTable = mount(
+      <TracesTable
+        items={[]}
+        refresh={refresh}
+        indicesExist={false}
+        loading={false}
+        traceIdColumnAction={traceIdColumnAction}
+      />
+    );
+    expect(noIndicesTable).toMatchSnapshot();
+
+    const emptyTable = mount(
+      <TracesTable
+        items={[]}
+        refresh={refresh}
+        indicesExist={true}
+        loading={false}
+        traceIdColumnAction={traceIdColumnAction}
+      />
+    );
+    expect(emptyTable).toMatchSnapshot();
+  });
+
+  it('renders traces table', () => {
+    jest.mock('../../../../../../common/constants/trace_analytics', () => ({ TRACES_MAX_NUM: 1 }));
+    const tableItems = [
+      {
+        trace_id: '00079a615e31e61766fcb20b557051c1',
+        trace_group: 'HTTP GET',
+        latency: 19.91,
+        last_updated: '11/10/2020 09:55:45',
+        error_count: 'Yes',
+        percentile_in_trace_group: 30,
+        actions: '#',
+      },
+    ];
+    const traceIdColumnAction = (item: any) =>
+      location.assign(`#/trace_analytics/traces/${encodeURIComponent(item)}`);
+    const refresh = jest.fn();
+    const wrapper = mount(
+      <TracesTable
+        items={tableItems}
+        refresh={refresh}
+        indicesExist={true}
+        loading={false}
+        traceIdColumnAction={traceIdColumnAction}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+    wrapper.find('button[data-test-subj="tableHeaderSortButton"]').at(0).simulate('click');
+  });
+});
diff --git a/public/components/trace_analytics/components/traces/flyout_list_item.tsx b/public/components/trace_analytics/components/traces/flyout_list_item.tsx
new file mode 100644
index 0000000000..22111c8e5d
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/flyout_list_item.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButtonIcon,
+  EuiDescriptionList,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
+  EuiToolTip,
+} from '@elastic/eui';
+import React, { useState } from 'react';
+
+interface FlyoutListItemProps {
+  title: React.ReactNode;
+  description: React.ReactNode;
+  addSpanFilter: () => void;
+}
+
+export function FlyoutListItem(props: FlyoutListItemProps) {
+  const [hover, setHover] = useState(false);
+
+  const descriptionComponent =
+    props.description !== '-' ? (
+      <EuiFlexGroup gutterSize="none">
+        <EuiFlexItem>
+          <EuiText size="s" style={{ wordBreak: 'break-all', wordWrap: 'break-word', whiteSpace: 'pre-line' }}>
+            <b>{props.description}</b>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {hover && (
+            <EuiToolTip position="top" content="Filter spans on this value">
+              <EuiButtonIcon
+                aria-label="span-flyout-filter-icon"
+                iconType="filter"
+                onClick={props.addSpanFilter}
+                style={{ margin: -5 }}
+              />
+            </EuiToolTip>
+          )}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ) : (
+      <EuiText
+        size="s"
+        style={{ wordBreak: 'break-all', wordWrap: 'break-word', whiteSpace: 'pre-line' }}
+      >
+        <b>{props.description}</b>
+      </EuiText>
+    );
+  return (
+    <>
+      <div
+        onMouseOver={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        onFocus={() => setHover(true)}
+      >
+        <EuiDescriptionList
+          data-test-subj={`${props.title}DescriptionList`}
+          listItems={[
+            {
+              title: (
+                <EuiText
+                  size="s"
+                  color="subdued"
+                  style={{ wordBreak: 'break-all', wordWrap: 'break-word' }}
+                >
+                  {props.title}
+                </EuiText>
+              ),
+              description: descriptionComponent,
+            },
+          ]}
+          type="column"
+          align="center"
+          compressed
+        />
+      </div>
+      <EuiSpacer size="s" />
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/index.ts b/public/components/trace_analytics/components/traces/index.ts
new file mode 100644
index 0000000000..534ae2e036
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { Traces } from './traces';
+export { TraceView } from './trace_view';
diff --git a/public/components/trace_analytics/components/traces/service_breakdown_panel.tsx b/public/components/trace_analytics/components/traces/service_breakdown_panel.tsx
new file mode 100644
index 0000000000..71987208d0
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/service_breakdown_panel.tsx
@@ -0,0 +1,84 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHealth,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useMemo } from 'react';
+import { Plt } from '../../../visualizations/plotly/plot';
+import { PanelTitle } from '../common/helper_functions';
+
+export function ServiceBreakdownPanel(props: { data: Plotly.Data[] }) {
+  const layout = useMemo(
+    () =>
+      ({
+        height: 200,
+        width: 200,
+        showlegend: false,
+        margin: {
+          l: 5,
+          r: 5,
+          b: 5,
+          t: 5,
+        },
+      } as Partial<Plotly.Layout>),
+    [props.data]
+  );
+
+  const renderStats = () => {
+    return props.data.length > 0 ? (
+      <EuiFlexGroup responsive={false} style={{ maxHeight: 260, overflowY: 'auto' }}>
+        <EuiFlexItem>
+          <EuiFlexGroup direction="column" alignItems="flexStart" gutterSize="m" responsive={false}>
+            {props.data[0].marker.colors.map((color, i) => (
+              <EuiFlexItem key={`label-${i}`}>
+                <EuiHealth color={color}>
+                  <div style={{ whiteSpace: 'nowrap' }}>{props.data[0].labels[i]}</div>
+                </EuiHealth>
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem />
+        <EuiFlexItem />
+        <EuiFlexItem>
+          <EuiFlexGroup direction="column" alignItems="flexEnd" gutterSize="m" responsive={false}>
+            {props.data[0].values.map((value, i) => (
+              <EuiFlexItem key={`value-${i}`}>
+                <EuiText size="s">{_.round(value, 2)}%</EuiText>
+              </EuiFlexItem>
+            ))}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ) : null;
+  };
+
+  const stats = useMemo(() => renderStats(), [props.data]);
+
+  return (
+    <>
+      <EuiPanel>
+        <PanelTitle title="Time spent by service" />
+        <EuiHorizontalRule margin="m" />
+        <EuiFlexGroup direction="column" alignItems="center">
+          <EuiFlexItem>
+            {props.data?.length > 0 ? <Plt data={props.data} layout={layout} /> : null}
+          </EuiFlexItem>
+          <EuiSpacer />
+          <EuiFlexItem>{stats}</EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer />
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/span_detail_flyout.tsx b/public/components/trace_analytics/components/traces/span_detail_flyout.tsx
new file mode 100644
index 0000000000..a49432d615
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/span_detail_flyout.tsx
@@ -0,0 +1,204 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiButtonIcon,
+  EuiCodeBlock,
+  EuiCopy,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiHorizontalRule,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import _ from 'lodash';
+import moment from 'moment';
+import React, { useEffect, useState } from 'react';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../../common/constants/trace_analytics';
+import { handleSpansFlyoutRequest } from '../../requests/traces_request_handler';
+import { nanoToMilliSec } from '../common/helper_functions';
+import { FlyoutListItem } from './flyout_list_item';
+
+export function SpanDetailFlyout(props: {
+  http: HttpSetup;
+  spanId: string;
+  isFlyoutVisible: boolean;
+  closeFlyout: () => void;
+  addSpanFilter: (field: string, value: any) => void;
+}) {
+  const [span, setSpan] = useState<any>({});
+
+  useEffect(() => {
+    handleSpansFlyoutRequest(props.http, props.spanId, setSpan);
+  }, [props.spanId]);
+
+  const getListItem = (field: string, title: React.ReactNode, description: React.ReactNode) => {
+    return (
+      <FlyoutListItem
+        title={title}
+        description={description}
+        key={`list-item-${title}`}
+        addSpanFilter={() => props.addSpanFilter(field, span[field])}
+      />
+    );
+  };
+
+  const isEmpty = (value) => {
+    return (
+      value == null ||
+      (value.hasOwnProperty('length') && value.length === 0) ||
+      (value.constructor === Object && Object.keys(value).length === 0)
+    );
+  };
+
+  const renderContent = () => {
+    if (!span || _.isEmpty(span)) return '-';
+    const overviewList = [
+      getListItem(
+        'spanId',
+        'Span ID',
+        span.spanId ? (
+          <EuiFlexGroup gutterSize="xs" style={{ marginTop: -4, marginBottom: -4 }}>
+            <EuiFlexItem grow={false}>
+              <EuiCopy textToCopy={span.spanId}>
+                {(copy) => (
+                  <EuiButtonIcon aria-label="copy-button" onClick={copy} iconType="copyClipboard" />
+                )}
+              </EuiCopy>
+            </EuiFlexItem>
+            <EuiFlexItem>{span.spanId}</EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          '-'
+        )
+      ),
+      getListItem(
+        'parentSpanId',
+        'Parent span ID',
+        span.parentSpanId ? (
+          <EuiFlexGroup gutterSize="xs" style={{ marginTop: -4, marginBottom: -4 }}>
+            <EuiFlexItem grow={false}>
+              <EuiCopy textToCopy={span.parentSpanId}>
+                {(copy) => (
+                  <EuiButtonIcon aria-label="copy-button" onClick={copy} iconType="copyClipboard" />
+                )}
+              </EuiCopy>
+            </EuiFlexItem>
+            <EuiFlexItem>{span.parentSpanId}</EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          '-'
+        )
+      ),
+      getListItem('serviceName', 'Service', span.serviceName || '-'),
+      getListItem('name', 'Operation', span.name || '-'),
+      getListItem(
+        'durationInNanos',
+        'Duration',
+        `${_.round(nanoToMilliSec(Math.max(0, span.durationInNanos)), 2)} ms`
+      ),
+      getListItem(
+        'startTime',
+        'Start time',
+        moment(span.startTime).format(TRACE_ANALYTICS_DATE_FORMAT)
+      ),
+      getListItem('endTime', 'End time', moment(span.endTime).format(TRACE_ANALYTICS_DATE_FORMAT)),
+      getListItem(
+        'status.code',
+        'Errors',
+        span['status.code'] === 2 ? (
+          <EuiText color="danger" size="s" style={{fontWeight: 700}}>
+            Yes
+          </EuiText>
+        ) : (
+          'No'
+        )
+      ),
+    ];
+    const ignoredKeys = new Set([
+      'spanId',
+      'parentSpanId',
+      'serviceName',
+      'name',
+      'durationInNanos',
+      'startTime',
+      'endTime',
+      'status.code',
+      'events',
+      'traceId',
+      'traceGroup',
+      'traceGroupFields.endTime',
+      'traceGroupFields.statusCode',
+      'traceGroupFields.durationInNanos',
+    ]);
+    const attributesList = Object.keys(span)
+      .filter((key) => !ignoredKeys.has(key))
+      .sort((keyA, keyB) => {
+        const isANull = isEmpty(span[keyA]);
+        const isBNull = isEmpty(span[keyB]);
+        if ((isANull && isBNull) || (!isANull && !isBNull)) return keyA < keyB ? -1 : 1;
+        if (isANull) return 1;
+        return -1;
+      })
+      .map((key) => {
+        if (isEmpty(span[key])) return getListItem(key, key, '-');
+        let value = span[key];
+        if (typeof value === 'object') value = JSON.stringify(value);
+        return getListItem(key, key, value);
+      });
+
+    const eventsComponent = _.isEmpty(span['events']) ? null : (
+      <>
+        <EuiText size="m">
+          <span className="panel-title">Event</span>
+        </EuiText>
+        <EuiCodeBlock language="json" paddingSize="s" isCopyable overflowHeight={400}>
+          {JSON.stringify(span['events'], null, 2)}
+        </EuiCodeBlock>
+        <EuiSpacer size="xs" />
+        <EuiHorizontalRule margin="s" />
+      </>
+    );
+
+    return (
+      <>
+        <EuiText size="m">
+          <span className="panel-title">Overview</span>
+        </EuiText>
+        <EuiSpacer size="s" />
+        {overviewList}
+        <EuiSpacer size="xs" />
+        <EuiHorizontalRule margin="s" />
+        {eventsComponent}
+        <EuiText size="m">
+          <span className="panel-title">Span attributes</span>
+          {attributesList.length === 0 || attributesList.length ? (
+            <span className="panel-title-count">{` (${attributesList.length})`}</span>
+          ) : null}
+        </EuiText>
+        <EuiSpacer size="s" />
+        {attributesList}
+      </>
+    );
+  };
+
+  return (
+    <>
+      <EuiFlyout data-test-subj="spanDetailFlyout" onClose={props.closeFlyout} size="s">
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle>
+            <h2>Span detail</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>{renderContent()}</EuiFlyoutBody>
+      </EuiFlyout>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/span_detail_panel.tsx b/public/components/trace_analytics/components/traces/span_detail_panel.tsx
new file mode 100644
index 0000000000..466a12b428
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/span_detail_panel.tsx
@@ -0,0 +1,271 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiBadge,
+  EuiButtonGroup,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPanel,
+  EuiSpacer,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useMemo, useState } from 'react';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import { Plt } from '../../../visualizations/plotly/plot';
+import { handleSpansGanttRequest } from '../../requests/traces_request_handler';
+import { PanelTitle } from '../common/helper_functions';
+import { SpanDetailFlyout } from './span_detail_flyout';
+import { SpanDetailTable } from './span_detail_table';
+
+export function SpanDetailPanel(props: {
+  http: HttpSetup;
+  traceId: string;
+  colorMap: any;
+  page?: string;
+  openSpanFlyout?: any;
+  data?: { gantt: any[]; table: any[]; ganttMaxX: number };
+  setData?: (data: { gantt: any[]; table: any[]; ganttMaxX: number }) => void;
+}) {
+  const storedFilters = sessionStorage.getItem('TraceAnalyticsSpanFilters');
+  const fromApp = props.page === 'app';
+  const [spanFilters, setSpanFilters] = useState<Array<{ field: string; value: any }>>(
+    storedFilters ? JSON.parse(storedFilters) : []
+  );
+  const [DSL, setDSL] = useState<any>({});
+  let data: { gantt: any[]; table: any[]; ganttMaxX: number },
+    setData: (data: { gantt: any[]; table: any[]; ganttMaxX: number }) => void;
+  if (props.data && props.setData) {
+    [data, setData] = [props.data, props.setData];
+  } else {
+    [data, setData] = useState<{ gantt: any[]; table: any[]; ganttMaxX: number }>({
+      gantt: [],
+      table: [],
+      ganttMaxX: 0,
+    });
+  }
+
+  const setSpanFiltersWithStorage = (newFilters: Array<{ field: string; value: any }>) => {
+    setSpanFilters(newFilters);
+    sessionStorage.setItem('TraceAnalyticsSpanFilters', JSON.stringify(newFilters));
+  };
+
+  const addSpanFilter = (field: string, value: any) => {
+    const newFilters = [...spanFilters];
+    const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
+    if (index === -1) {
+      newFilters.push({ field, value });
+    } else {
+      newFilters.splice(index, 1, { field, value });
+    }
+    setSpanFiltersWithStorage(newFilters);
+  };
+
+  const removeSpanFilter = (field: string) => {
+    const newFilters = [...spanFilters];
+    const index = newFilters.findIndex(({ field: filterField }) => field === filterField);
+    if (index !== -1) {
+      newFilters.splice(index, 1);
+      setSpanFiltersWithStorage(newFilters);
+    }
+  };
+
+  const refresh = _.debounce(() => {
+    if (_.isEmpty(props.colorMap)) return;
+    const refreshDSL = spanFiltersToDSL();
+    setDSL(refreshDSL);
+    handleSpansGanttRequest(props.traceId, props.http, setData, props.colorMap, refreshDSL);
+  }, 150);
+
+  const spanFiltersToDSL = () => {
+    const spanDSL: any = {
+      query: {
+        bool: {
+          must: [
+            {
+              term: {
+                traceId: props.traceId,
+              },
+            },
+          ],
+          filter: [],
+          should: [],
+          must_not: [],
+        },
+      },
+    };
+    spanFilters.map(({ field, value }) => {
+      if (value != null) {
+        spanDSL.query.bool.must.push({
+          term: {
+            [field]: value,
+          },
+        });
+      }
+    });
+    return spanDSL;
+  };
+
+  useEffect(() => {
+    refresh();
+  }, [props.colorMap, spanFilters]);
+
+  const getSpanDetailLayout = (plotTraces: Plotly.Data[], maxX: number): Partial<Plotly.Layout> => {
+    // get unique labels from traces
+    const yLabels = plotTraces
+      .map((d) => d.y[0])
+      .filter((label, i, self) => self.indexOf(label) === i);
+    // remove uuid when displaying y-ticks
+    const yTexts = yLabels.map((label) => label.substring(0, label.length - 36));
+
+    return {
+      height: 25 * plotTraces.length + 60,
+      width: 800,
+      margin: {
+        l: 260,
+        r: 5,
+        b: 30,
+        t: 30,
+      },
+      xaxis: {
+        ticksuffix: ' ms',
+        side: 'top',
+        color: '#91989c',
+        showline: true,
+        range: [0, maxX * 1.2],
+      },
+      yaxis: {
+        showgrid: false,
+        tickvals: yLabels,
+        ticktext: yTexts,
+      },
+    };
+  };
+
+  const layout = useMemo(
+    () => getSpanDetailLayout(data.gantt, data.ganttMaxX),
+    [data.gantt, data.ganttMaxX]
+  );
+
+  const [currentSpan, setCurrentSpan] = useState('');
+
+  const onClick = (event: any) => {
+    if (!event?.points) return;
+    const point = event.points[0];
+    if (fromApp) {
+      props.openSpanFlyout(point.data.spanId);
+    } else {
+      setCurrentSpan(point.data.spanId);
+    }
+  };
+
+  const renderFilters = useMemo(() => {
+    return spanFilters.map(({ field, value }) => (
+      <EuiFlexItem grow={false} key={`span-filter-badge-${field}`}>
+        <EuiBadge
+          iconType="cross"
+          iconSide="right"
+          iconOnClick={() => removeSpanFilter(field)}
+          iconOnClickAriaLabel="remove current filter"
+        >
+          {`${field}: ${value}`}
+        </EuiBadge>
+      </EuiFlexItem>
+    ));
+  }, [spanFilters]);
+
+  const onHover = () => {
+    const dragLayer = document.getElementsByClassName('nsewdrag')?.[0];
+    dragLayer.style.cursor = 'pointer';
+  };
+
+  const onUnhover = () => {
+    const dragLayer = document.getElementsByClassName('nsewdrag')?.[0];
+    dragLayer.style.cursor = '';
+  };
+
+  const toggleOptions = [
+    {
+      id: 'timeline',
+      label: 'Timeline',
+    },
+    {
+      id: 'span_list',
+      label: 'Span list',
+    },
+  ];
+  const [toggleIdSelected, setToggleIdSelected] = useState(toggleOptions[0].id);
+
+  const spanDetailTable = useMemo(
+    () => (
+      <SpanDetailTable
+        http={props.http}
+        hiddenColumns={['traceId', 'traceGroup']}
+        DSL={DSL}
+        openFlyout={(spanId: string) => {
+          if (fromApp) {
+            props.openSpanFlyout(spanId);
+          } else {
+            setCurrentSpan(spanId);
+          }
+        }}
+      />
+    ),
+    [DSL, setCurrentSpan]
+  );
+
+  return (
+    <>
+      <EuiPanel>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <PanelTitle title="Spans" totalItems={data.gantt.length / 2} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonGroup
+              legend="Select view of spans"
+              options={toggleOptions}
+              idSelected={toggleIdSelected}
+              onChange={(id) => setToggleIdSelected(id)}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        {spanFilters.length > 0 && (
+          <>
+            <EuiSpacer size="s" />
+            <EuiFlexGroup gutterSize="s" wrap>
+              {renderFilters}
+            </EuiFlexGroup>
+          </>
+        )}
+        <EuiHorizontalRule margin="m" />
+        <div style={{ overflowY: 'auto', maxHeight: 500 }}>
+          {toggleIdSelected === 'timeline' ? (
+            <Plt
+              data={data.gantt}
+              layout={layout}
+              onClickHandler={onClick}
+              onHoverHandler={onHover}
+              onUnhoverHandler={onUnhover}
+            />
+          ) : (
+            spanDetailTable
+          )}
+        </div>
+      </EuiPanel>
+      {!!currentSpan && (
+        <SpanDetailFlyout
+          http={props.http}
+          spanId={currentSpan}
+          isFlyoutVisible={!!currentSpan}
+          closeFlyout={() => setCurrentSpan('')}
+          addSpanFilter={addSpanFilter}
+        />
+      )}
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/span_detail_table.tsx b/public/components/trace_analytics/components/traces/span_detail_table.tsx
new file mode 100644
index 0000000000..32108b1c92
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/span_detail_table.tsx
@@ -0,0 +1,174 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import { EuiDataGrid, EuiDataGridColumn, EuiLink, EuiText } from '@elastic/eui';
+import _ from 'lodash';
+import moment from 'moment';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { HttpSetup } from '../../../../../../../src/core/public';
+import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../../common/constants/trace_analytics';
+import { handleSpansRequest } from '../../requests/traces_request_handler';
+import { nanoToMilliSec, NoMatchMessage } from '../common/helper_functions';
+
+interface SpanDetailTableProps {
+  http: HttpSetup;
+  hiddenColumns: string[];
+  openFlyout: (spanId: string) => void;
+  DSL?: any;
+  setTotal?: (total: number) => void;
+}
+
+export interface SpanSearchParams {
+  from: number;
+  size: number;
+  sortingColumns: Array<{
+    [id: string]: 'asc' | 'desc';
+  }>;
+}
+
+export function SpanDetailTable(props: SpanDetailTableProps) {
+  const [tableParams, setTableParams] = useState({
+    size: 10,
+    page: 0,
+    sortingColumns: [] as Array<{
+      id: string;
+      direction: 'asc' | 'desc';
+    }>,
+  });
+  const [items, setItems] = useState<any>([]);
+  const [total, setTotal] = useState(0);
+
+  useEffect(() => {
+    const spanSearchParams: SpanSearchParams = {
+      from: tableParams.page * tableParams.size,
+      size: tableParams.size,
+      sortingColumns: tableParams.sortingColumns.map(({ id, direction }) => ({ [id]: direction })),
+    };
+    handleSpansRequest(props.http, setItems, setTotal, spanSearchParams, props.DSL);
+  }, [tableParams, props.DSL]);
+
+  useEffect(() => {
+    if (props.setTotal) props.setTotal(total);
+  }, [total]);
+
+  const columns: EuiDataGridColumn[] = [
+    {
+      id: 'spanId',
+      display: 'Span ID',
+    },
+    {
+      id: 'parentSpanId',
+      display: 'Parent span ID',
+    },
+    {
+      id: 'traceId',
+      display: 'Trace ID',
+    },
+    {
+      id: 'traceGroup',
+      display: 'Trace group',
+    },
+    {
+      id: 'serviceName',
+      display: 'Service',
+    },
+    {
+      id: 'name',
+      display: 'Operation',
+    },
+    {
+      id: 'durationInNanos',
+      display: 'Duration',
+    },
+    {
+      id: 'startTime',
+      display: 'Start time',
+    },
+    {
+      id: 'endTime',
+      display: 'End time',
+    },
+    {
+      id: 'status.code',
+      display: 'Errors',
+    },
+  ];
+
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns
+      .filter(({ id }) => props.hiddenColumns.findIndex((column) => column === id) === -1)
+      .map(({ id }) => id)
+  );
+
+  const renderCellValue = useMemo(() => {
+    return ({ rowIndex, columnId }: { rowIndex: number; columnId: string }) => {
+      const adjustedRowIndex = rowIndex - tableParams.page * tableParams.size;
+      if (!items.hasOwnProperty(adjustedRowIndex)) return '-';
+      const value = items[adjustedRowIndex][columnId];
+      if (value == null || value === '') return '-';
+      switch (columnId) {
+        case 'spanId':
+          return <EuiLink onClick={() => props.openFlyout(value)}>{value}</EuiLink>;
+        case 'durationInNanos':
+          return `${_.round(nanoToMilliSec(Math.max(0, value)), 2)} ms`;
+        case 'startTime':
+        case 'endTime':
+          return moment(value).format(TRACE_ANALYTICS_DATE_FORMAT);
+        case 'status.code':
+          return value === 2 ? (
+            <EuiText color="danger" size="s">
+              Yes
+            </EuiText>
+          ) : (
+            'No'
+          );
+
+        default:
+          return value;
+      }
+    };
+  }, [items, tableParams.page, tableParams.size]);
+
+  const onSort = useCallback(
+    (sortingColumns) => {
+      setTableParams({
+        ...tableParams,
+        sortingColumns,
+      });
+    },
+    [setTableParams]
+  );
+
+  const onChangeItemsPerPage = useCallback((size) => setTableParams({ ...tableParams, size }), [
+    tableParams,
+    setTableParams,
+  ]);
+  const onChangePage = useCallback((page) => setTableParams({ ...tableParams, page }), [
+    tableParams,
+    setTableParams,
+  ]);
+
+  return (
+    <>
+      <EuiDataGrid
+        aria-labelledby="span-detail-data-grid"
+        columns={columns}
+        columnVisibility={{ visibleColumns, setVisibleColumns }}
+        rowCount={total}
+        renderCellValue={renderCellValue}
+        sorting={{ columns: tableParams.sortingColumns, onSort }}
+        pagination={{
+          pageIndex: tableParams.page,
+          pageSize: tableParams.size,
+          pageSizeOptions: [10, 50, 100],
+          onChangeItemsPerPage,
+          onChangePage,
+        }}
+      />
+      {total === 0 && <NoMatchMessage size="xl" />}
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx
new file mode 100644
index 0000000000..e839a87ecf
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -0,0 +1,260 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiButtonIcon,
+  EuiCodeBlock,
+  EuiCopy,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiPage,
+  EuiPageBody,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useEffect, useState } from 'react';
+import { TraceAnalyticsCoreDeps } from '../../home';
+import { handleServiceMapRequest } from '../../requests/services_request_handler';
+import {
+  handlePayloadRequest,
+  handleServicesPieChartRequest,
+  handleTraceViewRequest,
+} from '../../requests/traces_request_handler';
+import { filtersToDsl, PanelTitle } from '../common/helper_functions';
+import { ServiceMap, ServiceObject } from '../common/plots/service_map';
+import { ServiceBreakdownPanel } from './service_breakdown_panel';
+import { SpanDetailPanel } from './span_detail_panel';
+
+interface TraceViewProps extends TraceAnalyticsCoreDeps {
+  traceId: string;
+}
+
+export function TraceView(props: TraceViewProps) {
+  const page = 'traceView';
+  const renderTitle = (traceId: string) => {
+    return (
+      <>
+        <EuiFlexItem>
+          <EuiTitle size="l">
+            <h2 className="overview-content">{traceId}</h2>
+          </EuiTitle>
+        </EuiFlexItem>
+      </>
+    );
+  };
+
+  const renderOverview = (fields: any) => {
+    return (
+      <EuiPanel>
+        <PanelTitle title="Overview" />
+        <EuiHorizontalRule margin="m" />
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiFlexGroup direction="column">
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Trace ID</EuiText>
+                {fields.trace_id && (
+                  <EuiFlexGroup gutterSize="s" alignItems="center">
+                    <EuiFlexItem grow={false}>
+                      <EuiText size="s" className="overview-content">
+                        {fields.trace_id}
+                      </EuiText>
+                    </EuiFlexItem>
+                    <EuiFlexItem grow={false}>
+                      <EuiCopy textToCopy={fields.trace_id}>
+                        {(copy) => (
+                          <EuiButtonIcon
+                            aria-label="Copy trace id"
+                            iconType="copyClipboard"
+                            onClick={copy}
+                          >
+                            Click to copy
+                          </EuiButtonIcon>
+                        )}
+                      </EuiCopy>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                )}
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Trace group name</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {fields.trace_group || '-'}
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFlexGroup direction="column">
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Latency</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {fields.latency}
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Last updated</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {fields.last_updated}
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFlexGroup direction="column">
+              <EuiFlexItem grow={false}>
+                <EuiText className="overview-title">Errors</EuiText>
+                <EuiText size="s" className="overview-content">
+                  {fields.error_count == null ? (
+                    '-'
+                  ) : fields.error_count > 0 ? (
+                    <EuiText color="danger" size="s" style={{ fontWeight: 430 }}>
+                      Yes
+                    </EuiText>
+                  ) : (
+                    'No'
+                  )}
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    );
+  };
+
+  const [fields, setFields] = useState({});
+  const [serviceBreakdownData, setServiceBreakdownData] = useState([]);
+  const [payloadData, setPayloadData] = useState('');
+  const [colorMap, setColorMap] = useState({});
+  const [ganttData, setGanttData] = useState<{ gantt: any[]; table: any[]; ganttMaxX: number }>({
+    gantt: [],
+    table: [],
+    ganttMaxX: 0,
+  });
+  const [serviceMap, setServiceMap] = useState<ServiceObject>({});
+  const [traceFilteredServiceMap, setTraceFilteredServiceMap] = useState<ServiceObject>({});
+  const [serviceMapIdSelected, setServiceMapIdSelected] = useState<
+    'latency' | 'error_rate' | 'throughput'
+  >('latency');
+
+  const refresh = async () => {
+    const DSL = filtersToDsl([], '', 'now', 'now', page);
+    handleTraceViewRequest(props.traceId, props.http, fields, setFields);
+    handlePayloadRequest(props.traceId, props.http, payloadData, setPayloadData);
+    handleServicesPieChartRequest(props.traceId, props.http, setServiceBreakdownData, setColorMap);
+    handleServiceMapRequest(props.http, DSL, setServiceMap);
+  };
+
+  useEffect(() => {
+    if (!Object.keys(serviceMap).length || !ganttData.table.length) return;
+    const services: any = {};
+    ganttData.table.forEach((service: any) => {
+      if (!services[service.service_name]) {
+        services[service.service_name] = {
+          latency: 0,
+          errors: 0,
+          throughput: 0,
+        };
+      }
+      services[service.service_name].latency += service.latency;
+      if (service.error) services[service.service_name].errors++;
+      services[service.service_name].throughput++;
+    });
+    const filteredServiceMap: ServiceObject = {};
+    Object.entries(services).forEach(([serviceName, service]: [string, any]) => {
+      if (!serviceMap[serviceName]) return;
+      filteredServiceMap[serviceName] = serviceMap[serviceName];
+      filteredServiceMap[serviceName].latency = _.round(service.latency / service.throughput, 2);
+      filteredServiceMap[serviceName].error_rate = _.round(
+        (service.errors / service.throughput) * 100,
+        2
+      );
+      filteredServiceMap[serviceName].throughput = service.throughput;
+      filteredServiceMap[serviceName].destServices = filteredServiceMap[
+        serviceName
+      ].destServices.filter((destService) => services[destService]);
+    });
+    setTraceFilteredServiceMap(filteredServiceMap);
+  }, [serviceMap, ganttData]);
+
+  useEffect(() => {
+    props.chrome.setBreadcrumbs([
+      ...props.parentBreadcrumbs,
+      {
+        text: 'Trace analytics',
+        href: '#/trace_analytics/home',
+      },
+      {
+        text: 'Traces',
+        href: '#/trace_analytics/traces',
+      },
+      {
+        text: props.traceId,
+        href: `#/trace_analytics/traces/${encodeURIComponent(props.traceId)}`,
+      },
+    ]);
+    refresh();
+  }, []);
+
+  return (
+    <>
+      <EuiPage>
+        <EuiPageBody>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            {renderTitle(props.traceId)}
+          </EuiFlexGroup>
+          <EuiSpacer size="xl" />
+          {renderOverview(fields)}
+
+          <EuiSpacer />
+          <EuiFlexGroup>
+            <EuiFlexItem grow={3}>
+              <ServiceBreakdownPanel data={serviceBreakdownData} />
+            </EuiFlexItem>
+            <EuiFlexItem grow={7}>
+              <SpanDetailPanel
+                traceId={props.traceId}
+                http={props.http}
+                colorMap={colorMap}
+                data={ganttData}
+                setData={setGanttData}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer />
+
+          <EuiPanel>
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <PanelTitle title="Payload" />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <EuiHorizontalRule margin="m" />
+            {payloadData.length > 0 ? (
+              <EuiCodeBlock language="json" paddingSize="s" isCopyable overflowHeight={500}>
+                {payloadData}
+              </EuiCodeBlock>
+            ) : null}
+          </EuiPanel>
+          <EuiSpacer />
+
+          <ServiceMap
+            addFilter={undefined}
+            serviceMap={traceFilteredServiceMap}
+            idSelected={serviceMapIdSelected}
+            setIdSelected={setServiceMapIdSelected}
+            page={page}
+          />
+        </EuiPageBody>
+      </EuiPage>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/traces.tsx b/public/components/trace_analytics/components/traces/traces.tsx
new file mode 100644
index 0000000000..9fc2b262d6
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/traces.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiBreadcrumb, EuiTitle } from '@elastic/eui';
+import React from 'react';
+import { TraceAnalyticsComponentDeps } from '../../home';
+import { TracesContent } from './traces_content';
+
+export interface TracesProps extends TraceAnalyticsComponentDeps {
+  page: 'traces' | 'app';
+  childBreadcrumbs: EuiBreadcrumb[];
+  traceIdColumnAction: any;
+}
+
+export function Traces(props: TracesProps) {
+  return (
+    <>
+      <EuiTitle size="l">
+        <h2 style={{ fontWeight: 430 }}>Traces</h2>
+      </EuiTitle>
+      <TracesContent {...props} />
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/traces_content.tsx b/public/components/trace_analytics/components/traces/traces_content.tsx
new file mode 100644
index 0000000000..b71a243341
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/traces_content.tsx
@@ -0,0 +1,88 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import { EuiSpacer, PropertySort } from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+import { handleTracesRequest } from '../../requests/traces_request_handler';
+import { getValidFilterFields } from '../common/filters/filter_helpers';
+import { filtersToDsl } from '../common/helper_functions';
+import { SearchBar } from '../common/search_bar';
+import { TracesProps } from './traces';
+import { TracesTable } from './traces_table';
+
+export function TracesContent(props: TracesProps) {
+  const {
+    page,
+    http,
+    chrome,
+    query,
+    filters,
+    appConfigs,
+    startTime,
+    endTime,
+    indicesExist,
+    parentBreadcrumbs,
+    childBreadcrumbs,
+    traceIdColumnAction,
+    setQuery,
+    setFilters,
+    setStartTime,
+    setEndTime,
+  } = props;
+  const [tableItems, setTableItems] = useState([]);
+  const [redirect, setRedirect] = useState(true);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    chrome.setBreadcrumbs([...parentBreadcrumbs, ...childBreadcrumbs]);
+    const validFilters = getValidFilterFields('traces');
+    setFilters([
+      ...filters.map((filter) => ({
+        ...filter,
+        locked: validFilters.indexOf(filter.field) === -1,
+      })),
+    ]);
+    setRedirect(false);
+  }, []);
+
+  useEffect(() => {
+    if (!redirect && indicesExist) refresh();
+  }, [filters, appConfigs]);
+
+  const refresh = async (sort?: PropertySort) => {
+    setLoading(true);
+    const DSL = filtersToDsl(filters, query, startTime, endTime, page, appConfigs);
+    const timeFilterDSL = filtersToDsl([], '', startTime, endTime, page);
+    await handleTracesRequest(http, DSL, timeFilterDSL, tableItems, setTableItems, sort);
+    setLoading(false);
+  };
+
+  return (
+    <>
+      <SearchBar
+        query={query}
+        filters={filters}
+        appConfigs={appConfigs}
+        setFilters={setFilters}
+        setQuery={setQuery}
+        startTime={startTime}
+        setStartTime={setStartTime}
+        endTime={endTime}
+        setEndTime={setEndTime}
+        refresh={refresh}
+        page={page}
+      />
+      <EuiSpacer size="m" />
+      <TracesTable
+        items={tableItems}
+        refresh={refresh}
+        indicesExist={indicesExist}
+        loading={loading}
+        traceIdColumnAction={traceIdColumnAction}
+      />
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/components/traces/traces_table.tsx b/public/components/trace_analytics/components/traces/traces_table.tsx
new file mode 100644
index 0000000000..40f1396067
--- /dev/null
+++ b/public/components/trace_analytics/components/traces/traces_table.tsx
@@ -0,0 +1,218 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import {
+  EuiButtonIcon,
+  EuiCopy,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiPanel,
+  EuiSpacer,
+  EuiTableFieldDataColumnType,
+  EuiText,
+  PropertySort,
+} from '@elastic/eui';
+import _ from 'lodash';
+import React, { useMemo, useState } from 'react';
+import { TRACES_MAX_NUM } from '../../../../../common/constants/trace_analytics';
+import {
+  MissingConfigurationMessage,
+  NoMatchMessage,
+  PanelTitle,
+} from '../common/helper_functions';
+
+interface TracesTableProps {
+  items: any[];
+  refresh: (sort?: PropertySort) => void;
+  indicesExist: boolean;
+  loading: boolean;
+  traceIdColumnAction: any;
+}
+
+export function TracesTable(props: TracesTableProps) {
+  const { items, refresh, indicesExist, loading, traceIdColumnAction } = props;
+  const renderTitleBar = (totalItems?: number) => {
+    return (
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        <EuiFlexItem grow={10}>
+          <PanelTitle title="Traces" totalItems={totalItems} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  };
+
+  const columns = useMemo(
+    () =>
+      [
+        {
+          field: 'trace_id',
+          name: 'Trace ID',
+          align: 'left',
+          sortable: true,
+          truncateText: true,
+          render: (item) => (
+            <EuiFlexGroup gutterSize="s" alignItems="center">
+              <EuiFlexItem grow={10}>
+                <EuiLink onClick={() => traceIdColumnAction(item)}>
+                  {item.length < 24 ? (
+                    item
+                  ) : (
+                    <div title={item}>{_.truncate(item, { length: 24 })}</div>
+                  )}
+                </EuiLink>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiCopy textToCopy={item}>
+                  {(copy) => (
+                    <EuiButtonIcon
+                      aria-label="Copy trace id"
+                      iconType="copyClipboard"
+                      onClick={copy}
+                    >
+                      Click to copy
+                    </EuiButtonIcon>
+                  )}
+                </EuiCopy>
+              </EuiFlexItem>
+              <EuiFlexItem grow={3} />
+            </EuiFlexGroup>
+          ),
+        },
+        {
+          field: 'trace_group',
+          name: 'Trace group',
+          align: 'left',
+          sortable: true,
+          truncateText: true,
+          render: (item) =>
+            item ? (
+              <EuiText size="s">
+                {item.length < 36 ? (
+                  item
+                ) : (
+                  <div title={item}>{_.truncate(item, { length: 36 })}</div>
+                )}
+              </EuiText>
+            ) : (
+              '-'
+            ),
+        },
+        {
+          field: 'latency',
+          name: 'Latency (ms)',
+          align: 'right',
+          sortable: true,
+          truncateText: true,
+        },
+        {
+          field: 'percentile_in_trace_group',
+          name: (
+            <>
+              <div>Percentile in trace group</div>
+              {/* <div style={{ marginRight: 5 }}>trace group</div> */}
+            </>
+          ),
+          align: 'right',
+          sortable: true,
+          render: (item) =>
+            item === 0 || item ? <EuiText size="s">{`${_.round(item, 2)}th`}</EuiText> : '-',
+        },
+        {
+          field: 'error_count',
+          name: 'Errors',
+          align: 'right',
+          sortable: true,
+          render: (item) =>
+            item == null ? (
+              '-'
+            ) : item > 0 ? (
+              <EuiText color="danger" size="s">
+                Yes
+              </EuiText>
+            ) : (
+              'No'
+            ),
+        },
+        {
+          field: 'last_updated',
+          name: 'Last updated',
+          align: 'left',
+          sortable: true,
+          render: (item) => (item === 0 || item ? item : '-'),
+        },
+      ] as Array<EuiTableFieldDataColumnType<any>>,
+    [items]
+  );
+
+  const titleBar = useMemo(() => renderTitleBar(items?.length), [items]);
+
+  const [sorting, setSorting] = useState<{ sort: PropertySort }>({
+    sort: {
+      field: 'trace_id',
+      direction: 'asc',
+    },
+  });
+
+  const onTableChange = async ({ currPage, sort }: { currPage: any; sort: any }) => {
+    if (typeof sort?.field !== 'string') return;
+
+    // maps table column key to DSL aggregation name
+    const fieldMappings = {
+      trace_id: '_key',
+      trace_group: null,
+      latency: 'latency',
+      percentile_in_trace_group: null,
+      error_count: 'error_count',
+      last_updated: 'last_updated',
+    };
+    const field = fieldMappings[sort.field as keyof typeof fieldMappings];
+    if (!field || items?.length < TRACES_MAX_NUM) {
+      setSorting({ sort });
+      return;
+    }
+
+    // using await when sorting the default sorted field leads to a bug in UI
+    if (sort.field === 'trace_id') {
+      refresh({ ...sort, field });
+      setSorting({ sort });
+      return;
+    }
+
+    await refresh({ ...sort, field });
+    setSorting({ sort });
+  };
+
+  return (
+    <>
+      <EuiPanel>
+        {titleBar}
+        <EuiSpacer size="m" />
+        <EuiHorizontalRule margin="none" />
+        {items?.length > 0 ? (
+          <EuiInMemoryTable
+            tableLayout="auto"
+            items={items}
+            columns={columns}
+            pagination={{
+              initialPageSize: 10,
+              pageSizeOptions: [5, 10, 15],
+            }}
+            sorting={sorting}
+            onTableChange={onTableChange}
+            loading={loading}
+          />
+        ) : indicesExist ? (
+          <NoMatchMessage size="xl" />
+        ) : (
+          <MissingConfigurationMessage />
+        )}
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/public/components/trace_analytics/home.tsx b/public/components/trace_analytics/home.tsx
new file mode 100644
index 0000000000..ab04874366
--- /dev/null
+++ b/public/components/trace_analytics/home.tsx
@@ -0,0 +1,202 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiLink } from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+import { Route, RouteComponentProps } from 'react-router-dom';
+import {
+  ChromeBreadcrumb,
+  ChromeStart,
+  CoreStart,
+  HttpStart,
+} from '../../../../../src/core/public';
+import { ObservabilitySideBar } from '../common/side_nav';
+import { FilterType } from './components/common/filters/filters';
+import { SearchBarProps } from './components/common/search_bar';
+import { Dashboard } from './components/dashboard';
+import { Services, ServiceView } from './components/services';
+import { Traces, TraceView } from './components/traces';
+import { handleIndicesExistRequest } from './requests/request_handler';
+
+export interface TraceAnalyticsCoreDeps {
+  parentBreadcrumbs: ChromeBreadcrumb[];
+  http: HttpStart;
+  chrome: ChromeStart;
+}
+
+interface HomeProps extends RouteComponentProps, TraceAnalyticsCoreDeps {}
+
+export interface TraceAnalyticsComponentDeps extends TraceAnalyticsCoreDeps, SearchBarProps {
+  indicesExist: boolean;
+}
+
+export const Home = (props: HomeProps) => {
+  const [indicesExist, setIndicesExist] = useState(true);
+  const storedFilters = sessionStorage.getItem('TraceAnalyticsFilters');
+  const [query, setQuery] = useState<string>(sessionStorage.getItem('TraceAnalyticsQuery') || '');
+  const [filters, setFilters] = useState<FilterType[]>(
+    storedFilters ? JSON.parse(storedFilters) : []
+  );
+  const [startTime, setStartTime] = useState<string>(
+    sessionStorage.getItem('TraceAnalyticsStartTime') || 'now-5m'
+  );
+  const [endTime, setEndTime] = useState<string>(
+    sessionStorage.getItem('TraceAnalyticsEndTime') || 'now'
+  );
+
+  const setFiltersWithStorage = (newFilters: FilterType[]) => {
+    setFilters(newFilters);
+    sessionStorage.setItem('TraceAnalyticsFilters', JSON.stringify(newFilters));
+  };
+  const setQueryWithStorage = (newQuery: string) => {
+    setQuery(newQuery);
+    sessionStorage.setItem('TraceAnalyticsQuery', newQuery);
+  };
+  const setStartTimeWithStorage = (newStartTime: string) => {
+    setStartTime(newStartTime);
+    sessionStorage.setItem('TraceAnalyticsStartTime', newStartTime);
+  };
+  const setEndTimeWithStorage = (newEndTime: string) => {
+    setEndTime(newEndTime);
+    sessionStorage.setItem('TraceAnalyticsEndTime', newEndTime);
+  };
+
+  useEffect(() => {
+    handleIndicesExistRequest(props.http, setIndicesExist);
+  }, []);
+
+  const dashboardBreadcrumbs = [
+    {
+      text: 'Trace analytics',
+      href: '#/trace_analytics/home',
+    },
+    {
+      text: 'Dashboard',
+      href: '#/trace_analytics/home',
+    },
+  ];
+
+  const serviceBreadcrumbs = [
+    {
+      text: 'Trace analytics',
+      href: '#/trace_analytics/home',
+    },
+    {
+      text: 'Services',
+      href: '#/trace_analytics/services',
+    },
+  ];
+
+  const traceBreadcrumbs = [
+    {
+      text: 'Trace analytics',
+      href: '#/trace_analytics/home',
+    },
+    {
+      text: 'Traces',
+      href: '#/trace_analytics/traces',
+    },
+  ];
+
+  const nameColumnAction = (item: any) =>
+    location.assign(`#/trace_analytics/services/${encodeURIComponent(item)}`);
+
+  const traceColumnAction = () => location.assign('#/trace_analytics/traces');
+
+  const traceIdColumnAction = (item: any) =>
+    location.assign(`#/trace_analytics/traces/${encodeURIComponent(item)}`);
+
+  const commonProps: TraceAnalyticsComponentDeps = {
+    parentBreadcrumbs: props.parentBreadcrumbs,
+    http: props.http,
+    chrome: props.chrome,
+    query,
+    setQuery: setQueryWithStorage,
+    filters,
+    appConfigs: [],
+    setFilters: setFiltersWithStorage,
+    startTime,
+    setStartTime: setStartTimeWithStorage,
+    endTime,
+    setEndTime: setEndTimeWithStorage,
+    indicesExist,
+  };
+
+  return (
+    <>
+      <Route
+        exact
+        path={['/trace_analytics', '/trace_analytics/home']}
+        render={(routerProps) => (
+          <ObservabilitySideBar>
+            <Dashboard page="dashboard" childBreadcrumbs={dashboardBreadcrumbs} {...commonProps} />
+          </ObservabilitySideBar>
+        )}
+      />
+      <Route
+        exact
+        path="/trace_analytics/traces"
+        render={(routerProps) => (
+          <ObservabilitySideBar>
+            <Traces
+              page="traces"
+              childBreadcrumbs={traceBreadcrumbs}
+              traceIdColumnAction={traceIdColumnAction}
+              {...commonProps}
+            />
+          </ObservabilitySideBar>
+        )}
+      />
+      <Route
+        path="/trace_analytics/traces/:id+"
+        render={(routerProps) => (
+          <TraceView
+            parentBreadcrumbs={props.parentBreadcrumbs}
+            chrome={props.chrome}
+            http={props.http}
+            traceId={decodeURIComponent(routerProps.match.params.id)}
+          />
+        )}
+      />
+      <Route
+        exact
+        path="/trace_analytics/services"
+        render={(routerProps) => (
+          <ObservabilitySideBar>
+            <Services
+              page="services"
+              childBreadcrumbs={serviceBreadcrumbs}
+              nameColumnAction={nameColumnAction}
+              traceColumnAction={traceColumnAction}
+              {...commonProps}
+            />
+          </ObservabilitySideBar>
+        )}
+      />
+      <Route
+        path="/trace_analytics/services/:id+"
+        render={(routerProps) => (
+          <ServiceView
+            serviceName={decodeURIComponent(routerProps.match.params.id)}
+            {...commonProps}
+            addFilter={(filter: FilterType) => {
+              for (const addedFilter of filters) {
+                if (
+                  addedFilter.field === filter.field &&
+                  addedFilter.operator === filter.operator &&
+                  addedFilter.value === filter.value
+                ) {
+                  return;
+                }
+              }
+              const newFilters = [...filters, filter];
+              setFiltersWithStorage(newFilters);
+            }}
+          />
+        )}
+      />
+    </>
+  );
+};
diff --git a/public/components/trace_analytics/images/unmatched_node.png b/public/components/trace_analytics/images/unmatched_node.png
new file mode 100644
index 0000000000..7c576b7273
Binary files /dev/null and b/public/components/trace_analytics/images/unmatched_node.png differ
diff --git a/public/components/trace_analytics/index.scss b/public/components/trace_analytics/index.scss
new file mode 100644
index 0000000000..90dca4b7d9
--- /dev/null
+++ b/public/components/trace_analytics/index.scss
@@ -0,0 +1,54 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@import '../../../node_modules/vis-network/dist/dist/vis-network.min.css';
+
+.overview-title {
+  color: '#333333';
+  font-weight: 370;
+}
+
+.overview-content {
+  font-weight: 430;
+}
+
+.panel-title {
+  color: '#3f3f3f';
+  font-weight: 500;
+}
+
+.panel-title-count {
+  color: '#8a9596';
+  font-weight: 300;
+}
+
+div.vis-network > div.vis-tooltip {
+  color: #f4f5f5;
+  background-color: #3d4652;
+  opacity: 0.9;
+  padding: 5px;
+  font-size: small;
+  p {
+    padding: 5px;
+  }
+}
+
+th[data-test-subj^='tableHeaderCell_dashboard_trace_group_name'],
+th[data-test-subj^='tableHeaderCell_dashboard_latency_variance'],
+th[data-test-subj^='tableHeaderCell_dashboard_average_latency'],
+th[data-test-subj^='tableHeaderCell_dashboard_error_rate'],
+th[data-test-subj^='tableHeaderCell_dashboard_traces'] {
+  svg[aria-label^="Sorted in"] {
+    margin-top: -20px;
+  }
+}
+
+th[data-test-subj^='tableHeaderCell_dashboard_latency_variance'] {
+  svg[aria-label^="Sorted in"] {
+    margin-left: -16px;
+    position: relative;
+    left: 10px;
+  }
+}
\ No newline at end of file
diff --git a/public/components/trace_analytics/requests/dashboard_request_handler.ts b/public/components/trace_analytics/requests/dashboard_request_handler.ts
new file mode 100644
index 0000000000..322ebf8ed5
--- /dev/null
+++ b/public/components/trace_analytics/requests/dashboard_request_handler.ts
@@ -0,0 +1,187 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import _ from 'lodash';
+import moment from 'moment';
+import { TRACE_ANALYTICS_PLOTS_DATE_FORMAT } from '../../../../common/constants/trace_analytics';
+import { fixedIntervalToMilli, nanoToMilliSec } from '../components/common/helper_functions';
+import {
+  getDashboardQuery,
+  getDashboardThroughputPltQuery,
+  getDashboardTraceGroupPercentiles,
+  getErrorRatePltQuery,
+  getLatencyTrendQuery,
+} from './queries/dashboard_queries';
+import { handleDslRequest } from './request_handler';
+
+export const handleDashboardRequest = async (
+  http,
+  DSL,
+  timeFilterDSL,
+  latencyTrendDSL,
+  items,
+  setItems,
+  setPercentileMap?
+) => {
+  // latency_variance should only be affected by timefilter
+  const latencyVariances = await handleDslRequest(
+    http,
+    timeFilterDSL,
+    getDashboardTraceGroupPercentiles()
+  )
+    .then((response) => {
+      const map: any = {};
+      response.aggregations.trace_group.buckets.forEach((traceGroup) => {
+        map[traceGroup.key] = Object.values(
+          traceGroup.latency_variance_nanos.values
+        ).map((nano: number) => _.round(nanoToMilliSec(Math.max(0, nano)), 2));
+      });
+      return map;
+    })
+    .catch((error) => console.error(error));
+  if (setPercentileMap) setPercentileMap(latencyVariances);
+
+  const latencyTrends = await handleDslRequest(http, latencyTrendDSL, getLatencyTrendQuery())
+    .then((response) => {
+      const map: any = {};
+      response.aggregations.trace_group_name.buckets.map((bucket) => {
+        const latencyTrend = bucket.group_by_hour.buckets
+          .slice(-24)
+          .filter((bucket) => bucket.average_latency?.value || bucket.average_latency?.value === 0);
+        const values = {
+          x: latencyTrend.map((bucket) => bucket.key),
+          y: latencyTrend.map((bucket) => bucket.average_latency?.value || 0),
+        };
+        const latencyTrendData =
+          values.x?.length > 0
+            ? {
+                '24_hour_latency_trend': {
+                  trendData: [
+                    {
+                      ...values,
+                      type: 'scatter',
+                      mode: 'lines',
+                      hoverinfo: 'none',
+                      line: {
+                        color: '#000000',
+                        width: 1,
+                      },
+                    },
+                  ],
+                  popoverData: [
+                    {
+                      ...values,
+                      type: 'scatter',
+                      mode: 'lines+markers',
+                      hovertemplate: '%{x}<br>Average latency: %{y}<extra></extra>',
+                      hoverlabel: {
+                        bgcolor: '#d7c2ff',
+                      },
+                      marker: {
+                        color: '#987dcb',
+                        size: 8,
+                      },
+                      line: {
+                        color: '#987dcb',
+                        size: 2,
+                      },
+                    },
+                  ],
+                },
+              }
+            : {};
+        map[bucket.key] = latencyTrendData;
+      });
+      return map;
+    })
+    .catch((error) => console.error(error));
+
+  await handleDslRequest(http, DSL, getDashboardQuery())
+    .then((response) => {
+      return Promise.all(
+        response.aggregations.trace_group_name.buckets.map((bucket) => {
+          const latencyTrend = latencyTrends?.[bucket.key] || {};
+          return {
+            dashboard_trace_group_name: bucket.key,
+            dashboard_average_latency: bucket.average_latency?.value,
+            dashboard_traces: bucket.trace_count.value,
+            dashboard_latency_variance: latencyVariances[bucket.key],
+            dashboard_error_rate: bucket.error_rate.value,
+            ...latencyTrend,
+          };
+        })
+      );
+    })
+    .then((newItems) => {
+      setItems(newItems);
+    })
+    .catch((error) => console.error(error));
+};
+
+export const handleDashboardThroughputPltRequest = (http, DSL, fixedInterval, items, setItems) => {
+  return handleDslRequest(http, DSL, getDashboardThroughputPltQuery(fixedInterval))
+    .then((response) => {
+      const buckets = response.aggregations.throughput.buckets;
+      const texts = buckets.map(
+        (bucket) =>
+          `${moment(bucket.key).format(TRACE_ANALYTICS_PLOTS_DATE_FORMAT)} - ${moment(
+            bucket.key + fixedIntervalToMilli(fixedInterval)
+          ).format(TRACE_ANALYTICS_PLOTS_DATE_FORMAT)}`
+      );
+      const newItems =
+        buckets.length > 0
+          ? [
+              {
+                x: buckets.map((bucket) => bucket.key),
+                y: buckets.map((bucket) => bucket.trace_count.value),
+                marker: {
+                  color: 'rgb(171, 211, 240)',
+                },
+                type: 'bar',
+                customdata: texts,
+                hoverlabel: {
+                  align: 'left',
+                },
+                hovertemplate: '%{customdata}<br>Throughput: %{y:,}<extra></extra>',
+              },
+            ]
+          : [];
+      setItems({ items: newItems, fixedInterval: fixedInterval });
+    })
+    .catch((error) => console.error(error));
+};
+
+export const handleDashboardErrorRatePltRequest = (http, DSL, fixedInterval, items, setItems) => {
+  return handleDslRequest(http, DSL, getErrorRatePltQuery(fixedInterval))
+    .then((response) => {
+      const buckets = response.aggregations.error_rate.buckets;
+      const texts = buckets.map(
+        (bucket) =>
+          `${moment(bucket.key).format(TRACE_ANALYTICS_PLOTS_DATE_FORMAT)} - ${moment(
+            bucket.key + fixedIntervalToMilli(fixedInterval)
+          ).format(TRACE_ANALYTICS_PLOTS_DATE_FORMAT)}`
+      );
+      const newItems =
+        buckets.length > 0
+          ? [
+              {
+                x: buckets.map((bucket) => bucket.key),
+                y: buckets.map((bucket) => _.round(bucket.error_rate?.value || 0, 2)),
+                marker: {
+                  color: '#fad963',
+                },
+                type: 'bar',
+                customdata: texts,
+                hoverlabel: {
+                  align: 'left',
+                },
+                hovertemplate: '%{customdata}<br>Error rate: %{y}<extra></extra>',
+              },
+            ]
+          : [];
+      setItems({ items: newItems, fixedInterval: fixedInterval });
+    })
+    .catch((error) => console.error(error));
+};
diff --git a/public/components/trace_analytics/requests/queries/dashboard_queries.ts b/public/components/trace_analytics/requests/queries/dashboard_queries.ts
new file mode 100644
index 0000000000..bdc9111ac1
--- /dev/null
+++ b/public/components/trace_analytics/requests/queries/dashboard_queries.ts
@@ -0,0 +1,286 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const getDashboardQuery = () => {
+  const query = {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      trace_group_name: {
+        terms: {
+          field: 'traceGroup',
+          size: 10000,
+        },
+        aggs: {
+          average_latency: {
+            scripted_metric: {
+              init_script: 'state.traceIdToLatencyMap = [:];',
+              map_script: `
+                if (doc.containsKey('traceGroupFields.durationInNanos') && !doc['traceGroupFields.durationInNanos'].empty) {
+                  def traceId = doc['traceId'].value;
+                  if (!state.traceIdToLatencyMap.containsKey(traceId)) {
+                    state.traceIdToLatencyMap[traceId] = doc['traceGroupFields.durationInNanos'].value;
+                  }
+                }
+              `,
+              combine_script: 'return state.traceIdToLatencyMap',
+              reduce_script: `
+                def seenTraceIdsMap = [:];
+                def totalLatency = 0.0;
+                def traceCount = 0.0;
+
+                for (s in states) {
+                  if (s == null) {
+                    continue;
+                  }
+
+                  for (entry in s.entrySet()) {
+                    def traceId = entry.getKey();
+                    def traceLatency = entry.getValue();
+                    if (!seenTraceIdsMap.containsKey(traceId)) {
+                      seenTraceIdsMap[traceId] = true;
+                      totalLatency += traceLatency;
+                      traceCount++;
+                    }
+                  }
+                }
+
+                def average_latency_nanos = totalLatency / traceCount;
+                return Math.round(average_latency_nanos / 10000) / 100.0;
+              `,
+            },
+          },
+          trace_count: {
+            cardinality: {
+              field: 'traceId',
+            },
+          },
+          error_count: {
+            filter: {
+              term: {
+                'traceGroupFields.statusCode': '2',
+              },
+            },
+            aggs: {
+              trace_count: {
+                cardinality: {
+                  field: 'traceId',
+                },
+              },
+            },
+          },
+          error_rate: {
+            bucket_script: {
+              buckets_path: {
+                total: 'trace_count.value',
+                errors: 'error_count>trace_count.value',
+              },
+              script: 'params.errors / params.total * 100',
+            },
+          },
+        },
+      },
+    },
+  };
+  return query;
+};
+
+export const getLatencyTrendQuery = () => {
+  const query = {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      trace_group_name: {
+        terms: {
+          field: 'traceGroup',
+          size: 10000,
+        },
+        aggs: {
+          group_by_hour: {
+            date_histogram: {
+              field: 'endTime',
+              calendar_interval: 'hour',
+            },
+            aggs: {
+              average_latency: {
+                scripted_metric: {
+                  init_script: 'state.traceIdToLatencyMap = [:];',
+                  map_script: `
+                    if (doc.containsKey('traceGroupFields.durationInNanos') && !doc['traceGroupFields.durationInNanos'].empty) {
+                      def traceId = doc['traceId'].value;
+                      if (!state.traceIdToLatencyMap.containsKey(traceId)) {
+                        state.traceIdToLatencyMap[traceId] = doc['traceGroupFields.durationInNanos'].value;
+                      }
+                    }
+                  `,
+                  combine_script: 'return state.traceIdToLatencyMap',
+                  reduce_script: `
+                    def seenTraceIdsMap = [:];
+                    def totalLatency = 0.0;
+                    def traceCount = 0.0;
+
+                    for (s in states) {
+                      if (s == null) {
+                        continue;
+                      }
+
+                      for (entry in s.entrySet()) {
+                        def traceId = entry.getKey();
+                        def traceLatency = entry.getValue();
+                        if (!seenTraceIdsMap.containsKey(traceId)) {
+                          seenTraceIdsMap[traceId] = true;
+                          totalLatency += traceLatency;
+                          traceCount++;
+                        }
+                      }
+                    }
+
+                    def average_latency_nanos = totalLatency / traceCount;
+                    return Math.round(average_latency_nanos / 10000) / 100.0;
+                  `,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+  return query;
+};
+
+export const getDashboardTraceGroupPercentiles = () => {
+  return {
+    size: 0,
+    query: {
+      bool: {
+        must: [
+          {
+            term: {
+              parentSpanId: {
+                value: '',
+              },
+            },
+          },
+        ],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      trace_group: {
+        terms: {
+          field: 'traceGroup',
+        },
+        aggs: {
+          latency_variance_nanos: {
+            percentiles: {
+              field: 'traceGroupFields.durationInNanos',
+              percents: [0, 95, 100],
+            },
+          },
+        },
+      },
+    },
+  };
+};
+
+export const getErrorRatePltQuery = (fixedInterval) => {
+  const query: any = {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      error_rate: {
+        date_histogram: {
+          field: 'startTime',
+          fixed_interval: fixedInterval,
+        },
+        aggs: {
+          error_count: {
+            filter: {
+              term: {
+                'traceGroupFields.statusCode': '2',
+              },
+            },
+            aggs: {
+              trace_count: {
+                cardinality: {
+                  field: 'traceId',
+                },
+              },
+            },
+          },
+          trace_count: {
+            cardinality: {
+              field: 'traceId',
+            },
+          },
+          error_rate: {
+            bucket_script: {
+              buckets_path: {
+                total: 'trace_count.value',
+                errors: 'error_count>trace_count.value',
+              },
+              script: 'params.errors / params.total * 100',
+            },
+          },
+        },
+      },
+    },
+  };
+  return query;
+};
+
+export const getDashboardThroughputPltQuery = (fixedInterval) => {
+  const query: any = {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      throughput: {
+        date_histogram: {
+          field: 'startTime',
+          fixed_interval: fixedInterval,
+        },
+        aggs: {
+          trace_count: {
+            cardinality: {
+              field: 'traceId',
+            },
+          },
+        },
+      },
+    },
+  };
+  return query;
+};
diff --git a/public/components/trace_analytics/requests/queries/services_queries.ts b/public/components/trace_analytics/requests/queries/services_queries.ts
new file mode 100644
index 0000000000..327e029d42
--- /dev/null
+++ b/public/components/trace_analytics/requests/queries/services_queries.ts
@@ -0,0 +1,318 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  DATA_PREPPER_SERVICE_INDEX_NAME,
+  SERVICE_MAP_MAX_EDGES,
+  SERVICE_MAP_MAX_NODES,
+} from '../../../../../common/constants/trace_analytics';
+import { getServiceMapTargetResources } from '../../components/common/helper_functions';
+import { ServiceObject } from '../../components/common/plots/service_map';
+
+export const getServicesQuery = (serviceName: string | undefined, DSL?: any) => {
+  const query = {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      service: {
+        terms: {
+          field: 'serviceName',
+          size: 10000,
+        },
+        aggs: {
+          trace_count: {
+            cardinality: {
+              field: 'traceId',
+            },
+          },
+        },
+      },
+    },
+  };
+  if (serviceName) {
+    query.query.bool.must.push({
+      term: {
+        serviceName,
+      },
+    });
+  }
+  DSL?.custom?.serviceNames?.map((service: string) => {
+    query.query.bool.must.push({
+      term: {
+        serviceName: service,
+      },
+    });
+  });
+  DSL?.custom?.serviceNamesExclude?.map((service: string) => {
+    query.query.bool.must_not.push({
+      term: {
+        serviceName: service,
+      },
+    });
+  });
+  return query;
+};
+
+export const getRelatedServicesQuery = (serviceName: string) => {
+  const query = {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      traces: {
+        terms: {
+          field: 'traceId',
+          size: 10000,
+        },
+        aggs: {
+          all_services: {
+            terms: {
+              field: 'serviceName',
+              size: 10000,
+            },
+          },
+          service: {
+            filter: {
+              bool: {
+                must: [
+                  {
+                    term: {
+                      serviceName,
+                    },
+                  },
+                ],
+                must_not: [],
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+  return query;
+};
+
+export const getServiceNodesQuery = () => {
+  return {
+    index: DATA_PREPPER_SERVICE_INDEX_NAME,
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      service_name: {
+        terms: {
+          field: 'serviceName',
+          size: SERVICE_MAP_MAX_NODES,
+        },
+        aggs: {
+          trace_group: {
+            terms: {
+              field: 'traceGroupName',
+              size: SERVICE_MAP_MAX_EDGES,
+            },
+            aggs: {
+              target_resource: {
+                terms: {
+                  field: 'target.resource',
+                  size: SERVICE_MAP_MAX_EDGES,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+};
+
+export const getServiceEdgesQuery = (source: 'destination' | 'target') => {
+  return {
+    index: DATA_PREPPER_SERVICE_INDEX_NAME,
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      service_name: {
+        terms: {
+          field: 'serviceName',
+          size: SERVICE_MAP_MAX_EDGES,
+        },
+        aggs: {
+          resource: {
+            terms: {
+              field: `${source}.resource`,
+              size: SERVICE_MAP_MAX_EDGES,
+            },
+            aggs: {
+              domain: {
+                terms: {
+                  field: `${source}.domain`,
+                  size: SERVICE_MAP_MAX_EDGES,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  };
+};
+
+export const getServiceMetricsQuery = (DSL: any, serviceNames: string[], map: ServiceObject) => {
+  const traceGroupFilter = new Set(
+    DSL?.query?.bool.must
+      .filter((must: any) => must.term?.['traceGroup'])
+      .map((must: any) => must.term.traceGroup) || []
+  );
+
+  const targetResource =
+    traceGroupFilter.size > 0
+      ? [].concat(
+          ...[].concat(
+            ...serviceNames.map((service) =>
+              map[service].traceGroups
+                .filter((traceGroup) => traceGroupFilter.has(traceGroup.traceGroup))
+                .map((traceGroup) => traceGroup.targetResource)
+            )
+          )
+        )
+      : [].concat(...Object.keys(map).map((service) => getServiceMapTargetResources(map, service)));
+  const query: any = {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        should: [],
+        must_not: [],
+        filter: [
+          {
+            terms: {
+              serviceName: serviceNames,
+            },
+          },
+          {
+            bool: {
+              should: [
+                {
+                  bool: {
+                    filter: [
+                      {
+                        bool: {
+                          must_not: {
+                            term: {
+                              parentSpanId: {
+                                value: '',
+                              },
+                            },
+                          },
+                        },
+                      },
+                      {
+                        terms: {
+                          name: targetResource,
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  bool: {
+                    must: {
+                      term: {
+                        parentSpanId: {
+                          value: '',
+                        },
+                      },
+                    },
+                  },
+                },
+              ],
+              adjust_pure_negative: true,
+              boost: 1,
+            },
+          },
+        ],
+      },
+    },
+    aggregations: {
+      service_name: {
+        terms: {
+          field: 'serviceName',
+          size: SERVICE_MAP_MAX_NODES,
+          min_doc_count: 1,
+          shard_min_doc_count: 0,
+          show_term_doc_count_error: false,
+          order: [
+            {
+              _count: 'desc',
+            },
+            {
+              _key: 'asc',
+            },
+          ],
+        },
+        aggregations: {
+          average_latency_nanos: {
+            avg: {
+              field: 'durationInNanos',
+            },
+          },
+          average_latency: {
+            bucket_script: {
+              buckets_path: {
+                count: '_count',
+                latency: 'average_latency_nanos.value',
+              },
+              script: 'Math.round(params.latency / 10000) / 100.0',
+            },
+          },
+          error_count: {
+            filter: {
+              term: {
+                'status.code': '2',
+              },
+            },
+          },
+          error_rate: {
+            bucket_script: {
+              buckets_path: {
+                total: '_count',
+                errors: 'error_count._count',
+              },
+              script: 'params.errors / params.total * 100',
+            },
+          },
+        },
+      },
+    },
+  };
+  if (DSL.custom?.timeFilter.length > 0) query.query.bool.must.push(...DSL.custom.timeFilter);
+  return query;
+};
diff --git a/public/components/trace_analytics/requests/queries/traces_queries.ts b/public/components/trace_analytics/requests/queries/traces_queries.ts
new file mode 100644
index 0000000000..89d63a42e7
--- /dev/null
+++ b/public/components/trace_analytics/requests/queries/traces_queries.ts
@@ -0,0 +1,308 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PropertySort } from '@elastic/eui';
+import { TRACES_MAX_NUM } from '../../../../../common/constants/trace_analytics';
+import { SpanSearchParams } from '../../components/traces/span_detail_table';
+
+export const getTraceGroupPercentilesQuery = () => {
+  const query: any = {
+    size: 0,
+    query: {
+      bool: {
+        must: [
+          {
+            term: {
+              parentSpanId: {
+                value: '',
+              },
+            },
+          },
+        ],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      trace_group_name: {
+        terms: {
+          field: 'name',
+          size: 10000,
+        },
+        aggs: {
+          percentiles: {
+            percentiles: {
+              field: 'durationInNanos',
+              percents: Array.from({ length: 101 }, (v, i) => i),
+            },
+          },
+        },
+      },
+    },
+  };
+  return query;
+};
+
+export const getTracesQuery = (traceId: string = '', sort?: PropertySort) => {
+  const field = sort?.field || '_key';
+  const direction = sort?.direction || 'asc';
+  const query: any = {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      traces: {
+        terms: {
+          field: 'traceId',
+          size: TRACES_MAX_NUM,
+          order: {
+            [field]: direction,
+          },
+        },
+        aggs: {
+          latency: {
+            max: {
+              script: {
+                source: `
+                if (doc.containsKey('traceGroupFields.durationInNanos') && !doc['traceGroupFields.durationInNanos'].empty) {
+                  return Math.round(doc['traceGroupFields.durationInNanos'].value / 10000) / 100.0
+                }
+
+                return 0
+                `,
+                lang: 'painless',
+              },
+            },
+          },
+          trace_group: {
+            terms: {
+              field: 'traceGroup',
+              size: 1,
+            },
+          },
+          error_count: {
+            filter: {
+              term: {
+                'traceGroupFields.statusCode': '2',
+              },
+            },
+          },
+          last_updated: {
+            max: {
+              field: 'traceGroupFields.endTime',
+            },
+          },
+        },
+      },
+    },
+  };
+  if (traceId) {
+    query.query.bool.must.push({
+      term: {
+        traceId,
+      },
+    });
+  }
+  return query;
+};
+
+export const getServiceBreakdownQuery = (traceId: string) => {
+  const query = {
+    size: 0,
+    query: {
+      bool: {
+        must: [
+          {
+            term: {
+              traceId,
+            },
+          },
+        ],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      service_type: {
+        terms: {
+          field: 'serviceName',
+          order: [
+            {
+              total_latency_nanos: 'desc',
+            },
+          ],
+        },
+        aggs: {
+          total_latency_nanos: {
+            sum: {
+              field: 'durationInNanos',
+            },
+          },
+          total_latency: {
+            bucket_script: {
+              buckets_path: {
+                count: '_count',
+                latency: 'total_latency_nanos.value',
+              },
+              script: 'Math.round(params.latency / 10000) / 100.0',
+            },
+          },
+        },
+      },
+    },
+  };
+  return query;
+};
+
+export const getSpanDetailQuery = (traceId: string, size = 3000) => {
+  const query = {
+    size,
+    query: {
+      bool: {
+        must: [
+          {
+            term: {
+              traceId,
+            },
+          },
+          {
+            exists: {
+              field: 'serviceName',
+            },
+          },
+        ],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    sort: [
+      {
+        startTime: {
+          order: 'desc',
+        },
+      },
+    ],
+    _source: {
+      includes: [
+        'serviceName',
+        'name',
+        'startTime',
+        'endTime',
+        'spanId',
+        'status.code',
+        'durationInNanos',
+      ],
+    },
+  };
+  return query;
+};
+
+export const getPayloadQuery = (traceId: string, size = 1000) => {
+  return {
+    size,
+    query: {
+      bool: {
+        must: [
+          {
+            term: {
+              traceId,
+            },
+          },
+        ],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+  };
+};
+
+export const getSpanFlyoutQuery = (spanId?: string, size = 1000) => {
+  return {
+    size,
+    query: {
+      bool: {
+        must: [
+          {
+            term: {
+              spanId,
+            },
+          },
+        ],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+  };
+};
+
+export const getSpansQuery = (spanSearchParams: SpanSearchParams) => {
+  const query: any = {
+    size: spanSearchParams.size,
+    from: spanSearchParams.from,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    sort: spanSearchParams.sortingColumns,
+  };
+  return query;
+};
+
+export const getValidTraceIdsQuery = (DSL) => {
+  const query: any = {
+    size: 0,
+    query: {
+      bool: {
+        must: [],
+        filter: [],
+        should: [],
+        must_not: [],
+      },
+    },
+    aggs: {
+      traces: {
+        terms: {
+          field: 'traceId',
+          size: 10000,
+        },
+      },
+    },
+  };
+  if (DSL.custom?.timeFilter.length > 0) query.query.bool.must.push(...DSL.custom.timeFilter);
+  if (DSL.custom?.traceGroupFields.length > 0) {
+    query.query.bool.filter.push({
+      terms: {
+        traceGroup: DSL.custom.traceGroup,
+      },
+    });
+  }
+  if (DSL.custom?.percentiles?.query.bool.should.length > 0) {
+    query.query.bool.should.push(...DSL.custom.percentiles.query.bool.should);
+    query.query.bool.minimum_should_match = DSL.custom.percentiles.query.bool.minimum_should_match;
+  }
+  if (DSL.custom?.serviceNames.length > 0) {
+    query.query.bool.filter.push({
+      terms: {
+        serviceName: DSL.custom.serviceNames,
+      },
+    });
+  }
+  return query;
+};
diff --git a/public/components/trace_analytics/requests/request_handler.ts b/public/components/trace_analytics/requests/request_handler.ts
new file mode 100644
index 0000000000..a115cc7872
--- /dev/null
+++ b/public/components/trace_analytics/requests/request_handler.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable no-console */
+
+import { CoreStart } from '../../../../../../src/core/public';
+import {
+  TRACE_ANALYTICS_DSL_ROUTE,
+  TRACE_ANALYTICS_INDICES_ROUTE,
+} from '../../../../common/constants/trace_analytics';
+
+export function handleDslRequest(http: CoreStart['http'], DSL: any, bodyQuery: any) {
+  if (DSL?.query) {
+    bodyQuery.query.bool.must.push(...DSL.query.bool.must);
+    bodyQuery.query.bool.filter.push(...DSL.query.bool.filter);
+    bodyQuery.query.bool.should.push(...DSL.query.bool.should);
+    bodyQuery.query.bool.must_not.push(...DSL.query.bool.must_not);
+    if (DSL.query.bool.minimum_should_match)
+      bodyQuery.query.bool.minimum_should_match = DSL.query.bool.minimum_should_match;
+  }
+  return http
+    .post(TRACE_ANALYTICS_DSL_ROUTE, {
+      body: JSON.stringify(bodyQuery),
+    })
+    .catch((error) => console.error(error));
+}
+
+export async function handleIndicesExistRequest(http: CoreStart['http'], setIndicesExist) {
+  http
+    .post(TRACE_ANALYTICS_INDICES_ROUTE)
+    .then((exists) => setIndicesExist(exists))
+    .catch(() => setIndicesExist(false));
+}
diff --git a/public/components/trace_analytics/requests/services_request_handler.ts b/public/components/trace_analytics/requests/services_request_handler.ts
new file mode 100644
index 0000000000..7351113fad
--- /dev/null
+++ b/public/components/trace_analytics/requests/services_request_handler.ts
@@ -0,0 +1,187 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable no-console */
+
+import _ from 'lodash';
+import dateMath from '@elastic/datemath';
+import DSLService from 'public/services/requests/dsl';
+import { ServiceObject } from '../components/common/plots/service_map';
+import {
+  getRelatedServicesQuery,
+  getServiceEdgesQuery,
+  getServiceMetricsQuery,
+  getServiceNodesQuery,
+  getServicesQuery,
+} from './queries/services_queries';
+import { handleDslRequest } from './request_handler';
+import { HttpSetup } from '../../../../../../src/core/public';
+
+export const handleServicesRequest = async (
+  http: HttpSetup,
+  DSL: any,
+  setItems: any,
+  setServiceMap?: any,
+  serviceNameFilter?: string
+) => {
+  return handleDslRequest(http, DSL, getServicesQuery(serviceNameFilter, DSL))
+    .then(async (response) => {
+      const serviceObject: ServiceObject = await handleServiceMapRequest(http, DSL, setServiceMap);
+      return Promise.all(
+        response.aggregations.service.buckets
+          .filter((bucket: any) => serviceObject[bucket.key])
+          .map((bucket: any) => {
+            const connectedServices = [
+              ...serviceObject[bucket.key].targetServices,
+              ...serviceObject[bucket.key].destServices,
+            ];
+            return {
+              name: bucket.key,
+              average_latency: serviceObject[bucket.key].latency,
+              error_rate: serviceObject[bucket.key].error_rate,
+              throughput: serviceObject[bucket.key].throughput,
+              traces: bucket.trace_count.value,
+              connected_services: connectedServices.sort(),
+              number_of_connected_services: connectedServices.length,
+            };
+          })
+      );
+    })
+    .then((newItems) => {
+      setItems(newItems);
+    })
+    .catch((error) => console.error(error));
+};
+
+export const handleServiceMapRequest = async (
+  http: HttpSetup,
+  DSL: DSLService | any,
+  setItems?: any,
+  currService?: string
+) => {
+  let minutesInDateRange: number;
+  const startTime = DSL.custom?.timeFilter?.[0]?.range?.startTime;
+  if (startTime) {
+    const gte = dateMath.parse(startTime.gte)!;
+    const lte = dateMath.parse(startTime.lte, { roundUp: true })!;
+    minutesInDateRange = lte.diff(gte, 'minutes', true);
+  }
+
+  const map: ServiceObject = {};
+  let id = 1;
+  await handleDslRequest(http, null, getServiceNodesQuery())
+    .then((response) =>
+      response.aggregations.service_name.buckets.map(
+        (bucket: any) =>
+          (map[bucket.key] = {
+            serviceName: bucket.key,
+            id: id++,
+            traceGroups: bucket.trace_group.buckets.map((traceGroup: any) => ({
+              traceGroup: traceGroup.key,
+              targetResource: traceGroup.target_resource.buckets.map((res: any) => res.key),
+            })),
+            targetServices: [],
+            destServices: [],
+          })
+      )
+    )
+    .catch((error) => console.error(error));
+
+  const targets = {};
+  await handleDslRequest(http, null, getServiceEdgesQuery('target'))
+    .then((response) =>
+      response.aggregations.service_name.buckets.map((bucket: any) => {
+        bucket.resource.buckets.map((resource: any) => {
+          resource.domain.buckets.map((domain: any) => {
+            targets[resource.key + ':' + domain.key] = bucket.key;
+          });
+        });
+      })
+    )
+    .catch((error) => console.error(error));
+  await handleDslRequest(http, null, getServiceEdgesQuery('destination'))
+    .then((response) =>
+      Promise.all(
+        response.aggregations.service_name.buckets.map((bucket: any) => {
+          bucket.resource.buckets.map((resource: any) => {
+            resource.domain.buckets.map((domain: any) => {
+              const targetService = targets[resource.key + ':' + domain.key];
+              if (targetService) {
+                if (map[bucket.key].targetServices.indexOf(targetService) === -1)
+                  map[bucket.key].targetServices.push(targetService);
+                if (map[targetService].destServices.indexOf(bucket.key) === -1)
+                  map[targetService].destServices.push(bucket.key);
+              }
+            });
+          });
+        })
+      )
+    )
+    .catch((error) => console.error(error));
+
+  // service map handles DSL differently
+  const latencies = await handleDslRequest(
+    http,
+    DSL,
+    getServiceMetricsQuery(DSL, Object.keys(map), map)
+  );
+  latencies.aggregations.service_name.buckets.map((bucket: any) => {
+    map[bucket.key].latency = bucket.average_latency.value;
+    map[bucket.key].error_rate = _.round(bucket.error_rate.value, 2) || 0;
+    map[bucket.key].throughput = bucket.doc_count;
+    if (minutesInDateRange != null)
+      map[bucket.key].throughputPerMinute = _.round(bucket.doc_count / minutesInDateRange, 2);
+  });
+
+  if (currService) {
+    await handleDslRequest(http, DSL, getRelatedServicesQuery(currService))
+      .then((response) =>
+        response.aggregations.traces.buckets.filter((bucket: any) => bucket.service.doc_count > 0)
+      )
+      .then((traces) => {
+        const maxNumServices = Object.keys(map).length;
+        const relatedServices = new Set<string>();
+        for (let i = 0; i < traces.length; i++) {
+          traces[i].all_services.buckets.map((bucket: any) => relatedServices.add(bucket.key));
+          if (relatedServices.size === maxNumServices) break;
+        }
+        map[currService].relatedServices = [...relatedServices];
+      })
+      .catch((error) => console.error(error));
+  }
+
+  if (setItems) setItems(map);
+  return map;
+};
+
+export const handleServiceViewRequest = (
+  serviceName: string,
+  http: HttpSetup,
+  DSL: any,
+  setFields: any
+) => {
+  handleDslRequest(http, DSL, getServicesQuery(serviceName))
+    .then(async (response) => {
+      const bucket = response.aggregations.service.buckets[0];
+      if (!bucket) return {};
+      const serviceObject: ServiceObject = await handleServiceMapRequest(http, DSL);
+      const connectedServices = [
+        ...serviceObject[bucket.key].targetServices,
+        ...serviceObject[bucket.key].destServices,
+      ];
+      return {
+        name: bucket.key,
+        connected_services: connectedServices.sort(),
+        number_of_connected_services: connectedServices.length,
+        average_latency: serviceObject[bucket.key].latency,
+        error_rate: serviceObject[bucket.key].error_rate,
+        throughput: serviceObject[bucket.key].throughput,
+        traces: bucket.trace_count.value,
+      };
+    })
+    .then((newFields) => {
+      setFields(newFields);
+    })
+    .catch((error) => console.error(error));
+};
diff --git a/public/components/trace_analytics/requests/traces_request_handler.ts b/public/components/trace_analytics/requests/traces_request_handler.ts
new file mode 100644
index 0000000000..8766808658
--- /dev/null
+++ b/public/components/trace_analytics/requests/traces_request_handler.ts
@@ -0,0 +1,297 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable no-console */
+
+import { BarOrientation } from '../../../../common/constants/shared';
+import _ from 'lodash';
+import moment from 'moment';
+import { v1 as uuid } from 'uuid';
+import { HttpSetup } from '../../../../../../src/core/public';
+import { TRACE_ANALYTICS_DATE_FORMAT } from '../../../../common/constants/trace_analytics';
+import { nanoToMilliSec } from '../components/common/helper_functions';
+import { SpanSearchParams } from '../components/traces/span_detail_table';
+import {
+  getPayloadQuery,
+  getServiceBreakdownQuery,
+  getSpanDetailQuery,
+  getSpanFlyoutQuery,
+  getSpansQuery,
+  getTraceGroupPercentilesQuery,
+  getTracesQuery,
+  getValidTraceIdsQuery,
+} from './queries/traces_queries';
+import { handleDslRequest } from './request_handler';
+
+export const handleValidTraceIds = (http: HttpSetup, DSL: any) => {
+  return handleDslRequest(http, {}, getValidTraceIdsQuery(DSL))
+    .then((response) => response.aggregations.traces.buckets.map((bucket: any) => bucket.key))
+    .catch((error) => console.error(error));
+};
+
+export const handleTracesRequest = async (
+  http: HttpSetup,
+  DSL: any,
+  timeFilterDSL: any,
+  items: any,
+  setItems: (items: any) => void,
+  sort?: any
+) => {
+  const binarySearch = (arr: number[], target: number) => {
+    if (!arr) return Number.NaN;
+    let low = 0;
+    let high = arr.length;
+    let mid;
+    while (low < high) {
+      mid = Math.floor((low + high) / 2);
+      if (arr[mid] < target) low = mid + 1;
+      else high = mid;
+    }
+    return Math.max(0, Math.min(100, low));
+  };
+
+  // percentile should only be affected by timefilter
+  const percentileRanges = await handleDslRequest(
+    http,
+    timeFilterDSL,
+    getTraceGroupPercentilesQuery()
+  ).then((response) => {
+    const map: any = {};
+    response.aggregations.trace_group_name.buckets.forEach((traceGroup: any) => {
+      map[traceGroup.key] = Object.values(traceGroup.percentiles.values).map((value: any) =>
+        nanoToMilliSec(value)
+      );
+    });
+    return map;
+  });
+
+  return handleDslRequest(http, DSL, getTracesQuery(undefined, sort))
+    .then((response) => {
+      return Promise.all(
+        response.aggregations.traces.buckets.map((bucket: any) => {
+          return {
+            trace_id: bucket.key,
+            trace_group: bucket.trace_group.buckets[0]?.key,
+            latency: bucket.latency.value,
+            last_updated: moment(bucket.last_updated.value).format(TRACE_ANALYTICS_DATE_FORMAT),
+            error_count: bucket.error_count.doc_count,
+            percentile_in_trace_group: binarySearch(
+              percentileRanges[bucket.trace_group.buckets[0]?.key],
+              bucket.latency.value
+            ),
+            actions: '#',
+          };
+        })
+      );
+    })
+    .then((newItems) => {
+      setItems(newItems);
+    })
+    .catch((error) => console.error(error));
+};
+
+export const handleTraceViewRequest = (
+  traceId: string,
+  http: HttpSetup,
+  fields: {},
+  setFields: (fields: any) => void
+) => {
+  handleDslRequest(http, null, getTracesQuery(traceId))
+    .then(async (response) => {
+      const bucket = response.aggregations.traces.buckets[0];
+      return {
+        trace_id: bucket.key,
+        trace_group: bucket.trace_group.buckets[0]?.key,
+        last_updated: moment(bucket.last_updated.value).format(TRACE_ANALYTICS_DATE_FORMAT),
+        user_id: 'N/A',
+        latency: bucket.latency.value,
+        latency_vs_benchmark: 'N/A',
+        percentile_in_trace_group: 'N/A',
+        error_count: bucket.error_count.doc_count,
+        errors_vs_benchmark: 'N/A',
+      };
+    })
+    .then((newFields) => {
+      setFields(newFields);
+    })
+    .catch((error) => console.error(error));
+};
+
+// setColorMap sets serviceName to color mappings
+export const handleServicesPieChartRequest = async (
+  traceId: string,
+  http: HttpSetup,
+  setServiceBreakdownData: (serviceBreakdownData: any) => void,
+  setColorMap: (colorMap: any) => void
+) => {
+  const colors = [
+    '#7492e7',
+    '#c33d69',
+    '#2ea597',
+    '#8456ce',
+    '#e07941',
+    '#3759ce',
+    '#ce567c',
+    '#9469d6',
+    '#4066df',
+    '#da7596',
+    '#a783e1',
+    '#5978e3',
+  ];
+  const colorMap: any = {};
+  let index = 0;
+  await handleDslRequest(http, null, getServiceBreakdownQuery(traceId))
+    .then((response) =>
+      Promise.all(
+        response.aggregations.service_type.buckets.map((bucket: any) => {
+          colorMap[bucket.key] = colors[index++ % colors.length];
+          return {
+            name: bucket.key,
+            color: colorMap[bucket.key],
+            value: bucket.total_latency.value,
+            benchmark: 0,
+          };
+        })
+      )
+    )
+    .then((newItems) => {
+      const latencySum = newItems.map((item) => item.value).reduce((a, b) => a + b, 0);
+      return [
+        {
+          values: newItems.map((item) =>
+            latencySum === 0 ? 100 : (item.value / latencySum) * 100
+          ),
+          labels: newItems.map((item) => item.name),
+          benchmarks: newItems.map((item) => item.benchmark),
+          marker: {
+            colors: newItems.map((item) => item.color),
+          },
+          type: 'pie',
+          textinfo: 'none',
+          hovertemplate: '%{label}<br>%{value:.2f}%<extra></extra>',
+        },
+      ];
+    })
+    .then((newItems) => {
+      setServiceBreakdownData(newItems);
+      setColorMap(colorMap);
+    })
+    .catch((error) => console.error(error));
+};
+
+export const handleSpansGanttRequest = (
+  traceId: string,
+  http: HttpSetup,
+  setSpanDetailData: (spanDetailData: any) => void,
+  colorMap: any,
+  spanFiltersDSL: any
+) => {
+  handleDslRequest(http, spanFiltersDSL, getSpanDetailQuery(traceId))
+    .then((response) => hitsToSpanDetailData(response.hits.hits, colorMap))
+    .then((newItems) => setSpanDetailData(newItems))
+    .catch((error) => console.error(error));
+};
+
+export const handleSpansFlyoutRequest = (
+  http: HttpSetup,
+  spanId: string,
+  setItems: (items: any) => void
+) => {
+  handleDslRequest(http, null, getSpanFlyoutQuery(spanId))
+    .then((response) => {
+      setItems(response?.hits.hits?.[0]?._source);
+    })
+    .catch((error) => console.error(error));
+};
+
+const hitsToSpanDetailData = async (hits: any, colorMap: any) => {
+  const data: { gantt: any[]; table: any[]; ganttMaxX: number } = {
+    gantt: [],
+    table: [],
+    ganttMaxX: 0,
+  };
+  if (hits.length === 0) return data;
+
+  const minStartTime = nanoToMilliSec(hits[hits.length - 1].sort[0]);
+  let maxEndTime = 0;
+
+  hits.forEach((hit: any) => {
+    const startTime = nanoToMilliSec(hit.sort[0]) - minStartTime;
+    const duration = _.round(nanoToMilliSec(hit._source.durationInNanos), 2);
+    const serviceName = _.get(hit, ['_source', 'serviceName']);
+    const name = _.get(hit, '_source.name');
+    const error = hit._source['status.code'] === 2 ? ' \u26a0 Error' : '';
+    const uniqueLabel = `${serviceName} <br>${name} ` + uuid();
+    maxEndTime = Math.max(maxEndTime, startTime + duration);
+
+    data.table.push({
+      service_name: serviceName,
+      span_id: hit._source.spanId,
+      latency: duration,
+      vs_benchmark: 0,
+      error,
+      start_time: hit._source.startTime,
+      end_time: hit._source.endTime,
+    });
+    data.gantt.push(
+      {
+        x: [startTime],
+        y: [uniqueLabel],
+        marker: {
+          color: 'rgba(0, 0, 0, 0)',
+        },
+        width: 0.4,
+        type: 'bar',
+        orientation: BarOrientation.horizontal,
+        hoverinfo: 'none',
+        showlegend: false,
+        spanId: hit._source.spanId,
+      },
+      {
+        x: [duration],
+        y: [uniqueLabel],
+        text: [error],
+        textfont: { color: ['#c14125'] },
+        textposition: 'outside',
+        marker: {
+          color: colorMap[serviceName],
+        },
+        width: 0.4,
+        type: 'bar',
+        orientation: BarOrientation.horizontal,
+        hovertemplate: '%{x}<extra></extra>',
+        spanId: hit._source.spanId,
+      }
+    );
+  });
+
+  data.ganttMaxX = maxEndTime;
+  return data;
+};
+
+export const handlePayloadRequest = (
+  traceId: string,
+  http: HttpSetup,
+  payloadData: any,
+  setPayloadData: (payloadData: any) => void
+) => {
+  handleDslRequest(http, null, getPayloadQuery(traceId))
+    .then((response) => setPayloadData(JSON.stringify(response.hits.hits, null, 2)))
+    .catch((error) => console.error(error));
+};
+
+export const handleSpansRequest = (
+  http: HttpSetup,
+  setItems: (items: any) => void,
+  setTotal: (total: number) => void,
+  spanSearchParams: SpanSearchParams,
+  DSL: any
+) => {
+  handleDslRequest(http, DSL, getSpansQuery(spanSearchParams))
+    .then((response) => {
+      setItems(response.hits.hits.map((hit: any) => hit._source));
+      setTotal(response.hits.total?.value || 0);
+    })
+    .catch((error) => console.error(error));
+};
diff --git a/public/components/visualizations/assets/__tests__/__snapshots__/assets.test.tsx.snap b/public/components/visualizations/assets/__tests__/__snapshots__/assets.test.tsx.snap
new file mode 100644
index 0000000000..3b213ff7d2
--- /dev/null
+++ b/public/components/visualizations/assets/__tests__/__snapshots__/assets.test.tsx.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Assets components Renders lens icon of bar component 1`] = `
+<LensIconChartBar>
+  <svg
+    fill="none"
+    height={22}
+    viewBox="0 0 30 22"
+    width={30}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      className="lensChartIcon__subdued"
+      d="M5 7a1 1 0 011 1v13a1 1 0 01-1 1H1a1 1 0 01-1-1V8a1 1 0 011-1h4zm16-7a1 1 0 011 1v20a1 1 0 01-1 1h-4a1 1 0 01-1-1V1a1 1 0 011-1h4z"
+    />
+    <path
+      className="lensChartIcon__accent"
+      d="M13 11a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4zm16-7a1 1 0 011 1v16a1 1 0 01-1 1h-4a1 1 0 01-1-1V5a1 1 0 011-1h4z"
+    />
+  </svg>
+</LensIconChartBar>
+`;
+
+exports[`Assets components Renders lens icon of horizontal bar component 1`] = `
+<LensIconChartBarHorizontal>
+  <svg
+    fill="none"
+    height={22}
+    viewBox="0 0 30 22"
+    width={30}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      className="lensChartIcon__subdued"
+      d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1v-4a1 1 0 011-1h28zM22 0a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h21z"
+    />
+    <path
+      className="lensChartIcon__accent"
+      d="M0 9a1 1 0 011-1h15a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V9z"
+    />
+  </svg>
+</LensIconChartBarHorizontal>
+`;
+
+exports[`Assets components Renders lens icon of line component 1`] = `
+<LensIconChartLine>
+  <svg
+    fill="none"
+    height={22}
+    viewBox="0 0 30 22"
+    width={30}
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      className="lensChartIcon__subdued"
+      d="M23.434 16.456c.211.553.406.982.58 1.277l.073.119c.038.058.072.105.101.141.52-.04 1.07-.248 2.13-.77l.235-.117C28.198 16.283 28.953 16 30 16v2c-.507 0-.988.146-1.89.571l-1.209.592C25.621 19.78 24.924 20 24 20l-.174-.005c-1.251-.076-1.805-1.036-2.994-4.993L22.93 15c.18.563.335 1.012.505 1.455zM6 1c1.269 0 1.966.69 3.492 2.939l.774 1.146.272.387.26.358C11.419 6.658 11.788 7 12 7c.466 0 .967-.252 1.99-.997l.891-.659.458-.325C16.424 4.272 17.093 4 18 4c1.377 0 1.925.863 3.168 4.999L19.07 9a26.766 26.766 0 00-.505-1.457c-.24-.631-.46-1.1-.652-1.395l-.051-.074-.045-.06c-.452.064-.988.375-2.007 1.13l-.691.512-.458.325C13.576 8.728 12.907 9 12 9c-1.269 0-1.966-.69-3.492-2.939l-.774-1.146-.272-.387-.26-.358C6.581 3.342 6.213 3 6 3c-.294 0-.885.651-2.017 2.33l-.491.731-.326.475C1.859 8.409 1.175 9 0 9V7c.294 0 .885-.651 2.017-2.33l.491-.731.326-.475C4.141 1.591 4.825 1 6 1z"
+    />
+    <path
+      className="lensChartIcon__accent"
+      d="M0 21c1.123 0 1.852-.477 3.295-1.885l.758-.75.345-.33C5.208 17.275 5.648 17 6 17c.466 0 .967.252 1.99.997l.891.659.458.325C10.424 19.728 11.093 20 12 20c1.325 0 1.996-.772 3.546-3.444l.593-1.028.385-.646C17.328 13.562 17.796 13 18 13h6c1.333 0 1.978-.795 3.452-3.676l.692-1.37.358-.69C29.333 5.7 29.831 5 30 5V3c-1.333 0-1.978.795-3.452 3.676l-.692 1.37-.358.69C24.667 10.3 24.169 11 24 11h-6c-1.325 0-1.996.772-3.546 3.444l-.593 1.028-.385.646C12.672 17.438 12.204 18 12 18c-.466 0-.967-.252-1.99-.997l-.891-.659-.458-.325C7.576 15.272 6.907 15 6 15c-1.123 0-1.852.477-3.295 1.885l-.758.75-.345.33C.792 18.725.352 19 0 19v2z"
+    />
+  </svg>
+</LensIconChartLine>
+`;
diff --git a/public/components/visualizations/assets/__tests__/assets.test.tsx b/public/components/visualizations/assets/__tests__/assets.test.tsx
new file mode 100644
index 0000000000..3b3263533e
--- /dev/null
+++ b/public/components/visualizations/assets/__tests__/assets.test.tsx
@@ -0,0 +1,56 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { LensIconChartBar } from '../chart_bar';
+import { LensIconChartBarHorizontal } from '../chart_bar_horizontal';
+import { LensIconChartLine } from '../chart_line';
+
+
+describe('Assets components', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders lens icon of bar component', async () => {
+    
+    const wrapper = mount(
+      <LensIconChartBar />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders lens icon of horizontal bar component', async () => {
+    
+    const wrapper = mount(
+      <LensIconChartBarHorizontal />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('Renders lens icon of line component', async () => {
+    
+    const wrapper = mount(
+      <LensIconChartLine />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/visualizations/assets/chart_bar.tsx b/public/components/visualizations/assets/chart_bar.tsx
new file mode 100644
index 0000000000..3ee43ea227
--- /dev/null
+++ b/public/components/visualizations/assets/chart_bar.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+
+export const LensIconChartBar = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+  <svg
+    viewBox="0 0 30 22"
+    width={30}
+    height={22}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M5 7a1 1 0 011 1v13a1 1 0 01-1 1H1a1 1 0 01-1-1V8a1 1 0 011-1h4zm16-7a1 1 0 011 1v20a1 1 0 01-1 1h-4a1 1 0 01-1-1V1a1 1 0 011-1h4z"
+      className="lensChartIcon__subdued"
+    />
+    <path
+      d="M13 11a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1v-9a1 1 0 011-1h4zm16-7a1 1 0 011 1v16a1 1 0 01-1 1h-4a1 1 0 01-1-1V5a1 1 0 011-1h4z"
+      className="lensChartIcon__accent"
+    />
+  </svg>
+);
diff --git a/public/components/visualizations/assets/chart_bar_horizontal.tsx b/public/components/visualizations/assets/chart_bar_horizontal.tsx
new file mode 100644
index 0000000000..0ccfa6a6cb
--- /dev/null
+++ b/public/components/visualizations/assets/chart_bar_horizontal.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+
+export const LensIconChartBarHorizontal = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => (
+  <svg
+    viewBox="0 0 30 22"
+    width={30}
+    height={22}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M29 16a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1v-4a1 1 0 011-1h28zM22 0a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h21z"
+      className="lensChartIcon__subdued"
+    />
+    <path
+      d="M0 9a1 1 0 011-1h15a1 1 0 011 1v4a1 1 0 01-1 1H1a1 1 0 01-1-1V9z"
+      className="lensChartIcon__accent"
+    />
+  </svg>
+);
diff --git a/public/components/visualizations/assets/chart_datatable.tsx b/public/components/visualizations/assets/chart_datatable.tsx
new file mode 100644
index 0000000000..d6a5cb733e
--- /dev/null
+++ b/public/components/visualizations/assets/chart_datatable.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+
+export const LensIconChartDatatable = ({
+  title,
+  titleId,
+  ...props
+}: Omit<EuiIconProps, 'type'>) => (
+  <svg
+    viewBox="0 0 30 22"
+    width={30}
+    height={22}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M11 18a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1v-2a1 1 0 011-1h10zm0-6a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1v-2a1 1 0 011-1h10zm0-6a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1V7a1 1 0 011-1h10zm18-6a1 1 0 011 1v2a1 1 0 01-1 1H1a1 1 0 01-1-1V1a1 1 0 011-1h28z"
+      className="lensChartIcon__subdued"
+    />
+    <path
+      d="M20 18a1 1 0 011 1v2a1 1 0 01-.883.993L20 22h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm9 0a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm-9-6a1 1 0 011 1v2a1 1 0 01-.883.993L20 16h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm9 0a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1v-2a1 1 0 011-1h5zm-9-6a1 1 0 011 1v2a1 1 0 01-.883.993L20 10h-5a1 1 0 01-1-1V7a1 1 0 011-1h5zm9 0a1 1 0 011 1v2a1 1 0 01-1 1h-5a1 1 0 01-1-1V7a1 1 0 011-1h5z"
+      className="lensChartIcon__accent"
+    />
+  </svg>
+);
diff --git a/public/components/visualizations/assets/chart_line.tsx b/public/components/visualizations/assets/chart_line.tsx
new file mode 100644
index 0000000000..af6b1294ca
--- /dev/null
+++ b/public/components/visualizations/assets/chart_line.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+
+export const LensIconChartLine = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+  <svg
+    viewBox="0 0 30 22"
+    width={30}
+    height={22}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M23.434 16.456c.211.553.406.982.58 1.277l.073.119c.038.058.072.105.101.141.52-.04 1.07-.248 2.13-.77l.235-.117C28.198 16.283 28.953 16 30 16v2c-.507 0-.988.146-1.89.571l-1.209.592C25.621 19.78 24.924 20 24 20l-.174-.005c-1.251-.076-1.805-1.036-2.994-4.993L22.93 15c.18.563.335 1.012.505 1.455zM6 1c1.269 0 1.966.69 3.492 2.939l.774 1.146.272.387.26.358C11.419 6.658 11.788 7 12 7c.466 0 .967-.252 1.99-.997l.891-.659.458-.325C16.424 4.272 17.093 4 18 4c1.377 0 1.925.863 3.168 4.999L19.07 9a26.766 26.766 0 00-.505-1.457c-.24-.631-.46-1.1-.652-1.395l-.051-.074-.045-.06c-.452.064-.988.375-2.007 1.13l-.691.512-.458.325C13.576 8.728 12.907 9 12 9c-1.269 0-1.966-.69-3.492-2.939l-.774-1.146-.272-.387-.26-.358C6.581 3.342 6.213 3 6 3c-.294 0-.885.651-2.017 2.33l-.491.731-.326.475C1.859 8.409 1.175 9 0 9V7c.294 0 .885-.651 2.017-2.33l.491-.731.326-.475C4.141 1.591 4.825 1 6 1z"
+      className="lensChartIcon__subdued"
+    />
+    <path
+      d="M0 21c1.123 0 1.852-.477 3.295-1.885l.758-.75.345-.33C5.208 17.275 5.648 17 6 17c.466 0 .967.252 1.99.997l.891.659.458.325C10.424 19.728 11.093 20 12 20c1.325 0 1.996-.772 3.546-3.444l.593-1.028.385-.646C17.328 13.562 17.796 13 18 13h6c1.333 0 1.978-.795 3.452-3.676l.692-1.37.358-.69C29.333 5.7 29.831 5 30 5V3c-1.333 0-1.978.795-3.452 3.676l-.692 1.37-.358.69C24.667 10.3 24.169 11 24 11h-6c-1.325 0-1.996.772-3.546 3.444l-.593 1.028-.385.646C12.672 17.438 12.204 18 12 18c-.466 0-.967-.252-1.99-.997l-.891-.659-.458-.325C7.576 15.272 6.907 15 6 15c-1.123 0-1.852.477-3.295 1.885l-.758.75-.345.33C.792 18.725.352 19 0 19v2z"
+      className="lensChartIcon__accent"
+    />
+  </svg>
+);
diff --git a/public/components/visualizations/assets/chart_pie.tsx b/public/components/visualizations/assets/chart_pie.tsx
new file mode 100644
index 0000000000..56a18b9d61
--- /dev/null
+++ b/public/components/visualizations/assets/chart_pie.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiIconProps } from '@elastic/eui';
+
+export const LensIconChartPie = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
+  <svg
+    viewBox="0 0 30 22"
+    width={30}
+    height={22}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M17.827 21.189a10.001 10.001 0 005.952-7.148c.124-.578-.343-1.091-.935-1.091H14a1 1 0 01-1-1V3.106c0-.592-.513-1.059-1.092-.935a10 10 0 105.919 19.018z"
+      className="lensChartIcon__subdued"
+    />
+    <path
+      d="M22.462 3.538A12.29 12.29 0 0016.094.16C15.512.048 15 .514 15 1.106V10a1 1 0 001 1h8.895c.591 0 1.057-.512.945-1.094a12.288 12.288 0 00-3.378-6.368z"
+      className="lensChartIcon__accent"
+    />
+  </svg>
+);
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
new file mode 100644
index 0000000000..bbbb719316
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/bar.test.tsx.snap
@@ -0,0 +1,603 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Veritcal Bar component Renders veritcal bar component 1`] = `
+<Bar
+  config={true}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "barwidth": 0.97,
+        "category": "Visualizations",
+        "categoryaxis": "xaxis",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Series",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "legend",
+                  "mapTo": "legend",
+                  "name": "Legend",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "showLegend",
+                      "name": "Show legend",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "position",
+                      "name": "Position",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Bottom",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "legendSize",
+                      "name": "Legend size",
+                      "title": "Legend size",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "id": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0,
+                      "eleType": "slider",
+                      "mapTo": "rotateBarLabels",
+                      "name": "Rotate bar labels",
+                      "props": Object {
+                        "max": 90,
+                        "min": -90,
+                        "showTicks": true,
+                        "ticks": Array [
+                          Object {
+                            "label": "-90°",
+                            "value": -90,
+                          },
+                          Object {
+                            "label": "-45°",
+                            "value": -45,
+                          },
+                          Object {
+                            "label": "0°",
+                            "value": 0,
+                          },
+                          Object {
+                            "label": "45°",
+                            "value": 45,
+                          },
+                          Object {
+                            "label": "90°",
+                            "value": 90,
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.7,
+                      "eleType": "slider",
+                      "mapTo": "groupWidth",
+                      "name": "Group width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.97,
+                      "eleType": "slider",
+                      "mapTo": "barWidth",
+                      "name": "Bar width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 2,
+                      "eleType": "slider",
+                      "mapTo": "lineWidth",
+                      "name": "Line width",
+                      "props": Object {
+                        "max": 10,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 70,
+                      "eleType": "slider",
+                      "mapTo": "fillOpacity",
+                      "name": "Fill opacity",
+                      "props": Object {
+                        "max": 100,
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "color-theme",
+                  "mapTo": "colorTheme",
+                  "name": "Color theme",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "editor": [Function],
+              "id": "availability-panel",
+              "mapTo": "availabilityConfig",
+              "name": "Availability",
+            },
+          ],
+        },
+        "fillopacity": 70,
+        "fulllabel": "Vertical bar",
+        "groupwidth": 0.7,
+        "icon": [Function],
+        "icontype": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Vertical bar",
+        "labelangle": 0,
+        "legendposition": "v",
+        "linewidth": 2,
+        "mode": "group",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesaxis": "yaxis",
+        "showlegend": "show",
+        "type": "bar",
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <VisCanvassPlaceholder
+    icon="visBarVerticalStacked"
+    message="Missing aggregations"
+  >
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
+    >
+      <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="visBarVerticalStacked"
+                >
+                  <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>
+                  Missing aggregations
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </VisCanvassPlaceholder>
+</Bar>
+`;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap
new file mode 100644
index 0000000000..98c317106b
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/data_table.test.tsx.snap
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Data table component Renders data table component 1`] = `
+<Fragment>
+  <AgGridReact
+    animateRows={true}
+    columnDefs={
+      Array [
+        Object {
+          "colId": "count()",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "count()",
+          "headerName": "count()",
+          "lockVisible": true,
+        },
+        Object {
+          "colId": "tags",
+          "columnsMenuParams": Object {
+            "suppressColumnExpandAll": true,
+            "suppressColumnFilter": true,
+            "suppressColumnSelectAll": true,
+          },
+          "field": "tags",
+          "headerName": "tags",
+          "lockVisible": true,
+        },
+      ]
+    }
+    defaultColDef={
+      Object {
+        "filter": undefined,
+        "flex": 1,
+        "headerHeight": 400,
+        "minWidth": 100,
+        "resizable": true,
+        "sortable": true,
+        "suppressMenu": false,
+        "type": undefined,
+      }
+    }
+    domLayout="autoHeight"
+    onGridReady={[Function]}
+    paginationPageSize={10}
+    rowData={
+      Array [
+        Object {
+          "count()": 154,
+          "tags": "error",
+        },
+        Object {
+          "count()": 1753,
+          "tags": "info",
+        },
+        Object {
+          "count()": 116,
+          "tags": "login",
+        },
+        Object {
+          "count()": 468,
+          "tags": "security",
+        },
+        Object {
+          "count()": 1964,
+          "tags": "success",
+        },
+        Object {
+          "count()": 219,
+          "tags": "warning",
+        },
+      ]
+    }
+    rowHeight={35}
+    suppressFieldDotNotation={true}
+    suppressPaginationPanel={true}
+  />
+</Fragment>
+`;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
new file mode 100644
index 0000000000..70e513288d
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/gauge.test.tsx.snap
@@ -0,0 +1,465 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Gauge component Renders gauge component 1`] = `
+<Gauge
+  config={true}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "category": "Visualizations",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "chart-styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "orientation",
+                      "name": "Orientation",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "auto",
+                            "name": "Auto",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "auto",
+                            "name": "Auto",
+                          },
+                          Object {
+                            "id": "v",
+                            "name": "Vertical",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Horizontal",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "legendPlacement",
+                      "name": "Legend placement",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "center",
+                            "name": "Center",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "center",
+                            "name": "Center",
+                          },
+                          Object {
+                            "id": "right",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "left",
+                            "name": "Left",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "titleSize",
+                      "name": "Title size",
+                      "title": "Title size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "valueSize",
+                      "name": "Value size",
+                      "title": "Value size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "currentValue": false,
+                      "eleType": "switchButton",
+                      "mapTo": "showThresholdLabels",
+                      "name": "Show threshold labels",
+                      "title": "Show threshold labels",
+                    },
+                    Object {
+                      "component": [Function],
+                      "currentValue": true,
+                      "eleType": "switchButton",
+                      "mapTo": "showThresholdMarkers",
+                      "name": "Show threshold markers",
+                      "title": "Show threshold markers",
+                    },
+                  ],
+                },
+                Object {
+                  "defaultState": Array [],
+                  "editor": [Function],
+                  "id": "thresholds",
+                  "mapTo": "thresholds",
+                  "name": "Thresholds",
+                  "props": Object {
+                    "maxLimit": 1,
+                  },
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "content": Array [],
+              "editor": [Function],
+              "id": "style-panel",
+              "mapTo": "layoutConfig",
+              "name": "Layout",
+            },
+          ],
+        },
+        "fulllabel": "Gauge",
+        "icon": [Function],
+        "icontype": "visGauge",
+        "id": "gauge",
+        "label": "Gauge",
+        "name": "Gauge",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "type": "indicator",
+        "valueseries": "yaxis",
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <EmptyPlaceholder
+    icon="visGauge"
+  >
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
+    >
+      <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="visGauge"
+                >
+                  <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 data found"
+                    id="visualization_noData"
+                    values={Object {}}
+                  >
+                    <span>
+                      No data found
+                    </span>
+                  </FormattedMessage>
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </EmptyPlaceholder>
+</Gauge>
+`;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
new file mode 100644
index 0000000000..967f3492ea
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/heatmap.test.tsx.snap
@@ -0,0 +1,603 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Heatmap component Renders heatmap component 1`] = `
+<HeatMap
+  config={Object {}}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "barwidth": 0.97,
+        "category": "Visualizations",
+        "categoryaxis": "xaxis",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Series",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "legend",
+                  "mapTo": "legend",
+                  "name": "Legend",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "showLegend",
+                      "name": "Show legend",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "position",
+                      "name": "Position",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Bottom",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "legendSize",
+                      "name": "Legend size",
+                      "title": "Legend size",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "id": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0,
+                      "eleType": "slider",
+                      "mapTo": "rotateBarLabels",
+                      "name": "Rotate bar labels",
+                      "props": Object {
+                        "max": 90,
+                        "min": -90,
+                        "showTicks": true,
+                        "ticks": Array [
+                          Object {
+                            "label": "-90°",
+                            "value": -90,
+                          },
+                          Object {
+                            "label": "-45°",
+                            "value": -45,
+                          },
+                          Object {
+                            "label": "0°",
+                            "value": 0,
+                          },
+                          Object {
+                            "label": "45°",
+                            "value": 45,
+                          },
+                          Object {
+                            "label": "90°",
+                            "value": 90,
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.7,
+                      "eleType": "slider",
+                      "mapTo": "groupWidth",
+                      "name": "Group width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.97,
+                      "eleType": "slider",
+                      "mapTo": "barWidth",
+                      "name": "Bar width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 2,
+                      "eleType": "slider",
+                      "mapTo": "lineWidth",
+                      "name": "Line width",
+                      "props": Object {
+                        "max": 10,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 70,
+                      "eleType": "slider",
+                      "mapTo": "fillOpacity",
+                      "name": "Fill opacity",
+                      "props": Object {
+                        "max": 100,
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "color-theme",
+                  "mapTo": "colorTheme",
+                  "name": "Color theme",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "editor": [Function],
+              "id": "availability-panel",
+              "mapTo": "availabilityConfig",
+              "name": "Availability",
+            },
+          ],
+        },
+        "fillopacity": 70,
+        "fulllabel": "Vertical bar",
+        "groupwidth": 0.7,
+        "icon": [Function],
+        "icontype": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Vertical bar",
+        "labelangle": 0,
+        "legendposition": "v",
+        "linewidth": 2,
+        "mode": "group",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesaxis": "yaxis",
+        "showlegend": "show",
+        "type": "bar",
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <VisCanvassPlaceholder
+    icon="visBarVerticalStacked"
+    message="Invalid data, heatmap can only have exact 2 dimensions and 1 series"
+  >
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
+    >
+      <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="visBarVerticalStacked"
+                >
+                  <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>
+                  Invalid data, heatmap can only have exact 2 dimensions and 1 series
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </VisCanvassPlaceholder>
+</HeatMap>
+`;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
new file mode 100644
index 0000000000..419ff3c03b
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/histogram.test.tsx.snap
@@ -0,0 +1,668 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Histogram component Renders histogram component 1`] = `
+<Histogram
+  config={true}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "barwidth": 0.97,
+        "category": "Visualizations",
+        "categoryaxis": "xaxis",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Series",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "legend",
+                  "mapTo": "legend",
+                  "name": "Legend",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "showLegend",
+                      "name": "Show legend",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "position",
+                      "name": "Position",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Bottom",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "legendSize",
+                      "name": "Legend size",
+                      "title": "Legend size",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "id": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0,
+                      "eleType": "slider",
+                      "mapTo": "rotateBarLabels",
+                      "name": "Rotate bar labels",
+                      "props": Object {
+                        "max": 90,
+                        "min": -90,
+                        "showTicks": true,
+                        "ticks": Array [
+                          Object {
+                            "label": "-90°",
+                            "value": -90,
+                          },
+                          Object {
+                            "label": "-45°",
+                            "value": -45,
+                          },
+                          Object {
+                            "label": "0°",
+                            "value": 0,
+                          },
+                          Object {
+                            "label": "45°",
+                            "value": 45,
+                          },
+                          Object {
+                            "label": "90°",
+                            "value": 90,
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.7,
+                      "eleType": "slider",
+                      "mapTo": "groupWidth",
+                      "name": "Group width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.97,
+                      "eleType": "slider",
+                      "mapTo": "barWidth",
+                      "name": "Bar width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 2,
+                      "eleType": "slider",
+                      "mapTo": "lineWidth",
+                      "name": "Line width",
+                      "props": Object {
+                        "max": 10,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 70,
+                      "eleType": "slider",
+                      "mapTo": "fillOpacity",
+                      "name": "Fill opacity",
+                      "props": Object {
+                        "max": 100,
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "color-theme",
+                  "mapTo": "colorTheme",
+                  "name": "Color theme",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "editor": [Function],
+              "id": "availability-panel",
+              "mapTo": "availabilityConfig",
+              "name": "Availability",
+            },
+          ],
+        },
+        "fillopacity": 70,
+        "fulllabel": "Vertical bar",
+        "groupwidth": 0.7,
+        "icon": [Function],
+        "icontype": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Vertical bar",
+        "labelangle": 0,
+        "legendposition": "v",
+        "linewidth": 2,
+        "mode": "group",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesaxis": "yaxis",
+        "showlegend": "show",
+        "type": "bar",
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <Plt
+    config={Object {}}
+    data={
+      Array [
+        Object {
+          "hoverinfo": "all",
+          "marker": Object {
+            "color": "rgba(60,161,199,0.35)",
+            "line": Object {
+              "color": "rgba(60,161,199,1)",
+              "width": 2,
+            },
+          },
+          "name": "count()",
+          "type": undefined,
+          "x": Array [
+            154,
+            1753,
+            116,
+            468,
+            1964,
+            219,
+          ],
+          "xbins": undefined,
+        },
+      ]
+    }
+    layout={
+      Object {
+        "barmode": "group",
+        "colorway": Array [
+          "#8C55A3",
+        ],
+        "height": 220,
+        "legend": Object {
+          "orientation": "v",
+        },
+        "margin": Object {
+          "b": 30,
+          "l": 30,
+          "pad": 4,
+          "r": 5,
+          "t": 50,
+        },
+        "showlegend": true,
+        "title": "",
+      }
+    }
+  >
+    <PlotlyComponent
+      config={
+        Object {
+          "displayModeBar": false,
+        }
+      }
+      data={
+        Array [
+          Object {
+            "hoverinfo": "all",
+            "marker": Object {
+              "color": "rgba(60,161,199,0.35)",
+              "line": Object {
+                "color": "rgba(60,161,199,1)",
+                "width": 2,
+              },
+            },
+            "name": "count()",
+            "type": undefined,
+            "x": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "xbins": undefined,
+          },
+        ]
+      }
+      debug={false}
+      divId="explorerPlotComponent"
+      layout={
+        Object {
+          "autosize": true,
+          "barmode": "group",
+          "colorway": Array [
+            "#8C55A3",
+          ],
+          "height": 220,
+          "hovermode": "closest",
+          "legend": Object {
+            "orientation": "v",
+          },
+          "margin": Object {
+            "b": 30,
+            "l": 30,
+            "pad": 4,
+            "r": 5,
+            "t": 50,
+          },
+          "showlegend": true,
+          "title": "",
+          "xaxis": Object {
+            "automargin": true,
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+          "yaxis": Object {
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+        }
+      }
+      style={
+        Object {
+          "height": "100%",
+          "width": "100%",
+        }
+      }
+      useResizeHandler={true}
+    >
+      <div
+        id="explorerPlotComponent"
+        style={
+          Object {
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      />
+    </PlotlyComponent>
+  </Plt>
+</Histogram>
+`;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
new file mode 100644
index 0000000000..c8115cee2d
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/horizontal_bar.test.tsx.snap
@@ -0,0 +1,603 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Horizontal bar component Renders horizontal bar component 1`] = `
+<Bar
+  config={true}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "barwidth": 0.97,
+        "category": "Visualizations",
+        "categoryaxis": "xaxis",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Series",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "legend",
+                  "mapTo": "legend",
+                  "name": "Legend",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "showLegend",
+                      "name": "Show legend",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "position",
+                      "name": "Position",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Bottom",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "legendSize",
+                      "name": "Legend size",
+                      "title": "Legend size",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "id": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0,
+                      "eleType": "slider",
+                      "mapTo": "rotateBarLabels",
+                      "name": "Rotate bar labels",
+                      "props": Object {
+                        "max": 90,
+                        "min": -90,
+                        "showTicks": true,
+                        "ticks": Array [
+                          Object {
+                            "label": "-90°",
+                            "value": -90,
+                          },
+                          Object {
+                            "label": "-45°",
+                            "value": -45,
+                          },
+                          Object {
+                            "label": "0°",
+                            "value": 0,
+                          },
+                          Object {
+                            "label": "45°",
+                            "value": 45,
+                          },
+                          Object {
+                            "label": "90°",
+                            "value": 90,
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.7,
+                      "eleType": "slider",
+                      "mapTo": "groupWidth",
+                      "name": "Group width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.97,
+                      "eleType": "slider",
+                      "mapTo": "barWidth",
+                      "name": "Bar width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 2,
+                      "eleType": "slider",
+                      "mapTo": "lineWidth",
+                      "name": "Line width",
+                      "props": Object {
+                        "max": 10,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 70,
+                      "eleType": "slider",
+                      "mapTo": "fillOpacity",
+                      "name": "Fill opacity",
+                      "props": Object {
+                        "max": 100,
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "color-theme",
+                  "mapTo": "colorTheme",
+                  "name": "Color theme",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "editor": [Function],
+              "id": "availability-panel",
+              "mapTo": "availabilityConfig",
+              "name": "Availability",
+            },
+          ],
+        },
+        "fillopacity": 70,
+        "fulllabel": "Horizontal bar",
+        "groupwidth": 0.7,
+        "icon": [Function],
+        "icontype": "visBarHorizontalStacked",
+        "id": "horizontal_bar",
+        "label": "Horizontal bar",
+        "labelangle": 0,
+        "legendposition": "v",
+        "linewidth": 2,
+        "mode": "group",
+        "name": "horizontal_bar",
+        "orientation": "h",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesaxis": "yaxis",
+        "showlegend": "show",
+        "type": "bar",
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <VisCanvassPlaceholder
+    icon="visBarHorizontalStacked"
+    message="Missing aggregations"
+  >
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
+    >
+      <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="visBarHorizontalStacked"
+                >
+                  <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>
+                  Missing aggregations
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </VisCanvassPlaceholder>
+</Bar>
+`;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
new file mode 100644
index 0000000000..9694c40d7c
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/line.test.tsx.snap
@@ -0,0 +1,603 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line component Renders line component 1`] = `
+<Line
+  config={Object {}}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "barwidth": 0.97,
+        "category": "Visualizations",
+        "categoryaxis": "xaxis",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Series",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "legend",
+                  "mapTo": "legend",
+                  "name": "Legend",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "showLegend",
+                      "name": "Show legend",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "position",
+                      "name": "Position",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Bottom",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "legendSize",
+                      "name": "Legend size",
+                      "title": "Legend size",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "id": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0,
+                      "eleType": "slider",
+                      "mapTo": "rotateBarLabels",
+                      "name": "Rotate bar labels",
+                      "props": Object {
+                        "max": 90,
+                        "min": -90,
+                        "showTicks": true,
+                        "ticks": Array [
+                          Object {
+                            "label": "-90°",
+                            "value": -90,
+                          },
+                          Object {
+                            "label": "-45°",
+                            "value": -45,
+                          },
+                          Object {
+                            "label": "0°",
+                            "value": 0,
+                          },
+                          Object {
+                            "label": "45°",
+                            "value": 45,
+                          },
+                          Object {
+                            "label": "90°",
+                            "value": 90,
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.7,
+                      "eleType": "slider",
+                      "mapTo": "groupWidth",
+                      "name": "Group width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.97,
+                      "eleType": "slider",
+                      "mapTo": "barWidth",
+                      "name": "Bar width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 2,
+                      "eleType": "slider",
+                      "mapTo": "lineWidth",
+                      "name": "Line width",
+                      "props": Object {
+                        "max": 10,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 70,
+                      "eleType": "slider",
+                      "mapTo": "fillOpacity",
+                      "name": "Fill opacity",
+                      "props": Object {
+                        "max": 100,
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "color-theme",
+                  "mapTo": "colorTheme",
+                  "name": "Color theme",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "editor": [Function],
+              "id": "availability-panel",
+              "mapTo": "availabilityConfig",
+              "name": "Availability",
+            },
+          ],
+        },
+        "fillopacity": 70,
+        "fulllabel": "Vertical bar",
+        "groupwidth": 0.7,
+        "icon": [Function],
+        "icontype": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Vertical bar",
+        "labelangle": 0,
+        "legendposition": "v",
+        "linewidth": 2,
+        "mode": "group",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesaxis": "yaxis",
+        "showlegend": "show",
+        "type": "bar",
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <VisCanvassPlaceholder
+    icon="visBarVerticalStacked"
+    message="Missing mandatory series"
+  >
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
+    >
+      <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="visBarVerticalStacked"
+                >
+                  <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>
+                  Missing mandatory series
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </VisCanvassPlaceholder>
+</Line>
+`;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap
new file mode 100644
index 0000000000..1a1281d6e2
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/logs_view.test.tsx.snap
@@ -0,0 +1,582 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Logs View component Renders logs view component 1`] = `
+<LogsView
+  config={Object {}}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "barwidth": 0.97,
+        "category": "Visualizations",
+        "categoryaxis": "xaxis",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Series",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "legend",
+                  "mapTo": "legend",
+                  "name": "Legend",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "showLegend",
+                      "name": "Show legend",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "position",
+                      "name": "Position",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Bottom",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "legendSize",
+                      "name": "Legend size",
+                      "title": "Legend size",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "id": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0,
+                      "eleType": "slider",
+                      "mapTo": "rotateBarLabels",
+                      "name": "Rotate bar labels",
+                      "props": Object {
+                        "max": 90,
+                        "min": -90,
+                        "showTicks": true,
+                        "ticks": Array [
+                          Object {
+                            "label": "-90°",
+                            "value": -90,
+                          },
+                          Object {
+                            "label": "-45°",
+                            "value": -45,
+                          },
+                          Object {
+                            "label": "0°",
+                            "value": 0,
+                          },
+                          Object {
+                            "label": "45°",
+                            "value": 45,
+                          },
+                          Object {
+                            "label": "90°",
+                            "value": 90,
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.7,
+                      "eleType": "slider",
+                      "mapTo": "groupWidth",
+                      "name": "Group width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.97,
+                      "eleType": "slider",
+                      "mapTo": "barWidth",
+                      "name": "Bar width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 2,
+                      "eleType": "slider",
+                      "mapTo": "lineWidth",
+                      "name": "Line width",
+                      "props": Object {
+                        "max": 10,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 70,
+                      "eleType": "slider",
+                      "mapTo": "fillOpacity",
+                      "name": "Fill opacity",
+                      "props": Object {
+                        "max": 100,
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "color-theme",
+                  "mapTo": "colorTheme",
+                  "name": "Color theme",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "editor": [Function],
+              "id": "availability-panel",
+              "mapTo": "availabilityConfig",
+              "name": "Availability",
+            },
+          ],
+        },
+        "fillopacity": 70,
+        "fulllabel": "Vertical bar",
+        "groupwidth": 0.7,
+        "icon": [Function],
+        "icontype": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Vertical bar",
+        "labelangle": 0,
+        "legendposition": "v",
+        "linewidth": 2,
+        "mode": "group",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesaxis": "yaxis",
+        "showlegend": "show",
+        "type": "bar",
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <div
+    className="logs-view-container"
+  >
+    <DataGrid
+      explorerFields={
+        Object {
+          "availableFields": Array [],
+          "queriedFields": undefined,
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        }
+      }
+      rawQuery=""
+      rows={Array []}
+      rowsAll={Array []}
+      timeStampField=""
+    >
+      <div
+        className="dscTable dscTableFixedScroll"
+      >
+        <table
+          className="osd-table table"
+          data-test-subj="docTable"
+        >
+          <thead>
+            <tr
+              className="osdDocTableHeader"
+            >
+              <th
+                key="datagrid-header-5"
+              />
+              <th
+                key="datagrid-header-6"
+              >
+                Time
+              </th>
+              <th
+                key="datagrid-header-7"
+              >
+                _source
+              </th>
+            </tr>
+          </thead>
+          <tbody />
+        </table>
+      </div>
+      <div />
+    </DataGrid>
+  </div>
+</LogsView>
+`;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
new file mode 100644
index 0000000000..c001a02af1
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/metrics.test.tsx.snap
@@ -0,0 +1,589 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Metrics component Renders Metrics component 1`] = `
+<Metrics
+  config={true}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "category": "Visualizations",
+        "categoryaxis": "xaxis",
+        "charttype": "auto",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Series",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "chartType",
+                      "name": "Chart type",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "auto",
+                            "name": "Auto",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "auto",
+                            "name": "Auto",
+                          },
+                          Object {
+                            "id": "horizontal",
+                            "name": "Horizontal",
+                          },
+                          Object {
+                            "id": "text",
+                            "name": "Text mode",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "orientation",
+                      "name": "Orientation",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "auto",
+                            "name": "Auto",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "auto",
+                            "name": "Auto",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Horizontal",
+                          },
+                          Object {
+                            "id": "v",
+                            "name": "Vertical",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "textInput",
+                      "mapTo": "seriesUnits",
+                      "name": "Series units",
+                      "title": "Series units",
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "precisionValue",
+                      "name": "Series precision",
+                      "props": Object {
+                        "minLimit": 0,
+                      },
+                      "title": "Series precision",
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "titleSize",
+                      "name": "Title size",
+                      "title": "Title size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "valueSize",
+                      "name": "Value size",
+                      "title": "Value size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "textMode",
+                      "name": "Text mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "auto",
+                            "name": "Values + Names",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "auto",
+                            "name": "Auto",
+                          },
+                          Object {
+                            "id": "names",
+                            "name": "Names",
+                          },
+                          Object {
+                            "id": "values",
+                            "name": "Values",
+                          },
+                          Object {
+                            "id": "values+names",
+                            "name": "Values + Names",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "defaultState": Array [
+                    Object {
+                      "color": "#3CA1C7",
+                      "isReadOnly": true,
+                      "name": "Base",
+                      "thid": "random_html_id",
+                      "value": 0,
+                    },
+                  ],
+                  "editor": [Function],
+                  "id": "thresholds",
+                  "mapTo": "thresholds",
+                  "name": "Thresholds",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "content": Array [],
+              "editor": [Function],
+              "id": "style-panel",
+              "mapTo": "layoutConfig",
+              "name": "Layout",
+            },
+          ],
+        },
+        "fulllabel": "Metrics",
+        "icon": [Function],
+        "icontype": "stats",
+        "id": "metrics",
+        "label": "Metrics",
+        "name": "metrics",
+        "orientation": "auto",
+        "precisionvalue": 1,
+        "seriesaxis": "yaxis",
+        "textmode": "auto",
+        "titlesize": 30,
+        "type": "metrics",
+        "valuesize": 80,
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "layout": Object {
+            "colorway": Array [
+              "#3CA1C7",
+              "#8C55A3",
+              "#DB748A",
+              "#F2BE4B",
+              "#68CCC2",
+              "#2A7866",
+              "#843769",
+              "#374FB8",
+              "#BD6F26",
+              "#4C636F",
+            ],
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "paper_bgcolor": "rgba(0, 0, 0, 0)",
+            "plot_bgcolor": "rgba(0, 0, 0, 0)",
+            "showlegend": true,
+            "xaxis": Object {
+              "fixedrange": true,
+              "showgrid": false,
+              "visible": true,
+            },
+            "yaxis": Object {
+              "fixedrange": true,
+              "showgrid": false,
+              "visible": true,
+            },
+          },
+        },
+      },
+    }
+  }
+>
+  <EmptyPlaceholder
+    icon="stats"
+  >
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
+    >
+      <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="stats"
+                >
+                  <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 data found"
+                    id="visualization_noData"
+                    values={Object {}}
+                  >
+                    <span>
+                      No data found
+                    </span>
+                  </FormattedMessage>
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </EmptyPlaceholder>
+</Metrics>
+`;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
new file mode 100644
index 0000000000..4bcc7e4302
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/pie.test.tsx.snap
@@ -0,0 +1,610 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pie component Renders pie component 1`] = `
+<Pie
+  config={Object {}}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "barwidth": 0.97,
+        "category": "Visualizations",
+        "categoryaxis": "xaxis",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Series",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "legend",
+                  "mapTo": "legend",
+                  "name": "Legend",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "showLegend",
+                      "name": "Show legend",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "position",
+                      "name": "Position",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Bottom",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "legendSize",
+                      "name": "Legend size",
+                      "title": "Legend size",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "id": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0,
+                      "eleType": "slider",
+                      "mapTo": "rotateBarLabels",
+                      "name": "Rotate bar labels",
+                      "props": Object {
+                        "max": 90,
+                        "min": -90,
+                        "showTicks": true,
+                        "ticks": Array [
+                          Object {
+                            "label": "-90°",
+                            "value": -90,
+                          },
+                          Object {
+                            "label": "-45°",
+                            "value": -45,
+                          },
+                          Object {
+                            "label": "0°",
+                            "value": 0,
+                          },
+                          Object {
+                            "label": "45°",
+                            "value": 45,
+                          },
+                          Object {
+                            "label": "90°",
+                            "value": 90,
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.7,
+                      "eleType": "slider",
+                      "mapTo": "groupWidth",
+                      "name": "Group width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.97,
+                      "eleType": "slider",
+                      "mapTo": "barWidth",
+                      "name": "Bar width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 2,
+                      "eleType": "slider",
+                      "mapTo": "lineWidth",
+                      "name": "Line width",
+                      "props": Object {
+                        "max": 10,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 70,
+                      "eleType": "slider",
+                      "mapTo": "fillOpacity",
+                      "name": "Fill opacity",
+                      "props": Object {
+                        "max": 100,
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "color-theme",
+                  "mapTo": "colorTheme",
+                  "name": "Color theme",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "editor": [Function],
+              "id": "availability-panel",
+              "mapTo": "availabilityConfig",
+              "name": "Availability",
+            },
+          ],
+        },
+        "fillopacity": 70,
+        "fulllabel": "Vertical bar",
+        "groupwidth": 0.7,
+        "icon": [Function],
+        "icontype": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Vertical bar",
+        "labelangle": 0,
+        "legendposition": "v",
+        "linewidth": 2,
+        "mode": "group",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesaxis": "yaxis",
+        "showlegend": "show",
+        "type": "bar",
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <EmptyPlaceholder
+    icon="visBarVerticalStacked"
+  >
+    <EuiText
+      className="lnsChart__empty"
+      color="subdued"
+      data-test-subj="vizWorkspace__noData"
+      size="xs"
+      textAlign="center"
+    >
+      <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="visBarVerticalStacked"
+                >
+                  <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 data found"
+                    id="visualization_noData"
+                    values={Object {}}
+                  >
+                    <span>
+                      No data found
+                    </span>
+                  </FormattedMessage>
+                </p>
+              </div>
+            </EuiTextColor>
+          </div>
+        </EuiTextAlign>
+      </div>
+    </EuiText>
+  </EmptyPlaceholder>
+</Pie>
+`;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
new file mode 100644
index 0000000000..762a463168
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/text.test.tsx.snap
@@ -0,0 +1,547 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Text component Renders text component 1`] = `
+<Text
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "barwidth": 0.97,
+        "category": "Visualizations",
+        "categoryaxis": "xaxis",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Series",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "legend",
+                  "mapTo": "legend",
+                  "name": "Legend",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "showLegend",
+                      "name": "Show legend",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "position",
+                      "name": "Position",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Bottom",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "legendSize",
+                      "name": "Legend size",
+                      "title": "Legend size",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "id": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0,
+                      "eleType": "slider",
+                      "mapTo": "rotateBarLabels",
+                      "name": "Rotate bar labels",
+                      "props": Object {
+                        "max": 90,
+                        "min": -90,
+                        "showTicks": true,
+                        "ticks": Array [
+                          Object {
+                            "label": "-90°",
+                            "value": -90,
+                          },
+                          Object {
+                            "label": "-45°",
+                            "value": -45,
+                          },
+                          Object {
+                            "label": "0°",
+                            "value": 0,
+                          },
+                          Object {
+                            "label": "45°",
+                            "value": 45,
+                          },
+                          Object {
+                            "label": "90°",
+                            "value": 90,
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.7,
+                      "eleType": "slider",
+                      "mapTo": "groupWidth",
+                      "name": "Group width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.97,
+                      "eleType": "slider",
+                      "mapTo": "barWidth",
+                      "name": "Bar width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 2,
+                      "eleType": "slider",
+                      "mapTo": "lineWidth",
+                      "name": "Line width",
+                      "props": Object {
+                        "max": 10,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 70,
+                      "eleType": "slider",
+                      "mapTo": "fillOpacity",
+                      "name": "Fill opacity",
+                      "props": Object {
+                        "max": 100,
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "color-theme",
+                  "mapTo": "colorTheme",
+                  "name": "Color theme",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "editor": [Function],
+              "id": "availability-panel",
+              "mapTo": "availabilityConfig",
+              "name": "Availability",
+            },
+          ],
+        },
+        "fillopacity": 70,
+        "fulllabel": "Vertical bar",
+        "groupwidth": 0.7,
+        "icon": [Function],
+        "icontype": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Vertical bar",
+        "labelangle": 0,
+        "legendposition": "v",
+        "linewidth": 2,
+        "mode": "group",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesaxis": "yaxis",
+        "showlegend": "show",
+        "type": "bar",
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <div
+    data-test-subj="workspace__viz_markdown"
+  >
+    <EuiMarkdownFormat>
+      <div
+        className="euiMarkdownFormat"
+      >
+        <div>
+          <h2
+            key="h-2"
+          >
+            Text
+          </h2>
+          
+
+          <p
+            key="h-3"
+          >
+            Welcome to text editor!
+          </p>
+          
+
+          <p
+            key="h-4"
+          >
+            With text editor, you are able to add text description(s) to your dashboards.
+          </p>
+        </div>
+      </div>
+    </EuiMarkdownFormat>
+  </div>
+</Text>
+`;
diff --git a/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
new file mode 100644
index 0000000000..23d4f693af
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/__snapshots__/treemap.test.tsx.snap
@@ -0,0 +1,693 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Treemap component Renders treemap component 1`] = `
+<TreeMap
+  config={Object {}}
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+    }
+  }
+  visualizations={
+    Object {
+      "data": Object {
+        "appData": Object {
+          "fromApp": false,
+        },
+        "defaultAxes": Object {},
+        "indexFields": Object {
+          "availableFields": Array [
+            Object {
+              "name": "agent",
+              "type": "string",
+            },
+            Object {
+              "name": "bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "clientip",
+              "type": "ip",
+            },
+            Object {
+              "name": "event",
+              "type": "struct",
+            },
+            Object {
+              "name": "extension",
+              "type": "string",
+            },
+            Object {
+              "name": "geo",
+              "type": "struct",
+            },
+            Object {
+              "name": "host",
+              "type": "string",
+            },
+            Object {
+              "name": "index",
+              "type": "string",
+            },
+            Object {
+              "name": "ip",
+              "type": "ip",
+            },
+            Object {
+              "name": "machine",
+              "type": "struct",
+            },
+            Object {
+              "name": "memory",
+              "type": "double",
+            },
+            Object {
+              "name": "message",
+              "type": "string",
+            },
+            Object {
+              "name": "phpmemory",
+              "type": "long",
+            },
+            Object {
+              "name": "referer",
+              "type": "string",
+            },
+            Object {
+              "name": "request",
+              "type": "string",
+            },
+            Object {
+              "name": "response",
+              "type": "string",
+            },
+            Object {
+              "name": "tags",
+              "type": "string",
+            },
+            Object {
+              "name": "timestamp",
+              "type": "timestamp",
+            },
+            Object {
+              "name": "url",
+              "type": "string",
+            },
+            Object {
+              "name": "utc_time",
+              "type": "timestamp",
+            },
+          ],
+          "queriedFields": Array [
+            Object {
+              "name": "double_per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "host",
+              "type": "text",
+            },
+            Object {
+              "name": "ip_count",
+              "type": "integer",
+            },
+            Object {
+              "name": "per_ip_bytes",
+              "type": "long",
+            },
+            Object {
+              "name": "resp_code",
+              "type": "text",
+            },
+            Object {
+              "name": "sum_bytes",
+              "type": "long",
+            },
+          ],
+          "selectedFields": Array [],
+          "unselectedFields": Array [],
+        },
+        "query": Object {},
+        "rawVizData": Object {
+          "data": Object {
+            "count()": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+            "tags": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+          },
+          "jsonData": Array [
+            Object {
+              "count()": 154,
+              "tags": "error",
+            },
+            Object {
+              "count()": 1753,
+              "tags": "info",
+            },
+            Object {
+              "count()": 116,
+              "tags": "login",
+            },
+            Object {
+              "count()": 468,
+              "tags": "security",
+            },
+            Object {
+              "count()": 1964,
+              "tags": "success",
+            },
+            Object {
+              "count()": 219,
+              "tags": "warning",
+            },
+          ],
+          "metadata": Object {
+            "fields": Array [
+              Object {
+                "name": "count()",
+                "type": "integer",
+              },
+              Object {
+                "name": "tags",
+                "type": "text",
+              },
+            ],
+            "size": 6,
+            "status": 200,
+          },
+        },
+        "userConfigs": Object {
+          "dataConfig": Object {
+            "valueOptions": Object {
+              "dimensions": Array [
+                Object {
+                  "label": "tags",
+                  "name": "tags",
+                  "type": "text",
+                },
+              ],
+              "metrics": Array [
+                Object {
+                  "label": "count()",
+                  "name": "count()",
+                  "side": "left",
+                  "type": "integer",
+                },
+              ],
+            },
+          },
+        },
+      },
+      "vis": Object {
+        "barwidth": 0.97,
+        "category": "Visualizations",
+        "categoryaxis": "xaxis",
+        "component": [Function],
+        "editorconfig": Object {
+          "panelTabs": Array [
+            Object {
+              "editor": [Function],
+              "id": "data-panel",
+              "mapTo": "dataConfig",
+              "name": "Style",
+              "sections": Array [
+                Object {
+                  "editor": [Function],
+                  "id": "tooltip_options",
+                  "mapTo": "tooltipOptions",
+                  "name": "Tooltip options",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipMode",
+                      "name": "Tooltip mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "tooltipText",
+                      "name": "Tooltip text",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "all",
+                            "name": "All",
+                          },
+                          Object {
+                            "id": "x",
+                            "name": "Dimension",
+                          },
+                          Object {
+                            "id": "y",
+                            "name": "Series",
+                          },
+                        ],
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "legend",
+                  "mapTo": "legend",
+                  "name": "Legend",
+                  "schemas": Array [
+                    Object {
+                      "component": null,
+                      "mapTo": "showLegend",
+                      "name": "Show legend",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "show",
+                            "name": "Show",
+                          },
+                          Object {
+                            "id": "hidden",
+                            "name": "Hidden",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": null,
+                      "mapTo": "position",
+                      "name": "Position",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "v",
+                            "name": "Right",
+                          },
+                          Object {
+                            "id": "h",
+                            "name": "Bottom",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "legendSize",
+                      "name": "Legend size",
+                      "title": "Legend size",
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "chart_styles",
+                  "mapTo": "chartStyles",
+                  "name": "Chart styles",
+                  "schemas": Array [
+                    Object {
+                      "component": [Function],
+                      "eleType": "buttons",
+                      "mapTo": "mode",
+                      "name": "Mode",
+                      "props": Object {
+                        "defaultSelections": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                        ],
+                        "options": Array [
+                          Object {
+                            "id": "group",
+                            "name": "Group",
+                          },
+                          Object {
+                            "id": "stack",
+                            "name": "Stack",
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "eleType": "input",
+                      "mapTo": "labelSize",
+                      "name": "Label size",
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0,
+                      "eleType": "slider",
+                      "mapTo": "rotateBarLabels",
+                      "name": "Rotate bar labels",
+                      "props": Object {
+                        "max": 90,
+                        "min": -90,
+                        "showTicks": true,
+                        "ticks": Array [
+                          Object {
+                            "label": "-90°",
+                            "value": -90,
+                          },
+                          Object {
+                            "label": "-45°",
+                            "value": -45,
+                          },
+                          Object {
+                            "label": "0°",
+                            "value": 0,
+                          },
+                          Object {
+                            "label": "45°",
+                            "value": 45,
+                          },
+                          Object {
+                            "label": "90°",
+                            "value": 90,
+                          },
+                        ],
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.7,
+                      "eleType": "slider",
+                      "mapTo": "groupWidth",
+                      "name": "Group width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 0.97,
+                      "eleType": "slider",
+                      "mapTo": "barWidth",
+                      "name": "Bar width",
+                      "props": Object {
+                        "max": 1,
+                        "step": 0.01,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 2,
+                      "eleType": "slider",
+                      "mapTo": "lineWidth",
+                      "name": "Line width",
+                      "props": Object {
+                        "max": 10,
+                      },
+                    },
+                    Object {
+                      "component": [Function],
+                      "defaultState": 70,
+                      "eleType": "slider",
+                      "mapTo": "fillOpacity",
+                      "name": "Fill opacity",
+                      "props": Object {
+                        "max": 100,
+                      },
+                    },
+                  ],
+                },
+                Object {
+                  "editor": [Function],
+                  "id": "color-theme",
+                  "mapTo": "colorTheme",
+                  "name": "Color theme",
+                  "schemas": Array [],
+                },
+              ],
+            },
+            Object {
+              "editor": [Function],
+              "id": "availability-panel",
+              "mapTo": "availabilityConfig",
+              "name": "Availability",
+            },
+          ],
+        },
+        "fillopacity": 70,
+        "fulllabel": "Vertical bar",
+        "groupwidth": 0.7,
+        "icon": [Function],
+        "icontype": "visBarVerticalStacked",
+        "id": "bar",
+        "label": "Vertical bar",
+        "labelangle": 0,
+        "legendposition": "v",
+        "linewidth": 2,
+        "mode": "group",
+        "name": "bar",
+        "orientation": "v",
+        "selection": Object {
+          "dataLoss": "nothing",
+        },
+        "seriesaxis": "yaxis",
+        "showlegend": "show",
+        "type": "bar",
+        "visconfig": Object {
+          "config": Object {
+            "displaylogo": false,
+            "responsive": true,
+          },
+          "isUniColor": false,
+          "layout": Object {
+            "height": 1180,
+            "legend": Object {
+              "orientation": "v",
+              "traceorder": "normal",
+            },
+            "margin": Object {
+              "b": 30,
+              "l": 60,
+              "pad": 0,
+              "r": 30,
+              "t": 50,
+            },
+            "showlegend": true,
+          },
+        },
+      },
+    }
+  }
+>
+  <Plt
+    config={Object {}}
+    data={
+      Array [
+        Object {
+          "hoverinfo": "all",
+          "labels": Array [
+            "error",
+            "info",
+            "login",
+            "security",
+            "success",
+            "warning",
+          ],
+          "marker": Object {},
+          "parents": Array [
+            "",
+            "",
+            "",
+            "",
+            "",
+            "",
+          ],
+          "sort": true,
+          "textinfo": "label+value+percent parent+percent entry",
+          "tiling": Object {
+            "packing": undefined,
+          },
+          "type": "treemap",
+          "values": Array [
+            154,
+            1753,
+            116,
+            468,
+            1964,
+            219,
+          ],
+        },
+      ]
+    }
+    layout={
+      Object {
+        "colorway": Array [
+          "#8C55A3",
+        ],
+        "height": 220,
+        "margin": Object {
+          "b": 30,
+          "l": 30,
+          "pad": 4,
+          "r": 5,
+          "t": 50,
+        },
+        "showlegend": true,
+        "title": "",
+        "treemapcolorway": Object {},
+      }
+    }
+  >
+    <PlotlyComponent
+      config={
+        Object {
+          "displayModeBar": false,
+        }
+      }
+      data={
+        Array [
+          Object {
+            "hoverinfo": "all",
+            "labels": Array [
+              "error",
+              "info",
+              "login",
+              "security",
+              "success",
+              "warning",
+            ],
+            "marker": Object {},
+            "parents": Array [
+              "",
+              "",
+              "",
+              "",
+              "",
+              "",
+            ],
+            "sort": true,
+            "textinfo": "label+value+percent parent+percent entry",
+            "tiling": Object {
+              "packing": undefined,
+            },
+            "type": "treemap",
+            "values": Array [
+              154,
+              1753,
+              116,
+              468,
+              1964,
+              219,
+            ],
+          },
+        ]
+      }
+      debug={false}
+      divId="explorerPlotComponent"
+      layout={
+        Object {
+          "autosize": true,
+          "barmode": "stack",
+          "colorway": Array [
+            "#8C55A3",
+          ],
+          "height": 220,
+          "hovermode": "closest",
+          "legend": Object {
+            "orientation": "h",
+            "traceorder": "normal",
+          },
+          "margin": Object {
+            "b": 30,
+            "l": 30,
+            "pad": 4,
+            "r": 5,
+            "t": 50,
+          },
+          "showlegend": true,
+          "title": "",
+          "treemapcolorway": Object {},
+          "xaxis": Object {
+            "automargin": true,
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+          "yaxis": Object {
+            "rangemode": "normal",
+            "showgrid": true,
+            "zeroline": false,
+          },
+        }
+      }
+      style={
+        Object {
+          "height": "100%",
+          "width": "100%",
+        }
+      }
+      useResizeHandler={true}
+    >
+      <div
+        id="explorerPlotComponent"
+        style={
+          Object {
+            "height": "100%",
+            "width": "100%",
+          }
+        }
+      />
+    </PlotlyComponent>
+  </Plt>
+</TreeMap>
+`;
diff --git a/public/components/visualizations/charts/__tests__/bar.test.tsx b/public/components/visualizations/charts/__tests__/bar.test.tsx
new file mode 100644
index 0000000000..8da6bc8753
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/bar.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Bar } from '../bar/bar';
+import {
+  LAYOUT_CONFIG,
+  TEST_VISUALIZATIONS_DATA
+} from '../../../../../test/event_analytics_constants';
+
+describe('Veritcal Bar component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders veritcal bar component', async () => {
+    const wrapper = mount(
+      <Bar
+        visualizations={TEST_VISUALIZATIONS_DATA}
+        layout={LAYOUT_CONFIG}
+        config={true}
+      />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/__tests__/data_table.test.tsx b/public/components/visualizations/charts/__tests__/data_table.test.tsx
new file mode 100644
index 0000000000..216a3fa296
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/data_table.test.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { DataTable } from '../data_table/data_table';
+import { TEST_VISUALIZATIONS_DATA } from '../../../../../test/event_analytics_constants';
+import { AgGridReact } from 'ag-grid-react';
+
+describe('Data table component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders data table component', async () => {
+    const gridWrapper = shallow(<DataTable visualizations={TEST_VISUALIZATIONS_DATA} />);
+    const agGridReactObj = gridWrapper.find(AgGridReact);
+    agGridReactObj.simulate('gridReady');
+    expect(agGridReactObj).toBeTruthy();
+    await waitFor(() => {
+      expect(gridWrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/__tests__/gauge.test.tsx b/public/components/visualizations/charts/__tests__/gauge.test.tsx
new file mode 100644
index 0000000000..6b539445f2
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/gauge.test.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Gauge } from '../financial/gauge/gauge';
+import {
+  LAYOUT_CONFIG,
+  GAUGE_TEST_VISUALIZATIONS_DATA,
+} from '../../../../../test/event_analytics_constants';
+
+describe('Gauge component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders gauge component', async () => {
+    const wrapper = mount(
+      <Gauge visualizations={GAUGE_TEST_VISUALIZATIONS_DATA} layout={LAYOUT_CONFIG} config={true} />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/__tests__/heatmap.test.tsx b/public/components/visualizations/charts/__tests__/heatmap.test.tsx
new file mode 100644
index 0000000000..530e659086
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/heatmap.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { HeatMap } from '../maps/heatmap';
+import {
+  LAYOUT_CONFIG,
+  TEST_VISUALIZATIONS_DATA
+} from '../../../../../test/event_analytics_constants';
+
+describe('Heatmap component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders heatmap component', async () => {
+    const wrapper = mount(
+      <HeatMap
+        visualizations={TEST_VISUALIZATIONS_DATA}
+        layout={LAYOUT_CONFIG}
+        config={{}}
+      />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/__tests__/histogram.test.tsx b/public/components/visualizations/charts/__tests__/histogram.test.tsx
new file mode 100644
index 0000000000..6eb1ebfff2
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/histogram.test.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Histogram } from '../histogram/histogram';
+import {
+  LAYOUT_CONFIG,
+  TEST_VISUALIZATIONS_DATA,
+} from '../../../../../test/event_analytics_constants';
+
+describe('Histogram component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders histogram component', async () => {
+    const wrapper = mount(
+      <Histogram visualizations={TEST_VISUALIZATIONS_DATA} layout={LAYOUT_CONFIG} config={true} />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/__tests__/horizontal_bar.test.tsx b/public/components/visualizations/charts/__tests__/horizontal_bar.test.tsx
new file mode 100644
index 0000000000..8bc87bab38
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/horizontal_bar.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Bar } from '../bar/bar';
+import {
+  LAYOUT_CONFIG,
+  HORIZONTAL_BAR_TEST_VISUALIZATIONS_DATA,
+} from '../../../../../test/event_analytics_constants';
+
+describe('Horizontal bar component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders horizontal bar component', async () => {
+    const wrapper = mount(
+      <Bar
+        visualizations={HORIZONTAL_BAR_TEST_VISUALIZATIONS_DATA}
+        layout={LAYOUT_CONFIG}
+        config={true}
+      />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/__tests__/line.test.tsx b/public/components/visualizations/charts/__tests__/line.test.tsx
new file mode 100644
index 0000000000..cbbc51819d
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/line.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Line } from '../lines/line';
+import {
+  LAYOUT_CONFIG,
+  TEST_VISUALIZATIONS_DATA
+} from '../../../../../test/event_analytics_constants';
+
+describe('Line component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders line component', async () => {
+    const wrapper = mount(
+      <Line
+        visualizations={TEST_VISUALIZATIONS_DATA}
+        layout={LAYOUT_CONFIG}
+        config={{}}
+      />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/__tests__/logs_view.test.tsx b/public/components/visualizations/charts/__tests__/logs_view.test.tsx
new file mode 100644
index 0000000000..e467d60556
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/logs_view.test.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { LogsView } from '../logs_view/logs_view';
+import {
+  LAYOUT_CONFIG,
+  TEST_VISUALIZATIONS_DATA,
+} from '../../../../../test/event_analytics_constants';
+
+describe('Logs View component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders logs view component', async () => {
+    const wrapper = mount(
+      <LogsView visualizations={TEST_VISUALIZATIONS_DATA} layout={LAYOUT_CONFIG} config={{}} />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/__tests__/metrics.test.tsx b/public/components/visualizations/charts/__tests__/metrics.test.tsx
new file mode 100644
index 0000000000..4e12fd2db1
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/metrics.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Metrics } from '../metrics/metrics';
+import {
+  LAYOUT_CONFIG,
+  METRICS_TEST_VISUALIZATIONS_DATA,
+} from '../../../../../test/event_analytics_constants';
+
+describe('Metrics component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders Metrics component', async () => {
+    const wrapper = mount(
+      <Metrics
+        visualizations={METRICS_TEST_VISUALIZATIONS_DATA}
+        layout={LAYOUT_CONFIG}
+        config={true}
+      />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/__tests__/pie.test.tsx b/public/components/visualizations/charts/__tests__/pie.test.tsx
new file mode 100644
index 0000000000..44f6675eca
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/pie.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Pie } from '../pie/pie';
+import {
+  LAYOUT_CONFIG,
+  TEST_VISUALIZATIONS_DATA
+} from '../../../../../test/event_analytics_constants';
+
+describe('Pie component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders pie component', async () => {
+    const wrapper = mount(
+      <Pie
+        visualizations={TEST_VISUALIZATIONS_DATA}
+        layout={LAYOUT_CONFIG}
+        config={{}}
+      />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/__tests__/text.test.tsx b/public/components/visualizations/charts/__tests__/text.test.tsx
new file mode 100644
index 0000000000..62cea476c3
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/text.test.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Text } from '../text/text';
+import { TEST_VISUALIZATIONS_DATA } from '../../../../../test/event_analytics_constants';
+
+describe('Text component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders text component', async () => {
+    const wrapper = mount(
+      <Text
+        visualizations={TEST_VISUALIZATIONS_DATA}
+      />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/__tests__/treemap.test.tsx b/public/components/visualizations/charts/__tests__/treemap.test.tsx
new file mode 100644
index 0000000000..5210bd4167
--- /dev/null
+++ b/public/components/visualizations/charts/__tests__/treemap.test.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { TreeMap } from '../maps/treemaps';
+import {
+  LAYOUT_CONFIG,
+  TEST_VISUALIZATIONS_DATA,
+} from '../../../../../test/event_analytics_constants';
+
+describe('Treemap component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders treemap component', async () => {
+    const wrapper = mount(
+      <TreeMap visualizations={TEST_VISUALIZATIONS_DATA} layout={LAYOUT_CONFIG} config={{}} />
+    );
+
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
diff --git a/public/components/visualizations/charts/bar/bar.tsx b/public/components/visualizations/charts/bar/bar.tsx
new file mode 100644
index 0000000000..53c7ae5dee
--- /dev/null
+++ b/public/components/visualizations/charts/bar/bar.tsx
@@ -0,0 +1,229 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo } from 'react';
+import { isEmpty, last } from 'lodash';
+import {
+  AGGREGATIONS,
+  BREAKDOWNS,
+  DEFAULT_BAR_CHART_STYLES,
+  GROUPBY,
+} from '../../../../../common/constants/explorer';
+import {
+  BarOrientation,
+  FILLOPACITY_DIV_FACTOR,
+  LONG_CHART_COLOR,
+  PLOTLY_COLOR,
+  THRESHOLD_LINE_OPACITY,
+  THRESHOLD_LINE_WIDTH,
+  PLOT_MARGIN,
+} from '../../../../../common/constants/shared';
+import { IVisualizationContainerProps } from '../../../../../common/types/explorer';
+import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
+import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
+import { VisCanvassPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components';
+import { hexToRgb } from '../../../event_analytics/utils/utils';
+import { Plt } from '../../plotly/plot';
+import { transformPreprocessedDataToTraces, preprocessJsonData } from '../shared/common';
+
+export const Bar = ({ visualizations, layout, config }: any) => {
+  const {
+    data: {
+      rawVizData: {
+        data: queriedVizData,
+        jsonData,
+        metadata: { fields },
+      },
+      userConfigs: {
+        dataConfig: {
+          colorTheme = [],
+          chartStyles = {},
+          span = {},
+          legend = {},
+          panelOptions = {},
+          tooltipOptions = {},
+          thresholds = [],
+          [GROUPBY]: dimensions = [],
+          [AGGREGATIONS]: series = [],
+          [BREAKDOWNS]: breakdowns = [],
+        } = {},
+        layoutConfig = {},
+        availabilityConfig = {},
+      } = {},
+    },
+    vis: {
+      type,
+      icontype,
+      fillopacity,
+      orientation,
+      labelangle,
+      linewidth,
+      barwidth,
+      groupwidth,
+      showlegend,
+      legendposition,
+    },
+  }: IVisualizationContainerProps = visualizations;
+
+  const lastIndex = fields.length - 1;
+
+  /**
+   * determine stylings
+   */
+  const barOrientation = chartStyles.orientation || orientation;
+  const isVertical = barOrientation === BarOrientation.vertical;
+  const tickAngle = chartStyles.rotateBarLabels || labelangle;
+  const lineWidth = chartStyles.lineWidth || linewidth;
+  const fillOpacity =
+    chartStyles.fillOpacity !== undefined
+      ? chartStyles.fillOpacity / FILLOPACITY_DIV_FACTOR
+      : fillopacity / FILLOPACITY_DIV_FACTOR;
+  const tooltipMode =
+    tooltipOptions.tooltipMode !== undefined ? tooltipOptions.tooltipMode : 'show';
+  const tooltipText = tooltipOptions.tooltipText !== undefined ? tooltipOptions.tooltipText : 'all';
+  const barWidth = 1 - (chartStyles.barWidth || barwidth);
+  const groupWidth = 1 - (chartStyles.groupWidth || groupwidth);
+  const showLegend = legend.showLegend ?? showlegend;
+  const legendPosition = legend.position || legendposition;
+  const labelSize = chartStyles.labelSize || DEFAULT_BAR_CHART_STYLES.LabelSize;
+  const legendSize = legend.legendSize;
+  const getSelectedColorTheme = (field: any, index: number) =>
+    (colorTheme.length > 0 &&
+      colorTheme.find((colorSelected) => colorSelected.name.label === field)?.color) ||
+    PLOTLY_COLOR[index % PLOTLY_COLOR.length];
+  // If chart has length of result buckets < 16
+  // then use the LONG_CHART_COLOR for all the bars in the chart
+  const plotlyColorway =
+    queriedVizData[fields[lastIndex].name].length < 16 ? PLOTLY_COLOR : [LONG_CHART_COLOR];
+
+  if (isEmpty(series))
+    return <VisCanvassPlaceholder message="Missing aggregations" icon={icontype} />;
+
+  const addStylesToTraces = (traces, traceStyles) => {
+    const { barOrientation, fillOpacity, tooltipMode, tooltipText, lineWidth } = traceStyles;
+    return traces.map((trace, idx: number) => {
+      const selectedColor = getSelectedColorTheme(trace.aggName, idx);
+      return {
+        ...trace,
+        type,
+        orientation: barOrientation,
+        hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText,
+        ...{
+          marker: {
+            color: hexToRgb(selectedColor, fillOpacity),
+            line: {
+              color: selectedColor,
+              width: lineWidth,
+            },
+          },
+        },
+      };
+    });
+  };
+
+  let bars = useMemo(() => {
+    const visConfig = {
+      dimensions,
+      series,
+      breakdowns,
+      span,
+      isVertical,
+    };
+    const traceStyles = {
+      barOrientation,
+      fillOpacity,
+      tooltipMode,
+      tooltipText,
+      lineWidth,
+    };
+
+    return addStylesToTraces(
+      transformPreprocessedDataToTraces(preprocessJsonData(jsonData, visConfig), visConfig),
+      { ...traceStyles }
+    );
+  }, [chartStyles, jsonData, dimensions, series, breakdowns, span, tooltipOptions]);
+
+  const mergedLayout = useMemo(() => {
+    return {
+      colorway: plotlyColorway,
+      ...layout,
+      title: panelOptions.title || layoutConfig.layout?.title || '',
+      barmode: chartStyles.mode || visualizations.vis.mode,
+      xaxis: {
+        ...(isVertical && { tickangle: tickAngle }),
+        automargin: true,
+        tickfont: {
+          ...(labelSize && {
+            size: labelSize,
+          }),
+        },
+      },
+      yaxis: {
+        ...(!isVertical && { tickangle: tickAngle }),
+        automargin: true,
+        tickfont: {
+          ...(labelSize && {
+            size: labelSize,
+          }),
+        },
+      },
+      bargap: groupWidth,
+      bargroupgap: barWidth,
+      legend: {
+        ...layout.legend,
+        orientation: legendPosition,
+        ...(legendSize && {
+          font: {
+            size: legendSize,
+          },
+        }),
+      },
+      showlegend,
+      hovermode: 'closest',
+      margin: PLOT_MARGIN,
+    };
+  }, [visualizations, layout, panelOptions, showLegend, chartStyles]);
+
+  if (thresholds || availabilityConfig.level) {
+    const thresholdTraces = {
+      x: [],
+      y: [],
+      mode: 'text',
+      text: [],
+    };
+    const levels = availabilityConfig.level ? availabilityConfig.level : [];
+    const mapToLine = (list: ThresholdUnitType[] | AvailabilityUnitType[], lineStyle: any) => {
+      return list.map((thr: ThresholdUnitType) => {
+        thresholdTraces.x.push(bars[0]?.x[0] || '');
+        thresholdTraces.y.push(thr.value * (1 + 0.06));
+        thresholdTraces.text.push(thr.name);
+        return {
+          type: 'line',
+          x0: bars[0]?.x[0] || 0,
+          y0: thr.value,
+          x1: last(last(bars)?.x) || 1,
+          y1: thr.value,
+          name: thr.name || '',
+          opacity: THRESHOLD_LINE_OPACITY,
+          line: {
+            color: thr.color,
+            width: THRESHOLD_LINE_WIDTH,
+            ...lineStyle,
+          },
+        };
+      });
+    };
+
+    mergedLayout.shapes = [...mapToLine(thresholds, { dash: 'dashdot' }), ...mapToLine(levels, {})];
+    bars = [...bars, thresholdTraces];
+  }
+
+  const mergedConfigs = {
+    ...config,
+    ...(layoutConfig.config && layoutConfig.config),
+  };
+
+  return <Plt data={bars} layout={mergedLayout} config={mergedConfigs} />;
+};
diff --git a/public/components/visualizations/charts/bar/bar_type.ts b/public/components/visualizations/charts/bar/bar_type.ts
new file mode 100644
index 0000000000..f075551598
--- /dev/null
+++ b/public/components/visualizations/charts/bar/bar_type.ts
@@ -0,0 +1,226 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Bar } from './bar';
+import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
+import { LensIconChartBar } from '../../assets/chart_bar';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import {
+  ConfigLegend,
+  InputFieldItem,
+  ConfigColorTheme,
+  SliderConfig,
+  ConfigBarChartStyles,
+  ButtonGroupItem,
+  ConfigAvailability,
+} from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+import { BarOrientation, DEFAULT_CHART_STYLES } from '../../../../../common/constants/shared';
+import { fetchConfigObject } from '../../../../components/event_analytics/utils/utils';
+import { VIS_CHART_TYPES } from '../../../../../common/constants/shared';
+import { DEFAULT_BAR_CHART_STYLES } from '../../../../../common/constants/explorer';
+
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+
+const { LegendPosition, ShowLegend, LabelAngle, FillOpacity, LineWidth } = DEFAULT_CHART_STYLES;
+const { BarMode, GroupWidth, BarWidth } = DEFAULT_BAR_CHART_STYLES;
+const isHorizontalBar = (paramstype: string) =>
+  paramstype === VIS_CHART_TYPES.HorizontalBar ? true : false;
+
+export const createBarTypeDefinition = (params: any) => ({
+  name: params.type || 'bar',
+  type: 'bar',
+  id: params.type || 'bar',
+  label: isHorizontalBar(params.type) ? 'Horizontal bar' : 'Vertical bar',
+  fulllabel: isHorizontalBar(params.type) ? 'Horizontal bar' : 'Vertical bar',
+  icontype: isHorizontalBar(params.type) ? 'visBarHorizontalStacked' : 'visBarVerticalStacked',
+  selection: {
+    dataLoss: 'nothing',
+  },
+  category: VIS_CATEGORY.BASICS,
+  icon: LensIconChartBar,
+  categoryaxis: 'xaxis',
+  seriesaxis: 'yaxis',
+  orientation: isHorizontalBar(params.type) ? BarOrientation.horizontal : BarOrientation.vertical,
+  mode: BarMode,
+  labelangle: LabelAngle,
+  linewidth: LineWidth,
+  fillopacity: FillOpacity,
+  groupwidth: GroupWidth,
+  barwidth: BarWidth,
+  showlegend: ShowLegend,
+  legendposition: LegendPosition,
+  component: Bar,
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Style',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [
+          fetchConfigObject('Tooltip', {
+            options: [
+              { name: 'All', id: 'all' },
+              { name: 'Dimension', id: 'x' },
+              { name: 'Series', id: 'y' },
+            ],
+            defaultSelections: [{ name: 'All', id: 'all' }],
+          }),
+          {
+            id: 'legend',
+            name: 'Legend',
+            editor: ConfigLegend,
+            mapTo: 'legend',
+            schemas: [
+              {
+                name: 'Show legend',
+                mapTo: 'showLegend',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Show', id: 'show' },
+                    { name: 'Hidden', id: 'hidden' },
+                  ],
+                  defaultSelections: [{ name: 'Show', id: ShowLegend }],
+                },
+              },
+              {
+                name: 'Position',
+                mapTo: 'position',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Right', id: 'v' },
+                    { name: 'Bottom', id: 'h' },
+                  ],
+                  defaultSelections: [{ name: 'Right', id: LegendPosition }],
+                },
+              },
+              {
+                title: 'Legend size',
+                name: 'Legend size',
+                component: InputFieldItem,
+                mapTo: 'legendSize',
+                eleType: 'input',
+              },
+            ],
+          },
+          {
+            id: 'chart_styles',
+            name: 'Chart styles',
+            editor: ConfigBarChartStyles,
+            mapTo: 'chartStyles',
+            schemas: [
+              {
+                name: 'Mode',
+                component: ButtonGroupItem,
+                mapTo: 'mode',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Group', id: BarMode },
+                    { name: 'Stack', id: 'stack' },
+                  ],
+                  defaultSelections: [{ name: 'Group', id: BarMode }],
+                },
+              },
+              {
+                name: 'Label size',
+                component: InputFieldItem,
+                mapTo: 'labelSize',
+                eleType: 'input',
+              },
+              {
+                name: 'Rotate bar labels',
+                component: SliderConfig,
+                mapTo: 'rotateBarLabels',
+                eleType: 'slider',
+                defaultState: LabelAngle,
+                props: {
+                  ticks: [
+                    { label: '-90°', value: -90 },
+                    { label: '-45°', value: -45 },
+                    { label: '0°', value: 0 },
+                    { label: '45°', value: 45 },
+                    { label: '90°', value: 90 },
+                  ],
+                  showTicks: true,
+                  min: -90,
+                  max: 90,
+                },
+              },
+              {
+                name: 'Group width',
+                component: SliderConfig,
+                mapTo: 'groupWidth',
+                defaultState: GroupWidth,
+                props: {
+                  max: 1,
+                  step: 0.01,
+                },
+                eleType: 'slider',
+              },
+              {
+                name: 'Bar width',
+                component: SliderConfig,
+                mapTo: 'barWidth',
+                defaultState: BarWidth,
+                props: {
+                  max: 1,
+                  step: 0.01,
+                },
+                eleType: 'slider',
+              },
+              {
+                name: 'Line width',
+                component: SliderConfig,
+                mapTo: 'lineWidth',
+                defaultState: LineWidth,
+                props: {
+                  max: 10,
+                },
+                eleType: 'slider',
+              },
+              {
+                name: 'Fill opacity',
+                component: SliderConfig,
+                mapTo: 'fillOpacity',
+                defaultState: FillOpacity,
+                props: {
+                  max: 100,
+                },
+                eleType: 'slider',
+              },
+            ],
+          },
+          {
+            id: 'color-theme',
+            name: 'Color theme',
+            editor: ConfigColorTheme,
+            mapTo: 'colorTheme',
+            schemas: [],
+          },
+        ],
+      },
+      {
+        id: 'availability-panel',
+        name: 'Availability',
+        mapTo: 'availabilityConfig',
+        editor: ConfigAvailability,
+      },
+    ],
+  },
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+    },
+    config: {
+      ...sharedConfigs.config,
+    },
+    isUniColor: false,
+  },
+});
diff --git a/public/components/visualizations/charts/bubble/bubble.tsx b/public/components/visualizations/charts/bubble/bubble.tsx
new file mode 100644
index 0000000000..8007be9946
--- /dev/null
+++ b/public/components/visualizations/charts/bubble/bubble.tsx
@@ -0,0 +1,72 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { take, merge, isEmpty } from 'lodash';
+import { Plt } from '../../plotly/plot';
+import { PLOTLY_COLOR } from '../../../../../common/constants/shared';
+
+export const Bubble = ({
+  visualizations,
+  figureConfig = {},
+  layoutConfig = {},
+  dispatch,
+  customVizData = {},
+}: any) => {
+  const {
+    data,
+    metadata: { fields },
+  } = visualizations.data.rawVizData;
+  const lineLength = fields.length - 1;
+  // let lineValues;
+  // if (isEmpty(customVizData)) {
+  const lineValues = take(fields, lineLength).map((field: any) => {
+    return {
+      x: data[field.name],
+      y: data[fields[lineLength].name],
+      mode: 'markers',
+      // type: 'pie',
+      name: field.name,
+    };
+  });
+  // } else {
+  //   lineValues = [...customVizData];
+  // }
+
+  const config = {
+    // barmode: 'pie',
+    xaxis: {
+      automargin: true,
+    },
+    yaxis: {
+      automargin: true,
+    },
+  };
+  const lineLayoutConfig = merge(config, layoutConfig);
+
+  return (
+    <Plt
+      data={lineValues}
+      layout={{
+        colorway: PLOTLY_COLOR,
+        plot_bgcolor: 'rgba(0, 0, 0, 0)',
+        paper_bgcolor: 'rgba(0, 0, 0, 0)',
+        xaxis: {
+          fixedrange: true,
+          showgrid: false,
+          visible: true,
+        },
+        yaxis: {
+          fixedrange: true,
+          showgrid: false,
+          visible: true,
+        },
+        ...lineLayoutConfig,
+      }}
+      config={figureConfig}
+      dispatch={dispatch}
+    />
+  );
+};
diff --git a/public/components/visualizations/charts/bubble/bubble_type.ts b/public/components/visualizations/charts/bubble/bubble_type.ts
new file mode 100644
index 0000000000..b4cac8ded6
--- /dev/null
+++ b/public/components/visualizations/charts/bubble/bubble_type.ts
@@ -0,0 +1,75 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Bubble } from './bubble';
+import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
+import { LensIconChartPie } from '../../assets/chart_pie';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import { ConfigValueOptions } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+
+export const createBubbleVisDefinition = () => ({
+  name: 'bubble',
+  type: 'bubble',
+  id: 'bubble',
+  label: 'Bubble',
+  fulllabel: 'Bubble',
+  category: VIS_CATEGORY.BASICS,
+  selection: {
+    dataLoss: 'nothing',
+  },
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Style',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [
+          {
+            id: 'value_options',
+            name: 'Value options',
+            editor: ConfigValueOptions,
+            mapTo: 'valueOptions',
+            schemas: [
+              {
+                name: 'X-axis',
+                isSingleSelection: true,
+                component: null,
+                mapTo: 'xaxis',
+              },
+              {
+                name: 'Y-axis',
+                isSingleSelection: false,
+                component: null,
+                mapTo: 'yaxis',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'style-panel',
+        name: 'Layout',
+        mapTo: 'layoutConfig',
+        editor: ConfigEditor,
+        content: [],
+      },
+    ],
+  },
+  icon: LensIconChartPie,
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+    },
+    config: {
+      ...sharedConfigs.config,
+    },
+  },
+  component: Bubble,
+});
diff --git a/public/components/visualizations/charts/data_table/data_table.scss b/public/components/visualizations/charts/data_table/data_table.scss
new file mode 100644
index 0000000000..86cb0b90ec
--- /dev/null
+++ b/public/components/visualizations/charts/data_table/data_table.scss
@@ -0,0 +1,63 @@
+.pagination-wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+.custom-pagination-container {
+  display: inline-flex;
+  padding: 10px 5px;
+}
+
+.custom-pagination-container li {
+  font-size: 14px;
+  padding: 0 5px;
+  display: flex;
+  align-items: flex-end;
+  font-weight: 600;
+}
+
+.custom-pagination-container .euiIcon:focus {
+  background: transparent !important;
+}
+.custom-pagination-container a:focus {
+  animation: none !important;
+}
+.custom-pagination-container a {
+  cursor: pointer;
+}
+
+.custom-pagination-container .disabled {
+  cursor: default;
+}
+.custom-pagination-container a {
+  color: #343741;
+}
+.dark-theme a {
+  color: #dfe5ef;
+}
+.custom-pagination-container .selected a {
+  color: #1ba9f5;
+  text-decoration: underline;
+  cursor: default;
+}
+
+.custom-overlay {
+  display: flex;
+  align-items: flex-start;
+  padding: 10px;
+  position: fixed;
+  top: 100px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99999 !important;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+
+.custom-overlay-light {
+  background-color: #fff;
+}
+
+.custom-overlay-dark {
+  background-color: #16171c;
+}
diff --git a/public/components/visualizations/charts/data_table/data_table.tsx b/public/components/visualizations/charts/data_table/data_table.tsx
new file mode 100644
index 0000000000..2efa8bbaf0
--- /dev/null
+++ b/public/components/visualizations/charts/data_table/data_table.tsx
@@ -0,0 +1,262 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+
+// ag-data-grid
+import { AgGridReact } from 'ag-grid-react';
+import 'ag-grid-community/dist/styles/ag-grid.css';
+import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
+
+// grid elements
+import { CustomOverlay, RowConfigType, GridHeader } from './data_table_header';
+import { GridFooter } from './data_table_footer';
+
+// constants
+import { COLUMN_DEFAULT_MIN_WIDTH, HEADER_HEIGHT } from '../../../../../common/constants/explorer';
+import { IVisualizationContainerProps, IField } from '../../../../../common/types/explorer';
+import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css';
+
+// styles
+import './data_table.scss';
+
+const doubleValueGetter = (params) => {
+  return params.data[params.column.colId];
+};
+
+export const DataTable = ({ visualizations, layout, config }: any) => {
+  const {
+    data: {
+      rawVizData: {
+        jsonData = [],
+        metadata: { fields = [] } = {},
+      } = {},
+      userConfigs: { dataConfig: { chartStyles = {} } = {} } = {},
+    } = {}
+  }: IVisualizationContainerProps = visualizations;
+
+  const enablePagination =
+    typeof chartStyles.enablePagination !== 'undefined'
+      ? chartStyles.enablePagination
+      : visualizations.vis.enablepagination;
+
+  const showTableHeader =
+    typeof chartStyles.showTableHeader !== 'undefined'
+      ? chartStyles.showTableHeader
+      : visualizations.vis.showtableheader;
+
+  const colunmFilter =
+    typeof chartStyles.colunmFilter !== 'undefined'
+      ? chartStyles.colunmFilter
+      : visualizations.vis.colunmfilter;
+
+  const columnAlignment = chartStyles.columnAlignment || visualizations.vis.columnalignment;
+
+  const columnWidth =
+    typeof chartStyles.columnWidth !== 'undefined'
+      ? chartStyles.columnWidth
+      : visualizations.vis.columnwidth;
+
+  useEffect(() => {
+    document.addEventListener('keydown', hideGridFullScreenHandler);
+    return () => {
+      document.removeEventListener('keydown', hideGridFullScreenHandler);
+    };
+  }, []);
+
+  // rows and columns
+  const rawData = [...jsonData];
+
+  const columns = useMemo(
+    () =>
+      fields.map((field: IField) => {
+        return {
+          lockVisible: true,
+          columnsMenuParams: {
+            suppressColumnFilter: true,
+            suppressColumnSelectAll: true,
+            suppressColumnExpandAll: true,
+          },
+          headerName: field.name,
+          field: field.name,
+          colId: field.name,
+          ...(field.type === 'double' && {
+            valueGetter: doubleValueGetter,
+          }),
+        };
+      }),
+    [fields]
+  );
+
+  // ag-grid-react bindings
+  const gridRef = useRef<any | undefined>();
+  const gridRefFullScreen = useRef<any | undefined>();
+  const [pageSize, setPageSize] = useState<number>(10);
+  const [columnVisibility, setColumnVisibility] = useState<string[]>([]);
+  const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
+  const [selectedRowDensity, setSelectedRowDensity] = useState<RowConfigType>({
+    icon: 'tableDensityCompact',
+    height: 35,
+    selected: true,
+  });
+  // pagination
+  const [activePage, setActivePage] = useState<number>(0);
+  const pageCount = Math.ceil(rawData.length / pageSize);
+
+  const defaultColDef = useMemo(() => {
+    return {
+      sortable: true,
+      resizable: true,
+      filter: colunmFilter,
+      flex: 1,
+      suppressMenu: false,
+      minWidth: COLUMN_DEFAULT_MIN_WIDTH,
+      headerHeight: 400,
+      type: columnAlignment,
+    };
+  }, [colunmFilter, columnAlignment]);
+
+  useEffect(() => {
+    if (!chartStyles.columnWidth) {
+      gridRef?.current?.api?.sizeColumnsToFit();
+    } else {
+      columns.forEach((col: any) =>
+        gridRef?.current?.columnApi?.setColumnWidth(col.field, Number(columnWidth))
+      );
+    }
+  }, [columnWidth, columns]);
+
+  const onPageSizeChanged = useCallback(
+    (val: number) => {
+      setPageSize(val);
+      gridRef.current.api.paginationSetPageSize(val);
+      setActivePage(0);
+      gridRef.current.api.paginationGoToPage(0);
+      if (isFullScreen) {
+        gridRefFullScreen.current.api.paginationSetPageSize(val);
+        gridRefFullScreen.current.api.paginationGoToPage(0);
+      }
+    },
+    [isFullScreen]
+  );
+
+  const selectDensityHandler = useCallback((value: RowConfigType) => {
+    setSelectedRowDensity({ ...value });
+    gridRef.current.api.forEachNode((rowNode) => {
+      if (rowNode.data) {
+        rowNode.setRowHeight(value.height);
+      }
+    });
+    gridRef.current.api.onRowHeightChanged();
+  }, []);
+
+  const columnVisiblityHandler = useCallback((visible: boolean, field: string) => {
+    const isExisting = columnVisibility.findIndex((column) => column === field);
+    if (visible) {
+      if (isExisting > -1) {
+        columnVisibility.splice(isExisting, 1);
+        gridRef?.current?.columnApi?.setColumnsVisible([field], true);
+      }
+    } else {
+      columnVisibility.push(field);
+      gridRef?.current?.columnApi?.setColumnsVisible([field], false);
+    }
+    setColumnVisibility([...columnVisibility]);
+  }, []);
+
+  const goToPage = ({ selected }: { selected: number }) => {
+    setActivePage(selected);
+    gridRef.current.api.paginationGoToPage(selected);
+    if (isFullScreen) {
+      gridRefFullScreen.current.api.paginationGoToPage(selected);
+    }
+  };
+
+  const setIsFullScreenHandler = (val: boolean) => {
+    setIsFullScreen(val);
+  };
+
+  const hideGridFullScreenHandler = (e: any) => {
+    if (e.key === 'Escape') {
+      setIsFullScreen(false);
+    }
+  };
+
+  return (
+    <>
+      {showTableHeader && (
+        <GridHeader
+          isFullScreen={isFullScreen}
+          setIsFullScreenHandler={setIsFullScreenHandler}
+          selectedRowDensity={selectedRowDensity}
+          selectDensityHandler={selectDensityHandler}
+          columnVisiblityHandler={columnVisiblityHandler}
+          columns={columns}
+          columnVisibility={columnVisibility}
+        />
+      )}
+      <AgGridReact
+        ref={gridRef}
+        rowData={rawData}
+        columnDefs={columns}
+        defaultColDef={defaultColDef}
+        domLayout={'autoHeight'}
+        animateRows
+        pagination={enablePagination}
+        paginationPageSize={pageSize}
+        suppressPaginationPanel
+        rowHeight={selectedRowDensity.height}
+        onGridReady={() => {
+          gridRef?.current?.api.setHeaderHeight(HEADER_HEIGHT);
+        }}
+        suppressFieldDotNotation // added for key contains dot operator
+      />
+      {enablePagination && (
+        <GridFooter
+          onPageSizeChanged={onPageSizeChanged}
+          pageSize={pageSize}
+          activePage={activePage}
+          goToPage={goToPage}
+          pageCount={pageCount}
+        />
+      )}
+      {isFullScreen && (
+        <CustomOverlay>
+          <EuiFlexGroup direction="column">
+            <EuiFlexItem>
+              <AgGridReact
+                ref={gridRefFullScreen}
+                rowData={rawData}
+                columnDefs={columns}
+                defaultColDef={defaultColDef}
+                domLayout="autoHeight"
+                animateRows
+                pagination
+                paginationPageSize={pageSize}
+                suppressPaginationPanel
+                rowHeight={selectedRowDensity.height}
+                onGridReady={() => {
+                  gridRefFullScreen?.current?.api.setHeaderHeight(HEADER_HEIGHT);
+                }}
+                // added for key contains dot operator
+                suppressFieldDotNotation
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <GridFooter
+                onPageSizeChanged={onPageSizeChanged}
+                pageSize={pageSize}
+                activePage={activePage}
+                goToPage={goToPage}
+                pageCount={pageCount}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </CustomOverlay>
+      )}
+    </>
+  );
+};
diff --git a/public/components/visualizations/charts/data_table/data_table_footer.tsx b/public/components/visualizations/charts/data_table/data_table_footer.tsx
new file mode 100644
index 0000000000..f8350ddd2d
--- /dev/null
+++ b/public/components/visualizations/charts/data_table/data_table_footer.tsx
@@ -0,0 +1,126 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiPopover,
+  EuiIcon,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+} from '@elastic/eui';
+
+// pagination
+import ReactPaginate from 'react-paginate';
+
+// theme
+import { uiSettingsService } from '../../../../../common/utils';
+
+// constants
+import {
+  GRID_PAGE_RANGE_DISPLAY,
+  GRID_PAGE_SIZES,
+} from '../../../../../common/constants/explorer';
+
+export const GridFooter = ({
+  onPageSizeChanged,
+  pageSize,
+  activePage,
+  goToPage,
+  pageCount,
+}: {
+  onPageSizeChanged: (val: number) => void;
+  goToPage: ({ selected }: { selected: number }) => void;
+  pageSize: number;
+  activePage: number;
+  pageCount: number;
+}) => {
+  return (
+    <EuiFlexGroup
+      responsive
+      gutterSize="none"
+      justifyContent="spaceBetween"
+      style={{ paddingTop: '10px', position: 'relative' }}
+    >
+      <EuiFlexItem grow={false}>
+        <PageSizePopover onPageSizeChanged={onPageSizeChanged} pageSize={pageSize} />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <ReactPaginate
+          containerClassName={
+            uiSettingsService.get('theme:darkMode')
+              ? `custom-pagination-container dark-theme`
+              : `custom-pagination-container`
+          }
+          breakLabel="..."
+          nextLabel={<EuiIcon type="arrowRight" />}
+          forcePage={activePage}
+          onPageChange={goToPage}
+          pageRangeDisplayed={GRID_PAGE_RANGE_DISPLAY}
+          pageCount={pageCount}
+          previousLabel={<EuiIcon type="arrowLeft" />}
+          renderOnZeroPageCount={null}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+export const PageSizePopover = ({
+  onPageSizeChanged,
+  pageSize,
+}: {
+  onPageSizeChanged: (size: number) => void;
+  pageSize: number;
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+  const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const button = (
+    <EuiButtonEmpty
+      iconSize="s"
+      color="text"
+      size="s"
+      aria-label="Next"
+      iconType="arrowDown"
+      iconSide="right"
+      onClick={onButtonClick}
+    >
+      Rows per page: {pageSize}
+    </EuiButtonEmpty>
+  );
+
+  const items = () => {
+    return GRID_PAGE_SIZES.map((i: number) => (
+      <EuiContextMenuItem
+        layoutAlign="bottom"
+        key={`${i}_rows`}
+        icon={i === pageSize ? 'check' : 'empty'}
+        onClick={() => {
+          onPageSizeChanged(i);
+          closePopover();
+        }}
+      >
+        {i} rows
+      </EuiContextMenuItem>
+    ));
+  };
+
+  return (
+    <EuiPopover
+      id="singlePanel"
+      button={button}
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      panelPaddingSize="none"
+      anchorPosition="downLeft"
+    >
+      <EuiContextMenuPanel items={items()} />
+    </EuiPopover>
+  );
+};
diff --git a/public/components/visualizations/charts/data_table/data_table_header.tsx b/public/components/visualizations/charts/data_table/data_table_header.tsx
new file mode 100644
index 0000000000..1c2d2b034c
--- /dev/null
+++ b/public/components/visualizations/charts/data_table/data_table_header.tsx
@@ -0,0 +1,195 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState, ReactChildren, ReactChild } from 'react';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiPopover,
+  EuiSwitch,
+  EuiIcon,
+} from '@elastic/eui';
+
+// theme
+import { uiSettingsService } from '../../../../../common/utils';
+
+// constants
+import {
+  GRID_HEADER_COLUMN_MAX_WIDTH,
+  ROW_DENSITIES,
+} from '../../../../../common/constants/explorer';
+
+export interface RowConfigType {
+  icon: string;
+  height: number;
+  selected: boolean;
+}
+
+export const CustomOverlay = ({
+  children,
+}: {
+  children: ReactChild | ReactChild[] | ReactChildren | ReactChildren[];
+}) => {
+  return (
+    <div
+      className={
+        uiSettingsService.get('theme:darkMode')
+          ? 'custom-overlay custom-overlay-dark'
+          : 'custom-overlay custom-overlay-light'
+      }
+    >
+      {children}
+    </div>
+  );
+};
+
+export const GridHeader = ({
+  isFullScreen,
+  setIsFullScreenHandler,
+  selectedRowDensity,
+  selectDensityHandler,
+  columnVisiblityHandler,
+  columns,
+  columnVisibility,
+}: {
+  isFullScreen: boolean;
+  setIsFullScreenHandler: (v: boolean) => void;
+  selectedRowDensity: any;
+  selectDensityHandler: (v: RowConfigType) => void;
+  columnVisiblityHandler: (visible: boolean, field: string) => void;
+  columns: any;
+  columnVisibility: any;
+}) => {
+  return (
+    <EuiFlexGroup
+      responsive
+      gutterSize="none"
+      justifyContent="flexStart"
+      style={{ position: 'relative' }}
+    >
+      <EuiFlexItem style={{ maxWidth: GRID_HEADER_COLUMN_MAX_WIDTH }}>
+        <DensityPopover
+          selectedDensity={selectedRowDensity}
+          selectDensityHandler={selectDensityHandler}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem style={{ maxWidth: GRID_HEADER_COLUMN_MAX_WIDTH }}>
+        <ColumnVisiblityPopover
+          columnVisiblityHandler={columnVisiblityHandler}
+          columns={columns}
+          columnVisibility={columnVisibility}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem style={{ maxWidth: GRID_HEADER_COLUMN_MAX_WIDTH }}>
+        <EuiButtonEmpty
+          iconSize="s"
+          color="text"
+          aria-label="Next"
+          iconType="fullScreen"
+          onClick={() => setIsFullScreenHandler(true)}
+        >
+          Full screen
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+      {isFullScreen && (
+        <EuiIcon
+          type="cross"
+          onClick={() => setIsFullScreenHandler(false)}
+          style={{ position: 'absolute', right: 20, cursor: 'pointer', top: 20 }}
+        />
+      )}
+    </EuiFlexGroup>
+  );
+};
+
+export const DensityPopover = ({
+  selectDensityHandler,
+  selectedDensity,
+}: {
+  selectedDensity: any;
+  selectDensityHandler: (data: RowConfigType) => void;
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+  const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const button = (
+    <EuiButtonEmpty
+      iconSize="s"
+      color="text"
+      aria-label="Next"
+      iconType={selectedDensity.icon}
+      onClick={onButtonClick}
+    >
+      Density
+    </EuiButtonEmpty>
+  );
+
+  return (
+    <EuiPopover button={button} isOpen={isPopoverOpen} closePopover={closePopover}>
+      <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+        {ROW_DENSITIES.map((i: RowConfigType, index: number) => (
+          <EuiFlexItem key={index} grow={false}>
+            <EuiButtonIcon
+              onClick={() => selectDensityHandler(i)}
+              display={selectedDensity.icon === i.icon ? 'fill' : 'base'}
+              iconType={i.icon}
+              aria-label="Next"
+            />
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    </EuiPopover>
+  );
+};
+
+export const ColumnVisiblityPopover = ({
+  columnVisibility,
+  columns,
+  columnVisiblityHandler,
+}: {
+  columns: any;
+  columnVisibility: any;
+  columnVisiblityHandler: (visible: boolean, field: string) => void;
+}) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
+  const onButtonClick = () => setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const button = (
+    <EuiButtonEmpty
+      iconSize="s"
+      color="text"
+      aria-label="Next"
+      iconType="listAdd"
+      onClick={onButtonClick}
+    >
+      Columns
+    </EuiButtonEmpty>
+  );
+
+  return (
+    <EuiPopover button={button} isOpen={isPopoverOpen} closePopover={closePopover}>
+      <EuiFlexGroup gutterSize="s" direction="column">
+        {columns.map((i: any, index: number) => {
+          return (
+            <EuiFlexItem key={index} grow={false}>
+              <EuiSwitch
+                label={i.field}
+                checked={!columnVisibility.includes(i.field)}
+                onChange={(e) => {
+                  columnVisiblityHandler(e.target.checked, i.field);
+                }}
+                compressed
+              />
+            </EuiFlexItem>
+          );
+        })}
+      </EuiFlexGroup>
+    </EuiPopover>
+  );
+};
diff --git a/public/components/visualizations/charts/data_table/data_table_type.ts b/public/components/visualizations/charts/data_table/data_table_type.ts
new file mode 100644
index 0000000000..7ad582ccdf
--- /dev/null
+++ b/public/components/visualizations/charts/data_table/data_table_type.ts
@@ -0,0 +1,112 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DataTable } from './data_table';
+import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
+import { LensIconChartDatatable } from '../../assets/chart_datatable';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import { ConfigAvailability } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import {
+  InputFieldItem,
+  SwitchButton,
+  ConfigChartOptions,
+  ButtonGroupItem,
+} from './../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+const COLUMN_WIDTH = 150;
+
+export const createDatatableTypeDefinition = (params: any = {}) => ({
+  name: 'data_table',
+  type: 'data_table',
+  id: 'data_table',
+  label: 'Table View',
+  fulllabel: 'Table View',
+  icontype: 'visTable',
+  category: VIS_CATEGORY.BASICS,
+  icon: LensIconChartDatatable,
+  showtableheader: true,
+  enablepagination: true,
+  colunmfilter: false,
+  columnalignment: 'leftAligned',
+  columnwidth: COLUMN_WIDTH,
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Data',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [
+          {
+            id: 'chart-styles',
+            name: 'Chart styles',
+            editor: ConfigChartOptions,
+            mapTo: 'chartStyles',
+            schemas: [
+              {
+                title: 'Show table header',
+                name: 'Show table header',
+                component: SwitchButton,
+                mapTo: 'showTableHeader',
+                eleType: 'switchButton',
+                currentValue: true,
+              },
+              {
+                title: 'Enable pagination',
+                name: 'Enable pagination',
+                component: SwitchButton,
+                mapTo: 'enablePagination',
+                eleType: 'switchButton',
+                currentValue: true,
+              },
+              {
+                name: 'Column alignment',
+                component: ButtonGroupItem,
+                mapTo: 'columnAlignment',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Left', id: 'leftAligned' },
+                    { name: 'Right', id: 'rightAligned' },
+                  ],
+                  defaultSelections: [{ name: 'Left', id: 'leftAligned' }],
+                },
+              },
+              {
+                title: 'Column Width',
+                name: 'Column Width',
+                component: InputFieldItem,
+                mapTo: 'columnWidth',
+                eleType: 'input',
+                currentValue: 150,
+              },
+              {
+                title: 'Column filter',
+                name: 'Column filter',
+                component: SwitchButton,
+                mapTo: 'colunmFilter',
+                eleType: 'switchButton',
+                currentValue: false,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+    },
+    config: {
+      ...sharedConfigs.config,
+    },
+    isUniColor: false,
+  },
+  component: DataTable,
+});
diff --git a/public/components/visualizations/charts/financial/gauge/gauge.tsx b/public/components/visualizations/charts/financial/gauge/gauge.tsx
new file mode 100644
index 0000000000..02fecc3d01
--- /dev/null
+++ b/public/components/visualizations/charts/financial/gauge/gauge.tsx
@@ -0,0 +1,211 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { find, isEmpty } from 'lodash';
+import Plotly from 'plotly.js-dist';
+import React, { useMemo } from 'react';
+import {
+  AGGREGATIONS,
+  GROUPBY,
+  PLOTLY_GAUGE_COLUMN_NUMBER,
+  DEFAULT_GAUGE_CHART_PARAMETERS,
+} from '../../../../../../common/constants/explorer';
+import { IVisualizationContainerProps } from '../../../../../../common/types/explorer';
+import { PLOT_MARGIN } from '../../../../../../common/constants/shared';
+import { ThresholdUnitType } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
+import { EmptyPlaceholder } from '../../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
+import { getPropName } from '../../../../event_analytics/utils/utils';
+import { Plt } from '../../../plotly/plot';
+
+const {
+  GaugeTitleSize,
+  DisplayDefaultGauges,
+  OrientationDefault,
+  TickLength,
+  LegendPlacement,
+} = DEFAULT_GAUGE_CHART_PARAMETERS;
+
+export const Gauge = ({ visualizations, layout, config }: any) => {
+  const {
+    data: {
+      rawVizData: {
+        data: queriedVizData,
+        metadata: { fields },
+      },
+      userConfigs: {
+        dataConfig: {
+          span = {},
+          chartStyles = {},
+          panelOptions = {},
+          thresholds = [],
+          [GROUPBY]: dimensions = [],
+          [AGGREGATIONS]: series = [],
+        },
+        layoutConfig = {},
+      },
+    },
+    vis: { icontype },
+  }: IVisualizationContainerProps = visualizations;
+
+  const seriesLength = series.length;
+  const numberOfGauges = panelOptions.numberOfGauges || DisplayDefaultGauges;
+
+  // style parameters
+  const titleSize = chartStyles.titleSize || GaugeTitleSize;
+  const valueSize = chartStyles.valueSize;
+  const showThresholdMarkers = chartStyles.showThresholdMarkers || false;
+  const showThresholdLabels = chartStyles.showThresholdLabels || false;
+  const orientation = chartStyles.orientation || OrientationDefault;
+  const legendPlacement = chartStyles.legendPlacement || LegendPlacement;
+
+  let xaxes = dimensions;
+  const isEmptyPlot = !seriesLength || isEmpty(queriedVizData);
+  const timestampField = find(fields, (field) => field.type === 'timestamp');
+  if (span && span.time_field && timestampField) {
+    xaxes = [timestampField, ...xaxes];
+  }
+
+  if (isEmptyPlot) return <EmptyPlaceholder icon={icontype} />;
+
+  const gaugeData: Plotly.Data[] = useMemo(() => {
+    let calculatedGaugeData: Plotly.Data[] = [];
+    // case 1,2: no dimension, single/multiple metrics
+    if (!xaxes.length && seriesLength >= 1) {
+      calculatedGaugeData = series.map((seriesItem: any) => {
+        return {
+          field_name: getPropName(seriesItem),
+          value: queriedVizData[getPropName(seriesItem)][0],
+        };
+      });
+    }
+
+    // case 3: multiple dimensions and multiple metrics
+    if (xaxes.length && seriesLength) {
+      const selectedDimensionsData = xaxes
+        .map((dimension: any) => {
+          return queriedVizData[dimension.name]
+            ? queriedVizData[dimension.name].slice(0, numberOfGauges)
+            : [];
+        })
+        .reduce((prev, cur) => {
+          return prev.map((i, j) => `${i}, ${cur[j]}`);
+        });
+      const selectedSeriesData = series.map((seriesItem: any) => {
+        const propValue = getPropName(seriesItem);
+        return queriedVizData[`${propValue}`]
+          ? queriedVizData[`${propValue}`].slice(0, numberOfGauges)
+          : [];
+      });
+
+      selectedSeriesData.map((seriesSlice: any, seriesSliceIndex: number) => {
+        calculatedGaugeData = [
+          ...calculatedGaugeData,
+          ...seriesSlice.map((seriesSliceData: any, seriesSliceDataIndex: number) => {
+            return {
+              field_name: `${selectedDimensionsData[seriesSliceDataIndex]}, ${getPropName(
+                series[seriesSliceIndex]
+              )}`,
+              value: seriesSliceData,
+            };
+          }),
+        ];
+      });
+    }
+
+    return calculatedGaugeData.map((gauge, index) => {
+      return {
+        type: 'indicator',
+        mode: 'gauge+number+delta',
+        value: gauge.value || 0,
+        title: {
+          text: gauge.field_name,
+          font: { size: titleSize },
+          align: legendPlacement,
+        },
+        ...(valueSize && {
+          number: {
+            font: {
+              size: valueSize,
+            },
+          },
+        }),
+        domain: {
+          ...(orientation === 'auto' || orientation === 'h'
+            ? {
+                row: Math.floor(index / PLOTLY_GAUGE_COLUMN_NUMBER),
+                column: index % PLOTLY_GAUGE_COLUMN_NUMBER,
+              }
+            : {
+                column: Math.floor(index / PLOTLY_GAUGE_COLUMN_NUMBER),
+                row: index % PLOTLY_GAUGE_COLUMN_NUMBER,
+              }),
+        },
+        gauge: {
+          ...(showThresholdMarkers &&
+            thresholds &&
+            thresholds.length && {
+              threshold: {
+                line: { color: thresholds[0]?.color || 'red', width: 4 },
+                thickness: 0.75,
+                value: thresholds[0]?.value || 0,
+              },
+            }),
+          // threshold labels
+          ...(showThresholdLabels && thresholds && thresholds.length
+            ? {
+                axis: {
+                  ticktext: [gauge.value, ...thresholds.map((t: ThresholdUnitType) => t.name)],
+                  tickvals: [gauge.value, ...thresholds.map((t: ThresholdUnitType) => t.value)],
+                  ticklen: TickLength,
+                },
+              }
+            : {}),
+        },
+      };
+    });
+  }, [
+    xaxes,
+    series,
+    queriedVizData,
+    fields,
+    thresholds,
+    showThresholdMarkers,
+    orientation,
+    showThresholdLabels,
+    titleSize,
+    valueSize,
+  ]);
+
+  const mergedLayout = useMemo(() => {
+    const isAtleastOneFullRow = Math.floor(gaugeData.length / PLOTLY_GAUGE_COLUMN_NUMBER) > 0;
+    return {
+      grid: {
+        ...(orientation === 'auto' || orientation === 'h'
+          ? {
+              rows: Math.floor(gaugeData.length / PLOTLY_GAUGE_COLUMN_NUMBER) + 1,
+              columns: isAtleastOneFullRow ? PLOTLY_GAUGE_COLUMN_NUMBER : gaugeData.length,
+            }
+          : {
+              columns: Math.floor(gaugeData.length / PLOTLY_GAUGE_COLUMN_NUMBER) + 1,
+              rows: isAtleastOneFullRow ? PLOTLY_GAUGE_COLUMN_NUMBER : gaugeData.length,
+            }),
+        pattern: 'independent',
+      },
+      ...layout,
+      ...(layoutConfig.layout && layoutConfig.layout),
+      title: panelOptions.title || layoutConfig.layout?.title || '',
+      margin: {
+        ...PLOT_MARGIN,
+        t: 100,
+      },
+    };
+  }, [layout, gaugeData.length, layoutConfig.layout, panelOptions.title, orientation]);
+
+  const mergedConfigs = {
+    ...config,
+    ...(layoutConfig.config && layoutConfig.config),
+  };
+  return <Plt data={gaugeData} layout={mergedLayout} config={mergedConfigs} />;
+};
diff --git a/public/components/visualizations/charts/financial/gauge/gauge_type.ts b/public/components/visualizations/charts/financial/gauge/gauge_type.ts
new file mode 100644
index 0000000000..2da38fefdf
--- /dev/null
+++ b/public/components/visualizations/charts/financial/gauge/gauge_type.ts
@@ -0,0 +1,142 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Gauge } from './gauge';
+import { getPlotlySharedConfigs, getPlotlyCategory } from '../../shared/shared_configs';
+import { LensIconChartLine } from '../../../assets/chart_line';
+import { VizDataPanel } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import {
+  ConfigThresholds,
+  InputFieldItem,
+  SwitchButton,
+  ConfigChartOptions,
+  ButtonGroupItem,
+} from '../../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+import { DEFAULT_GAUGE_CHART_PARAMETERS } from '../../../../../../common/constants/explorer';
+
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+const { ThresholdsMaxLimit } = DEFAULT_GAUGE_CHART_PARAMETERS;
+
+export const createGaugeTypeDefinition = (params: any = {}) => ({
+  name: 'Gauge',
+  type: 'indicator',
+  id: 'gauge',
+  label: 'Gauge',
+  fulllabel: 'Gauge',
+  icontype: 'visGauge',
+  category: VIS_CATEGORY.BASICS,
+  selection: {
+    dataLoss: 'nothing',
+  },
+  icon: LensIconChartLine,
+  valueseries: 'yaxis',
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Style',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [
+          {
+            id: 'chart-styles',
+            name: 'Chart styles',
+            editor: ConfigChartOptions,
+            mapTo: 'chartStyles',
+            schemas: [
+              {
+                name: 'Orientation',
+                component: ButtonGroupItem,
+                mapTo: 'orientation',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Auto', id: 'auto' },
+                    { name: 'Vertical', id: 'v' },
+                    { name: 'Horizontal', id: 'h' },
+                  ],
+                  defaultSelections: [{ name: 'Auto', id: 'auto' }],
+                },
+              },
+              {
+                name: 'Legend placement',
+                component: ButtonGroupItem,
+                mapTo: 'legendPlacement',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Center', id: 'center' },
+                    { name: 'Right', id: 'right' },
+                    { name: 'Left', id: 'left' },
+                  ],
+                  defaultSelections: [{ name: 'Center', id: 'center' }],
+                },
+              },
+              {
+                title: 'Title size',
+                name: 'Title size',
+                component: InputFieldItem,
+                mapTo: 'titleSize',
+                eleType: 'input',
+              },
+              {
+                title: 'Value size',
+                name: 'Value size',
+                component: InputFieldItem,
+                mapTo: 'valueSize',
+                eleType: 'input',
+              },
+              {
+                title: 'Show threshold labels',
+                name: 'Show threshold labels',
+                component: SwitchButton,
+                mapTo: 'showThresholdLabels',
+                eleType: 'switchButton',
+                currentValue: false,
+              },
+              {
+                title: 'Show threshold markers',
+                name: 'Show threshold markers',
+                component: SwitchButton,
+                mapTo: 'showThresholdMarkers',
+                eleType: 'switchButton',
+                currentValue: true,
+              },
+            ],
+          },
+          {
+            id: 'thresholds',
+            name: 'Thresholds',
+            editor: ConfigThresholds,
+            mapTo: 'thresholds',
+            defaultState: [],
+            schemas: [],
+            props: {
+              maxLimit: ThresholdsMaxLimit,
+            },
+          },
+        ],
+      },
+      {
+        id: 'style-panel',
+        name: 'Layout',
+        mapTo: 'layoutConfig',
+        editor: ConfigEditor,
+        content: [],
+      },
+    ],
+  },
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+    },
+    config: {
+      ...sharedConfigs.config,
+    },
+  },
+  component: Gauge,
+});
diff --git a/public/components/visualizations/charts/helpers/index.ts b/public/components/visualizations/charts/helpers/index.ts
new file mode 100644
index 0000000000..94a4ef1448
--- /dev/null
+++ b/public/components/visualizations/charts/helpers/index.ts
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { getDefaultVizConfigPanelTabs, getVizContainerProps } from './viz_types';
diff --git a/public/components/visualizations/charts/helpers/viz_types.ts b/public/components/visualizations/charts/helpers/viz_types.ts
new file mode 100644
index 0000000000..8fa0142cb5
--- /dev/null
+++ b/public/components/visualizations/charts/helpers/viz_types.ts
@@ -0,0 +1,293 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isEmpty, take } from 'lodash';
+import {
+  AGGREGATIONS,
+  CUSTOM_LABEL,
+  GROUPBY,
+  PARENTFIELDS,
+  SIMILAR_VIZ_TYPES,
+  TIMESTAMP,
+  TIME_INTERVAL_OPTIONS,
+} from '../../../../../common/constants/explorer';
+import { VIS_CHART_TYPES } from '../../../../../common/constants/shared';
+import { QueryManager } from '../../../../../common/query_manager';
+import {
+  ExplorerData,
+  IField,
+  IQuery,
+  IVisualizationContainerProps,
+} from '../../../../../common/types/explorer';
+import { getVisType } from '../vis_types';
+import { statsChunk } from '../../../../../common/query_manager/ast/types/stats';
+interface IVizContainerProps {
+  vizId: string;
+  appData?: { fromApp: boolean };
+  rawVizData?: any;
+  query?: IQuery;
+  indexFields?: IField[];
+  userConfigs?: any;
+  defaultAxes?: {
+    xaxis: IField[];
+    yaxis: IField[];
+  };
+  explorer?: ExplorerData;
+}
+
+const initialDimensionEntry = {
+  label: '',
+  name: '',
+};
+
+const initialSeriesEntry = {
+  [CUSTOM_LABEL]: '',
+  label: '',
+  name: '',
+  aggregation: 'count',
+};
+
+const initialEntryTreemap = { label: '', name: '' };
+
+const getDefaultXYAxisLabels = (vizFields: IField[], visName: string) => {
+  if (isEmpty(vizFields)) return {};
+  const vizFieldsWithLabel: Array<{ [key: string]: string }> = vizFields.map((vizField) => ({
+    ...vizField,
+    label: vizField.name,
+  }));
+
+  const mapXaxis = (): Array<{ [key: string]: string }> => {
+    const xaxis = vizFieldsWithLabel.filter((field) => field.type === 'timestamp');
+    return visName === VIS_CHART_TYPES.Line
+      ? xaxis.length === 0
+        ? [initialDimensionEntry]
+        : xaxis
+      : [vizFieldsWithLabel[vizFieldsWithLabel.length - 1]];
+  };
+
+  const mapYaxis = (): Array<{ [key: string]: string }> =>
+    visName === VIS_CHART_TYPES.Line
+      ? vizFieldsWithLabel.filter((field) => field.type !== 'timestamp')
+      : take(
+          vizFieldsWithLabel,
+          vizFieldsWithLabel.length - 1 > 0 ? vizFieldsWithLabel.length - 1 : 1
+        ) || [];
+
+  return { xaxis: mapXaxis(), yaxis: mapYaxis() };
+};
+
+const getStandardedOuiField = (name?: string, type?: string) => ({
+  name,
+  label: name,
+  type,
+});
+
+const getStandardUnitField = (name?: string, value?: string) => ({
+  name,
+  label: name,
+  value,
+});
+
+const getSpanValue = (statsTokens: statsChunk) => {
+  const fieldInfo = statsTokens.groupby?.span?.span_expression?.field;
+  const timeUnit = TIME_INTERVAL_OPTIONS.find(
+    (time_unit) => time_unit.value === statsTokens.groupby?.span?.span_expression?.time_unit
+  );
+  return {
+    span: {
+      time_field: statsTokens.groupby?.span?.span_expression?.field
+        ? [getStandardedOuiField(fieldInfo, TIMESTAMP)]
+        : [],
+      interval: statsTokens.groupby?.span?.span_expression?.literal_value ?? '0',
+      unit: statsTokens.groupby?.span?.span_expression?.time_unit
+        ? [getStandardUnitField(timeUnit?.text, timeUnit?.value)]
+        : [],
+    },
+  };
+};
+
+const defaultUserConfigs = (queryString, visualizationName: string) => {
+  let tempUserConfigs = {};
+  const qm = new QueryManager();
+  const statsTokens = qm.queryParser().parse(queryString.finalQuery).getStats();
+  if (!statsTokens) {
+    tempUserConfigs = {
+      [AGGREGATIONS]: [],
+      [GROUPBY]: [],
+    };
+  } else {
+    tempUserConfigs = {
+      ...(statsTokens.groupby !== '' &&
+        statsTokens.groupby?.span !== null &&
+        getSpanValue(statsTokens)),
+    };
+    if (visualizationName === VIS_CHART_TYPES.LogsView) {
+      const dimensions = statsTokens.aggregations
+        .map((agg) => {
+          const logViewField = `${agg.function.name}(${agg.function.value_expression})` ?? '';
+          return {
+            label: logViewField,
+            name: logViewField,
+          };
+        })
+        .concat(
+          statsTokens.groupby.group_fields?.map((agg) => ({
+            label: agg.name ?? '',
+            name: agg.name ?? '',
+          }))
+        );
+      if (statsTokens.groupby.span !== null) {
+        const { field, literal_value, time_unit } = statsTokens.groupby.span.span_expression;
+        const timespanField = `span(${field},${literal_value}${time_unit})`;
+        dimensions.push({
+          label: timespanField,
+          name: timespanField,
+        });
+      }
+      tempUserConfigs = {
+        ...tempUserConfigs,
+        [AGGREGATIONS]: [],
+        [GROUPBY]: dimensions,
+      };
+    } else if (visualizationName === VIS_CHART_TYPES.HeatMap) {
+      tempUserConfigs = {
+        ...tempUserConfigs,
+        [GROUPBY]: [],
+        [AGGREGATIONS]: [],
+      };
+    } else {
+      tempUserConfigs = {
+        ...tempUserConfigs,
+        [AGGREGATIONS]: statsTokens.aggregations.map((agg) => ({
+          [CUSTOM_LABEL]: agg[CUSTOM_LABEL],
+          label: agg.function?.value_expression,
+          name: agg.function?.value_expression,
+          aggregation: agg.function?.name,
+        })),
+        [GROUPBY]: statsTokens.groupby?.group_fields?.map((dimension) => ({
+          label: dimension.name ?? '',
+          name: dimension.name ?? '',
+        })),
+      };
+    }
+  }
+  return tempUserConfigs;
+};
+
+const getUserConfigs = (
+  userSelectedConfigs: object,
+  vizFields: IField[],
+  visName: string,
+  query
+) => {
+  let configOfUser = userSelectedConfigs;
+  const axesData = getDefaultXYAxisLabels(vizFields, visName);
+  if (!(userSelectedConfigs.dataConfig?.GROUPBY || userSelectedConfigs.dataConfig?.AGGREGATIONS)) {
+    switch (visName) {
+      case VIS_CHART_TYPES.HeatMap:
+        configOfUser = {
+          ...userSelectedConfigs,
+          dataConfig:
+            userSelectedConfigs?.dataConfig === undefined
+              ? { ...defaultUserConfigs(query, visName) }
+              : {
+                  ...userSelectedConfigs?.dataConfig,
+                },
+        };
+        break;
+      case VIS_CHART_TYPES.TreeMap:
+        configOfUser = {
+          ...userSelectedConfigs,
+          dataConfig: {
+            ...userSelectedConfigs?.dataConfig,
+            [GROUPBY]: [
+              {
+                childField: { ...(axesData.xaxis ? axesData.xaxis[0] : initialEntryTreemap) },
+                parentFields:
+                  userSelectedConfigs?.dataConfig !== undefined &&
+                  userSelectedConfigs.dataConfig[GROUPBY]?.length > 0
+                    ? [...userSelectedConfigs.dataConfig[GROUPBY][0][PARENTFIELDS]]
+                    : [],
+              },
+            ],
+            [AGGREGATIONS]: [
+              { valueField: { ...(axesData.yaxis ? axesData.yaxis[0] : initialEntryTreemap) } },
+            ],
+          },
+        };
+        break;
+      case VIS_CHART_TYPES.Histogram:
+        configOfUser = {
+          ...userSelectedConfigs,
+          dataConfig: {
+            ...userSelectedConfigs?.dataConfig,
+            [GROUPBY]: [{ bucketSize: '', bucketOffset: '' }],
+            [AGGREGATIONS]: [],
+          },
+        };
+        break;
+      case VIS_CHART_TYPES.LogsView:
+        configOfUser = {
+          ...userSelectedConfigs,
+          dataConfig: {
+            ...userSelectedConfigs?.dataConfig,
+            ...defaultUserConfigs(query, visName),
+          },
+        };
+        break;
+      default:
+        configOfUser = {
+          ...userSelectedConfigs,
+          dataConfig: {
+            ...userSelectedConfigs?.dataConfig,
+            ...defaultUserConfigs(query, visName),
+          },
+        };
+        break;
+    }
+  }
+  return isEmpty(configOfUser) ? userSelectedConfigs : configOfUser;
+};
+
+export const getVisTypeData = (vizId: string) => {
+  if (SIMILAR_VIZ_TYPES.includes(vizId)) {
+    return getVisType(vizId, { type: vizId });
+  }
+  return getVisType(vizId);
+};
+
+export const getVizContainerProps = ({
+  vizId,
+  rawVizData = {},
+  query = {},
+  indexFields = {},
+  userConfigs = {},
+  appData = {},
+  explorer = { explorerData: { jsonData: [], jsonDataAll: [] } },
+}: IVizContainerProps): IVisualizationContainerProps => {
+  const getVisTypeData = () =>
+    SIMILAR_VIZ_TYPES.includes(vizId as VIS_CHART_TYPES)
+      ? { ...getVisType(vizId, { type: vizId }) }
+      : { ...getVisType(vizId) };
+
+  return {
+    data: {
+      appData: { ...appData },
+      rawVizData: { ...rawVizData },
+      query: { ...query },
+      indexFields: { ...indexFields },
+      userConfigs: {
+        ...userConfigs,
+      },
+      defaultAxes: {
+        ...getDefaultXYAxisLabels(rawVizData?.metadata?.fields, getVisTypeData(vizId).name),
+      },
+      explorer: { ...explorer },
+    },
+    vis: {
+      ...getVisTypeData(vizId),
+    },
+  };
+};
diff --git a/public/components/visualizations/charts/histogram/histogram.tsx b/public/components/visualizations/charts/histogram/histogram.tsx
new file mode 100644
index 0000000000..6b8d8fbe10
--- /dev/null
+++ b/public/components/visualizations/charts/histogram/histogram.tsx
@@ -0,0 +1,113 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isEmpty, take } from 'lodash';
+import React, { useMemo } from 'react';
+import { GROUPBY } from '../../../../../common/constants/explorer';
+import {
+  DEFAULT_CHART_STYLES,
+  FILLOPACITY_DIV_FACTOR,
+  PLOTLY_COLOR,
+  VIS_CHART_TYPES,
+  PLOT_MARGIN,
+} from '../../../../../common/constants/shared';
+import { IVisualizationContainerProps } from '../../../../../common/types/explorer';
+import { hexToRgb } from '../../../../components/event_analytics/utils/utils';
+import { Plt } from '../../plotly/plot';
+
+export const Histogram = ({ visualizations, layout, config }: any) => {
+  const { LineWidth, FillOpacity, LegendPosition, ShowLegend } = DEFAULT_CHART_STYLES;
+  const {
+    data: {
+      defaultAxes,
+      indexFields,
+      query,
+      rawVizData: {
+        data: queriedVizData,
+        metadata: { fields },
+      },
+      userConfigs: {
+        dataConfig: {
+          chartStyles = {},
+          legend = {},
+          tooltipOptions = {},
+          colorTheme = [],
+          panelOptions = {},
+          [GROUPBY]: dimensions = [],
+        },
+        layoutConfig = {},
+      },
+    },
+    vis: visMetaData,
+  }: IVisualizationContainerProps = visualizations;
+
+  const lastIndex = fields.length - 1;
+  const lineWidth = chartStyles.lineWidth || LineWidth;
+  const showLegend = legend.showLegend && legend.showLegend !== ShowLegend ? false : true;
+  const legendPosition = legend.position || LegendPosition;
+  const fillOpacity = (chartStyles.fillOpacity || FillOpacity) / FILLOPACITY_DIV_FACTOR;
+  const tooltipMode =
+    tooltipOptions.tooltipMode !== undefined ? tooltipOptions.tooltipMode : 'show';
+  const tooltipText = tooltipOptions.tooltipText !== undefined ? tooltipOptions.tooltipText : 'all';
+  const valueSeries = defaultAxes?.yaxis || take(fields, lastIndex > 0 ? lastIndex : 1);
+
+  const xbins: any = {};
+  if (dimensions && dimensions[0]?.bucketSize) {
+    xbins.size = dimensions[0]?.bucketSize;
+  }
+  if (dimensions && dimensions[0]?.bucketOffset) {
+    xbins.start = dimensions[0]?.bucketOffset;
+  }
+
+  const selectedColorTheme = (field: string, index: number, opacity?: number) => {
+    let newColor;
+    if (colorTheme && colorTheme.length !== 0) {
+      newColor = colorTheme.find((colorSelected) => colorSelected.name.name === field);
+    }
+    return hexToRgb(newColor ? newColor.color : PLOTLY_COLOR[index % PLOTLY_COLOR.length], opacity);
+  };
+
+  const hisValues = useMemo(
+    () =>
+      valueSeries.map((field: any, index: number) => ({
+        x: queriedVizData[field.name],
+        type: VIS_CHART_TYPES.Histogram,
+        name: field.name,
+        hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText,
+        marker: {
+          color: selectedColorTheme(field.name, index, fillOpacity),
+          line: {
+            color: selectedColorTheme(field.name, index),
+            width: lineWidth,
+          },
+        },
+        xbins: !isEmpty(xbins) ? xbins : undefined,
+      })),
+    [valueSeries, queriedVizData, fillOpacity, lineWidth, xbins, selectedColorTheme]
+  );
+
+  const mergedLayout = {
+    ...layout,
+    ...(layoutConfig.layout && layoutConfig.layout),
+    title: panelOptions.title || layoutConfig.layout?.title || '',
+    barmode: 'group',
+    legend: {
+      ...layout.legend,
+      orientation: legendPosition,
+    },
+    showlegend: showLegend,
+    margin: PLOT_MARGIN,
+  };
+
+  const mergedConfigs = useMemo(
+    () => ({
+      ...config,
+      ...(layoutConfig.config && layoutConfig.config),
+    }),
+    [config, layoutConfig.config]
+  );
+
+  return <Plt data={hisValues} layout={mergedLayout} config={mergedConfigs} />;
+};
diff --git a/public/components/visualizations/charts/histogram/histogram_type.ts b/public/components/visualizations/charts/histogram/histogram_type.ts
new file mode 100644
index 0000000000..d7d1cb5778
--- /dev/null
+++ b/public/components/visualizations/charts/histogram/histogram_type.ts
@@ -0,0 +1,138 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Histogram } from './histogram';
+import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import {
+  ConfigChartOptions,
+  ConfigLegend,
+  SliderConfig,
+  ConfigColorTheme,
+} from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+import { DEFAULT_CHART_STYLES } from '../../../../../common/constants/shared';
+import { fetchConfigObject } from '../../../../components/event_analytics/utils/utils';
+
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+const { LineWidth, FillOpacity, ShowLegend, LegendPosition } = DEFAULT_CHART_STYLES;
+
+export const createHistogramVisDefinition = (params = {}) => ({
+  name: 'histogram',
+  type: 'histogram',
+  id: 'histogram',
+  label: 'Histogram',
+  fulllabel: 'Histogram',
+  category: VIS_CATEGORY.BASICS,
+  selection: {
+    dataLoss: 'nothing',
+  },
+  valueseries: 'yaxis',
+  icontype: 'visArea',
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Style',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [
+          {
+            id: 'chart-styles',
+            name: 'Chart styles',
+            editor: ConfigChartOptions,
+            mapTo: 'chartStyles',
+            schemas: [
+              {
+                name: 'Line width',
+                component: SliderConfig,
+                mapTo: 'lineWidth',
+                defaultState: LineWidth,
+                eleType: 'slider',
+                props: {
+                  max: 10,
+                },
+              },
+              {
+                name: 'Fill opacity',
+                component: SliderConfig,
+                mapTo: 'fillOpacity',
+                defaultState: FillOpacity,
+                eleType: 'slider',
+                props: {
+                  max: 100,
+                },
+              },
+            ],
+          },
+          {
+            id: 'color-theme',
+            name: 'Color theme',
+            editor: ConfigColorTheme,
+            mapTo: 'colorTheme',
+            schemas: [],
+          },
+          fetchConfigObject('Tooltip', {
+            options: [
+              { name: 'All', id: 'all' },
+              { name: 'Dimension', id: 'x' },
+              { name: 'Series', id: 'y' },
+            ],
+            defaultSelections: [{ name: 'All', id: 'all' }],
+          }),
+          {
+            id: 'legend',
+            name: 'Legend',
+            editor: ConfigLegend,
+            mapTo: 'legend',
+            schemas: [
+              {
+                name: 'Show legend',
+                mapTo: 'showLegend',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Show', id: 'show' },
+                    { name: 'Hidden', id: 'hidden' },
+                  ],
+                  defaultSelections: [{ name: 'Show', id: ShowLegend }],
+                },
+              },
+              {
+                name: 'Position',
+                mapTo: 'position',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Right', id: 'v' },
+                    { name: 'Bottom', id: 'h' },
+                  ],
+                  defaultSelections: [{ name: 'Right', id: LegendPosition }],
+                },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'style-panel',
+        name: 'Layout',
+        mapTo: 'layoutConfig',
+        editor: ConfigEditor,
+        content: [],
+      },
+    ],
+  },
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+    },
+    config: {
+      ...sharedConfigs.config,
+    },
+  },
+  component: Histogram,
+});
diff --git a/public/components/visualizations/charts/lines/line.tsx b/public/components/visualizations/charts/lines/line.tsx
new file mode 100644
index 0000000000..8f34f59d08
--- /dev/null
+++ b/public/components/visualizations/charts/lines/line.tsx
@@ -0,0 +1,245 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { find, isEmpty, last, forEach } from 'lodash';
+import React, { useMemo } from 'react';
+import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer';
+import {
+  DEFAULT_CHART_STYLES,
+  FILLOPACITY_DIV_FACTOR,
+  PLOTLY_COLOR,
+  VIS_CHART_TYPES,
+  PLOT_MARGIN,
+} from '../../../../../common/constants/shared';
+import { IVisualizationContainerProps } from '../../../../../common/types/explorer';
+import { hexToRgb } from '../../../../components/event_analytics/utils/utils';
+import { AvailabilityUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
+import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
+import { VisCanvassPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components';
+import { Plt } from '../../plotly/plot';
+import { transformPreprocessedDataToTraces, preprocessJsonData } from '../shared/common';
+
+export const Line = ({ visualizations, layout, config }: any) => {
+  const {
+    DefaultModeLine,
+    Interpolation,
+    LineWidth,
+    FillOpacity,
+    MarkerSize,
+    LegendPosition,
+    ShowLegend,
+    DefaultModeScatter,
+    LabelAngle,
+  } = DEFAULT_CHART_STYLES;
+
+  const {
+    data: {
+      rawVizData: {
+        data: queriedVizData,
+        jsonData,
+        metadata: { fields },
+      },
+      userConfigs: {
+        dataConfig: {
+          chartStyles = {},
+          legend = {},
+          span = {},
+          colorTheme = [],
+          thresholds = [],
+          tooltipOptions = {},
+          panelOptions = {},
+          [GROUPBY]: dimensions = [],
+          [AGGREGATIONS]: series = [],
+          breakdowns = [],
+        } = {},
+        layoutConfig = {},
+        availabilityConfig = {},
+      } = {},
+    },
+    vis: { icontype, name },
+  }: IVisualizationContainerProps = visualizations;
+
+  const tooltipMode =
+    tooltipOptions.tooltipMode !== undefined ? tooltipOptions.tooltipMode : 'show';
+  const tooltipText = tooltipOptions.tooltipText !== undefined ? tooltipOptions.tooltipText : 'all';
+  const lastIndex = fields.length - 1;
+  const visType: string = name;
+  const mode =
+    chartStyles.style || (visType === VIS_CHART_TYPES.Line ? DefaultModeLine : DefaultModeScatter);
+  const lineShape = chartStyles.interpolation || Interpolation;
+  const lineWidth = chartStyles.lineWidth || LineWidth;
+  const showLegend = !(legend.showLegend && legend.showLegend !== ShowLegend);
+  const legendPosition = legend.position || LegendPosition;
+  const markerSize = chartStyles.pointSize || MarkerSize;
+  const fillOpacity =
+    chartStyles.fillOpacity !== undefined
+      ? chartStyles.fillOpacity / FILLOPACITY_DIV_FACTOR
+      : FillOpacity / FILLOPACITY_DIV_FACTOR;
+  const tickAngle = chartStyles.rotateLabels || LabelAngle;
+  const labelSize = chartStyles.labelSize;
+  const legendSize = legend.legendSize;
+  const getSelectedColorTheme = (field: any, index: number) =>
+    (colorTheme.length > 0 &&
+      colorTheme.find((colorSelected) => colorSelected.name.name === field)?.color) ||
+    PLOTLY_COLOR[index % PLOTLY_COLOR.length];
+  const timestampField = find(fields, (field) => field.type === 'timestamp');
+  let xaxis = [timestampField];
+
+  if (isEmpty(series)) return <VisCanvassPlaceholder message='Missing mandatory series' icon={icontype} />;
+
+  const addStylesToTraces = (traces, traceStyles) => {
+    const { fillOpacity, tooltipMode, tooltipText, lineWidth, lineShape, markerSize } = traceStyles;
+    return traces.map((trace, idx: number) => {
+      const selectedColor = getSelectedColorTheme(trace.aggName, idx);
+      const fillColor = hexToRgb(selectedColor, fillOpacity);
+
+      return {
+        ...trace,
+        hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText,
+        type: 'line',
+        mode,
+        ...{
+          fill: 'tozeroy',
+          fillcolor: fillColor,
+        },
+        line: {
+          shape: lineShape,
+          width: lineWidth,
+          color: selectedColor,
+        },
+        marker: {
+          size: markerSize,
+          ...{
+            color: fillColor,
+            line: {
+              color: selectedColor,
+              width: lineWidth,
+            },
+          },
+        },
+      };
+    });
+  };
+
+  let lines = useMemo(() => {
+    const visConfig = {
+      dimensions,
+      series,
+      breakdowns,
+      span,
+    };
+    const traceStyles = {
+      fillOpacity,
+      tooltipMode,
+      tooltipText,
+      lineShape,
+      lineWidth,
+      markerSize,
+    };
+
+    return addStylesToTraces(
+      transformPreprocessedDataToTraces(preprocessJsonData(jsonData, visConfig), visConfig),
+      traceStyles
+    );
+  }, [
+    chartStyles,
+    jsonData,
+    dimensions,
+    series,
+    span,
+    breakdowns,
+    panelOptions,
+    tooltipOptions,
+  ]);
+
+  const mergedLayout = useMemo(() => {
+    const axisLabelsStyle = {
+      automargin: true,
+      tickfont: {
+        ...(labelSize && {
+          size: labelSize,
+        }),
+      },
+    };
+
+    return {
+      ...layout,
+      title: panelOptions.title || layoutConfig.layout?.title || '',
+      legend: {
+        ...layout.legend,
+        orientation: legendPosition,
+        ...(legendSize && {
+          font: {
+            size: legendSize,
+          },
+        }),
+      },
+      autosize: true,
+      xaxis: {
+        tickangle: tickAngle,
+        ...axisLabelsStyle,
+      },
+      yaxis: {
+        ...axisLabelsStyle,
+      },
+      showlegend: showLegend,
+      margin: PLOT_MARGIN,
+    };
+  }, [visualizations]);
+
+  if (thresholds || availabilityConfig.level) {
+    const thresholdTraces = {
+      x: [],
+      y: [],
+      mode: 'text',
+      text: [],
+      showlegend: false,
+    };
+
+    const levels = availabilityConfig.level ? availabilityConfig.level : [];
+
+    const mapToLine = (list: ThresholdUnitType[] | AvailabilityUnitType[], lineStyle: any) => {
+      return list.map((thr: ThresholdUnitType) => {
+        thresholdTraces.x.push(lines[0]?.x[0] || '');
+        thresholdTraces.y.push(thr.value * (1 + 0.06));
+        thresholdTraces.text.push(thr.name);
+        return {
+          type: 'line',
+          x0: lines[0]?.x[0] || 0,
+          y0: thr.value,
+          x1: last(last(lines)?.x) || 1,
+          y1: thr.value,
+          name: thr.name || '',
+          opacity: 0.7,
+          line: {
+            color: thr.color,
+            width: 3,
+            ...lineStyle,
+          },
+        };
+      });
+    };
+
+    mergedLayout.shapes = [
+      ...mapToLine(
+        thresholds.filter((i: ThresholdUnitType) => i.value !== ''),
+        { dash: 'dashdot' }
+      ),
+      ...mapToLine(levels, {}),
+    ];
+
+    lines = [...lines, thresholdTraces];
+  }
+
+  const mergedConfigs = useMemo(
+    () => ({
+      ...config,
+      ...(layoutConfig.config && layoutConfig.config),
+    }),
+    [config, layoutConfig.config]
+  );
+
+  return <Plt data={lines} layout={mergedLayout} config={mergedConfigs} />;
+};
diff --git a/public/components/visualizations/charts/lines/line_type.ts b/public/components/visualizations/charts/lines/line_type.ts
new file mode 100644
index 0000000000..b82e44eb00
--- /dev/null
+++ b/public/components/visualizations/charts/lines/line_type.ts
@@ -0,0 +1,254 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Line } from './line';
+import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
+import { LensIconChartLine } from '../../assets/chart_line';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import {
+  ConfigThresholds,
+  ConfigLineChartStyles,
+  ConfigLegend,
+  InputFieldItem,
+  ConfigColorTheme,
+} from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+import { ConfigAvailability } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
+import {
+  DEFAULT_CHART_STYLES,
+  VIS_CHART_TYPES,
+  PLOTLY_COLOR,
+} from '../../../../../common/constants/shared';
+import { ButtonGroupItem } from '../../../../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group';
+import { SliderConfig } from '../../../../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_style_slider';
+import { fetchConfigObject } from '../../../../components/event_analytics/utils/utils';
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+const {
+  DefaultModeLine,
+  DefaultModeScatter,
+  Interpolation,
+  LineWidth,
+  FillOpacity,
+  MarkerSize,
+  LegendPosition,
+  ShowLegend,
+  LabelAngle,
+} = DEFAULT_CHART_STYLES;
+
+export const createLineTypeDefinition = (params: any = {}) => ({
+  name: params.type,
+  type: params.type,
+  id: params.type,
+  label: params.type === VIS_CHART_TYPES.Line ? 'Time series' : 'Scatter',
+  fulllabel: params.type === VIS_CHART_TYPES.Line ? 'Time series' : 'Scatter',
+  icontype: 'visLine',
+  category: VIS_CATEGORY.BASICS,
+  selection: {
+    dataLoss: 'nothing',
+  },
+  icon: LensIconChartLine,
+  categoryaxis: 'xaxis',
+  seriesaxis: 'yaxis',
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Style',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [
+          {
+            id: 'legend',
+            name: 'Legend',
+            editor: ConfigLegend,
+            mapTo: 'legend',
+            schemas: [
+              {
+                name: 'Show legend',
+                mapTo: 'showLegend',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Show', id: 'show' },
+                    { name: 'Hidden', id: 'hidden' },
+                  ],
+                  defaultSelections: [{ name: 'Show', id: ShowLegend }],
+                },
+              },
+              {
+                name: 'Position',
+                mapTo: 'position',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Right', id: 'v' },
+                    { name: 'Bottom', id: 'h' },
+                  ],
+                  defaultSelections: [{ name: 'Right', id: LegendPosition }],
+                },
+              },
+              {
+                title: 'Legend size',
+                name: 'Legend size',
+                component: InputFieldItem,
+                mapTo: 'legendSize',
+                eleType: 'input',
+              },
+            ],
+          },
+          fetchConfigObject('Tooltip', {
+            options: [
+              { name: 'All', id: 'all' },
+              { name: 'Dimension', id: 'x' },
+              { name: 'Series', id: 'y' },
+            ],
+            defaultSelections: [{ name: 'All', id: 'all' }],
+          }),
+          {
+            id: 'chart_styles',
+            name: 'Chart styles',
+            editor: ConfigLineChartStyles,
+            mapTo: 'chartStyles',
+            schemas: [
+              {
+                name: 'Mode',
+                component: ButtonGroupItem,
+                mapTo: 'style',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Lines', id: 'lines' },
+                    { name: 'Marker', id: 'markers' },
+                    { name: 'Lines + Markers', id: 'lines+markers' },
+                  ],
+                  defaultSelections: [
+                    params.type === VIS_CHART_TYPES.Line
+                      ? { name: 'Lines', id: DefaultModeLine }
+                      : { name: 'Marker', id: DefaultModeScatter },
+                  ],
+                },
+              },
+              {
+                name: 'Interpolation',
+                component: ButtonGroupItem,
+                mapTo: 'interpolation',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Linear', id: 'linear' },
+                    { name: 'Smooth', id: 'spline' },
+                    { name: 'Step before', id: 'hv' },
+                    { name: 'Step after', id: 'vh' },
+                  ],
+                  defaultSelections: [{ name: 'Smooth', id: Interpolation }],
+                },
+              },
+              {
+                name: 'Line width',
+                component: SliderConfig,
+                mapTo: 'lineWidth',
+                defaultState: LineWidth,
+                eleType: 'slider',
+                props: {
+                  max: 10,
+                },
+              },
+              {
+                name: 'Fill opacity',
+                component: SliderConfig,
+                mapTo: 'fillOpacity',
+                defaultState: FillOpacity,
+                eleType: 'slider',
+                props: {
+                  max: 100,
+                },
+              },
+              {
+                name: 'Point size',
+                component: SliderConfig,
+                mapTo: 'pointSize',
+                defaultState: MarkerSize,
+                eleType: 'slider',
+                props: {
+                  max: 40,
+                },
+              },
+              {
+                title: 'Label size',
+                name: 'Label size',
+                component: InputFieldItem,
+                mapTo: 'labelSize',
+                eleType: 'input',
+              },
+              {
+                name: 'Rotate labels',
+                component: SliderConfig,
+                mapTo: 'rotateLabels',
+                eleType: 'slider',
+                defaultState: LabelAngle,
+                props: {
+                  ticks: [
+                    { label: '-90°', value: -90 },
+                    { label: '-45°', value: -45 },
+                    { label: '0°', value: 0 },
+                    { label: '45°', value: 45 },
+                    { label: '90°', value: 90 },
+                  ],
+                  showTicks: true,
+                  min: -90,
+                  max: 90,
+                },
+              },
+            ],
+          },
+          {
+            id: 'thresholds',
+            name: 'Thresholds',
+            editor: ConfigThresholds,
+            mapTo: 'thresholds',
+            defaultState: [],
+            schemas: [],
+          },
+        ],
+      },
+      {
+        id: 'availability-panel',
+        name: 'Availability',
+        mapTo: 'availabilityConfig',
+        editor: ConfigAvailability,
+      },
+    ],
+  },
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+      colorway: PLOTLY_COLOR,
+      plot_bgcolor: 'rgba(0, 0, 0, 0)',
+      paper_bgcolor: 'rgba(0, 0, 0, 0)',
+      xaxis: {
+        fixedrange: true,
+        showgrid: false,
+        visible: true,
+      },
+      yaxis: {
+        fixedrange: true,
+        showgrid: false,
+        visible: true,
+      },
+    },
+    config: {
+      ...sharedConfigs.config,
+      barmode: params.type,
+      xaxis: {
+        automargin: true,
+      },
+      yaxis: {
+        automargin: true,
+      },
+    },
+  },
+  component: Line,
+});
diff --git a/public/components/visualizations/charts/logs_view/logs_view.scss b/public/components/visualizations/charts/logs_view/logs_view.scss
new file mode 100644
index 0000000000..ae3ebebfba
--- /dev/null
+++ b/public/components/visualizations/charts/logs_view/logs_view.scss
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th,
+td {
+  text-align: left;
+}
+
+th {
+  width: 30%;
+}
+
+tr:hover {
+  background-color: #ddd;
+}
+
+.logs-view-container {
+  font-size: 16px;
+}
diff --git a/public/components/visualizations/charts/logs_view/logs_view.tsx b/public/components/visualizations/charts/logs_view/logs_view.tsx
new file mode 100644
index 0000000000..0e8e88f4c7
--- /dev/null
+++ b/public/components/visualizations/charts/logs_view/logs_view.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import { IExplorerFields } from '../../../../../common/types/explorer';
+import { RAW_QUERY, SELECTED_TIMESTAMP } from '../../../../../common/constants/explorer';
+import { DataGrid } from '../../../../components/event_analytics/explorer/events_views/data_grid';
+import './logs_view.scss';
+
+export const LogsView = ({ visualizations }: any) => {
+  const explorer = visualizations?.data?.explorer;
+
+  const http = explorer?.http;
+  const pplService = explorer?.pplService;
+  const explorerData = explorer?.explorerData;
+  const explorerFields = explorer?.explorerFields;
+  const query = explorer?.query;
+
+  const emptyExplorerFields: IExplorerFields = {
+    availableFields: [],
+    queriedFields: explorerFields,
+    selectedFields: [],
+    unselectedFields: [],
+  };
+
+  return (
+    <div className="logs-view-container">
+      <DataGrid
+        http={http}
+        pplService={pplService}
+        rows={explorerData?.jsonData !== undefined ? explorerData.jsonData : []}
+        rowsAll={explorerData?.jsonDataAll !== undefined ? explorerData.jsonDataAll : []}
+        explorerFields={query !== undefined ? explorerFields : emptyExplorerFields}
+        timeStampField={query?.[SELECTED_TIMESTAMP] !== undefined ? query[SELECTED_TIMESTAMP] : ''}
+        rawQuery={query?.[RAW_QUERY] !== undefined ? query[RAW_QUERY] : ''}
+      />
+    </div>
+  );
+};
diff --git a/public/components/visualizations/charts/logs_view/logs_view_type.ts b/public/components/visualizations/charts/logs_view/logs_view_type.ts
new file mode 100644
index 0000000000..a4ecad4b80
--- /dev/null
+++ b/public/components/visualizations/charts/logs_view/logs_view_type.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { LogsView } from './logs_view';
+import { getPlotlyCategory, getPlotlySharedConfigs } from '../shared/shared_configs';
+import { LensIconChartDatatable } from '../../assets/chart_datatable';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { PLOTLY_COLOR } from '../../../../../common/constants/shared';
+
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+
+export const createLogsViewTypeDefinition = (params: any = {}) => ({
+  name: 'logs_view',
+  type: 'logs_view',
+  id: 'logs_view',
+  label: 'Logs view',
+  fulllabel: 'Logs view',
+  icontype: 'visTable',
+  category: VIS_CATEGORY.BASICS,
+  selection: {
+    dataLoss: 'nothing',
+  },
+  icon: LensIconChartDatatable,
+  categoryaxis: 'xaxis',
+  seriesaxis: 'yaxis',
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Style',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [],
+      },
+    ],
+  },
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+      colorway: PLOTLY_COLOR,
+      plot_bgcolor: 'rgba(0, 0, 0, 0)',
+      paper_bgcolor: 'rgba(0, 0, 0, 0)',
+      xaxis: {
+        fixedrange: true,
+        showgrid: false,
+        visible: true,
+      },
+      yaxis: {
+        fixedrange: true,
+        showgrid: false,
+        visible: true,
+      },
+    },
+    config: {
+      ...sharedConfigs.config,
+      barmode: 'line',
+      xaxis: {
+        automargin: true,
+      },
+      yaxis: {
+        automargin: true,
+      },
+    },
+  },
+  component: LogsView,
+});
diff --git a/public/components/visualizations/charts/maps/heatmap.tsx b/public/components/visualizations/charts/maps/heatmap.tsx
new file mode 100644
index 0000000000..ad08ac26f1
--- /dev/null
+++ b/public/components/visualizations/charts/maps/heatmap.tsx
@@ -0,0 +1,169 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React, { useMemo } from 'react';
+import { colorPalette } from '@elastic/eui';
+import { forEach, has, isEmpty, isEqual, uniq } from 'lodash';
+import Plotly from 'plotly.js-dist';
+import {
+  HEATMAP_PALETTE_COLOR,
+  HEATMAP_SINGLE_COLOR,
+  OPACITY,
+  SINGLE_COLOR_PALETTE,
+} from '../../../../../common/constants/colors';
+import {
+  hexToRgb,
+  lightenColor,
+  getPropName,
+} from '../../../../components/event_analytics/utils/utils';
+import { IVisualizationContainerProps } from '../../../../../common/types/explorer';
+import { VisCanvassPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/vis_canvass_placeholder';
+import { Plt } from '../../plotly/plot';
+import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer';
+import { PLOT_MARGIN } from '../../../../../common/constants/shared';
+import { getCompleteTimespanKey } from '../../../visualizations/charts/shared/common';
+import { removeBacktick } from '../../../../../common/utils';
+
+export const HeatMap = ({ visualizations, layout, config }: any) => {
+  const {
+    data: {
+      rawVizData: {
+        data: queriedVizData,
+        metadata: { fields },
+      },
+      userConfigs: {
+        dataConfig: {
+          chartStyles = {},
+          span = {},
+          legend = {},
+          tooltipOptions = {},
+          panelOptions = {},
+          [GROUPBY]: dimensions = [],
+          [AGGREGATIONS]: series = [],
+        } = {},
+        layoutConfig = {},
+      } = {},
+    } = {},
+    vis: { icontype },
+  }: IVisualizationContainerProps = visualizations;
+
+  const backtickRemovedVisData = {};
+  forEach(queriedVizData, (value, key) => {
+    backtickRemovedVisData[removeBacktick(key)] = value;
+  });
+
+  const combinedDemensions = [
+    ...(!isEmpty(span) ? [getCompleteTimespanKey(span)] : []),
+    ...dimensions,
+  ];
+  if (!isEqual(combinedDemensions.length, 2) || !isEqual(series.length, 1))
+    return <VisCanvassPlaceholder message="Invalid data, heatmap can only have exact 2 dimensions and 1 series" icon={icontype} />;
+  const xaxisField = { ...combinedDemensions[0] };
+  const yaxisField = { ...combinedDemensions[1] };
+  const zMetrics = { ...series[0] };
+  if (
+    isEmpty(xaxisField) ||
+    isEmpty(yaxisField) ||
+    isEmpty(zMetrics) ||
+    isEmpty(backtickRemovedVisData[removeBacktick(xaxisField.label)]) ||
+    isEmpty(backtickRemovedVisData[removeBacktick(yaxisField.label)])
+  )
+    return <VisCanvassPlaceholder message="Invalid data" icon={icontype} />;
+
+  const uniqueYaxis = uniq(backtickRemovedVisData[removeBacktick(yaxisField.label)]);
+  const uniqueXaxis = uniq(backtickRemovedVisData[removeBacktick(xaxisField.label)]);
+  const uniqueYaxisLength = uniqueYaxis.length;
+  const uniqueXaxisLength = uniqueXaxis.length;
+  const tooltipMode =
+    tooltipOptions.tooltipMode !== undefined ? tooltipOptions.tooltipMode : 'show';
+  const tooltipText = tooltipOptions.tooltipText !== undefined ? tooltipOptions.tooltipText : 'all';
+
+  const colorField = chartStyles
+    ? chartStyles.colorMode && chartStyles.colorMode[0].name === OPACITY
+      ? chartStyles.color ?? HEATMAP_SINGLE_COLOR
+      : chartStyles.scheme ?? HEATMAP_PALETTE_COLOR
+    : HEATMAP_PALETTE_COLOR;
+  const showColorscale = legend.showLegend ?? 'show';
+
+  const traceColor: any = [];
+  if (colorField.name === SINGLE_COLOR_PALETTE) {
+    const colorsArray = colorPalette([lightenColor(colorField.color, 50), colorField.color], 10);
+    colorsArray.map((hexCode, index) => {
+      traceColor.push([
+        (index !== colorsArray.length - 1 ? index : 10) / 10,
+        hexToRgb(hexCode, 1, false),
+      ]);
+    });
+  }
+
+  const calculatedHeapMapZaxis: Plotly.Data[] = useMemo(() => {
+    const heapMapZaxis = [];
+    const buckets = {};
+
+    // maps bukcets to metrics
+    for (let i = 0; i < backtickRemovedVisData[removeBacktick(xaxisField.label)].length; i++) {
+      buckets[`${backtickRemovedVisData[removeBacktick(xaxisField.label)][i]},${backtickRemovedVisData[removeBacktick(yaxisField.label)][i]}`] =
+      backtickRemovedVisData[getPropName(zMetrics)][i];
+    }
+
+    // initialize empty 2 dimensional array, inner loop for each xaxis field, outer loop for yaxis
+    for (let i = 0; i < uniqueYaxisLength; i++) {
+      const innerBuckets = [];
+      for (let j = 0; j < uniqueXaxisLength; j++) {
+        innerBuckets.push(null);
+      }
+      heapMapZaxis.push(innerBuckets);
+    }
+
+    // fill in each bucket
+    for (let i = 0; i < uniqueYaxisLength; i++) {
+      for (let j = 0; j < uniqueXaxisLength; j++) {
+        if (has(buckets, `${uniqueXaxis[j]},${uniqueYaxis[i]}`)) {
+          heapMapZaxis[i][j] = buckets[`${uniqueXaxis[j]},${uniqueYaxis[i]}`];
+        }
+      }
+    }
+
+    return heapMapZaxis;
+  }, [
+    backtickRemovedVisData,
+    uniqueYaxis,
+    uniqueXaxis,
+    uniqueYaxisLength,
+    uniqueXaxisLength,
+    xaxisField,
+    yaxisField,
+    zMetrics,
+  ]);
+
+  const heapMapData = [
+    {
+      z: calculatedHeapMapZaxis,
+      x: uniqueXaxis,
+      y: uniqueYaxis,
+      hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText,
+      colorscale: colorField.name === SINGLE_COLOR_PALETTE ? traceColor : colorField.name,
+      type: 'heatmap',
+      showscale: showColorscale === 'show',
+    },
+  ];
+
+  layout.yaxis = { autosize: true, automargin: true };
+  const mergedLayout = {
+    ...layout,
+    ...(layoutConfig.layout && layoutConfig.layout),
+    title: panelOptions.title || layoutConfig.layout?.title || '',
+    margin: PLOT_MARGIN,
+  };
+
+  const mergedConfigs = useMemo(
+    () => ({
+      ...config,
+      ...(layoutConfig.config && layoutConfig.config),
+    }),
+    [config, layoutConfig.config]
+  );
+
+  return <Plt data={heapMapData} layout={mergedLayout} config={mergedConfigs} />;
+};
diff --git a/public/components/visualizations/charts/maps/heatmap_type.ts b/public/components/visualizations/charts/maps/heatmap_type.ts
new file mode 100644
index 0000000000..6501aa04ac
--- /dev/null
+++ b/public/components/visualizations/charts/maps/heatmap_type.ts
@@ -0,0 +1,132 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { HeatMap } from './heatmap';
+import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
+import { LensIconChartPie } from '../../assets/chart_pie';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import {
+  ConfigValueOptions,
+  HeatmapColorPalettePicker,
+  ConfigChartOptions,
+  PanelItem,
+  SingleColorPicker,
+  ConfigLegend,
+} from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+import {
+  COLOR_PALETTES,
+  HEATMAP_SINGLE_COLOR,
+  HEATMAP_PALETTE_COLOR,
+} from '../../../../../common/constants/colors';
+import { fetchConfigObject } from '../../../../components/event_analytics/utils/utils';
+
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+
+export const createMapsVisDefinition = () => ({
+  name: 'heatmap',
+  type: 'heatmap',
+  id: 'heatmap',
+  label: 'Heatmap',
+  fulllabel: 'Hubble',
+  icontype: 'heatmap',
+  category: VIS_CATEGORY.BASICS,
+  selection: {
+    dataLoss: 'nothing',
+  },
+  icon: LensIconChartPie,
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Style',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [
+          fetchConfigObject('Tooltip', {
+            options: [
+              { name: 'All', id: 'all' },
+              { name: 'Dim 1', id: 'x' },
+              { name: 'Dim 2', id: 'y' },
+              { name: 'Metrics', id: 'z' },
+            ],
+            defaultSelections: [{ name: 'All', id: 'all' }],
+          }),
+          {
+            id: 'legend',
+            name: 'Legend',
+            editor: ConfigLegend,
+            mapTo: 'legend',
+            schemas: [
+              {
+                name: 'Show colorscale',
+                mapTo: 'showLegend',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Show', id: 'show' },
+                    { name: 'Hidden', id: 'hidden' },
+                  ],
+                  defaultSelections: [{ name: 'Show', id: 'show' }],
+                },
+              },
+            ],
+          },
+          {
+            id: 'chart_styles',
+            name: 'Chart styles',
+            editor: ConfigChartOptions,
+            mapTo: 'chartStyles',
+            schemas: [
+              {
+                name: 'Color mode',
+                component: PanelItem,
+                mapTo: 'colorMode',
+                eleType: 'list',
+                isSingleSelection: true,
+                options: [
+                  { name: 'spectrum', label: 'spectrum', value: 'spectrum' },
+                  { name: 'opacity', label: 'opacity', value: 'opacity' },
+                ],
+                defaultState: [{ name: 'spectrum', label: 'spectrum', value: 'spectrum' }],
+                props: {
+                  isClearable: false,
+                },
+              },
+              {
+                name: 'Scheme',
+                component: HeatmapColorPalettePicker,
+                mapTo: 'scheme',
+                eleType: 'palettePicker',
+                options: COLOR_PALETTES.filter((color) => color.type !== 'text'),
+                defaultState: HEATMAP_PALETTE_COLOR,
+              },
+              {
+                name: 'Color',
+                component: SingleColorPicker,
+                mapTo: 'color',
+                eleType: 'singleColorPicker',
+                defaultState: HEATMAP_SINGLE_COLOR,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+      plot_bgcolor: 'rgba(0, 0, 0, 0)',
+      paper_bgcolor: 'rgba(0, 0, 0, 0)',
+      margin: { left: 60 },
+    },
+    config: {
+      ...sharedConfigs.config,
+    },
+  },
+  component: HeatMap,
+});
diff --git a/public/components/visualizations/charts/maps/treemap_type.ts b/public/components/visualizations/charts/maps/treemap_type.ts
new file mode 100644
index 0000000000..1a87a428b0
--- /dev/null
+++ b/public/components/visualizations/charts/maps/treemap_type.ts
@@ -0,0 +1,157 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { TreeMap } from './treemaps';
+import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
+import { LensIconChartBar } from '../../assets/chart_bar';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import {
+  ConfigValueOptions,
+  ColorPalettePicker,
+  ConfigChartOptions,
+  ConfigLegend,
+} from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+import { DEFAULT_PALETTE, COLOR_PALETTES } from '../../../../../common/constants/colors';
+import { ButtonGroupItem } from '../../../../../public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_button_group';
+import { DEFAULT_CHART_STYLES } from '../../../../../common/constants/shared';
+import { fetchConfigObject } from '../../../../components/event_analytics/utils/utils';
+
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+
+const { SortSectors } = DEFAULT_CHART_STYLES;
+
+export interface BarTypeParams {}
+
+export const createTreeMapDefinition = (params: BarTypeParams = {}) => ({
+  name: 'tree_map',
+  type: 'tree_map',
+  id: 'tree_map',
+  label: 'Tree map',
+  fulllabel: 'Tree map',
+  selection: {
+    dataLoss: 'nothing',
+  },
+  category: VIS_CATEGORY.BASICS,
+  icontype: 'heatmap',
+  icon: LensIconChartBar,
+  categoryaxis: 'xaxis',
+  seriesaxis: 'yaxis',
+  orientation: 'v',
+  component: TreeMap,
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Style',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [
+          fetchConfigObject('Tooltip', {
+            options: [
+              { name: 'All', id: 'all' },
+              { name: 'Label', id: 'label' },
+              { name: 'Value', id: 'value' },
+            ],
+            defaultSelections: [{ name: 'All', id: 'all' }],
+          }),
+          {
+            id: 'legend',
+            name: 'Legend',
+            editor: ConfigLegend,
+            mapTo: 'legend',
+            schemas: [
+              {
+                name: 'Show colorscale',
+                mapTo: 'showLegend',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Show', id: 'show' },
+                    { name: 'Hidden', id: 'hidden' },
+                  ],
+                  defaultSelections: [{ name: 'Show', id: 'show' }],
+                },
+              },
+            ],
+          },
+          {
+            id: 'treemap_options',
+            name: 'Treemap',
+            editor: ConfigValueOptions,
+            mapTo: 'treemapOptions',
+            schemas: [
+              {
+                name: 'Tiling algorithm',
+                isSingleSelection: true,
+                component: null,
+                mapTo: 'tilingAlgorithm',
+                options: [
+                  { name: 'Squarify', value: 'squarify' },
+                  { name: 'Binary', value: 'binary' },
+                  { name: 'Dice', value: 'dice' },
+                  { name: 'Slice', value: 'slice' },
+                  { name: 'Slice Dice', value: 'slice-dice' },
+                  { name: 'Dice Slice', value: 'dice-slice' },
+                ],
+                defaultState: [{ name: 'Squarify', label: 'Squarify', value: 'squarify' }],
+                props: {
+                  isClearable: false,
+                },
+              },
+              {
+                name: 'Sort Sectors',
+                component: ButtonGroupItem,
+                mapTo: 'sort_sectors',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Largest to Smallest', id: 'largest_to_smallest' },
+                    { name: 'Random', id: 'random' },
+                  ],
+                  defaultSelections: [{ name: 'Largest to Smallest', id: SortSectors }],
+                },
+              },
+            ],
+          },
+          {
+            id: 'chart_styles',
+            name: 'Chart styles',
+            editor: ConfigChartOptions,
+            mapTo: 'chartStyles',
+            schemas: [
+              {
+                name: 'Color theme',
+                isSingleSelection: true,
+                component: ColorPalettePicker,
+                mapTo: 'colorTheme',
+                eleType: 'treemapColorPicker',
+                options: COLOR_PALETTES,
+                defaultState: { name: DEFAULT_PALETTE },
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'style-panel',
+        name: 'Layout',
+        mapTo: 'layoutConfig',
+        editor: ConfigEditor,
+        content: [],
+      },
+    ],
+  },
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+    },
+    config: {
+      ...sharedConfigs.config,
+    },
+    isUniColor: false,
+  },
+});
diff --git a/public/components/visualizations/charts/maps/treemaps.tsx b/public/components/visualizations/charts/maps/treemaps.tsx
new file mode 100644
index 0000000000..e94bd5e508
--- /dev/null
+++ b/public/components/visualizations/charts/maps/treemaps.tsx
@@ -0,0 +1,208 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isEmpty, isEqual, uniq } from 'lodash';
+import React, { useMemo } from 'react';
+
+import {
+  DEFAULT_PALETTE,
+  MULTI_COLOR_PALETTE,
+  SINGLE_COLOR_PALETTE,
+} from '../../../../../common/constants/colors';
+import { AGGREGATIONS, GROUPBY } from '../../../../../common/constants/explorer';
+import { DEFAULT_CHART_STYLES, PLOT_MARGIN } from '../../../../../common/constants/shared';
+import { IVisualizationContainerProps } from '../../../../../common/types/explorer';
+import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
+import { Plt } from '../../plotly/plot';
+
+export const TreeMap = ({ visualizations, layout, config }: any) => {
+  const { DefaultSortSectors } = DEFAULT_CHART_STYLES;
+  const {
+    data: {
+      defaultAxes,
+      indexFields,
+      query,
+      rawVizData: {
+        data: queriedVizData,
+        metadata: { fields },
+      },
+      userConfigs: {
+        dataConfig: {
+          chartStyles = {},
+          legend = {},
+          tooltipOptions = {},
+          panelOptions = {},
+          treemapOptions = {},
+          [GROUPBY]: dimensions = [],
+          [AGGREGATIONS]: series = [],
+        },
+        layoutConfig = {},
+      },
+    },
+    vis: { icontype },
+  }: IVisualizationContainerProps = visualizations;
+
+  const childField =
+    dimensions && dimensions[0]?.childField ? dimensions[0]?.childField : fields[fields.length - 1];
+  const parentFields = dimensions && dimensions[0]?.parentFields ? dimensions[0]?.parentFields : [];
+  const tooltipMode =
+    tooltipOptions.tooltipMode !== undefined ? tooltipOptions.tooltipMode : 'show';
+  const tooltipText = tooltipOptions.tooltipText !== undefined ? tooltipOptions.tooltipText : 'all';
+  const valueField = series && series[0]?.valueField ? series[0]?.valueField : fields[0];
+  const colorField =
+    chartStyles && chartStyles.colorTheme ? chartStyles.colorTheme : { name: DEFAULT_PALETTE };
+
+  const tilingAlgorithm =
+    treemapOptions && treemapOptions.tilingAlgorithm && !isEmpty(treemapOptions.tilingAlgorithm)
+      ? treemapOptions.tilingAlgorithm[0]
+      : 'squarify';
+
+  const sortSectorsField = treemapOptions.sort_sectors || DefaultSortSectors;
+  const showColorscale = legend.showLegend ?? 'show';
+
+  const areParentFieldsInvalid =
+    new Set([...parentFields.map((field) => field.name)]).size !== parentFields.length ||
+    parentFields.some(
+      (field) => isEmpty(queriedVizData[field.name]) || isEqual(childField.name, field.name)
+    );
+
+  if (
+    isEmpty(queriedVizData[childField.name]) ||
+    isEmpty(queriedVizData[valueField.name]) ||
+    areParentFieldsInvalid
+  )
+    return <EmptyPlaceholder icon={icontype} />;
+
+  const [treemapData, mergedLayout] = useMemo(() => {
+    let labelsArray: string[] = [];
+    let parentsArray: string[] = [];
+    let valuesArray: number[] = [];
+    let colorsArray: string[] = [];
+
+    if (parentFields.length === 0) {
+      labelsArray = [...queriedVizData[childField.name]];
+      parentsArray = [...Array(labelsArray.length).fill('')];
+      valuesArray = [...queriedVizData[valueField.name]];
+      if (colorField.name === MULTI_COLOR_PALETTE) {
+        colorsArray = [
+          ...Array(queriedVizData[childField.name].length).fill(colorField.childColor),
+        ];
+      }
+    } else {
+      let currentLevel = parentFields.length - 1;
+      let lastParentField = {};
+      parentFields
+        .slice(0)
+        .reverse()
+        .map((field, i) => {
+          const uniqueParents = uniq(queriedVizData[field.name]) as string[];
+          labelsArray = [...labelsArray, ...uniqueParents];
+          if (i === 0) {
+            parentsArray = [...Array(uniqueParents.length).fill('')];
+            valuesArray = [...Array(uniqueParents.length).fill(0)];
+            colorsArray =
+              colorField.name === MULTI_COLOR_PALETTE
+                ? [
+                    ...Array(uniqueParents.length).fill(
+                      colorField.parentColors[currentLevel] ?? '#000000'
+                    ),
+                  ]
+                : [];
+          } else {
+            const currentParentIndices = uniqueParents.map((parent) =>
+              queriedVizData[field.name].findIndex((index) => index === parent)
+            );
+            const lastParents = currentParentIndices.map(
+              (index) => queriedVizData[lastParentField.name][index]
+            );
+            parentsArray = [...parentsArray, ...lastParents];
+            valuesArray = [...valuesArray, ...Array(lastParents.length).fill(0)];
+            colorsArray =
+              colorField.name === MULTI_COLOR_PALETTE
+                ? [
+                    ...colorsArray,
+                    ...Array(lastParents.length).fill(
+                      colorField.parentColors[currentLevel] ?? '#000000'
+                    ),
+                  ]
+                : [];
+          }
+          currentLevel = currentLevel - 1;
+          lastParentField = field;
+        });
+
+      labelsArray = [...labelsArray, ...queriedVizData[childField.name]];
+      valuesArray = [...valuesArray, ...queriedVizData[valueField.name]];
+      parentsArray = [...parentsArray, ...queriedVizData[lastParentField.name]];
+      colorsArray =
+        colorField.name === MULTI_COLOR_PALETTE
+          ? [
+              ...colorsArray,
+              ...Array(queriedVizData[childField.name].length).fill(colorField.childColor),
+            ]
+          : [];
+    }
+
+    if (colorField.name === SINGLE_COLOR_PALETTE) {
+      colorsArray = [...Array(valuesArray.length).fill(colorField.childColor)];
+    }
+
+    const markerColors =
+      colorField.name === MULTI_COLOR_PALETTE
+        ? { colors: colorsArray }
+        : ![DEFAULT_PALETTE, SINGLE_COLOR_PALETTE].includes(colorField.name)
+        ? {
+            colorscale: colorField.name,
+            colorbar: {
+              len: 1,
+            },
+            showscale: showColorscale === 'show',
+          }
+        : {};
+
+    const colorway = colorField.name === SINGLE_COLOR_PALETTE ? colorsArray : {};
+
+    const mapLayout = {
+      ...layout,
+      ...(layoutConfig.layout && layoutConfig.layout),
+      title: panelOptions.title || layoutConfig.layout?.title || '',
+      treemapcolorway: colorway,
+      margin: PLOT_MARGIN,
+    };
+
+    const mapData = [
+      {
+        type: 'treemap',
+        labels: labelsArray,
+        parents: parentsArray,
+        values: valuesArray,
+        hoverinfo: tooltipMode === 'hidden' ? 'none' : tooltipText,
+        textinfo: 'label+value+percent parent+percent entry',
+        tiling: {
+          packing: tilingAlgorithm.value,
+        },
+        marker: markerColors,
+        sort: sortSectorsField === DefaultSortSectors,
+      },
+    ];
+
+    return [mapData, mapLayout];
+  }, [
+    queriedVizData,
+    childField,
+    valueField,
+    parentFields,
+    colorField,
+    tilingAlgorithm,
+    layoutConfig,
+  ]);
+
+  const mergedConfigs = {
+    ...config,
+    ...(layoutConfig.config && layoutConfig.config),
+  };
+
+  return <Plt data={treemapData} layout={mergedLayout} config={mergedConfigs} />;
+};
diff --git a/public/components/visualizations/charts/metrics/metrics.tsx b/public/components/visualizations/charts/metrics/metrics.tsx
new file mode 100644
index 0000000000..652769b9c8
--- /dev/null
+++ b/public/components/visualizations/charts/metrics/metrics.tsx
@@ -0,0 +1,713 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { find, isEmpty, uniqBy } from 'lodash';
+import Plotly from 'plotly.js-dist';
+import React, { useMemo } from 'react';
+import { COLOR_BLACK, COLOR_WHITE } from '../../../../../common/constants/colors';
+import {
+  METRICS_GRID_SPACE_BETWEEN_X_AXIS,
+  METRICS_GRID_SPACE_BETWEEN_Y_AXIS,
+  DEFAULT_METRICS_CHART_PARAMETERS,
+  METRICS_AXIS_MARGIN,
+  METRICS_ANNOTATION,
+  METRICS_REDUCE_VALUE_SIZE_PERCENTAGE,
+  METRICS_REDUCE_TITLE_SIZE_PERCENTAGE,
+  METRICS_REDUCE_SERIES_UNIT_SIZE_PERCENTAGE,
+  METRICS_SERIES_UNIT_SUBSTRING_LENGTH,
+  GROUPBY,
+  AGGREGATIONS,
+} from '../../../../../common/constants/explorer';
+import {
+  DEFAULT_CHART_STYLES,
+  FILLOPACITY_DIV_FACTOR,
+} from '../../../../../common/constants/shared';
+import {
+  ConfigListEntry,
+  IVisualizationContainerProps,
+} from '../../../../../common/types/explorer';
+import { uiSettingsService } from '../../../../../common/utils';
+import { ThresholdUnitType } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds';
+import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
+import {
+  getPropName,
+  getRoundOf,
+  getTooltipHoverInfo,
+  hexToRgb,
+} from '../../../event_analytics/utils/utils';
+import { Plt } from '../../plotly/plot';
+
+const {
+  DefaultOrientation,
+  DefaultTextMode,
+  DefaultChartType,
+  BaseThreshold,
+  DefaultTextColor,
+} = DEFAULT_METRICS_CHART_PARAMETERS;
+
+interface CreateAnnotationType {
+  index: number;
+  label: string;
+  value: number | string;
+  valueColor: string;
+}
+
+export const Metrics = ({ visualizations, layout, config }: any) => {
+  const {
+    data: {
+      rawVizData: {
+        data: queriedVizData,
+        metadata: { fields },
+      },
+      userConfigs: {
+        dataConfig: {
+          span = {},
+          [GROUPBY]: xaxis = [],
+          [AGGREGATIONS]: series = [],
+          chartStyles = {},
+          panelOptions = {},
+          tooltipOptions = {},
+          thresholds = [],
+        },
+        layoutConfig = {},
+      },
+    },
+
+    vis: { charttype, titlesize, valuesize, textmode, orientation, precisionvalue },
+  }: IVisualizationContainerProps = visualizations;
+
+  // data config parametrs
+  const timestampField = find(fields, (field) => field.type === 'timestamp');
+
+  /**
+   * determine x axis
+   */
+  let xaxes: ConfigListEntry[];
+  if (span && span.time_field && timestampField) {
+    xaxes = [timestampField, ...xaxis];
+  } else {
+    xaxes = xaxis;
+  }
+
+  const seriesLength = series.length;
+  const chartType = chartStyles.chartType || charttype;
+
+  if (
+    isEmpty(queriedVizData) ||
+    (chartType === DefaultChartType && xaxes.length === 0) ||
+    seriesLength === 0
+  )
+    return <EmptyPlaceholder icon={visualizations?.vis?.icontype} />;
+
+  // thresholds
+  const appliedThresholds = thresholds.length ? thresholds : [BaseThreshold];
+  const sortedThresholds = uniqBy(
+    [...appliedThresholds].sort((a: ThresholdUnitType, b: ThresholdUnitType) => a.value - b.value),
+    'value'
+  );
+
+  // style panel parameters
+  let titleSize =
+    chartStyles.titleSize ||
+    titlesize - titlesize * seriesLength * METRICS_REDUCE_TITLE_SIZE_PERCENTAGE;
+  const valueSize =
+    chartStyles.valueSize ||
+    valuesize - valuesize * seriesLength * METRICS_REDUCE_VALUE_SIZE_PERCENTAGE;
+  const selectedOrientation = chartStyles.orientation || orientation;
+  const chartOrientation =
+    selectedOrientation === DefaultOrientation || selectedOrientation === 'v'
+      ? DefaultOrientation
+      : 'h';
+  const selectedTextMode = chartStyles.textMode || textmode;
+  let textMode =
+    selectedTextMode === DefaultTextMode || selectedTextMode === 'values+names'
+      ? DefaultTextMode
+      : selectedTextMode;
+  const precisionValue = chartStyles.precisionValue || precisionvalue;
+  const seriesUnits =
+    chartStyles.seriesUnits?.substring(0, METRICS_SERIES_UNIT_SUBSTRING_LENGTH) || '';
+  const seriesUnitsSize = valueSize - valueSize * METRICS_REDUCE_SERIES_UNIT_SIZE_PERCENTAGE;
+  const isDarkMode = uiSettingsService.get('theme:darkMode');
+  const textColor = chartStyles.textColor?.childColor || DefaultTextColor;
+
+  if (chartType === 'text' && chartStyles.textMode === undefined) {
+    textMode = 'names';
+    titleSize = titlesize;
+  }
+
+  // margin from left of grid cell for label/value
+  const ANNOTATION_MARGIN_LEFT = seriesLength > 1 ? 0.01 : 0;
+  let autoChartLayout: object = {
+    annotations: [],
+  };
+
+  const xaxesData = xaxes.reduce((prev, cur) => {
+    if (queriedVizData[cur.name]) {
+      if (prev.length === 0) return queriedVizData[cur.name].flat();
+      return prev.map(
+        (item: string | number, index: number) => `${item},<br>${queriedVizData[cur.name][index]}`
+      );
+    }
+  }, []);
+
+  const createValueText = (value: string | number) =>
+    `<b>${value}${
+      seriesUnits ? `<span style="font-size: ${seriesUnitsSize}px"}> ${seriesUnits}</span>` : ''
+    }</b>`;
+
+  const calculateTextCooridinate = (seriesCount: number, index: number) => {
+    // calculating center of each subplot based on orienation vertical(single column) or horizontal(single row)
+    // splitting whole plot area with series length and find center of each individual subplot w.r.t index of series
+    if (seriesCount === 1) {
+      return 0.5;
+    } else if (index === 0) {
+      return 1 / seriesCount / 2;
+    }
+    return (index + 1) / seriesCount - 1 / seriesCount / 2;
+  };
+
+  const createAnnotationsAutoModeHorizontal = ({
+    label,
+    value,
+    index,
+    valueColor,
+  }: CreateAnnotationType) => {
+    const yCordinate = index > 0 ? (index + 1) / seriesLength : 1 / seriesLength;
+    return textMode === DefaultTextMode
+      ? [
+          {
+            ...METRICS_ANNOTATION,
+            x: ANNOTATION_MARGIN_LEFT,
+            y: yCordinate,
+            xanchor: 'left',
+            yanchor: 'top',
+            text: label,
+            font: {
+              size: titleSize,
+              color: isDarkMode ? COLOR_WHITE : COLOR_BLACK,
+              family: 'Roboto',
+            },
+            type: 'name',
+            seriesValue: value,
+          },
+          {
+            ...METRICS_ANNOTATION,
+            x: 1,
+            y: yCordinate,
+            xanchor: 'right',
+            yanchor: 'top',
+            text: createValueText(value),
+            font: {
+              size: valueSize,
+              color: valueColor,
+              family: 'Roboto',
+            },
+            type: 'value',
+            seriesValue: value,
+          },
+        ]
+      : [
+          {
+            ...METRICS_ANNOTATION,
+            x: 0.5,
+            y: calculateTextCooridinate(seriesLength, index),
+            xanchor: 'center',
+            yanchor: 'bottom',
+            text: textMode === 'values' ? createValueText(value) : label,
+            font: {
+              size: textMode === 'values' ? valueSize : titleSize,
+              color: textMode === 'names' ? (isDarkMode ? COLOR_WHITE : COLOR_BLACK) : valueColor,
+              family: 'Roboto',
+            },
+            type: textMode === 'names' ? 'name' : 'value',
+            seriesValue: value,
+          },
+        ];
+  };
+
+  const createAnnotationAutoModeVertical = ({
+    label,
+    value,
+    index,
+    valueColor,
+  }: CreateAnnotationType) => {
+    const xCoordinate = index / seriesLength + ANNOTATION_MARGIN_LEFT;
+    return textMode === DefaultTextMode
+      ? [
+          {
+            ...METRICS_ANNOTATION,
+            xanchor: 'left',
+            yanchor: 'bottom',
+            text: label,
+            font: {
+              size: titleSize,
+              color: isDarkMode ? COLOR_WHITE : COLOR_BLACK,
+              family: 'Roboto',
+            },
+            x: xCoordinate,
+            y: 1,
+            seriesValue: value,
+            type: 'name',
+          },
+          {
+            ...METRICS_ANNOTATION,
+            xanchor: 'left',
+            yanchor: 'top',
+            text: createValueText(value),
+            font: {
+              size: valueSize,
+              color: valueColor,
+              family: 'Roboto',
+            },
+            x: xCoordinate,
+            y: 1,
+            type: 'value',
+            seriesValue: value,
+          },
+        ]
+      : [
+          {
+            ...METRICS_ANNOTATION,
+            x: calculateTextCooridinate(seriesLength, index),
+            xanchor: 'center',
+            y: 0.95,
+            yanchor: 'bottom',
+            text: textMode === 'values' ? createValueText(value) : label,
+            font: {
+              size: textMode === 'values' ? valueSize : titleSize,
+              color: textMode === 'names' ? (isDarkMode ? COLOR_WHITE : COLOR_BLACK) : valueColor,
+              family: 'Roboto',
+            },
+            type: textMode === 'names' ? 'name' : 'value',
+            seriesValue: value,
+          },
+        ];
+  };
+
+  // extend y axis range to increase height of subplot w.r.t series data
+  const extendYaxisRange = (seriesLabel: string) => {
+    const sortedData = queriedVizData[seriesLabel]
+      .slice()
+      .sort((curr: number, next: number) => next - curr);
+    return isNaN(sortedData[0]) ? 100 : sortedData[0] + sortedData[0] / 2;
+  };
+
+  const getSeriesValue = (label: string) =>
+    typeof queriedVizData[label][queriedVizData[label].length - 1] === 'number'
+      ? getRoundOf(
+          queriedVizData[label][queriedVizData[label].length - 1],
+          Math.abs(precisionValue)
+        )
+      : 0;
+
+  const generateLineTraces = () => {
+    return series.map((seriesItem: ConfigListEntry, seriesIndex: number) => {
+      const seriesLabel = getPropName(seriesItem);
+      const isLabelExisted = queriedVizData[seriesLabel] ? true : false;
+      const annotationOption = {
+        label: seriesLabel,
+        value: isLabelExisted ? getSeriesValue(seriesLabel) : 0,
+        index: seriesIndex,
+        valueColor: '',
+      };
+      const layoutAxisIndex = seriesIndex > 0 ? seriesIndex + 1 : '';
+      autoChartLayout = {
+        ...autoChartLayout,
+        annotations: autoChartLayout.annotations.concat(
+          chartOrientation === DefaultOrientation || seriesLength === 1
+            ? createAnnotationAutoModeVertical(annotationOption)
+            : createAnnotationsAutoModeHorizontal(annotationOption)
+        ),
+        [`xaxis${layoutAxisIndex}`]: {
+          visible: false,
+          showgrid: false,
+          anchor: `y${layoutAxisIndex}`,
+          layoutFor: seriesLabel,
+        },
+        [`yaxis${layoutAxisIndex}`]: {
+          visible: false,
+          showgrid: false,
+          anchor: `x${layoutAxisIndex}`,
+          range: isLabelExisted ? [0, extendYaxisRange(seriesLabel)] : [0, 100],
+          layoutFor: seriesLabel,
+        },
+      };
+
+      return {
+        x: xaxesData,
+        y: queriedVizData[seriesLabel],
+        seriesValue: isLabelExisted ? getSeriesValue(seriesLabel) : 0,
+        fill: 'tozeroy',
+        mode: 'lines',
+        type: 'scatter',
+        fillcolor: '',
+        line: {
+          color: '',
+        },
+        name: seriesLabel,
+        ...(seriesIndex > 0 && {
+          xaxis: `x${seriesIndex + 1}`,
+          yaxis: `y${seriesIndex + 1}`,
+        }),
+        hoverinfo: getTooltipHoverInfo({
+          tooltipMode: tooltipOptions.tooltipMode,
+          tooltipText: tooltipOptions.tooltipText,
+        }),
+      };
+    });
+  };
+
+  const createAnnotationTextModeVertical = ({
+    label,
+    value,
+    index,
+    valueColor,
+  }: CreateAnnotationType) => {
+    return textMode === DefaultTextMode
+      ? [
+          {
+            ...METRICS_ANNOTATION,
+            xanchor: 'left',
+            yanchor: seriesLength === 1 ? 'center' : 'bottom',
+            text: label,
+            font: {
+              size: titleSize,
+              color: textColor,
+              family: 'Roboto',
+            },
+            x:
+              seriesLength === 1
+                ? 0 + ANNOTATION_MARGIN_LEFT
+                : index / seriesLength + ANNOTATION_MARGIN_LEFT,
+            y: 0.5,
+            seriesValue: value,
+            type: 'name',
+          },
+          {
+            ...METRICS_ANNOTATION,
+            xanchor: seriesLength === 1 ? 'right' : 'left',
+            yanchor: seriesLength === 1 ? 'center' : 'top',
+            text: createValueText(value),
+            font: {
+              size: valueSize,
+              color: textColor,
+              family: 'Roboto',
+            },
+            x:
+              seriesLength === 1
+                ? 1 - ANNOTATION_MARGIN_LEFT
+                : index / seriesLength + ANNOTATION_MARGIN_LEFT,
+            y: 0.5,
+            type: 'value',
+            seriesValue: value,
+          },
+        ]
+      : [
+          {
+            ...METRICS_ANNOTATION,
+            x: calculateTextCooridinate(seriesLength, index),
+            xanchor: 'center',
+            y: 0.5,
+            yanchor: 'center',
+            text: textMode === 'values' ? createValueText(value) : label,
+            font: {
+              size: textMode === 'values' ? valueSize : titleSize,
+              color: textColor,
+              family: 'Roboto',
+            },
+            type: textMode === 'names' ? 'name' : 'value',
+            seriesValue: value,
+          },
+        ];
+  };
+
+  const createAnnotationTextModeHorizontal = ({
+    label,
+    value,
+    index,
+    valueColor,
+  }: CreateAnnotationType) => {
+    return textMode === DefaultTextMode
+      ? [
+          {
+            ...METRICS_ANNOTATION,
+            xanchor: 'left',
+            yanchor: 'center',
+            text: label,
+            font: {
+              size: titleSize,
+              color: COLOR_WHITE,
+              family: 'Roboto',
+            },
+            x: 0 + ANNOTATION_MARGIN_LEFT,
+            y: calculateTextCooridinate(seriesLength, index),
+            seriesValue: value,
+            type: 'name',
+          },
+          {
+            ...METRICS_ANNOTATION,
+            xanchor: 'right',
+            yanchor: 'center',
+            text: createValueText(value),
+            font: {
+              size: valueSize,
+              color: COLOR_WHITE,
+              family: 'Roboto',
+            },
+            x: 1 - ANNOTATION_MARGIN_LEFT,
+            y: calculateTextCooridinate(seriesLength, index),
+            type: 'value',
+            seriesValue: value,
+          },
+        ]
+      : [
+          {
+            ...METRICS_ANNOTATION,
+            xanchor: 'center',
+            yanchor: 'center',
+            x: 0.5,
+            y: calculateTextCooridinate(seriesLength, index),
+            text: textMode === 'values' ? createValueText(value) : label,
+            font: {
+              size: textMode === 'values' ? valueSize : titleSize,
+              color: COLOR_WHITE,
+              family: 'Roboto',
+            },
+            type: textMode === 'names' ? 'name' : 'value',
+            seriesValue: value,
+          },
+        ];
+  };
+
+  const generateRectShapes = () => {
+    const shape = {
+      type: 'rect',
+      xsizemode: 'scaled',
+      layer: 'below',
+      yref: 'paper',
+      xref: 'paper',
+      line: {
+        color: '',
+        width: 3,
+      },
+      fillcolor: '',
+    };
+    const shapes: any = [];
+    series.forEach((seriesItem: ConfigListEntry, seriesIndex: number) => {
+      const seriesLabel = getPropName(seriesItem);
+      const isLabelExisted = queriedVizData[seriesLabel] ? true : false;
+      const seriesValue = isLabelExisted ? getSeriesValue(seriesLabel) : 0;
+      const axisIndex = seriesIndex > 0 ? seriesIndex + 1 : '';
+      const annotation = {
+        label: seriesLabel,
+        value: seriesValue,
+        index: seriesIndex,
+        valueColor: '',
+      };
+      autoChartLayout = {
+        ...autoChartLayout,
+        annotations: autoChartLayout.annotations.concat(
+          orientation === DefaultOrientation || seriesLength === 1
+            ? createAnnotationTextModeVertical({
+                ...annotation,
+              })
+            : createAnnotationTextModeHorizontal({
+                ...annotation,
+              })
+        ),
+        [`yaxis${axisIndex}`]: {
+          visible: false,
+          showgrid: false,
+          anchor: `x${axisIndex}`,
+        },
+        [`xaxis${axisIndex}`]: {
+          visible: false,
+          showgrid: false,
+          anchor: `y${axisIndex}`,
+        },
+      };
+
+      const nonSimilarAxis = orientation === DefaultOrientation ? 'x' : 'y';
+      const similarAxis = orientation === DefaultOrientation ? 'y' : 'x';
+      // for first metric
+      if (seriesIndex === 0) {
+        shapes.push({
+          ...shape,
+          [`${nonSimilarAxis}0`]: 0,
+          [`${nonSimilarAxis}1`]: 1 / seriesLength,
+          [`${similarAxis}0`]: 0,
+          [`${similarAxis}1`]: 1,
+          seriesValue,
+        });
+      } else {
+        shapes.push({
+          ...shape,
+          [`${nonSimilarAxis}0`]:
+            shapes[shapes.length - 1][`${nonSimilarAxis}1`] + METRICS_GRID_SPACE_BETWEEN_X_AXIS,
+          [`${nonSimilarAxis}1`]:
+            shapes[shapes.length - 1][`${nonSimilarAxis}1`] + 1 / seriesLength,
+          [`${similarAxis}0`]: 0,
+          [`${similarAxis}1`]: 1,
+          seriesValue,
+        });
+      }
+    });
+    return shapes;
+  };
+
+  const [statsData, statsLayout]: Plotly.Data[] = useMemo(() => {
+    let calculatedStatsData: Plotly.Data[] = [];
+    let sortedStatsData: Plotly.Data[] = [];
+    let sortedShapesData = [];
+    if (chartType === DefaultChartType) {
+      calculatedStatsData = generateLineTraces();
+      sortedStatsData = calculatedStatsData
+        .map((stat, statIndex) => ({ ...stat, oldIndex: statIndex }))
+        .sort((statCurrent, statNext) => statCurrent.seriesValue - statNext.seriesValue);
+    } else {
+      const shapes = generateRectShapes();
+      autoChartLayout = {
+        ...autoChartLayout,
+        shapes,
+      };
+      sortedShapesData = shapes
+        .map((shape: object, shapeIndex: number) => ({ ...shape, oldIndex: shapeIndex }))
+        .sort((current: object, next: object) => current.seriesValue - next.seriesValue);
+    }
+
+    if (sortedThresholds.length) {
+      // threshold ranges with min, max values
+      let thresholdRanges: number[][] = [];
+      const maxValue =
+        chartType === DefaultChartType
+          ? sortedStatsData[sortedStatsData.length - 1].seriesValue
+          : sortedShapesData[sortedShapesData.length - 1].seriesValue;
+      thresholdRanges = sortedThresholds.map((thresh, index) => [
+        thresh.value,
+        index === sortedThresholds.length - 1 ? maxValue : sortedThresholds[index + 1].value,
+      ]);
+
+      if (chartType === DefaultChartType) {
+        if (thresholdRanges.length) {
+          // change color for line traces
+          for (let statIndex = 0; statIndex < sortedStatsData.length; statIndex++) {
+            for (let threshIndex = 0; threshIndex < thresholdRanges.length; threshIndex++) {
+              if (
+                Number(sortedStatsData[statIndex].seriesValue) >=
+                  Number(thresholdRanges[threshIndex][0]) &&
+                Number(sortedStatsData[statIndex].seriesValue) <=
+                  Number(thresholdRanges[threshIndex][1])
+              ) {
+                calculatedStatsData[sortedStatsData[statIndex].oldIndex].fillcolor = hexToRgb(
+                  sortedThresholds[threshIndex].color,
+                  DEFAULT_CHART_STYLES.FillOpacity / FILLOPACITY_DIV_FACTOR
+                );
+                calculatedStatsData[sortedStatsData[statIndex].oldIndex].line.color =
+                  sortedThresholds[threshIndex].color;
+              }
+            }
+          }
+
+          // change color of text annotations
+          for (
+            let annotationIndex = 0;
+            annotationIndex < autoChartLayout.annotations.length;
+            annotationIndex++
+          ) {
+            const isSeriesValueText = autoChartLayout.annotations[annotationIndex].type === 'value';
+            const seriesValue = Number(autoChartLayout.annotations[annotationIndex].seriesValue);
+            for (let threshIndex = 0; threshIndex < thresholdRanges.length; threshIndex++) {
+              if (
+                isSeriesValueText &&
+                seriesValue >= Number(thresholdRanges[threshIndex][0]) &&
+                seriesValue <= Number(thresholdRanges[threshIndex][1])
+              ) {
+                autoChartLayout.annotations[annotationIndex].font.color =
+                  sortedThresholds[threshIndex].color;
+              }
+            }
+          }
+        }
+      } else {
+        // change color of shapes
+        for (let shapeIndex = 0; shapeIndex < sortedShapesData.length; shapeIndex++) {
+          for (let threshIndex = 0; threshIndex < thresholdRanges.length; threshIndex++) {
+            const seriesValue = Number(sortedShapesData[shapeIndex].seriesValue);
+            if (
+              seriesValue >= Number(thresholdRanges[threshIndex][0]) &&
+              seriesValue <= Number(thresholdRanges[threshIndex][1])
+            ) {
+              const color = sortedThresholds[threshIndex].color;
+              autoChartLayout.shapes[sortedShapesData[shapeIndex].oldIndex].fillcolor = color;
+              autoChartLayout.shapes[sortedShapesData[shapeIndex].oldIndex].line = {
+                ...autoChartLayout.shapes[sortedShapesData[shapeIndex].oldIndex].line,
+                color,
+              };
+            }
+          }
+        }
+      }
+    }
+    return [chartType === DefaultChartType ? calculatedStatsData : [], autoChartLayout];
+  }, [
+    xaxes,
+    series,
+    fields,
+    appliedThresholds,
+    chartOrientation,
+    titleSize,
+    valueSize,
+    textMode,
+    seriesUnits,
+    queriedVizData,
+    precisionValue,
+  ]);
+
+  const mergedLayout = useMemo(() => {
+    return {
+      ...layout,
+      ...(layoutConfig.layout && layoutConfig.layout),
+      showlegend: false,
+      margin:
+        chartType === DefaultChartType
+          ? METRICS_AXIS_MARGIN
+          : panelOptions.title || layoutConfig.layout?.title
+          ? METRICS_AXIS_MARGIN
+          : { ...METRICS_AXIS_MARGIN, t: 0 },
+      ...statsLayout,
+      grid: {
+        ...(chartOrientation === DefaultOrientation
+          ? {
+              rows: 1,
+              columns: seriesLength,
+              xgap: METRICS_GRID_SPACE_BETWEEN_X_AXIS,
+            }
+          : {
+              rows: seriesLength,
+              columns: 1,
+              ygap: METRICS_GRID_SPACE_BETWEEN_Y_AXIS,
+            }),
+        pattern: 'independent',
+        roworder: 'bottom to top',
+      },
+      title: panelOptions?.title || layoutConfig.layout?.title || '',
+    };
+  }, [
+    chartType,
+    layout,
+    layoutConfig.layout,
+    panelOptions?.title,
+    orientation,
+    seriesLength,
+    statsLayout,
+  ]);
+
+  const mergedConfigs = {
+    ...config,
+    ...(layoutConfig.config && layoutConfig.config),
+  };
+
+  return <Plt data={statsData} layout={mergedLayout} config={mergedConfigs} />;
+};
diff --git a/public/components/visualizations/charts/metrics/metrics_type.ts b/public/components/visualizations/charts/metrics/metrics_type.ts
new file mode 100644
index 0000000000..bc8f6b5461
--- /dev/null
+++ b/public/components/visualizations/charts/metrics/metrics_type.ts
@@ -0,0 +1,191 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Metrics } from './metrics';
+import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
+import { LensIconChartLine } from '../../assets/chart_line';
+import { PLOTLY_COLOR } from '../../../../../common/constants/shared';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import {
+  ConfigThresholds,
+  InputFieldItem,
+  ButtonGroupItem,
+  ConfigChartOptions,
+  TextInputFieldItem,
+} from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+import { fetchConfigObject } from '../../../event_analytics/utils/utils';
+import { ConfigAvailability } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability';
+import { DEFAULT_METRICS_CHART_PARAMETERS } from '../../../../../common/constants/explorer';
+
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+const {
+  DefaultTextMode,
+  DefaultOrientation,
+  DefaultChartType,
+  DefaultPrecision,
+  DefaultTitleSize,
+  DefaultValueSize,
+  BaseThreshold,
+} = DEFAULT_METRICS_CHART_PARAMETERS;
+
+export const createMetricsTypeDefinition = (params: any = {}) => ({
+  name: 'metrics',
+  type: 'metrics',
+  id: 'metrics',
+  label: 'Metrics',
+  fulllabel: 'Metrics',
+  icontype: 'stats',
+  category: VIS_CATEGORY.BASICS,
+  icon: LensIconChartLine,
+  categoryaxis: 'xaxis',
+  seriesaxis: 'yaxis',
+  charttype: DefaultChartType,
+  precisionvalue: DefaultPrecision,
+  titlesize: DefaultTitleSize,
+  valuesize: DefaultValueSize,
+  textmode: DefaultTextMode,
+  orientation: DefaultOrientation,
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Style',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [
+          fetchConfigObject('Tooltip', {
+            options: [
+              { name: 'All', id: 'all' },
+              { name: 'Dimension', id: 'x' },
+              { name: 'Series', id: 'y' },
+            ],
+            defaultSelections: [{ name: 'All', id: 'all' }],
+          }),
+          {
+            id: 'chart_styles',
+            name: 'Chart styles',
+            editor: ConfigChartOptions,
+            mapTo: 'chartStyles',
+            schemas: [
+              {
+                name: 'Chart type',
+                mapTo: 'chartType',
+                component: ButtonGroupItem,
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Auto', id: DefaultChartType },
+                    { name: 'Horizontal', id: 'horizontal' },
+                    { name: 'Text mode', id: 'text' },
+                  ],
+                  defaultSelections: [{ name: 'Auto', id: DefaultChartType }],
+                },
+              },
+              {
+                name: 'Orientation',
+                component: ButtonGroupItem,
+                mapTo: 'orientation',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Auto', id: DefaultOrientation },
+                    { name: 'Horizontal', id: 'h' },
+                    { name: 'Vertical', id: 'v' },
+                  ],
+                  defaultSelections: [{ name: 'Auto', id: DefaultOrientation }],
+                },
+              },
+              {
+                title: 'Series units',
+                name: 'Series units',
+                component: TextInputFieldItem,
+                mapTo: 'seriesUnits',
+                eleType: 'textInput',
+              },
+              {
+                title: 'Series precision',
+                name: 'Series precision',
+                component: InputFieldItem,
+                mapTo: 'precisionValue',
+                eleType: 'input',
+                props: {
+                  minLimit: 0,
+                },
+              },
+              {
+                title: 'Title size',
+                name: 'Title size',
+                component: InputFieldItem,
+                mapTo: 'titleSize',
+                eleType: 'input',
+              },
+              {
+                title: 'Value size',
+                name: 'Value size',
+                component: InputFieldItem,
+                mapTo: 'valueSize',
+                eleType: 'input',
+              },
+              {
+                name: 'Text mode',
+                component: ButtonGroupItem,
+                mapTo: 'textMode',
+                eleType: 'buttons',
+                props: {
+                  options: [
+                    { name: 'Auto', id: DefaultTextMode },
+                    { name: 'Names', id: 'names' },
+                    { name: 'Values', id: 'values' },
+                    { name: 'Values + Names', id: 'values+names' },
+                  ],
+                  defaultSelections: [{ name: 'Values + Names', id: DefaultTextMode }],
+                },
+              },
+            ],
+          },
+          {
+            id: 'thresholds',
+            name: 'Thresholds',
+            editor: ConfigThresholds,
+            mapTo: 'thresholds',
+            defaultState: [BaseThreshold],
+            schemas: [],
+          },
+        ],
+      },
+      {
+        id: 'style-panel',
+        name: 'Layout',
+        mapTo: 'layoutConfig',
+        editor: ConfigEditor,
+        content: [],
+      },
+    ],
+  },
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+      colorway: PLOTLY_COLOR,
+      plot_bgcolor: 'rgba(0, 0, 0, 0)',
+      paper_bgcolor: 'rgba(0, 0, 0, 0)',
+      xaxis: {
+        fixedrange: true,
+        showgrid: false,
+        visible: true,
+      },
+      yaxis: {
+        fixedrange: true,
+        showgrid: false,
+        visible: true,
+      },
+    },
+    config: {
+      ...sharedConfigs.config,
+    },
+  },
+  component: Metrics,
+});
diff --git a/public/components/visualizations/charts/pie/pie.tsx b/public/components/visualizations/charts/pie/pie.tsx
new file mode 100644
index 0000000000..e6443b158d
--- /dev/null
+++ b/public/components/visualizations/charts/pie/pie.tsx
@@ -0,0 +1,182 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { find, isEmpty, forEach } from 'lodash';
+import React, { useMemo } from 'react';
+import { DEFAULT_PALETTE, HEX_CONTRAST_COLOR } from '../../../../../common/constants/colors';
+import {
+  AGGREGATIONS,
+  GROUPBY,
+  PIE_XAXIS_GAP,
+  PIE_YAXIS_GAP,
+  PLOTLY_PIE_COLUMN_NUMBER,
+} from '../../../../../common/constants/explorer';
+import { PLOT_MARGIN } from '../../../../../common/constants/shared';
+import {
+  ConfigListEntry,
+  IVisualizationContainerProps,
+} from '../../../../../common/types/explorer';
+import { EmptyPlaceholder } from '../../../event_analytics/explorer/visualizations/shared_components/empty_placeholder';
+import { getPropName, getTooltipHoverInfo } from '../../../event_analytics/utils/utils';
+import { Plt } from '../../plotly/plot';
+import { removeBacktick } from '../../../../../common/utils';
+
+export const Pie = ({ visualizations, layout, config }: any) => {
+  const {
+    data: {
+      defaultAxes,
+      indexFields,
+      query,
+      rawVizData: {
+        data: queriedVizData,
+        metadata: { fields },
+      },
+      userConfigs: {
+        dataConfig: {
+          chartStyles = {},
+          span = {},
+          legend = {},
+          panelOptions = {},
+          tooltipOptions = {},
+          [GROUPBY]: dimensions = [],
+          [AGGREGATIONS]: series = [],
+        } = {},
+        layoutConfig = {},
+      } = {},
+    } = {},
+    vis: { mode, icontype, showlegend, legendSize, labelSize, legendposition },
+  }: IVisualizationContainerProps = visualizations;
+
+  const type = chartStyles.mode || mode;
+  const colorTheme = chartStyles.colorTheme ? chartStyles.colorTheme : { name: DEFAULT_PALETTE };
+  const showLegend = legend.showLegend === 'hidden' ? false : showlegend;
+  const chartLegendSize = legend.size || legendSize;
+  const chartLabelSize = chartStyles.labelSize || labelSize;
+  const title = panelOptions.title || layoutConfig.layout?.title || '';
+  const timestampField = find(fields, (field) => field.type === 'timestamp');
+
+  const backtickRemovedVisData = {};
+  forEach(queriedVizData, (value, key) => {
+    backtickRemovedVisData[removeBacktick(key)] = value;
+  });
+
+  /**
+   * determine x axis
+   */
+  let xaxes: ConfigListEntry[] = [];
+  if (span && span.time_field && timestampField) {
+    xaxes = [timestampField, ...dimensions];
+  } else {
+    xaxes = dimensions;
+  }
+
+  if (isEmpty(xaxes) || isEmpty(series)) {
+    return <EmptyPlaceholder icon={icontype} />;
+  }
+
+  const invertHex = (hex: string) =>
+    (Number(`0x1${hex}`) ^ HEX_CONTRAST_COLOR).toString(16).substr(1).toUpperCase();
+
+  const labelsOfXAxis = xaxes.reduce((prev, cur) => {
+    if (backtickRemovedVisData[removeBacktick(cur.name)]) {
+      if (prev.length === 0) return backtickRemovedVisData[removeBacktick(cur.name)].flat();
+      return prev.map(
+        (item: string | number, index: number) => `${item}, ${backtickRemovedVisData[removeBacktick(cur.name)][index]}`
+      );
+    }
+  }, []);
+
+  const hexColor = invertHex(colorTheme);
+
+  const pies = useMemo(
+    () =>
+      series.map((field: any, index: number) => {
+        const fieldName = getPropName(field);
+        const marker =
+          colorTheme.name !== DEFAULT_PALETTE
+            ? {
+                marker: {
+                  colors: [...Array(backtickRemovedVisData[removeBacktick(fieldName)].length).fill(colorTheme.childColor)],
+                  line: {
+                    color: hexColor,
+                    width: 1,
+                  },
+                },
+              }
+            : undefined;
+        return {
+          labels: labelsOfXAxis,
+          values: backtickRemovedVisData[removeBacktick(fieldName)],
+          type: 'pie',
+          name: getPropName(field),
+          hole: type === 'pie' ? 0 : 0.5,
+          text: fieldName,
+          textinfo: 'percent',
+          hoverinfo: getTooltipHoverInfo({
+            tooltipMode: tooltipOptions.tooltipMode,
+            tooltipText: tooltipOptions.tooltipText,
+          }),
+          automargin: true,
+          textposition: 'outside',
+          title: { text: fieldName },
+          domain: {
+            row: Math.floor(index / PLOTLY_PIE_COLUMN_NUMBER),
+            column: index % PLOTLY_PIE_COLUMN_NUMBER,
+          },
+          ...marker,
+          outsidetextfont: {
+            size: chartLabelSize,
+          },
+        };
+      }),
+    [series, backtickRemovedVisData, chartLabelSize, labelsOfXAxis, colorTheme]
+  );
+
+  const mergedLayout = useMemo(() => {
+    const isAtleastOneFullRow = Math.floor(series.length / PLOTLY_PIE_COLUMN_NUMBER) > 0;
+    return {
+      grid: {
+        xgap: PIE_XAXIS_GAP,
+        ygap: PIE_YAXIS_GAP,
+        rows: Math.floor(series.length / PLOTLY_PIE_COLUMN_NUMBER) + 1,
+        columns: isAtleastOneFullRow ? PLOTLY_PIE_COLUMN_NUMBER : series.length,
+        pattern: 'independent',
+      },
+      ...layout,
+      ...(layoutConfig.layout && layoutConfig.layout),
+      legend: {
+        ...layout.legend,
+        orientation: legend.position || legendposition,
+        ...(chartLegendSize && {
+          font: { size: chartLegendSize },
+        }),
+      },
+      showlegend: showLegend,
+      margin: {
+        ...PLOT_MARGIN,
+        t: 100,
+      },
+      title: {
+        text: title,
+        xanchor: 'right',
+        yanchor: 'top',
+        x: 1,
+        y: 1,
+        xref: 'paper',
+        yref: 'container',
+      },
+    };
+  }, [series, layoutConfig.layout, title, layout.legend]);
+
+  const mergedConfigs = useMemo(
+    () => ({
+      ...config,
+      ...(layoutConfig.config && layoutConfig.config),
+    }),
+    [config, layoutConfig.config]
+  );
+
+  return <Plt data={pies} layout={mergedLayout} config={mergedConfigs} />;
+};
diff --git a/public/components/visualizations/charts/pie/pie_type.ts b/public/components/visualizations/charts/pie/pie_type.ts
new file mode 100644
index 0000000000..2ec2dc1e72
--- /dev/null
+++ b/public/components/visualizations/charts/pie/pie_type.ts
@@ -0,0 +1,152 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Pie } from './pie';
+import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
+import { LensIconChartPie } from '../../assets/chart_pie';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigEditor } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/json_editor';
+import {
+  ColorPalettePicker,
+  ConfigChartOptions,
+  ConfigLegend,
+  InputFieldItem,
+  ButtonGroupItem,
+} from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+import { fetchConfigObject } from '../../../../components/event_analytics/utils/utils';
+import { DEFAULT_PALETTE, PIE_PALETTES } from '../../../../../common/constants/colors';
+import { PLOTLY_COLOR, DEFAULT_CHART_STYLES } from '../../../../../common/constants/shared';
+import { DEFAULT_PIE_CHART_PARAMETERS } from '../../../../../common/constants/explorer';
+
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+
+const { ShowLegend, LegendPosition } = DEFAULT_CHART_STYLES;
+const { DefaultMode } = DEFAULT_PIE_CHART_PARAMETERS;
+
+export const createPieTypeDefinition = (params: any) => ({
+  name: 'pie',
+  type: 'pie',
+  id: 'pie',
+  label: 'Pie',
+  fulllabel: 'Pie',
+  icontype: 'visPie',
+  category: VIS_CATEGORY.BASICS,
+  showlegend: ShowLegend,
+  legendposition: LegendPosition,
+  categoryaxis: 'xaxis',
+  seriesaxis: 'yaxis',
+  mode: DefaultMode,
+  icon: LensIconChartPie,
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Style',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [
+          {
+            id: 'legend',
+            name: 'Legend',
+            editor: ConfigLegend,
+            mapTo: 'legend',
+            schemas: [
+              {
+                name: 'Show legend',
+                mapTo: 'showLegend',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Show', id: ShowLegend },
+                    { name: 'Hidden', id: 'hidden' },
+                  ],
+                  defaultSelections: [{ name: 'Show', id: ShowLegend }],
+                },
+              },
+              {
+                name: 'Position',
+                mapTo: 'position',
+                component: null,
+                props: {
+                  options: [
+                    { name: 'Right', id: LegendPosition },
+                    { name: 'Bottom', id: 'h' },
+                  ],
+                  defaultSelections: [{ name: 'Right', id: LegendPosition }],
+                },
+              },
+              {
+                name: 'Legend size',
+                component: InputFieldItem,
+                mapTo: 'size',
+                eleType: 'input',
+              },
+            ],
+          },
+          fetchConfigObject('Tooltip', {
+            options: [
+              { name: 'All', id: 'all' },
+              { name: 'Label', id: 'label' },
+              { name: 'Value', id: 'value' },
+              { name: 'Percent', id: 'percent' },
+            ],
+            defaultSelections: [{ name: 'All', id: 'all' }],
+          }),
+          {
+            id: 'chart_styles',
+            name: 'Chart styles',
+            editor: ConfigChartOptions,
+            mapTo: 'chartStyles',
+            schemas: [
+              {
+                name: 'Mode',
+                isSingleSelection: true,
+                component: ButtonGroupItem,
+                eleType: 'buttons',
+                mapTo: 'mode',
+                props: {
+                  options: [
+                    { name: 'Pie', id: DefaultMode },
+                    { name: 'Donut', id: 'donut' },
+                  ],
+                  defaultSelections: [{ name: 'Pie', id: DefaultMode }],
+                },
+              },
+              {
+                name: 'Label size',
+                component: InputFieldItem,
+                mapTo: 'labelSize',
+                eleType: 'input',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+      colorway: PLOTLY_COLOR,
+      plot_bgcolor: 'rgba(0, 0, 0, 0)',
+      paper_bgcolor: 'rgba(0, 0, 0, 0)',
+      xaxis: {
+        fixedrange: true,
+        showgrid: false,
+        visible: true,
+      },
+      yaxis: {
+        fixedrange: true,
+        showgrid: false,
+        visible: true,
+      },
+    },
+    config: {
+      ...sharedConfigs.config,
+    },
+  },
+  component: Pie,
+});
diff --git a/public/components/visualizations/charts/shared/common.ts b/public/components/visualizations/charts/shared/common.ts
new file mode 100644
index 0000000000..6d782b41a3
--- /dev/null
+++ b/public/components/visualizations/charts/shared/common.ts
@@ -0,0 +1,103 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isEmpty, forEach } from 'lodash';
+import { CUSTOM_LABEL } from '../../../../../common/constants/explorer';
+import { ConfigList, DimensionSpan } from '../../../../../common/types/explorer';
+import { removeBacktick } from '../../../../../common/utils';
+
+export const getCompleteTimespanKey = (span: DimensionSpan) => {
+  if (isEmpty(span) || isEmpty(span.time_field) || isEmpty(span.interval) || isEmpty(span.unit))
+    return '';
+  const spanName = `span(${span.time_field[0]?.name},${span.interval}${span.unit[0]?.value})`;
+  return { name: spanName, label: spanName };
+};
+
+/**
+ * Transform to traces that can be consumed by plotly.
+ * @param intermediateVisData preprocessed json data that has dimensions to single aggregation mapping.
+ * @param param1 required visualization configurations.
+ * @returns traces.
+ */
+export const transformPreprocessedDataToTraces = (
+  intermediateVisData: Array<any>,
+  { breakdowns, isVertical = true }: Partial<ConfigList>
+) => {
+  const traceMap = new Map<string, any>();
+  const hasBreakdown = !isEmpty(breakdowns);
+  forEach(intermediateVisData, (entry) => {
+    const traceKey = hasBreakdown ? [entry.breakdown, entry.aggName].join(',') : entry.aggName;
+    if (isEmpty(traceMap.get(traceKey))) {
+      traceMap.set(traceKey, {
+        x: isVertical ? [entry.x] : [entry.value],
+        y: isVertical ? [entry.value] : [entry.x],
+        name: hasBreakdown ? [entry.breakdown, entry.aggName].join(',') : `${traceKey}`,
+      });
+    } else {
+      const curTrace = traceMap.get(traceKey);
+      const xaxisValue = isVertical ? entry.x : entry.value;
+      const yaxisValue = isVertical ? entry.value : entry.x;
+      curTrace!.x.push(xaxisValue);
+      curTrace!.y.push(yaxisValue);
+    }
+  });
+  return [...traceMap.values()];
+};
+
+/**
+ * preprocess json data to
+ * 1. concatenate dimensions to generate one dimension
+ * 2. concatenate breakdowns (if there's any) generate one breakdown
+ * 3. map dimension/breakdown to aggregations
+ * @param visJson raw json data from data fetching
+ * @param param1 required visualization configurations.
+ * @returns intermediate visualization json data
+ */
+export const preprocessJsonData = (
+  visJson: Array<any>,
+  { dimensions, series, breakdowns, span }: Partial<ConfigList>
+) => {
+  const seriesFlattenedEntries = [];
+  forEach(visJson, (entry) => {
+    const backtickRemovedEntry = {};
+    // remove backtick, so data in jsonData can be accessed through using field name
+    forEach(entry, (value, key) => {
+      backtickRemovedEntry[removeBacktick(key)] = value;
+    });
+    forEach(series, (sr) => {
+      let tabularVizData = {};
+      const serieKey = sr[CUSTOM_LABEL] ? sr[CUSTOM_LABEL] : `${sr.aggregation}(${sr.name})`;
+      if (!isEmpty(serieKey)) {
+        const concatedXaxisLabel = [
+          ...(!isEmpty(span) ? [getCompleteTimespanKey(span)] : []),
+          ...dimensions,
+        ]
+          .map((dimension) => {
+            return backtickRemovedEntry[removeBacktick(dimension.name)] ?? '';
+          })
+          .join(',');
+        const concatedBreakdownLabel = breakdowns
+          ? breakdowns
+              .map((breakdown) => backtickRemovedEntry[removeBacktick(breakdown.name)])
+              .join(',')
+          : '';
+        tabularVizData = {
+          value: backtickRemovedEntry[serieKey],
+          x: concatedXaxisLabel,
+          breakdown: concatedBreakdownLabel,
+          aggName: serieKey,
+        };
+      } else {
+        tabularVizData = {
+          value: 0,
+          x: '',
+          breakdown: '',
+        };
+      }
+      seriesFlattenedEntries.push(tabularVizData);
+    });
+  });
+  return seriesFlattenedEntries;
+};
diff --git a/public/components/visualizations/charts/shared/shared_configs.ts b/public/components/visualizations/charts/shared/shared_configs.ts
new file mode 100644
index 0000000000..6730a5d604
--- /dev/null
+++ b/public/components/visualizations/charts/shared/shared_configs.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { forIn } from 'lodash';
+
+export const getPlotlySharedConfigs = () => {
+  return {
+    layout: {
+      showlegend: true,
+      margin: {
+        l: 60,
+        r: 30,
+        b: 30,
+        t: 50,
+        pad: 0,
+      },
+      height: 1180,
+      legend: {
+        orientation: 'v',
+        traceorder: 'normal',
+      },
+    },
+    config: {
+      displaylogo: false,
+      responsive: true,
+    },
+  };
+};
+
+enum VIS_CATEGORY {
+  BASICS = 'Visualizations',
+}
+
+export const getPlotlyCategory = (type = 'enum') => {
+  switch (type) {
+    case 'enum':
+      return VIS_CATEGORY;
+    case 'list':
+      return Object.values(VIS_CATEGORY);
+    case 'keys':
+      return Object.keys(VIS_CATEGORY);
+    default:
+      return VIS_CATEGORY;
+  }
+};
diff --git a/public/components/visualizations/charts/text/text.tsx b/public/components/visualizations/charts/text/text.tsx
new file mode 100644
index 0000000000..644dbb6743
--- /dev/null
+++ b/public/components/visualizations/charts/text/text.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiMarkdownFormat } from '@elastic/eui';
+
+const DEFAULT_MARKDOWN = `## Text
+
+Welcome to text editor!
+
+With text editor, you are able to add text description(s) to your dashboards.`;
+
+export const Text = ({ visualizations }: any) => {
+  const { dataConfig = {} } = visualizations?.data?.userConfigs;
+
+  return (
+    <div data-test-subj="workspace__viz_markdown">
+      <EuiMarkdownFormat>
+        {dataConfig.text?.markdown ? dataConfig.text?.markdown : DEFAULT_MARKDOWN}
+      </EuiMarkdownFormat>
+    </div>
+  );
+};
diff --git a/public/components/visualizations/charts/text/text_type.ts b/public/components/visualizations/charts/text/text_type.ts
new file mode 100644
index 0000000000..183fe92357
--- /dev/null
+++ b/public/components/visualizations/charts/text/text_type.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Text } from './text';
+import { getPlotlySharedConfigs, getPlotlyCategory } from '../shared/shared_configs';
+import { LensIconChartLine } from '../../assets/chart_line';
+import { PLOTLY_COLOR } from '../../../../../common/constants/shared';
+import { VizDataPanel } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor';
+import { ConfigText } from '../../../event_analytics/explorer/visualizations/config_panel/config_panes/config_controls';
+
+const sharedConfigs = getPlotlySharedConfigs();
+const VIS_CATEGORY = getPlotlyCategory();
+
+export const createTextTypeDefinition = (params: any = {}) => ({
+  name: 'text',
+  type: 'text',
+  id: 'text',
+  label: 'Markdown',
+  fulllabel: 'Markdown',
+  icontype: 'visText',
+  category: VIS_CATEGORY.BASICS,
+  selection: {
+    dataLoss: 'nothing',
+  },
+  icon: LensIconChartLine,
+  categoryaxis: 'xaxis',
+  seriesaxis: 'yaxis',
+  editorconfig: {
+    panelTabs: [
+      {
+        id: 'data-panel',
+        name: 'Style',
+        mapTo: 'dataConfig',
+        editor: VizDataPanel,
+        sections: [
+          {
+            id: 'text_editor',
+            name: 'Text',
+            editor: ConfigText,
+            mapTo: 'text',
+            schemas: [],
+          },
+        ],
+      },
+    ],
+  },
+  visconfig: {
+    layout: {
+      ...sharedConfigs.layout,
+      ...{
+        colorway: PLOTLY_COLOR,
+        plot_bgcolor: 'rgba(0, 0, 0, 0)',
+        paper_bgcolor: 'rgba(0, 0, 0, 0)',
+        xaxis: {
+          fixedrange: true,
+          showgrid: false,
+          visible: true,
+        },
+        yaxis: {
+          fixedrange: true,
+          showgrid: false,
+          visible: true,
+        },
+      },
+    },
+    config: {
+      ...sharedConfigs.config,
+      ...{
+        barmode: 'line',
+        xaxis: {
+          automargin: true,
+        },
+        yaxis: {
+          automargin: true,
+        },
+      },
+    },
+  },
+  component: Text,
+});
diff --git a/public/components/visualizations/charts/vis_types.ts b/public/components/visualizations/charts/vis_types.ts
new file mode 100644
index 0000000000..2c761f2bd6
--- /dev/null
+++ b/public/components/visualizations/charts/vis_types.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { createBarTypeDefinition } from './bar/bar_type';
+import { createLineTypeDefinition } from './lines/line_type';
+import { createPieTypeDefinition } from './pie/pie_type';
+import { createHistogramVisDefinition } from './histogram/histogram_type';
+import { createBubbleVisDefinition } from './bubble/bubble_type';
+import { createMapsVisDefinition } from './maps/heatmap_type';
+import { createDatatableTypeDefinition } from './data_table/data_table_type';
+import { createGaugeTypeDefinition } from './financial/gauge/gauge_type';
+import { createTreeMapDefinition } from './maps/treemap_type';
+import { createTextTypeDefinition } from './text/text_type';
+import { createLogsViewTypeDefinition } from './logs_view/logs_view_type';
+import { createMetricsTypeDefinition } from './metrics/metrics_type';
+
+export const VIS_TYPES = {
+  bar: createBarTypeDefinition,
+  horizontal_bar: createBarTypeDefinition,
+  line: createLineTypeDefinition,
+  pie: createPieTypeDefinition,
+  histogram: createHistogramVisDefinition,
+  data_table: createDatatableTypeDefinition,
+  gauge: createGaugeTypeDefinition,
+  bubble: createBubbleVisDefinition,
+  heatmap: createMapsVisDefinition,
+  tree_map: createTreeMapDefinition,
+  text: createTextTypeDefinition,
+  scatter: createLineTypeDefinition,
+  logs_view: createLogsViewTypeDefinition,
+  metrics: createMetricsTypeDefinition,
+};
+
+export const getVisType = (visType: string, params: any = {}) => {
+  return VIS_TYPES[visType](params);
+};
diff --git a/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap b/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap
new file mode 100644
index 0000000000..af24195dd4
--- /dev/null
+++ b/public/components/visualizations/plotly/__tests__/__snapshots__/plotly.test.tsx.snap
@@ -0,0 +1,149 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ploty base component Renders Ploty base component 1`] = `
+<Plt
+  config={Object {}}
+  data={
+    Array [
+      Object {
+        "displaylogo": false,
+        "marker": Object {
+          "color": Array [
+            "#3CA1C7",
+            "#8C55A3",
+            "#DB748A",
+            "#F2BE4B",
+          ],
+        },
+        "name": "avg(FlightDelayMin)",
+        "responsive": true,
+        "type": "bar",
+        "x": Array [
+          "JetBeats",
+          "Logstash Airways",
+          "OpenSearch Dashboards Airlines",
+          "OpenSearch-Air",
+        ],
+        "y": Array [
+          45.957544288332315,
+          49.55268688081657,
+          46.368274582560296,
+          47.41304347826087,
+        ],
+      },
+    ]
+  }
+  layout={
+    Object {
+      "colorway": Array [
+        "#8C55A3",
+      ],
+      "height": 220,
+      "margin": Object {
+        "b": 15,
+        "l": 60,
+        "pad": 0,
+        "r": 10,
+        "t": 30,
+      },
+      "showlegend": true,
+      "xaxis": Object {
+        "showgrid": false,
+        "visible": true,
+      },
+      "yaxis": Object {
+        "showgrid": false,
+        "visible": true,
+      },
+    }
+  }
+>
+  <PlotlyComponent
+    config={
+      Object {
+        "displayModeBar": false,
+      }
+    }
+    data={
+      Array [
+        Object {
+          "displaylogo": false,
+          "marker": Object {
+            "color": Array [
+              "#3CA1C7",
+              "#8C55A3",
+              "#DB748A",
+              "#F2BE4B",
+            ],
+          },
+          "name": "avg(FlightDelayMin)",
+          "responsive": true,
+          "type": "bar",
+          "x": Array [
+            "JetBeats",
+            "Logstash Airways",
+            "OpenSearch Dashboards Airlines",
+            "OpenSearch-Air",
+          ],
+          "y": Array [
+            45.957544288332315,
+            49.55268688081657,
+            46.368274582560296,
+            47.41304347826087,
+          ],
+        },
+      ]
+    }
+    debug={false}
+    divId="explorerPlotComponent"
+    layout={
+      Object {
+        "autosize": true,
+        "barmode": "stack",
+        "colorway": Array [
+          "#8C55A3",
+        ],
+        "height": 220,
+        "hovermode": "closest",
+        "legend": Object {
+          "orientation": "h",
+          "traceorder": "normal",
+        },
+        "margin": Object {
+          "b": 15,
+          "l": 60,
+          "pad": 0,
+          "r": 10,
+          "t": 30,
+        },
+        "showlegend": true,
+        "xaxis": Object {
+          "showgrid": false,
+          "visible": true,
+        },
+        "yaxis": Object {
+          "showgrid": false,
+          "visible": true,
+        },
+      }
+    }
+    style={
+      Object {
+        "height": "100%",
+        "width": "100%",
+      }
+    }
+    useResizeHandler={true}
+  >
+    <div
+      id="explorerPlotComponent"
+      style={
+        Object {
+          "height": "100%",
+          "width": "100%",
+        }
+      }
+    />
+  </PlotlyComponent>
+</Plt>
+`;
diff --git a/public/components/visualizations/plotly/__tests__/plotly.test.tsx b/public/components/visualizations/plotly/__tests__/plotly.test.tsx
new file mode 100644
index 0000000000..02fab5123e
--- /dev/null
+++ b/public/components/visualizations/plotly/__tests__/plotly.test.tsx
@@ -0,0 +1,69 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configure, mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+import { waitFor } from '@testing-library/react';
+import { Plt } from '../plot';
+import { LAYOUT_CONFIG } from '../../../../../test/event_analytics_constants';
+
+describe('Ploty base component', () => {
+  configure({ adapter: new Adapter() });
+
+  it('Renders Ploty base component', async () => {
+    
+    const barValues = [{
+      displaylogo: false,
+      marker: {
+        color: [
+          "#3CA1C7",
+          "#8C55A3",
+          "#DB748A",
+          "#F2BE4B"
+        ]
+      },
+      name: "avg(FlightDelayMin)",
+      responsive: true,
+      type: 'bar',
+      x: [
+        "JetBeats",
+        "Logstash Airways",
+        "OpenSearch Dashboards Airlines",
+        "OpenSearch-Air"
+      ],
+      y: [
+        45.957544288332315,
+        49.55268688081657,
+        46.368274582560296,
+        47.41304347826087
+      ]
+    }];
+
+    const wrapper = mount(
+      <Plt
+        data={barValues}
+        layout={{
+          xaxis: {
+            showgrid: false,
+            visible: true,
+          },
+          yaxis: {
+            showgrid: false,
+            visible: true,
+          },
+          ...LAYOUT_CONFIG,
+        }}
+        config={{}}
+      />
+    );
+    
+    wrapper.update();
+
+    await waitFor(() => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
\ No newline at end of file
diff --git a/public/components/visualizations/plotly/plot.tsx b/public/components/visualizations/plotly/plot.tsx
new file mode 100644
index 0000000000..bf1a61642d
--- /dev/null
+++ b/public/components/visualizations/plotly/plot.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import plotComponentFactory from 'react-plotly.js/factory';
+import Plotly from 'plotly.js-dist';
+import { uiSettingsService } from '../../../../common/utils';
+
+interface PltProps {
+  data: Plotly.Data[];
+  layout?: Partial<Plotly.Layout>;
+  config?: Partial<Plotly.Config>;
+  onHoverHandler?: (event: Readonly<Plotly.PlotMouseEvent>) => void;
+  onUnhoverHandler?: (event: Readonly<Plotly.PlotMouseEvent>) => void;
+  onClickHandler?: (event: Readonly<Plotly.PlotMouseEvent>) => void;
+  height?: string;
+  dispatch?: (props: any) => void;
+}
+
+export function Plt(props: PltProps) {
+  const PlotComponent = plotComponentFactory(Plotly);
+  const darkLayout = uiSettingsService.get('theme:darkMode')
+    ? {
+        paper_bgcolor: '#1D1E24',
+        plot_bgcolor: '#1D1E24',
+        font: {
+          color: '#DFE5EF',
+        },
+      }
+    : {};
+
+  const finalLayout = {
+    autosize: true,
+    barmode: 'stack',
+    legend: {
+      orientation: 'h',
+      traceorder: 'normal',
+    },
+    showlegend: false,
+    hovermode: 'closest',
+    xaxis: {
+      showgrid: true,
+      zeroline: false,
+      rangemode: 'normal',
+      automargin: true,
+    },
+    yaxis: {
+      showgrid: true,
+      zeroline: false,
+      rangemode: 'normal',
+    },
+    ...darkLayout,
+    ...props.layout,
+  };
+
+  const finalConfig = {
+    displayModeBar: false,
+    ...props.config,
+  };
+
+  return (
+    <PlotComponent
+      divId="explorerPlotComponent"
+      data={props.data}
+      style={{ width: '100%', height: props.height || '100%' }}
+      onHover={props.onHoverHandler}
+      onUnhover={props.onUnhoverHandler}
+      onClick={props.onClickHandler}
+      useResizeHandler
+      config={finalConfig}
+      layout={finalLayout}
+    />
+  );
+}
diff --git a/public/components/visualizations/plotly_default_config.ts b/public/components/visualizations/plotly_default_config.ts
new file mode 100644
index 0000000000..da1f83ddf7
--- /dev/null
+++ b/public/components/visualizations/plotly_default_config.ts
@@ -0,0 +1,34 @@
+export const DEFAULT_CONFIG = {
+  layout: {
+    autosize: true,
+    margin: {
+      l: 30,
+      r: 5,
+      b: 30,
+      t: 5,
+      pad: 4,
+    },
+    barmode: 'stack',
+    legend: {
+      orientation: 'h',
+      traceorder: 'normal',
+    },
+    showlegend: false,
+    hovermode: 'closest',
+    xaxis: {
+      showgrid: true,
+      zeroline: false,
+      rangemode: 'normal',
+      automargin: true,
+    },
+    yaxis: {
+      showgrid: true,
+      zeroline: false,
+      rangemode: 'normal',
+    },
+    displayModeBar: false,
+  },
+  config: {
+    displayModeBar: false,
+  },
+};
diff --git a/public/components/visualizations/visualization.tsx b/public/components/visualizations/visualization.tsx
new file mode 100644
index 0000000000..63c3422449
--- /dev/null
+++ b/public/components/visualizations/visualization.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { isEmpty } from 'lodash';
+import { VisualizationChart } from './visualization_chart';
+import { VisCanvassPlaceholder } from '../event_analytics/explorer/visualizations/shared_components';
+
+interface IVisualizationProps {}
+
+export const Visualization = ({ visualizations }: IVisualizationProps) => {
+  return (
+    <>
+      {!isEmpty(visualizations?.data?.rawVizData?.data) ? (
+        <VisualizationChart visualizations={visualizations} />
+      ) : (
+        <VisCanvassPlaceholder message={'No data found'} icon={visualizations?.vis?.icontype} />
+      )}
+    </>
+  );
+};
diff --git a/public/components/visualizations/visualization_chart.tsx b/public/components/visualizations/visualization_chart.tsx
new file mode 100644
index 0000000000..cc5a667ff0
--- /dev/null
+++ b/public/components/visualizations/visualization_chart.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useMemo } from 'react';
+
+interface IVisualizationChart {}
+
+export const VisualizationChart = ({ visualizations }: IVisualizationChart) => {
+  const { vis } = visualizations;
+  const { layout = {}, config = {} } = visualizations?.data?.userConfigs;
+  const Visualization = visualizations?.vis?.component;
+
+  const finalFigureConfig = useMemo(() => {
+    return {
+      ...vis.visconfig?.config,
+      ...config,
+    };
+  }, [config, vis]);
+
+  const finalFigureLayout = () => {
+    return {
+      ...vis.visconfig?.layout,
+      ...layout,
+    };
+  };
+
+  return (
+    <Visualization
+      visualizations={visualizations}
+      layout={finalFigureLayout}
+      config={finalFigureConfig}
+    />
+  );
+};
diff --git a/public/framework/redux/reducers/index.ts b/public/framework/redux/reducers/index.ts
new file mode 100644
index 0000000000..47e5dd321a
--- /dev/null
+++ b/public/framework/redux/reducers/index.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { combineReducers } from 'redux';
+
+import queriesReducer from '../../../components/event_analytics/redux/slices/query_slice';
+import queryResultsReducer from '../../../components/event_analytics/redux/slices/query_result_slice';
+import queryTabReducer from '../../../components/event_analytics/redux/slices/query_tab_slice';
+import FieldsReducer from '../../../components/event_analytics/redux/slices/field_slice';
+import countDistributionReducer from '../../../components/event_analytics/redux/slices/count_distribution_slice';
+import explorerVisualizationReducer from '../../../components/event_analytics/redux/slices/visualization_slice';
+import explorerVisualizationConfigReducer from '../../../components/event_analytics/redux/slices/viualization_config_slice';
+import patternsReducer from '../../../components/event_analytics/redux/slices/patterns_slice';
+import metricsReducers from '../../../components/metrics/redux/slices/metrics_slice';
+
+const rootReducer = combineReducers({
+  // explorer reducers
+  queries: queriesReducer,
+  queryResults: queryResultsReducer,
+  explorerTabs: queryTabReducer,
+  fields: FieldsReducer,
+  countDistribution: countDistributionReducer,
+  explorerVisualization: explorerVisualizationReducer,
+  explorerVisualizationConfig: explorerVisualizationConfigReducer,
+  patterns: patternsReducer,
+  metrics: metricsReducers,
+});
+
+export type RootState = ReturnType<typeof rootReducer>;
+
+export default rootReducer;
diff --git a/public/framework/redux/store/index.ts b/public/framework/redux/store/index.ts
new file mode 100644
index 0000000000..181d1edb27
--- /dev/null
+++ b/public/framework/redux/store/index.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { configureStore } from '@reduxjs/toolkit';
+import rootReducer from '../reducers';
+import storage from 'redux-persist/lib/storage/session';
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from 'redux-persist';
+
+const persistConfig = {
+  key: 'root',
+  storage,
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
+  devTools: process.env.NODE_ENV !== 'production',
+  enhancers: [],
+});
+
+if (process.env.NODE_ENV === 'development' && module.hot) {
+  module.hot.accept('./rootReducer', () => {
+    store.replaceReducer(persistReducer(persistConfig, require('./rootReducer').default));
+  });
+}
+
+export type AppDispatch = typeof store.dispatch;
+
+export const persistor = persistStore(store);
+
+export default store;
diff --git a/public/framework/redux/store/shared_state.ts b/public/framework/redux/store/shared_state.ts
new file mode 100644
index 0000000000..9cfce53513
--- /dev/null
+++ b/public/framework/redux/store/shared_state.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { uniqueId } from 'lodash';
+import { TAB_ID_TXT_PFX } from '../../../../common/constants/explorer';
+
+export const initialTabId: string = uniqueId(TAB_ID_TXT_PFX);
diff --git a/public/index.ts b/public/index.ts
new file mode 100644
index 0000000000..97037a9f7d
--- /dev/null
+++ b/public/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import './components/trace_analytics/index.scss';
+import './components/notebooks/index.scss'
+
+import { PluginInitializer, PluginInitializerContext } from '../../../src/core/public';
+import {
+  ObservabilityPlugin
+} from './plugin';
+
+export { ObservabilityPlugin as Plugin };
+
+export const plugin = (initializerContext: PluginInitializerContext) => new ObservabilityPlugin(initializerContext);
\ No newline at end of file
diff --git a/public/plugin.ts b/public/plugin.ts
new file mode 100644
index 0000000000..1e3189e578
--- /dev/null
+++ b/public/plugin.ts
@@ -0,0 +1,72 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
+import {
+  observabilityID,
+  observabilityPluginOrder,
+  observabilityTitle,
+} from '../common/constants/shared';
+import PPLService from './services/requests/ppl';
+import DSLService from './services/requests/dsl';
+import TimestampUtils from './services/timestamp/timestamp';
+import SavedObjects from './services/saved_objects/event_analytics/saved_objects';
+import { AppPluginStartDependencies, ObservabilitySetup, ObservabilityStart } from './types';
+import { convertLegacyNotebooksUrl } from './components/notebooks/components/helpers/legacy_route_helpers';
+import { convertLegacyTraceAnalyticsUrl } from './components/trace_analytics/components/common/legacy_route_helpers';
+import { uiSettingsService } from '../common/utils';
+import { QueryManager } from '../common/query_manager';
+export class ObservabilityPlugin implements Plugin<ObservabilitySetup, ObservabilityStart> {
+  public setup(core: CoreSetup): ObservabilitySetup {
+    uiSettingsService.init(core.uiSettings, core.notifications);
+
+    // redirect legacy notebooks URL to current URL under observability
+    if (window.location.pathname.includes('notebooks-dashboards')) {
+      window.location.assign(convertLegacyNotebooksUrl(window.location));
+    }
+
+    // redirect legacy trace analytics URL to current URL under observability
+    if (window.location.pathname.includes('trace-analytics-dashboards')) {
+      window.location.assign(convertLegacyTraceAnalyticsUrl(window.location));
+    }
+
+    core.application.register({
+      id: observabilityID,
+      title: observabilityTitle,
+      category: {
+        id: 'opensearch',
+        label: 'OpenSearch Plugins',
+        order: 2000,
+      },
+      order: observabilityPluginOrder,
+      async mount(params: AppMountParameters) {
+        const { Observability } = await import('./components/index');
+        const [coreStart, depsStart] = await core.getStartServices();
+        const pplService = new PPLService(coreStart.http);
+        const dslService = new DSLService(coreStart.http);
+        const savedObjects = new SavedObjects(coreStart.http);
+        const timestampUtils = new TimestampUtils(dslService, pplService);
+        const qm = new QueryManager();
+        return Observability(
+          coreStart,
+          depsStart as AppPluginStartDependencies,
+          params,
+          pplService,
+          dslService,
+          savedObjects,
+          timestampUtils,
+          qm
+        );
+      },
+    });
+
+    // Return methods that should be available to other plugins
+    return {};
+  }
+  public start(core: CoreStart): ObservabilityStart {
+    return {};
+  }
+  public stop() {}
+}
diff --git a/public/services/requests/dsl.ts b/public/services/requests/dsl.ts
new file mode 100644
index 0000000000..5ce0ce0570
--- /dev/null
+++ b/public/services/requests/dsl.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CoreStart } from '../../../../../src/core/public';
+import { DSL_BASE, DSL_SEARCH, DSL_CAT, DSL_MAPPING } from '../../../common/constants/shared';
+
+export default class DSLService {
+  private http;
+  constructor(http: CoreStart['http']) {
+    this.http = http;
+  }
+  fetch = async (request: any) => {
+    return this.http
+      .post(`${DSL_BASE}${DSL_SEARCH}`, {
+        body: JSON.stringify(request),
+      })
+      .catch((error) => console.error(error));
+  };
+
+  fetchIndices = async () => {
+    return this.http
+      .get(`${DSL_BASE}${DSL_CAT}`, {
+        query: {
+          format: 'json',
+        },
+      })
+      .catch((error) => console.error(error));
+  };
+
+  fetchFields = async (index: string) => {
+    return this.http
+      .get(`${DSL_BASE}${DSL_MAPPING}`, {
+        query: {
+          index,
+        },
+      })
+      .catch((error) => console.error(error));
+  };
+}
diff --git a/public/services/requests/ppl.ts b/public/services/requests/ppl.ts
new file mode 100644
index 0000000000..2cb5f8f7cf
--- /dev/null
+++ b/public/services/requests/ppl.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CoreStart } from '../../../../../src/core/public';
+import { PPL_BASE, PPL_SEARCH } from '../../../common/constants/shared';
+
+export default class PPLService {
+  private http;
+  constructor(http: CoreStart['http']) {
+    this.http = http;
+  }
+
+  fetch = async (
+    params: {
+      query: string;
+      format: string;
+    },
+    errorHandler?: (error: any) => void
+  ) => {
+    return this.http
+      .post(`${PPL_BASE}${PPL_SEARCH}`, {
+        body: JSON.stringify(params),
+      })
+      .catch((error) => {
+        console.error('fetch error: ', error.body);
+        if (errorHandler) errorHandler(error);
+        throw error;
+      });
+  };
+}
diff --git a/public/services/saved_objects/event_analytics/saved_objects.ts b/public/services/saved_objects/event_analytics/saved_objects.ts
new file mode 100644
index 0000000000..0f207ab793
--- /dev/null
+++ b/public/services/saved_objects/event_analytics/saved_objects.ts
@@ -0,0 +1,304 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { has, isEmpty, isArray } from 'lodash';
+import { IField } from 'common/types/explorer';
+import {
+  OBSERVABILITY_BASE,
+  EVENT_ANALYTICS,
+  SAVED_OBJECTS,
+  SAVED_QUERY,
+  SAVED_VISUALIZATION,
+} from '../../../../common/constants/shared';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../../common/constants/custom_panels';
+
+const CONCAT_FIELDS = ['objectIdList', 'objectType'];
+
+interface ISavedObjectRequestParams {
+  objectId?: string;
+  objectIdList?: string[] | string;
+  objectType?: string[] | string;
+  sortField?: string;
+  sortOrder?: 'asc' | 'desc';
+  fromIndex?: number;
+  maxItems?: number;
+  name?: string;
+  lastUpdatedTimeMs?: string;
+  createdTimeMs?: string;
+}
+
+interface ISelectedPanelsParams {
+  selectedCustomPanels: any[];
+  savedVisualizationId: string;
+}
+
+interface IBulkUpdateSavedVisualizationRquest {
+  query: string;
+  fields: IField[];
+  dateRange: string[];
+  type: string;
+  name: string;
+  savedObjectList: any[];
+}
+
+// eslint-disable-next-line import/no-default-export
+export default class SavedObjects {
+  constructor(private readonly http: any) {}
+
+  buildRequestBody({
+    query,
+    fields,
+    dateRange,
+    timestamp,
+    name = '',
+    chartType = '',
+    description = '',
+    applicationId = '',
+    userConfigs = '',
+    subType = '',
+    unitsOfMeasure = '',
+    selectedLabels,
+  }: any) {
+    const objRequest: any = {
+      object: {
+        query,
+        selected_date_range: {
+          start: dateRange[0] || 'now/15m',
+          end: dateRange[1] || 'now',
+          text: '',
+        },
+        selected_timestamp: {
+          name: timestamp || '',
+          type: 'timestamp',
+        },
+        selected_fields: {
+          tokens: fields,
+          text: '',
+        },
+        name: name || '',
+        description: description || '',
+      },
+    };
+
+    if (!isEmpty(chartType)) {
+      objRequest.object.type = chartType;
+    }
+
+    if (!isEmpty(applicationId)) {
+      objRequest.object.application_id = applicationId;
+    }
+
+    if (!isEmpty(userConfigs)) {
+      objRequest.object.user_configs = userConfigs;
+    }
+
+    if (!isEmpty(subType)) {
+      objRequest.object.sub_type = subType;
+    }
+
+    if (!isEmpty(unitsOfMeasure)) {
+      objRequest.object.units_of_measure = unitsOfMeasure;
+    }
+
+    if (!isEmpty(selectedLabels)) {
+      objRequest.object.selected_labels = selectedLabels;
+    }
+
+    return objRequest;
+  }
+
+  private stringifyList(targetObj: any, key: string, joinBy: string) {
+    if (has(targetObj, key) && isArray(targetObj[key])) {
+      targetObj[key] = targetObj[key].join(joinBy);
+    }
+    return targetObj;
+  }
+
+  async fetchSavedObjects(params: ISavedObjectRequestParams) {
+    // turn array into string. exmaple objectType ['savedQuery', 'savedVisualization'] =>
+    // 'savedQuery,savedVisualization'
+    CONCAT_FIELDS.map((arrayField) => {
+      this.stringifyList(params, arrayField, ',');
+    });
+
+    return await this.http.get(`${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}`, {
+      query: {
+        ...params,
+      },
+    });
+  }
+
+  async fetchCustomPanels() {
+    return await this.http.get(`${CUSTOM_PANELS_API_PREFIX}/panels`);
+  }
+
+  async bulkUpdateCustomPanel(params: ISelectedPanelsParams) {
+    const finalParams = {
+      panelId: '',
+      savedVisualizationId: params.savedVisualizationId,
+    };
+
+    return await Promise.all(
+      params.selectedCustomPanels.map((panel) => {
+        finalParams.panelId = panel.panel.id;
+        return this.http.post(`${CUSTOM_PANELS_API_PREFIX}/visualizations`, {
+          body: JSON.stringify(finalParams),
+        });
+      })
+    );
+  }
+
+  async bulkUpdateSavedVisualization(params: IBulkUpdateSavedVisualizationRquest) {
+    const finalParams = this.buildRequestBody({
+      query: params.query,
+      fields: params.fields,
+      dateRange: params.dateRange,
+      chartType: params.type,
+      name: params.name,
+    });
+
+    return await Promise.all(
+      params.savedObjectList.map((objectToUpdate) => {
+        finalParams.object_id = objectToUpdate.saved_object.objectId;
+        return this.http.put(
+          `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}${SAVED_VISUALIZATION}`,
+          {
+            body: JSON.stringify(finalParams),
+          }
+        );
+      })
+    );
+  }
+
+  async updateSavedVisualizationById(params: any) {
+    const finalParams = this.buildRequestBody({
+      query: params.query,
+      fields: params.fields,
+      dateRange: params.dateRange,
+      chartType: params.type,
+      name: params.name,
+      timestamp: params.timestamp,
+      userConfigs: params.userConfigs,
+      description: params.description,
+      subType: params.subType,
+      unitsOfMeasure: params.unitsOfMeasure,
+      selectedLabels: params.selectedLabels
+    });
+
+    finalParams.object_id = params.objectId;
+
+    return await this.http.put(
+      `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}${SAVED_VISUALIZATION}`,
+      {
+        body: JSON.stringify(finalParams),
+      }
+    );
+  }
+
+  async updateSavedQueryById(params: any) {
+    const finalParams = this.buildRequestBody({
+      query: params.query,
+      fields: params.fields,
+      dateRange: params.dateRange,
+      chartType: params.type,
+      name: params.name,
+      timestamp: params.timestamp,
+    });
+
+    finalParams.object_id = params.objectId;
+
+    return await this.http.put(
+      `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}${SAVED_QUERY}`,
+      {
+        body: JSON.stringify(finalParams),
+      }
+    );
+  }
+
+  async createSavedQuery(params: any) {
+    const finalParams = this.buildRequestBody({
+      query: params.query,
+      fields: params.fields,
+      dateRange: params.dateRange,
+      name: params.name,
+      timestamp: params.timestamp,
+    });
+
+    return await this.http.post(
+      `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}${SAVED_QUERY}`,
+      {
+        body: JSON.stringify(finalParams),
+      }
+    );
+  }
+
+  async createSavedVisualization(params: any) {
+    const finalParams = this.buildRequestBody({
+      query: params.query,
+      fields: params.fields,
+      dateRange: params.dateRange,
+      chartType: params.type,
+      name: params.name,
+      timestamp: params.timestamp,
+      applicationId: params.applicationId,
+      userConfigs: params.userConfigs,
+      description: params.description,
+      subType: params.subType,
+      unitsOfMeasure: params.unitsOfMeasure,
+      selectedLabels: params.selectedLabels
+    });
+
+    return await this.http.post(
+      `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}${SAVED_VISUALIZATION}`,
+      {
+        body: JSON.stringify(finalParams),
+      }
+    );
+  }
+
+  async createSavedTimestamp(params: any) {
+    const finalParams = {
+      index: params.index,
+      name: params.name,
+      type: params.type,
+      dsl_type: params.dsl_type,
+    };
+
+    return await this.http.post(
+      `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/timestamp`,
+      {
+        body: JSON.stringify(finalParams),
+      }
+    );
+  }
+
+  async updateTimestamp(params: any) {
+    const finalParams = {
+      objectId: params.index,
+      timestamp: {
+        name: params.name,
+        index: params.index,
+        type: params.type,
+        dsl_type: params.dsl_type,
+      },
+    };
+    return await this.http.put(
+      `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/timestamp`,
+      {
+        body: JSON.stringify(finalParams),
+      }
+    );
+  }
+
+  async deleteSavedObjectsList(deleteObjectRequest: any) {
+    return await this.http.delete(
+      `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/${deleteObjectRequest.objectIdList.join(
+        ','
+      )}`
+    );
+  }
+
+  deleteSavedObjectsByIdList(deleteObjectRequesList: any) {}
+}
diff --git a/public/services/timestamp/timestamp.ts b/public/services/timestamp/timestamp.ts
new file mode 100644
index 0000000000..93c5c0caca
--- /dev/null
+++ b/public/services/timestamp/timestamp.ts
@@ -0,0 +1,115 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { isEmpty, isEqual, values, keys } from 'lodash';
+import DSLService from '../requests/dsl';
+import { IDefaultTimestampState } from '../../../common/types/explorer';
+import PPLService from '../requests/ppl';
+
+// eslint-disable-next-line import/no-default-export
+export default class TimestampUtils {
+  constructor(private dslService: DSLService, private pplService: PPLService) {}
+
+  isTimeField(type: string) {
+    return ['date', 'date_nanos'].some((dateTimeType) => isEqual(type, dateTimeType));
+  }
+
+  async getTimestamp(index: string): Promise<IDefaultTimestampState> {
+    const indexMappings = await this.getIndexMappings(index);
+    const timestamp: IDefaultTimestampState = {
+      hasSchemaConflict: false,
+      default_timestamp: '',
+      message: 'Index does not contain a valid time field.',
+    };
+
+    // expect indexes to have the same schema, then go over the mapping to find timestamp
+    const mappingValues = values(indexMappings);
+
+    // check if all indexes have the same schema
+    if (
+      mappingValues.length > 1 &&
+      mappingValues.some(
+        (mapping) => !isEqual(mappingValues[0]?.mappings?.properties, mapping.mappings?.properties)
+      )
+    ) {
+      timestamp.message = 'Indexes have different schemas, and may lead to unexpected behaviors';
+      timestamp.hasSchemaConflict = true;
+    }
+
+    for (let i = 0; i < keys(indexMappings).length; i++) {
+      const fieldMapping = mappingValues[i]?.mappings?.properties || {};
+      if (!isEmpty(fieldMapping)) {
+        const mfields = keys(fieldMapping);
+        const mvalues = values(fieldMapping);
+        for (let j = 0; j < mfields.length; j++) {
+          if (
+            mvalues[j].type &&
+            this.isTimeField(mvalues[j].type) &&
+            isEmpty(timestamp.default_timestamp)
+          ) {
+            timestamp.default_timestamp = mfields[j];
+            timestamp.message = timestamp.hasSchemaConflict ? timestamp.message : '';
+            break;
+          }
+        }
+      }
+      if (timestamp.default_timestamp) break;
+    }
+    return timestamp;
+  }
+
+  async getIndexMappings(index: string) {
+    const myArray = [...index.matchAll(/[^.`]+|`[^`]*`/g)];
+    if (myArray.length > 1) {
+      const catalog: string = myArray[0][0].replace(/`/g, '');
+      if (await this.isPrometheusCatalog(catalog)) {
+        const mappings = await this.pplService.fetch({
+          query: 'describe ' + index + ' | fields COLUMN_NAME, DATA_TYPE',
+          format: 'jdbc',
+        });
+        return this.convertToMappings(index, mappings);
+      }
+    }
+    return await this.dslService.fetchFields(index);
+  }
+
+  async isPrometheusCatalog(catalog: string) {
+    const catalogs = await this.pplService.fetch({
+      query: "show datasources | where CONNECTOR_TYPE='PROMETHEUS' | fields DATASOURCE_NAME",
+      format: 'viz',
+    });
+    if (
+      catalogs.data &&
+      catalogs.data.DATASOURCE_NAME &&
+      catalogs.data.DATASOURCE_NAME.includes(catalog)
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  private convertToMappings(index: string, { datarows }: object) {
+    const result = {};
+    result[index] = {
+      mappings: {
+        properties: {},
+      },
+    };
+    if (datarows) {
+      for (const s of datarows) {
+        const key = s[0];
+        let datatype = s[1];
+        if (datatype === 'timestamp') {
+          datatype = 'date';
+        }
+        result[index].mappings.properties[key] = {
+          type: datatype,
+        };
+      }
+    }
+    return result;
+  }
+}
diff --git a/public/types.ts b/public/types.ts
new file mode 100644
index 0000000000..82bd6543a4
--- /dev/null
+++ b/public/types.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { DashboardStart } from '../../../src/plugins/dashboard/public';
+import { NavigationPublicPluginStart } from '../../../src/plugins/navigation/public';
+
+export interface AppPluginStartDependencies {
+  navigation: NavigationPublicPluginStart;
+  dashboard: DashboardStart;
+}
+
+export interface ObservabilitySetup {}
+
+export interface ObservabilityStart {}
diff --git a/server/adaptors/application_analytics/app_analytics_adaptor.ts b/server/adaptors/application_analytics/app_analytics_adaptor.ts
new file mode 100644
index 0000000000..45458564e5
--- /dev/null
+++ b/server/adaptors/application_analytics/app_analytics_adaptor.ts
@@ -0,0 +1,140 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  ApplicationRequestType,
+  ApplicationType,
+} from '../../../common/types/application_analytics';
+import { ILegacyScopedClusterClient } from '../../../../../src/core/server';
+
+export class AppAnalyticsAdaptor {
+  // Fetch all existing applications
+  fetchApps = async (client: ILegacyScopedClusterClient): Promise<ApplicationType[]> => {
+    try {
+      const response = await client.callAsCurrentUser('observability.getObject', {
+        objectType: 'application',
+      });
+      return response.observabilityObjectList.map((object: any) => {
+        return {
+          id: object.objectId,
+          dateCreated: object.createdTimeMs,
+          dateModified: object.lastUpdatedTimeMs,
+          name: object.application.name,
+          description: object.application.description,
+          baseQuery: object.application.baseQuery,
+          servicesEntities: object.application.servicesEntities.map((rec: string) =>
+            decodeURI(rec)
+          ),
+          traceGroups: object.application.traceGroups.map((rec: string) => decodeURI(rec)),
+          panelId: object.application.panelId,
+          availability: {
+            name: '',
+            color: '',
+            availabilityVisId: object.application.availabilityVisId || '',
+          },
+        };
+      });
+    } catch (err: any) {
+      throw new Error('Fetch All Applications Error: ' + err);
+    }
+  };
+
+  // Fetch application by id
+  fetchAppById = async (
+    client: ILegacyScopedClusterClient,
+    appId: string
+  ): Promise<ApplicationType> => {
+    try {
+      const response = await client.callAsCurrentUser('observability.getObjectById', {
+        objectId: appId,
+      });
+      const app = response.observabilityObjectList[0];
+      return {
+        id: appId,
+        dateCreated: app.createdTimeMs,
+        dateModified: app.lastUpdatedTimeMs,
+        name: app.application.name,
+        description: app.application.description,
+        baseQuery: app.application.baseQuery,
+        servicesEntities: app.application.servicesEntities.map((rec: string) => decodeURI(rec)),
+        traceGroups: app.application.traceGroups.map((rec: string) => decodeURI(rec)),
+        panelId: app.application.panelId,
+        availability: {
+          name: '',
+          color: '',
+          availabilityVisId: app.application.availabilityVisId || '',
+        },
+      };
+    } catch (err: any) {
+      throw new Error('Fetch Application By Id Error: ' + err);
+    }
+  };
+
+  // Create a new application
+  createNewApp = async (
+    client: ILegacyScopedClusterClient,
+    appBody: Partial<ApplicationRequestType>
+  ) => {
+    try {
+      const response = await client.callAsCurrentUser('observability.createObject', {
+        body: {
+          application: appBody,
+        },
+      });
+      return response.objectId;
+    } catch (err) {
+      throw new Error('Create New Application Error: ' + err);
+    }
+  };
+
+  // Rename an existing application
+  renameApp = async (client: ILegacyScopedClusterClient, appId: string, name: string) => {
+    const updateApplicationBody = {
+      name,
+    };
+    try {
+      const response = await client.callAsCurrentUser('observability.updateObjectById', {
+        objectId: appId,
+        body: {
+          application: updateApplicationBody,
+        },
+      });
+      return response.objectId;
+    } catch (err: any) {
+      throw new Error('Rename Application Error: ' + err);
+    }
+  };
+
+  // Update an existing application
+  updateApp = async (
+    client: ILegacyScopedClusterClient,
+    appId: string,
+    updateAppBody: Partial<ApplicationRequestType>
+  ) => {
+    try {
+      const response = await client.callAsCurrentUser('observability.updateObjectById', {
+        objectId: appId,
+        body: {
+          application: updateAppBody,
+        },
+      });
+      return response.objectId;
+    } catch (err: any) {
+      throw new Error('Update Panel Error: ' + err);
+    }
+  };
+
+  // Delete existing applications
+  deleteApp = async (client: ILegacyScopedClusterClient, appList: string) => {
+    try {
+      const response = await client.callAsCurrentUser('observability.deleteObjectByIdList', {
+        objectIdList: appList,
+      });
+      return { status: 'OK', message: response };
+    } catch (err: any) {
+      throw new Error('Delete Application Error: ' + err);
+    }
+  };
+}
diff --git a/server/adaptors/custom_panels/custom_panel_adaptor.ts b/server/adaptors/custom_panels/custom_panel_adaptor.ts
new file mode 100644
index 0000000000..2b2ba55dd0
--- /dev/null
+++ b/server/adaptors/custom_panels/custom_panel_adaptor.ts
@@ -0,0 +1,463 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { v4 as uuidv4 } from 'uuid';
+import { PanelType, VisualizationType } from '../../../common/types/custom_panels';
+import { ILegacyScopedClusterClient } from '../../../../../src/core/server';
+import { createDemoPanel } from '../../common/helpers/custom_panels/sample_panels';
+
+interface boxType {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+export class CustomPanelsAdaptor {
+  // index a panel
+  indexPanel = async function (
+    client: ILegacyScopedClusterClient,
+    panelBody: PanelType
+  ): Promise<{ objectId: string }> {
+    try {
+      const response = await client.callAsCurrentUser('observability.createObject', {
+        body: {
+          operationalPanel: panelBody,
+        },
+      });
+      return response;
+    } catch (error) {
+      throw new Error('Index Panel Error:' + error);
+    }
+  };
+
+  // update a panel
+  updatePanel = async function (
+    client: ILegacyScopedClusterClient,
+    panelId: string,
+    updatePanelBody: Partial<PanelType>
+  ) {
+    try {
+      const response = await client.callAsCurrentUser('observability.updateObjectById', {
+        objectId: panelId,
+        body: {
+          operationalPanel: updatePanelBody,
+        },
+      });
+      return response;
+    } catch (error) {
+      throw new Error('Update Panel Error:' + error);
+    }
+  };
+
+  // fetch a panel by id
+  getPanel = async function (client: ILegacyScopedClusterClient, panelId: string) {
+    try {
+      const response = await client.callAsCurrentUser('observability.getObjectById', {
+        objectId: panelId,
+      });
+      return response.observabilityObjectList[0];
+    } catch (error) {
+      throw new Error('Get Panel Error:' + error);
+    }
+  };
+
+  // gets list of panels stored in index
+  viewPanelList = async function (client: ILegacyScopedClusterClient) {
+    try {
+      const response = await client.callAsCurrentUser('observability.getObject', {
+        objectType: 'operationalPanel',
+        maxItems: 10000,
+      });
+      return response.observabilityObjectList
+        .filter((panel: any) => !panel.operationalPanel.applicationId)
+        .map((panel: any) => ({
+          name: panel.operationalPanel.name,
+          id: panel.objectId,
+          dateCreated: panel.createdTimeMs,
+          dateModified: panel.lastUpdatedTimeMs,
+        }));
+    } catch (error) {
+      throw new Error('View Panel List Error:' + error);
+    }
+  };
+
+  // Delete a panel by Id
+  deletePanel = async function (client: ILegacyScopedClusterClient, panelId: string) {
+    try {
+      const response = await client.callAsCurrentUser('observability.deleteObjectById', {
+        objectId: panelId,
+      });
+      return { status: 'OK', message: response };
+    } catch (error) {
+      throw new Error('Delete Panel Error:' + error);
+    }
+  };
+
+  // Delete a panel by Id
+  deletePanelList = async function (client: ILegacyScopedClusterClient, panelIdList: string) {
+    try {
+      const response = await client.callAsCurrentUser('observability.deleteObjectByIdList', {
+        objectIdList: panelIdList,
+      });
+      return { status: 'OK', message: response };
+    } catch (error) {
+      throw new Error('Delete Panel List Error:' + error);
+    }
+  };
+
+  // Create a new Panel
+  createNewPanel = async (
+    client: ILegacyScopedClusterClient,
+    panelName: string,
+    appId?: string
+  ) => {
+    const panelBody: PanelType = {
+      name: panelName,
+      visualizations: [],
+      timeRange: {
+        to: 'now',
+        from: 'now-1d',
+      },
+      queryFilter: {
+        query: '',
+        language: 'ppl',
+      },
+    };
+    if (appId) {
+      panelBody.applicationId = appId;
+      panelBody.timeRange = {
+        to: 'now',
+        from: 'now-24h',
+      };
+    }
+
+    try {
+      const response = await this.indexPanel(client, panelBody);
+      return response.objectId;
+    } catch (error) {
+      throw new Error('Create Panel Error:' + error);
+    }
+  };
+
+  // Rename an existing panel
+  renamePanel = async (client: ILegacyScopedClusterClient, panelId: string, panelName: string) => {
+    const updatePanelBody = {
+      name: panelName,
+    };
+    try {
+      const response = await this.updatePanel(client, panelId, updatePanelBody);
+      return response.objectId;
+    } catch (error) {
+      throw new Error('Rename Panel Error:' + error);
+    }
+  };
+
+  // Clone an existing panel
+  clonePanel = async (client: ILegacyScopedClusterClient, panelId: string, panelName: string) => {
+    const updatePanelBody = {
+      name: panelName,
+    };
+    try {
+      const getPanel = await this.getPanel(client, panelId);
+      const clonePanelBody = {
+        name: panelName,
+        visualizations: getPanel.operationalPanel.visualizations,
+        timeRange: getPanel.operationalPanel.timeRange,
+        queryFilter: getPanel.operationalPanel.queryFilter,
+      };
+      const indexResponse = await this.indexPanel(client, clonePanelBody);
+      const getClonedPanel = await this.getPanel(client, indexResponse.objectId);
+      return {
+        clonePanelId: getClonedPanel.objectId,
+        dateCreated: getClonedPanel.createdTimeMs,
+        dateModified: getClonedPanel.lastUpdatedTimeMs,
+      };
+    } catch (error) {
+      throw new Error('Clone Panel Error:' + error);
+    }
+  };
+
+  // Add filters to an existing panel
+  addPanelFilter = async (
+    client: ILegacyScopedClusterClient,
+    panelId: string,
+    query: string,
+    language: string,
+    to: string,
+    from: string
+  ) => {
+    const updatePanelBody = {
+      timeRange: {
+        to,
+        from,
+      },
+      queryFilter: {
+        query,
+        language,
+      },
+    };
+    try {
+      const response = await this.updatePanel(client, panelId, updatePanelBody);
+      return response.objectId;
+    } catch (error) {
+      throw new Error('Add Panel Filter Error:' + error);
+    }
+  };
+
+  // parses fetched saved visualization
+  parseSavedVisualizations = (visualization: any) => {
+    return {
+      id: visualization.objectId,
+      name: visualization.savedVisualization.name,
+      query: visualization.savedVisualization.query,
+      type: visualization.savedVisualization.type,
+      timeField: visualization.savedVisualization.selected_timestamp.name,
+      selected_date_range: visualization.savedVisualization.selected_date_range,
+      selected_fields: visualization.savedVisualization.selected_fields,
+      user_configs: visualization.savedVisualization.hasOwnProperty('user_configs')
+        ? JSON.parse(visualization.savedVisualization.user_configs)
+        : {},
+      sub_type: visualization.savedVisualization.hasOwnProperty('sub_type')
+        ? visualization.savedVisualization.sub_type
+        : '',
+      units_of_measure: visualization.savedVisualization.hasOwnProperty('units_of_measure')
+        ? visualization.savedVisualization.units_of_measure
+        : '',
+      ...(visualization.savedVisualization.application_id
+        ? { application_id: visualization.savedVisualization.application_id }
+        : {}),
+    };
+  };
+
+  // gets all saved visualizations
+  getAllSavedVisualizations = async (client: ILegacyScopedClusterClient) => {
+    try {
+      const response = await client.callAsCurrentUser('observability.getObject', {
+        objectType: 'savedVisualization',
+      });
+      return response.observabilityObjectList.map((visualization: any) =>
+        this.parseSavedVisualizations(visualization)
+      );
+    } catch (error) {
+      throw new Error('View Saved Visualizations Error:' + error);
+    }
+  };
+
+  // gets list of savedVisualizations by Id
+  getSavedVisualizationById = async (
+    client: ILegacyScopedClusterClient,
+    savedVisualizationId: string
+  ) => {
+    try {
+      const response = await client.callAsCurrentUser('observability.getObjectById', {
+        objectId: savedVisualizationId,
+      });
+      const visualization = response.observabilityObjectList[0];
+      return this.parseSavedVisualizations(visualization);
+    } catch (error) {
+      throw new Error('Fetch Saved Visualizations By Id Error:' + error);
+    }
+  };
+
+  // Get All Visualizations from a Panel
+  getVisualizations = async (client: ILegacyScopedClusterClient, panelId: string) => {
+    try {
+      const response = await client.callAsCurrentUser('observability.getObjectById', {
+        objectId: panelId,
+      });
+      return response.observabilityObjectList[0].operationalPanel.visualizations;
+    } catch (error) {
+      throw new Error('Get Visualizations Error:' + error);
+    }
+  };
+
+  calculatOverlapArea = (bb1: boxType, bb2: boxType) => {
+    const x_left = Math.max(bb1.x1, bb2.x1);
+    const y_top = Math.max(bb1.y1, bb2.y1);
+    const x_right = Math.min(bb1.x2, bb2.x2);
+    const y_bottom = Math.min(bb1.y2, bb2.y2);
+
+    if (x_right < x_left || y_bottom < y_top) return 0;
+    return (x_right - x_left) * (y_bottom - y_top);
+  };
+
+  getTotalOverlapArea = (panelVisualizations: VisualizationType[]) => {
+    const newVizBox = { x1: 0, y1: 0, x2: 6, y2: 4 };
+    const currentVizBoxes = panelVisualizations.map((visualization) => {
+      return {
+        x1: visualization.x,
+        y1: visualization.y,
+        x2: visualization.x + visualization.w,
+        y2: visualization.y + visualization.h,
+      };
+    });
+
+    let isOverlapping = 0;
+    currentVizBoxes.map((viz) => {
+      isOverlapping += this.calculatOverlapArea(viz, newVizBox);
+    });
+    return isOverlapping;
+  };
+
+  // We want to check if the new visualization being added, can be placed at { x: 0, y: 0, w: 6, h: 4 };
+  // To check this we try to calculate overlap between all the current visualizations and new visualization
+  // if there is no overalap (i.e Total Overlap Area is 0), we place the new viz. in default position
+  // else, we add it to the bottom of the panel
+  getNewVizDimensions = (panelVisualizations: VisualizationType[]) => {
+    let maxY: number = 0;
+    let maxYH: number = 0;
+
+    // check if we can place the new visualization at default location
+    if (this.getTotalOverlapArea(panelVisualizations) === 0) {
+      return { x: 0, y: 0, w: 6, h: 4 };
+    }
+
+    // else place the new visualization at the bottom of the panel
+    panelVisualizations.map((panelVisualization: VisualizationType) => {
+      if (panelVisualization.y >= maxY) {
+        maxY = panelVisualization.y;
+        maxYH = panelVisualization.h;
+      }
+    });
+
+    return { x: 0, y: maxY + maxYH, w: 6, h: 4 };
+  };
+
+  // Add Visualization in the  Panel
+  addVisualization = async (
+    client: ILegacyScopedClusterClient,
+    panelId: string,
+    savedVisualizationId: string,
+    oldVisualizationId?: string
+  ) => {
+    try {
+      const allPanelVisualizations = await this.getVisualizations(client, panelId);
+
+      let newDimensions;
+      let visualizationsList = [] as VisualizationType[];
+      if (oldVisualizationId === undefined) {
+        newDimensions = this.getNewVizDimensions(allPanelVisualizations);
+        visualizationsList = allPanelVisualizations;
+      } else {
+        allPanelVisualizations.map((visualization: VisualizationType) => {
+          if (visualization.id !== oldVisualizationId) {
+            visualizationsList.push(visualization);
+          } else {
+            newDimensions = {
+              x: visualization.x,
+              y: visualization.y,
+              w: visualization.w,
+              h: visualization.h,
+            };
+          }
+        });
+      }
+      const newPanelVisualizations = [
+        ...visualizationsList,
+        {
+          id: 'panel_viz_' + uuidv4(),
+          savedVisualizationId,
+          ...newDimensions,
+        },
+      ];
+      const updatePanelResponse = await this.updatePanel(client, panelId, {
+        visualizations: newPanelVisualizations,
+      });
+      return newPanelVisualizations;
+    } catch (error) {
+      throw new Error('Add/Replace Visualization Error:' + error);
+    }
+  };
+
+  // Add Multiple visualizations in a Panel
+  addMultipleVisualizations = async (
+    client: ILegacyScopedClusterClient,
+    panelId: string,
+    savedVisualizationIds: string[]
+  ) => {
+    try {
+      let allPanelVisualizations = await this.getVisualizations(client, panelId);
+
+      let newDimensions;
+      let visualizationsList = [...allPanelVisualizations];
+
+      savedVisualizationIds.map((savedVisualizationId) => {
+        newDimensions = this.getNewVizDimensions(visualizationsList);
+        visualizationsList = [
+          ...visualizationsList,
+          {
+            id: 'panel_viz_' + uuidv4(),
+            savedVisualizationId,
+            ...newDimensions,
+          },
+        ];
+      });
+
+      const updatePanelResponse = await this.updatePanel(client, panelId, {
+        visualizations: visualizationsList,
+      });
+      return visualizationsList;
+    } catch (error) {
+      throw new Error('Add/Replace Visualization Error:' + error);
+    }
+  };
+
+  // Edits all Visualizations in the Panel
+  editVisualization = async (
+    client: ILegacyScopedClusterClient,
+    panelId: string,
+    visualizationParams: Array<{
+      i: string;
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+    }>
+  ) => {
+    try {
+      const allPanelVisualizations = await this.getVisualizations(client, panelId);
+      const filteredPanelVisualizations = [] as VisualizationType[];
+
+      for (let i = 0; i < allPanelVisualizations.length; i++) {
+        for (let j = 0; j < visualizationParams.length; j++) {
+          if (allPanelVisualizations[i].id === visualizationParams[j].i) {
+            filteredPanelVisualizations.push({
+              ...allPanelVisualizations[i],
+              x: visualizationParams[j].x,
+              y: visualizationParams[j].y,
+              w: visualizationParams[j].w,
+              h: visualizationParams[j].h,
+            });
+          }
+        }
+      }
+      const updatePanelResponse = await this.updatePanel(client, panelId, {
+        visualizations: filteredPanelVisualizations,
+      });
+      return filteredPanelVisualizations;
+    } catch (error) {
+      throw new Error('Edit Visualizations Error:' + error);
+    }
+  };
+
+  // Create Sample Panels
+  addSamplePanels = async (client: ILegacyScopedClusterClient, savedVisualizationIds: string[]) => {
+    try {
+      const panelBody = createDemoPanel(savedVisualizationIds);
+      const indexResponse = await this.indexPanel(client, panelBody);
+      const fetchPanel = await this.getPanel(client, indexResponse.objectId);
+      const fetchResponse = {
+        name: fetchPanel.operationalPanel.name,
+        id: fetchPanel.objectId,
+        dateCreated: fetchPanel.createdTimeMs,
+        dateModified: fetchPanel.lastUpdatedTimeMs,
+      };
+      return [fetchResponse];
+    } catch (error) {
+      throw new Error('Create Panel Error:' + error);
+    }
+  };
+}
diff --git a/server/adaptors/notebooks/default_backend.ts b/server/adaptors/notebooks/default_backend.ts
new file mode 100644
index 0000000000..66fc0bb9b0
--- /dev/null
+++ b/server/adaptors/notebooks/default_backend.ts
@@ -0,0 +1,609 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import now from 'performance-now';
+import { v4 as uuid } from 'uuid';
+import { ILegacyScopedClusterClient } from '../../../../../src/core/server';
+import { optionsType } from '../../../common/types/notebooks';
+import {
+  DefaultNotebooks,
+  DefaultOutput,
+  DefaultParagraph,
+} from '../../common/helpers/notebooks/default_notebook_schema';
+import { formatNotRecognized, inputIsQuery } from '../../common/helpers/notebooks/query_helpers';
+import { getSampleNotebooks } from '../../common/helpers/notebooks/sample_notebooks';
+import { NotebookAdaptor } from './notebook_adaptor';
+
+export class DefaultBackend implements NotebookAdaptor {
+  backend = 'Default Backend';
+
+  // Creates a new notebooks with sample markdown text
+  createNewNotebook = (newNotebookName: string) => {
+    const noteObject: DefaultNotebooks = {
+      dateCreated: new Date().toISOString(),
+      name: newNotebookName,
+      dateModified: new Date().toISOString(),
+      backend: 'Default',
+      paragraphs: [],
+    };
+
+    return {
+      object: noteObject,
+    };
+  };
+
+  // indexes a notebook with body provided
+  indexNote = async function (
+    client: ILegacyScopedClusterClient,
+    body: any
+  ): Promise<{ objectId: string }> {
+    try {
+      const response = await client.callAsCurrentUser('observability.createObject', {
+        body: {
+          notebook: body,
+        },
+      });
+      return response;
+    } catch (error) {
+      throw new Error('Index Doc Error:' + error);
+    }
+  };
+
+  // updates a notebook with updateBody provided as parameter
+  updateNote = async function (
+    client: ILegacyScopedClusterClient,
+    noteId: string,
+    updateBody: Partial<DefaultNotebooks>
+  ) {
+    try {
+      const response = await client.callAsCurrentUser('observability.updateObjectById', {
+        objectId: noteId,
+        body: {
+          notebook: updateBody,
+        },
+      });
+      return response;
+    } catch (error) {
+      throw new Error('Update Doc Error:' + error);
+    }
+  };
+
+  // fetched a notebook by Id
+  getNote = async function (client: ILegacyScopedClusterClient, noteId: string) {
+    try {
+      const response = await client.callAsCurrentUser('observability.getObjectById', {
+        objectId: noteId,
+      });
+      if (response.observabilityObjectList.length === 0) {
+        throw 'notebook id not found';
+      }
+      return response.observabilityObjectList[0];
+    } catch (error) {
+      throw new Error('Get Doc Error:' + error);
+    }
+  };
+
+  // gets first `FETCH_SIZE` notebooks available
+  viewNotes = async function (client: ILegacyScopedClusterClient, _wreckOptions: optionsType) {
+    try {
+      const response = await client.callAsCurrentUser('observability.getObject', {
+        objectType: 'notebook',
+      });
+      return response.observabilityObjectList.map((notebook) => ({
+        path: notebook.notebook.name,
+        id: notebook.objectId,
+        dateCreated: notebook.notebook.dateCreated,
+        dateModified: notebook.notebook.dateModified,
+      }));
+    } catch (error) {
+      if (error.body.error.type === 'index_not_found_exception') {
+        return [];
+      } else throw new Error('View Notebooks Error:' + error);
+    }
+  };
+
+  /* Fetches a notebook by id
+   * Param: noteId -> Id of notebook to be fetched
+   */
+  fetchNote = async function (
+    client: ILegacyScopedClusterClient,
+    noteId: string,
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const noteObject = await this.getNote(client, noteId);
+      return {
+        path: noteObject.notebook.name,
+        dateCreated: noteObject.notebook.dateCreated,
+        dateModified: noteObject.notebook.dateModified,
+        paragraphs: noteObject.notebook.paragraphs,
+      };
+    } catch (error) {
+      throw new Error('Fetching Notebook Error:' + error);
+    }
+  };
+
+  /* Adds a notebook to storage
+   * Param: name -> name of new notebook
+   */
+  addNote = async function (
+    client: ILegacyScopedClusterClient,
+    params: { name: string },
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const newNotebook = this.createNewNotebook(params.name);
+      const opensearchClientResponse = await this.indexNote(client, newNotebook.object);
+      return {
+        status: 'OK',
+        message: opensearchClientResponse,
+        body: opensearchClientResponse.objectId,
+      };
+    } catch (error) {
+      throw new Error('Creating New Notebook Error:' + error);
+    }
+  };
+
+  /* Adds sample notebooks to storage
+   * Param: name -> name of new notebook
+   */
+  addSampleNotes = async function (
+    client: ILegacyScopedClusterClient,
+    visIds: string[],
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const notebooks = getSampleNotebooks(visIds);
+      const newNotebooks: any[] = [];
+      for (let i = 0; i < notebooks.length; i++) {
+        const notebook = notebooks[i];
+        await this.indexNote(client, notebook.notebook).then((response) => {
+          newNotebooks.push({
+            id: response.objectId,
+            name: notebook.notebook.name,
+            dateModified: notebook.dateModified,
+            dateCreated: notebook.dateCreated,
+          });
+        });
+      }
+      return { status: 'OK', message: '', body: newNotebooks };
+    } catch (error) {
+      throw new Error('Creating New Notebook Error:' + error);
+    }
+  };
+
+  /* Renames a notebook
+   * Params: name -> new name for the notebook to be renamed
+   *         noteId -> Id of notebook to be fetched
+   */
+  renameNote = async function (
+    client: ILegacyScopedClusterClient,
+    params: { name: string; noteId: string },
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const updateNotebook = {
+        name: params.name,
+        dateModified: new Date().toISOString(),
+      };
+      const opensearchClientResponse = await this.updateNote(client, params.noteId, updateNotebook);
+      return { status: 'OK', message: opensearchClientResponse };
+    } catch (error) {
+      throw new Error('Renaming Notebook Error:' + error);
+    }
+  };
+
+  /* Clone a notebook
+   * Params: name -> new name for the cloned notebook
+   *         noteId -> Id for the notebook to be cloned
+   */
+  cloneNote = async function (
+    client: ILegacyScopedClusterClient,
+    params: { name: string; noteId: string },
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const noteObject = await this.getNote(client, params.noteId);
+      const newNotebook = this.createNewNotebook(params.name);
+      const cloneNotebook = { ...newNotebook.object };
+      cloneNotebook.paragraphs = noteObject.notebook.paragraphs;
+      const opensearchClientIndexResponse = await this.indexNote(client, cloneNotebook);
+      return {
+        status: 'OK',
+        body: { ...cloneNotebook, id: opensearchClientIndexResponse.objectId },
+      };
+    } catch (error) {
+      throw new Error('Cloning Notebook Error:' + error);
+    }
+  };
+
+  /* Delete a notebook
+   * Param: noteId -> Id for the notebook to be deleted
+   */
+  deleteNote = async function (
+    client: ILegacyScopedClusterClient,
+    noteList: string,
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const response = await client.callAsCurrentUser('observability.deleteObjectByIdList', {
+        objectIdList: noteList,
+      });
+      return { status: 'OK', message: response };
+    } catch (error) {
+      throw new Error('Deleting Notebook Error:' + error);
+    }
+  };
+
+  /* Export a notebook
+   * Param: noteId -> Id for the notebook to be exported
+   */
+  exportNote = async function (
+    client: ILegacyScopedClusterClient,
+    noteId: string,
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const opensearchClientGetResponse = await this.getNote(client, noteId);
+      return { status: 'OK', body: opensearchClientGetResponse };
+    } catch (error) {
+      throw new Error('Export Notebook Error:' + error);
+    }
+  };
+
+  /* Import a notebook
+   * Params: noteObj -> note Object to be imported
+   */
+  importNote = async function (
+    client: ILegacyScopedClusterClient,
+    noteObj: any,
+    _wreckOptions: optionsType
+  ) {
+    try {
+      let newNoteObject = { ...noteObj };
+      newNoteObject.id = 'note_' + uuid();
+      newNoteObject.dateCreated = new Date().toISOString();
+      newNoteObject.dateModified = new Date().toISOString();
+      const opensearchClientIndexResponse = await this.indexNote(client, newNoteObject);
+      return {
+        status: 'OK',
+        message: opensearchClientIndexResponse,
+        body: opensearchClientIndexResponse.objectId,
+      };
+    } catch (error) {
+      throw new Error('Import Notebook Error:' + error);
+    }
+  };
+
+  /* Updates input for required paragraphs
+   * Params: paragraphs -> list of paragraphs
+   *         paragraphId -> Id of paragraph to be updated
+   *         paragraphInput -> Input to be added
+   */
+  updateParagraph = function (
+    paragraphs: Array<DefaultParagraph>,
+    paragraphId: string,
+    paragraphInput: string,
+    paragraphType?: string
+  ) {
+    try {
+      const updatedParagraphs: DefaultParagraph[] = [];
+      paragraphs.map((paragraph: DefaultParagraph) => {
+        const updatedParagraph = { ...paragraph };
+        if (paragraph.id === paragraphId) {
+          updatedParagraph.dateModified = new Date().toISOString();
+          updatedParagraph.input.inputText = paragraphInput;
+          if (paragraphType.length > 0) {
+            updatedParagraph.input.inputType = paragraphType;
+          }
+        }
+        updatedParagraphs.push(updatedParagraph);
+      });
+      return updatedParagraphs;
+    } catch (error) {
+      throw new Error('Update Paragraph Error:' + error);
+    }
+  };
+
+  // Creates new paragraph with the given input and input type
+  createParagraph = function (paragraphInput: string, inputType: string) {
+    try {
+      let paragraphType = 'MARKDOWN';
+      if (inputType === 'VISUALIZATION') {
+        paragraphType = 'VISUALIZATION';
+      }
+      if (inputType === 'OBSERVABILITY_VISUALIZATION') {
+        paragraphType = 'OBSERVABILITY_VISUALIZATION';
+      }
+      if (paragraphInput.substring(0, 3) === '%sql' || paragraphInput.substring(0, 3) === '%ppl') {
+        paragraphType = 'QUERY';
+      }
+      const inputObject = {
+        inputType: paragraphType,
+        inputText: paragraphInput,
+      };
+      const outputObjects: Array<DefaultOutput> = [
+        {
+          outputType: paragraphType,
+          result: '',
+          execution_time: '0s',
+        },
+      ];
+      const newParagraph = {
+        id: 'paragraph_' + uuid(),
+        dateCreated: new Date().toISOString(),
+        dateModified: new Date().toISOString(),
+        input: inputObject,
+        output: outputObjects,
+      };
+
+      return newParagraph;
+    } catch (error) {
+      throw new Error('Create Paragraph Error:' + error);
+    }
+  };
+
+  /* Runs a paragraph
+   * Currently only runs markdown by copying input.inputText to result
+   * UI renders Markdown
+   */
+  runParagraph = async function (
+    paragraphs: Array<DefaultParagraph>,
+    paragraphId: string,
+    client: ILegacyScopedClusterClient
+  ) {
+    try {
+      const updatedParagraphs = [];
+      let index = 0;
+      for (index = 0; index < paragraphs.length; ++index) {
+        const startTime = now();
+        const updatedParagraph = { ...paragraphs[index] };
+        if (paragraphs[index].id === paragraphId) {
+          updatedParagraph.dateModified = new Date().toISOString();
+          if (inputIsQuery(paragraphs[index].input.inputText)) {
+            updatedParagraph.output = [
+              {
+                outputType: 'QUERY',
+                result: paragraphs[index].input.inputText.substring(
+                  4,
+                  paragraphs[index].input.inputText.length
+                ),
+                execution_time: `${(now() - startTime).toFixed(3)} ms`,
+              },
+            ];
+          } else if (paragraphs[index].input.inputText.substring(0, 3) === '%md') {
+            updatedParagraph.output = [
+              {
+                outputType: 'MARKDOWN',
+                result: paragraphs[index].input.inputText.substring(
+                  4,
+                  paragraphs[index].input.inputText.length
+                ),
+                execution_time: `${(now() - startTime).toFixed(3)} ms`,
+              },
+            ];
+          } else if (paragraphs[index].input.inputType === 'VISUALIZATION') {
+            updatedParagraph.dateModified = new Date().toISOString();
+            updatedParagraph.output = [
+              {
+                outputType: 'VISUALIZATION',
+                result: '',
+                execution_time: `${(now() - startTime).toFixed(3)} ms`,
+              },
+            ];
+          } else if (paragraphs[index].input.inputType === 'OBSERVABILITY_VISUALIZATION') {
+            updatedParagraph.dateModified = new Date().toISOString();
+            updatedParagraph.output = [
+              {
+                outputType: 'OBSERVABILITY_VISUALIZATION',
+                result: '',
+                execution_time: `${(now() - startTime).toFixed(3)} ms`,
+              },
+            ];
+          } else if (formatNotRecognized(paragraphs[index].input.inputText)) {
+            updatedParagraph.output = [
+              {
+                outputType: 'MARKDOWN',
+                result: 'Please select an input type (%sql, %ppl, or %md)',
+                execution_time: `${(now() - startTime).toFixed(3)} ms`,
+              },
+            ];
+          }
+        }
+        updatedParagraphs.push(updatedParagraph);
+      }
+      return updatedParagraphs;
+    } catch (error) {
+      throw new Error('Running Paragraph Error:' + error);
+    }
+  };
+
+  /* --> Updates a Paragraph with input content
+   * --> Runs it
+   * --> Updates the notebook in index
+   * --> Fetches the updated Paragraph (with new input content and output result)
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be updated
+   *         paragraphInput -> paragraph input code
+   */
+  updateRunFetchParagraph = async function (
+    client: ILegacyScopedClusterClient,
+    request: any,
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const scopedClient = client.asScoped(request);
+      const params = request.body;
+      const opensearchClientGetResponse = await this.getNote(scopedClient, params.noteId);
+      const updatedInputParagraphs = this.updateParagraph(
+        opensearchClientGetResponse.notebook.paragraphs,
+        params.paragraphId,
+        params.paragraphInput,
+        params.paragraphType
+      );
+      const updatedOutputParagraphs = await this.runParagraph(
+        updatedInputParagraphs,
+        params.paragraphId,
+        client
+      );
+      const updateNotebook = {
+        paragraphs: updatedOutputParagraphs,
+        dateModified: new Date().toISOString(),
+      };
+      const opensearchClientResponse = await this.updateNote(
+        scopedClient,
+        params.noteId,
+        updateNotebook
+      );
+      let resultParagraph = {};
+      let index = 0;
+
+      for (index = 0; index < updatedOutputParagraphs.length; ++index) {
+        if (params.paragraphId === updatedOutputParagraphs[index].id) {
+          resultParagraph = updatedOutputParagraphs[index];
+        }
+      }
+      return resultParagraph;
+    } catch (error) {
+      throw new Error('Update/Run Paragraph Error:' + error);
+    }
+  };
+
+  /* --> Updates a Paragraph with input content
+   * --> Updates the notebook in index
+   * --> Fetches the updated Paragraph (with new input content)
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be updated
+   *         paragraphInput -> paragraph input code
+   */
+  updateFetchParagraph = async function (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string; paragraphId: string; paragraphInput: string },
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const opensearchClientGetResponse = await this.getNote(client, params.noteId);
+      const updatedInputParagraphs = this.updateParagraph(
+        opensearchClientGetResponse.notebook.paragraphs,
+        params.paragraphId,
+        params.paragraphInput
+      );
+
+      const updateNotebook = {
+        paragraphs: updatedInputParagraphs,
+        dateModified: new Date().toISOString(),
+      };
+      const opensearchClientResponse = await this.updateNote(client, params.noteId, updateNotebook);
+
+      let resultParagraph = {};
+      updatedInputParagraphs.map((paragraph: DefaultParagraph) => {
+        if (params.paragraphId === paragraph.id) {
+          resultParagraph = paragraph;
+        }
+      });
+      return resultParagraph;
+    } catch (error) {
+      throw new Error('Save Paragraph Error:' + error);
+    }
+  };
+
+  /* --> Fetches the Paragraph
+   * --> Adds a Paragraph with input content
+   * --> Updates the notebook in index
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be fetched
+   */
+  addFetchNewParagraph = async function (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string; paragraphIndex: number; paragraphInput: string; inputType: string },
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const opensearchClientGetResponse = await this.getNote(client, params.noteId);
+      const paragraphs = opensearchClientGetResponse.notebook.paragraphs;
+      const newParagraph = this.createParagraph(params.paragraphInput, params.inputType);
+      paragraphs.splice(params.paragraphIndex, 0, newParagraph);
+      const updateNotebook = {
+        paragraphs: paragraphs,
+        dateModified: new Date().toISOString(),
+      };
+      const opensearchClientResponse = await this.updateNote(client, params.noteId, updateNotebook);
+
+      return newParagraph;
+    } catch (error) {
+      throw new Error('add/Fetch Paragraph Error:' + error);
+    }
+  };
+
+  /* --> Deletes a Paragraph with id
+   * --> Fetches the all other Paragraphs as a list
+   * --> Updates the notebook in index
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be deleted
+   */
+  deleteFetchParagraphs = async function (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string; paragraphId: string | undefined },
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const opensearchClientGetResponse = await this.getNote(client, params.noteId);
+      const updatedparagraphs: DefaultParagraph[] = [];
+      if (params.paragraphId !== undefined) {
+        opensearchClientGetResponse.notebook.paragraphs.map(
+          (paragraph: DefaultParagraph, index: number) => {
+            if (paragraph.id !== params.paragraphId) {
+              updatedparagraphs.push(paragraph);
+            }
+          }
+        );
+      }
+
+      const updateNotebook = {
+        paragraphs: updatedparagraphs,
+        dateModified: new Date().toISOString(),
+      };
+      const opensearchClientResponse = await this.updateNote(client, params.noteId, updateNotebook);
+
+      return { paragraphs: updatedparagraphs };
+    } catch (error) {
+      console.log('error', error);
+      throw new Error('Delete Paragraph Error:' + error);
+    }
+  };
+
+  /* --> Clears output for all the paragraphs
+   * --> Fetches the all Paragraphs as a list (with cleared outputs)
+   * --> Updates the notebook in index
+   * Param: noteId -> Id of notebook to be cleared
+   */
+  clearAllFetchParagraphs = async function (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string },
+    _wreckOptions: optionsType
+  ) {
+    try {
+      const opensearchClientGetResponse = await this.getNote(client, params.noteId);
+      let updatedparagraphs: DefaultParagraph[] = [];
+      opensearchClientGetResponse.notebook.paragraphs.map(
+        (paragraph: DefaultParagraph, index: number) => {
+          let updatedParagraph = { ...paragraph };
+          updatedParagraph.output = [];
+          updatedparagraphs.push(updatedParagraph);
+        }
+      );
+
+      const updateNotebook = {
+        paragraphs: updatedparagraphs,
+        dateModified: new Date().toISOString(),
+      };
+      const opensearchClientResponse = await this.updateNote(client, params.noteId, updateNotebook);
+
+      return { paragraphs: updatedparagraphs };
+    } catch (error) {
+      throw new Error('Clear Paragraph Error:' + error);
+    }
+  };
+}
diff --git a/server/adaptors/notebooks/index.ts b/server/adaptors/notebooks/index.ts
new file mode 100644
index 0000000000..ae35674ed9
--- /dev/null
+++ b/server/adaptors/notebooks/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ZeppelinBackend } from './zeppelin_backend';
+import { DefaultBackend } from './default_backend';
+import { NOTEBOOKS_SELECTED_BACKEND } from '../../../common/constants/notebooks';
+
+// Selects backend based on config
+let BACKEND = new DefaultBackend();
+
+if (NOTEBOOKS_SELECTED_BACKEND == 'ZEPPELIN') {
+  BACKEND = new ZeppelinBackend();
+}
+
+export default BACKEND;
diff --git a/server/adaptors/notebooks/notebook_adaptor.ts b/server/adaptors/notebooks/notebook_adaptor.ts
new file mode 100644
index 0000000000..0ede5ffb22
--- /dev/null
+++ b/server/adaptors/notebooks/notebook_adaptor.ts
@@ -0,0 +1,136 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ILegacyScopedClusterClient } from '../../../../../src/core/server';
+import { optionsType } from '../../../common/types/notebooks';
+
+export interface NotebookAdaptor {
+  backend: string;
+
+  // Gets all the notebooks available
+  viewNotes: (client: ILegacyScopedClusterClient, wreckOptions: optionsType) => Promise<any[]>;
+
+  /* Fetches a notebook by id
+   * Param: noteId -> Id of notebook to be fetched
+   */
+  fetchNote: (
+    client: ILegacyScopedClusterClient,
+    noteId: string,
+    wreckOptions: optionsType
+  ) => Promise<any>;
+
+  /* Adds a notebook to storage
+   * Param: name -> name of new notebook
+   */
+  addNote: (
+    client: ILegacyScopedClusterClient,
+    params: { name: string },
+    wreckOptions: optionsType
+  ) => Promise<any>;
+
+  /* Renames a notebook
+   * Params: name -> new name for the notebook to be renamed
+   *         noteId -> Id of notebook to be fetched
+   */
+  renameNote: (
+    client: ILegacyScopedClusterClient,
+    params: { name: string; noteId: string },
+    wreckOptions: optionsType
+  ) => Promise<any>;
+
+  /* Clone a notebook
+   * Params: name -> new name for the cloned notebook
+   *         noteId -> Id for the notebook to be cloned
+   */
+  cloneNote: (
+    client: ILegacyScopedClusterClient,
+    params: { name: string; noteId: string },
+    wreckOptions: optionsType
+  ) => Promise<any>;
+
+  /* Delete a notebook
+   * Param: noteId -> Id for the notebook to be deleted
+   */
+  deleteNote: (
+    client: ILegacyScopedClusterClient,
+    noteId: string,
+    wreckOptions: optionsType
+  ) => Promise<any>;
+
+  /* Export a notebook
+   * Param: noteId -> Id for the notebook to be exported
+   */
+  exportNote: (
+    client: ILegacyScopedClusterClient,
+    noteId: string,
+    wreckOptions: optionsType
+  ) => Promise<any>;
+
+  /* Import a notebook
+   * Params: noteObj -> note Object to be imported
+   */
+  importNote: (
+    client: ILegacyScopedClusterClient,
+    noteObj: any,
+    wreckOptions: optionsType
+  ) => Promise<any>;
+
+  /* --> Updates a Paragraph with input content
+   * --> Runs it
+   * --> Fetches the updated Paragraph (with new input content and output result)
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be updated
+   *         paragraphInput -> paragraph input code
+   */
+  updateRunFetchParagraph: (
+    client: ILegacyScopedClusterClient,
+    request: any,
+    wreckOptions: optionsType
+  ) => Promise<any>;
+
+  /* --> Updates a Paragraph with input content
+   * --> Fetches the updated Paragraph (with new input content)
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be updated
+   *         paragraphInput -> paragraph input code
+   */
+  updateFetchParagraph: (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string; paragraphId: string; paragraphInput: string },
+    wreckOptions: optionsType
+  ) => Promise<any>;
+
+  /* --> Adds a Paragraph with input content
+   * --> Fetches the Paragraph
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be fetched
+   */
+  addFetchNewParagraph: (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string; paragraphIndex: number; paragraphInput: string; inputType: string },
+    wreckOptions: optionsType
+  ) => Promise<any>;
+
+  /* --> Deletes a Paragraph with id
+   * --> Fetches the all other Paragraphs as a list
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be deleted
+   */
+  deleteFetchParagraphs: (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string; paragraphId: string },
+    wreckOptions: optionsType
+  ) => Promise<{ paragraphs: any }>;
+
+  /* --> Clears output for all the paragraphs
+   * --> Fetches the all Paragraphs as a list (with cleared outputs)
+   * Param: noteId -> Id of notebook to be cleared
+   */
+  clearAllFetchParagraphs: (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string },
+    wreckOptions: optionsType
+  ) => Promise<{ paragraphs: any }>;
+}
diff --git a/server/adaptors/notebooks/zeppelin_backend.ts b/server/adaptors/notebooks/zeppelin_backend.ts
new file mode 100644
index 0000000000..1c2bb1b88b
--- /dev/null
+++ b/server/adaptors/notebooks/zeppelin_backend.ts
@@ -0,0 +1,411 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ILegacyScopedClusterClient } from '../../../../../src/core/server';
+import { optionsType } from '../../../common/types/notebooks';
+import { requestor } from '../../common/helpers/notebooks/wreck_requests';
+import { NotebookAdaptor } from './notebook_adaptor';
+
+export class ZeppelinBackend implements NotebookAdaptor {
+  backend = 'Zeppelin Backend';
+
+  // Gets all the notebooks available from Zeppelin Server
+  // ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook
+  viewNotes = async function (client: ILegacyScopedClusterClient, wreckOptions: optionsType) {
+    try {
+      let output = [];
+      const body = await requestor('GET', 'api/notebook/', wreckOptions);
+      output = JSON.parse(body.toString()).body;
+      return output;
+    } catch (error) {
+      throw new Error('View Notebooks Error:' + error);
+    }
+  };
+
+  /* Fetches a notebook by id from Zeppelin Server
+   * Param: noteId -> Id of notebook to be fetched
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook/[noteId]
+   */
+  fetchNote = async function (
+    client: ILegacyScopedClusterClient,
+    noteId: string,
+    wreckOptions: optionsType
+  ) {
+    try {
+      const body = await requestor('GET', 'api/notebook/' + noteId, wreckOptions);
+      return JSON.parse(body.toString()).body.paragraphs;
+    } catch (error) {
+      throw new Error('Fetching Notebook Error:' + error);
+    }
+  };
+
+  /* Add a notebook to the Zeppelin Server
+   * Param: name -> name of new notebook
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook
+   */
+  addNote = async function (
+    client: ILegacyScopedClusterClient,
+    params: { name: string },
+    wreckOptions: optionsType
+  ) {
+    wreckOptions.payload = params;
+    try {
+      const body = await requestor('POST', 'api/notebook/', wreckOptions);
+      return JSON.parse(body.toString());
+    } catch (error) {
+      throw new Error('Creating New Notebook Error:' + error);
+    }
+  };
+
+  /* Rename a notebook in Zeppelin Server
+   * Params: name -> new name for the notebook to be renamed
+   *         noteId -> Id of notebook to be fetched
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook/[noteId]/rename
+   */
+  renameNote = async function (
+    client: ILegacyScopedClusterClient,
+    params: { name: string; noteId: string },
+    wreckOptions: optionsType
+  ) {
+    wreckOptions.payload = { name: params.name };
+    try {
+      const body = await requestor(
+        'PUT',
+        'api/notebook/' + params.noteId + '/rename/',
+        wreckOptions
+      );
+      return JSON.parse(body.toString());
+    } catch (error) {
+      throw new Error('Renaming Notebook Error:' + error);
+    }
+  };
+
+  /* Clone a notebook in Zeppelin Server
+   * Params: name -> new name for the cloned notebook
+   *         noteId -> Id for the notebook to be cloned
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook/[noteId]
+   */
+  cloneNote = async function (
+    client: ILegacyScopedClusterClient,
+    params: { name: string; noteId: string },
+    wreckOptions: optionsType
+  ) {
+    wreckOptions.payload = { name: params.name };
+    try {
+      const body = await requestor('POST', 'api/notebook/' + params.noteId, wreckOptions);
+      return JSON.parse(body.toString());
+    } catch (error) {
+      throw new Error('Cloning Notebook Error:' + error);
+    }
+  };
+
+  /* Delete a notebook in Zeppelin Server
+   * Param: noteId -> Id for the notebook to be deleted
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook
+   */
+  deleteNote = async function (
+    client: ILegacyScopedClusterClient,
+    noteId: string,
+    wreckOptions: optionsType
+  ) {
+    try {
+      const body = await requestor('DELETE', 'api/notebook/' + noteId, wreckOptions);
+      return JSON.parse(body.toString());
+    } catch (error) {
+      throw new Error('Deleting Notebook Error:' + error);
+    }
+  };
+
+  /* Export a notebook from Zeppelin Server
+   * Param: noteId -> Id for the notebook to be exported
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook/export/{noteid}
+   */
+  exportNote = async function (
+    client: ILegacyScopedClusterClient,
+    noteId: string,
+    wreckOptions: optionsType
+  ) {
+    try {
+      const body = await requestor('GET', 'api/notebook/export/' + noteId, wreckOptions);
+      return JSON.parse(body.toString());
+    } catch (error) {
+      throw new Error('Export Notebook Error:' + error);
+    }
+  };
+
+  /* Import a notebook in Zeppelin Server
+   * Params: noteObj -> note Object to be imported
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook/import
+   */
+  importNote = async function (
+    client: ILegacyScopedClusterClient,
+    noteObj: any,
+    wreckOptions: optionsType
+  ) {
+    wreckOptions.payload = noteObj;
+    try {
+      const body = await requestor('POST', 'api/notebook/import', wreckOptions);
+      const respBody = JSON.parse(body.toString());
+      return respBody;
+    } catch (error) {
+      throw new Error('Import Notebook Error:' + error);
+    }
+  };
+
+  /* Add a paragraph in notebook
+   * Params: noteId -> Id for the notebook
+   *         paragraphIndex -> index(position) to add a new paragraph
+   *         paragraphInput -> paragraph input code
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook/[noteId]/paragraph
+   */
+  addParagraph = async function (
+    wreckOptions: optionsType,
+    params: { paragraphIndex: number; noteId: string; paragraphInput: string; inputType: string }
+  ) {
+    const visualizationPrefix = '%sh #vizobject:';
+    const observabilityVisualizationPrefix = '%sh #observabilityviz:';
+    let paragraphText = params.paragraphInput;
+
+    if (
+      params.inputType === 'VISUALIZATION' &&
+      params.paragraphInput.substring(0, 15) !== visualizationPrefix
+    ) {
+      paragraphText = visualizationPrefix + paragraphText;
+    }
+
+    if (
+      params.inputType === 'OBSERVABILITY_VISUALIZATION' &&
+      params.paragraphInput.substring(0, 22) !== observabilityVisualizationPrefix
+    ) {
+      paragraphText = visualizationPrefix + paragraphText;
+    }
+
+    if (params.paragraphInput === '') {
+      paragraphText = '%md\n';
+    }
+
+    wreckOptions.payload = {
+      title: params.inputType,
+      text: paragraphText,
+      index: params.paragraphIndex,
+    };
+
+    try {
+      const body = await requestor(
+        'POST',
+        'api/notebook/' + params.noteId + '/paragraph',
+        wreckOptions
+      );
+      const respBody = JSON.parse(body.toString());
+      return respBody;
+    } catch (error) {
+      throw new Error('Adding Paragraph Error:' + error);
+    }
+  };
+
+  /* Update a Paragraph in notebook
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be updated
+   *         paragraphInput -> paragraph input code
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook/[noteId]/paragraph/[paragraphId]
+   */
+  updateParagraph = async function (
+    wreckOptions: optionsType,
+    params: { noteId: string; paragraphId: string; paragraphInput: string; paragraphType?: string }
+  ) {
+    wreckOptions.payload = {
+      text: params.paragraphInput,
+    };
+    if (params.paragraphType !== undefined) wreckOptions.payload.title = params.paragraphType;
+    try {
+      const body = await requestor(
+        'PUT',
+        'api/notebook/' + params.noteId + '/paragraph/' + params.paragraphId,
+        wreckOptions
+      );
+      return JSON.parse(body.toString());
+    } catch (error) {
+      throw new Error('Updating Paragraph Error:' + error);
+    }
+  };
+
+  /* Run a Paragraph in notebook
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be run
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook/run/[noteId]/[paragraphId]
+   */
+  runPara = async function (
+    wreckOptions: optionsType,
+    params: { noteId: string; paragraphId: string }
+  ) {
+    wreckOptions.payload = {};
+    try {
+      const body = await requestor(
+        'POST',
+        'api/notebook/run/' + params.noteId + '/' + params.paragraphId,
+        wreckOptions
+      );
+      return JSON.parse(body.toString()).status;
+    } catch (error) {
+      throw new Error('Running Paragraph Error:' + error);
+    }
+  };
+
+  /* Fetch a Paragraph from notebook
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be fetched
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook/[noteId]/paragraph/[paragraphId]
+   */
+  fetchParagraph = async function (
+    wreckOptions: optionsType,
+    params: { noteId: string; paragraphId: string }
+  ) {
+    try {
+      const body = await requestor(
+        'GET',
+        'api/notebook/' + params.noteId + '/paragraph/' + params.paragraphId,
+        wreckOptions
+      );
+      return JSON.parse(body.toString()).body;
+    } catch (error) {
+      throw new Error('Fetching Paragraph Error:' + error);
+    }
+  };
+
+  /* Delete a Paragraph in notebook
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be deleted
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook/[noteId]/paragraph/[paragraphId]
+   */
+  deleteParagraph = async function (
+    wreckOptions: optionsType,
+    params: { noteId: string; paragraphId: string }
+  ) {
+    wreckOptions.payload = {};
+    try {
+      const body = await requestor(
+        'DELETE',
+        'api/notebook/' + params.noteId + '/paragraph/' + params.paragraphId,
+        wreckOptions
+      );
+      return JSON.parse(body.toString()).status;
+    } catch (error) {
+      throw new Error('Deleting Paragraph Error:' + error);
+    }
+  };
+
+  /* Clear all the paragraphs in the notebook
+   * Param: noteId -> Id of notebook to be cleared
+   * ZS Endpoint => http://[zeppelin-server]:[zeppelin-port]/api/notebook/[noteId]/clear
+   */
+  clearAllParagraphs = async function (wreckOptions: optionsType, noteid: string) {
+    try {
+      const body = await requestor('PUT', 'api/notebook/' + noteid + '/clear', wreckOptions);
+      return JSON.parse(body.toString()).status;
+    } catch (error) {
+      throw new Error('Clearing Paragraph Error:' + error);
+    }
+  };
+
+  /* --> Updates a Paragraph with input content
+   * --> Runs it
+   * --> Fetches the updated Paragraph (with new input content and output result)
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be updated
+   *         paragraphInput -> paragraph input code
+   */
+  updateRunFetchParagraph = async function (
+    client: ILegacyScopedClusterClient,
+    request: any,
+    wreckOptions: optionsType
+  ) {
+    const params = request.params;
+    try {
+      const updateInfo = await this.updateParagraph(wreckOptions, params);
+      const runInfo = await this.runPara(wreckOptions, params);
+      const getInfo = await this.fetchParagraph(wreckOptions, params);
+      return getInfo;
+    } catch (error) {
+      throw new Error('Update/Run Paragraph Error:' + error);
+    }
+  };
+
+  /* --> Updates a Paragraph with input content
+   * --> Fetches the updated Paragraph (with new input content)
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be updated
+   *         paragraphInput -> paragraph input code
+   */
+  updateFetchParagraph = async function (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string; paragraphId: string; paragraphInput: string },
+    wreckOptions: optionsType
+  ) {
+    try {
+      const updateInfo = await this.updateParagraph(wreckOptions, params);
+      const getInfo = await this.fetchParagraph(wreckOptions, params);
+      return getInfo;
+    } catch (error) {
+      throw new Error('Save Paragraph Error:' + error);
+    }
+  };
+
+  /* --> Adds a Paragraph with input content
+   * --> Fetches the Paragraph
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be fetched
+   */
+  addFetchNewParagraph = async function (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string; paragraphIndex: number; paragraphInput: string; inputType: string },
+    wreckOptions: optionsType
+  ) {
+    try {
+      const respBody = await this.addParagraph(wreckOptions, params);
+      const payload = { ...params, paragraphId: respBody.body };
+      const getinfo = await this.fetchParagraph(wreckOptions, payload);
+      return getinfo;
+    } catch (error) {
+      throw new Error('add/Fetch Paragraph Error:' + error);
+    }
+  };
+
+  /* --> Deletes a Paragraph with id
+   * --> Fetches the all other Paragraphs as a list
+   * Params: noteId -> Id of the notebook
+   *         paragraphId -> Id of the paragraph to be deleted
+   */
+  deleteFetchParagraphs = async function (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string; paragraphId: string },
+    wreckOptions: optionsType
+  ) {
+    try {
+      const delinfo = await this.deleteParagraph(wreckOptions, params);
+      const notebookinfo = await this.fetchNote(client, params.noteId, wreckOptions);
+      return { paragraphs: notebookinfo };
+    } catch (error) {
+      throw new Error('Delete Paragraph Error:' + error);
+    }
+  };
+
+  /* --> Clears output for all the paragraphs
+   * --> Fetches the all Paragraphs as a list (with cleared outputs)
+   * Param: noteId -> Id of notebook to be cleared
+   */
+  clearAllFetchParagraphs = async function (
+    client: ILegacyScopedClusterClient,
+    params: { noteId: string },
+    wreckOptions: optionsType
+  ) {
+    try {
+      const clearinfo = await this.clearAllParagraphs(wreckOptions, params.noteId);
+      const notebookinfo = await this.fetchNote(client, params.noteId, wreckOptions);
+      return { paragraphs: notebookinfo };
+    } catch (error) {
+      throw new Error('Clear Paragraph Error:' + error);
+    }
+  };
+}
diff --git a/server/adaptors/opensearch_observability_plugin.ts b/server/adaptors/opensearch_observability_plugin.ts
new file mode 100644
index 0000000000..2a99187c65
--- /dev/null
+++ b/server/adaptors/opensearch_observability_plugin.ts
@@ -0,0 +1,123 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { OPENSEARCH_PANELS_API } from "../../common/constants/shared";
+
+export function OpenSearchObservabilityPlugin(
+  Client: any,
+  config: any,
+  components: any
+) {
+  const clientAction = components.clientAction.factory;
+
+  Client.prototype.observability = components.clientAction.namespaceFactory();
+  const observability = Client.prototype.observability.prototype;
+
+  // Get Object
+  observability.getObject = clientAction({
+    url: {
+      fmt: OPENSEARCH_PANELS_API.OBJECT,
+      params: {
+        objectId: {
+          type: "string",
+        },
+        objectIdList: {
+          type: "string",
+        },
+        objectType: {
+          type: "string",
+        },
+        sortField: {
+          type: "string",
+        },
+        sortOrder: {
+          type: "string",
+        },
+        fromIndex: {
+          type: "number",
+        },
+        maxItems: {
+          type: "number",
+        },
+        name: {
+          type: "string",
+        },
+        lastUpdatedTimeMs: {
+          type: "string",
+        },
+        createdTimeMs: {
+          type: "string",
+        },
+      },
+    },
+    method: "GET",
+  });
+
+  // Get Object by Id
+  observability.getObjectById = clientAction({
+    url: {
+      fmt: `${OPENSEARCH_PANELS_API.OBJECT}/<%=objectId%>`,
+      req: {
+        objectId: {
+          type: "string",
+          required: true,
+        },
+      },
+    },
+    method: "GET",
+  });
+
+  // Create new Object
+  observability.createObject = clientAction({
+    url: {
+      fmt: OPENSEARCH_PANELS_API.OBJECT,
+    },
+    method: "POST",
+    needBody: true,
+  });
+
+  // Update Object by Id
+  observability.updateObjectById = clientAction({
+    url: {
+      fmt: `${OPENSEARCH_PANELS_API.OBJECT}/<%=objectId%>`,
+      req: {
+        objectId: {
+          type: "string",
+          required: true,
+        },
+      },
+    },
+    method: "PUT",
+    needBody: true,
+  });
+
+  // Delete Object by Id
+  observability.deleteObjectById = clientAction({
+    url: {
+      fmt: `${OPENSEARCH_PANELS_API.OBJECT}/<%=objectId%>`,
+      req: {
+        objectId: {
+          type: "string",
+          required: true,
+        },
+      },
+    },
+    method: "DELETE",
+  });
+
+  // Delete Object by Id List
+  observability.deleteObjectByIdList = clientAction({
+    url: {
+      fmt: OPENSEARCH_PANELS_API.OBJECT,
+      params: {
+        objectIdList: {
+          type: "string",
+          required: true,
+        },
+      },
+    },
+    method: "DELETE",
+  });
+}
diff --git a/server/adaptors/ppl_datasource.ts b/server/adaptors/ppl_datasource.ts
new file mode 100644
index 0000000000..f5b6262f94
--- /dev/null
+++ b/server/adaptors/ppl_datasource.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import _ from 'lodash';
+import {
+  IPPLEventsDataSource,
+  IPPLVisualizationDataSource
+} from '../common/types';
+
+type PPLResponse = IPPLEventsDataSource & IPPLVisualizationDataSource;
+
+export class PPLDataSource {
+
+  constructor(
+    private pplDataSource: PPLResponse,
+    private dataType: string
+  ) {
+    if (this.dataType === 'jdbc') {
+      this.addSchemaRowMapping();
+    } else if (this.dataType === 'viz') {
+      this.addStatsMapping();
+    }
+  }
+
+  private addStatsMapping = () => {
+    const visData = this.pplDataSource;
+
+    /**
+     * Add vis mapping for runtime fields
+     * json data structure added to response will be
+     * [{
+     *  agent: "mozilla",
+     *  avg(bytes): 5756
+     *  ...
+     * }, {
+     *  agent: "MSIE",
+     *  avg(bytes): 5605
+     *  ...
+     * }, {
+     *  agent: "chrome",
+     *  avg(bytes): 5648
+     *  ...
+     * }] 
+     */
+    let res = [];
+    if (visData?.metadata?.fields) {
+      const queriedFields = visData.metadata.fields;
+      for (let i = 0; i < visData.size; i++) {
+        const entry: any = {};
+        queriedFields.map((field: any) => {
+          const statsDataSet = visData?.data;
+          entry[field.name] = statsDataSet[field.name][i];
+        });
+        res.push(entry);
+      }
+      visData['jsonData'] = res;
+    }
+  }
+
+  /**
+   * Add 'schemaName: data' entries for UI rendering
+   */
+  private addSchemaRowMapping = () => {
+    
+    const pplRes = this.pplDataSource;
+    
+    const data: any[] = [];
+
+    _.forEach(pplRes.datarows, (row) => {
+      const record: any = {};
+      
+      for (let i = 0; i < pplRes.schema.length; i++) {
+        
+        const cur = pplRes.schema[i];
+        
+        if (typeof(row[i]) === 'object') {
+          record[cur.name] = JSON.stringify(row[i]);
+        } else if (typeof(row[i]) === 'boolean') {
+          record[cur.name] = row[i].toString();
+        } else {
+          record[cur.name] = row[i];
+        }
+      }
+
+      data.push(record);
+    });
+    pplRes['jsonData'] = data;
+  };
+
+  public getDataSource = () : PPLResponse => this.pplDataSource;
+}
\ No newline at end of file
diff --git a/server/adaptors/ppl_plugin.ts b/server/adaptors/ppl_plugin.ts
new file mode 100644
index 0000000000..304d196e3f
--- /dev/null
+++ b/server/adaptors/ppl_plugin.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PPL_ENDPOINT, SQL_ENDPOINT } from '../../common/constants/shared';
+
+export const PPLPlugin = function (Client, config, components) {
+  const ca = components.clientAction.factory;
+  Client.prototype.ppl = components.clientAction.namespaceFactory();
+  const ppl = Client.prototype.ppl.prototype;
+
+  ppl.pplQuery = ca({
+    url: {
+      fmt: `${PPL_ENDPOINT}`,
+      params: {
+        format: {
+          type: 'string',
+          required: true,
+        },
+      },
+    },
+    needBody: true,
+    method: 'POST',
+  });
+
+  ppl.sqlQuery = ca({
+    url: {
+      fmt: `${SQL_ENDPOINT}`,
+      params: {
+        format: {
+          type: 'string',
+          required: true,
+        },
+      },
+    },
+    needBody: true,
+    method: 'POST',
+  });
+};
diff --git a/server/common/helpers/custom_panels/sample_panels.ts b/server/common/helpers/custom_panels/sample_panels.ts
new file mode 100644
index 0000000000..3ef7a31c8e
--- /dev/null
+++ b/server/common/helpers/custom_panels/sample_panels.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { v4 as uuidv4 } from 'uuid';
+
+export const createDemoPanel = (savedVisualizationIds: string[]) => {
+  return {
+    name: '[Logs] Web traffic Panel',
+    visualizations: [
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[0],
+        x: 4,
+        y: 6,
+        w: 8,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[1],
+        x: 0,
+        y: 2,
+        w: 12,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[2],
+        x: 0,
+        y: 0,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[3],
+        x: 4,
+        y: 0,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[4],
+        x: 8,
+        y: 0,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[5],
+        x: 0,
+        y: 4,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[6],
+        x: 0,
+        y: 6,
+        w: 4,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_' + uuidv4(),
+        savedVisualizationId: savedVisualizationIds[7],
+        x: 4,
+        y: 4,
+        w: 8,
+        h: 2,
+      },
+    ],
+    timeRange: { to: 'now/y', from: 'now/y' },
+    queryFilter: { query: '', language: 'ppl' },
+  };
+};
diff --git a/server/common/helpers/events_explorer/sample_savedObjects.ts b/server/common/helpers/events_explorer/sample_savedObjects.ts
new file mode 100644
index 0000000000..fadcbfc308
--- /dev/null
+++ b/server/common/helpers/events_explorer/sample_savedObjects.ts
@@ -0,0 +1,383 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const sampleVisualizations = [
+  {
+    name: '[Logs] Daily average bytes',
+    description: '',
+    query:
+      'source = opensearch_dashboards_sample_data_logs | stats avg(bytes) by span(timestamp,1d)',
+    type: 'line',
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Logs] Daily count for error response codes',
+    description: '',
+    query:
+      "source = opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count() by span(timestamp,1d)",
+    type: 'bar',
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Logs] Average ram usage by operating systems',
+    description: '',
+    query:
+      'source = opensearch_dashboards_sample_data_logs |  stats avg(machine.ram) by machine.os',
+    type: 'horizontal_bar',
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Logs] Average ram usage per day by apple os',
+    description: '',
+    query:
+      "source = opensearch_dashboards_sample_data_logs | where machine.os='osx' or  machine.os='ios' |  stats avg(machine.ram) by span(timestamp,1d)",
+    type: 'line',
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Logs] Average ram usage per day by windows os ',
+    description: '',
+    query:
+      "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1d)",
+    type: 'line',
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+
+  {
+    name: '[Logs] Count requests from US to CN, IN and JP',
+    description: '',
+    query:
+      "source = opensearch_dashboards_sample_data_logs | where geo.src='US' | where geo.dest='JP' or geo.dest='CN' or geo.dest='IN' | stats count() by geo.dest",
+    type: 'bar',
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Logs] Count total requests by tags ',
+    description: '',
+    query: 'source = opensearch_dashboards_sample_data_logs | stats count() by tags',
+    type: 'bar',
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Logs] Max and average bytes by host',
+    description: '',
+    query: 'source = opensearch_dashboards_sample_data_logs | stats max(bytes), avg(bytes) by host',
+    type: 'line',
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+];
+
+export const sampleQueries = [
+  {
+    name: '[Flights] Show all flights sorted by most delayed',
+    description: '',
+    query: 'source=opensearch_dashboards_sample_data_flights  | sort -FlightDelayMin',
+    selected_date_range: {
+      start: 'now/M',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [
+        {
+          name: 'Carrier',
+          type: 'string',
+        },
+        {
+          name: 'Dest',
+          type: 'string',
+        },
+        {
+          name: 'DestAirportID',
+          type: 'string',
+        },
+        {
+          name: 'FlightDelayMin',
+          type: 'integer',
+        },
+        {
+          name: 'OriginAirportID',
+          type: 'string',
+        },
+      ],
+    },
+  },
+  {
+    name: '[Logs] Show all logs lines where error code is 404 or 503',
+    description: '',
+    query: "source=opensearch_dashboards_sample_data_logs | where response='503' or response='404'",
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name:
+      '[Logs] Show all logs lines where error code is 404 or 503 and deduplicate consecutive entries only',
+    description: '',
+    query:
+      "source=opensearch_dashboards_sample_data_logs | where response='503' or response='404' | dedup host consecutive=true",
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Logs] Show all hosts with errors  aggregated by response, count of ips and tags',
+    description: '',
+    query:
+      "source=opensearch_dashboards_sample_data_logs |  where response='503' or response='404' |  stats count() as ip_count by response , host , tags",
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Flights] Show the count of flights by Destination and Country',
+    description: '',
+    query:
+      'source=opensearch_dashboards_sample_data_flights  | stats count() by DestCountry , Dest',
+    selected_date_range: {
+      start: 'now/M',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Flights] Show all Carriers sorted by average delay',
+    description: '',
+    query:
+      'source=opensearch_dashboards_sample_data_flights |where FlightDelayMin > 0 | stats sum(FlightDelayMin) as total_delay_min, count() as total_delayed by Carrier |eval avg_delay=total_delay_min / total_delayed | sort - avg_delay',
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Logs] Show errors sorted by list of hostnames and average bytes per ip',
+    description: '',
+    query:
+      "source=opensearch_dashboards_sample_data_logs  | where response='503' or response='404' |      stats count() as ip_count, sum(bytes)       as sum_bytes by host, response |       rename response as resp_code |       sort - ip_count, + sum_bytes |       eval per_ip_bytes=sum_bytes/ip_count",
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Logs] Show errors sorted by list of hostnames, by summation of bytes',
+    description: '',
+    query:
+      "source=opensearch_dashboards_sample_data_logs | where response='503' or response='404' |      stats count() as ip_count, sum(bytes)      as sum_bytes by host, response | sort -sum_bytes",
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Logs] Show errors sorted by list of hostnames, by summation of bytes and complex evals',
+    description: '',
+    query:
+      "source=opensearch_dashboards_sample_data_logs | where response='503' or response='404' |      stats count() as ip_count, sum(bytes)      as sum_bytes by host, response |      rename response as resp_code |      sort - ip_count, + sum_bytes |      eval per_ip_bytes=sum_bytes/ip_count,       double_per_ip_bytes = 2 * per_ip_bytes",
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [],
+    },
+  },
+  {
+    name: '[Logs] Show all logs where request matches filebeat',
+    description: '',
+    query: "source = opensearch_dashboards_sample_data_logs | where match(request,'filebeat')",
+    selected_date_range: {
+      start: 'now/y',
+      end: 'now',
+      text: '',
+    },
+    selected_timestamp: {
+      name: 'timestamp',
+      type: 'timestamp',
+    },
+    selected_fields: {
+      text: '',
+      tokens: [
+        {
+          name: 'message',
+          type: 'string',
+        },
+      ],
+    },
+  },
+];
diff --git a/server/common/helpers/notebooks/default_notebook_schema.ts b/server/common/helpers/notebooks/default_notebook_schema.ts
new file mode 100644
index 0000000000..ca0c7969ed
--- /dev/null
+++ b/server/common/helpers/notebooks/default_notebook_schema.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// Default Backend Notebook Schema
+
+export type DefaultInput = {
+  inputType: string;
+  inputText: string;
+};
+
+export type DefaultOutput = {
+  outputType: string;
+  result: string;
+  execution_time: string;
+};
+export type DefaultParagraph = {
+  id: string;
+  dateCreated: string;
+  dateModified: string;
+  input: DefaultInput;
+  output: Array<DefaultOutput>;
+};
+export type DefaultNotebooks = {
+  name: string;
+  dateCreated: string;
+  dateModified: string;
+  backend: string;
+  paragraphs: Array<DefaultParagraph>;
+};
diff --git a/server/common/helpers/notebooks/query_helpers.ts b/server/common/helpers/notebooks/query_helpers.ts
new file mode 100644
index 0000000000..3da7e2ba60
--- /dev/null
+++ b/server/common/helpers/notebooks/query_helpers.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import QueryService from "../../../services/queryService";
+
+export const inputIsQuery = (inputText: string) => {
+  return (inputIsSQL(inputText) || inputIsPPL(inputText));
+}
+
+export const inputIsSQL = (inputText: string) => {
+  return inputText.substring(0, 4) === '%sql';
+}
+
+export const inputIsPPL = (inputText: string) => {
+  return inputText.substring(0, 4) === '%ppl';
+}
+
+export const getQueryOutput = async (inputText: string, queryService: QueryService) => {
+  let output = {};
+  if (inputIsSQL(inputText)) {
+    output = await queryService.describeSQLQuery(inputText);
+  }
+  else if (inputIsPPL(inputText)) {
+    output = await queryService.describePPLQuery(inputText);
+  }
+  return output;
+}
+
+export const formatNotRecognized = (inputText: string) => {
+  return (inputText.substring(0, 4) != '%sql' &&
+          inputText.substring(0, 4) != '%ppl' &&
+          inputText.substring(0, 3) != '%md')
+}
\ No newline at end of file
diff --git a/server/common/helpers/notebooks/sample_notebooks.ts b/server/common/helpers/notebooks/sample_notebooks.ts
new file mode 100644
index 0000000000..aceb72361e
--- /dev/null
+++ b/server/common/helpers/notebooks/sample_notebooks.ts
@@ -0,0 +1,1234 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { v4 as uuid } from 'uuid';
+
+const getDemoNotebook = (dateString: string, visId: string) => {
+  const uuids = [uuid()];
+  const oneWeekAgo = new Date();
+  oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+  return {
+    name: 'OpenSearch Notebooks Quick Start Guide',
+    dateCreated: dateString,
+    dateModified: dateString,
+    backend: 'Default',
+    paragraphs: [
+      {
+        output: [
+          {
+            result:
+              `An OpenSearch Dashboards notebook is an interface that lets you easily combine code snippets, live visualizations, and narrative text in a single notebook interface.
+
+Notebooks let you interactively explore data by running different visualizations that you can share with team members to collaborate on a project.
+
+A notebook is a document composed of two elements: code blocks (Markdown/SQL/PPL) and visualizations.
+
+Common use cases include creating postmortem reports, designing runbooks, building live infrastructure reports, and writing documentation.
+
+You can also generate [reports](https://opensearch.org/docs/dashboards/reporting/) directly from your notebooks.
+
+For more information, refer to the [documentation](https://opensearch.org/docs/dashboards/notebooks/).`,
+            outputType: 'MARKDOWN',
+            execution_time: '0 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+An OpenSearch Dashboards notebook is an interface that lets you easily combine code snippets, live visualizations, and narrative text in a single notebook interface.
+
+Notebooks let you interactively explore data by running different visualizations that you can share with team members to collaborate on a project.
+
+A notebook is a document composed of two elements: code blocks (Markdown/SQL/PPL) and visualizations.
+
+Common use cases include creating postmortem reports, designing runbooks, building live infrastructure reports, and writing documentation.
+
+You can also generate [reports](https://opensearch.org/docs/dashboards/reporting/) directly from your notebooks.
+
+For more information, refer to the [documentation](https://opensearch.org/docs/dashboards/notebooks/).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'Notebooks combine code blocks and visualizations for describing data. Code blocks support markdown, SQL, and PPL languages. Specify the input language on the first line using %\[language type\] syntax. For example, type %md for markdown, %sql for SQL, and %ppl for PPL. A sample visualization is shown below:',
+            outputType: 'MARKDOWN',
+            execution_time: '0 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+Notebooks combine code blocks and visualizations for describing data. Code blocks support markdown, SQL, and PPL languages. Specify the input language on the first line using %\[language type\] syntax. For example, type %md for markdown, %sql for SQL, and %ppl for PPL. A sample visualization is shown below:`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: '',
+            outputType: 'VISUALIZATION',
+            execution_time: '0.017 ms',
+          },
+        ],
+        input: {
+          inputText: `{"viewMode":"view","panels":{"1":{"gridData":{"x":0,"y":0,"w":50,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"${visId}"}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"${uuids[0]}","timeRange":{"to":"${dateString}","from":"${oneWeekAgo}"},"title":"embed_viz_${uuids[0]}","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}`,
+          inputType: 'VISUALIZATION',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result:
+              'You can add a new paragraph from the **Paragraph actions** menu on the top right of the page, the context menu on the top right of each paragraph, or the **Add paragraph** button on the bottom of the page.',
+            outputType: 'MARKDOWN',
+            execution_time: '0 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+You can add a new paragraph from the **Paragraph actions** menu on the top right of the page, the context menu on the top right of each paragraph, or the **Add paragraph** button on the bottom of the page.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'You can also reorder, duplicate, or delete paragraphs from these menus.',
+            outputType: 'MARKDOWN',
+            execution_time: '0 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+You can also reorder, duplicate, or delete paragraphs from these menus.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result:
+              'To execute a paragraph, choose **Run**. To make changes to the input block, choose the downward arrow that\'s next to the paragraph title.',
+            outputType: 'MARKDOWN',
+            execution_time: '0 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+To execute a paragraph, choose **Run**. To make changes to the input block, choose the downward arrow that's next to the paragraph title.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `There are three view modes:
+- **View both**: allows you to edit paragraphs and view outputs on the same page.
+- **Input only**: only shows input of each paragraph, allowing easier editing.
+- **Output only**: only shows output of each paragraph and hides panels.`,
+            outputType: 'MARKDOWN',
+            execution_time: '0 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+There are three view modes:
+- **View both**: allows you to edit paragraphs and view outputs on the same page.
+- **Input only**: only shows input of each paragraph, allowing easier editing.
+- **Output only**: only shows output of each paragraph and hides panels.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'To go back, choose **Notebooks** on the top left of your screen.',
+            outputType: 'MARKDOWN',
+            execution_time: '0 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+To go back, choose **Notebooks** on the top left of your screen.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+    ],
+  };
+};
+
+const getRootCauseNotebook = (dateString: string, visIds: string[]) => {
+  const uuids = [uuid(), uuid()];
+  const oneWeekAgo = new Date();
+  oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+  return {
+    name: '[Logs] Sample Root Cause Event Analysis',
+    dateCreated: dateString,
+    dateModified: dateString,
+    backend: 'Default',
+    paragraphs: [
+      {
+        output: [
+          {
+            result:
+              'This notebook goes through a sample root cause event analysis using PPL and visualizations with the OpenSearch Dashboards sample web logs data.',
+            outputType: 'MARKDOWN',
+            execution_time: '0.016 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+This notebook goes through a sample root cause event analysis using PPL and visualizations with the OpenSearch Dashboards sample web logs data.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: "First, let's bring up a few visualizations for a quick overview.",
+            outputType: 'MARKDOWN',
+            execution_time: '0.046 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+First, let's bring up a few visualizations for a quick overview.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: '',
+            outputType: 'VISUALIZATION',
+            execution_time: '0.017 ms',
+          },
+        ],
+        input: {
+          inputText: `{"viewMode":"view","panels":{"1":{"gridData":{"x":0,"y":0,"w":50,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"${visIds[0]}"}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"${uuids[0]}","timeRange":{"to":"${dateString}","from":"${oneWeekAgo}"},"title":"embed_viz_${uuids[0]}","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}`,
+          inputType: 'VISUALIZATION',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: '',
+            outputType: 'VISUALIZATION',
+            execution_time: '0.017 ms',
+          },
+        ],
+        input: {
+          inputText: `{"viewMode":"view","panels":{"1":{"gridData":{"x":0,"y":0,"w":50,"h":20,"i":"1"},"type":"visualization","explicitInput":{"id":"1","savedObjectId":"${visIds[1]}"}}},"isFullScreenMode":false,"filters":[],"useMargins":false,"id":"${uuids[1]}","timeRange":{"to":"${dateString}","from":"${oneWeekAgo}"},"title":"embed_viz_${uuids[1]}","query":{"query":"","language":"lucene"},"refreshConfig":{"pause":true,"value":15}}`,
+          inputType: 'VISUALIZATION',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `Let's take a look at the source data by the selected fields (search and fields).`,
+            outputType: 'MARKDOWN',
+            execution_time: '0.013 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+Let's take a look at the source data by the selected fields (search and fields).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, 
+  response, bytes | head 20
+
+`,
+            outputType: 'QUERY',
+            execution_time: '0.008 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, 
+  response, bytes | head 20
+
+`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'Check for any error log with response code 404 or 503 (filter).',
+            outputType: 'MARKDOWN',
+            execution_time: '0.009 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+Check for any error log with response code 404 or 503 (filter).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response, bytes | where response='503' or response='404' | head 20
+`,
+            outputType: 'QUERY',
+            execution_time: '0.007 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response, bytes | where response='503' or response='404' | head 20
+`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'We see too many events. Let\'s quickly check which host has the issue (dedup).',
+            outputType: 'MARKDOWN',
+            execution_time: '0.014 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+We see too many events. Let's quickly check which host has the issue (dedup).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' | dedup host | head 20
+`,
+            outputType: 'QUERY',
+            execution_time: '0.010 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' | dedup host | head 20
+`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'We get too few events. Let\'s dedup in consecutive mode (dedup).',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+We get too few events. Let's dedup in consecutive mode (dedup).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' |
+    dedup host consecutive=true | head 20
+`,
+            outputType: 'QUERY',
+            execution_time: '0.007 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' |
+    dedup host consecutive=true | head 20
+`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'How many IP addresses for each response (stats).',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+How many IP addresses for each response (stats).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' | 
+   stats count() as ip_count by response | head 20
+`,
+            outputType: 'QUERY',
+            execution_time: '0.008 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' | 
+   stats count() as ip_count by response | head 20
+`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'To dive deep, let\'s group by host and response, count, and sum (stats).',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+To dive deep, let's group by host and response, count, and sum (stats).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' | 
+   stats count() as ip_count, sum(bytes) 
+   as sum_bytes by host, response | head 20
+`,
+            outputType: 'QUERY',
+            execution_time: '0.007 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' | 
+   stats count() as ip_count, sum(bytes) 
+   as sum_bytes by host, response | head 20
+`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `We don't see a meaningful response. Let's change to resp_code (rename).`,
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+We don't see a meaningful response. Let's change to resp_code (rename).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' |
+    stats count() as ip_count, sum(bytes) 
+    as sum_bytes by host, response |
+     rename response as resp_code | head 20
+
+`,
+            outputType: 'QUERY',
+            execution_time: '0.009 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' |
+    stats count() as ip_count, sum(bytes) 
+    as sum_bytes by host, response |
+     rename response as resp_code | head 20
+
+`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'The data looks better now. Let\'s sort by `DESC count` and `ASC sum_bytes` (sort).',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+The data looks better now. Let's sort by \`DESC count\` and \`ASC sum_bytes\` (sort).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' | 
+   stats count() as ip_count, sum(bytes) 
+   as sum_bytes by host, response | 
+   rename response as resp_code | 
+   sort - ip_count, + sum_bytes | head 20
+`,
+            outputType: 'QUERY',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' | 
+   stats count() as ip_count, sum(bytes) 
+   as sum_bytes by host, response | 
+   rename response as resp_code | 
+   sort - ip_count, + sum_bytes | head 20
+`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'Let\'s check if we can perform aggregations after stats (eval).',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+Let's check if we can perform aggregations after stats (eval).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' |
+    stats count() as ip_count, sum(bytes) 
+    as sum_bytes by host, response | 
+    rename response as resp_code | 
+    sort - ip_count, + sum_bytes | 
+    eval per_ip_bytes=sum_bytes/ip_count  | head 20
+`,
+            outputType: 'QUERY',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' |
+    stats count() as ip_count, sum(bytes) 
+    as sum_bytes by host, response | 
+    rename response as resp_code | 
+    sort - ip_count, + sum_bytes | 
+    eval per_ip_bytes=sum_bytes/ip_count  | head 20
+`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `Wait, what's meant by an evaluation. Can we really perform an evaluation?`,
+            outputType: 'MARKDOWN',
+            execution_time: '0.007 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+Wait, what's meant by an evaluation. Can we really perform an evaluation?`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' | 
+   stats count() as ip_count, sum(bytes) 
+   as sum_bytes by host, response | 
+   rename response as resp_code | 
+   sort - ip_count, + sum_bytes | 
+   eval per_ip_bytes=sum_bytes/ip_count, 
+    double_per_ip_bytes = 2 * per_ip_bytes | head 20
+`,
+            outputType: 'QUERY',
+            execution_time: '0.010 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+  source=opensearch_dashboards_sample_data_logs | fields host, clientip, response,
+   bytes | where response='503' or response='404' | 
+   stats count() as ip_count, sum(bytes) 
+   as sum_bytes by host, response | 
+   rename response as resp_code | 
+   sort - ip_count, + sum_bytes | 
+   eval per_ip_bytes=sum_bytes/ip_count, 
+    double_per_ip_bytes = 2 * per_ip_bytes | head 20
+`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+    ],
+  };
+};
+
+const getSQLNotebook = (dateString: string) => {
+  return {
+    name: '[Flights] OpenSearch SQL Quick Start Guide',
+    dateCreated: dateString,
+    dateModified: dateString,
+    backend: 'Default',
+    paragraphs: [
+      {
+        output: [
+          {
+            result:
+              `OpenSearch SQL lets you write queries in SQL rather than the [OpenSearch query domain-specific language (DSL)](https://opensearch.org/docs/opensearch/query-dsl/full-text/). If you’re already familiar with SQL and don’t want to learn the query DSL, this feature is a great option.
+
+For more information, please refer to the [documentation](https://opensearch.org/docs/search-plugins/sql/index/).`,
+            outputType: 'MARKDOWN',
+            execution_time: '0.013 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+OpenSearch SQL lets you write queries in SQL rather than the [OpenSearch query domain-specific language (DSL)](https://opensearch.org/docs/opensearch/query-dsl/full-text/). If you’re already familiar with SQL and don’t want to learn the query DSL, this feature is a great option.
+
+For more information, please refer to the [documentation](https://opensearch.org/docs/search-plugins/sql/index/).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result:
+              'This notebook shows you how to use SQL with the [OpenSearch Dashboards sample flight data](/app/home#/tutorial_directory).',
+            outputType: 'MARKDOWN',
+            execution_time: '0.010 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+This notebook shows you how to use SQL with the [OpenSearch Dashboards sample flight data](/app/home#/tutorial_directory).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result:
+              'To use SQL, add a code paragraph, type %sql on the first line, and then add SQL queries on the next line.',
+            outputType: 'MARKDOWN',
+            execution_time: '0.007 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+To use SQL, add a code paragraph, type %sql on the first line, and then add SQL queries on the next line.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'Select * from opensearch_dashboards_sample_data_flights limit 20;',
+            outputType: 'QUERY',
+            execution_time: '0.007 ms',
+          },
+        ],
+        input: {
+          inputText: `%sql
+Select * from opensearch_dashboards_sample_data_flights limit 20;`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result:
+              'You can specify fields in the `SELECT` clause and use the `WHERE` clause to filter results. The following query finds flights heading to countries that start with \'A\' that are more than 5000 miles away.',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+You can specify fields in the \`SELECT\` clause and use the \`WHERE\` clause to filter results. The following query finds flights heading to countries that start with 'A' that are more than 5000 miles away.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `SELECT FlightNum,OriginCountry,OriginCityName,DestCountry,DestCityName,DistanceMiles FROM opensearch_dashboards_sample_data_flights WHERE DistanceMiles > 5000 AND DestCountry LIKE 'A%' LIMIT 20;`,
+            outputType: 'QUERY',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%sql
+SELECT FlightNum,OriginCountry,OriginCityName,DestCountry,DestCityName,DistanceMiles FROM opensearch_dashboards_sample_data_flights WHERE DistanceMiles > 5000 AND DestCountry LIKE 'A%' LIMIT 20;`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result:
+              'OpenSearch SQL also supports subqueries:',
+            outputType: 'MARKDOWN',
+            execution_time: '0.007 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+OpenSearch SQL also supports subqueries:`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `SELECT opensearch_dashboards_sample_data_flights.FlightNum,opensearch_dashboards_sample_data_flights.OriginCountry,opensearch_dashboards_sample_data_flights.OriginCityName,opensearch_dashboards_sample_data_flights.DestCountry,opensearch_dashboards_sample_data_flights.DestCityName,opensearch_dashboards_sample_data_flights.DistanceMiles FROM opensearch_dashboards_sample_data_flights WHERE FlightNum IN (SELECT FlightNum FROM opensearch_dashboards_sample_data_flights WHERE DistanceMiles > 5000 AND DestCountry = 'AU') LIMIT 20;`,
+            outputType: 'QUERY',
+            execution_time: '0.009 ms',
+          },
+        ],
+        input: {
+          inputText: `%sql
+SELECT opensearch_dashboards_sample_data_flights.FlightNum,opensearch_dashboards_sample_data_flights.OriginCountry,opensearch_dashboards_sample_data_flights.OriginCityName,opensearch_dashboards_sample_data_flights.DestCountry,opensearch_dashboards_sample_data_flights.DestCityName,opensearch_dashboards_sample_data_flights.DistanceMiles FROM opensearch_dashboards_sample_data_flights WHERE FlightNum IN (SELECT FlightNum FROM opensearch_dashboards_sample_data_flights WHERE DistanceMiles > 5000 AND DestCountry = 'AU') LIMIT 20;`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result:
+              'OpenSearch SQL supports inner joins, cross joins, and left outer joins. The following query joins the flights index with itself to find flights departed from countries that are both origins and destinations.',
+            outputType: 'MARKDOWN',
+            execution_time: '0.007 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+OpenSearch SQL supports inner joins, cross joins, and left outer joins. The following query joins the flights index with itself to find flights departed from countries that are both origins and destinations.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+SELECT a.FlightNum,a.OriginCountry,a.OriginCityName,a.DestCountry,a.DestCityName,a.DistanceMiles FROM opensearch_dashboards_sample_data_flights a JOIN opensearch_dashboards_sample_data_flights b on a.OriginCountry = b.DestCountry LIMIT 20`,
+            outputType: 'QUERY',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%sql
+SELECT a.FlightNum,a.OriginCountry,a.OriginCityName,a.DestCountry,a.DestCityName,a.DistanceMiles FROM opensearch_dashboards_sample_data_flights a JOIN opensearch_dashboards_sample_data_flights b on a.OriginCountry = b.DestCountry LIMIT 20`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result:
+              'For aggregations, use the `GROUP BY` clause. The following query finds the countries with more than 500 flights departed.',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+For aggregations, use the \`GROUP BY\` clause. The following query finds the countries with more than 500 flights departed.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `SELECT OriginCountry,COUNT(1) FROM opensearch_dashboards_sample_data_flights GROUP BY OriginCountry HAVING COUNT(1) > 500 LIMIT 20;`,
+            outputType: 'QUERY',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%sql
+SELECT OriginCountry,COUNT(1) FROM opensearch_dashboards_sample_data_flights GROUP BY OriginCountry HAVING COUNT(1) > 500 LIMIT 20;`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'OpenSearch SQL supports expressions.',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+OpenSearch SQL supports expressions.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `SELECT abs(-1.234), abs(-1 * abs(-5)), dayofmonth(DATE '2021-07-07');`,
+            outputType: 'QUERY',
+            execution_time: '0.005 ms',
+          },
+        ],
+        input: {
+          inputText: `%sql
+SELECT abs(-1.234), abs(-1 * abs(-5)), dayofmonth(DATE '2021-07-07');`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+    ],
+  };
+};
+
+const getPPLNotebook = (dateString: string) => {
+  return {
+    name: '[Logs] OpenSearch Piped Processing Language (PPL) Quick Start Guide',
+    dateCreated: dateString,
+    dateModified: dateString,
+    backend: 'Default',
+    paragraphs: [
+      {
+        output: [
+          {
+            result: `Query DSL is powerful and fast, but it has a steep learning curve because it doesn’t have a human-readable interface. It's also difficult to create ad hoc queries and explore your data. SQL lets you extract and analyze data in a declarative manner.
+
+OpenSearch makes its search and query engine robust by introducing Piped Processing Language (PPL).
+
+PPL enables developers, DevOps engineers, support engineers, site reliability engineers (SREs), and IT managers to effectively discover and explore log data stored in OpenSearch.
+
+With PPL, you can extract insights from your data with a sequence of commands delimited by pipes (|). PPL supports a comprehensive set of commands including search, where, fields, rename, dedup, sort, eval, head, top, and rare. PPL also supports functions, operators and expressions.
+
+Even if you're new to OpenSearch and are only familiar with the pipe (|) syntax, you can still be productive from day one.`,
+            outputType: 'MARKDOWN',
+            execution_time: '0.009 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+Query DSL is powerful and fast, but it has a steep learning curve because it doesn’t have a human-readable interface. It's also difficult to create ad hoc queries and explore your data. SQL lets you extract and analyze data in a declarative manner.
+
+OpenSearch makes its search and query engine robust by introducing Piped Processing Language (PPL).
+
+PPL enables developers, DevOps engineers, support engineers, site reliability engineers (SREs), and IT managers to effectively discover and explore log data stored in OpenSearch.
+
+With PPL, you can extract insights from your data with a sequence of commands delimited by pipes (|). PPL supports a comprehensive set of commands including search, where, fields, rename, dedup, sort, eval, head, top, and rare. PPL also supports functions, operators and expressions.
+
+Even if you're new to OpenSearch and are only familiar with the pipe (|) syntax, you can still be productive from day one.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `Piped Processing Language (PPL) is a query language that lets you use pipe (|) syntax to explore, discover, and query data stored in OpenSearch.
+
+For more information, refer to the [documentation](https://opensearch.org/docs/search-plugins/ppl/index/).`,
+            outputType: 'MARKDOWN',
+            execution_time: '0.009 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+Piped Processing Language (PPL) is a query language that lets you use pipe (|) syntax to explore, discover, and query data stored in OpenSearch.
+
+For more information, refer to the [documentation](https://opensearch.org/docs/search-plugins/ppl/index/).`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result:
+              'In this notebook, we will demonstrate some simple PPL queries with the [OpenSearch Dashboards sample web logs](/app/home#/tutorial_directory). ',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+In this notebook, we will demonstrate some simple PPL queries with the [OpenSearch Dashboards sample web logs](/app/home#/tutorial_directory). `,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result:
+              'To use PPL, add a code paragraph, type `%ppl` on the first line, and add your PPL query on the next line. PPL uses `source` to specify indices and `head` to limit results.',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+To use PPL, add a code paragraph, type \`%ppl\` on the first line, and add your PPL query on the next line. PPL uses \`source\` to specify indices and \`head\` to limit results.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+source=opensearch_dashboards_sample_data_logs | head 20`,
+            outputType: 'QUERY',
+            execution_time: '0.026 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+source=opensearch_dashboards_sample_data_logs | head 20`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result:
+              'To specify fields to include and filter results, use the `field` and `where` commands. The next query returns hosts with failed responses.',
+            outputType: 'MARKDOWN',
+            execution_time: '0.007 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+To specify fields to include and filter results, use the \`field\` and \`where\` commands. The next query returns hosts with failed responses.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+source=opensearch_dashboards_sample_data_logs | fields host, clientip, response, bytes | where response='503' or response='404'`,
+            outputType: 'QUERY',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+source=opensearch_dashboards_sample_data_logs | fields host, clientip, response, bytes | where response='503' or response='404'`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'To see most common hosts from the previous result, use the `top` command.',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+To see most common hosts from the previous result, use the \`top\` command.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+source=opensearch_dashboards_sample_data_logs | where response='503' or response='404' | top host`,
+            outputType: 'QUERY',
+            execution_time: '0.008 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+source=opensearch_dashboards_sample_data_logs | where response='503' or response='404' | top host`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: 'To perform aggregations on search results, use the `stats` command.',
+            outputType: 'MARKDOWN',
+            execution_time: '0.006 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+To perform aggregations on search results, use the \`stats\` command.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `
+source=opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count(1) by host`,
+            outputType: 'QUERY',
+            execution_time: '0.011 ms',
+          },
+        ],
+        input: {
+          inputText: `%ppl
+source=opensearch_dashboards_sample_data_logs | where response='503' or response='404' | stats count(1) by host`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+      {
+        output: [
+          {
+            result: `For more information, refer to the [documentation](https://opensearch.org/docs/search-plugins/ppl/index/).
+
+To see how to perform sample root cause event analysis using PPL and visualizations, see the "\[Logs\] Sample Root Cause Event Analysis" notebook.`,
+            outputType: 'MARKDOWN',
+            execution_time: '0.009 ms',
+          },
+        ],
+        input: {
+          inputText: `%md
+For more information, refer to the [documentation](https://opensearch.org/docs/search-plugins/ppl/index/).
+
+To see how to perform sample root cause event analysis using PPL and visualizations, see the "\[Logs\] Sample Root Cause Event Analysis" notebook.`,
+          inputType: 'MARKDOWN',
+        },
+        dateCreated: dateString,
+        dateModified: dateString,
+        id: 'paragraph_' + uuid(),
+      },
+    ],
+  };
+};
+
+export const getSampleNotebooks = (visIds: string[]) => {
+  const dateString = new Date().toISOString();
+  return [
+    {
+      notebook: getDemoNotebook(dateString, visIds[2]),
+      dateModified: dateString,
+      dateCreated: dateString,
+    },
+    {
+      notebook: getSQLNotebook(dateString),
+      dateModified: dateString,
+      dateCreated: dateString,
+    },
+    {
+      notebook: getPPLNotebook(dateString),
+      dateModified: dateString,
+      dateCreated: dateString,
+    },
+    {
+      notebook: getRootCauseNotebook(dateString, visIds),
+      dateModified: dateString,
+      dateCreated: dateString,
+    },
+  ];
+};
diff --git a/server/common/helpers/notebooks/wreck_requests.ts b/server/common/helpers/notebooks/wreck_requests.ts
new file mode 100644
index 0000000000..54d39966b9
--- /dev/null
+++ b/server/common/helpers/notebooks/wreck_requests.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import Wreck from '@hapi/wreck';
+import { optionsType } from "../../../../common/types/notebooks";
+
+export const requestor = async function (
+  requestType: string,
+  url: string,
+  wreckOptions: optionsType
+) {
+  const promise = Wreck.request(requestType, url, wreckOptions);
+  const res = await promise;
+  const body = await Wreck.read(res, wreckOptions);
+  return body;
+};
diff --git a/server/common/metrics/constants.ts b/server/common/metrics/constants.ts
new file mode 100644
index 0000000000..d67a385709
--- /dev/null
+++ b/server/common/metrics/constants.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ComponentType, CounterType } from './types';
+
+export const WINDOW = 3600;
+export const INTERVAL = 60;
+export const CAPACITY = (WINDOW / INTERVAL) * 2;
+export const MILLIS_MULTIPLIER = 1000;
+
+export const COMPONENTS = [
+  'application_analytics',
+  'operational_panels',
+  'event_analytics',
+  'notebooks',
+  'trace_analytics',
+  'metrics_analytics',
+] as const;
+export const REQUESTS = ['create', 'get', 'update', 'delete'] as const;
+
+export const GLOBAL_BASIC_COUNTER: CounterType = (() => {
+  const counter = {} as CounterType;
+  COMPONENTS.forEach((component) => {
+    counter[component] = {} as CounterType[ComponentType];
+    REQUESTS.forEach((request) => {
+      counter[component][request] = {
+        total: 0,
+      };
+    });
+  });
+  return counter;
+})();
+
+export const DEFAULT_ROLLING_COUNTER: CounterType = (() => {
+  const counter = {} as CounterType;
+  COMPONENTS.forEach((component) => {
+    counter[component] = {} as CounterType[ComponentType];
+    REQUESTS.forEach((request) => {
+      counter[component][request] = {
+        count: 0,
+        system_error: 0,
+        user_error: 0,
+      };
+    });
+  });
+  return counter;
+})();
diff --git a/server/common/metrics/metrics_helper.ts b/server/common/metrics/metrics_helper.ts
new file mode 100644
index 0000000000..659f8c3830
--- /dev/null
+++ b/server/common/metrics/metrics_helper.ts
@@ -0,0 +1,140 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import _ from 'lodash';
+import {
+  CAPACITY,
+  COMPONENTS,
+  DEFAULT_ROLLING_COUNTER,
+  GLOBAL_BASIC_COUNTER,
+  INTERVAL,
+  MILLIS_MULTIPLIER,
+  WINDOW,
+} from './constants';
+import { ComponentType, CounterNameType, CounterType, RequestType } from './types';
+
+const time2CountWin: Map<number, CounterType> = new Map();
+
+export function addClickToMetric(element: string, counter: CounterNameType = 'count') {
+  // remove outdated key-value pairs
+  trim();
+
+  const timeKey = getKey(Date.now());
+  const rollingCounter = time2CountWin.get(timeKey) || _.cloneDeep(DEFAULT_ROLLING_COUNTER);
+  const key = `click.${element}.${counter}`;
+
+  _.set(rollingCounter, key, (_.get(rollingCounter, key, 0) as number) + 1);
+  if (counter === 'count') {
+    const basicCounterKey = `click.${element}.total`;
+    _.set(
+      GLOBAL_BASIC_COUNTER,
+      basicCounterKey,
+      (_.get(GLOBAL_BASIC_COUNTER, basicCounterKey, 0) as number) + 1
+    );
+  }
+
+  time2CountWin.set(timeKey, rollingCounter);
+}
+
+export function addRequestToMetric(
+  component: ComponentType,
+  request: RequestType,
+  error: { statusCode: number }
+): void;
+export function addRequestToMetric(
+  component: ComponentType,
+  request: RequestType,
+  counter: CounterNameType
+): void;
+export function addRequestToMetric(
+  component: ComponentType,
+  request: RequestType,
+  counterNameOrError: CounterNameType | { statusCode: number }
+) {
+  const counter =
+    typeof counterNameOrError === 'object'
+      ? checkErrorType(counterNameOrError)
+      : counterNameOrError;
+
+  // remove outdated key-value pairs
+  trim();
+
+  const timeKey = getKey(Date.now());
+  const rollingCounter = time2CountWin.get(timeKey) || _.cloneDeep(DEFAULT_ROLLING_COUNTER);
+
+  rollingCounter[component][request][counter]!++;
+  if (counter === 'count') {
+    GLOBAL_BASIC_COUNTER[component][request]['total']!++;
+  }
+
+  time2CountWin.set(timeKey, rollingCounter);
+}
+
+export const getMetrics = () => {
+  const preTimeKey = getPreKey(Date.now());
+  const rollingCounters = time2CountWin.get(preTimeKey);
+  return buildMetrics(rollingCounters);
+};
+
+const checkErrorType = (error: { statusCode: number }) => {
+  if (error.statusCode && Math.floor(error.statusCode / 100) === 4) {
+    return 'user_error';
+  } else {
+    return 'system_error';
+  }
+};
+
+const trim = () => {
+  if (time2CountWin.size > CAPACITY) {
+    const currentKey = getKey(Date.now() - WINDOW * MILLIS_MULTIPLIER);
+    time2CountWin.forEach((_value, key, map) => {
+      if (key < currentKey) {
+        map.delete(key);
+      }
+    });
+  }
+};
+
+const getKey = (milliseconds: number) => {
+  return Math.floor(milliseconds / MILLIS_MULTIPLIER / INTERVAL);
+};
+
+const getPreKey = (milliseconds: number) => {
+  return getKey(milliseconds) - 1;
+};
+
+const isComponent = (arg: string): arg is ComponentType => {
+  return COMPONENTS.includes(arg as ComponentType);
+};
+
+const buildMetrics = (rollingCounters?: CounterType) => {
+  if (!rollingCounters) {
+    rollingCounters = DEFAULT_ROLLING_COUNTER;
+  }
+  const basicMetrics = _.merge(rollingCounters, GLOBAL_BASIC_COUNTER);
+  const overallActionMetrics = {
+    request_total: 0,
+    request_count: 0,
+    success_count: 0,
+    failed_request_count_system_error: 0,
+    failed_request_count_user_error: 0,
+  };
+  Object.keys(basicMetrics).forEach((key) => {
+    if (isComponent(key)) {
+      for (const counter of Object.values(basicMetrics[key])) {
+        overallActionMetrics.request_count += counter?.count || 0;
+        overallActionMetrics.request_total += counter?.total || 0;
+        overallActionMetrics.failed_request_count_system_error += counter?.system_error || 0;
+        overallActionMetrics.failed_request_count_user_error += counter?.user_error || 0;
+      }
+    }
+  });
+  overallActionMetrics.success_count =
+    overallActionMetrics.request_count -
+    (overallActionMetrics.failed_request_count_system_error +
+      overallActionMetrics.failed_request_count_user_error);
+
+  return { ...basicMetrics, ...overallActionMetrics };
+};
diff --git a/server/common/metrics/types.ts b/server/common/metrics/types.ts
new file mode 100644
index 0000000000..e0bd1c7cb8
--- /dev/null
+++ b/server/common/metrics/types.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { COMPONENTS, REQUESTS } from './constants';
+
+export type ComponentType = typeof COMPONENTS[number];
+export type RequestType = typeof REQUESTS[number];
+export type CounterNameType = 'count' | 'system_error' | 'user_error' | 'total';
+
+// counter to track user click actions
+type ClickCounterType = {
+  [element: string]: {
+    [counter in CounterNameType]?: number;
+  };
+};
+
+// counter to track requests to OpenSearch
+type RequestCounterType = {
+  [component in ComponentType]: {
+    [request in RequestType]: {
+      [counter in CounterNameType]?: number;
+    };
+  };
+};
+
+export type CounterType = ClickCounterType & RequestCounterType;
diff --git a/server/common/types/index.ts b/server/common/types/index.ts
new file mode 100644
index 0000000000..3b332df93a
--- /dev/null
+++ b/server/common/types/index.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface ISchema {
+  name: string,
+  type: string
+}
+
+export interface IPPLVisualizationDataSource {
+  data: any;
+  metadata: any;
+  jsonData?: Array<any>;
+  size: Number;
+  status: Number;
+}
+
+export interface IPPLEventsDataSource {
+  schema: Array<ISchema>;
+  datarows: Array<any>;
+  jsonData?: Array<any>;
+}
\ No newline at end of file
diff --git a/server/index.ts b/server/index.ts
new file mode 100644
index 0000000000..fb4e47bd3a
--- /dev/null
+++ b/server/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { PluginInitializerContext } from '../../../src/core/server';
+import { ObservabilityPlugin } from './plugin';
+
+export function plugin(initializerContext: PluginInitializerContext) {
+  return new ObservabilityPlugin(initializerContext);
+}
+
+export { ObservabilityPluginSetup, ObservabilityPluginStart } from './types';
diff --git a/server/plugin.ts b/server/plugin.ts
new file mode 100644
index 0000000000..69738f73e8
--- /dev/null
+++ b/server/plugin.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  CoreSetup,
+  CoreStart,
+  ILegacyClusterClient,
+  Logger,
+  Plugin,
+  PluginInitializerContext,
+} from '../../../src/core/server';
+import { OpenSearchObservabilityPlugin } from './adaptors/opensearch_observability_plugin';
+import { PPLPlugin } from './adaptors/ppl_plugin';
+import { setupRoutes } from './routes/index';
+import { ObservabilityPluginSetup, ObservabilityPluginStart } from './types';
+
+export class ObservabilityPlugin
+  implements Plugin<ObservabilityPluginSetup, ObservabilityPluginStart> {
+  private readonly logger: Logger;
+
+  constructor(initializerContext: PluginInitializerContext) {
+    this.logger = initializerContext.logger.get();
+  }
+
+  public setup(core: CoreSetup) {
+    this.logger.debug('Observability: Setup');
+    const router = core.http.createRouter();
+    const openSearchObservabilityClient: ILegacyClusterClient = core.opensearch.legacy.createClient(
+      'opensearch_observability',
+      {
+        plugins: [
+          PPLPlugin,
+          OpenSearchObservabilityPlugin,
+        ],
+      }
+    );
+
+    // @ts-ignore
+    core.http.registerRouteHandlerContext('observability_plugin', (context, request) => {
+      return {
+        logger: this.logger,
+        observabilityClient: openSearchObservabilityClient,
+      };
+    });
+
+    // Register server side APIs
+    setupRoutes({ router, client: openSearchObservabilityClient });
+
+    return {};
+  }
+
+  public start(core: CoreStart) {
+    this.logger.debug('Observability: Started');
+    return {};
+  }
+
+  public stop() {}
+}
diff --git a/server/routes/application_analytics/app_analytics_router.ts b/server/routes/application_analytics/app_analytics_router.ts
new file mode 100644
index 0000000000..930e0d5f1c
--- /dev/null
+++ b/server/routes/application_analytics/app_analytics_router.ts
@@ -0,0 +1,255 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/* eslint-disable no-console */
+
+import { schema } from '@osd/config-schema';
+import {
+  IRouter,
+  IOpenSearchDashboardsResponse,
+  ResponseError,
+  ILegacyScopedClusterClient,
+} from '../../../../../src/core/server';
+import { APP_ANALYTICS_API_PREFIX as API_PREFIX } from '../../../common/constants/application_analytics';
+import { ApplicationType } from '../../../common/types/application_analytics';
+import { AppAnalyticsAdaptor } from '../../../server/adaptors/application_analytics/app_analytics_adaptor';
+
+export function registerAppAnalyticsRouter(router: IRouter) {
+  const appAnalyticsBackend = new AppAnalyticsAdaptor();
+
+  // Fetches all existing applications
+  router.get(
+    {
+      path: `${API_PREFIX}/`,
+      validate: {},
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      let applicationsData: ApplicationType[] = [];
+      try {
+        applicationsData = await appAnalyticsBackend.fetchApps(opensearchClient);
+        return response.ok({
+          body: {
+            data: applicationsData,
+          },
+        });
+      } catch (err: any) {
+        console.error('Error occurred while fetching applications', err);
+        return response.custom({
+          statusCode: err.statusCode || 500,
+          body: err.message,
+        });
+      }
+    }
+  );
+
+  // Fetch application by id
+  router.get(
+    {
+      path: `${API_PREFIX}/{appId}`,
+      validate: {
+        params: schema.object({
+          appId: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const appObject = await appAnalyticsBackend.fetchAppById(
+          opensearchClient,
+          request.params.appId
+        );
+        return response.ok({
+          body: appObject,
+        });
+      } catch (err: any) {
+        console.error('Error occurred while fetching application', err);
+        return response.custom({
+          statusCode: err.statusCode || 500,
+          body: err.message,
+        });
+      }
+    }
+  );
+
+  // Create a new application
+  router.post(
+    {
+      path: `${API_PREFIX}/`,
+      validate: {
+        body: schema.object({
+          name: schema.string(),
+          description: schema.maybe(schema.string()),
+          baseQuery: schema.string(),
+          servicesEntities: schema.arrayOf(schema.string()),
+          traceGroups: schema.arrayOf(schema.string()),
+          availabilityVisId: schema.maybe(schema.string()),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const newAppId = await appAnalyticsBackend.createNewApp(opensearchClient, request.body);
+        return response.ok({
+          body: {
+            message: 'Application Created',
+            newAppId,
+          },
+        });
+      } catch (err: any) {
+        console.error('Error occurred while creating a new application', err);
+        return response.custom({
+          statusCode: err.statusCode || 500,
+          body: err.message,
+        });
+      }
+    }
+  );
+
+  // Renames an existing application
+  router.put(
+    {
+      path: `${API_PREFIX}/rename`,
+      validate: {
+        body: schema.object({
+          appId: schema.string(),
+          name: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        await appAnalyticsBackend.renameApp(
+          opensearchClient,
+          request.body.appId,
+          request.body.name
+        );
+        return response.ok({
+          body: {
+            message: 'Application Renamed',
+          },
+        });
+      } catch (err: any) {
+        console.error('Error occurred while renaming an existing application', err);
+        return response.custom({
+          statusCode: err.statusCode || 500,
+          body: err.message,
+        });
+      }
+    }
+  );
+
+  // Updates an existing application
+  router.put(
+    {
+      path: `${API_PREFIX}/`,
+      validate: {
+        body: schema.object({
+          appId: schema.string(),
+          updateBody: schema.object({
+            name: schema.maybe(schema.string()),
+            description: schema.maybe(schema.string()),
+            servicesEntities: schema.maybe(schema.arrayOf(schema.string())),
+            traceGroups: schema.maybe(schema.arrayOf(schema.string())),
+            panelId: schema.maybe(schema.string()),
+            availabilityVisId: schema.maybe(schema.string()),
+          }),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const updatedAppId = await appAnalyticsBackend.updateApp(
+          opensearchClient,
+          request.body.appId,
+          request.body.updateBody
+        );
+        return response.ok({
+          body: {
+            message: 'Application Updated',
+            updatedAppId,
+          },
+        });
+      } catch (err: any) {
+        console.error('Error occurred while updating an existing application', err);
+        return response.custom({
+          statusCode: err.statusCode || 500,
+          body: err.message,
+        });
+      }
+    }
+  );
+
+  // Delete applications
+  router.delete(
+    {
+      path: `${API_PREFIX}/{appList}`,
+      validate: {
+        params: schema.object({
+          appList: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const delResponse = await appAnalyticsBackend.deleteApp(
+          opensearchClient,
+          request.params.appList
+        );
+        return response.ok({
+          body: delResponse,
+        });
+      } catch (err: any) {
+        return response.custom({
+          statusCode: err.statusCode || 500,
+          body: err.message,
+        });
+      }
+    }
+  );
+}
diff --git a/server/routes/custom_panels/panels_router.ts b/server/routes/custom_panels/panels_router.ts
new file mode 100644
index 0000000000..27b452f756
--- /dev/null
+++ b/server/routes/custom_panels/panels_router.ts
@@ -0,0 +1,377 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { schema } from '@osd/config-schema';
+import { CustomPanelsAdaptor } from '../../adaptors/custom_panels/custom_panel_adaptor';
+import {
+  IRouter,
+  IOpenSearchDashboardsResponse,
+  ResponseError,
+  ILegacyScopedClusterClient,
+} from '../../../../../src/core/server';
+import { CUSTOM_PANELS_API_PREFIX as API_PREFIX } from '../../../common/constants/custom_panels';
+
+export function PanelsRouter(router: IRouter) {
+  const customPanelBackend = new CustomPanelsAdaptor();
+  // Fetch all the custom panels available
+  router.get(
+    {
+      path: `${API_PREFIX}/panels`,
+      validate: {},
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const panelsList = await customPanelBackend.viewPanelList(opensearchNotebooksClient);
+        return response.ok({
+          body: {
+            panels: panelsList,
+          },
+        });
+      } catch (error: any) {
+        console.error('Issue in fetching panel list:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Fetch the required panel by id
+  router.get(
+    {
+      path: `${API_PREFIX}/panels/{panelId}`,
+      validate: {
+        params: schema.object({
+          panelId: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const panelObject = await customPanelBackend.getPanel(
+          opensearchNotebooksClient,
+          request.params.panelId
+        );
+        return response.ok({
+          body: panelObject,
+        });
+      } catch (error: any) {
+        console.error('Issue in fetching panel:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Create a new panel
+  router.post(
+    {
+      path: `${API_PREFIX}/panels`,
+      validate: {
+        body: schema.object({
+          panelName: schema.string(),
+          applicationId: schema.maybe(schema.string()),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const newPanelId = await customPanelBackend.createNewPanel(
+          opensearchNotebooksClient,
+          request.body.panelName,
+          request.body.applicationId || ''
+        );
+        return response.ok({
+          body: {
+            message: 'Panel Created',
+            newPanelId,
+          },
+        });
+      } catch (error: any) {
+        console.error('Issue in creating new panel', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // rename an existing panel
+  router.post(
+    {
+      path: `${API_PREFIX}/panels/rename`,
+      validate: {
+        body: schema.object({
+          panelId: schema.string(),
+          panelName: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const responseBody = await customPanelBackend.renamePanel(
+          opensearchNotebooksClient,
+          request.body.panelId,
+          request.body.panelName
+        );
+        return response.ok({
+          body: {
+            message: 'Panel Renamed',
+          },
+        });
+      } catch (error: any) {
+        console.error('Issue in renaming panel', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // clones an existing panel
+  // returns new panel Id
+  router.post(
+    {
+      path: `${API_PREFIX}/panels/clone`,
+      validate: {
+        body: schema.object({
+          panelId: schema.string(),
+          panelName: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const cloneResponse = await customPanelBackend.clonePanel(
+          opensearchNotebooksClient,
+          request.body.panelId,
+          request.body.panelName
+        );
+        return response.ok({
+          body: {
+            message: 'Panel Cloned',
+            clonePanelId: cloneResponse.clonePanelId,
+            dateCreated: cloneResponse.dateCreated,
+            dateModified: cloneResponse.dateModified,
+          },
+        });
+      } catch (error: any) {
+        console.error('Issue in cloning panel', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // delete an existing panel
+  router.delete(
+    {
+      path: `${API_PREFIX}/panels/{panelId}`,
+      validate: {
+        params: schema.object({
+          panelId: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const deleteResponse = await customPanelBackend.deletePanel(
+          opensearchNotebooksClient,
+          request.params.panelId
+        );
+        return response.ok({
+          body: {
+            message: 'Panel Deleted',
+          },
+        });
+      } catch (error: any) {
+        console.error('Issue in deleting panel', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // delete an existing panel(s)
+  router.delete(
+    {
+      path: `${API_PREFIX}/panelList/{panelIdList}`,
+      validate: {
+        params: schema.object({
+          panelIdList: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const deleteResponse = await customPanelBackend.deletePanelList(
+          opensearchNotebooksClient,
+          request.params.panelIdList
+        );
+        return response.ok({
+          body: {
+            message: 'Panel Deleted',
+          },
+        });
+      } catch (error: any) {
+        console.error('Issue in deleting panel', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // replaces the ppl query filter in panel
+  router.post(
+    {
+      path: `${API_PREFIX}/panels/filter`,
+      validate: {
+        body: schema.object({
+          panelId: schema.string(),
+          query: schema.string(),
+          language: schema.string(),
+          to: schema.string(),
+          from: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const panelFilterResponse = await customPanelBackend.addPanelFilter(
+          opensearchNotebooksClient,
+          request.body.panelId,
+          request.body.query,
+          request.body.language,
+          request.body.to,
+          request.body.from
+        );
+        return response.ok({
+          body: {
+            message: 'Panel PPL Filter Changed',
+          },
+        });
+      } catch (error: any) {
+        console.error('Issue in adding query filter', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Add Sample Panels
+  router.post(
+    {
+      path: `${API_PREFIX}/panels/addSamplePanels`,
+      validate: {
+        body: schema.object({
+          savedVisualizationIds: schema.arrayOf(schema.string()),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const panelsData = await customPanelBackend.addSamplePanels(
+          opensearchNotebooksClient,
+          request.body.savedVisualizationIds
+        );
+        return response.ok({
+          body: {
+            demoPanelsData: panelsData,
+          },
+        });
+      } catch (error: any) {
+        console.error('Issue in fetching panel list:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+}
diff --git a/server/routes/custom_panels/visualizations_router.ts b/server/routes/custom_panels/visualizations_router.ts
new file mode 100644
index 0000000000..c92aec6336
--- /dev/null
+++ b/server/routes/custom_panels/visualizations_router.ts
@@ -0,0 +1,267 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { schema } from '@osd/config-schema';
+import { CustomPanelsAdaptor } from '../../adaptors/custom_panels/custom_panel_adaptor';
+import {
+  IRouter,
+  IOpenSearchDashboardsResponse,
+  ResponseError,
+  ILegacyScopedClusterClient,
+} from '../../../../../src/core/server';
+import { CUSTOM_PANELS_API_PREFIX as API_PREFIX } from '../../../common/constants/custom_panels';
+
+export function VisualizationsRouter(router: IRouter) {
+  // Fetch all the savedVisualzations
+  const customPanelBackend = new CustomPanelsAdaptor();
+  router.get(
+    {
+      path: `${API_PREFIX}/visualizations`,
+      validate: {},
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const visualizationList = await customPanelBackend.getAllSavedVisualizations(
+          opensearchNotebooksClient
+        );
+        return response.ok({
+          body: {
+            visualizations: visualizationList,
+          },
+        });
+      } catch (error) {
+        console.error('Issue in fetching saved visualizations:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // get all saved visualizations by Id
+  router.get(
+    {
+      path: `${API_PREFIX}/visualizations/{savedVisualizationId}`,
+      validate: {
+        params: schema.object({
+          savedVisualizationId: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const savedVisualization = await customPanelBackend.getSavedVisualizationById(
+          opensearchNotebooksClient,
+          request.params.savedVisualizationId
+        );
+        return response.ok({
+          body: {
+            visualization: savedVisualization,
+          },
+        });
+      } catch (error) {
+        console.error('Issue in fetching saved visualizations by ids:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Add a new visualization to the panel
+  router.post(
+    {
+      path: `${API_PREFIX}/visualizations`,
+      validate: {
+        body: schema.object({
+          panelId: schema.string(),
+          savedVisualizationId: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const newVisualizations = await customPanelBackend.addVisualization(
+          opensearchNotebooksClient,
+          request.body.panelId,
+          request.body.savedVisualizationId
+        );
+        return response.ok({
+          body: {
+            message: 'Visualization Added',
+            visualizations: newVisualizations,
+          },
+        });
+      } catch (error) {
+        console.error('Issue in adding visualization:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Add multiple visualizations to the panel
+  router.post(
+    {
+      path: `${API_PREFIX}/visualizations/multiple`,
+      validate: {
+        body: schema.object({
+          panelId: schema.string(),
+          savedVisualizationIds: schema.arrayOf(schema.string()),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const allVisualizations = await customPanelBackend.addMultipleVisualizations(
+          opensearchNotebooksClient,
+          request.body.panelId,
+          request.body.savedVisualizationIds
+        );
+        return response.ok({
+          body: {
+            message: 'Visualizations Added',
+            visualizations: allVisualizations,
+          },
+        });
+      } catch (error) {
+        console.error('Issue in adding visualization:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Replace an existing visualization
+  router.post(
+    {
+      path: `${API_PREFIX}/visualizations/replace`,
+      validate: {
+        body: schema.object({
+          panelId: schema.string(),
+          savedVisualizationId: schema.string(),
+          oldVisualizationId: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const newVisualizations = await customPanelBackend.addVisualization(
+          opensearchNotebooksClient,
+          request.body.panelId,
+          request.body.savedVisualizationId,
+          request.body.oldVisualizationId
+        );
+        return response.ok({
+          body: {
+            message: 'Visualization Replaced',
+            visualizations: newVisualizations,
+          },
+        });
+      } catch (error) {
+        console.error('Issue in replacing visualization:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // changes the position of the mentioned visualizations
+  // Also removes the visualizations not mentioned
+  router.put(
+    {
+      path: `${API_PREFIX}/visualizations/edit`,
+      validate: {
+        body: schema.object({
+          panelId: schema.string(),
+          visualizationParams: schema.arrayOf(
+            schema.object({
+              i: schema.string(),
+              x: schema.number(),
+              y: schema.number(),
+              w: schema.number(),
+              h: schema.number(),
+            })
+          ),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+
+      try {
+        const newVisualizations = await customPanelBackend.editVisualization(
+          opensearchNotebooksClient,
+          request.body.panelId,
+          request.body.visualizationParams
+        );
+        return response.ok({
+          body: {
+            message: 'Visualizations Edited',
+            visualizations: newVisualizations,
+          },
+        });
+      } catch (error) {
+        console.error('Issue in Editing visualizations:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+}
diff --git a/server/routes/dsl.ts b/server/routes/dsl.ts
new file mode 100644
index 0000000000..4caaca8763
--- /dev/null
+++ b/server/routes/dsl.ts
@@ -0,0 +1,100 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  IRouter,
+} from '../../../../src/core/server';
+import { schema } from '@osd/config-schema';
+import DSLFacet from '../services/facets/dsl_facet';
+import {
+  DSL_BASE,
+  DSL_SEARCH,
+  DSL_CAT,
+  DSL_MAPPING
+} from '../../common/constants/shared';
+import { RequestParams } from '@elastic/elasticsearch';
+
+export function registerDslRoute({
+  router,
+  facet,
+}: {
+  router: IRouter
+  facet: DSLFacet
+}) {
+  router.post({
+    path: `${DSL_BASE}${DSL_SEARCH}`,
+    validate: { body:schema.any() }
+  },
+  async (context, request, response) => {
+    const { index, size, ...rest } = request.body;
+    const params: RequestParams.Search = {
+      index: index,
+      size,
+      body: rest,
+    };
+    try {
+      const resp = await context.core.opensearch.legacy.client.callAsCurrentUser(
+        'search',
+        params
+      );
+      return response.ok({
+        body: resp,
+      });
+    } catch (error) {
+      if (error.statusCode !== 404) console.error(error);
+      return response.custom({
+        statusCode: error.statusCode || 500,
+        body: error.message,
+      });
+    }
+  })
+
+  router.get({
+    path: `${DSL_BASE}${DSL_CAT}`,
+    validate: { query: schema.object({
+      format: schema.string()
+    }) }
+  },
+  async (context, request, response) => {
+    try {
+      const resp = await context.core.opensearch.legacy.client.callAsCurrentUser(
+        'cat.indices',
+        request.query
+      );
+      return response.ok({
+        body: resp
+      });
+    } catch (error) {
+      if (error.statusCode !== 404) console.error(error);
+      return response.custom({
+        statusCode: error.statusCode || 500,
+        body: error.message
+      })
+    }
+  })
+  
+  router.get({
+    path: `${DSL_BASE}${DSL_MAPPING}`,
+    validate: { query: schema.any() }
+  },
+  async (context, request, response) => {
+    try {
+      const resp = await context.core.opensearch.legacy.client.callAsCurrentUser(
+        'indices.getMapping',
+        { index: request.query.index }
+      );
+      return response.ok({
+        body: resp
+      });
+    } catch (error) {
+      if (error.statusCode !== 404) console.error(error);
+      return response.custom({
+        statusCode: error.statusCode || 500,
+        body: error.message,
+      })
+    }
+  }
+  )
+}
\ No newline at end of file
diff --git a/server/routes/event_analytics/event_analytics_router.ts b/server/routes/event_analytics/event_analytics_router.ts
new file mode 100644
index 0000000000..c2fd7c2d2c
--- /dev/null
+++ b/server/routes/event_analytics/event_analytics_router.ts
@@ -0,0 +1,363 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { schema } from '@osd/config-schema';
+import {
+  IRouter,
+  IOpenSearchDashboardsResponse,
+  ResponseError,
+} from '../../../../../src/core/server';
+import {
+  OBSERVABILITY_BASE,
+  EVENT_ANALYTICS,
+  SAVED_OBJECTS,
+  SAVED_QUERY,
+  SAVED_VISUALIZATION,
+} from '../../../common/constants/shared';
+import SavedObjectFacet from '../../services/facets/saved_objects';
+
+export const registerEventAnalyticsRouter = ({
+  router,
+  savedObjectFacet,
+}: {
+  router: IRouter;
+  savedObjectFacet: SavedObjectFacet;
+}) => {
+  
+  router.get(
+    {
+      path: `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}`,
+      validate: {},
+    },
+    async (context, req, res): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const savedRes = await savedObjectFacet.getSavedObject(req);
+      const result: any = {
+        body: {
+          ...savedRes.data,
+        },
+      };
+
+      if (savedRes.success || savedRes?.data?.statusCode === 404) return res.ok(result);
+
+      result.statusCode = savedRes?.data?.statusCode || 500;
+      result.message = savedRes?.data || '';
+      return res.custom(result);
+    }
+  );
+  
+  router.get(
+    {
+      path: `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/{objectId}`,
+      validate: {
+        params: schema.object({
+          objectId: schema.string(),
+        }),
+      },
+    },
+    async (context, req, res): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const savedRes = await savedObjectFacet.getSavedObjectById(req, req.params.objectId);
+      const result: any = {
+        body: {
+          ...savedRes.data,
+        },
+      };
+
+      if (savedRes.success || savedRes?.data?.statusCode === 404) return res.ok(result);
+
+      result.statusCode = savedRes?.data?.statusCode || 500;
+      result.message = savedRes?.data || '';
+      return res.custom(result);
+    }
+  );
+
+  router.post(
+    {
+      path: `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}${SAVED_QUERY}`,
+      validate: {
+        body: schema.object({
+          object: schema.object({
+            query: schema.string(),
+            selected_date_range: schema.object({
+              start: schema.string(),
+              end: schema.string(),
+              text: schema.string(),
+            }),
+            selected_timestamp: schema.object({
+              name: schema.string(),
+              type: schema.string(),
+            }),
+            selected_fields: schema.object({
+              tokens: schema.arrayOf(schema.object({}, { unknowns: 'allow' })),
+              text: schema.string(),
+            }),
+            name: schema.string(),
+            description: schema.string(),
+          }),
+        }),
+      },
+    },
+    async (context, req, res): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const savedRes = await savedObjectFacet.createSavedQuery(req);
+      const result: any = {
+        body: {
+          ...savedRes.data,
+        },
+      };
+
+      if (savedRes.success) return res.ok(result);
+
+      result.statusCode = savedRes?.data?.statusCode || 500;
+      result.message = savedRes?.data || '';
+      return res.custom(result);
+    }
+  );
+
+  router.post(
+    {
+      path: `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}${SAVED_VISUALIZATION}`,
+      validate: {
+        body: schema.object({
+          object: schema.object({
+            query: schema.string(),
+            selected_date_range: schema.object({
+              start: schema.string(),
+              end: schema.string(),
+              text: schema.string(),
+            }),
+            selected_timestamp: schema.object({
+              name: schema.string(),
+              type: schema.string(),
+            }),
+            selected_fields: schema.object({
+              tokens: schema.arrayOf(schema.object({}, { unknowns: 'allow' })),
+              text: schema.string(),
+            }),
+            type: schema.string(),
+            name: schema.string(),
+            description: schema.string(),
+            application_id: schema.maybe(schema.string()),
+            user_configs: schema.string(),
+            sub_type: schema.string(),
+            units_of_measure: schema.maybe(schema.string()),
+            selected_labels: schema.maybe(schema.object({
+              label: schema.arrayOf(schema.object({}, { unknowns: 'allow' })),
+            })),
+          }),
+        }),
+      },
+    },
+    async (context, req, res): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const savedRes = await savedObjectFacet.createSavedVisualization(req);
+      const result: any = {
+        body: {
+          ...savedRes.data,
+        },
+      };
+
+      if (savedRes.success) return res.ok(result);
+
+      result.statusCode = savedRes?.data?.statusCode || 500;
+      result.message = savedRes?.data || '';
+      return res.custom(result);
+    }
+  );
+
+  router.put(
+    {
+      path: `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}${SAVED_QUERY}`,
+      validate: {
+        body: schema.object({
+          object_id: schema.string(),
+          object: schema.object({
+            query: schema.string(),
+            selected_date_range: schema.object({
+              start: schema.string(),
+              end: schema.string(),
+              text: schema.string(),
+            }),
+            selected_timestamp: schema.object({
+              name: schema.string(),
+              type: schema.string(),
+            }),
+            selected_fields: schema.object({
+              tokens: schema.arrayOf(schema.object({}, { unknowns: 'allow' })),
+              text: schema.string(),
+            }),
+            name: schema.string(),
+            description: schema.string(),
+          }),
+        }),
+      },
+    },
+    async (context, req, res): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const savedRes = await savedObjectFacet.updateSavedQuery(req);
+      const result: any = {
+        body: {
+          ...savedRes.data,
+        },
+      };
+      if (savedRes.success) return res.ok(result);
+      result.statusCode = savedRes?.data?.statusCode || 500;
+      result.message = savedRes?.data || '';
+      return res.custom(result);
+    }
+  );
+
+  router.put(
+    {
+      path: `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}${SAVED_VISUALIZATION}`,
+      validate: {
+        body: schema.object({
+          object_id: schema.string(),
+          object: schema.object({
+            query: schema.string(),
+            selected_date_range: schema.object({
+              start: schema.string(),
+              end: schema.string(),
+              text: schema.string(),
+            }),
+            selected_timestamp: schema.object({
+              name: schema.string(),
+              type: schema.string(),
+            }),
+            selected_fields: schema.object({
+              tokens: schema.arrayOf(schema.object({}, { unknowns: 'allow' })),
+              text: schema.string(),
+            }),
+            type: schema.string(),
+            name: schema.string(),
+            description: schema.string(),
+            application_id: schema.maybe(schema.string()),
+            user_configs: schema.string(),
+            sub_type: schema.string(),
+            units_of_measure: schema.maybe(schema.string()),
+            selected_labels: schema.maybe(schema.object({
+              labels: schema.arrayOf(schema.object({}, { unknowns: 'allow' })),
+            })),
+          }),
+        }),
+      },
+    },
+    async (context, req, res): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const updateRes = await savedObjectFacet.updateSavedVisualization(req);
+      const result: any = {
+        body: {
+          ...updateRes.data,
+        },
+      };
+      if (updateRes.success) return res.ok(result);
+      result.statusCode = updateRes?.data?.statusCode || 500;
+      result.message = updateRes?.data || '';
+      return res.custom(result);
+    }
+  );
+
+  router.post(
+    {
+      path: `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/timestamp`,
+      validate: {
+        body: schema.object({
+          name: schema.string(),
+          index: schema.string(),
+          type: schema.string(),
+          dsl_type: schema.string(),
+        }),
+      },
+    },
+    async (context, req, res): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const savedRes = await savedObjectFacet.createSavedTimestamp(req);
+      const result: any = {
+        body: {
+          ...savedRes.data,
+        },
+      };
+
+      if (savedRes.success) return res.ok(result);
+
+      result.statusCode = savedRes?.data?.statusCode || 500;
+      result.message = savedRes?.data || '';
+      return res.custom(result);
+    }
+  );
+
+  router.put(
+    {
+      path: `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/timestamp`,
+      validate: {
+        body: schema.object({
+          objectId: schema.string(),
+          timestamp: schema.object({
+            name: schema.string(),
+            index: schema.string(),
+            type: schema.string(),
+            dsl_type: schema.string(),
+          }),
+        }),
+      },
+    },
+    async (context, req, res): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const savedRes = await savedObjectFacet.updateSavedTimestamp(req);
+      const result: any = {
+        body: {
+          ...savedRes.data,
+        },
+      };
+
+      if (savedRes.success) return res.ok(result);
+
+      result.statusCode = savedRes?.data?.statusCode || 500;
+      result.message = savedRes?.data || '';
+      return res.custom(result);
+    }
+  );
+
+  router.delete(
+    {
+      path: `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/{objectIdList}`,
+      validate: {
+        params: schema.object({
+          objectIdList: schema.string(),
+        }),
+      },
+    },
+    async (context, req, res): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const deleteResponse = await savedObjectFacet.deleteSavedObject(req);
+      const result: any = {
+        body: {
+          ...deleteResponse.data,
+        },
+      };
+      if (deleteResponse.success) return res.ok(result);
+      result.statusCode = deleteResponse?.data?.statusCode || 500;
+      result.message = deleteResponse?.data || '';
+      return res.custom(result);
+    }
+  );
+
+  router.get(
+    {
+      path: `${OBSERVABILITY_BASE}${EVENT_ANALYTICS}${SAVED_OBJECTS}/addSampleSavedObjects/{sampleRequestor}`,
+      validate: {
+        params: schema.object({
+          sampleRequestor: schema.string(),
+        }),
+      },
+    },
+    async (context, req, res): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const savedRes = await savedObjectFacet.createSampleSavedObjects(req);
+      const result: any = {
+        body: {
+          ...savedRes.data,
+        },
+      };
+
+      if (savedRes.success) return res.ok(result);
+
+      result.statusCode = savedRes?.data?.statusCode || 500;
+      result.message = savedRes?.data || '';
+      return res.custom(result);
+    }
+  );
+};
diff --git a/server/routes/index.ts b/server/routes/index.ts
new file mode 100644
index 0000000000..31e5c04564
--- /dev/null
+++ b/server/routes/index.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { IRouter, ILegacyClusterClient } from '../../../../src/core/server';
+import { registerPplRoute } from './ppl';
+import PPLFacet from '../services/facets/ppl_facet';
+import { registerDslRoute } from './dsl';
+import DSLFacet from '../services/facets/dsl_facet';
+import SavedObjectFacet from '../services/facets/saved_objects';
+import { PanelsRouter } from './custom_panels/panels_router';
+import { VisualizationsRouter } from './custom_panels/visualizations_router';
+import { registerTraceAnalyticsDslRouter } from './trace_analytics_dsl_router';
+import { registerParaRoute } from './notebooks/paraRouter';
+import { registerNoteRoute } from './notebooks/noteRouter';
+import { registerVizRoute } from './notebooks/vizRouter';
+import QueryService from '../services/queryService';
+import { registerSqlRoute } from './notebooks/sqlRouter';
+import { registerEventAnalyticsRouter } from './event_analytics/event_analytics_router';
+import { registerAppAnalyticsRouter } from './application_analytics/app_analytics_router';
+import { registerMetricsRoute } from './metrics/metrics_rounter';
+
+
+export function setupRoutes({ router, client }: { router: IRouter; client: ILegacyClusterClient }) {
+  PanelsRouter(router);
+  VisualizationsRouter(router);
+  registerPplRoute({ router, facet: new PPLFacet(client) });
+  registerDslRoute({ router, facet: new DSLFacet(client)});
+  registerEventAnalyticsRouter({ router, savedObjectFacet: new SavedObjectFacet(client) });
+  registerAppAnalyticsRouter(router);
+  
+  // TODO remove trace analytics route when DSL route for autocomplete is added
+  registerTraceAnalyticsDslRouter(router);
+
+  // notebooks routes
+  registerParaRoute(router);
+  registerNoteRoute(router);
+  registerVizRoute(router);
+  const queryService = new QueryService(client);
+  registerSqlRoute(router, queryService);
+
+  registerMetricsRoute(router);
+};
diff --git a/server/routes/metrics/metrics_rounter.ts b/server/routes/metrics/metrics_rounter.ts
new file mode 100644
index 0000000000..26547aca79
--- /dev/null
+++ b/server/routes/metrics/metrics_rounter.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ResponseError } from '@opensearch-project/opensearch/lib/errors';
+import { schema } from '@osd/config-schema';
+import { IOpenSearchDashboardsResponse, IRouter } from '../../../../../src/core/server';
+import { OBSERVABILITY_BASE } from '../../../common/constants/shared';
+import { addClickToMetric, getMetrics } from '../../common/metrics/metrics_helper';
+
+export function registerMetricsRoute(router: IRouter) {
+  router.get(
+    {
+      path: `${OBSERVABILITY_BASE}/stats`,
+      validate: false,
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      try {
+        const metrics = getMetrics();
+        return response.ok({
+          body: metrics,
+        });
+      } catch (error) {
+        console.error(error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  router.post(
+    {
+      path: `${OBSERVABILITY_BASE}/stats`,
+      validate: {
+        body: schema.object({
+          element: schema.string()
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      try {
+        const { element } = request.body;
+        addClickToMetric(element);
+        return response.ok();
+      } catch (error) {
+        console.error(error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+}
diff --git a/server/routes/notebooks/noteRouter.ts b/server/routes/notebooks/noteRouter.ts
new file mode 100644
index 0000000000..27e7682bb9
--- /dev/null
+++ b/server/routes/notebooks/noteRouter.ts
@@ -0,0 +1,266 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { schema } from '@osd/config-schema';
+import {
+  ILegacyScopedClusterClient,
+  IOpenSearchDashboardsResponse,
+  IRouter,
+  ResponseError,
+} from '../../../../../src/core/server';
+import { NOTEBOOKS_API_PREFIX, wreckOptions } from '../../../common/constants/notebooks';
+import BACKEND from '../../adaptors/notebooks';
+
+export function registerNoteRoute(router: IRouter) {
+  // Fetch all the notebooks available
+  router.get(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/`,
+      validate: {},
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      let notebooksData = [];
+      try {
+        notebooksData = await BACKEND.viewNotes(opensearchNotebooksClient, wreckOptions);
+        return response.ok({
+          body: {
+            data: notebooksData,
+          },
+        });
+      } catch (error) {
+        console.log('Notebook:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Get all paragraphs of notebooks
+  router.get(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/note/{noteId}`,
+      validate: {
+        params: schema.object({
+          noteId: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const notebookinfo = await BACKEND.fetchNote(
+          opensearchNotebooksClient,
+          request.params.noteId,
+          wreckOptions
+        );
+        return response.ok({
+          body: notebookinfo,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Add a Notebook
+  router.post(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/note`,
+      validate: {
+        body: schema.object({
+          name: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const addResponse = await BACKEND.addNote(
+          opensearchNotebooksClient,
+          request.body,
+          wreckOptions
+        );
+        return response.ok({
+          body: addResponse.message.objectId,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Rename a notebook
+  router.put(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/note/rename`,
+      validate: {
+        body: schema.object({
+          name: schema.string(),
+          noteId: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const renameResponse = await BACKEND.renameNote(
+          opensearchNotebooksClient,
+          request.body,
+          wreckOptions
+        );
+        return response.ok({
+          body: renameResponse,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Clone a notebook
+  router.post(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/note/clone`,
+      validate: {
+        body: schema.object({
+          name: schema.string(),
+          noteId: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const cloneResponse = await BACKEND.cloneNote(
+          opensearchNotebooksClient,
+          request.body,
+          wreckOptions
+        );
+        return response.ok({
+          body: cloneResponse,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Delete notebooks
+  router.delete(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/note/{noteList}`,
+      validate: {
+        params: schema.object({
+          noteList: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const delResponse = await BACKEND.deleteNote(
+          opensearchNotebooksClient,
+          request.params.noteList,
+          wreckOptions
+        );
+        return response.ok({
+          body: delResponse,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  // Add sample notebooks
+  router.post(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/note/addSampleNotebooks`,
+      validate: {
+        body: schema.object({
+          visIds: schema.arrayOf(schema.string()),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const addSampleNotesResponse = await BACKEND.addSampleNotes(
+          opensearchNotebooksClient,
+          request.body.visIds,
+          wreckOptions
+        );
+        return response.ok({
+          body: addSampleNotesResponse,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+}
diff --git a/server/routes/notebooks/paraRouter.ts b/server/routes/notebooks/paraRouter.ts
new file mode 100644
index 0000000000..bf7d175779
--- /dev/null
+++ b/server/routes/notebooks/paraRouter.ts
@@ -0,0 +1,279 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { schema } from '@osd/config-schema';
+import {
+  ILegacyScopedClusterClient,
+  IOpenSearchDashboardsResponse,
+  IRouter,
+  ResponseError,
+} from '../../../../../src/core/server';
+import { NOTEBOOKS_API_PREFIX, wreckOptions } from '../../../common/constants/notebooks';
+import BACKEND from '../../adaptors/notebooks';
+import {
+  DefaultNotebooks,
+  DefaultParagraph,
+} from '../../common/helpers/notebooks/default_notebook_schema';
+
+export function registerParaRoute(router: IRouter) {
+  /* --> Updates the input content in a paragraph
+   * --> Runs the paragraph
+   * --> Fetches the updated Paragraph (with new input content)
+   */
+  router.post(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/paragraph/update/run/`,
+      validate: {
+        body: schema.object({
+          noteId: schema.string(),
+          paragraphId: schema.string(),
+          paragraphInput: schema.string(),
+          paragraphType: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const runResponse = await BACKEND.updateRunFetchParagraph(
+          context.observability_plugin.observabilityClient,
+          request,
+          wreckOptions
+        );
+        return response.ok({
+          body: runResponse,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  /* --> Updates the input content in a paragraph
+   * --> Fetches the updated Paragraph (with new input content)
+   */
+  router.put(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/paragraph/`,
+      validate: {
+        body: schema.object({
+          noteId: schema.string(),
+          paragraphId: schema.string(),
+          paragraphInput: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const saveResponse = await BACKEND.updateFetchParagraph(
+          opensearchNotebooksClient,
+          request.body,
+          wreckOptions
+        );
+        return response.ok({
+          body: saveResponse,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  /* --> Adds a new paragraph
+   * --> Fetches the added Paragraph
+   */
+  router.post(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/paragraph/`,
+      validate: {
+        body: schema.object({
+          noteId: schema.string(),
+          paragraphIndex: schema.number(),
+          paragraphInput: schema.string(),
+          inputType: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const addResponse = await BACKEND.addFetchNewParagraph(
+          opensearchNotebooksClient,
+          request.body,
+          wreckOptions
+        );
+        return response.ok({
+          body: addResponse,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  /* --> Update paragraphs in backend with paragraphs passed in
+   * --> Fetches the added Paragraph
+   */
+  router.post(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/set_paragraphs/`,
+      validate: {
+        body: schema.object({
+          noteId: schema.string(),
+          paragraphs: schema.arrayOf(
+            schema.object({
+              output: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))),
+              input: schema.object({
+                inputText: schema.string(),
+                inputType: schema.string(),
+              }),
+              dateCreated: schema.string(),
+              dateModified: schema.string(),
+              id: schema.string(),
+            })
+          ),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const updateNotebook: Partial<DefaultNotebooks> = {
+          paragraphs: request.body.paragraphs as Array<DefaultParagraph>,
+          dateModified: new Date().toISOString(),
+        };
+        const updateResponse = await BACKEND.updateNote(
+          opensearchNotebooksClient,
+          request.body.noteId,
+          updateNotebook
+        );
+        return response.ok({
+          body: updateResponse,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  /* --> Deletes a paragraph
+   * --> Fetches the all other Paragraphs as a list
+   * --> Deletes all paragraphs if paragraphId is not provided
+   */
+  router.delete(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/paragraph`,
+      validate: {
+        query: schema.object({
+          noteId: schema.string(),
+          paragraphId: schema.maybe(schema.string()),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      const params = {
+        noteId: request.query.noteId,
+        paragraphId: request.query.paragraphId,
+      };
+      try {
+        const deleteResponse = await BACKEND.deleteFetchParagraphs(
+          opensearchNotebooksClient,
+          params,
+          wreckOptions
+        );
+        return response.ok({
+          body: deleteResponse,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
+  /* --> Clears output for all the paragraphs
+   * --> Fetches the all Paragraphs as a list (with cleared outputs)
+   */
+  router.put(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/paragraph/clearall/`,
+      validate: {
+        body: schema.object({
+          noteId: schema.string(),
+        }),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const opensearchNotebooksClient: ILegacyScopedClusterClient = context.observability_plugin.observabilityClient.asScoped(
+        request
+      );
+      try {
+        const clearParaResponse = await BACKEND.clearAllFetchParagraphs(
+          opensearchNotebooksClient,
+          request.body,
+          wreckOptions
+        );
+        return response.ok({
+          body: clearParaResponse,
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+}
diff --git a/server/routes/notebooks/sqlRouter.ts b/server/routes/notebooks/sqlRouter.ts
new file mode 100644
index 0000000000..ec3c270fc0
--- /dev/null
+++ b/server/routes/notebooks/sqlRouter.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { schema } from '@osd/config-schema';
+import {
+  IOpenSearchDashboardsResponse,
+  IRouter,
+  ResponseError,
+} from '../../../../../src/core/server';
+import QueryService from '../../services/queryService';
+
+export function registerSqlRoute(server: IRouter, service: QueryService) {
+  server.post(
+    {
+      path: '/api/sql/sqlquery',
+      validate: {
+        body: schema.any(),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const retVal = await service.describeSQLQuery(request);
+      return response.ok({
+        body: retVal,
+      });
+    }
+  );
+
+  server.post(
+    {
+      path: '/api/sql/pplquery',
+      validate: {
+        body: schema.any(),
+      },
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const retVal = await service.describePPLQuery(request);
+      return response.ok({
+        body: retVal,
+      });
+    }
+  );
+}
diff --git a/server/routes/notebooks/vizRouter.ts b/server/routes/notebooks/vizRouter.ts
new file mode 100644
index 0000000000..8d70ff644d
--- /dev/null
+++ b/server/routes/notebooks/vizRouter.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { RequestParams } from '@elastic/elasticsearch';
+import {
+  IOpenSearchDashboardsResponse,
+  IRouter,
+  ResponseError,
+} from '../../../../../src/core/server';
+import { NOTEBOOKS_API_PREFIX, NOTEBOOKS_FETCH_SIZE } from '../../../common/constants/notebooks';
+
+export function registerVizRoute(router: IRouter) {
+  // Fetches available saved visualizations for current user
+  router.get(
+    {
+      path: `${NOTEBOOKS_API_PREFIX}/visualizations`,
+      validate: {},
+    },
+    async (
+      context,
+      request,
+      response
+    ): Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+      const params: RequestParams.Search = {
+        index: '.kibana',
+        size: NOTEBOOKS_FETCH_SIZE,
+        q: 'type:visualization',
+      };
+      try {
+        const opensearchClientResponse = await context.core.opensearch.legacy.client.callAsCurrentUser(
+          'search',
+          params
+        );
+        const savedVisualizations = opensearchClientResponse.hits.hits;
+        const vizResponse = savedVisualizations.map((vizDocument) => ({
+          label: vizDocument._source.visualization.title,
+          key: vizDocument._id.split(':').pop(),
+        }));
+        return response.ok({
+          body: { savedVisualizations: vizResponse },
+        });
+      } catch (error) {
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+}
diff --git a/server/routes/ppl.ts b/server/routes/ppl.ts
new file mode 100644
index 0000000000..38bef05b4c
--- /dev/null
+++ b/server/routes/ppl.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { 
+  IRouter,
+  IOpenSearchDashboardsResponse,
+  ResponseError,
+ } from '../../../../src/core/server';
+import { schema } from '@osd/config-schema';
+import PPLFacet from '../services/facets/ppl_facet';
+import {
+  PPL_BASE,
+  PPL_SEARCH
+} from '../../common/constants/shared';
+
+export function registerPplRoute({
+  router,
+  facet,
+}: {
+  router: IRouter
+  facet: PPLFacet
+}) {
+  router.post({
+    path: `${PPL_BASE}${PPL_SEARCH}`,
+    validate: { 
+      body: schema.object({
+        query: schema.string(),
+        format: schema.string()
+    })}
+  }, 
+  async (
+    context,
+    req,
+    res
+  ) : Promise<IOpenSearchDashboardsResponse<any | ResponseError>> => {
+    const queryRes: any = await facet.describeQuery(req);
+    if (queryRes['success']) {
+      const result: any = {
+        body: {
+          ...queryRes['data']
+        }
+      };
+      return res.ok(result);
+    }
+    return res.custom({
+      statusCode: queryRes.data.statusCode || queryRes.data.status || 500,
+      body: queryRes.data.body || queryRes.data.message || '',
+    });
+  });
+}
diff --git a/server/routes/trace_analytics_dsl_router.ts b/server/routes/trace_analytics_dsl_router.ts
new file mode 100644
index 0000000000..b648436220
--- /dev/null
+++ b/server/routes/trace_analytics_dsl_router.ts
@@ -0,0 +1,104 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { RequestParams } from '@opensearch-project/opensearch';
+import { schema } from '@osd/config-schema';
+import { IRouter } from '../../../../src/core/server';
+import {
+  DATA_PREPPER_INDEX_NAME,
+  DATA_PREPPER_SERVICE_INDEX_NAME,
+  TRACE_ANALYTICS_DSL_ROUTE,
+  TRACE_ANALYTICS_INDICES_ROUTE,
+} from '../../common/constants/trace_analytics';
+import { addRequestToMetric } from '../common/metrics/metrics_helper';
+
+export function registerTraceAnalyticsDslRouter(router: IRouter) {
+  router.post(
+    {
+      path: TRACE_ANALYTICS_INDICES_ROUTE,
+      validate: false,
+    },
+    async (context, request, response) => {
+      const params: RequestParams.IndicesExists = {
+        index: [DATA_PREPPER_INDEX_NAME, DATA_PREPPER_SERVICE_INDEX_NAME],
+        allow_no_indices: false,
+      };
+      try {
+        const resp = await context.core.opensearch.legacy.client.callAsCurrentUser(
+          'indices.exists',
+          params
+        );
+        return response.ok({
+          body: resp,
+        });
+      } catch (error) {
+        console.error(error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+  router.post(
+    {
+      path: TRACE_ANALYTICS_DSL_ROUTE,
+      validate: {
+        body: schema.object({
+          index: schema.maybe(schema.string()),
+          from: schema.maybe(schema.number()),
+          size: schema.number(),
+          query: schema.maybe(
+            schema.object({
+              bool: schema.object({
+                filter: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))),
+                must: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))),
+                should: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))),
+                must_not: schema.maybe(schema.arrayOf(schema.object({}, { unknowns: 'allow' }))),
+                minimum_should_match: schema.maybe(schema.number()),
+                adjust_pure_negative: schema.maybe(schema.boolean()),
+                boost: schema.maybe(schema.any()),
+              }),
+            })
+          ),
+          aggs: schema.maybe(schema.any()),
+          aggregations: schema.maybe(schema.any()),
+          sort: schema.maybe(schema.arrayOf(schema.any())),
+          _source: schema.maybe(
+            schema.object({
+              includes: schema.arrayOf(schema.string()),
+            })
+          ),
+          script_fields: schema.maybe(schema.any()),
+        }),
+      },
+    },
+    async (context, request, response) => {
+      addRequestToMetric('trace_analytics', 'get', 'count');
+      const { index, size, ...rest } = request.body;
+      const params: RequestParams.Search = {
+        index: index || DATA_PREPPER_INDEX_NAME,
+        size,
+        body: rest,
+      };
+      try {
+        const resp = await context.core.opensearch.legacy.client.callAsCurrentUser(
+          'search',
+          params
+        );
+        return response.ok({
+          body: resp,
+        });
+      } catch (error) {
+        addRequestToMetric('trace_analytics', 'get', error);
+        if (error.statusCode !== 404) console.error(error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+}
diff --git a/server/services/facets/dsl_facet.ts b/server/services/facets/dsl_facet.ts
new file mode 100644
index 0000000000..081e3c717f
--- /dev/null
+++ b/server/services/facets/dsl_facet.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import _ from 'lodash';
+
+export default class DSLFacet {
+  constructor(private client: any) {
+    this.client = client;
+  }
+
+  private fetch = async( 
+    request: any,
+    format: string,
+    responseFormat: string
+  ) => {
+    const res = {
+      success: false,
+      data: {}
+    };
+    try {
+      const params = {
+        query: JSON.stringify(request.body)
+      };
+      const queryRes = await this.client.asScoped(request).callAsCurrentUser(format, params);
+      const dslDataSource = queryRes;
+      res['success'] = true;
+      res['data'] = dslDataSource;
+    }
+    catch (err: any) {
+      console.error(err);
+      res['data'] = err.body;
+    }
+    return res;
+  };
+
+  describeQuery = async (request: any) => {
+    return this.fetch(request, 'dsl.dslQuery', 'json')
+  }
+} 
\ No newline at end of file
diff --git a/server/services/facets/ppl_facet.ts b/server/services/facets/ppl_facet.ts
new file mode 100644
index 0000000000..7e1321ae1a
--- /dev/null
+++ b/server/services/facets/ppl_facet.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import _ from 'lodash';
+import { PPLDataSource } from '../../adaptors/ppl_datasource';
+
+export default class PPLFacet {
+
+  constructor(private client: any) {
+    this.client = client;
+  }
+  
+  private fetch = async (
+    request: any,
+    format: string,
+    responseFormat: string
+  ) => {
+    const res = {
+      success: false,
+      data: {}
+    };
+    try {
+      const params = {
+        body: {
+          query: request.body.query
+        }
+      };
+      if (request.body.format !== 'jdbc') {
+        params['format'] = request.body.format;
+      }
+      const queryRes = await this.client.asScoped(request).callAsCurrentUser(format, params);
+      const pplDataSource = new PPLDataSource(queryRes, request.body.format);
+      res['success'] = true;
+      res['data'] = pplDataSource.getDataSource();
+    } catch (err: any) {
+      console.error('PPL query fetch err: ', err);
+      res['data'] = err;
+    }
+    return res
+  };
+
+  describeQuery = async (request: any) => {
+    return this.fetch(request, 'ppl.pplQuery', 'json');
+  }
+}
\ No newline at end of file
diff --git a/server/services/facets/saved_objects.ts b/server/services/facets/saved_objects.ts
new file mode 100644
index 0000000000..30286d21b8
--- /dev/null
+++ b/server/services/facets/saved_objects.ts
@@ -0,0 +1,236 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  sampleQueries,
+  sampleVisualizations,
+} from '../../common/helpers/events_explorer/sample_savedObjects';
+
+// eslint-disable-next-line import/no-default-export
+export default class SavedObjectFacet {
+  constructor(private client: any) {
+    this.client = client;
+  }
+
+  fetch = async (request: any, params: any, format: string) => {
+    const res = {
+      success: false,
+      data: {},
+    };
+    try {
+      const savedQueryRes = await this.client.asScoped(request).callAsCurrentUser(format, params);
+      res.success = true;
+      res.data = savedQueryRes;
+    } catch (err: any) {
+      console.error('Event analytics fetch error: ', err);
+      res.data = err;
+    }
+    return res;
+  };
+
+  create = async (request: any, format: string, objectType: string) => {
+    const res = {
+      success: false,
+      data: {},
+    };
+    try {
+      const params = {
+        body: {
+          [objectType]: {
+            ...request.body.object,
+          },
+        },
+      };
+      const savedRes = await this.client.asScoped(request).callAsCurrentUser(format, params);
+      res.success = true;
+      res.data = savedRes;
+    } catch (err: any) {
+      console.error('Event analytics create error: ', err);
+      res.data = err;
+    }
+    return res;
+  };
+
+  createTimestamp = async (request: any, format: string) => {
+    const res = {
+      success: false,
+      data: {},
+    };
+    try {
+      const params = {
+        body: {
+          objectId: request.body.index,
+          timestamp: {
+            ...request.body,
+          },
+        },
+      };
+      const savedRes = await this.client.asScoped(request).callAsCurrentUser(format, params);
+      res.success = true;
+      res.data = savedRes;
+    } catch (err: any) {
+      console.error('Event analytics create timestamp error: ', err);
+      res.data = err;
+    }
+    return res;
+  };
+
+  updateTimestamp = async (request: any, format: string) => {
+    const res = {
+      success: false,
+      data: {},
+    };
+    try {
+      const params = {
+        objectId: request.body.objectId,
+        body: {
+          ...request.body,
+        },
+      };
+      const savedQueryRes = await this.client.asScoped(request).callAsCurrentUser(format, params);
+      res.success = true;
+      res.data = savedQueryRes;
+    } catch (err: any) {
+      console.error('Event analytics update error: ', err);
+      res.data = err.message;
+    }
+    return res;
+  };
+
+  update = async (request: any, format: string, objectType: string) => {
+    const res = {
+      success: false,
+      data: {},
+    };
+    try {
+      const params = {
+        objectId: request.body.object_id,
+        body: {
+          [objectType]: {
+            ...request.body.object,
+          },
+        },
+      };
+      const savedQueryRes = await this.client.asScoped(request).callAsCurrentUser(format, params);
+      res.success = true;
+      res.data = savedQueryRes;
+    } catch (err: any) {
+      console.error('Event analytics update error: ', err);
+      res.data = err.message;
+    }
+    return res;
+  };
+
+  delete = async (request: any, format: string) => {
+    const res = {
+      success: false,
+      data: {},
+    };
+    try {
+      const params = {
+        objectIdList: request.params.objectIdList,
+      };
+      const savedQueryRes = await this.client.asScoped(request).callAsCurrentUser(format, params);
+      res.success = true;
+      res.data = savedQueryRes;
+    } catch (err: any) {
+      console.error('Event analytics delete error: ', err);
+      res.data = err.message;
+    }
+    return res;
+  };
+
+  createSamples = async (request: any, format: string) => {
+    const res = {
+      success: false,
+      data: {},
+    };
+    try {
+      const savedVizIds: any[] = [];
+      const savedQueryIds: any[] = [];
+
+      if (['panels', 'event_analytics'].includes(request.params.sampleRequestor)) {
+        for (var i = 0; i < sampleVisualizations.length; i++) {
+          const params = {
+            body: {
+              savedVisualization: {
+                ...sampleVisualizations[i],
+              },
+            },
+          };
+          const savedVizRes = await this.client.asScoped(request).callAsCurrentUser(format, params);
+          savedVizIds.push(savedVizRes.objectId);
+        }
+
+        for (var i = 0; i < sampleQueries.length; i++) {
+          const params = {
+            body: {
+              savedQuery: {
+                ...sampleQueries[i],
+              },
+            },
+          };
+          const savedQueryRes = await this.client
+            .asScoped(request)
+            .callAsCurrentUser(format, params);
+          savedQueryIds.push(savedQueryRes.objectId);
+        }
+      }
+
+      res.success = true;
+      res.data = { savedVizIds, savedQueryIds };
+    } catch (err: any) {
+      console.error('Event analytics create error: ', err);
+      res.data = err;
+    }
+    return res;
+  };
+
+  getSavedObject = async (request: any) => {
+    const params = {};
+    for (const [param, value] of request.url.searchParams.entries()) {
+      params[param] = value;
+    }
+    return this.fetch(
+      request,
+      {
+        ...params
+      },
+      'observability.getObject'
+    );
+  };
+
+  createSavedQuery = async (request: any) => {
+    return this.create(request, 'observability.createObject', 'savedQuery');
+  };
+
+  createSavedVisualization = (request: any) => {
+    return this.create(request, 'observability.createObject', 'savedVisualization');
+  };
+
+  createSavedTimestamp = (request: any) => {
+    return this.createTimestamp(request, 'observability.createObject');
+  };
+
+  updateSavedTimestamp = (request: any) => {
+    return this.updateTimestamp(request, 'observability.updateObjectById');
+  };
+
+  updateSavedQuery = (request: any) => {
+    return this.update(request, 'observability.updateObjectById', 'savedQuery');
+  };
+
+  updateSavedVisualization = (request: any) => {
+    return this.update(request, 'observability.updateObjectById', 'savedVisualization');
+  };
+
+  deleteSavedObject = async (request: any) => {
+    return this.delete(request, 'observability.deleteObjectByIdList');
+  };
+
+  createSampleSavedObjects = async (request: any) => {
+    return this.createSamples(request, 'observability.createObject');
+  };
+}
diff --git a/server/services/queryService.ts b/server/services/queryService.ts
new file mode 100644
index 0000000000..f0896ca41f
--- /dev/null
+++ b/server/services/queryService.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import 'core-js/stable';
+import 'regenerator-runtime/runtime';
+import _ from 'lodash';
+
+export default class QueryService {
+  private client: any;
+  constructor(client: any) {
+    this.client = client;
+  }    
+
+  describeQueryInternal = async (request: any, format: string, responseFormat: string) => {
+    try {
+      const queryRequest = {
+        query: request.body
+      };
+      const params = {
+        body: JSON.stringify(queryRequest),
+      };
+      const queryResponse = await this.client.asScoped(request).callAsCurrentUser(format, params);
+      return {
+        data: {
+          ok: true,
+          resp: _.isEqual(responseFormat, 'json') ? JSON.stringify(queryResponse) : queryResponse,
+        },
+      };
+    } catch (err) {
+      console.error(err);
+      return {
+        data: {
+          ok: false,
+          resp: err.response,
+          body: err.body
+        },
+      };
+    }
+  };
+
+  describeSQLQuery = async (request: any) => {
+    return this.describeQueryInternal(request, 'ppl.sqlQuery', 'json');
+  }
+
+  describePPLQuery = async (request: any) => {
+    return this.describeQueryInternal(request, 'ppl.pplQuery', 'json');
+  }
+}
diff --git a/server/services/utils/constants.ts b/server/services/utils/constants.ts
new file mode 100644
index 0000000000..57537a653c
--- /dev/null
+++ b/server/services/utils/constants.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const SQL_TRANSLATE_ROUTE = `/_plugins/_sql/_explain`;
+export const PPL_TRANSLATE_ROUTE = `/_plugins/_ppl/_explain`;
+export const SQL_QUERY_ROUTE = `/_plugins/_sql`;
+export const PPL_QUERY_ROUTE = `/_plugins/_ppl`;
+export const FORMAT_CSV = `format=csv`;
+export const FORMAT_JSON = `format=json`;
+export const FORMAT_TEXT = `format=raw`;
+
+export const DEFAULT_HEADERS = {
+  'Content-Type': 'application/json',
+  Accept: 'application/json',
+};
+
+export const CLUSTER = {
+  ADMIN: 'admin',
+  SQL: 'opensearch-sql',
+  DATA: 'data',
+};
diff --git a/server/types.ts b/server/types.ts
new file mode 100644
index 0000000000..e936737f3b
--- /dev/null
+++ b/server/types.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ObservabilityPluginSetup {}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface ObservabilityPluginStart {}
diff --git a/test/__mocks__/coreMocks.ts b/test/__mocks__/coreMocks.ts
new file mode 100644
index 0000000000..5e2a10d8d1
--- /dev/null
+++ b/test/__mocks__/coreMocks.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { CoreStart } from '../../../../src/core/public';
+import httpClientMock from './httpClientMock';
+import { of } from 'rxjs';
+
+const coreStartMock = ({
+  uiSettings: {
+    get: jest.fn(),
+  },
+  chrome: {
+    setBreadcrumbs: jest.fn(),
+    getIsNavDrawerLocked$: jest.fn(() => of(true)),
+  },
+  notifications: {
+    toasts: {
+      addDanger: jest.fn().mockName('addDanger'),
+      addSuccess: jest.fn().mockName('addSuccess'),
+      addError: jest.fn().mockName('addError'),
+    },
+  },
+  http: httpClientMock,
+} as unknown) as CoreStart;
+
+export { coreStartMock };
diff --git a/test/__mocks__/fileMock.js b/test/__mocks__/fileMock.js
new file mode 100644
index 0000000000..cac247b7c1
--- /dev/null
+++ b/test/__mocks__/fileMock.js
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+module.exports = 'file-stub';
diff --git a/test/__mocks__/httpClientMock.ts b/test/__mocks__/httpClientMock.ts
new file mode 100644
index 0000000000..fcdf766da0
--- /dev/null
+++ b/test/__mocks__/httpClientMock.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { HttpSetup } from "../../../../src/core/public";
+
+const httpClientMock = jest.fn() as any;
+
+httpClientMock.delete = jest.fn(() => ({
+  then: jest.fn(() => ({
+    catch: jest.fn(),
+  })),
+}));
+httpClientMock.get = jest.fn(() => ({
+  then: jest.fn(() => ({
+    catch: jest.fn(),
+  })),
+}));
+httpClientMock.head = jest.fn();
+httpClientMock.post = jest.fn(() => ({
+  then: jest.fn(() => ({
+    catch: jest.fn(),
+  })),
+}));
+httpClientMock.put = jest.fn(() => ({
+  then: jest.fn(() => ({
+    catch: jest.fn(),
+  })),
+}));
+
+export default httpClientMock as HttpSetup;
\ No newline at end of file
diff --git a/test/__mocks__/styleMock.js b/test/__mocks__/styleMock.js
new file mode 100644
index 0000000000..28de3c8b1e
--- /dev/null
+++ b/test/__mocks__/styleMock.js
@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+module.exports = {};
diff --git a/test/constants.ts b/test/constants.ts
new file mode 100644
index 0000000000..8a4fc127d6
--- /dev/null
+++ b/test/constants.ts
@@ -0,0 +1,502 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const TEST_SPAN_RESPONSE = {
+  took: 1,
+  timed_out: false,
+  _shards: {
+    total: 1,
+    successful: 1,
+    skipped: 0,
+    failed: 0,
+  },
+  hits: {
+    total: {
+      value: 3,
+      relation: 'eq',
+    },
+    max_score: 4.4400907,
+    hits: [
+      {
+        _index: 'otel-v1-apm-span-000001',
+        _type: '_doc',
+        _id: '67c279e1100d75c3',
+        _score: 4.4400907,
+        _source: {
+          traceId: '03f9c770db5ee2f1caac0afc36db49ba',
+          spanId: '67c279e1100d75c3',
+          traceState: '',
+          parentSpanId: '',
+          name: 'client_pay_order',
+          kind: 'SPAN_KIND_INTERNAL',
+          startTime: '2021-03-25T17:23:45.724285696Z',
+          endTime: '2021-03-25T17:23:45.949285120Z',
+          durationInNanos: 224999424,
+          serviceName: 'frontend-client',
+          events: [],
+          links: [],
+          droppedAttributesCount: 0,
+          droppedEventsCount: 0,
+          droppedLinksCount: 0,
+          traceGroup: 'client_pay_order',
+          'traceGroupFields.endTime': '2021-03-25T17:23:45.949285120Z',
+          'traceGroupFields.statusCode': 0,
+          'traceGroupFields.durationInNanos': 224999424,
+          'resource.attributes.telemetry@sdk@name': 'opentelemetry',
+          'resource.attributes.telemetry@sdk@language': 'python',
+          'resource.attributes.telemetry@sdk@version': '0.14b0',
+          'resource.attributes.service@name': 'frontend-client',
+          'resource.attributes.host@hostname': 'ip-172-31-10-8.us-west-2.compute.internal',
+          'status.code': 0,
+          'instrumentationLibrary.name': '__main__',
+        },
+      },
+      {
+        _index: 'otel-v1-apm-span-000001',
+        _type: '_doc',
+        _id: '11c4d645b0b6544a',
+        _score: 4.4400907,
+        _source: {
+          traceId: '03f9c770db5ee2f1caac0afc36db49ba',
+          spanId: '11c4d645b0b6544a',
+          traceState: '',
+          parentSpanId: 'e8e61cf518ff0d47',
+          name: 'pay_order',
+          kind: 'SPAN_KIND_SERVER',
+          startTime: '2021-03-25T17:23:45.728619520Z',
+          endTime: '2021-03-25T17:23:45.909096192Z',
+          durationInNanos: 180476672,
+          serviceName: 'order',
+          events: [],
+          links: [],
+          droppedAttributesCount: 0,
+          droppedEventsCount: 0,
+          droppedLinksCount: 0,
+          traceGroup: 'client_pay_order',
+          'traceGroupFields.endTime': '2021-03-25T17:23:45.949285120Z',
+          'traceGroupFields.statusCode': 0,
+          'traceGroupFields.durationInNanos': 224999424,
+          'span.attributes.net@peer@ip': '127.0.0.1',
+          'instrumentationLibrary.version': '0.14b0',
+          'resource.attributes.telemetry@sdk@language': 'python',
+          'span.attributes.host@port': 8088,
+          'span.attributes.http@status_text': 'OK',
+          'resource.attributes.telemetry@sdk@version': '0.14b0',
+          'resource.attributes.service@instance@id': '139858677314952',
+          'resource.attributes.service@name': 'order',
+          'span.attributes.component': 'http',
+          'status.code': 0,
+          'instrumentationLibrary.name': 'opentelemetry.instrumentation.flask',
+          'span.attributes.http@method': 'POST',
+          'span.attributes.http@user_agent': 'python-requests/2.25.1',
+          'span.attributes.net@peer@port': 56894,
+          'resource.attributes.telemetry@sdk@name': 'opentelemetry',
+          'span.attributes.http@server_name': '0.0.0.0',
+          'span.attributes.http@route': '/pay_order',
+          'span.attributes.http@host': 'localhost:8088',
+          'span.attributes.http@target': '/pay_order',
+          'span.attributes.http@scheme': 'http',
+          'resource.attributes.host@hostname': 'ip-172-31-10-8.us-west-2.compute.internal',
+          'span.attributes.http@flavor': '1.1',
+          'span.attributes.http@status_code': 200,
+        },
+      },
+      {
+        _index: 'otel-v1-apm-span-000001',
+        _type: '_doc',
+        _id: '421660af43ed2f96',
+        _score: 4.4400907,
+        _source: {
+          traceId: '03f9c770db5ee2f1caac0afc36db49ba',
+          spanId: '421660af43ed2f96',
+          traceState: '',
+          parentSpanId: 'a4869b984bdcdb69',
+          name: 'cart_sold',
+          kind: 'SPAN_KIND_INTERNAL',
+          startTime: '2021-03-25T17:23:45.745376768Z',
+          endTime: '2021-03-25T17:23:45.819226880Z',
+          durationInNanos: 73850112,
+          serviceName: 'database',
+          events: [],
+          links: [],
+          droppedAttributesCount: 0,
+          droppedEventsCount: 0,
+          droppedLinksCount: 0,
+          traceGroup: 'client_pay_order',
+          'traceGroupFields.endTime': '2021-03-25T17:23:45.949285120Z',
+          'traceGroupFields.statusCode': 0,
+          'traceGroupFields.durationInNanos': 224999424,
+          'resource.attributes.telemetry@sdk@name': 'opentelemetry',
+          'resource.attributes.telemetry@sdk@language': 'python',
+          'resource.attributes.telemetry@sdk@version': '0.14b0',
+          'resource.attributes.service@instance@id': '140307275923408',
+          'resource.attributes.service@name': 'database',
+          'resource.attributes.host@hostname': 'ip-172-31-10-8.us-west-2.compute.internal',
+          'status.code': 0,
+          'instrumentationLibrary.name': '__main__',
+        },
+      },
+    ],
+  },
+};
+export const TEST_SERVICE_MAP_GRAPH = {
+  graph: {
+    nodes: [
+      {
+        id: 1,
+        label: 'order',
+        size: 15,
+        title: 'order\n\nAverage latency: 90.1ms\nError rate: 4.17%\nThroughput: 48',
+        borderWidth: 0,
+        color: 'rgba(158, 134, 192, 1)',
+        font: {
+          color: 'rgba(72, 122, 180, 1)',
+        },
+      },
+      {
+        id: 2,
+        label: 'analytics-service',
+        size: 15,
+        title: 'analytics-service\n\nAverage latency: 12.99ms\nError rate: 0%\nThroughput: 37',
+        borderWidth: 0,
+        color: 'rgba(210, 202, 224, 1)',
+        font: {
+          color: 'rgba(72, 122, 180, 1)',
+        },
+      },
+      {
+        id: 3,
+        label: 'database',
+        size: 15,
+        title: 'database\n\nAverage latency: 49.54ms\nError rate: 3.77%\nThroughput: 53',
+        borderWidth: 0,
+        color: 'rgba(187, 171, 212, 1)',
+        font: {
+          color: 'rgba(72, 122, 180, 1)',
+        },
+      },
+      {
+        id: 4,
+        label: 'frontend-client',
+        size: 15,
+        title: 'frontend-client\n\nAverage latency: 207.71ms\nError rate: 7.41%\nThroughput: 27',
+        borderWidth: 0,
+        color: 'rgba(78, 42, 122, 1)',
+        font: {
+          color: 'rgba(72, 122, 180, 1)',
+        },
+      },
+      {
+        id: 5,
+        label: 'inventory',
+        size: 15,
+        title: 'inventory\n\nAverage latency: 183.52ms\nError rate: 3.23%\nThroughput: 31',
+        borderWidth: 0,
+        color: 'rgba(95, 61, 138, 1)',
+        font: {
+          color: 'rgba(72, 122, 180, 1)',
+        },
+      },
+      {
+        id: 6,
+        label: 'authentication',
+        size: 15,
+        title: 'authentication\n\nAverage latency: 139.09ms\nError rate: 8.33%\nThroughput: 12',
+        borderWidth: 0,
+        color: 'rgba(125, 95, 166, 1)',
+        font: {
+          color: 'rgba(72, 122, 180, 1)',
+        },
+      },
+      {
+        id: 7,
+        label: 'payment',
+        size: 15,
+        title: 'payment\n\nAverage latency: 134.36ms\nError rate: 9.09%\nThroughput: 11',
+        borderWidth: 0,
+        color: 'rgba(129, 99, 169, 1)',
+        font: {
+          color: 'rgba(72, 122, 180, 1)',
+        },
+      },
+      {
+        id: 8,
+        label: 'recommendation',
+        size: 15,
+        title: 'recommendation\n\nAverage latency: 176.97ms\nError rate: 6.25%\nThroughput: 16',
+        borderWidth: 0,
+        color: 'rgba(100, 66, 143, 1)',
+        font: {
+          color: 'rgba(72, 122, 180, 1)',
+        },
+      },
+    ],
+    edges: [
+      {
+        from: 1,
+        to: 2,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 1,
+        to: 3,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 4,
+        to: 1,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 4,
+        to: 7,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 4,
+        to: 6,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 5,
+        to: 2,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 5,
+        to: 3,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 6,
+        to: 2,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 6,
+        to: 8,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 7,
+        to: 2,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 7,
+        to: 5,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 8,
+        to: 2,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+      {
+        from: 8,
+        to: 5,
+        color: 'rgba(0, 0, 0, 1)',
+      },
+    ],
+  },
+};
+export const TEST_SERVICE_MAP = {
+  order: {
+    serviceName: 'order',
+    id: 1,
+    traceGroups: [
+      {
+        traceGroup: 'client_cancel_order',
+        targetResource: ['clear_order'],
+      },
+      {
+        traceGroup: 'client_create_order',
+        targetResource: ['update_order'],
+      },
+      {
+        traceGroup: 'client_delivery_status',
+        targetResource: ['get_order'],
+      },
+      {
+        traceGroup: 'client_pay_order',
+        targetResource: ['pay_order'],
+      },
+    ],
+    targetServices: ['analytics-service', 'database'],
+    destServices: ['frontend-client'],
+    latency: 90.1,
+    error_rate: 4.17,
+    throughput: 48,
+  },
+  'analytics-service': {
+    serviceName: 'analytics-service',
+    id: 2,
+    traceGroups: [
+      {
+        traceGroup: 'client_cancel_order',
+        targetResource: ['/logs'],
+      },
+      {
+        traceGroup: 'client_checkout',
+        targetResource: ['/logs'],
+      },
+      {
+        traceGroup: 'client_create_order',
+        targetResource: ['/logs'],
+      },
+      {
+        traceGroup: 'client_delivery_status',
+        targetResource: ['/logs'],
+      },
+      {
+        traceGroup: 'client_pay_order',
+        targetResource: ['/logs'],
+      },
+      {
+        traceGroup: 'load_main_screen',
+        targetResource: ['/logs'],
+      },
+    ],
+    targetServices: [],
+    destServices: ['order', 'inventory', 'authentication', 'payment', 'recommendation'],
+    latency: 12.99,
+    error_rate: 0,
+    throughput: 37,
+  },
+  database: {
+    serviceName: 'database',
+    id: 3,
+    traceGroups: [
+      {
+        traceGroup: 'client_cancel_order',
+        targetResource: ['cartEmpty'],
+      },
+      {
+        traceGroup: 'client_checkout',
+        targetResource: ['updateItem'],
+      },
+      {
+        traceGroup: 'client_create_order',
+        targetResource: ['addItemToCart'],
+      },
+      {
+        traceGroup: 'client_delivery_status',
+        targetResource: ['getCart'],
+      },
+      {
+        traceGroup: 'client_pay_order',
+        targetResource: ['cartSold'],
+      },
+      {
+        traceGroup: 'load_main_screen',
+        targetResource: ['getIntentory'],
+      },
+    ],
+    targetServices: [],
+    destServices: ['order', 'inventory'],
+    latency: 49.54,
+    error_rate: 3.77,
+    throughput: 53,
+  },
+  'frontend-client': {
+    serviceName: 'frontend-client',
+    id: 4,
+    traceGroups: [
+      {
+        traceGroup: 'client_cancel_order',
+        targetResource: [],
+      },
+      {
+        traceGroup: 'client_checkout',
+        targetResource: [],
+      },
+      {
+        traceGroup: 'client_create_order',
+        targetResource: [],
+      },
+      {
+        traceGroup: 'client_delivery_status',
+        targetResource: [],
+      },
+      {
+        traceGroup: 'client_pay_order',
+        targetResource: [],
+      },
+      {
+        traceGroup: 'load_main_screen',
+        targetResource: [],
+      },
+    ],
+    targetServices: ['order', 'payment', 'authentication'],
+    destServices: [],
+    latency: 207.71,
+    error_rate: 7.41,
+    throughput: 27,
+  },
+  inventory: {
+    serviceName: 'inventory',
+    id: 5,
+    traceGroups: [
+      {
+        traceGroup: 'client_checkout',
+        targetResource: ['update_inventory'],
+      },
+      {
+        traceGroup: 'load_main_screen',
+        targetResource: ['read_inventory'],
+      },
+    ],
+    targetServices: ['analytics-service', 'database'],
+    destServices: ['payment', 'recommendation'],
+    latency: 183.52,
+    error_rate: 3.23,
+    throughput: 31,
+  },
+  authentication: {
+    serviceName: 'authentication',
+    id: 6,
+    traceGroups: [
+      {
+        traceGroup: 'load_main_screen',
+        targetResource: ['server_request_login'],
+      },
+    ],
+    targetServices: ['analytics-service', 'recommendation'],
+    destServices: ['frontend-client'],
+    latency: 139.09,
+    error_rate: 8.33,
+    throughput: 12,
+  },
+  payment: {
+    serviceName: 'payment',
+    id: 7,
+    traceGroups: [
+      {
+        traceGroup: 'client_checkout',
+        targetResource: ['payment'],
+      },
+    ],
+    targetServices: ['analytics-service', 'inventory'],
+    destServices: ['frontend-client'],
+    latency: 134.36,
+    error_rate: 9.09,
+    throughput: 11,
+  },
+  recommendation: {
+    serviceName: 'recommendation',
+    id: 8,
+    traceGroups: [
+      {
+        traceGroup: 'load_main_screen',
+        targetResource: ['recommend'],
+      },
+    ],
+    targetServices: ['analytics-service', 'inventory'],
+    destServices: ['authentication'],
+    latency: 176.97,
+    error_rate: 6.25,
+    throughput: 16,
+  },
+};
diff --git a/test/event_analytics_constants.ts b/test/event_analytics_constants.ts
new file mode 100644
index 0000000000..bcb75afafa
--- /dev/null
+++ b/test/event_analytics_constants.ts
@@ -0,0 +1,566 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { LONG_CHART_COLOR, VIS_CHART_TYPES } from '../common/constants/shared';
+import { createBarTypeDefinition } from '../public/components/visualizations/charts/bar/bar_type';
+import { createGaugeTypeDefinition } from '../public/components/visualizations/charts/financial/gauge/gauge_type';
+import { createMetricsTypeDefinition } from '../public/components/visualizations/charts/metrics/metrics_type';
+import {
+  SELECTED_FIELDS,
+  AVAILABLE_FIELDS as AVAILABLE_FIELDS_NAME,
+  UNSELECTED_FIELDS,
+  QUERIED_FIELDS,
+} from '../common/constants/explorer';
+
+export const AVAILABLE_FIELDS = [
+  {
+    name: 'agent',
+    type: 'string',
+  },
+  {
+    name: 'bytes',
+    type: 'long',
+  },
+  {
+    name: 'clientip',
+    type: 'ip',
+  },
+  {
+    name: 'event',
+    type: 'struct',
+  },
+  {
+    name: 'extension',
+    type: 'string',
+  },
+  {
+    name: 'geo',
+    type: 'struct',
+  },
+  {
+    name: 'host',
+    type: 'string',
+  },
+  {
+    name: 'index',
+    type: 'string',
+  },
+  {
+    name: 'ip',
+    type: 'ip',
+  },
+  {
+    name: 'machine',
+    type: 'struct',
+  },
+  {
+    name: 'memory',
+    type: 'double',
+  },
+  {
+    name: 'message',
+    type: 'string',
+  },
+  {
+    name: 'phpmemory',
+    type: 'long',
+  },
+  {
+    name: 'referer',
+    type: 'string',
+  },
+  {
+    name: 'request',
+    type: 'string',
+  },
+  {
+    name: 'response',
+    type: 'string',
+  },
+  {
+    name: 'tags',
+    type: 'string',
+  },
+  {
+    name: 'timestamp',
+    type: 'timestamp',
+  },
+  {
+    name: 'url',
+    type: 'string',
+  },
+  {
+    name: 'utc_time',
+    type: 'timestamp',
+  },
+];
+
+export const QUERY_FIELDS = [
+  {
+    name: 'double_per_ip_bytes',
+    type: 'long',
+  },
+  {
+    name: 'host',
+    type: 'text',
+  },
+  {
+    name: 'ip_count',
+    type: 'integer',
+  },
+  {
+    name: 'per_ip_bytes',
+    type: 'long',
+  },
+  {
+    name: 'resp_code',
+    type: 'text',
+  },
+  {
+    name: 'sum_bytes',
+    type: 'long',
+  },
+];
+
+export const JSON_DATA = [
+  {
+    ip_count: 176,
+    sum_bytes: 1021420,
+    host: 'artifacts.opensearch.org',
+    resp_code: '404',
+    per_ip_bytes: 5803,
+    double_per_ip_bytes: 11606,
+  },
+  {
+    ip_count: 111,
+    sum_bytes: 560638,
+    host: 'www.opensearch.org',
+    resp_code: '404',
+    per_ip_bytes: 5050,
+    double_per_ip_bytes: 10100,
+  },
+  {
+    ip_count: 94,
+    sum_bytes: 0,
+    host: 'artifacts.opensearch.org',
+    resp_code: '503',
+    per_ip_bytes: 0,
+    double_per_ip_bytes: 0,
+  },
+  {
+    ip_count: 78,
+    sum_bytes: 0,
+    host: 'www.opensearch.org',
+    resp_code: '503',
+    per_ip_bytes: 0,
+    double_per_ip_bytes: 0,
+  },
+  {
+    ip_count: 43,
+    sum_bytes: 247840,
+    host: 'cdn.opensearch-opensearch-opensearch.org',
+    resp_code: '404',
+    per_ip_bytes: 5763,
+    double_per_ip_bytes: 11526,
+  },
+  {
+    ip_count: 34,
+    sum_bytes: 0,
+    host: 'cdn.opensearch-opensearch-opensearch.org',
+    resp_code: '503',
+    per_ip_bytes: 0,
+    double_per_ip_bytes: 0,
+  },
+  {
+    ip_count: 13,
+    sum_bytes: 57735,
+    host: 'opensearch-opensearch-opensearch.org',
+    resp_code: '404',
+    per_ip_bytes: 4441,
+    double_per_ip_bytes: 8882,
+  },
+  {
+    ip_count: 6,
+    sum_bytes: 0,
+    host: 'opensearch-opensearch-opensearch.org',
+    resp_code: '503',
+    per_ip_bytes: 0,
+    double_per_ip_bytes: 0,
+  },
+];
+
+export const JSON_DATA_ALL = [
+  {
+    referer: 'http://twitter.com/success/wendy-lawrence',
+    request: '/opensearch/opensearch-1.0.0.deb',
+    agent: 'Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1',
+    extension: 'deb',
+    memory: 'null',
+    geo:
+      '{"srcdest":"IN:US","src":"IN","coordinates":{"lat":39.41042861,"lon":-88.8454325},"dest":"US"}',
+    utc_time: '2021-11-14 00:39:02.912',
+    clientip: '223.87.60.27',
+    host: 'artifacts.opensearch.org',
+    event: '{"dataset":"sample_web_logs"}',
+    phpmemory: 'null',
+    timestamp: '2021-11-14 00:39:02.912',
+    ip: '223.87.60.27',
+    index: 'opensearch_dashboards_sample_data_logs',
+    message:
+      '223.87.60.27 - - [2018-07-22T00:39:02.912Z] "GET /opensearch/opensearch-1.0.0.deb_1 HTTP/1.1" 200 6219 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1"',
+    url: 'https://artifacts.opensearch.org/downloads/opensearch/opensearch-1.0.0.deb_1',
+    tags: 'success',
+    bytes: 6219,
+    machine: '{"os":"win 8","ram":8589934592}',
+    response: '200',
+  },
+  {
+    referer: 'http://www.opensearch-opensearch-opensearch.com/success/james-mcdivitt',
+    request: '/beats/metricbeat',
+    agent: 'Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1',
+    extension: '',
+    memory: 'null',
+    geo:
+      '{"srcdest":"JP:IN","src":"JP","coordinates":{"lat":38.58338806,"lon":-86.46248778},"dest":"IN"}',
+    utc_time: '2021-11-14 03:26:21.326',
+    clientip: '130.246.123.197',
+    host: 'www.opensearch.org',
+    event: '{"dataset":"sample_web_logs"}',
+    phpmemory: 'null',
+    timestamp: '2021-11-14 03:26:21.326',
+    ip: '130.246.123.197',
+    index: 'opensearch_dashboards_sample_data_logs',
+    message:
+      '130.246.123.197 - - [2018-07-22T03:26:21.326Z] "GET /beats/metricbeat_1 HTTP/1.1" 200 6850 "-" "Mozilla/5.0 (X11; Linux x86_64; rv:6.0a1) Gecko/20110421 Firefox/6.0a1"',
+    url: 'https://www.opensearch.org/downloads/beats/metricbeat_1',
+    tags: 'success',
+    bytes: 6850,
+    machine: '{"os":"win 8","ram":3221225472}',
+    response: '200',
+  },
+  {
+    referer: 'http://twitter.com/success/konstantin-feoktistov',
+    request: '/styles/main.css',
+    agent:
+      'Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24',
+    extension: 'css',
+    memory: 'null',
+    geo:
+      '{"srcdest":"CO:DE","src":"CO","coordinates":{"lat":36.96015,"lon":-78.18499861},"dest":"DE"}',
+    utc_time: '2021-11-14 03:30:25.131',
+    clientip: '120.49.143.213',
+    host: 'cdn.opensearch-opensearch-opensearch.org',
+    event: '{"dataset":"sample_web_logs"}',
+    phpmemory: 'null',
+    timestamp: '2021-11-14 03:30:25.131',
+    ip: '120.49.143.213',
+    index: 'opensearch_dashboards_sample_data_logs',
+    message:
+      '120.49.143.213 - - [2018-07-22T03:30:25.131Z] "GET /styles/main.css_1 HTTP/1.1" 503 0 "-" "Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.50 Safari/534.24"',
+    url: 'https://cdn.opensearch-opensearch-opensearch.org/styles/main.css_1',
+    tags: 'success',
+    bytes: 0,
+    machine: '{"os":"ios","ram":20401094656}',
+    response: '503',
+  },
+];
+
+export const AGENT_FIELD = {
+  name: 'agent',
+  type: 'string',
+};
+
+export const SAVED_HISTORIES = [
+  {
+    createdTimeMs: '1638901792922',
+    lastUpdatedTimeMs: '1638901792922',
+    objectId: 'Kocoln0BYMuJGDsOwDma',
+    savedVisualization: {
+      description: '',
+      name: 'Mock Flight count by destination save to panel',
+      query:
+        'source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier',
+      type: 'bar',
+      selected_date_range: {
+        end: 'now',
+        start: 'now-15m',
+        text: '',
+      },
+      selected_fields: {
+        text: '',
+        tokens: [],
+      },
+      selected_timestamp: {
+        name: 'timestamp',
+        type: 'timestamp',
+      },
+    },
+    tenant: '',
+  },
+  {
+    createdTimeMs: '1638901777572',
+    lastUpdatedTimeMs: '1638901777572',
+    objectId: 'KIcoln0BYMuJGDsOhDmk',
+    savedVisualization: {
+      description: '',
+      name: 'Mock Flight count by destination',
+      query:
+        'source = opensearch_dashboards_sample_data_flights | stats avg(FlightDelayMin) by Carrier',
+      type: 'bar',
+      selected_date_range: {
+        end: 'now',
+        start: 'now-15m',
+        text: '',
+      },
+      selected_fields: {
+        text: '',
+        tokens: [],
+      },
+      selected_timestamp: {
+        name: 'timestamp',
+        type: 'timestamp',
+      },
+    },
+    tenant: '',
+  },
+];
+
+export const SELECTED_PANELS_OPTIONS = [
+  {
+    label: '[Logs] Web traffic Panel',
+    panel: {
+      dateCreated: 1637781403888,
+      dateModified: 1637781403888,
+      id: 'uRZgU30B661cwDZT-ILw',
+      name: '[Logs] Web traffic Panel',
+    },
+  },
+  {
+    label: '[Logs] Web traffic Panel 2',
+    panel: {
+      dateCreated: 1637781403888,
+      dateModified: 1637781403888,
+      id: 'uRZgU30B661cwDZT-ILw',
+      name: '[Logs] Web traffic Panel',
+    },
+  },
+];
+
+export const DATA_GRID_ROWS = [
+  {
+    AvgTicketPrice: 841.2656,
+    Cancelled: 'false',
+    Carrier: 'OpenSearch Dashboards Airlines',
+    Dest: 'Sydney Kingsford Smith International Airport',
+    DestAirportID: 'SYD',
+    DestCityName: 'Sydney',
+    DestCountry: 'AU',
+    DestLocation: '{"lat":-33.94609833,"lon":151.177002}',
+    DestRegion: 'SE-BD',
+    DestWeather: 'Rain',
+    DistanceKilometers: 16492.326,
+    DistanceMiles: 10247.856,
+    FlightDelay: 'false',
+    FlightDelayMin: 0,
+    FlightDelayType: 'No Delay',
+    FlightNum: '9HY9SWR',
+    FlightTimeHour: '17.179506930998397',
+    FlightTimeMin: 1030.7704,
+    Origin: 'Frankfurt am Main Airport',
+    OriginAirportID: 'FRA',
+    OriginCityName: 'Frankfurt am Main',
+    OriginCountry: 'DE',
+    OriginLocation: '{"lat":50.033333,"lon":8.570556}',
+    OriginRegion: 'DE-HE',
+    OriginWeather: 'Sunny',
+    dayOfWeek: 0,
+    timestamp: '2021-05-24 00:00:00',
+  },
+  {
+    AvgTicketPrice: 882.98267,
+    Cancelled: 'false',
+    Carrier: 'Logstash Airways',
+    Dest: 'Venice Marco Polo Airport',
+    DestAirportID: 'VE05',
+    DestCityName: 'Venice',
+    DestCountry: 'IT',
+    DestLocation: '{"lat":45.505299,"lon":12.3519}',
+    DestRegion: 'IT-34',
+    DestWeather: 'Sunny',
+    DistanceKilometers: 8823.4,
+    DistanceMiles: 5482.6064,
+    FlightDelay: 'false',
+    FlightDelayMin: 0,
+    FlightDelayType: 'No Delay',
+    FlightNum: 'X98CCZO',
+    FlightTimeHour: '7.73982468459836',
+    FlightTimeMin: 464.3895,
+    Origin: 'Cape Town International Airport',
+    OriginAirportID: 'CPT',
+    OriginCityName: 'Cape Town',
+    OriginCountry: 'ZA',
+    OriginLocation: '{"lat":-33.96480179,"lon":18.60169983}',
+    OriginRegion: 'SE-BD',
+    OriginWeather: 'Clear',
+    dayOfWeek: 0,
+    timestamp: '2021-05-24 18:27:00',
+  },
+];
+
+export const SAMPLE_VISUALIZATIONS = {
+  data: {
+    'count()': [2549, 9337, 1173],
+    'span(timestamp,1M)': ['2021-05-01 00:00:00', '2021-06-01 00:00:00', '2021-07-01 00:00:00'],
+  },
+  jsonData: [
+    {
+      'count()': 2549,
+      'span(timestamp,1M)': '2021-05-01 00:00:00',
+    },
+    {
+      'count()': 9337,
+      'span(timestamp,1M)': '2021-06-01 00:00:00',
+    },
+    {
+      'count()': 2549,
+      'span(timestamp,1M)': '2021-07-01 00:00:00',
+    },
+  ],
+  metadata: {
+    fields: [
+      {
+        name: 'count()',
+        type: 'integer',
+      },
+      {
+        name: 'span(timestamp,1M)',
+        type: 'timestamp',
+      },
+    ],
+  },
+};
+
+export const VISUALIZATION_TYPES = [
+  {
+    fulllabel: 'Bar',
+    id: 'bar',
+    label: 'bar',
+    selection: {
+      dataLoss: 'nothing',
+    },
+    visualizationid: 'vis-bar-6636',
+  },
+  {
+    fulllabel: 'H. Bar',
+    id: 'horizontal_bar',
+    label: 'H. Bar',
+    selection: {
+      dataLoss: 'nothing',
+    },
+    visualizationid: 'vis-bar-6637',
+  },
+  {
+    fulllabel: 'Line',
+    id: 'line',
+    label: 'line',
+    selection: {
+      dataLoss: 'nothing',
+    },
+    visualizationid: 'vis-bar-6638',
+  },
+];
+
+export const LAYOUT_CONFIG = {
+  showlegend: true,
+  margin: {
+    l: 60,
+    r: 10,
+    b: 15,
+    t: 30,
+    pad: 0,
+  },
+  height: 220,
+  colorway: [LONG_CHART_COLOR],
+};
+
+export const EXPLORER_FIELDS = {
+  [SELECTED_FIELDS]: [],
+  [UNSELECTED_FIELDS]: [],
+  [AVAILABLE_FIELDS_NAME]: AVAILABLE_FIELDS,
+  [QUERIED_FIELDS]: QUERY_FIELDS,
+};
+
+export const EXPLORER_VISUALIZATIONS = {
+  data: {
+    'count()': [154, 1753, 116, 468, 1964, 219],
+    tags: ['error', 'info', 'login', 'security', 'success', 'warning'],
+  },
+  jsonData: [
+    { 'count()': 154, tags: 'error' },
+    { 'count()': 1753, tags: 'info' },
+    { 'count()': 116, tags: 'login' },
+    { 'count()': 468, tags: 'security' },
+    { 'count()': 1964, tags: 'success' },
+    { 'count()': 219, tags: 'warning' },
+  ],
+  metadata: {
+    fields: [
+      { name: 'count()', type: 'integer' },
+      { name: 'tags', type: 'text' },
+    ],
+    size: 6,
+    status: 200,
+  },
+};
+
+export const VALUE_OPTIONS = {
+  dimensions: [{ name: 'tags', type: 'text', label: 'tags' }],
+  metrics: [{ name: 'count()', type: 'integer', label: 'count()', side: 'left' }],
+};
+
+export const TEST_VISUALIZATIONS_DATA = {
+  data: {
+    appData: { fromApp: false },
+    defaultAxes: {},
+    indexFields: EXPLORER_FIELDS,
+    query: {},
+    rawVizData: EXPLORER_VISUALIZATIONS,
+    userConfigs: {
+      dataConfig: {
+        valueOptions: VALUE_OPTIONS,
+      },
+    },
+  },
+  vis: createBarTypeDefinition({}),
+};
+
+export const PIE_TEST_VISUALIZATIONS_DATA = {
+  data: {
+    ...TEST_VISUALIZATIONS_DATA.data,
+    defaultAxes: {
+      xaxis: [{ name: 'tags', type: 'text' }],
+      yaxis: [{ name: 'count()', type: 'integer' }],
+    },
+  },
+  vis: {
+    ...TEST_VISUALIZATIONS_DATA.vis,
+  },
+};
+
+export const GAUGE_TEST_VISUALIZATIONS_DATA = {
+  ...TEST_VISUALIZATIONS_DATA,
+  vis: createGaugeTypeDefinition(),
+};
+
+export const METRICS_TEST_VISUALIZATIONS_DATA = {
+  ...TEST_VISUALIZATIONS_DATA,
+  vis: createMetricsTypeDefinition({}),
+};
+export const HORIZONTAL_BAR_TEST_VISUALIZATIONS_DATA = {
+  ...TEST_VISUALIZATIONS_DATA,
+  vis: createBarTypeDefinition({
+    type: VIS_CHART_TYPES.HorizontalBar,
+  }),
+};
diff --git a/test/jest.config.js b/test/jest.config.js
new file mode 100644
index 0000000000..7ce1f85d8e
--- /dev/null
+++ b/test/jest.config.js
@@ -0,0 +1,32 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+process.env.TZ = 'UTC';
+
+module.exports = {
+  rootDir: '../',
+  setupFiles: ['<rootDir>/test/setupTests.ts'],
+  setupFilesAfterEnv: ['<rootDir>/test/setup.jest.ts'],
+  roots: ['<rootDir>'],
+  testMatch: ['**/*.test.js', '**/*.test.jsx', '**/*.test.ts', '**/*.test.tsx'],
+  clearMocks: true,
+  modulePathIgnorePatterns: ['<rootDir>/offline-module-cache/'],
+  testPathIgnorePatterns: ['<rootDir>/build/', '<rootDir>/node_modules/'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  coveragePathIgnorePatterns: [
+    '<rootDir>/build/',
+    '<rootDir>/node_modules/',
+    '<rootDir>/test/',
+    '<rootDir>/public/requests/',
+  ],
+  transformIgnorePatterns: ['<rootDir>/node_modules'],
+  moduleNameMapper: {
+    '\\.(css|less|sass|scss)$': '<rootDir>/test/__mocks__/styleMock.js',
+    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
+    '\\@algolia/autocomplete-theme-classic$': '<rootDir>/test/__mocks__/styleMock.js',
+    "^!!raw-loader!.*": "jest-raw-loader",
+  },
+  testEnvironment: "jsdom",
+};
diff --git a/test/metrics_contants.ts b/test/metrics_contants.ts
new file mode 100644
index 0000000000..7fd2104689
--- /dev/null
+++ b/test/metrics_contants.ts
@@ -0,0 +1,325 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const sampleMetricsVisualizations = [
+  {
+    h: 2,
+    id: 'Y4muP4QBiaYaSxpXk7r8',
+    metricType: 'savedCustomMetric',
+    savedVisualizationId: 'Y4muP4QBiaYaSxpXk7r8',
+    w: 12,
+    x: 0,
+    y: 0,
+  },
+  {
+    h: 2,
+    id: 'tomAP4QBiaYaSxpXALls',
+    metricType: 'savedCustomMetric',
+    savedVisualizationId: 'tomAP4QBiaYaSxpXALls',
+    w: 12,
+    x: 0,
+    y: 2,
+  },
+  {
+    h: 2,
+    id: 'prometheus.process_resident_memory_bytes',
+    metricType: 'prometheusMetric',
+    savedVisualizationId: 'prometheus.process_resident_memory_bytes',
+    w: 12,
+    x: 0,
+    y: 4,
+  },
+];
+
+export const sampleMetric = {
+  name: 'new metric',
+  description: '',
+  query: 'source = opensearch_dashboards_sample_data_logs | stats count() by span(timestamp,1h)',
+  type: 'line',
+  selected_date_range: {
+    start: 'now-1d',
+    end: 'now',
+    text: '',
+  },
+  selected_timestamp: {
+    name: 'timestamp',
+    type: 'timestamp',
+  },
+  selected_fields: {
+    text: '',
+    tokens: [],
+  },
+  user_configs: '{}',
+  sub_type: 'metric',
+};
+
+export const sampleSortedMetricsLayout = [
+  {
+    h: 2,
+    id: 'Y4muP4QBiaYaSxpXk7r8',
+    metricType: 'savedCustomMetric',
+    savedVisualizationId: 'Y4muP4QBiaYaSxpXk7r8',
+    w: 12,
+    x: 0,
+    y: 0,
+  },
+  {
+    h: 2,
+    id: 'prometheus.process_resident_memory_bytes',
+    metricType: 'prometheusMetric',
+    savedVisualizationId: 'prometheus.process_resident_memory_bytes',
+    w: 12,
+    x: 0,
+    y: 2,
+  },
+];
+
+export const samplePanelOptions = [
+  {
+    dateCreated: 1667512665139,
+    dateModified: 1667513726084,
+    id: 'xImAP4QBiaYaSxpXBLkz',
+    name: '[Logs] Web traffic Panel',
+  },
+  {
+    dateCreated: 1667512677437,
+    dateModified: 1667525552909,
+    id: 'zYmAP4QBiaYaSxpXNLk9',
+    name: 'panel1',
+  },
+];
+
+export const sampleVisualizationById = {
+  id: 'Y4muP4QBiaYaSxpXk7r8',
+  name: 'new metric',
+  query: 'source = opensearch_dashboards_sample_data_logs | stats count() by span(timestamp,1h)',
+  type: 'line',
+  timeField: 'timestamp',
+  selected_date_range: {},
+  selected_fields: {},
+  user_configs: {},
+  sub_type: 'metric',
+};
+
+export const sampleAllAvailableMetrics = [
+  {
+    id: 'HIlAQYQBiaYaSxpXJ73K',
+    name: '[Prometheus Metric] prometheus.process_resident_memory_bytes',
+    catalog: 'CUSTOM_METRICS',
+    type: 'line',
+    recentlyCreated: true,
+  },
+  {
+    id: 'Y4muP4QBiaYaSxpXk7r8',
+    name: 'new metric',
+    catalog: 'CUSTOM_METRICS',
+    type: 'line',
+    recentlyCreated: false,
+  },
+  {
+    id: 'HolAQYQBiaYaSxpXKL0T',
+    name: '[Prometheus Metric] prometheus.go_memstats_heap_sys_bytes',
+    catalog: 'CUSTOM_METRICS',
+    type: 'line',
+    recentlyCreated: true,
+  },
+  {
+    id: 'tomAP4QBiaYaSxpXALls',
+    name: '[Logs] Average ram usage per day by windows os ',
+    catalog: 'CUSTOM_METRICS',
+    type: 'line',
+    recentlyCreated: false,
+  },
+  {
+    id: 'prometheus.process_resident_memory_bytes',
+    name: 'prometheus.process_resident_memory_bytes',
+    catalog: 'prometheus',
+    type: 'gauge',
+    recentlyCreated: false,
+  },
+];
+
+export const samplePanelVisualizations1 = [
+  {
+    id: 'Y4muP4QBiaYaSxpXk7r8',
+    savedVisualizationId: 'Y4muP4QBiaYaSxpXk7r8',
+    x: 0,
+    y: 0,
+    h: 2,
+    w: 12,
+    metricType: 'savedCustomMetric',
+  },
+];
+
+export const samplenewDimensions1 = {
+  x: 0,
+  y: 2,
+  w: 12,
+  h: 2,
+};
+
+export const samplePanelVisualizations2 = [
+  {
+    id: 'Y4muP4QBiaYaSxpXk7r8',
+    savedVisualizationId: 'Y4muP4QBiaYaSxpXk7r8',
+    x: 0,
+    y: 0,
+    h: 2,
+    w: 12,
+    metricType: 'savedCustomMetric',
+  },
+  {
+    id: 'tomAP4QBiaYaSxpXALls',
+    savedVisualizationId: 'tomAP4QBiaYaSxpXALls',
+    x: 0,
+    y: 2,
+    h: 2,
+    w: 12,
+    metricType: 'savedCustomMetric',
+  },
+];
+
+export const samplenewDimensions2 = {
+  x: 0,
+  y: 4,
+  w: 12,
+  h: 2,
+};
+
+export const samplePrometheusVisualizationId = 'prometheus.process_resident_memory_bytes';
+
+export const samplePrometheusVisualizationComponent = {
+  name: '[Prometheus Metric] prometheus.process_resident_memory_bytes',
+  description: '',
+  query:
+    'source = prometheus.process_resident_memory_bytes | stats avg(@value) by span(@timestamp,1h)',
+  type: 'line',
+  timeField: '@timestamp',
+  selected_fields: {
+    text: '',
+    tokens: [],
+  },
+  sub_type: 'metric',
+  user_configs: {},
+};
+
+export const sampleVisualizationsList = [
+  {
+    id: 'panel_viz_ed409e13-4759-4e0f-9bc1-6ae32999318e',
+    savedVisualizationId: 'savedCustomMetric',
+    x: 0,
+    y: 0,
+    w: 6,
+    h: 4,
+  },
+  {
+    id: 'panel_viz_f59ad102-943e-48d9-9c0a-3df7055070a3',
+    savedVisualizationId: 'prometheusMetric',
+    x: 0,
+    y: 4,
+    w: 6,
+    h: 4,
+  },
+];
+
+export const sampleLayout = [
+  { i: 'panel_viz_ed409e13-4759-4e0f-9bc1-6ae32999318e', x: 0, y: 0, w: 3, h: 2 },
+  { i: 'panel_viz_f59ad102-943e-48d9-9c0a-3df7055070a3', x: 3, y: 0, w: 6, h: 4 },
+];
+
+export const sampleMergedVisualizations = [
+  {
+    id: 'panel_viz_ed409e13-4759-4e0f-9bc1-6ae32999318e',
+    savedVisualizationId: 'savedCustomMetric',
+    x: 0,
+    y: 0,
+    w: 3,
+    h: 2,
+  },
+  {
+    id: 'panel_viz_f59ad102-943e-48d9-9c0a-3df7055070a3',
+    savedVisualizationId: 'prometheusMetric',
+    x: 3,
+    y: 0,
+    w: 6,
+    h: 4,
+  },
+];
+
+export const samplePrometheusSampleUpdateWithSelections = {
+  dateRange: ['now-1d', 'now'],
+  description: '',
+  fields: [],
+  name: '[Prometheus Metric] prometheus.process_resident_memory_bytes',
+  query:
+    'source = prometheus.process_resident_memory_bytes | stats avg(@value) by span(@timestamp,1h)',
+  subType: 'metric',
+  timestamp: '@timestamp',
+  type: 'line',
+  userConfigs: '{}',
+};
+
+export const sampleSavedMetric = {
+  id: 'tomAP4QBiaYaSxpXALls',
+  name: '[Logs] Average ram usage per day by windows os ',
+  query:
+    "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1h)",
+  type: 'line',
+  timeField: 'timestamp',
+  selected_date_range: {
+    start: 'now-1d',
+    end: 'now',
+    text: '',
+  },
+  selected_fields: {
+    text: '',
+    tokens: [],
+  },
+  user_configs: {
+    dataConfig: {
+      series: [
+        {
+          label: 'machine.ram',
+          name: 'machine.ram',
+          aggregation: 'avg',
+          customLabel: '',
+        },
+      ],
+      dimensions: [],
+      span: {
+        time_field: [
+          {
+            name: 'timestamp',
+            type: 'timestamp',
+            label: 'timestamp',
+          },
+        ],
+        unit: [
+          {
+            text: 'Day',
+            value: 'd',
+            label: 'Day',
+          },
+        ],
+        interval: '1',
+      },
+    },
+  },
+  sub_type: 'metric',
+};
+
+export const sampleSavedMetricUpdate = {
+  dateRange: ['now-30m', 'now'],
+  description: undefined,
+  fields: [],
+  name: '[Logs] Average ram usage per day by windows os ',
+  query:
+    "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1m)",
+  subType: 'metric',
+  timestamp: 'timestamp',
+  type: 'line',
+  userConfigs:
+    '{"dataConfig":{"series":[{"label":"machine.ram","name":"machine.ram","aggregation":"avg","customLabel":""}],"dimensions":[],"span":{"time_field":[{"name":"timestamp","type":"timestamp","label":"timestamp"}],"unit":[{"text":"Day","value":"d","label":"Day"}],"interval":"1"}}}',
+};
diff --git a/test/panels_constants.tsx b/test/panels_constants.tsx
new file mode 100644
index 0000000000..b79dde38c0
--- /dev/null
+++ b/test/panels_constants.tsx
@@ -0,0 +1,208 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const panelBreadCrumbs = [
+  { text: 'Operational panels', href: '#/operational_panels/' },
+  { text: 'Observability', href: 'observability#/' },
+];
+
+export const sampleSavedVisualization = {
+  visualization: {
+    id: 'oiuccXwBYVazWqOO1e06',
+    name: 'Flight Count by Origin',
+    query:
+      'source=opensearch_dashboards_sample_data_flights | fields Carrier,FlightDelayMin | stats sum(FlightDelayMin) as delays by Carrier',
+    type: 'bar',
+    timeField: 'timestamp',
+  },
+};
+
+export const sampleSavedVisualizationForHorizontalBar = {
+  id: 'zgBSfYIBi5fNIzQywlQZ',
+  name: 'Horizontal',
+  query: 'source = opensearch_dashboards_sample_data_logs |  stats avg(machine.ram) by machine.os',
+  type: 'horizontal_bar',
+  timeField: 'timestamp',
+};
+
+export const sampleSavedVisualizationForLine = {
+  id: '4wANiYIBi5fNIzQySlRB',
+  name: '[Logs] Average ram usage per day by windows os ',
+  query:
+    "source = opensearch_dashboards_sample_data_logs | where match(machine.os,'win')  |  stats avg(machine.ram) by span(timestamp,1d)",
+  type: 'line',
+  timeField: 'timestamp',
+};
+
+export const sampleSavedVisualizationForTreeMap = {
+  id: '5QANiYIBi5fNIzQySlRL',
+  name: 'TreeMap1111',
+  query: 'source = opensearch_dashboards_sample_data_logs | stats count() by tags',
+  type: 'tree_map',
+  timeField: 'timestamp',
+};
+
+export const sampleSavedVisualizationForPie = {
+  id: '4gANiYIBi5fNIzQySlQ5',
+  name: 'PieChart',
+  query:
+    "source = opensearch_dashboards_sample_data_logs | where machine.os='osx' or  machine.os='ios' |  stats avg(machine.ram) by span(timestamp,1d)",
+  type: 'pie',
+  timeField: 'timestamp',
+};
+
+export const samplePPLResponse = {
+  data: {
+    'avg(FlightDelayMin)': [
+      53.65384615384615,
+      45.36144578313253,
+      63.1578947368421,
+      46.81318681318681,
+    ],
+    Carrier: ['BeatsWest', 'Logstash Airways', 'OpenSearch Dashboards Airlines', 'OpenSearch-Air'],
+  },
+  metadata: {
+    fields: [
+      { name: 'avg(FlightDelayMin)', type: 'double' },
+      { name: 'Carrier', type: 'keyword' },
+    ],
+  },
+  size: 4,
+  status: 200,
+  jsonData: [
+    { 'avg(FlightDelayMin)': 53.65384615384615, Carrier: 'BeatsWest' },
+    { 'avg(FlightDelayMin)': 45.36144578313253, Carrier: 'Logstash Airways' },
+    { 'avg(FlightDelayMin)': 63.1578947368421, Carrier: 'OpenSearch Dashboards Airlines' },
+    { 'avg(FlightDelayMin)': 46.81318681318681, Carrier: 'OpenSearch-Air' },
+  ],
+};
+
+export const samplePPLEmptyResponse = {
+  data: { "count('ip')": [], 'span(timestamp,1h)': [] },
+  metadata: {
+    fields: [
+      { name: "count('ip')", type: 'integer' },
+      { name: 'span(timestamp,1h)', type: 'timestamp' },
+    ],
+  },
+  size: 0,
+  status: 200,
+  jsonData: [],
+};
+
+export const samplePanelVisualizations = [
+  {
+    id: 'panel_viz_ed409e13-4759-4e0f-9bc1-6ae32999318e',
+    savedVisualizationId: 'SMQu43wBDp0rvEg3jXMF',
+    x: 0,
+    y: 0,
+    w: 6,
+    h: 4,
+  },
+  {
+    id: 'panel_viz_f59ad102-943e-48d9-9c0a-3df7055070a3',
+    savedVisualizationId: 'ScQu43wBDp0rvEg34XNS',
+    x: 0,
+    y: 4,
+    w: 6,
+    h: 4,
+  },
+];
+
+export const sampleLayout = [
+  { i: 'panel_viz_ed409e13-4759-4e0f-9bc1-6ae32999318e', x: 0, y: 0, w: 3, h: 2 },
+  { i: 'panel_viz_f59ad102-943e-48d9-9c0a-3df7055070a3', x: 3, y: 0, w: 6, h: 4 },
+];
+
+export const sampleMergedVisualizations = [
+  {
+    id: 'panel_viz_ed409e13-4759-4e0f-9bc1-6ae32999318e',
+    savedVisualizationId: 'SMQu43wBDp0rvEg3jXMF',
+    x: 0,
+    y: 0,
+    w: 3,
+    h: 2,
+  },
+  {
+    id: 'panel_viz_f59ad102-943e-48d9-9c0a-3df7055070a3',
+    savedVisualizationId: 'ScQu43wBDp0rvEg34XNS',
+    x: 3,
+    y: 0,
+    w: 6,
+    h: 4,
+  },
+];
+
+export const panelsData = {
+  panels: [
+    {
+      name: 'Test Panel 1',
+      id: 'L8Sx53wBDp0rvEg3yoLb',
+      dateCreated: 1635974761179,
+      dateModified: 1635974771296,
+    },
+    {
+      name: 'Test Panel 2',
+      id: 'lsQfznwBDp0rvEg3W2wH',
+      dateCreated: 1635545733895,
+      dateModified: 1635979024055,
+    },
+    {
+      name: 'Test Panel 3',
+      id: 'b8Sc4nwBDp0rvEg3F3Fk',
+      dateCreated: 1635889452900,
+      dateModified: 1635979888682,
+    },
+    {
+      name: 'Test Panel 4',
+      id: 'P8Qd4nwBDp0rvEg39HG_',
+      dateCreated: 1635881186494,
+      dateModified: 1636049456718,
+    },
+  ],
+};
+
+export const samplePanel = {
+  objectId: 'L8Sx53wBDp0rvEg3yoLb',
+  lastUpdatedTimeMs: 1636053619774,
+  createdTimeMs: 1635545733895,
+  tenant: '',
+  operationalPanel: {
+    name: 'Test Panel 1',
+    visualizations: [
+      {
+        id: 'panel_viz_bae51802-b647-4c16-ac04-9cfa87aa0002',
+        savedVisualizationId: 'oiuccXwBYVazWqOO1e06',
+        x: 0,
+        y: 0,
+        w: 10,
+        h: 2,
+      },
+      {
+        id: 'panel_viz_8c47e96c-2494-407a-95e0-56a4790af2f5',
+        savedVisualizationId: 'oiuccXwBYVazWqOO1e06',
+        x: 0,
+        y: 2,
+        w: 6,
+        h: 4,
+      },
+    ],
+    timeRange: { to: 'now/y', from: 'now/y' },
+    queryFilter: { query: "where host = 'www.opensearch.org'", language: 'ppl' },
+  },
+};
+
+export const sampleEmptyPanel = {
+  objectId: 'L8Sx53wBDp0rvEg3yoLb',
+  lastUpdatedTimeMs: 1636053619774,
+  createdTimeMs: 1635545733895,
+  tenant: '',
+  operationalPanel: {
+    name: 'Test Panel 1',
+    visualizations: [],
+    timeRange: { to: 'now/y', from: 'now/y' },
+    queryFilter: { query: "where host = 'www.opensearch.org'", language: 'ppl' },
+  },
+};
diff --git a/test/setup.jest.ts b/test/setup.jest.ts
new file mode 100644
index 0000000000..4d14132895
--- /dev/null
+++ b/test/setup.jest.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// import '@testing-library/jest-dom/extend-expect';
+import { configure } from '@testing-library/react';
+
+configure({ testIdAttribute: 'data-test-subj' });
+
+window.URL.createObjectURL = () => '';
+HTMLCanvasElement.prototype.getContext = () => '';
+window.IntersectionObserver = class IntersectionObserver {
+  constructor() {}
+
+  disconnect() {
+    return null;
+  }
+
+  observe() {
+    return null;
+  }
+
+  takeRecords() {
+    return null;
+  }
+
+  unobserve() {
+    return null;
+  }
+};
+
+jest.mock('@elastic/eui/lib/components/form/form_row/make_id', () => () => 'random-id');
+
+jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => {
+    return () => 'random_html_id';
+  },
+}));
+
+jest.setTimeout(30000);
diff --git a/test/setupTests.ts b/test/setupTests.ts
new file mode 100644
index 0000000000..2a163c0996
--- /dev/null
+++ b/test/setupTests.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+require('babel-polyfill');
+require('core-js/stable');
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..58c31edea6
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  // extend OpenSearch Dashboards's tsconfig, or use your own settings
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "baseUrl": ".",
+    "target": "esnext",
+    "module": "commonjs",
+    "outDir": "./target",
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowUnusedLabels": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "alwaysStrict": false,
+    "noImplicitUseStrict": false,
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "test/**/*",
+    "index.ts",
+    "public/**/*.ts",
+    "public/**/*.tsx",
+    "server/**/*.ts",
+    "common/**/*.ts",
+    "../../typings/**/*"
+  ],
+  "exclude": ["node_modules", "*/node_modules/"]
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000000..ca8c27b93d
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,3082 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@algolia/autocomplete-core@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.4.1.tgz#b17ef0e3299d6159ab6041365893384ec75de204"
+  integrity sha512-LPX4nFA5HzS07UfEAzdXHi6vSUfwqJe8mikcg81ZnMTv+khRAMh3VxHAMUISAnHqI5NzEImbyPdSDpjgh9IPGQ==
+  dependencies:
+    "@algolia/autocomplete-shared" "1.4.1"
+
+"@algolia/autocomplete-shared@1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.4.1.tgz#d8f3b71dee1474a89989d359b434addacf140cdb"
+  integrity sha512-MGLj6on/809+xQi5dfOPv4EB6KruTfbkg1rZWQzDX5KrJuiu6CPHp/kk2JNyrEr2luiT0v7rxXWOz9XfxVReiQ==
+
+"@algolia/autocomplete-theme-classic@^1.2.1":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-theme-classic/-/autocomplete-theme-classic-1.3.0.tgz#68657b214ea49715116f702ae3eae2a5d6b8983d"
+  integrity sha512-npQlljLXAAdXL9chj98xvhNOIgInaX27SUfBfFeCds3YtnwI+ZOATiYUOl7/WkyzxXvwEMUIO1sUenlZuH8o0A==
+
+"@babel/code-frame@^7.0.0":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
+"@babel/highlight@^7.16.7":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.17.9.tgz#61b2ee7f32ea0454612def4fccdae0de232b73e3"
+  integrity sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
+  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.9.2":
+  version "7.14.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.8.tgz#7119a56f421018852694290b9f9148097391b446"
+  integrity sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@blueprintjs/colors@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-3.0.0.tgz#f121dc1bc24cc367668a425911fa8ff52e87014a"
+  integrity sha512-8rRkIcnnOwMEMAGDciKFdVQ3dZXvCkSGcgEzVR2ijopCvLZrrHf+ySzn8v7Y2d60A2Q2A3Of8NDrYbV32sBssg==
+
+"@blueprintjs/core@^3.49.1", "@blueprintjs/core@^3.7.0":
+  version "3.49.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-3.49.1.tgz#6824ddb11ce2858f0b009c8ae0c774547e3edb0a"
+  integrity sha512-H6UAYZeBZcGDQb24vEkFps0eKlkyKvy/B/OJ2elZjHC1B1Regv7TwIDjju9wgzZvzKCcCVZzUg9OqtH43V+1yA==
+  dependencies:
+    "@blueprintjs/colors" "^3.0.0"
+    "@blueprintjs/icons" "^3.29.0"
+    "@types/dom4" "^2.0.1"
+    classnames "^2.2"
+    dom4 "^2.1.5"
+    normalize.css "^8.0.1"
+    popper.js "^1.16.1"
+    react-lifecycles-compat "^3.0.4"
+    react-popper "^1.3.7"
+    react-transition-group "^2.9.0"
+    resize-observer-polyfill "^1.5.1"
+    tslib "~1.13.0"
+
+"@blueprintjs/icons@^3.29.0":
+  version "3.29.0"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-3.29.0.tgz#2e786c6264a1783f2df9423749236189a84c436e"
+  integrity sha512-FDpPsEBwzsFBsxDXNsea+u+bU+iFWcVTbKH05+jtGEpvDEOrpOsOwUYvkBvVaReR0DORREVye2/NL0/uvLCRrg==
+  dependencies:
+    classnames "^2.2"
+    tslib "~1.13.0"
+
+"@blueprintjs/select@^3.2.0":
+  version "3.18.1"
+  resolved "https://registry.yarnpkg.com/@blueprintjs/select/-/select-3.18.1.tgz#655219326c09c80adf2711c0dd17191034c92248"
+  integrity sha512-WwPkNLlNBy0Et0VuQDuxyo0UtBd6JPiWhR2F/xub8ZlYX7tayvXW5DaedtFlnS1OhNlPsolJTcJVoAgYy4Lnbw==
+  dependencies:
+    "@blueprintjs/core" "^3.49.1"
+    classnames "^2.2"
+    tslib "~1.13.0"
+
+"@cypress/listr-verbose-renderer@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#a77492f4b11dcc7c446a34b3e28721afd33c642a"
+  integrity sha1-p3SS9LEdzHxEajSz4ochr9M8ZCo=
+  dependencies:
+    chalk "^1.1.3"
+    cli-cursor "^1.0.2"
+    date-fns "^1.27.2"
+    figures "^1.7.0"
+
+"@cypress/request@^2.88.5":
+  version "2.88.5"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.5.tgz#8d7ecd17b53a849cfd5ab06d5abe7d84976375d7"
+  integrity sha512-TzEC1XMi1hJkywWpRfD2clreTa/Z+lOrXDCxxBTBPEcY5azdPi56A6Xw+O4tWJnaJH3iIE7G5aDXZC6JgRZLcA==
+  dependencies:
+    aws-sign2 "~0.7.0"
+    aws4 "^1.8.0"
+    caseless "~0.12.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
+    forever-agent "~0.6.1"
+    form-data "~2.3.2"
+    har-validator "~5.1.3"
+    http-signature "~1.2.0"
+    is-typedarray "~1.0.0"
+    isstream "~0.1.2"
+    json-stringify-safe "~5.0.1"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
+    performance-now "^2.1.0"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.5.0"
+    tunnel-agent "^0.6.0"
+    uuid "^3.3.2"
+
+"@cypress/skip-test@^2.6.1":
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/@cypress/skip-test/-/skip-test-2.6.1.tgz#44a4bc4c2b2e369a7661177c9b38e50d417a36ea"
+  integrity sha512-X+ibefBiuOmC5gKG91wRIT0/OqXeETYvu7zXktjZ3yLeO186Y8ia0K7/gQUpAwuUi28DuqMd1+7tBQVtPkzbPA==
+
+"@cypress/xvfb@^1.2.4":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@cypress/xvfb/-/xvfb-1.2.4.tgz#2daf42e8275b39f4aa53c14214e557bd14e7748a"
+  integrity sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==
+  dependencies:
+    debug "^3.1.0"
+    lodash.once "^4.1.1"
+
+"@danieldietrich/copy@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@danieldietrich/copy/-/copy-0.4.2.tgz#c1cabfa499d8b473ba95413c446c1c1efae64d24"
+  integrity sha512-ZVNZIrgb2KeomfNahP77rL445ho6aQj0HHqU6hNlQ61o4rhvca+NS+ePj0d82zQDq2UPk1mjVZBTXgP+ErsDgw==
+
+"@hypnosphi/create-react-context@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"
+  integrity sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==
+  dependencies:
+    gud "^1.0.0"
+    warning "^4.0.3"
+
+"@nteract/markdown@^4.5.2":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/@nteract/markdown/-/markdown-4.6.2.tgz#5e3dc44047f7af761b3fb8cf76f6d239e7bb65c3"
+  integrity sha512-WI+VvaiL9ihIkmPHCYSwziuMJcSUTKBi+hrf5V74jYYq1b5LWJyDa9O5B137KVEdgYwr0w4JiZHFm7wvEWXlZw==
+  dependencies:
+    "@nteract/mathjax" "^4.0.11"
+    "@nteract/presentational-components" "^3.3.11"
+    react-markdown "^4.0.0"
+
+"@nteract/mathjax@^4.0.11":
+  version "4.0.16"
+  resolved "https://registry.yarnpkg.com/@nteract/mathjax/-/mathjax-4.0.16.tgz#1889a7e4ece011c2321434edb304f6d8d2b7b727"
+  integrity sha512-eth384tJmOF2oNnHc3iqNwqZdFdNPZmnboY66aE7QRJvxZsYSUj0oHvERn3nXxFuVjv866xWGRc5zU+T4tPIDQ==
+  dependencies:
+    load-script "^1.0.0"
+
+"@nteract/outputs@^3.0.11":
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/@nteract/outputs/-/outputs-3.0.11.tgz#d49067d397612878c1a4069a896a11ad163c66fe"
+  integrity sha512-LeT9ViBf+fTPSubZ9dMe7128kg0rl1jIG54V0n2GiU5RuYnUz21FU0IOaLMPUfFMO1VyVEOW5jDc3PAQx5/Kwg==
+  dependencies:
+    "@nteract/markdown" "^4.5.2"
+    "@nteract/mathjax" "^4.0.11"
+    ansi-to-react "^6.0.5"
+    react-json-tree "^0.12.1"
+
+"@nteract/presentational-components@^3.3.11", "@nteract/presentational-components@^3.4.3":
+  version "3.4.11"
+  resolved "https://registry.yarnpkg.com/@nteract/presentational-components/-/presentational-components-3.4.11.tgz#4ab477d7cf4f7130d478f9bcf32b3c025bf48cd0"
+  integrity sha512-2lYcsYI6W0RLEs0ZUDn9kFJB8nCsnNtLDvOPSXuWaqhsSYo6Ml6nB/BFZeO9LZePvD/vTKQ4uJpR0INwLorU6Q==
+  dependencies:
+    "@blueprintjs/core" "^3.7.0"
+    "@blueprintjs/select" "^3.2.0"
+    classnames "^2.2.6"
+    re-resizable "^6.5.0"
+    react-syntax-highlighter "^13.0.0"
+    react-toggle "^4.1.1"
+
+"@reduxjs/toolkit@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.6.1.tgz#7bc83b47352a663bf28db01e79d17ba54b98ade9"
+  integrity sha512-pa3nqclCJaZPAyBhruQtiRwtTjottRrVJqziVZcWzI73i6L3miLTtUyWfauwv08HWtiXLx1xGyGt+yLFfW/d0A==
+  dependencies:
+    immer "^9.0.1"
+    redux "^4.1.0"
+    redux-thunk "^2.3.0"
+    reselect "^4.0.0"
+
+"@samverschueren/stream-to-observable@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.1.tgz#a21117b19ee9be70c379ec1877537ef2e1c63301"
+  integrity sha512-c/qwwcHyafOQuVQJj0IlBjf5yYgBI7YPJ77k4fOJYesb41jio65eaJODRUmfYKhTOFBrIZ66kgvGPlNbjuoRdQ==
+  dependencies:
+    any-observable "^0.3.0"
+
+"@types/cheerio@*":
+  version "0.22.30"
+  resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.30.tgz#6c1ded70d20d890337f0f5144be2c5e9ce0936e6"
+  integrity sha512-t7ZVArWZlq3dFa9Yt33qFBQIK4CQd1Q3UJp0V+UhP6vgLWLM6Qug7vZuRSGXg45zXeB1Fm5X2vmBkEX58LV2Tw==
+  dependencies:
+    "@types/node" "*"
+
+"@types/d3@^3":
+  version "3.5.45"
+  resolved "https://registry.yarnpkg.com/@types/d3/-/d3-3.5.45.tgz#cceb1cd8f468b0ed1c96546ddefff3408d7463a7"
+  integrity sha512-wLICfMtjDEoAJie1MF6OuksAzOapRXgJy+l5HQVpyC1yMAlvHz2QKrrasUHru8xD6cbgQNGeO+CeyjOlKtly2A==
+
+"@types/dom4@^2.0.1":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/dom4/-/dom4-2.0.2.tgz#6495303f049689ce936ed328a3e5ede9c51408ee"
+  integrity sha512-Rt4IC1T7xkCWa0OG1oSsPa0iqnxlDeQqKXZAHrQGLb7wFGncWm85MaxKUjAGejOrUynOgWlFi4c6S6IyJwoK4g==
+
+"@types/enzyme-adapter-react-16@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.6.tgz#8aca7ae2fd6c7137d869b6616e696d21bb8b0cec"
+  integrity sha512-VonDkZ15jzqDWL8mPFIQnnLtjwebuL9YnDkqeCDYnB4IVgwUm0mwKkqhrxLL6mb05xm7qqa3IE95m8CZE9imCg==
+  dependencies:
+    "@types/enzyme" "*"
+
+"@types/enzyme@*":
+  version "3.10.9"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.9.tgz#b2d7c7429a37d994c156b6f361e83f271a60c8aa"
+  integrity sha512-dx5UvcWe2Vtye6S9Hw2rFB7Ul9uMXOAje2FAbXvVYieQDNle9qPAo7DfvFMSztZ9NFiD3dVZ4JsRYGTrSLynJg==
+  dependencies:
+    "@types/cheerio" "*"
+    "@types/react" "*"
+
+"@types/hast@^2.0.0":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc"
+  integrity sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g==
+  dependencies:
+    "@types/unist" "*"
+
+"@types/node@*":
+  version "16.7.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.7.2.tgz#0465a39b5456b61a04d98bd5545f8b34be340cb7"
+  integrity sha512-TbG4TOx9hng8FKxaVrCisdaxKxqEwJ3zwHoCWXZ0Jw6mnvTInpaB99/2Cy4+XxpXtjNv9/TgfGSvZFyfV/t8Fw==
+
+"@types/plotly.js@*":
+  version "1.54.14"
+  resolved "https://registry.yarnpkg.com/@types/plotly.js/-/plotly.js-1.54.14.tgz#738f3507f49a707c03aae4fd5d568571ddf8bf31"
+  integrity sha512-vYevenBloZ3B4i831i+ccS9u782JSnkJpBG/c/qPRJNDW6s25udnrmoHkFhbBl7jkzBy8pO2lPNhpMrQJV7ETA==
+  dependencies:
+    "@types/d3" "^3"
+
+"@types/prop-types@*":
+  version "15.7.4"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
+  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+
+"@types/react-plotly.js@^2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@types/react-plotly.js/-/react-plotly.js-2.5.0.tgz#bf7793ed16db13a2bd775ff8fa8f9595e82e8597"
+  integrity sha512-bda7N/Y65d1x0FfwhgUXAugGeG9CRIxmkW/yBL8PVFUMvZGpfEnw4bXKjDozBYlOskVfxj6UQ9IKmZI6CZ7/QQ==
+  dependencies:
+    "@types/plotly.js" "*"
+    "@types/react" "*"
+
+"@types/react-test-renderer@^16.9.1":
+  version "16.9.5"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.5.tgz#edab67da470f7c3e997f58d55dcfe2643cc30a68"
+  integrity sha512-C4cN7C2uSSGOYelp2XfdtJb5TsCP+QiZ+0Bm4U3ZfUswN8oN9O/l86XO/OvBSFCmWY7w75fzsQvZ50eGkFN34A==
+  dependencies:
+    "@types/react" "^16"
+
+"@types/react@*":
+  version "17.0.17"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.17.tgz#1772d3d5425128e0635a716f49ef57c2955df055"
+  integrity sha512-nrfi7I13cAmrd0wje8czYpf5SFbryczCtPzFc6ijqvdjKcyA3tCvGxwchOUlxb2ucBPuJ9Y3oUqKrRqZvrz0lw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/react@^16":
+  version "16.14.14"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.14.tgz#853de95a32a6a0e719192e222eacad024add2b8e"
+  integrity sha512-uwIWDYW8LznHzEMJl7ag9St1RsK0gw/xaFZ5+uI1ZM1HndwUgmPH3/wQkSb87GkOVg7shUxnpNW8DcN0AzvG5Q==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+"@types/sinonjs__fake-timers@^6.0.1":
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.3.tgz#79df6f358ae8f79e628fe35a63608a0ea8e7cf08"
+  integrity sha512-E1dU4fzC9wN2QK2Cr1MLCfyHM8BoNnRFvuf45LYMPNDA+WqbNzC45S4UzPxvp1fFJ1rvSGU0bPvdd35VLmXG8g==
+
+"@types/sizzle@^2.3.2":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"
+  integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
+
+"@types/unist@*":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
+  integrity sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==
+
+acorn-jsx@^5.2.0:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^7.1.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+ag-grid-community@^27.3.0:
+  version "27.3.0"
+  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-27.3.0.tgz#b1e94a58026aaf2f0cd7920e35833325b5e762c7"
+  integrity sha512-R5oZMXEHXnOLrmhn91J8lR0bv6IAnRcU6maO+wKLMJxffRWaAYFAuw1jt7bdmcKCv8c65F6LEBx4ykSOALa9vA==
+
+ag-grid-react@^27.3.0:
+  version "27.3.0"
+  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-27.3.0.tgz#fe06647653f8b0b349b8e613aab8ea2e07915562"
+  integrity sha512-2bs9YfJ/shvBZQLLjny4NFvht+ic6VtpTPO0r3bHHOhlL3Fjx2rGvS6AHSwfvu+kJacHCta30PjaEbX8T3UDyw==
+  dependencies:
+    prop-types "^15.8.1"
+
+ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.3:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+anser@^1.4.1:
+  version "1.4.10"
+  resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.10.tgz#befa3eddf282684bd03b63dcda3927aef8c2e35b"
+  integrity sha512-hCv9AqTQ8ycjpSd3upOJd7vFwW1JaoYQ7tpham03GJ1ca8/65rqn0RpaWpItOAd6ylW9wAw6luXYPJIyPFVOww==
+
+ansi-escapes@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
+
+ansi-escapes@^4.2.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
+ansi-regex@^2.0.0, ansi-regex@^3.0.0, ansi-regex@^4.1.0, ansi-regex@^5.0.0, ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
+
+ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
+  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
+  dependencies:
+    color-convert "^1.9.0"
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-to-react@^6.0.5:
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/ansi-to-react/-/ansi-to-react-6.1.6.tgz#d6fe15ecd4351df626a08121b1646adfe6c02ccb"
+  integrity sha512-+HWn72GKydtupxX9TORBedqOMsJRiKTqaLUKW8txSBZw9iBpzPKLI8KOu4WzwD4R7hSv1zEspobY6LwlWvwZ6Q==
+  dependencies:
+    anser "^1.4.1"
+    escape-carriage "^1.3.0"
+
+antlr4@4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/antlr4/-/antlr4-4.8.0.tgz#f938ec171be7fc2855cd3a533e87647185b32b6a"
+  integrity sha512-en/MxQ4OkPgGJQ3wD/muzj1uDnFSzdFIhc2+c6bHZokWkuBb6RRvFjpWhPxWLbgQvaEzldJZ0GSQpfSAaE3hqg==
+
+antlr4ts-cli@^0.5.0-alpha.4:
+  version "0.5.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/antlr4ts-cli/-/antlr4ts-cli-0.5.0-alpha.4.tgz#f3bfc37f10131e78d7b981c397a2aaa0450b67f6"
+  integrity sha512-lVPVBTA2CVHRYILSKilL6Jd4hAumhSZZWA7UbQNQrmaSSj7dPmmYaN4bOmZG79cOy0lS00i4LY68JZZjZMWVrw==
+
+antlr4ts@^0.5.0-alpha.4:
+  version "0.5.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/antlr4ts/-/antlr4ts-0.5.0-alpha.4.tgz#71702865a87478ed0b40c0709f422cf14d51652a"
+  integrity sha512-WPQDt1B74OfPv/IMS2ekXAKkTZIHl88uMetg6q3OTqgFxZ/dxDXI0EWLyZid/1Pe6hTftyg5N7gel5wNAGxXyQ==
+
+any-observable@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
+  integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
+
+arch@^2.1.2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/arch/-/arch-2.2.0.tgz#1bc47818f305764f23ab3306b0bfc086c5a29d11"
+  integrity sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==
+
+argparse@^1.0.7:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  dependencies:
+    sprintf-js "~1.0.2"
+
+asn1@~0.2.3:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
+  integrity sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==
+  dependencies:
+    safer-buffer "~2.1.0"
+
+assert-plus@1.0.0, assert-plus@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
+  integrity sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=
+
+astral-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
+
+async@^3.2.0:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9"
+  integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
+
+at-least-node@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
+  integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
+
+aws-sign2@~0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
+  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
+
+aws4@^1.8.0:
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
+  integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
+
+bail@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
+  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+base16@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
+  integrity sha1-4pf2DX7BAUp6lxo568ipjAtoHnA=
+
+bcrypt-pbkdf@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
+  integrity sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=
+  dependencies:
+    tweetnacl "^0.14.3"
+
+blob-util@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/blob-util/-/blob-util-2.0.2.tgz#3b4e3c281111bb7f11128518006cdc60b403a1eb"
+  integrity sha512-T7JQa+zsXXEa6/8ZhHcQEW1UFfVM49Ts65uBkFL6fz2QmrElqmbajIDJvuA0tEhRe5eIjpV9ZF+0RfZR9voJFQ==
+
+bluebird@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+buffer-crc32@~0.2.3:
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
+  integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
+
+cachedir@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
+  integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
+
+call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
+
+chalk@^1.0.0, chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
+  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    escape-string-regexp "^1.0.5"
+    supports-color "^5.3.0"
+
+chalk@^4.1.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
+chardet@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
+
+check-more-types@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
+  integrity sha1-FCD/sQ/URNz8ebQ4kbv//TKoRgA=
+
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
+classnames@^2.2, classnames@^2.2.5, classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
+cli-cursor@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-1.0.2.tgz#64da3f7d56a54412e59794bd62dc35295e8f2987"
+  integrity sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=
+  dependencies:
+    restore-cursor "^1.0.1"
+
+cli-cursor@^2.0.0, cli-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
+  dependencies:
+    restore-cursor "^2.0.0"
+
+cli-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
+  integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
+  dependencies:
+    restore-cursor "^3.1.0"
+
+cli-table3@~0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.0.tgz#b7b1bc65ca8e7b5cef9124e13dc2b21e2ce4faee"
+  integrity sha512-gnB85c3MGC7Nm9I/FkiasNBOKjOiO1RNuXXarQms37q4QMpWdlbBgD/VnOStA2faG1dpXMv31RFApjX1/QdgWQ==
+  dependencies:
+    object-assign "^4.1.0"
+    string-width "^4.2.0"
+  optionalDependencies:
+    colors "^1.1.2"
+
+cli-truncate@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-0.2.1.tgz#9f15cfbb0705005369216c626ac7d05ab90dd574"
+  integrity sha1-nxXPuwcFAFNpIWxiasfQWrkN1XQ=
+  dependencies:
+    slice-ansi "0.0.4"
+    string-width "^1.0.1"
+
+cli-width@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
+  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
+
+code-point-at@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
+  integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
+
+collapse-white-space@^1.0.2:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
+  integrity sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==
+
+color-convert@^1.9.0:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colors@^1.1.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
+  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
+
+combined-stream@^1.0.6, combined-stream@~1.0.6:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+comma-separated-tokens@^1.0.0:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
+  integrity sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==
+
+commander@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
+  integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
+
+common-tags@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
+  integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
+concat-stream@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
+  integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
+  dependencies:
+    buffer-from "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^2.2.2"
+    typedarray "^0.0.6"
+
+core-util-is@1.0.2, core-util-is@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+
+cross-spawn@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
+  dependencies:
+    nice-try "^1.0.4"
+    path-key "^2.0.1"
+    semver "^5.5.0"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
+cross-spawn@^7.0.0:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+csstype@^3.0.2:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
+  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
+
+cypress@^5.0.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-5.6.0.tgz#6781755c3ddfd644ce3179fcd7389176c0c82280"
+  integrity sha512-cs5vG3E2JLldAc16+5yQxaVRLLqMVya5RlrfPWkC72S5xrlHFdw7ovxPb61s4wYweROKTyH01WQc2PFzwwVvyQ==
+  dependencies:
+    "@cypress/listr-verbose-renderer" "^0.4.1"
+    "@cypress/request" "^2.88.5"
+    "@cypress/xvfb" "^1.2.4"
+    "@types/sinonjs__fake-timers" "^6.0.1"
+    "@types/sizzle" "^2.3.2"
+    arch "^2.1.2"
+    blob-util "2.0.2"
+    bluebird "^3.7.2"
+    cachedir "^2.3.0"
+    chalk "^4.1.0"
+    check-more-types "^2.24.0"
+    cli-table3 "~0.6.0"
+    commander "^5.1.0"
+    common-tags "^1.8.0"
+    debug "^4.1.1"
+    eventemitter2 "^6.4.2"
+    execa "^4.0.2"
+    executable "^4.1.1"
+    extract-zip "^1.7.0"
+    fs-extra "^9.0.1"
+    getos "^3.2.1"
+    is-ci "^2.0.0"
+    is-installed-globally "^0.3.2"
+    lazy-ass "^1.6.0"
+    listr "^0.14.3"
+    lodash "^4.17.19"
+    log-symbols "^4.0.0"
+    minimist "^1.2.5"
+    moment "^2.27.0"
+    ospath "^1.2.2"
+    pretty-bytes "^5.4.1"
+    ramda "~0.26.1"
+    request-progress "^3.0.0"
+    supports-color "^7.2.0"
+    tmp "~0.2.1"
+    untildify "^4.0.0"
+    url "^0.11.0"
+    yauzl "^2.10.0"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
+  dependencies:
+    assert-plus "^1.0.0"
+
+date-fns@^1.27.2:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
+  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
+
+debug@^2.6.9:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.1.0:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.0.1:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+debug@^4.1.1:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
+  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+  dependencies:
+    ms "2.1.2"
+
+deep-equal@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
+  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
+  dependencies:
+    is-arguments "^1.0.4"
+    is-date-object "^1.0.1"
+    is-regex "^1.0.4"
+    object-is "^1.0.1"
+    object-keys "^1.1.1"
+    regexp.prototype.flags "^1.2.0"
+
+deep-is@~0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+define-properties@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+dom-helpers@^3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
+dom-serializer@^1.0.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
+dom4@^2.1.5:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/dom4/-/dom4-2.1.6.tgz#c90df07134aa0dbd81ed4d6ba1237b36fc164770"
+  integrity sha512-JkCVGnN4ofKGbjf5Uvc8mmxaATIErKQKSgACdBXpsQ3fY6DlIpAyWfiBSrGkttATssbDCp3psiAKWXk5gmjycA==
+
+domelementtype@^2.0.1, domelementtype@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
+domhandler@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.3.0.tgz#6db7ea46e4617eb15cf875df68b2b8524ce0037a"
+  integrity sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==
+  dependencies:
+    domelementtype "^2.0.1"
+
+domhandler@^4.2.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.2.tgz#e825d721d19a86b8c201a35264e226c678ee755f"
+  integrity sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.4.2:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
+ecc-jsbn@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
+  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
+  dependencies:
+    jsbn "~0.1.0"
+    safer-buffer "^2.1.0"
+
+elegant-spinner@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
+  integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
+
+emoji-regex@^7.0.1:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+  integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+end-of-stream@^1.1.0:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
+  dependencies:
+    once "^1.4.0"
+
+entities@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
+
+escape-carriage@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/escape-carriage/-/escape-carriage-1.3.0.tgz#71006b2d4da8cb6828686addafcb094239c742f3"
+  integrity sha512-ATWi5MD8QlAGQOeMgI8zTp671BG8aKvAC0M7yenlxU4CRLGO/sKthxVUyjiOFKjHdIo+6dZZUNFgHFeVEaKfGQ==
+
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
+  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+
+eslint-scope@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-utils@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
+  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-visitor-keys@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
+eslint@^6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
+  integrity sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    ajv "^6.10.0"
+    chalk "^2.1.0"
+    cross-spawn "^6.0.5"
+    debug "^4.0.1"
+    doctrine "^3.0.0"
+    eslint-scope "^5.0.0"
+    eslint-utils "^1.4.3"
+    eslint-visitor-keys "^1.1.0"
+    espree "^6.1.2"
+    esquery "^1.0.1"
+    esutils "^2.0.2"
+    file-entry-cache "^5.0.1"
+    functional-red-black-tree "^1.0.1"
+    glob-parent "^5.0.0"
+    globals "^12.1.0"
+    ignore "^4.0.6"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    inquirer "^7.0.0"
+    is-glob "^4.0.0"
+    js-yaml "^3.13.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.3.0"
+    lodash "^4.17.14"
+    minimatch "^3.0.4"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    optionator "^0.8.3"
+    progress "^2.0.0"
+    regexpp "^2.0.1"
+    semver "^6.1.2"
+    strip-ansi "^5.2.0"
+    strip-json-comments "^3.0.1"
+    table "^5.2.3"
+    text-table "^0.2.0"
+    v8-compile-cache "^2.0.3"
+
+espree@^6.1.2:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
+  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.1.0"
+
+esprima@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
+
+esquery@^1.0.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+eventemitter2@^6.4.2:
+  version "6.4.4"
+  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.4.tgz#aa96e8275c4dbeb017a5d0e03780c65612a1202b"
+  integrity sha512-HLU3NDY6wARrLCEwyGKRBvuWYyvW6mHYv72SJJAH3iJN3a6eVUvkjFkcxah1bcTgGVBBrFdIopBJPhCQFMLyXw==
+
+execa@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
+  integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
+executable@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/executable/-/executable-4.1.1.tgz#41532bff361d3e57af4d763b70582db18f5d133c"
+  integrity sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==
+  dependencies:
+    pify "^2.2.0"
+
+exit-hook@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
+  integrity sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=
+
+extend@^3.0.0, extend@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
+external-editor@^3.0.3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
+  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
+  dependencies:
+    chardet "^0.7.0"
+    iconv-lite "^0.4.24"
+    tmp "^0.0.33"
+
+extract-zip@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.7.0.tgz#556cc3ae9df7f452c493a0cfb51cc30277940927"
+  integrity sha512-xoh5G1W/PB0/27lXgMQyIhP5DSY/LhoCsOyZgb+6iMmRtCwVBo55uKaMoEYrDCKQhWvqEip5ZPKAc6eFNyf/MA==
+  dependencies:
+    concat-stream "^1.6.2"
+    debug "^2.6.9"
+    mkdirp "^0.5.4"
+    yauzl "^2.10.0"
+
+extsprintf@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
+  integrity sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=
+
+extsprintf@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
+  integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
+
+fast-deep-equal@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@~2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
+fast-memoize@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.2.tgz#79e3bb6a4ec867ea40ba0e7146816f6cdce9b57e"
+  integrity sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==
+
+fault@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-1.0.4.tgz#eafcfc0a6d214fc94601e170df29954a4f842f13"
+  integrity sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==
+  dependencies:
+    format "^0.2.0"
+
+fd-slicer@~1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
+  integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
+  dependencies:
+    pend "~1.2.0"
+
+figures@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  integrity sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^4.1.0"
+
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+figures@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
+  integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+file-entry-cache@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
+  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
+  dependencies:
+    flat-cache "^2.0.1"
+
+flat-cache@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
+  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
+  dependencies:
+    flatted "^2.0.0"
+    rimraf "2.6.3"
+    write "1.0.3"
+
+flatted@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
+  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
+
+forever-agent@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
+  integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
+
+form-data@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
+  integrity sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.6"
+    mime-types "^2.1.12"
+
+format@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
+
+fs-extra@^9.0.1:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
+
+get-intrinsic@^1.0.2:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
+  integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+
+get-stream@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
+getos@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/getos/-/getos-3.2.1.tgz#0134d1f4e00eb46144c5a9c0ac4dc087cbb27dc5"
+  integrity sha512-U56CfOK17OKgTVqozZjUKNdkfEv6jk5WISBJ8SHoagjE6L69zOwl3Z+O8myjY9MEW3i2HPWQBt/LTbCgcC973Q==
+  dependencies:
+    async "^3.2.0"
+
+getpass@^0.1.1:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
+  integrity sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=
+  dependencies:
+    assert-plus "^1.0.0"
+
+glob-parent@^5.0.0, glob-parent@^6.0.1:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob@^7.1.3:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.1.7:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+global-dirs@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-2.1.0.tgz#e9046a49c806ff04d6c1825e196c8f0091e8df4d"
+  integrity sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==
+  dependencies:
+    ini "1.3.7"
+
+globals@^12.1.0:
+  version "12.4.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
+  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
+  dependencies:
+    type-fest "^0.8.1"
+
+graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
+  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
+
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+
+har-schema@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
+  integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
+
+har-validator@~5.1.3:
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
+  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
+  dependencies:
+    ajv "^6.12.3"
+    har-schema "^2.0.0"
+
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
+  dependencies:
+    ansi-regex "^2.0.0"
+
+has-flag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-symbols@^1.0.1, has-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hast-util-parse-selector@^2.0.0:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz#d57c23f4da16ae3c63b3b6ca4616683313499c3a"
+  integrity sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==
+
+hastscript@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-6.0.0.tgz#e8768d7eac56c3fdeac8a92830d58e811e5bf640"
+  integrity sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==
+  dependencies:
+    "@types/hast" "^2.0.0"
+    comma-separated-tokens "^1.0.0"
+    hast-util-parse-selector "^2.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+
+highlight.js@^10.4.1, highlight.js@~10.7.0:
+  version "10.7.3"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
+  integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
+
+html-to-react@^1.3.4:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/html-to-react/-/html-to-react-1.4.5.tgz#59091c11021d1ef315ef738460abb6a4a41fe1ce"
+  integrity sha512-KONZUDFPg5OodWaQu2ymfkDmU0JA7zB1iPfvyHehTmMUZnk0DS7/TyCMTzsLH6b4BvxX15g88qZCXFhJWktsmA==
+  dependencies:
+    domhandler "^3.3.0"
+    htmlparser2 "^5.0"
+    lodash.camelcase "^4.3.0"
+    ramda "^0.27.1"
+
+htmlparser2@^5.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-5.0.1.tgz#7daa6fc3e35d6107ac95a4fc08781f091664f6e7"
+  integrity sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^3.3.0"
+    domutils "^2.4.2"
+    entities "^2.0.0"
+
+http-signature@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+  integrity sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=
+  dependencies:
+    assert-plus "^1.0.0"
+    jsprim "^1.2.2"
+    sshpk "^1.7.0"
+
+human-signals@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
+  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
+
+iconv-lite@^0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
+ignore@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
+immer@^9.0.1:
+  version "9.0.6"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.6.tgz#7a96bf2674d06c8143e327cbf73539388ddf1a73"
+  integrity sha512-G95ivKpy+EvVAnAab4fVa4YGYn24J1SpEktnJX7JJ45Bd7xqME/SCplFzYFmTbrkwZbQ4xJK1xMTUYBkN6pWsQ==
+
+import-fresh@^3.0.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
+
+indent-string@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.0, inherits@^2.0.3, inherits@~2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+ini@1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
+  integrity sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==
+
+inquirer@^7.0.0:
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
+  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-width "^3.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.19"
+    mute-stream "0.0.8"
+    run-async "^2.4.0"
+    rxjs "^6.6.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+    through "^2.3.6"
+
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
+is-arguments@^1.0.4:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
+  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-buffer@^1.1.4:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
+is-date-object@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+
+is-fullwidth-code-point@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
+  integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
+  dependencies:
+    number-is-nan "^1.0.0"
+
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-glob@^4.0.0, is-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
+is-installed-globally@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
+  integrity sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==
+  dependencies:
+    global-dirs "^2.0.1"
+    is-path-inside "^3.0.1"
+
+is-observable@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-1.1.0.tgz#b3e986c8f44de950867cab5403f5a3465005975e"
+  integrity sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==
+  dependencies:
+    symbol-observable "^1.1.0"
+
+is-path-inside@^3.0.1:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
+
+is-plain-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
+
+is-promise@^2.1.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
+  integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
+
+is-regex@^1.0.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.4.tgz#eef5663cd59fa4c0ae339505323df6854bb15958"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
+
+is-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
+
+is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
+
+is-unicode-supported@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
+  integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
+
+is-whitespace-character@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
+  integrity sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==
+
+is-word-character@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.4.tgz#ce0e73216f98599060592f62ff31354ddbeb0230"
+  integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
+
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+
+isstream@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
+
+jest-dom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jest-dom/-/jest-dom-4.0.0.tgz#94eba3cbc6576e7bd6821867c92d176de28920eb"
+  integrity sha512-gBxYZlZB1Jgvf2gP2pRfjjUWF8woGBHj/g5rAQgFPB/0K2atGuhVcPO+BItyjWeKg9zM+dokgcMOH01vrWVMFA==
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^3.13.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.1.tgz#dae812fdb3825fa306609a8717383c50c36a0537"
+  integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-schema@0.2.3, json-schema@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.4.0.tgz#f7de4cf6efab838ebaeb3236474cbba5a1930ab5"
+  integrity sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
+
+json-stringify-safe@~5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
+  integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+jsprim@^1.2.2:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
+  dependencies:
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
+    json-schema "0.2.3"
+    verror "1.10.0"
+
+lazy-ass@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
+  integrity sha1-eZllXoZGwX8In90YfRUNMyTVRRM=
+
+levn@^0.3.0, levn@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
+  dependencies:
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+
+listr-silent-renderer@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
+  integrity sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=
+
+listr-update-renderer@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz#4ea8368548a7b8aecb7e06d8c95cb45ae2ede6a2"
+  integrity sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==
+  dependencies:
+    chalk "^1.1.3"
+    cli-truncate "^0.2.1"
+    elegant-spinner "^1.0.1"
+    figures "^1.7.0"
+    indent-string "^3.0.0"
+    log-symbols "^1.0.2"
+    log-update "^2.3.0"
+    strip-ansi "^3.0.1"
+
+listr-verbose-renderer@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz#f1132167535ea4c1261102b9f28dac7cba1e03db"
+  integrity sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==
+  dependencies:
+    chalk "^2.4.1"
+    cli-cursor "^2.1.0"
+    date-fns "^1.27.2"
+    figures "^2.0.0"
+
+listr@^0.14.3:
+  version "0.14.3"
+  resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
+  integrity sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==
+  dependencies:
+    "@samverschueren/stream-to-observable" "^0.3.0"
+    is-observable "^1.1.0"
+    is-promise "^2.1.0"
+    is-stream "^1.1.0"
+    listr-silent-renderer "^1.1.1"
+    listr-update-renderer "^0.5.0"
+    listr-verbose-renderer "^0.5.0"
+    p-map "^2.0.0"
+    rxjs "^6.3.3"
+
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ=
+
+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
+
+lodash.curry@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
+  integrity sha1-JI42By7ekGUB11lmIAqG2riyMXA=
+
+lodash.flow@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+  integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
+
+lodash.once@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+  integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
+
+lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+log-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
+  integrity sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=
+  dependencies:
+    chalk "^1.0.0"
+
+log-symbols@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
+  integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
+  dependencies:
+    chalk "^4.1.0"
+    is-unicode-supported "^0.1.0"
+
+log-update@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
+  integrity sha1-iDKP19HOeTiykoN0bwsbwSayRwg=
+  dependencies:
+    ansi-escapes "^3.0.0"
+    cli-cursor "^2.0.0"
+    wrap-ansi "^3.0.1"
+
+loose-envify@^1.0.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lowlight@^1.17.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
+  integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
+  dependencies:
+    fault "^1.0.0"
+    highlight.js "~10.7.0"
+
+markdown-escapes@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
+  integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
+
+mdast-add-list-metadata@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-add-list-metadata/-/mdast-add-list-metadata-1.0.1.tgz#95e73640ce2fc1fa2dcb7ec443d09e2bfe7db4cf"
+  integrity sha512-fB/VP4MJ0LaRsog7hGPxgOrSL3gE/2uEdZyDuSEnKCv/8IkYHiDkIQSbChiJoHyxZZXZ9bzckyRk+vNxFzh8rA==
+  dependencies:
+    unist-util-visit-parents "1.1.2"
+
+merge-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
+
+mime-db@1.49.0:
+  version "1.49.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.49.0.tgz#f3dfde60c99e9cf3bc9701d687778f537001cbed"
+  integrity sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==
+
+mime-types@^2.1.12, mime-types@~2.1.19:
+  version "2.1.32"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.32.tgz#1d00e89e7de7fe02008db61001d9e02852670fd5"
+  integrity sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==
+  dependencies:
+    mime-db "1.49.0"
+
+mimic-fn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
+
+mimic-fn@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimist@^1.2.5, minimist@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+
+mkdirp@^0.5.1:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
+  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
+  dependencies:
+    minimist "^1.2.6"
+
+mkdirp@^0.5.4:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
+moment@^2.27.0:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+
+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@^2.1.1:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+mute-stream@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
+  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
+
+nice-try@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
+
+normalize.css@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
+npm-run-path@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
+  dependencies:
+    path-key "^3.0.0"
+
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
+
+oauth-sign@~0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
+  integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
+
+object-assign@^4.1.0, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
+
+object-is@^1.0.1:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
+  integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+object-keys@^1.0.12, object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+once@^1.3.0, once@^1.3.1, once@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
+onetime@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
+  integrity sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=
+
+onetime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
+  dependencies:
+    mimic-fn "^1.0.0"
+
+onetime@^5.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
+  dependencies:
+    mimic-fn "^2.1.0"
+
+optionator@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
+  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
+  dependencies:
+    deep-is "~0.1.3"
+    fast-levenshtein "~2.0.6"
+    levn "~0.3.0"
+    prelude-ls "~1.1.2"
+    type-check "~0.3.2"
+    word-wrap "~1.2.3"
+
+os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
+
+ospath@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/ospath/-/ospath-1.2.2.tgz#1276639774a3f8ef2572f7fe4280e0ea4550c07b"
+  integrity sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=
+
+p-map@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
+  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parse-entities@^1.1.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.2.2.tgz#c31bf0f653b6661354f8973559cb86dd1d5edf50"
+  integrity sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
+path-key@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
+  integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
+
+path-key@^3.0.0, path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+pend@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
+  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
+
+performance-now@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+
+pify@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
+
+plotly.js-dist@^2.2.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/plotly.js-dist/-/plotly.js-dist-2.4.1.tgz#0afaf84132427720eda625c5908d9981318ab348"
+  integrity sha512-OsZgXlUJaxib+6HjrEaux61FaqNVLDiotNKF5JdoacigvAWoiTRUAD/K1x560jFR3fDzXaZ4mpXBbJukc5i3HQ==
+
+popper.js@^1.14.4, popper.js@^1.16.1:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
+
+postinstall@^0.7.4:
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/postinstall/-/postinstall-0.7.4.tgz#ab8de950f5d0350d753747c8b2606e347c80b3c8"
+  integrity sha512-jrItKnoJJCY6wuhP/LpTy5KyWJYUOOs+2477PUAXDCrJOZX2vgzCD3jgXawhJG4qdFxvAepaJLum1trieFbEuw==
+  dependencies:
+    "@danieldietrich/copy" "^0.4.2"
+    glob "^7.1.7"
+    minimist "^1.2.5"
+    resolve-from "^5.0.0"
+    resolve-pkg "^2.0.0"
+
+prelude-ls@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
+
+pretty-bytes@^5.4.1:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
+  integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
+
+prismjs@^1.22.0, prismjs@~1.24.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
+  integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
+
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
+progress@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
+
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+property-information@^5.0.0:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
+  integrity sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==
+  dependencies:
+    xtend "^4.0.0"
+
+psl@^1.1.28:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
+  integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
+
+pump@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
+  integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
+  dependencies:
+    end-of-stream "^1.1.0"
+    once "^1.3.1"
+
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
+
+punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+pure-color@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
+  integrity sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=
+
+qs@~6.5.2, qs@~6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad"
+  integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
+
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
+
+ramda@^0.27.1:
+  version "0.27.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
+  integrity sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==
+
+ramda@~0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
+
+re-resizable@^6.5.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.9.0.tgz#9c3059b389ced6ade602234cc5bb1e12d231cd47"
+  integrity sha512-3cUDG81ylyqI0Pdgle/RHwwRYq0ORZzsUaySOCO8IbEtNyaRtrIHYm/jMQ5pjcNiKCxR3vsSymIQZHwJq4gg2Q==
+  dependencies:
+    fast-memoize "^2.5.1"
+
+react-base16-styling@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.7.0.tgz#0c9653e14f1f08dc81ad066cd31e9cfec89c80ea"
+  integrity sha512-lTa/VSFdU6BOAj+FryOe7OTZ0OBP8GXPOnCS0QnZi7G3zhssWgIgwl0eUL77onXx/WqKPFndB3ZeC77QC/l4Dw==
+  dependencies:
+    base16 "^1.0.0"
+    lodash.curry "^4.1.1"
+    lodash.flow "^3.5.0"
+    pure-color "^1.3.0"
+
+react-graph-vis@^1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/react-graph-vis/-/react-graph-vis-1.0.7.tgz#55b934100c5235e7cc0e8721646c21246e4b7d75"
+  integrity sha512-FI35zlBMKU22JEvG1ukd1DDwW185y4YrDvHm6Bom9EGdA+UNMrZrIV/lyPIRWPcRkzbKaA1w1NvOYcRApD4KdQ==
+  dependencies:
+    lodash "^4.17.15"
+    prop-types "^15.5.10"
+    uuid "^2.0.1"
+    vis-data "^7.1.2"
+    vis-network "^9.0.0"
+
+react-is@^16.13.1, react-is@^16.8.1, react-is@^16.8.6:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-json-tree@^0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/react-json-tree/-/react-json-tree-0.12.1.tgz#123ac8a2c722857d2cb1a5e0c948b0943576ef1a"
+  integrity sha512-j6fkRY7ha9XMv1HPVakRCsvyFwHGR5AZuwO8naBBeZXnZbbLor5tpcUxS/8XD01+D1v7ZN5p+7LU+9V1uyASiQ==
+  dependencies:
+    prop-types "^15.7.2"
+    react-base16-styling "^0.7.0"
+
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-markdown@^4.0.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-4.3.1.tgz#39f0633b94a027445b86c9811142d05381300f2f"
+  integrity sha512-HQlWFTbDxTtNY6bjgp3C3uv1h2xcjCSi1zAEzfBW9OwJJvENSYiLXWNXN5hHLsoqai7RnZiiHzcnWdXk2Splzw==
+  dependencies:
+    html-to-react "^1.3.4"
+    mdast-add-list-metadata "1.0.1"
+    prop-types "^15.7.2"
+    react-is "^16.8.6"
+    remark-parse "^5.0.0"
+    unified "^6.1.5"
+    unist-util-visit "^1.3.0"
+    xtend "^4.0.1"
+
+react-paginate@^8.1.3:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-8.1.3.tgz#cd6f3cb8a56b47617a61a6a52e3d7c662ad9b91b"
+  integrity sha512-zBp80DBRcaeBnAeHUfbGKD0XHfbGNUolQ+S60Ymfs8o7rusYaJYZMAt1j93ADDNLlzRmJ0tMF/NeTlcdKf7dlQ==
+  dependencies:
+    prop-types "^15.6.1"
+
+react-plotly.js@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/react-plotly.js/-/react-plotly.js-2.5.1.tgz#11182bf599ef11a0dbfcd171c6f5645535a2b486"
+  integrity sha512-Oya14whSHvPsYXdI0nHOGs1pZhMzV2edV7HAW1xFHD58Y73m/LbG2Encvyz1tztL0vfjph0JNhiwO8cGBJnlhg==
+  dependencies:
+    prop-types "^15.7.2"
+
+react-popper@^1.3.7:
+  version "1.3.11"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
+  integrity sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    "@hypnosphi/create-react-context" "^0.3.1"
+    deep-equal "^1.1.1"
+    popper.js "^1.14.4"
+    prop-types "^15.6.1"
+    typed-styles "^0.0.7"
+    warning "^4.0.2"
+
+react-syntax-highlighter@^13.0.0, react-syntax-highlighter@^15.4.3:
+  version "15.4.4"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz#dc9043f19e7bd063ff3ea78986d22a6eaa943b2a"
+  integrity sha512-PsOFHNTzkb3OroXdoR897eKN5EZ6grht1iM+f1lJSq7/L0YVnkJaNVwC3wEUYPOAmeyl5xyer1DjL6MrumO6Zw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "^10.4.1"
+    lowlight "^1.17.0"
+    prismjs "^1.22.0"
+    refractor "^3.2.0"
+
+react-toggle@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-4.1.2.tgz#b00500832f925ad524356d909821821ae39f6c52"
+  integrity sha512-4Ohw31TuYQdhWfA6qlKafeXx3IOH7t4ZHhmRdwsm1fQREwOBGxJT+I22sgHqR/w8JRdk+AeMCJXPImEFSrNXow==
+  dependencies:
+    classnames "^2.2.5"
+
+react-transition-group@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
+  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+  dependencies:
+    dom-helpers "^3.4.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+    react-lifecycles-compat "^3.0.4"
+
+readable-stream@^2.2.2:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
+redux@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.1.tgz#76f1c439bb42043f985fbd9bf21990e60bd67f47"
+  integrity sha512-hZQZdDEM25UY2P493kPYuKqviVwZ58lEmGQNeQ+gXa+U0gYPUBf7NKYazbe3m+bs/DzM/ahN12DbF+NG8i0CWw==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
+refractor@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.4.0.tgz#62bd274b06c942041f390c371b676eb67cb0a678"
+  integrity sha512-dBeD02lC5eytm9Gld2Mx0cMcnR+zhSnsTfPpWqFaMgUMJfC9A6bcN3Br/NaXrnBJcuxnLFR90k1jrkaSyV8umg==
+  dependencies:
+    hastscript "^6.0.0"
+    parse-entities "^2.0.0"
+    prismjs "~1.24.0"
+
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regexp.prototype.flags@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz#7ef352ae8d159e758c0eadca6f8fcb4eef07be26"
+  integrity sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+
+regexpp@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
+  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
+
+remark-parse@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-5.0.0.tgz#4c077f9e499044d1d5c13f80d7a98cf7b9285d95"
+  integrity sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==
+  dependencies:
+    collapse-white-space "^1.0.2"
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    is-word-character "^1.0.0"
+    markdown-escapes "^1.0.0"
+    parse-entities "^1.1.0"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    trim "0.0.1"
+    trim-trailing-lines "^1.0.0"
+    unherit "^1.0.4"
+    unist-util-remove-position "^1.0.0"
+    vfile-location "^2.0.0"
+    xtend "^4.0.1"
+
+repeat-string@^1.5.4:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
+
+replace-ext@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
+  integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
+
+request-progress@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
+  integrity sha1-TKdUCBx/7GP1BeT6qCWqBs1mnb4=
+  dependencies:
+    throttleit "^1.0.0"
+
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
+resolve-pkg@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pkg/-/resolve-pkg-2.0.0.tgz#ac06991418a7623edc119084edc98b0e6bf05a41"
+  integrity sha512-+1lzwXehGCXSeryaISr6WujZzowloigEofRB+dj75y9RRa/obVcYgbHJd53tdYw8pvZj8GojXaaENws8Ktw/hQ==
+  dependencies:
+    resolve-from "^5.0.0"
+
+restore-cursor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
+  integrity sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=
+  dependencies:
+    exit-hook "^1.0.0"
+    onetime "^1.0.0"
+
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
+  dependencies:
+    onetime "^2.0.0"
+    signal-exit "^3.0.2"
+
+restore-cursor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
+  integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
+  dependencies:
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+
+rimraf@2.6.3:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
+  dependencies:
+    glob "^7.1.3"
+
+rimraf@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+run-async@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
+
+rxjs@^6.3.3, rxjs@^6.6.0:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  dependencies:
+    tslib "^1.9.0"
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.2:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
+"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+semver@^5.5.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@^6.1.2:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+shebang-command@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
+  integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
+  dependencies:
+    shebang-regex "^1.0.0"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
+  integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+signal-exit@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+
+slice-ansi@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
+  integrity sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=
+
+slice-ansi@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
+  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
+  dependencies:
+    ansi-styles "^3.2.0"
+    astral-regex "^1.0.0"
+    is-fullwidth-code-point "^2.0.0"
+
+space-separated-tokens@^1.0.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
+  integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
+
+sprintf-js@~1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
+
+sshpk@^1.7.0:
+  version "1.16.1"
+  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
+  integrity sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==
+  dependencies:
+    asn1 "~0.2.3"
+    assert-plus "^1.0.0"
+    bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
+    ecc-jsbn "~0.1.1"
+    getpass "^0.1.1"
+    jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
+    tweetnacl "~0.14.0"
+
+state-toggle@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
+  integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
+
+string-width@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
+  integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
+  dependencies:
+    code-point-at "^1.0.0"
+    is-fullwidth-code-point "^1.0.0"
+    strip-ansi "^3.0.0"
+
+string-width@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
+  dependencies:
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
+
+string-width@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+  integrity sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==
+  dependencies:
+    emoji-regex "^7.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^5.1.0"
+
+string-width@^4.1.0:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.2.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.2.tgz#dafd4f9559a7585cfba529c6a0a4f73488ebd4c5"
+  integrity sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
+
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
+  integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
+  dependencies:
+    ansi-regex "^2.0.0"
+
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
+  dependencies:
+    ansi-regex "^3.0.0"
+
+strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  integrity sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==
+  dependencies:
+    ansi-regex "^4.1.0"
+
+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  dependencies:
+    ansi-regex "^5.0.0"
+
+strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-final-newline@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
+
+strip-json-comments@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
+
+supports-color@^5.3.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
+supports-color@^7.1.0, supports-color@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+symbol-observable@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
+table@^5.2.3:
+  version "5.4.6"
+  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
+  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
+  dependencies:
+    ajv "^6.10.2"
+    lodash "^4.17.14"
+    slice-ansi "^2.1.0"
+    string-width "^3.0.0"
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
+
+throttleit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.0.tgz#9e785836daf46743145a5984b6268d828528ac6c"
+  integrity sha1-nnhYNtr0Z0MUWlmEtiaNgoUorGw=
+
+through@^2.3.6:
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
+  integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
+
+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
+  dependencies:
+    os-tmpdir "~1.0.2"
+
+tmp@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
+  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
+  dependencies:
+    rimraf "^3.0.0"
+
+tough-cookie@~2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
+  integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
+  dependencies:
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
+trim-trailing-lines@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz#bd4abbec7cc880462f10b2c8b5ce1d8d1ec7c2c0"
+  integrity sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==
+
+trim@0.0.1, trim@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/trim/-/trim-1.0.1.tgz#68e78f6178ccab9687a610752f4f5e5a7022ee8c"
+  integrity sha512-3JVP2YVqITUisXblCDq/Bi4P9457G/sdEamInkyvCsjbTcXLXIiG7XCb4kGMFWh6JGXesS3TKxOPtrncN/xe8w==
+
+trough@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
+  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
+
+tslib@^1.9.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@~1.13.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
+  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
+
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  integrity sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=
+  dependencies:
+    safe-buffer "^5.0.1"
+
+tweetnacl@^0.14.3, tweetnacl@~0.14.0:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.5.tgz#5ae68177f192d4456269d108afa93ff8743f4f64"
+  integrity sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=
+
+type-check@~0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
+  dependencies:
+    prelude-ls "~1.1.2"
+
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
+typed-styles@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
+  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
+
+typedarray@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+  integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
+
+unherit@^1.0.4:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
+  integrity sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==
+  dependencies:
+    inherits "^2.0.0"
+    xtend "^4.0.0"
+
+unified@^6.1.5:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba"
+  integrity sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-plain-obj "^1.1.0"
+    trough "^1.0.0"
+    vfile "^2.0.0"
+    x-is-string "^0.1.0"
+
+unist-util-is@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
+  integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
+
+unist-util-remove-position@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz#ec037348b6102c897703eee6d0294ca4755a2020"
+  integrity sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==
+  dependencies:
+    unist-util-visit "^1.1.0"
+
+unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
+  integrity sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ==
+
+unist-util-visit-parents@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz#f6e3afee8bdbf961c0e6f028ea3c0480028c3d06"
+  integrity sha512-yvo+MMLjEwdc3RhhPYSximset7rwjMrdt9E41Smmvg25UQIenzrN83cRnF1JMzoMi9zZOQeYXHSDf7p+IQkW3Q==
+
+unist-util-visit-parents@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz#25e43e55312166f3348cae6743588781d112c1e9"
+  integrity sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==
+  dependencies:
+    unist-util-is "^3.0.0"
+
+unist-util-visit@^1.1.0, unist-util-visit@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
+  integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
+  dependencies:
+    unist-util-visit-parents "^2.0.0"
+
+universalify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+
+untildify@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+util-deprecate@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+
+uuid@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
+  integrity sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=
+
+uuid@^3.3.2:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
+v8-compile-cache@^2.0.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+
+verror@1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
+  integrity sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=
+  dependencies:
+    assert-plus "^1.0.0"
+    core-util-is "1.0.2"
+    extsprintf "^1.2.0"
+
+vfile-location@^2.0.0:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.6.tgz#8a274f39411b8719ea5728802e10d9e0dff1519e"
+  integrity sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA==
+
+vfile-message@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.1.1.tgz#5833ae078a1dfa2d96e9647886cd32993ab313e1"
+  integrity sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==
+  dependencies:
+    unist-util-stringify-position "^1.1.1"
+
+vfile@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-2.3.0.tgz#e62d8e72b20e83c324bc6c67278ee272488bf84a"
+  integrity sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==
+  dependencies:
+    is-buffer "^1.1.4"
+    replace-ext "1.0.0"
+    unist-util-stringify-position "^1.0.0"
+    vfile-message "^1.0.0"
+
+vis-data@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/vis-data/-/vis-data-7.1.2.tgz#b7d076ac79cb54f7c5e9c80f5b03b93cc8cc1fda"
+  integrity sha512-RPSegFxEcnp3HUEJSzhS2vBdbJ2PSsrYYuhRlpHp2frO/MfRtTYbIkkLZmPkA/Sg3pPfBlR235gcoKbtdm4mbw==
+
+vis-network@^9.0.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/vis-network/-/vis-network-9.1.0.tgz#511db833b68060f279bedc4a852671261d40204e"
+  integrity sha512-rx96L144RJWcqOa6afjiFyxZKUerRRbT/YaNMpsusHdwzxrVTO2LlduR45PeJDEztrAf3AU5l2zmiG+1ydUZCw==
+
+warning@^4.0.2, warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
+which@^1.2.9:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@~1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+wrap-ansi@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"
+  integrity sha1-KIoE2H7aXChuBg3+jxNc6NAH+Lo=
+  dependencies:
+    string-width "^2.1.1"
+    strip-ansi "^4.0.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
+
+write@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
+  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
+  dependencies:
+    mkdirp "^0.5.1"
+
+x-is-string@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/x-is-string/-/x-is-string-0.1.0.tgz#474b50865af3a49a9c4657f05acd145458f77d82"
+  integrity sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI=
+
+xtend@^4.0.0, xtend@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
+yauzl@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
+  integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
+  dependencies:
+    buffer-crc32 "~0.2.3"
+    fd-slicer "~1.1.0"